Add command completion and clear screen functionality to terminal

- Introduced Ctrl+L key binding to clear the terminal screen.
- Added TAB key functionality for command completion, displaying possible completions based on user input.
- Implemented a getCompletions function to suggest commands and arguments dynamically.
- Enhanced user experience by allowing single and multiple command completions to be displayed in the terminal.

Author: astrovm

static/terminal-window/terminal-window.js

@@ -7,8 +7,10 @@ const CONSTANTS = {
   },
   KEYS: {
     CTRL_C: "\x03",
+    CTRL_L: "\x0C",
     ENTER: "\r",
     BACKSPACE: "\u007F",
+    TAB: "\t",
     ARROW: {
       LEFT: "\u001b[D",
       RIGHT: "\u001b[C",
@@ -192,6 +194,36 @@ document.addEventListener("DOMContentLoaded", () => {
           return;
         }
 
+        // Handle Ctrl+L (clear screen)
+        if (data === CONSTANTS.KEYS.CTRL_L) {
+          terminal.clear();
+          terminal.prompt();
+          state.term.write(state.commandBuffer);
+          return;
+        }
+
+        if (data === CONSTANTS.KEYS.TAB) {
+          if (!state.awaitingPassword) {
+            const completions = getCompletions(state.commandBuffer);
+            if (completions.length === 1) {
+              // Clear current line
+              state.term.write(
+                "\r$ " + " ".repeat(state.commandBuffer.length) + "\r$ "
+              );
+              state.commandBuffer = completions[0];
+              state.cursorPosition = state.commandBuffer.length;
+              state.term.write(state.commandBuffer);
+            } else if (completions.length > 1) {
+              // Show all possible completions
+              terminal.print("");
+              terminal.print(completions.join("  "));
+              terminal.prompt();
+              state.term.write(state.commandBuffer);
+            }
+          }
+          return;
+        }
+
         if (state.awaitingPassword) {
           // Handle password input
           switch (data) {
@@ -372,6 +404,34 @@ document.addEventListener("DOMContentLoaded", () => {
     },
   };
 
+  const getCompletions = (input) => {
+    // If no input, return all commands
+    if (!input) return Object.keys(commands);
+
+    const [cmd, ...args] = input.split(" ");
+
+    // If we have a complete command and arguments
+    if (input.endsWith(" ")) {
+      // Handle command-specific argument completion
+      switch (cmd.toLowerCase()) {
+        case "su":
+          // Example: could suggest usernames here
+          return ["root", "admin"];
+        default:
+          return [];
+      }
+    }
+
+    // If we're still typing the command
+    if (!args.length) {
+      return Object.keys(commands).filter((command) =>
+        command.toLowerCase().startsWith(cmd.toLowerCase())
+      );
+    }
+
+    return [];
+  };
+
   const processCommand = async (cmd) => {
     if (state.awaitingPassword) {
       terminal.print("Verifying access...");