fix(tui): improve mid-prompt slash autocomplete

Author: elkaix

apps/pythinker-code/src/generated/dashboard-web-asset.ts

@@ -45,7 +45,7 @@ export { handlePluginsCommand } from './plugins';
 export { handleReloadCommand, handleReloadTuiCommand } from './reload';
 export { handleGoalCommand, parseGoalCommand } from './goal';
 export { handleMemoryCommand, showMemoryPicker } from './memory';
-export { goalArgumentCompletions } from './registry';
+export { goalArgumentCompletions, pluginsArgumentCompletions } from './registry';
 export { handleForkCommand, handleInitCommand, handleTitleCommand } from './session';
 export { handleTagCommand } from './tag';
 export { handleUndoCommand } from './undo';

apps/pythinker-code/src/tui/commands/index.ts

@@ -22,6 +22,23 @@ const SWARM_ARG_COMPLETIONS: readonly ArgCompletionSpec[] = [
   { value: 'off', description: 'Turn swarm mode off' },
 ];
 
+const PLUGIN_ARG_COMPLETIONS: readonly ArgCompletionSpec[] = [
+  { value: 'list', description: 'List installed plugins' },
+  { value: 'install', description: 'Install a plugin from a path or ZIP URL' },
+  { value: 'marketplace', description: 'Browse the plugin marketplace' },
+  { value: 'info', description: 'Show details for one plugin' },
+  { value: 'enable', description: 'Enable a plugin' },
+  { value: 'disable', description: 'Disable a plugin' },
+  { value: 'remove', description: 'Remove a plugin from the session' },
+  { value: 'reload', description: 'Reload plugins in the current session' },
+  { value: 'mcp', description: 'Manage plugin-declared MCP servers' },
+];
+
+const PLUGIN_MCP_ARG_COMPLETIONS: readonly ArgCompletionSpec[] = [
+  { value: 'enable', description: 'Enable one plugin MCP server' },
+  { value: 'disable', description: 'Disable one plugin MCP server' },
+];
+
 /** Argument autocompletion for the `/goal` command (subcommands). */
 export function goalArgumentCompletions(argumentPrefix: string): AutocompleteItem[] | null {
   const nextMatch = argumentPrefix.match(/^next\s+(\S*)$/i);
@@ -41,6 +58,20 @@ export function swarmArgumentCompletions(argumentPrefix: string): AutocompleteIt
   return completeLeadingArg(SWARM_ARG_COMPLETIONS, argumentPrefix);
 }
 
+/** Argument autocompletion for the `/plugins` command (subcommands). */
+export function pluginsArgumentCompletions(argumentPrefix: string): AutocompleteItem[] | null {
+  const mcpMatch = argumentPrefix.match(/^mcp\s+(\S*)$/i);
+  if (mcpMatch !== null) {
+    return (
+      completeLeadingArg(PLUGIN_MCP_ARG_COMPLETIONS, mcpMatch[1] ?? '')?.map((item) => ({
+        ...item,
+        value: `mcp ${item.value}`,
+      })) ?? null
+    );
+  }
+  return completeLeadingArg(PLUGIN_ARG_COMPLETIONS, argumentPrefix);
+}
+
 export const BUILTIN_SLASH_COMMANDS = [
   {
     name: 'yolo',
@@ -200,6 +231,7 @@ export const BUILTIN_SLASH_COMMANDS = [
     aliases: ['plugin'],
     description: 'Manage plugins',
     priority: 60,
+    completeArgs: pluginsArgumentCompletions,
     availability: 'always',
   },
   {

apps/pythinker-code/src/tui/commands/registry.ts

@@ -8,6 +8,8 @@ import {
   matchesKey,
   Key,
   SelectList,
+  truncateToWidth,
+  visibleWidth,
   type SelectItem,
   type TUI,
 } from '@earendil-works/pi-tui';
@@ -28,6 +30,7 @@ import {
 import { isPrintableChar, printableChar } from '#/tui/utils/printable-key';
 import { effortColorToken, shortEffortLabel } from '#/tui/utils/thinking-levels';
 
+import { findSlashAutocompleteContext, getSlashHighlightRanges } from './slash-autocomplete-context';
 import { WrappingSelectList } from './wrapping-select-list';
 
 // oxlint-disable-next-line no-control-regex -- ESC (\x1b) is required to match ANSI SGR escape sequences
@@ -64,8 +67,11 @@ const SHIFT_BIT = 1;
 
 interface AutocompleteInternals {
   cancelAutocomplete(): void;
+  requestAutocomplete?(options: { force: boolean; explicitTab: boolean }): void;
   readonly autocompleteAbort?: AbortController;
   readonly autocompleteDebounceTimer?: ReturnType<typeof setTimeout>;
+  readonly autocompletePrefix?: string;
+  readonly autocompleteList?: { getSelectedItem(): SelectItem | undefined };
 }
 
 interface AutocompleteListFactoryInternals {
@@ -136,6 +142,62 @@ function stripSgr(s: string): string {
   return s.replace(ANSI_SGR, '');
 }
 
+function findCursorMarkerRange(
+  line: string,
+): { rawStart: number; rawEnd: number; visibleStart: number; currentChar: string | undefined } | null {
+  const rawStart = line.indexOf('\u001B[7m');
+  if (rawStart < 0) return null;
+  const rawEnd = line.indexOf('\u001B[0m', rawStart);
+  if (rawEnd < 0) return null;
+  const visibleStart = stripSgr(line.slice(0, rawStart)).length;
+  const visible = stripSgr(line);
+  return {
+    rawStart,
+    rawEnd: rawEnd + '\u001B[0m'.length,
+    visibleStart,
+    currentChar: visible[visibleStart],
+  };
+}
+
+function buildAutocompleteGhostSuffix(prefix: string, item: SelectItem): string | null {
+  if (prefix.startsWith('/')) {
+    const typed = prefix.slice(1);
+    if (!item.value.startsWith(typed)) return null;
+    return `${item.value.slice(typed.length)} `;
+  }
+  if (!item.value.startsWith(prefix)) return null;
+  return item.value.slice(prefix.length);
+}
+
+function insertAutocompleteGhost(line: string, ghostText: string): string | undefined {
+  if (ghostText.length === 0) return undefined;
+  const cursor = findCursorMarkerRange(line);
+  if (cursor === null) return undefined;
+  if (cursor.currentChar !== undefined && cursor.currentChar !== ' ' && cursor.currentChar !== '\t') {
+    return undefined;
+  }
+
+  const visible = stripSgr(line);
+  const insertStartVisible = cursor.visibleStart + 1;
+  let insertEndVisible = insertStartVisible;
+  while (insertEndVisible < visible.length) {
+    const ch = visible[insertEndVisible];
+    if (ch !== ' ' && ch !== '\t') break;
+    insertEndVisible += 1;
+  }
+
+  const availableWidth = insertEndVisible - insertStartVisible;
+  if (availableWidth <= 0) return undefined;
+  const ghostPlain = truncateToWidth(ghostText, availableWidth, '');
+  const ghostWidth = visibleWidth(ghostPlain);
+  if (ghostWidth <= 0) return undefined;
+
+  const rawStart = mapVisibleIdxToRaw(line, insertStartVisible);
+  const rawEnd = mapVisibleIdxToRaw(line, insertStartVisible + ghostWidth);
+  const ghost = currentTheme.fg('textMuted', ghostPlain);
+  return line.slice(0, rawStart) + ghost + line.slice(rawEnd);
+}
+
 export class CustomEditor extends Editor {
   public onEscape?: () => void;
   public onCtrlD?: () => void;
@@ -258,29 +320,49 @@ export class CustomEditor extends Editor {
     (this as unknown as AutocompleteInternals).cancelAutocomplete();
   }
 
+  private hasMidPromptSlashContext(): boolean {
+    const { line, col } = this.getCursor();
+    const currentLine = this.getLines()[line] ?? '';
+    const context = findSlashAutocompleteContext(currentLine, col);
+    return context !== null && currentLine.slice(0, context.commandStart).trim().length > 0;
+  }
+
+  private requestMidPromptSlashAutocomplete(explicitTab: boolean): boolean {
+    if (!this.hasMidPromptSlashContext()) return false;
+    const autocomplete = this as unknown as AutocompleteInternals;
+    autocomplete.requestAutocomplete?.({ force: false, explicitTab });
+    return autocomplete.requestAutocomplete !== undefined;
+  }
+
   override render(width: number): string[] {
     const lines = super.render(width);
     if (lines.length < 3) return lines;
     const firstContentIdx = 1;
-    const text = this.getText().trimStart();
-    if (text.startsWith('/')) {
-      // Paint only the FIRST editor content line; multi-line slash commands
-      // are not a thing in practice.
-      const original = lines[firstContentIdx];
-      if (original !== undefined) {
-        const highlighted = highlightFirstSlashToken(original, 'primary');
-        if (highlighted !== undefined) {
-          lines[firstContentIdx] = highlighted;
-        }
-      }
-    }
     const firstContent = lines[firstContentIdx];
     if (firstContent !== undefined) {
       const withPrompt = injectPromptSymbol(firstContent);
       if (withPrompt !== undefined) {
         lines[firstContentIdx] = withPrompt;
       }
     }
+
+    const cursorLineIdx = lines.findIndex((line) => line.includes('\u001B[7m'));
+    if (cursorLineIdx >= 0) {
+      const cursorLine = lines[cursorLineIdx];
+      if (cursorLine !== undefined) {
+        const highlighted = highlightFirstSlashToken(cursorLine, 'primary');
+        const decoratedLine = highlighted ?? cursorLine;
+        const autocomplete = this as unknown as AutocompleteInternals;
+        const selectedItem = autocomplete.autocompleteList?.getSelectedItem();
+        const prefix = autocomplete.autocompletePrefix ?? '';
+        const ghostSuffix =
+          selectedItem === undefined ? null : buildAutocompleteGhostSuffix(prefix, selectedItem);
+        const withGhost =
+          ghostSuffix === null ? undefined : insertAutocompleteGhost(decoratedLine, ghostSuffix);
+        lines[cursorLineIdx] = withGhost ?? decoratedLine;
+      }
+    }
+
     // `this.borderColor` is pi-tui's per-render paint function. The host may
     // overwrite it (e.g. plan-mode / slash-context highlight via
     // `editor.borderColor = chalk.hex(primary)`), so we route corners and
@@ -342,6 +424,7 @@ export class CustomEditor extends Editor {
         return;
       }
       super.handleInput(data);
+      if (!this.hasAutocompleteActivity()) this.requestMidPromptSlashAutocomplete(false);
       return;
     }
 
@@ -431,7 +514,12 @@ export class CustomEditor extends Editor {
       return;
     }
 
+    if (matchesKey(normalized, Key.tab) && this.requestMidPromptSlashAutocomplete(true)) {
+      return;
+    }
+
     super.handleInput(normalized);
+    if (!this.hasAutocompleteActivity()) this.requestMidPromptSlashAutocomplete(false);
   }
 
   private handlePasteKeybinding(data: string): void {
@@ -456,69 +544,17 @@ export class CustomEditor extends Editor {
 }
 
 /**
- * Return a copy of `line` with the first `/token` coloured using `hex`.
- * For `/goal next manage`, also colour the command-path tokens.
- * `line` may already contain SGR escapes (cursor inverse, etc.); we
- * locate `/` via visible-index math so ANSI pass-through survives.
- * Returns `undefined` if no token is found.
+ * Return a copy of `line` with the active slash-command token coloured using
+ * the current theme, even when the command lives mid-prompt.
  */
 export function highlightFirstSlashToken(line: string, token: 'primary'): string | undefined {
-  const visible = stripSgr(line);
-  const slashIdx = visible.indexOf('/');
-  if (slashIdx < 0) return undefined;
-  // Guard: only paint when `/` is the first non-whitespace character
-  // on the line (avoids colouring a mid-sentence slash).
-  for (let i = 0; i < slashIdx; i++) {
-    if (visible[i] !== ' ' && visible[i] !== '\t') return undefined;
-  }
-  // Token ends at the next whitespace (or the visible end).
-  let endVisible = slashIdx + 1;
-  while (endVisible < visible.length) {
-    const ch = visible[endVisible];
-    if (ch === ' ' || ch === '\t') break;
-    endVisible++;
-  }
-  const visibleToken = visible.slice(slashIdx, endVisible);
-  if (visibleToken.slice(1).includes('/')) return undefined;
-  const ranges = [{ start: slashIdx, end: endVisible }];
-  if (visibleToken === '/goal') {
-    ranges.push(...goalCommandPathRanges(visible, endVisible));
-  }
+  const cursor = findCursorMarkerRange(line);
+  if (cursor === null) return undefined;
+  const ranges = getSlashHighlightRanges(stripSgr(line), cursor.visibleStart);
+  if (ranges.length === 0) return undefined;
   return highlightVisibleRanges(line, ranges, token);
 }
 
-function goalCommandPathRanges(
-  visible: string,
-  commandEnd: number,
-): Array<{ start: number; end: number }> {
-  const nextRange = readTokenRange(visible, commandEnd);
-  if (nextRange === null || visible.slice(nextRange.start, nextRange.end) !== 'next') {
-    return [];
-  }
-  const ranges = [nextRange];
-  const manageRange = readTokenRange(visible, nextRange.end);
-  if (manageRange !== null && visible.slice(manageRange.start, manageRange.end) === 'manage') {
-    ranges.push(manageRange);
-  }
-  return ranges;
-}
-
-function readTokenRange(
-  visible: string,
-  start: number,
-): { start: number; end: number } | null {
-  let tokenStart = start;
-  while (tokenStart < visible.length && isTokenSpace(visible[tokenStart])) tokenStart++;
-  if (tokenStart >= visible.length) return null;
-  let tokenEnd = tokenStart;
-  while (tokenEnd < visible.length && !isTokenSpace(visible[tokenEnd])) tokenEnd++;
-  return { start: tokenStart, end: tokenEnd };
-}
-
-function isTokenSpace(ch: string | undefined): boolean {
-  return ch === ' ' || ch === '\t';
-}
-
 function highlightVisibleRanges(
   line: string,
   ranges: Array<{ start: number; end: number }>,