rl-rockcli 0.0.8 → 0.0.10

package/commands/attach/opentui-repl/App.tsx

@@ -0,0 +1,891 @@
+import { Show, createSignal, createEffect, on, onCleanup, onMount } from 'solid-js';
+import { useKeyboard, useRenderer } from '@opentui/solid';
+import { ThemeProvider, useTheme } from './contexts/ThemeContext.tsx';
+import { SessionProvider, type SessionInfo } from './contexts/SessionContext.tsx';
+import { ReplProvider, useRepl } from './contexts/ReplContext.tsx';
+import { ToastProvider, useToast } from './contexts/ToastContext.tsx';
+import { Header } from './components/Header.tsx';
+import { OutputArea } from './components/OutputArea.tsx';
+import { ExecutionStatus } from './components/ExecutionStatus.tsx';
+import { PromptInput } from './components/PromptInput.tsx';
+import { StatusBar } from './components/StatusBar.tsx';
+import { DropdownMenu } from './components/DropdownMenu.tsx';
+import { DetailView } from './components/DetailView.tsx';
+import { Console } from './components/Console.tsx';
+import { Toast } from './components/Toast.tsx';
+import { ConnectingScreen } from './components/ConnectingScreen.tsx';
+import { useResources } from './hooks/useResources.ts';
+import { executeBuiltinCommand, isBuiltinCommand, checkInteractiveCommand } from './builtinCommands.ts';
+import {
+  parseAtContext,
+  getLocalCompletions,
+  getRemoteCompletions,
+  replaceAtPath,
+} from '../ink-repl/utils/atCompletion.js';
+import { parseExecutionError, friendlyErrorMessage } from '../ink-repl/utils/parseError.js';
+import { formatCommandOutput } from '../ink-repl/utils/responseFormatter.js';
+
+// Flag to prevent handleInputChange from resetting historyIndex during navigation
+let _navigatingHistory = false;
+
+function ReplShell(props: { onExit?: () => void }) {
+  const theme = useTheme();
+  const [state, setState, { nextId, addLog }] = useRepl();
+  const session = useSession();
+  const renderer = useRenderer();
+  const toast = useToast();
+
+  // Connection is already established by repl.js before starting OpenTUI
+  // Skip loading state and show UI immediately
+  const [ready] = createSignal(true);
+
+  // Wire up console copy-to-clipboard via opentui's onCopySelection callback
+  // This handles copy-selection action triggered by Ctrl+Y key binding within the Console
+  renderer.console.onCopySelection = (text: string) => {
+    if (!text || text.length === 0) return;
+    copyToClipboard(text);
+    toast.show({ variant: 'success', message: 'Console log copied to clipboard' });
+    renderer.clearSelection();
+  };
+
+  // Store ref to input for focus management
+  let inputRef: any = null;
+
+  // Auto-copy on mouse selection release
+  // When user selects text with mouse and releases button, auto-copy to clipboard.
+  // This is needed because consoleOptions.onCopySelection only works for the
+  // built-in Console component, not the main app content area.
+  function handleMouseUp() {
+    const selection = renderer.getSelection();
+    if (selection) {
+      const text = selection.getSelectedText();
+      if (text && text.length > 0) {
+        copyToClipboard(text);
+        toast.show({ variant: 'success', message: 'Selection copied to clipboard' });
+        renderer.clearSelection();
+      }
+    }
+    // Restore focus to input after any mouse interaction
+    setTimeout(() => {
+      if (inputRef && state.viewMode === 'repl' && !state.consoleVisible && inputRef.focus) {
+        inputRef.focus();
+      }
+    }, 50);
+  }
+
+  // Stats tracking
+  const stats = { startTime: Date.now(), shellCommands: 0, builtinCommands: 0 };
+
+  // AbortController for cancelling execution
+  let abortController: AbortController | null = null;
+
+  // Track last save time for auto-save
+  let lastSaveTime = 0;
+
+  // Track @ completion timeout
+  let atCompletionTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  // Trigger @ completion for /upload command
+  async function triggerAtCompletion(atContext: any) {
+    if (!atContext) return;
+
+    try {
+      let items;
+      if (atContext.isLocal) {
+        // First @: local file completion
+        items = getLocalCompletions(atContext.partialPath, process.cwd());
+      } else {
+        // Second @: remote file completion
+        items = await getRemoteCompletions(session.sessionManager, atContext.partialPath);
+      }
+
+      if (items.length > 0) {
+        setState('menuItems', items);
+        setState('menuVisible', true);
+        setState('selectedIndex', 0);
+        setState('menuType', 'at');
+        setState('atContext', atContext);
+      } else if (state.menuType === 'at') {
+        setState('menuVisible', false);
+        setState('menuItems', []);
+        setState('menuType', null);
+        setState('atContext', null);
+      }
+    } catch {
+      // Silently ignore completion errors
+    }
+  }
+
+  // Watch buffer changes for @ completion
+  createEffect(on(() => state.buffer, (buffer) => {
+    if (atCompletionTimeout) {
+      clearTimeout(atCompletionTimeout);
+      atCompletionTimeout = null;
+    }
+
+    if (state.isExecuting) return;
+
+    // Handle /upload @ completion
+    if (buffer.startsWith('/upload')) {
+      const atContext = parseAtContext(buffer);
+      if (atContext) {
+        atCompletionTimeout = setTimeout(() => {
+          triggerAtCompletion(atContext);
+        }, 100);
+      }
+      return;
+    }
+
+    // Handle /download @ completion
+    if (buffer.startsWith('/download')) {
+      const atContext = parseAtContext(buffer);
+      if (atContext) {
+        atCompletionTimeout = setTimeout(() => {
+          triggerAtCompletion(atContext);
+        }, 100);
+      }
+      return;
+    }
+
+    // Clear menu if not in upload/download command
+    if (state.menuType === 'at') {
+      setState('menuVisible', false);
+      setState('menuItems', []);
+      setState('menuType', null);
+      setState('atContext', null);
+    }
+  }));
+
+  // Start resource monitoring
+  useResources();
+
+  // Load history on startup - use onMount to ensure it runs after component is initialized
+  onMount(() => {
+    loadHistory();
+  });
+
+  // Auto-save outputs periodically (every 5 seconds)
+  const autoSaveTimer = setInterval(() => {
+    if (state.outputs.length > 1 && Date.now() - lastSaveTime > 5000) {
+      saveOutputs();
+    }
+  }, 5000);
+
+  onCleanup(() => {
+    clearInterval(autoSaveTimer);
+    saveOutputs();
+  });
+
+  async function loadHistory() {
+    const { historyManager } = session;
+    if (!historyManager) return;
+
+    try {
+      const [outputs, history] = await Promise.all([
+        typeof historyManager.loadOutputs === 'function'
+          ? Promise.resolve(historyManager.loadOutputs()).catch(() => [])
+          : Promise.resolve([]),
+        typeof historyManager.getHistory === 'function'
+          ? Promise.resolve(historyManager.getHistory()).catch(() => [])
+          : Promise.resolve([]),
+      ]);
+
+      const restoredOutputs = Array.isArray(outputs) ? outputs : [];
+      const restoredCommands = Array.isArray(history) ? history : [];
+
+      if (restoredOutputs.length > 0 || restoredCommands.length > 0) {
+        // Update welcome message to show restored count
+        setState('outputs', 0, 'output',
+          `Connected! Type / for commands, double Ctrl+C to exit.\n✓ Restored ${restoredOutputs.length} output(s), ${restoredCommands.length} command(s) from history.`
+        );
+
+        if (restoredOutputs.length > 0) {
+          setState('outputs', (prev) => [...prev, ...restoredOutputs]);
+        }
+        if (restoredCommands.length > 0) {
+          setState('commandHistory', restoredCommands);
+        }
+      }
+    } catch {
+      // Ignore history loading errors
+    }
+  }
+
+  function saveOutputs() {
+    const { historyManager } = session;
+    if (historyManager && typeof historyManager.saveOutputs === 'function') {
+      try {
+        historyManager.saveOutputs(state.outputs);
+        lastSaveTime = Date.now();
+      } catch {
+        // Ignore history saving errors
+      }
+    }
+  }
+
+  /**
+   * Cancel the currently executing command and recreate the session.
+   * This is needed because aborting the HTTP request does NOT kill the
+   * server-side process — the old session remains blocked.
+   * Creating a new session unblocks command execution immediately.
+   */
+  async function cancelExecution() {
+    // 1. Abort the client-side HTTP request
+    if (abortController) {
+      abortController.abort();
+    }
+
+    // 2. Update the output to show "Cancelled"
+    const outputId = state.outputs[state.outputs.length - 1]?.id;
+    if (outputId) {
+      setState('outputs', (items) =>
+        items.map((item) =>
+          item.id === outputId
+            ? { ...item, output: 'Cancelled by user', exitCode: 130 }
+            : item
+        )
+      );
+    }
+    setState('isExecuting', false);
+    setState('executingCommand', '');
+
+    // 3. Recreate the session to unblock it from the cancelled command
+    const cwdMatch = state.shellPrompt.match(/:([^#]+)#/);
+    const cwd = cwdMatch ? cwdMatch[1] : '/';
+    try {
+      await session.sessionManager.interruptSession(cwd);
+      addLog('info', 'Session recreated after cancel');
+    } catch (err: any) {
+      addLog('warn', `Session recreate failed: ${err.message}`);
+    }
+  }
+
+  // Global keyboard handling
+  useKeyboard(async (e) => {
+    // Detail view: Escape goes back
+    if (state.viewMode === 'detail') {
+      if (e.name === 'escape') {
+        setState('viewMode', 'repl');
+        setState('detailContent', null);
+        e.preventDefault();
+      }
+      return;
+    }
+
+    // Menu navigation
+    if (state.menuVisible) {
+      if (e.name === 'up') {
+        setState('selectedIndex', Math.max(0, state.selectedIndex - 1));
+        e.preventDefault();
+        return;
+      }
+      if (e.name === 'down') {
+        setState('selectedIndex', Math.min(state.menuItems.length - 1, state.selectedIndex + 1));
+        e.preventDefault();
+        return;
+      }
+      if (e.name === 'return') {
+        // #8: Enter on slash menu directly executes the command
+        // For @ / download completion, Enter should fill the selection like Tab
+        const selected = state.menuItems[state.selectedIndex];
+        if (selected) {
+          if (state.menuType === 'at' && state.atContext) {
+            // For @ completion, replace the @path part
+            const newBuffer = replaceAtPath(state.buffer, state.atContext, selected.value);
+            setState('buffer', newBuffer);
+            setState('menuVisible', false);
+            setState('menuItems', []);
+            setState('menuType', null);
+            setState('atContext', null);
+          } else {
+            // For slash menu, execute the command
+            setState('menuVisible', false);
+            setState('menuItems', []);
+            setState('menuType', null);
+            setState('buffer', '');
+            handleCommand(selected.value);
+          }
+        }
+        e.preventDefault();
+        return;
+      }
+      if (e.name === 'tab') {
+        const selected = state.menuItems[state.selectedIndex];
+        if (selected) {
+          if (state.menuType === 'at' && state.atContext) {
+            // For @ completion, replace only the @path part
+            const newBuffer = replaceAtPath(state.buffer, state.atContext, selected.value);
+            setState('buffer', newBuffer);
+          } else {
+            // For slash/path completions, replace entire buffer
+            setState('buffer', selected.value + ' ');
+          }
+          setState('menuVisible', false);
+          setState('menuItems', []);
+          setState('menuType', null);
+          setState('atContext', null);
+        }
+        e.preventDefault();
+        return;
+      }
+      if (e.name === 'escape') {
+        setState('menuVisible', false);
+        setState('menuItems', []);
+        setState('menuType', null);
+        setState('atContext', null);
+        e.preventDefault();
+        return;
+      }
+    }
+
+    // Escape during execution: cancel (#3)
+    if (state.isExecuting && e.name === 'escape') {
+      await cancelExecution();
+      e.preventDefault();
+      return;
+    }
+
+    // Ctrl+C: exit handling
+    if (e.name === 'c' && e.ctrl) {
+      if (state.isExecuting) {
+        await cancelExecution();
+        return;
+      }
+      if (state.exitPending) {
+        // Second Ctrl+C -> exit
+        saveOutputs();
+        // Destroy renderer to exit alternate screen
+        renderer.destroy();
+        // Wait a bit for renderer to fully destroy before calling onExit
+        setTimeout(() => {
+          // Notify render.tsx that we're done (triggers Promise resolve)
+          if (props.onExit) {
+            props.onExit();
+          }
+        }, 100);
+        return;
+      }
+      // #9: First Ctrl+C clears buffer
+      setState('buffer', '');
+      setState('exitPending', true);
+      setTimeout(() => setState('exitPending', false), 2000);
+      return;
+    }
+
+    // Ctrl+V: show detail view of last output
+    if (e.name === 'v' && e.ctrl) {
+      const lastOutput = state.outputs.filter((o) => !o.isWelcome);
+      if (lastOutput.length > 0) {
+        const last = lastOutput[lastOutput.length - 1];
+        setState('detailContent', `$ ${last.command}\n\n${last.output}`);
+        setState('viewMode', 'detail');
+      }
+      e.preventDefault();
+      return;
+    }
+
+    // Ctrl+Y: copy selected text or last output to clipboard
+    if (e.name === 'y' && e.ctrl) {
+      // First check if there's a mouse selection
+      const selection = renderer.getSelection();
+      if (selection) {
+        const selectedText = selection.getSelectedText();
+        if (selectedText && selectedText.length > 0) {
+          copyToClipboard(selectedText);
+          toast.show({ variant: 'success', message: 'Selection copied to clipboard' });
+          renderer.clearSelection();
+          e.preventDefault();
+          return;
+        }
+      }
+      // Fallback: copy last output
+      const lastOutput = state.outputs.filter((o) => !o.isWelcome);
+      if (lastOutput.length > 0) {
+        const last = lastOutput[lastOutput.length - 1];
+        copyToClipboard(last.output);
+        toast.show({ variant: 'success', message: 'Last output copied to clipboard' });
+      }
+      e.preventDefault();
+      return;
+    }
+
+    // F12: toggle console
+    if (e.name === 'f12') {
+      const isVisible = !state.consoleVisible;
+      setState('consoleVisible', isVisible);
+      toast.show({
+        variant: 'info',
+        message: isVisible ? 'Console opened' : 'Console closed'
+      });
+      e.preventDefault();
+      return;
+    }
+
+    // Tab: path completion (#6)
+    if (e.name === 'tab' && !state.isExecuting && !state.menuVisible) {
+      handleTabCompletion();
+      e.preventDefault();
+      return;
+    }
+
+    // History navigation (only when not executing and menu not visible)
+    if (!state.isExecuting && !state.menuVisible) {
+      if (e.name === 'up') {
+        navigateHistory('up');
+        e.preventDefault();
+        return;
+      }
+      if (e.name === 'down') {
+        navigateHistory('down');
+        e.preventDefault();
+        return;
+      }
+    }
+
+    // Any other key resets exit pending
+    if (state.exitPending && e.name !== 'c') {
+      setState('exitPending', false);
+    }
+  });
+
+  // #6: Tab path completion
+  async function handleTabCompletion() {
+    const input = state.buffer;
+    if (!input || !input.trim()) return;
+
+    try {
+      const { getPathCompletions } = await import('../ink-repl/utils/pathCompletion.js');
+      const completions = await getPathCompletions(session.sessionManager, input);
+
+      if (completions.length === 0) return;
+
+      if (completions.length === 1) {
+        // Single completion: auto-fill
+        setState('buffer', completions[0].value);
+      } else {
+        // Multiple completions: show in dropdown menu
+        setState('menuItems', completions);
+        setState('menuVisible', true);
+        setState('selectedIndex', 0);
+      }
+    } catch {
+      // Silently fail
+    }
+  }
+
+  function navigateHistory(direction: 'up' | 'down') {
+    const history = state.commandHistory;
+    if (history.length === 0) return;
+
+    _navigatingHistory = true;
+
+    if (direction === 'up') {
+      if (state.historyIndex === -1) {
+        setState('savedBuffer', state.buffer);
+      }
+      const newIndex = Math.min(state.historyIndex + 1, history.length - 1);
+      setState('historyIndex', newIndex);
+      setState('buffer', history[newIndex]);
+    } else {
+      if (state.historyIndex <= 0) {
+        setState('historyIndex', -1);
+        setState('buffer', state.savedBuffer);
+      } else {
+        const newIndex = state.historyIndex - 1;
+        setState('historyIndex', newIndex);
+        setState('buffer', history[newIndex]);
+      }
+    }
+
+    queueMicrotask(() => { _navigatingHistory = false; });
+  }
+
+  async function handleCommand(input: string) {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+
+    // Reset state
+    setState('exitPending', false);
+    setState('historyIndex', -1);
+    setState('savedBuffer', '');
+    setState('commandHistory', (prev) => [trimmed, ...prev]);
+    setState('buffer', '');
+    setState('menuVisible', false);
+    setState('menuItems', []);
+
+    // Check if it's a builtin command
+    if (await isBuiltinCommand(trimmed)) {
+      stats.builtinCommands++;
+      const outputId = nextId();
+      setState('outputs', (prev) => [
+        ...prev,
+        {
+          id: outputId,
+          command: trimmed,
+          output: '',
+          exitCode: null,
+          timestamp: Date.now(),
+          prompt: state.shellPrompt,
+        },
+      ]);
+
+      try {
+        const lastOutputs = state.outputs.filter((o) => !o.isWelcome);
+        const lastItem = lastOutputs.length > 0 ? lastOutputs[lastOutputs.length - 1] : null;
+
+        const ctx = {
+          client: session.client,
+          sessionManager: session.sessionManager,
+          historyManager: session.historyManager,
+          sandboxId: session.sandboxId,
+          version: session.version,
+          stats,
+          lastCommand: lastItem?.command || '',
+          lastOutput: lastItem?.output || '',
+          terminalWidth: process.stdout.columns || 120,
+        };
+
+        const result = await executeBuiltinCommand(trimmed, ctx);
+
+        if (result.action === 'exit') {
+          setState('outputs', (items) =>
+            items.map((item) =>
+              item.id === outputId
+                ? { ...item, output: result.output || 'Exiting...', exitCode: result.exitCode ?? 0 }
+                : item
+            )
+          );
+          saveOutputs();
+          // Destroy renderer to exit alternate screen
+          renderer.destroy();
+          // Wait a bit for renderer to fully destroy before calling onExit
+          setTimeout(() => {
+            // Notify render.tsx that we're done (triggers Promise resolve)
+            if (props.onExit) {
+              props.onExit();
+            }
+          }, 100);
+          return;
+        }
+
+        if (result.action === 'clear') {
+          setState('outputs', (prev) => prev.filter((o) => o.isWelcome));
+          return;
+        }
+
+        if (result.action === 'retry' && result.command) {
+          setState('outputs', (items) => items.filter((item) => item.id !== outputId));
+          handleCommand(result.command);
+          return;
+        }
+
+        setState('outputs', (items) =>
+          items.map((item) =>
+            item.id === outputId
+              ? { ...item, output: result.output || '', exitCode: result.exitCode ?? 0 }
+              : item
+          )
+        );
+        addLog('info', `Builtin command: ${trimmed.split(' ')[0]}`);
+
+        // Save builtin command to history manager
+        if (session.historyManager) {
+          try {
+            await session.historyManager.addCommand(trimmed);
+          } catch {
+            // Ignore history save errors
+          }
+        }
+      } catch (err: any) {
+        const friendlyMsg = friendlyErrorMessage(err.message || String(err));
+        setState('outputs', (items) =>
+          items.map((item) =>
+            item.id === outputId
+              ? { ...item, output: friendlyMsg, exitCode: 1 }
+              : item
+          )
+        );
+        addLog('error', `Builtin error: ${err.message || String(err)}`);
+      }
+      return;
+    }
+
+    // #2: Check for interactive commands before executing
+    try {
+      const interactiveCheck = await checkInteractiveCommand(trimmed);
+      if (interactiveCheck.isInteractive) {
+        const outputId = nextId();
+        const altMsg = interactiveCheck.alternative
+          ? `\n${interactiveCheck.alternative}`
+          : '';
+        setState('outputs', (prev) => [
+          ...prev,
+          {
+            id: outputId,
+            command: trimmed,
+            output: `'${interactiveCheck.cmdName}' is an interactive command and cannot run in REPL mode.${altMsg}`,
+            exitCode: 1,
+            timestamp: Date.now(),
+            prompt: state.shellPrompt,
+          },
+        ]);
+        return;
+      }
+    } catch {
+      // If check fails, proceed with execution
+    }
+
+    // Shell command
+    stats.shellCommands++;
+    const outputId = nextId();
+    setState('outputs', (prev) => [
+      ...prev,
+      {
+        id: outputId,
+        command: trimmed,
+        output: '',
+        exitCode: null,
+        timestamp: Date.now(),
+        prompt: state.shellPrompt,
+      },
+    ]);
+
+    setState('isExecuting', true);
+    setState('executingCommand', trimmed);
+    setState('executionStartTime', Date.now());
+
+    // #3: Create AbortController for this execution
+    abortController = new AbortController();
+    const currentAbort = abortController;
+
+    try {
+      const result = await session.sessionManager.execute(trimmed, { signal: currentAbort.signal });
+
+      // Check if cancelled during execution
+      if (currentAbort.signal.aborted) return;
+
+      // Format command output using responseFormatter
+      const formatted = formatCommandOutput(result ?? { exit_code: 0, output: '' }, { locale: 'zh' });
+      let output = formatted.output ?? '';
+      // #1: Fix exit_code field name (SDK returns snake_case)
+      const exitCode = formatted.exitCode ?? result?.exit_code ?? 0;
+
+      // Handle abnormal exit codes with helpful messages
+      if (exitCode === -1) {
+        // -1 typically indicates process was killed or internal error
+        const hint = output ? '' : 'Command terminated abnormally (exit code -1). This may indicate a timeout, signal termination, or internal error.';
+        output = output || hint;
+        addLog('error', `Command terminated abnormally (exit code -1)`);
+      } else if (exitCode === 137) {
+        // 128 + 9 (SIGKILL) - often OOM killed
+        output += output ? '\n' : '';
+        output += '[Process killed (exit code 137). Possibly OOM or manually terminated.]';
+        addLog('warn', `Process killed (exit code 137)`);
+      } else if (exitCode === 143) {
+        // 128 + 15 (SIGTERM) - graceful termination
+        output += output ? '\n' : '';
+        output += '[Process terminated (exit code 143). Received SIGTERM.]';
+        addLog('warn', `Process terminated (exit code 143)`);
+      }
+
+      setState('outputs', (items) =>
+        items.map((item) =>
+          item.id === outputId ? { ...item, output, exitCode, metaInfo: formatted.metaInfo, tips: formatted.tips } : item
+        )
+      );
+
+      // Log execution result
+      if (exitCode === 0) {
+        addLog('info', `Command completed: ${trimmed.slice(0, 30)}${trimmed.length > 30 ? '...' : ''}`);
+      } else if (exitCode > 0) {
+        addLog('warn', `Command exited with code ${exitCode}`);
+      }
+
+      // #7: Update CWD after every shell command
+      try {
+        const pwdResult = await session.sessionManager.execute('pwd');
+        if (pwdResult?.output) {
+          const cwd = pwdResult.output.trim();
+          const newPrompt = `${session.user}@${session.hostname}:${cwd}# `;
+          setState('shellPrompt', newPrompt);
+
+          // Update work_dir in history manager
+          if (session.historyManager && session.historyManager.updateWorkDir) {
+            await session.historyManager.updateWorkDir(cwd);
+          }
+        }
+      } catch {
+        // Ignore prompt update errors
+      }
+
+      // #5: Save command to history manager
+      if (session.historyManager) {
+        try {
+          await session.historyManager.addCommand(trimmed);
+        } catch {
+          // Ignore history save errors
+        }
+      }
+    } catch (err: any) {
+      if (currentAbort.signal.aborted) return;
+
+      // Parse error to extract meaningful output and exit code
+      const { output, exitCode } = parseExecutionError(err);
+      
+      // Check if error message contains an actual exit code from command execution
+      // If not (timeout/network error), don't pass exit_code to formatCommandOutput
+      const hasExitCodeInMessage = /exit code \d+/.test(err.message || '');
+      
+      // Format error output with metaInfo and tips
+      const errorResult = hasExitCodeInMessage ? { output, exit_code: exitCode } : { output };
+      const formatted = formatCommandOutput(errorResult, { locale: 'zh' });
+
+      setState('outputs', (items) =>
+        items.map((item) =>
+          item.id === outputId
+            ? { ...item, output: formatted.output || output, exitCode: formatted.exitCode, metaInfo: formatted.metaInfo, tips: formatted.tips }
+            : item
+        )
+      );
+      addLog('error', `Execution error: ${err.message || String(err)}`);
+    } finally {
+      // Only reset execution state if no new command has taken over
+      // (abortController changes when a new command starts)
+      const isCurrentExecution = abortController === currentAbort;
+      if (isCurrentExecution) {
+        abortController = null;
+        // Calculate execution duration
+        const startTime = state.executionStartTime;
+        if (startTime) {
+          setState('lastExecutionDuration', Date.now() - startTime);
+        }
+        setState('isExecuting', false);
+        setState('executingCommand', '');
+        setState('executionStartTime', null);
+      }
+    }
+  }
+
+  function handleInputChange(value: string) {
+    setState('buffer', value);
+
+    // #4: Reset historyIndex when typing after navigating history
+    if (state.historyIndex !== -1 && !_navigatingHistory) {
+      setState('historyIndex', -1);
+    }
+
+    // Slash command autocomplete
+    if (value === '/') {
+      const trigger = session.triggers[0];
+      if (trigger) {
+        const items = trigger.getItems('/');
+        setState('menuItems', items);
+        setState('menuVisible', true);
+        setState('selectedIndex', 0);
+      }
+    } else if (value.startsWith('/') && state.menuVisible) {
+      const trigger = session.triggers[0];
+      if (trigger) {
+        const items = trigger.getItems(value).filter(
+          (item: any) => item.value.toLowerCase().startsWith(value.toLowerCase())
+        );
+        setState('menuItems', items);
+        setState('selectedIndex', 0);
+        if (items.length === 0) {
+          setState('menuVisible', false);
+        }
+      }
+    } else if (!value.startsWith('/')) {
+      setState('menuVisible', false);
+      setState('menuItems', []);
+    }
+  }
+
+  return (
+    <box
+      width="100%"
+      height="100%"
+      flexDirection="column"
+      backgroundColor={theme.colors.background}
+      onMouseUp={handleMouseUp}
+    >
+      <Show when={ready()} fallback={<ConnectingScreen sandboxId={session.sandboxId} />}>
+        <Show when={state.viewMode === 'detail'}>
+          <DetailView />
+        </Show>
+        <Show when={state.viewMode === 'repl'}>
+          {/* Header */}
+          <Header />
+
+          {/* Scrollable content area */}
+          <box flexDirection="column" flexGrow={1} overflow="hidden" minHeight={0}>
+            <OutputArea />
+            <ExecutionStatus
+              isExecuting={state.isExecuting}
+              command={state.executingCommand}
+              lastDuration={state.lastExecutionDuration}
+            />
+          </box>
+
+          {/* Fixed bottom UI */}
+          <box flexDirection="column" flexShrink={0}>
+            <PromptInput onSubmit={handleCommand} onInputChange={handleInputChange} onInputRef={(ref) => { inputRef = ref; }} />
+            <DropdownMenu />
+            <Console />
+          </box>
+
+          <StatusBar />
+          <Toast />
+        </Show>
+      </Show>
+    </box>
+  );
+}
+
+function copyToClipboard(text: string) {
+  try {
+    const { execSync } = require('child_process');
+    if (process.platform === 'darwin') {
+      execSync('pbcopy', { input: text, stdio: ['pipe', 'pipe', 'pipe'] });
+    } else {
+      const linuxTools = [
+        'xclip -selection clipboard',
+        'xsel --clipboard --input',
+        'wl-copy',
+      ];
+      for (const cmd of linuxTools) {
+        try {
+          execSync(cmd, { input: text, stdio: ['pipe', 'pipe', 'pipe'] });
+          break;
+        } catch {
+          // try next tool
+        }
+      }
+    }
+  } catch {
+    // Clipboard not available
+  }
+}
+
+// Re-import useSession here to avoid circular dependency
+import { useSession } from './contexts/SessionContext.tsx';
+
+export interface AppProps {
+  session: SessionInfo;
+  theme?: string;
+  onExit?: () => void;
+}
+
+export function App(props: AppProps) {
+  return (
+    <ThemeProvider theme={props.theme}>
+      <SessionProvider session={props.session}>
+        <ReplProvider shellPrompt={props.session.initialPrompt}>
+          <ToastProvider>
+            <ReplShell onExit={props.onExit} />
+          </ToastProvider>
+        </ReplProvider>
+      </SessionProvider>
+    </ThemeProvider>
+  );
+}