zerg-ztc 0.1.6 → 0.1.10

package/src/components/InputArea.tsx

@@ -8,6 +8,7 @@ import { debugLog } from '../debug/logger.js';
 import chalk from 'chalk';
 import { saveClipboardImage } from '../utils/clipboard_image.js';
 import { renderImagePreview } from '../utils/image_preview.js';
+import { completePath } from '../utils/path_complete.js';
 import {
   createEmptyState,
   insertText,
@@ -40,6 +41,7 @@ interface InputAreaProps {
   placeholder?: string;
   historyEnabled?: boolean;
   debug?: boolean;
+  cwd?: string;  // Working directory for path tab completion
 }
 
 export type { InputState } from '../ui/core/input_state.js';
@@ -100,8 +102,8 @@ function reducer(state: InputState, action: InputAction): InputState {
   }
 }
 
-export const InputArea: React.FC<InputAreaProps> = ({ 
-  onSubmit, 
+export const InputArea: React.FC<InputAreaProps> = ({
+  onSubmit,
   onCommand,
   commands = [],
   onStateChange,
@@ -111,7 +113,8 @@ export const InputArea: React.FC<InputAreaProps> = ({
   disabled = false,
   placeholder = 'Type a message...',
   historyEnabled = true,
-  debug = false
+  debug = false,
+  cwd = process.cwd()
 }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const stateRef = React.useRef(state);
@@ -279,6 +282,60 @@ export const InputArea: React.FC<InputAreaProps> = ({
     return { ...current, segments, cursor: { index: cursor.index, offset: replacedLeft.length }, historyIdx: -1 };
   }, []);
 
+  // Tab completion state
+  const tabCompletionAlternativesRef = React.useRef<string[]>([]);
+  const lastTabPrefixRef = React.useRef<string>('');
+
+  // Handle tab completion for shell commands
+  const handleTabComplete = useCallback(async (current: InputState): Promise<InputState> => {
+    const plainText = getPlainText(current.segments);
+
+    // Only complete if this looks like a shell command with a path
+    // Match: !cd path, !ls path, !cat path, etc.
+    const shellMatch = plainText.match(/^!(\w+)\s+(.*)$/);
+    if (!shellMatch) {
+      // Also support just !cd without a path yet
+      if (plainText.match(/^!cd\s*$/)) {
+        // Show home directory
+        const result = await completePath('~/', cwd);
+        if (result && result.alternatives.length > 0) {
+          tabCompletionAlternativesRef.current = result.alternatives;
+          onToast?.(`Completions: ${result.alternatives.slice(0, 5).join(', ')}${result.alternatives.length > 5 ? '...' : ''}`);
+        }
+      }
+      return current;
+    }
+
+    const partialPath = shellMatch[2];
+    const commandPrefix = `!${shellMatch[1]} `;
+
+    // Try to complete the path
+    const result = await completePath(partialPath, cwd);
+    if (!result) {
+      onToast?.('No completions');
+      return current;
+    }
+
+    // If we have alternatives and this is a repeat tab, show them
+    if (result.alternatives.length > 1) {
+      tabCompletionAlternativesRef.current = result.alternatives;
+      lastTabPrefixRef.current = partialPath;
+      onToast?.(`Completions: ${result.alternatives.slice(0, 6).join('  ')}${result.alternatives.length > 6 ? ' ...' : ''}`);
+    } else {
+      tabCompletionAlternativesRef.current = [];
+    }
+
+    // Update the input with the completed path
+    const newText = commandPrefix + result.completed;
+    const newSegments: InputSegment[] = [{ type: 'text', text: newText }];
+    return {
+      ...current,
+      segments: newSegments,
+      cursor: { index: 0, offset: newText.length },
+      historyIdx: -1
+    };
+  }, [cwd, onToast]);
+
   const inputRenderCount = React.useRef(0);
   React.useEffect(() => {
     inputRenderCount.current += 1;
@@ -599,6 +656,16 @@ export const InputArea: React.FC<InputAreaProps> = ({
       return;
     }
 
+    // Tab completion for shell commands
+    if (safeKey.tab || input === '\t') {
+      void handleTabComplete(state).then(nextState => {
+        if (nextState !== state) {
+          dispatch({ type: 'apply', state: nextState });
+        }
+      });
+      return;
+    }
+
     if (key.leftArrow) {
       if (key.ctrl) {
         dispatch({ type: 'apply', state: moveWordLeft(state) });

package/src/utils/path_complete.ts

@@ -0,0 +1,173 @@
+import { readdir } from 'fs/promises';
+import { resolve, dirname, basename } from 'path';
+import { homedir } from 'os';
+
+/**
+ * Get path completions for tab autocomplete
+ */
+export async function getPathCompletions(
+  partial: string,
+  cwd: string
+): Promise<string[]> {
+  // Expand tilde
+  let expandedPartial = partial;
+  if (partial.startsWith('~/')) {
+    expandedPartial = resolve(homedir(), partial.slice(2));
+  } else if (partial === '~') {
+    expandedPartial = homedir();
+  }
+
+  // Resolve the path relative to cwd
+  const fullPath = resolve(cwd, expandedPartial);
+
+  // Determine the directory to list and the prefix to match
+  let dirToList: string;
+  let prefix: string;
+
+  try {
+    const { stat } = await import('fs/promises');
+    const stats = await stat(fullPath);
+    if (stats.isDirectory()) {
+      // If it's a directory, list its contents
+      dirToList = fullPath;
+      prefix = '';
+    } else {
+      // It's a file, no completions
+      return [];
+    }
+  } catch {
+    // Path doesn't exist, so complete the last component
+    dirToList = dirname(fullPath);
+    prefix = basename(fullPath).toLowerCase();
+  }
+
+  try {
+    const entries = await readdir(dirToList, { withFileTypes: true });
+    const matches = entries
+      .filter(entry => entry.name.toLowerCase().startsWith(prefix))
+      .map(entry => {
+        const name = entry.name;
+        const suffix = entry.isDirectory() ? '/' : '';
+        return name + suffix;
+      })
+      .sort();
+
+    return matches;
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Complete a partial path, returning the completed path or null if no unique completion
+ */
+export async function completePath(
+  partial: string,
+  cwd: string
+): Promise<{ completed: string; isDirectory: boolean; alternatives: string[] } | null> {
+  // Handle empty partial - list cwd contents
+  if (!partial || partial.trim() === '') {
+    try {
+      const entries = await readdir(cwd, { withFileTypes: true });
+      const matches = entries.filter(e => !e.name.startsWith('.')).sort();
+      if (matches.length === 0) return null;
+      if (matches.length === 1) {
+        const entry = matches[0];
+        const suffix = entry.isDirectory() ? '/' : '';
+        return { completed: entry.name + suffix, isDirectory: entry.isDirectory(), alternatives: [] };
+      }
+      const alternatives = matches.map(e => e.name + (e.isDirectory() ? '/' : ''));
+      return { completed: '', isDirectory: false, alternatives };
+    } catch {
+      return null;
+    }
+  }
+
+  // Expand tilde for internal processing
+  let expandedPartial = partial;
+  let tildePrefix = '';
+  if (partial.startsWith('~/')) {
+    expandedPartial = resolve(homedir(), partial.slice(2));
+    tildePrefix = '~/';
+  } else if (partial === '~') {
+    return { completed: '~/', isDirectory: true, alternatives: [] };
+  }
+
+  const fullPath = resolve(cwd, expandedPartial);
+  let dirToList: string;
+  let prefix: string;
+  let basePath: string;
+
+  try {
+    const { stat } = await import('fs/promises');
+    const stats = await stat(fullPath);
+    if (stats.isDirectory()) {
+      // Already a complete directory, append / if not present
+      if (!partial.endsWith('/')) {
+        return { completed: partial + '/', isDirectory: true, alternatives: [] };
+      }
+      // List directory contents for alternatives
+      dirToList = fullPath;
+      prefix = '';
+      basePath = partial;
+    } else {
+      // Complete file path
+      return { completed: partial, isDirectory: false, alternatives: [] };
+    }
+  } catch {
+    // Path doesn't exist, complete the last component
+    dirToList = dirname(fullPath);
+    prefix = basename(fullPath).toLowerCase();
+
+    // Calculate basePath - the directory portion to preserve
+    if (tildePrefix) {
+      const afterTilde = expandedPartial.slice(homedir().length + 1);
+      const dirPart = dirname(afterTilde);
+      basePath = dirPart === '.' ? tildePrefix : tildePrefix + dirPart + '/';
+    } else {
+      const dirPart = dirname(partial);
+      // Don't add ./ prefix for simple filenames
+      basePath = (dirPart === '.' || dirPart === '') ? '' : dirPart + '/';
+    }
+  }
+
+  try {
+    const entries = await readdir(dirToList, { withFileTypes: true });
+    const matches = entries
+      .filter(entry => entry.name.toLowerCase().startsWith(prefix))
+      .sort();
+
+    if (matches.length === 0) {
+      return null;
+    }
+
+    if (matches.length === 1) {
+      const entry = matches[0];
+      const suffix = entry.isDirectory() ? '/' : '';
+      const completed = basePath + entry.name + suffix;
+      return { completed, isDirectory: entry.isDirectory(), alternatives: [] };
+    }
+
+    // Find common prefix among all matches
+    const names = matches.map(e => e.name);
+    let commonPrefix = names[0];
+    for (const name of names.slice(1)) {
+      let i = 0;
+      while (i < commonPrefix.length && i < name.length && commonPrefix[i] === name[i]) {
+        i++;
+      }
+      commonPrefix = commonPrefix.slice(0, i);
+    }
+
+    const alternatives = matches.map(e => e.name + (e.isDirectory() ? '/' : ''));
+    const completed = basePath + commonPrefix;
+
+    return {
+      completed: completed.length > partial.length ? completed : partial,
+      isDirectory: false,
+      alternatives
+    };
+  } catch {
+    return null;
+  }
+}