ive just beautified the code of korakot, this version updates the working directory too, when you navigate

from IPython.display import JSON
from google.colab import output
from subprocess import getoutput
import os

def shell(command):
  if command.startswith('cd'):
    path = command.strip().split(maxsplit=1)[1]
    os.chdir(path)
    return JSON([''])
  return JSON([getoutput(command)])
output.register_callback('shell', shell)

next cell

#@title Colab Shell
%%html
<div id="term_demo"></div>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet"/>
<style>
  #term_demo {
      font-size: 20px;  /* Adjust the font size here */
  }
</style>
<script>
  let currentPath = '{current_path}';

  $('#term_demo').terminal(async function(command) {
      if (command !== '') {
          try {
              let res = await google.colab.kernel.invokeFunction('shell', [command]);
              let out = res.data['application/json'][0];
              
              if (command.startsWith('cd ')) {
                  // Update the current path on 'cd' commands
                  currentPath = await google.colab.kernel.invokeFunction('shell', ['pwd']);
                  currentPath = currentPath.data['application/json'][0].trim();
              }

              this.set_prompt(currentPath + '> ');
              this.echo(new String(out));
          } catch(e) {
              this.error(new String(e));
          }
      } else {
          this.echo('');
      }
  }, {
      greetings: 'Welcome to Colab Shell',
      name: 'colab_demo',
      height: 300,
      prompt: currentPath + '> ',
      onClear: function() {
          this.set_prompt(currentPath + '> ');
      }
  }).css("font-size", "20px"); // Set font size here;
</script>

ss: enter image description here