Add basic autocomplete for the terminal command names

client/src/commands/help/help.ts

@@ -1,25 +1,25 @@
-import { PgCommandExecutor, PgCommon, PgTerminal } from "../../utils/pg";
+import { PgCommandManager, PgCommon, PgTerminal } from "../../utils/pg";
 import { createCmd } from "../create";
 
 export const help = createCmd({
   name: "help",
   description: "Print help message",
   run: () => {
-    const commandNames = PgCommon.keys(PgCommandExecutor.commands);
+    const commandNames = PgCommon.keys(PgCommandManager.commands);
 
     const helpMessage =
       "COMMANDS:\n" +
       commandNames
         .sort((a, b) => {
           // Put non-letter commands to the end
-          if (!/^[a-zA-Z-]+$/.test(PgCommandExecutor.commands[b].name)) {
+          if (!/^[a-zA-Z-]+$/.test(PgCommandManager.commands[b].name)) {
             return -1;
           }
 
           return a.localeCompare(b);
         })
         .reduce((acc, cmdName) => {
-          const cmd = PgCommandExecutor.commands[cmdName];
+          const cmd = PgCommandManager.commands[cmdName];
 
           return (
             acc +

client/src/pages/ide/Panels/Main/Terminal/Terminal.tsx

@@ -13,7 +13,7 @@ import {
   Tick,
 } from "../../../../../components/Icons";
 import {
-  PgCommandExecutor,
+  PgCommandManager,
   PgCommon,
   PgEditor,
   PgTerm,
@@ -37,9 +37,9 @@ const Terminal = () => {
     const xterm = theme.components.terminal.xterm;
 
     // Set the available commands
-    PgCommandExecutor.commands = COMMANDS;
+    PgCommandManager.commands = COMMANDS;
 
-    return new PgTerm(PgCommandExecutor.execute, {
+    return new PgTerm(PgCommandManager, {
       convertEol: true,
       rendererType: "dom",
       fontFamily: theme.font.code.family,

client/src/utils/pg/command/command.ts

@@ -8,7 +8,7 @@ export const PgCommand: Commands = new Proxy(
     get: (target: any, cmdName: CommandCodeName): Command<unknown> => {
       if (target[cmdName]) return target[cmdName];
 
-      const commandName = PgCommandExecutor.commands[cmdName].name;
+      const commandName = PgCommandManager.commands[cmdName].name;
       target[cmdName] = {
         name: commandName,
         run: (args: string = "") => {
@@ -34,14 +34,24 @@ export const PgCommand: Commands = new Proxy(
 );
 
 /**
- * Command executor.
+ * Terminal command manager.
  *
  * This is intended for internal usage. Running commands should be done with
  * `PgCommand` instead.
  */
-export class PgCommandExecutor {
+export class PgCommandManager {
+  /** Internal commands */
   static commands: InternalCommands;
 
+  /**
+   * Get the available command names.
+   *
+   * @returns the command names
+   */
+  static getNames() {
+    return Object.values(PgCommandManager.commands).map((cmd) => cmd.name);
+  }
+
   /**
    * Execute from the given input.
    *
@@ -58,8 +68,8 @@ export class PgCommandExecutor {
       const inputCmdName = input.split(" ")?.at(0);
       if (!inputCmdName) return;
 
-      for (const cmdName in PgCommandExecutor.commands) {
-        const cmd = PgCommandExecutor.commands[cmdName as CommandCodeName];
+      for (const cmdName in PgCommandManager.commands) {
+        const cmd = PgCommandManager.commands[cmdName as CommandCodeName];
         if (inputCmdName !== cmd.name) continue;
 
         // Handle checks

client/src/utils/pg/terminal/shell.ts

@@ -14,7 +14,7 @@ import type {
   ActiveCharPrompt,
   ActivePrompt,
   AutoCompleteHandler,
-  ExecuteCommand,
+  CommandManager,
 } from "./types";
 
 type ShellOptions = { historySize: number; maxAutocompleteEntries: number };
@@ -30,7 +30,7 @@ type ShellOptions = { historySize: number; maxAutocompleteEntries: number };
  */
 export class PgShell {
   private _tty: PgTty;
-  private _execute: ExecuteCommand;
+  private _cmdManager: CommandManager;
   private _active = false;
   private _waitingForInput = false;
   private _processCount = 0;
@@ -42,18 +42,21 @@ export class PgShell {
 
   constructor(
     tty: PgTty,
-    execute: ExecuteCommand,
+    cmdManager: CommandManager,
     options: ShellOptions = {
       historySize: 30,
       maxAutocompleteEntries: 100,
     }
   ) {
     this._tty = tty;
-    this._execute = execute;
+    this._cmdManager = cmdManager;
 
     this._history = new PgShellHistory(options.historySize);
     this._maxAutocompleteEntries = options.maxAutocompleteEntries;
-    this._autocompleteHandlers = [() => this._history.getEntries()];
+    this._autocompleteHandlers = [
+      () => this._history.getEntries(),
+      () => this._cmdManager.getNames(),
+    ];
   }
 
   /**
@@ -193,7 +196,7 @@ export class PgShell {
     if (this._waitingForInput) {
       PgCommon.createAndDispatchCustomEvent(EventName.TERMINAL_WAIT_FOR_INPUT);
     } else {
-      return await this._execute(input);
+      return await this._cmdManager.execute(input);
     }
   }
 

client/src/utils/pg/terminal/terminal.ts

@@ -17,7 +17,7 @@ import {
   SERVER_ERROR,
 } from "../../../constants";
 import { PgCommon } from "../common";
-import type { ExecuteCommand, PrintOptions } from "./types";
+import type { CommandManager, PrintOptions } from "./types";
 import type { Methods, ClassReturnType, SyncOrAsync } from "../types";
 
 export class PgTerminal {
@@ -327,7 +327,7 @@ export class PgTerm {
   private _pgShell: PgShell;
   private _isOpen: boolean;
 
-  constructor(execute: ExecuteCommand, xtermOptions?: ITerminalOptions) {
+  constructor(cmdManager: CommandManager, xtermOptions?: ITerminalOptions) {
     // Create xterm element
     this._xterm = new XTerm(xtermOptions);
 
@@ -342,7 +342,7 @@ export class PgTerm {
 
     // Create  Shell and TTY
     this._pgTty = new PgTty(this._xterm);
-    this._pgShell = new PgShell(this._pgTty, execute);
+    this._pgShell = new PgShell(this._pgTty, cmdManager);
 
     // XTerm events
     this._xterm.onResize(this._handleTermResize);

client/src/utils/pg/terminal/types.ts

@@ -8,8 +8,13 @@ export interface PrintOptions {
   noColor?: boolean;
 }
 
-/** Executor */
-export type ExecuteCommand<R = unknown> = (input: string) => Promise<R>;
+/** Manage terminal commands */
+export type CommandManager<R = unknown> = {
+  /** Get the available command names. */
+  getNames: () => string[];
+  /** Execute the given input. */
+  execute: (input: string) => Promise<R>;
+};
 
 export interface ActiveCharPrompt {
   promptPrefix: string;