gencode-ai 0.4.1 → 0.5.0

package/src/cli/components/App.tsx

@@ -2,12 +2,12 @@
  * Main App Component - Compact Ink-based TUI
  * Inspired by Claude Code and Gemini CLI design patterns
  */
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { Box, Text, useApp, useInput, Static } from 'ink';
-import { Agent } from '../../agent/index.js';
-import type { AgentConfig } from '../../agent/types.js';
-import { formatTokens, formatCost } from '../../pricing/calculator.js';
-import type { CostEstimate } from '../../pricing/types.js';
+import { Agent } from '../../core/agent/index.js';
+import type { AgentConfig } from '../../core/agent/types.js';
+import { formatTokens, formatCost } from '../../core/pricing/calculator.js';
+import type { CostEstimate } from '../../core/pricing/types.js';
 import {
   UserMessage,
   AssistantMessage,
@@ -17,13 +17,14 @@ import {
   InfoMessage,
   WelcomeMessage,
   CompletionMessage,
+  CommandListDisplay,
 } from './Messages.js';
 import { Header } from './Header.js';
 import { ProgressBar } from './Spinner.js';
 import { PromptInput, ConfirmPrompt } from './Input.js';
 import { ModelSelector } from './ModelSelector.js';
 import { ProviderManager } from './ProviderManager.js';
-import { CommandSuggestions, getFilteredCommands } from './CommandSuggestions.js';
+import { CommandSuggestions, getFilteredCommands, BUILTIN_COMMANDS } from './CommandSuggestions.js';
 import {
   PermissionPrompt,
   PermissionRulesDisplay,
@@ -32,24 +33,26 @@ import {
 import { TodoList } from './TodoList.js';
 import { QuestionPrompt, AnswerDisplay } from './QuestionPrompt.js';
 import { colors, icons } from './theme.js';
-import { getTodos, formatAnswersForDisplay } from '../../tools/index.js';
-import type { Question, QuestionAnswer } from '../../tools/types.js';
-import type { ProviderName } from '../../providers/index.js';
-import type { ApprovalAction, ApprovalSuggestion } from '../../permissions/types.js';
-import type { Message, ToolResultContent, ToolUseContent } from '../../providers/types.js';
-import type { SessionMetadata } from '../../session/types.js';
-import { gatherContextFiles, buildInitPrompt, getContextSummary } from '../../memory/index.js';
+import { getTodos, formatAnswersForDisplay } from '../../core/tools/index.js';
+import type { Question, QuestionAnswer } from '../../core/tools/types.js';
+import type { ProviderName } from '../../core/providers/index.js';
+import type { ApprovalAction, ApprovalSuggestion } from '../../core/permissions/types.js';
+import type { Message, ToolResultContent, ToolUseContent } from '../../core/providers/types.js';
+import type { SessionMetadata } from '../../core/session/types.js';
+import { gatherContextFiles, buildInitPrompt, getContextSummary } from '../../core/memory/index.js';
 // ModeIndicator kept for potential future use
 import { PlanApproval } from './PlanApproval.js';
-import type { ModeType, PlanApprovalOption, AllowedPrompt } from '../../planning/types.js';
+import type { ModeType, PlanApprovalOption, AllowedPrompt } from '../planning/types.js';
+import { getPlanModeManager } from '../planning/index.js';
+import { readPlanFile, parseFilesToChange } from '../planning/plan-file.js';
 // Planning utilities kept for potential future use
-import { getCheckpointManager } from '../../checkpointing/index.js';
-import { InputHistoryManager } from '../../input/index.js';
+import { getCheckpointManager } from '../../core/session/checkpointing/index.js';
+import { InputHistoryManager } from '../../core/session/input/index.js';
 
 // Types
 interface HistoryItem {
   id: string;
-  type: 'header' | 'welcome' | 'user' | 'assistant' | 'tool_call' | 'tool_result' | 'info' | 'completion' | 'todos';
+  type: 'header' | 'welcome' | 'user' | 'assistant' | 'tool_call' | 'tool_result' | 'info' | 'completion' | 'todos' | 'commands';
   content: string;
   meta?: Record<string, unknown>;
 }
@@ -58,6 +61,7 @@ interface ConfirmState {
   tool: string;
   input: Record<string, unknown>;
   suggestions: ApprovalSuggestion[];
+  metadata?: Record<string, unknown>;
   resolve: (action: ApprovalAction) => void;
 }
 
@@ -92,11 +96,26 @@ interface PermissionSettings {
   deny?: string[];
 }
 
+interface HooksConfig {
+  [event: string]: Array<{
+    matcher?: string;
+    hooks: Array<{
+      type: 'command' | 'prompt';
+      command?: string;
+      prompt?: string;
+      timeout?: number;
+      statusMessage?: string;
+      blocking?: boolean;
+    }>;
+  }>;
+}
+
 interface AppProps {
   config: AgentConfig;
   settingsManager?: SettingsManager;
   resumeLatest?: boolean;
   permissionSettings?: PermissionSettings;
+  hooksConfig?: HooksConfig;
 }
 
 // ============================================================================
@@ -136,6 +155,7 @@ function HelpPanel() {
     ['/model [name]', 'Switch model'],
     ['/provider', 'Manage providers'],
     ['/sessions', 'List sessions'],
+    ['/tasks', 'List background tasks'],
     ['/resume [n]', 'Resume session'],
     ['/new', 'New session'],
     ['/save', 'Save session'],
@@ -179,6 +199,123 @@ function SessionsTable({ sessions }: SessionsTableProps) {
   );
 }
 
+// ============================================================================
+// Tasks Table Component
+// ============================================================================
+interface TasksTableProps {
+  tasks: Array<{
+    id: string;
+    description: string;
+    status: 'pending' | 'running' | 'completed' | 'error' | 'cancelled';
+    startedAt: Date | string;
+    completedAt?: Date | string;
+    durationMs?: number;
+  }>;
+}
+
+function TasksTable({ tasks }: TasksTableProps) {
+  const getStatusDisplay = (status: string): { icon: string; color: string; label: string } => {
+    switch (status) {
+      case 'running':
+        return { icon: '●', color: colors.info, label: 'Running' };
+      case 'pending':
+        return { icon: '○', color: colors.textMuted, label: 'Pending' };
+      case 'completed':
+        return { icon: '✔', color: colors.success, label: 'Done' };
+      case 'error':
+        return { icon: '✖', color: colors.error, label: 'Failed' };
+      case 'cancelled':
+        return { icon: '⊘', color: colors.warning, label: 'Stopped' };
+      default:
+        return { icon: '·', color: colors.textMuted, label: 'Unknown' };
+    }
+  };
+
+  const formatElapsedTime = (task: TasksTableProps['tasks'][0]): string => {
+    const startTime = typeof task.startedAt === 'string'
+      ? new Date(task.startedAt).getTime()
+      : task.startedAt.getTime();
+
+    if (task.durationMs !== undefined) {
+      // Task completed, show duration
+      const seconds = Math.floor(task.durationMs / 1000);
+      if (seconds < 60) return `${seconds}s`;
+      const minutes = Math.floor(seconds / 60);
+      const secs = seconds % 60;
+      return `${minutes}m ${secs}s`;
+    } else {
+      // Task running, show elapsed time
+      const elapsed = Date.now() - startTime;
+      const seconds = Math.floor(elapsed / 1000);
+      if (seconds < 60) return `${seconds}s`;
+      const minutes = Math.floor(seconds / 60);
+      const secs = seconds % 60;
+      return `${minutes}m ${secs}s`;
+    }
+  };
+
+  const getTypeLabel = (task: TasksTableProps['tasks'][0]): string => {
+    // Extract task type from description
+    if (task.description.toLowerCase().includes('bash:')) return 'bash';
+    if (task.description.toLowerCase().includes('test')) return 'test';
+    if (task.description.toLowerCase().includes('build')) return 'build';
+    return 'task';
+  };
+
+  return (
+    <Box flexDirection="column">
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text>
+          <Text color={colors.textMuted}>{'STATUS'.padEnd(9)}</Text>
+          <Text color={colors.textMuted}>{'ID'.padEnd(9)}</Text>
+          <Text color={colors.textMuted}>{'DESCRIPTION'.padEnd(33)}</Text>
+          <Text color={colors.textMuted}>{'TIME'.padEnd(10)}</Text>
+          <Text color={colors.textMuted}>TYPE</Text>
+        </Text>
+      </Box>
+
+      {/* Tasks */}
+      {tasks.slice(0, 10).map((task, index) => {
+        const status = getStatusDisplay(task.status);
+        const typeLabel = getTypeLabel(task);
+
+        return (
+          <Box key={task.id} marginBottom={index < tasks.length - 1 ? 0 : 0}>
+            <Text>
+              <Text color={status.color}>{status.icon} </Text>
+              <Text color={status.color}>{status.label.padEnd(7)}</Text>
+              <Text color={colors.primary} dimColor>
+                {task.id.slice(0, 8).padEnd(9)}
+              </Text>
+              <Text>{task.description.slice(0, 32).padEnd(33)}</Text>
+              <Text color={colors.textSecondary}>
+                {formatElapsedTime(task).padEnd(10)}
+              </Text>
+              <Text color={colors.textMuted} dimColor>
+                {typeLabel}
+              </Text>
+            </Text>
+          </Box>
+        );
+      })}
+
+      {/* Footer */}
+      {tasks.length > 10 && (
+        <Box marginTop={1}>
+          <Text color={colors.textMuted}>
+            ... and {tasks.length - 10} more task{tasks.length - 10 !== 1 ? 's' : ''}
+          </Text>
+        </Box>
+      )}
+
+      {tasks.length === 0 && (
+        <Text color={colors.textMuted}>No tasks found</Text>
+      )}
+    </Box>
+  );
+}
+
 // ============================================================================
 // Memory Files Display Component
 // ============================================================================
@@ -260,7 +397,7 @@ function estimateTokenDelta(text: string): number {
 // ============================================================================
 // Main App
 // ============================================================================
-export function App({ config, settingsManager, resumeLatest, permissionSettings }: AppProps) {
+export function App({ config, settingsManager, resumeLatest, permissionSettings, hooksConfig }: AppProps) {
   const { exit } = useApp();
   const agent = useAgent(config);
 
@@ -313,6 +450,10 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
   const [pendingTool, setPendingTool] = useState<{ name: string; input: Record<string, unknown> } | null>(null);
   const pendingToolRef = useRef<{ name: string; input: Record<string, unknown> } | null>(null);
   const [todos, setTodos] = useState<ReturnType<typeof getTodos>>([]);
+  const [expandedToolResults, setExpandedToolResults] = useState<Set<string>>(new Set());
+
+  // Custom commands for autocomplete
+  const [customCommands, setCustomCommands] = useState<Array<{ name: string; description: string; argumentHint?: string }>>([]);
 
   // Input history management
   const historyManagerRef = useRef<InputHistoryManager | null>(null);
@@ -330,7 +471,16 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
 
   // Check if showing command suggestions
   const showCmdSuggestions = input.startsWith('/') && !isProcessing;
-  const cmdSuggestions = showCmdSuggestions ? getFilteredCommands(input) : [];
+  const cmdSuggestions = showCmdSuggestions ? getFilteredCommands(input, customCommands) : [];
+
+  // Find argument hint for matched command (when input matches command exactly or starts with command + space)
+  const matchedCommandHint = useMemo(() => {
+    if (!input.startsWith('/')) return undefined;
+    const inputCmd = input.split(' ')[0]; // Get command part before any arguments
+    const allCommands = [...BUILTIN_COMMANDS, ...customCommands];
+    const matched = allCommands.find((cmd) => cmd.name === inputCmd);
+    return matched?.argumentHint;
+  }, [input, customCommands]);
 
   // Reset suggestion index when input changes
   useEffect(() => {
@@ -406,6 +556,60 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
     };
   }, [agent, addHistory]);
 
+  // Listen to plan mode manager events for approval UI
+  useEffect(() => {
+    const planModeManager = getPlanModeManager();
+
+    const unsubscribe = planModeManager.subscribe(async (event: { type: string; phase?: string }) => {
+      // When phase changes to 'approval', show the approval UI
+      if (event.type === 'phase_change' && event.phase === 'approval') {
+        const planFilePath = planModeManager.getPlanFilePath();
+        const requestedPermissions = planModeManager.getRequestedPermissions();
+
+        if (!planFilePath) {
+          addHistory({ type: 'info', content: 'Error: No plan file found' });
+          return;
+        }
+
+        try {
+          // Read plan file
+          const planFile = await readPlanFile(planFilePath);
+          if (!planFile) {
+            addHistory({ type: 'info', content: `Error: Could not read plan file: ${planFilePath}` });
+            return;
+          }
+
+          // Parse files to change
+          const filesToChange = parseFilesToChange(planFile.content);
+
+          // Extract first paragraph as summary (or first 200 chars)
+          const lines = planFile.content.split('\n').filter((l: string) => l.trim() && !l.startsWith('#'));
+          const planSummary = lines[0]?.slice(0, 200) || 'Implementation plan ready';
+
+          // Show approval UI
+          setPlanApprovalState({
+            planSummary,
+            requestedPermissions,
+            filesToChange,
+            planFilePath,
+            resolve: (option: PlanApprovalOption, customInput?: string) => {
+              handlePlanApprovalDecision(option, customInput);
+            },
+          });
+        } catch (error) {
+          addHistory({
+            type: 'info',
+            content: `Error reading plan: ${error instanceof Error ? error.message : String(error)}`,
+          });
+        }
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [addHistory]);
+
   // Flush buffered streaming text to UI (throttled to ~60 FPS)
   const flushStreamBuffer = useCallback(() => {
     if (streamBufferRef.current) {
@@ -548,9 +752,34 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
   // Initialize
   useEffect(() => {
     const init = async () => {
+      // Load custom commands for autocomplete
+      try {
+        const { getCommandManager } = await import('../../ext/commands/index.js');
+        const cmdMgr = await getCommandManager(cwd);
+        const commands = await cmdMgr.listCommands();
+        setCustomCommands(
+          commands
+            // Only include namespaced commands (those with ':')
+            .filter((cmd) => cmd.name.includes(':'))
+            .map((cmd) => ({
+              name: `/${cmd.name}`,
+              description: cmd.description || '',
+              argumentHint: cmd.argumentHint,
+            }))
+        );
+      } catch (error) {
+        // Silently fail if command loading fails
+        console.error('Failed to load custom commands:', error);
+      }
+
       // Initialize permission system with settings
       await agent.initializePermissions(permissionSettings);
 
+      // Initialize hooks system with configuration
+      if (hooksConfig) {
+        agent.initializeHooks(hooksConfig);
+      }
+
       // Set enhanced confirm callback with approval options
       agent.setEnhancedConfirmCallback(async (tool, toolInput, suggestions) => {
         // Auto-approve in accept mode
@@ -575,6 +804,31 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
         });
       });
 
+      // Set askPermission callback for tools that need metadata-based permission (e.g., Edit with diff)
+      agent.setAskPermissionCallback(async (request) => {
+        // Auto-approve in accept mode
+        if (currentModeRef.current === 'accept') {
+          return 'allow_once';
+        }
+
+        // Get default suggestions (same as enhanced confirm)
+        const suggestions: ApprovalSuggestion[] = [
+          { action: 'allow_once', label: 'Yes', shortcut: '1' },
+          { action: 'allow_always', label: "Yes, and don't ask again", shortcut: '2' },
+          { action: 'deny', label: 'No', shortcut: '3' },
+        ];
+
+        return new Promise<ApprovalAction>((resolve) => {
+          setConfirmState({
+            tool: request.tool,
+            input: request.input as Record<string, unknown>,
+            suggestions,
+            metadata: request.metadata,
+            resolve,
+          });
+        });
+      });
+
       // Set callback to save permission rules to settings.local.json
       if (settingsManager?.addPermissionRule) {
         agent.setSaveRuleCallback(async (tool, pattern) => {
@@ -598,7 +852,7 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
       }
     };
     init();
-  }, [agent, resumeLatest, addHistory, permissionSettings, settingsManager, convertMessagesToHistory]);
+  }, [agent, resumeLatest, addHistory, permissionSettings, settingsManager, convertMessagesToHistory, cwd]);
 
   // Handle question answers (AskUserQuestion)
   const handleQuestionComplete = useCallback((answers: QuestionAnswer[]) => {
@@ -634,6 +888,68 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
     }
   };
 
+  // Handle plan approval decision
+  const handlePlanApprovalDecision = useCallback(async (option: PlanApprovalOption, customInput?: string) => {
+    // Close approval UI
+    setPlanApprovalState(null);
+
+    switch (option) {
+      case 'approve_clear':
+        // Option 1: Clear context + auto-accept edits
+        addHistory({ type: 'info', content: 'Plan approved (clearing context, auto-accepting edits)' });
+        agent.exitPlanMode(true); // Approve with permissions
+        agent.clearHistory(); // Clear conversation context
+        await agent.startSession(); // Start fresh session
+        setHistory(initialHistory); // Clear UI history
+        setCurrentMode('accept'); // Switch to auto-accept mode
+        break;
+
+      case 'approve_manual_keep':
+        // Option 2: Keep context + manually approve edits (NEW)
+        addHistory({ type: 'info', content: 'Plan approved (keeping context, manual approval enabled)' });
+        agent.exitPlanMode(true); // Approve with permissions
+        // Keep conversation history
+        // Keep plan file and exploration context
+        setCurrentMode('normal'); // Manual approval mode
+        break;
+
+      case 'approve':
+        // Option 3: Clear plan details + auto-accept edits
+        addHistory({ type: 'info', content: 'Plan approved (auto-accepting edits)' });
+        agent.exitPlanMode(true); // Approve with permissions
+        // Keep conversation but clear plan-specific details
+        setCurrentMode('accept'); // Switch to auto-accept mode
+        break;
+
+      case 'approve_manual':
+        // Option 4: Clear plan details + manually approve edits
+        addHistory({ type: 'info', content: 'Plan approved (manual approval enabled)' });
+        agent.exitPlanMode(true); // Approve with permissions
+        // Keep conversation but clear plan-specific details
+        setCurrentMode('normal'); // Manual approval mode
+        break;
+
+      case 'modify':
+        // Option 5: Go back to modify the plan
+        if (customInput) {
+          addHistory({ type: 'info', content: `Modifying plan: ${customInput}` });
+          addHistory({ type: 'user', content: customInput });
+          await runAgent(customInput);
+        } else {
+          addHistory({ type: 'info', content: 'Please provide feedback on what to change' });
+        }
+        // Stay in plan mode
+        break;
+
+      case 'cancel':
+        // Cancel plan mode entirely
+        addHistory({ type: 'info', content: 'Plan cancelled' });
+        agent.exitPlanMode(false); // Exit without approving
+        setCurrentMode('normal');
+        break;
+    }
+  }, [agent, addHistory, initialHistory]);
+
   // Handle model selection
   const handleModelSelect = async (model: string, providerId?: ProviderName, authMethod?: string) => {
     agent.setModel(model, providerId, authMethod);
@@ -684,6 +1000,20 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
         return true;
       }
 
+      case 'tasks': {
+        const { TaskManager } = await import('../../core/session/tasks/task-manager.js');
+        const taskManager = new TaskManager();
+        const filter = (arg as 'all' | 'running' | 'completed' | 'error') || 'all';
+        const tasks = taskManager.listTasks(filter);
+
+        if (tasks.length === 0) {
+          addHistory({ type: 'info', content: 'No background tasks' });
+        } else {
+          addHistory({ type: 'info', content: '__TASKS__', meta: { input: tasks } });
+        }
+        return true;
+      }
+
       case 'resume': {
         let success = false;
 
@@ -1098,8 +1428,78 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
         return true;
       }
 
-      default:
+      case 'commands':
+      case 'cmd': {
+        const { getCommandManager } = await import('../../ext/commands/index.js');
+        const cmdMgr = await getCommandManager(cwd);
+        const commands = await cmdMgr.listCommands();
+
+        if (commands.length === 0) {
+          addHistory({ type: 'info', content: 'No custom commands found' });
+        } else {
+          addHistory({ type: 'info', content: '__COMMANDS__', meta: { commands } });
+        }
+        return true;
+      }
+
+      default: {
+        // Check for custom commands
+        const debugEnabled = process.env.GEN_DEBUG?.includes('commands');
+        if (debugEnabled) {
+          console.error(`[debug:commands] Checking custom command: /${command}`);
+          console.error(`[debug:commands] CWD: ${cwd}`);
+        }
+
+        const { getCommandManager } = await import('../../ext/commands/index.js');
+        const cmdMgr = await getCommandManager(cwd);
+
+        if (debugEnabled) {
+          console.error(`[debug:commands] Command manager initialized for: ${cwd}`);
+        }
+
+        if (await cmdMgr.hasCommand(command)) {
+          const argString = parts.slice(1).join(' ');
+          const parsed = await cmdMgr.parseCommand(command, argString);
+
+          if (parsed) {
+            // Apply pre-authorized tools
+            if (parsed.preAuthorizedTools.length > 0) {
+              const permManager = agent.getPermissionManager();
+
+              // Convert tool names/patterns to PromptPermissions
+              const prompts = parsed.preAuthorizedTools.map((toolSpec: string) => {
+                // Check if it's a pattern like "Bash(gh:*)"
+                const patternMatch = toolSpec.match(/^(\w+)\(([^)]+)\)$/);
+                if (patternMatch) {
+                  const [, tool, pattern] = patternMatch;
+                  return { tool, prompt: pattern };
+                } else {
+                  // Simple tool name like "Read" or "Write"
+                  return { tool: toolSpec, prompt: `use ${toolSpec} tool` };
+                }
+              });
+
+              permManager.addAllowedPrompts(prompts);
+            }
+
+            // Apply model override
+            if (parsed.modelOverride) {
+              agent.setModel(parsed.modelOverride);
+              setCurrentModel(parsed.modelOverride);
+              setCurrentProvider(agent.getProvider());
+            }
+
+            // Add command to history
+            addHistory({ type: 'user', content: `/${command} ${argString}`.trim() });
+
+            // Execute expanded prompt
+            await runAgent(parsed.expandedPrompt);
+            return true;
+          }
+        }
+
         return false;
+      }
     }
   };
 
@@ -1187,6 +1587,7 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
                 meta: {
                   toolName: event.name,
                   success: event.result.success,
+                  error: event.result.error,
                   metadata: event.result.metadata,
                 },
               });
@@ -1499,7 +1900,10 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
             name={(item.meta?.toolName as string) || ''}
             success={(item.meta?.success as boolean) ?? true}
             output={item.content}
+            error={(item.meta?.error as string) || undefined}
             metadata={item.meta?.metadata as Record<string, unknown> | undefined}
+            expanded={expandedToolResults.has(item.id)}
+            id={item.id}
           />
         );
       case 'info':
@@ -1507,6 +1911,9 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
         if (item.content === '__SESSIONS__' && item.meta?.input) {
           return <SessionsTable sessions={item.meta.input as Session[]} />;
         }
+        if (item.content === '__TASKS__' && item.meta?.input) {
+          return <TasksTable tasks={item.meta.input as any[]} />;
+        }
         if (item.content === '__PERMISSIONS__' && item.meta?.rules) {
           return (
             <PermissionRulesDisplay
@@ -1525,6 +1932,9 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
         if (item.content === '__MEMORY__' && item.meta?.files) {
           return <MemoryFilesDisplay files={item.meta.files as MemoryFileInfo[]} />;
         }
+        if (item.content === '__COMMANDS__' && item.meta?.commands) {
+          return <CommandListDisplay commands={item.meta.commands as any[]} />;
+        }
         // Check if content is a formatted box (starts with box border)
         if (item.content.trim().startsWith('+---')) {
           return (
@@ -1566,6 +1976,7 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
           suggestions={confirmState.suggestions}
           onDecision={handlePermissionDecision}
           projectPath={settingsManager?.getCwd?.() ?? process.cwd()}
+          metadata={confirmState.metadata}
         />
       )}
 
@@ -1637,9 +2048,10 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
             value={input}
             onChange={setInput}
             onSubmit={handleSubmit}
+            hint={matchedCommandHint}
           />
           {showCmdSuggestions && cmdSuggestions.length > 0 && (
-            <CommandSuggestions input={input} selectedIndex={cmdSuggestionIndex} />
+            <CommandSuggestions input={input} selectedIndex={cmdSuggestionIndex} customCommands={customCommands} />
           )}
           {currentMode === 'plan' && !isProcessing && (
             <Text color={colors.warning} dimColor>