rl-rockcli 0.0.9 → 0.0.10

package/commands/attach/ink-repl/InkREPL.js

@@ -0,0 +1,1507 @@
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { Box, Text, useInput, useApp, useStdout } from 'ink';
+
+const h = React.createElement;
+
+// Components
+import { OutputItem } from './components/OutputItem.js';
+import { InputArea } from './components/InputArea.js';
+import { DropdownMenu } from './components/DropdownMenu.js';
+import { ExecutionStatus } from './components/Spinner.js';
+import { StatusBar } from './components/StatusBar.js';
+import { DetailView } from './components/DetailView.js';
+import { Console } from './components/Console.js';
+import { ShellLayout } from './components/ShellLayout.js';
+import { OutputArea } from './components/OutputArea.js';
+import { WelcomeBanner } from './components/WelcomeBanner.js';
+import { useTheme } from './contexts/ThemeContext.js';
+
+// State management
+import {
+  createInitialState,
+  addOutput,
+  showMenu,
+  hideMenu,
+  selectNext,
+  selectPrev,
+  startExecuting,
+  finishExecuting,
+  enterDetailView,
+  exitDetailView,
+  navigateHistoryUp,
+  navigateHistoryDown,
+  setBuffer,
+  setBufferWithSlashMenu,
+  moveCursorLeft,
+  moveCursorRight,
+  moveCursorToStart,
+  moveCursorToEnd,
+  addToHistory,
+  updateResources,
+  updatePrompt,
+  scrollDetailView,
+  toggleConsole,
+  addConsoleLog,
+  scrollConsole,
+  scrollOutputs,
+  scrollOutputsByLines,
+  setPaginatedFile,
+  clearPaginatedFile,
+  setPaginatedFileLoading,
+  extendPaginatedFileRange,
+  setExitPending,
+  selectConsoleLog,
+  getSelectedConsoleLog,
+  clearConsoleSelection,
+  startSelection,
+  updateSelection,
+  endSelection,
+  clearSelection,
+  getSelectedText,
+  shouldEnableMouseMode,
+  toggleMouseCapture,
+} from './replState.js';
+
+// Hooks
+import { useResources } from './hooks/useResources.js';
+import { useFunctionKeys } from './hooks/useFunctionKeys.js';
+import { useMouse } from './hooks/useMouse.js';
+
+// Shortcuts
+import { keybindingManager } from './shortcuts/index.js';
+
+// Utils
+import { getPathCompletions } from './utils/pathCompletion.js';
+import {
+  parseAtContext,
+  getLocalCompletions,
+  getRemoteCompletions,
+  replaceAtPath,
+} from './utils/atCompletion.js';
+import { parseExecutionError, friendlyErrorMessage } from './utils/parseError.js';
+import { formatCommandOutput } from './utils/responseFormatter.js';
+import {
+  calculateOutputPositions,
+  findOutputAtPosition,
+  isInsideContentArea,
+  extractSelectionFromOutputs,
+} from './utils/replSelection.js';
+import { pickVisibleOutputsByHeight } from './utils/outputViewport.js';
+import {
+  extractCatFilePath,
+  shouldEnablePagination,
+  calculatePreviousPageRange,
+  calculateNextPageRange,
+  shouldLoadPreviousPage,
+  shouldLoadNextPage,
+} from './utils/paginatedFileLoading.js';
+import {
+  isBuiltinCommand,
+  executeBuiltinCommand,
+  checkInteractiveCommand,
+} from './builtinCommands.js';
+import { initConsoleLogger, clearConsoleLogger, consoleLogger } from './utils/consoleLogger.js';
+import { copyToClipboard } from './utils/clipboard.js';
+import { httpLogger } from '../../../utils/http-logger.js';
+/**
+ * Main InkREPL component
+ */
+export function InkREPL({
+  sandboxId,
+  hostname,
+  hostIp,
+  user = 'root',
+  client,
+  sessionManager,
+  historyManager,
+  initialPrompt = '$ ',
+  version,
+  triggers = [],
+  onExit,
+}) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+
+  // Load history outputs on mount
+  const [initialOutputs, setInitialOutputs] = useState(null);
+  const [initialCommandHistory, setInitialCommandHistory] = useState(null);
+  const hasLoadedHistory = useRef(false);
+
+  useEffect(() => {
+    if (
+      !hasLoadedHistory.current &&
+      historyManager &&
+      typeof historyManager.loadOutputs === 'function'
+    ) {
+      hasLoadedHistory.current = true;
+      const loadOutputs = Promise.resolve(historyManager.loadOutputs()).catch(() => []);
+      const loadHistory = typeof historyManager.getHistory === 'function'
+        ? Promise.resolve(historyManager.getHistory()).catch(() => [])
+        : Promise.resolve([]);
+
+      Promise.all([loadOutputs, loadHistory])
+        .then(([outputs, history]) => {
+          setInitialOutputs(outputs);
+          setInitialCommandHistory(history);
+        })
+        .catch(() => {
+          // Ignore history loading errors
+        });
+    }
+  }, [historyManager]);
+
+  const [state, setState] = useState(() =>
+    createInitialState({ shellPrompt: initialPrompt })
+  );
+
+  // Apply loaded outputs once available
+  const hasAppliedHistory = useRef(false);
+  useEffect(() => {
+    if (hasAppliedHistory.current) return;
+    if ((initialOutputs && initialOutputs.length > 0) || (initialCommandHistory && initialCommandHistory.length > 0)) {
+      hasAppliedHistory.current = true;
+      setState(s => {
+        // Update welcome message to indicate history loaded
+        const welcomeMsg = s.outputs[0];
+        const restoredOutputs = Array.isArray(initialOutputs) ? initialOutputs : [];
+        const restoredCommands = Array.isArray(initialCommandHistory) ? initialCommandHistory : [];
+        const updatedWelcome = {
+          ...welcomeMsg,
+          output: `Connected! Type / for commands, double Ctrl+C to exit.\n✓ Restored ${restoredOutputs.length} output(s), ${restoredCommands.length} command(s) from history.`,
+        };
+
+        return {
+          ...s,
+          outputs: [
+            updatedWelcome,
+            ...restoredOutputs,
+          ],
+          commandHistory: restoredCommands,
+          historyIndex: -1,
+          savedBuffer: '',
+        };
+      });
+    }
+  }, [initialOutputs, initialCommandHistory]);
+
+  // Get terminal dimensions for full-screen layout
+  const terminalHeight = stdout?.rows || 24;
+  const terminalWidth = stdout?.columns || 80;
+
+  // Calculate visible outputs by *height*, not by item count.
+  // This prevents layout breakage when outputs contain very long single-line logs
+  // that wrap to many terminal rows.
+  // Fixed bottom area needs:
+  //   Empty lines before separator: 2
+  //   Separator line: 1
+  //   ExecutionStatus: 1
+  //   InputArea: separator(1) + paddingTop(1) + input(1) + paddingBottom(1) + separator(1) = 5
+  //   StatusBar: 1
+  //   Total: 10 rows
+  const RESERVED_FIXED_ROWS = 10;
+  const verticalPadding = terminalHeight <= 16 ? 0 : 2; // matches ShellLayout
+  const availableOutputRows = Math.max(1, terminalHeight - RESERVED_FIXED_ROWS - verticalPadding);
+
+  // DEBUG: 输出布局信息到 stderr（不影响 UI）
+  if (process.env.DEBUG_LAYOUT) {
+    console.error(`[LAYOUT] terminalHeight=${terminalHeight}, reserved=${RESERVED_FIXED_ROWS}, padding=${verticalPadding}, available=${availableOutputRows}`);
+  }
+
+  const visibleOutputs = useMemo(() => {
+    // Item-based scrolling (simple and reliable)
+    const offset = typeof state.outputScrollOffset === 'number' ? state.outputScrollOffset : 0;
+    const end = Math.max(0, state.outputs.length - offset);
+    const slice = state.outputs.slice(0, end);
+    
+    const picked = pickVisibleOutputsByHeight(slice, {
+      contentWidth: Math.max(20, terminalWidth),
+      maxLines: 20,
+      maxHeight: availableOutputRows,
+      rowGap: 0,
+    });
+    
+    return picked;
+  }, [state.outputs, state.outputScrollOffset, terminalWidth, availableOutputRows]);
+
+  // Keep existing item-based scrolling logic by approximating how many items fit.
+  // This is used only to cap the scroll offset; rendering itself is height-based.
+  const maxVisibleOutputs = useMemo(() => {
+    return Math.max(1, visibleOutputs.length || 1);
+  }, [visibleOutputs.length]);
+
+  // Ref to track drag selection state
+  const dragRef = useRef({
+    isDragging: false,
+    source: null, // 'detail' | 'console' | 'repl' | null
+    outputPositions: null, // For REPL output selection
+  });
+
+  // Calculate output positions for REPL selection (based on visible outputs)
+  const outputPositions = useMemo(() => {
+    if (state.viewMode === 'repl') {
+      // Top padding depends on terminal height: 0 for small terminals (<= 16 rows), 2 otherwise
+      const topPadding = terminalHeight <= 16 ? 0 : 2;
+      return calculateOutputPositions(visibleOutputs, topPadding, {
+        contentWidth: Math.max(20, terminalWidth),
+        maxLines: 20,
+      });
+    }
+    return [];
+  }, [state.viewMode, visibleOutputs, terminalHeight, terminalWidth]);
+
+  // Calculate text lines for current view (for selection content extraction)
+  const getViewLines = useCallback(() => {
+    if (state.viewMode === 'detail' && state.detailContent) {
+      return state.detailContent.content.split('\n');
+    } else if (state.consoleVisible) {
+      return state.consoleLogs.map(log => log.message);
+    }
+    return [];
+  }, [state.viewMode, state.detailContent, state.consoleVisible, state.consoleLogs]);
+
+  // Mouse event handlers - scroll and drag selection
+  const mouseHandlers = useCallback(() => ({
+    onScroll: (direction, x, y) => {
+      // Don't scroll if actively dragging for selection
+      if (dragRef.current.isDragging) return;
+
+      setState(s => {
+        if (s.viewMode === 'detail') {
+          const delta = direction === 'up' ? -3 : 3;
+          const newState = scrollDetailView(s, delta, terminalHeight - 1);
+          
+          // Check if we need to load more content (pagination)
+          if (s.paginatedFile && !s.paginatedFile.isLoading) {
+            const detailScrollOffset = newState.detailContent?.scrollOffset || 0;
+            const contentLines = (newState.detailContent?.content || '').split('\n').length;
+            const viewportHeight = terminalHeight - 1;
+            const threshold = 5;
+            const { loadedStartLine, loadedEndLine, totalLines } = s.paginatedFile;
+            
+            // Check if should load previous page (scrolling up near top)
+            if (shouldLoadPreviousPage(detailScrollOffset, threshold, loadedStartLine)) {
+              loadPreviousPageAsync(s.paginatedFile);
+            }
+            // Check if should load next page (scrolling down near bottom)
+            else if (shouldLoadNextPage(detailScrollOffset, contentLines, viewportHeight, threshold, loadedEndLine, totalLines)) {
+              loadNextPageAsync(s.paginatedFile);
+            }
+          }
+          
+          return newState;
+        } else if (s.consoleVisible) {
+          const delta = direction === 'up' ? -3 : 3;
+          return scrollConsole(s, delta);
+        }
+        // REPL output history scrolling
+        if (s.viewMode === 'repl') {
+          const delta = direction === 'up' ? 1 : -1;
+          return scrollOutputs(s, delta, maxVisibleOutputs);
+        }
+        return s;
+      });
+    },
+
+    onMouseDown: (button, x, y) => {
+      // Only handle left click (button 0)
+      if (button !== 0) return;
+
+      // Determine selection source based on y position and view mode
+      let source = null;
+      let adjustedY = y;
+
+      if (state.viewMode === 'detail') {
+        // DetailView: header takes 2 rows (0 and 1), content starts at row 3
+        if (y >= 3) {
+          source = 'detail';
+          // Calculate absolute line number (considering scroll offset)
+          const contentRow = y - 2; // Row within visible area (1-based)
+          const scrollOffset = state.detailContent?.scrollOffset || 0;
+          adjustedY = scrollOffset + contentRow; // Absolute line number in content
+        }
+      } else if (state.consoleVisible) {
+        // Console: positioned above status bar, height 8 (+2 for borders)
+        // Status bar is at bottom, so console ends at terminalHeight - 2
+        const consoleTop = terminalHeight - 10; // 8 height + 2 borders
+        if (y >= consoleTop && y < terminalHeight - 1) {
+          source = 'console';
+          // Calculate absolute line number (considering scroll offset)
+          const contentRow = y - consoleTop; // Row within visible area (0-based)
+          adjustedY = state.consoleScrollOffset + contentRow + 1; // Absolute line number (1-based)
+        }
+      } else if (state.viewMode === 'repl') {
+        // REPL output selection - check if inside content area
+        const contentWidth = terminalWidth;
+        if (isInsideContentArea(x, y, contentWidth, outputPositions)) {
+          source = 'repl';
+          adjustedY = y; // Use actual screen Y
+        }
+      }
+
+      if (source) {
+        dragRef.current = { isDragging: true, source, outputPositions };
+        setState(s => startSelection(s, x, adjustedY, source));
+      }
+    },
+
+    onMouseMove: (x, y, isDragging) => {
+      if (!isDragging || !dragRef.current.isDragging) return;
+
+      const source = dragRef.current.source;
+      let adjustedY = y;
+
+      // Adjust y coordinate based on source (with scroll offset)
+      if (source === 'detail') {
+        const contentRow = y - 2; // Row within visible area (1-based)
+        const scrollOffset = state.detailContent?.scrollOffset || 0;
+        adjustedY = scrollOffset + contentRow; // Absolute line number
+      } else if (source === 'console') {
+        const consoleTop = terminalHeight - 10;
+        const contentRow = y - consoleTop; // Row within visible area (0-based)
+        adjustedY = state.consoleScrollOffset + contentRow + 1; // Absolute line number (1-based)
+      } else if (source === 'repl') {
+        adjustedY = y; // Use actual screen Y for REPL
+      }
+
+      // Ensure y is at least 1 (1-based)
+      adjustedY = Math.max(1, adjustedY);
+
+      const lines = source === 'repl' ? [] : getViewLines();
+      setState(s => updateSelection(s, x, adjustedY, lines));
+    },
+
+    onMouseUp: (button, x, y) => {
+      if (!dragRef.current.isDragging) return;
+
+      const source = dragRef.current.source;
+      let adjustedY = y;
+
+      // Adjust y coordinate based on source (with scroll offset)
+      if (source === 'detail') {
+        const contentRow = y - 2; // Row within visible area (1-based)
+        const scrollOffset = state.detailContent?.scrollOffset || 0;
+        adjustedY = scrollOffset + contentRow; // Absolute line number
+      } else if (source === 'console') {
+        const consoleTop = terminalHeight - 10;
+        const contentRow = y - consoleTop; // Row within visible area (0-based)
+        adjustedY = state.consoleScrollOffset + contentRow + 1; // Absolute line number (1-based)
+      } else if (source === 'repl') {
+        adjustedY = y; // Use actual screen Y for REPL
+      }
+
+      adjustedY = Math.max(1, adjustedY);
+
+      const lines = source === 'repl' ? [] : getViewLines();
+      setState(s => {
+        const newState = endSelection(s, x, adjustedY, lines);
+
+        // For REPL selection, extract text using outputPositions
+        if (source === 'repl' && newState.selection) {
+          const positions = dragRef.current.outputPositions;
+          // Ensure positions is a valid array before extracting
+          if (positions && Array.isArray(positions)) {
+            const selectedText = extractSelectionFromOutputs(
+              newState.selection.startX,
+              newState.selection.startY,
+              newState.selection.endX,
+              newState.selection.endY,
+              positions,
+              state.shellPrompt
+            );
+            return {
+              ...newState,
+              selection: {
+                ...newState.selection,
+                content: selectedText,
+              },
+            };
+          }
+        }
+
+        return newState;
+      });
+
+      dragRef.current = { isDragging: false, source: null, outputPositions: null };
+    },
+  }), [terminalHeight, terminalWidth, state.viewMode, state.consoleVisible, state.detailContent, state.consoleScrollOffset, state.shellPrompt, getViewLines, outputPositions]);
+
+  const mouseModeEnabled = shouldEnableMouseMode(state);
+  useMouse(mouseHandlers(), { isActive: mouseModeEnabled });
+
+  const lastMouseCaptureEnabled = useRef(state.mouseCaptureEnabled);
+  useEffect(() => {
+    if (lastMouseCaptureEnabled.current === state.mouseCaptureEnabled) return;
+    lastMouseCaptureEnabled.current = state.mouseCaptureEnabled;
+    // Mouse mode is now always enabled
+  }, [state.mouseCaptureEnabled]);
+
+  // Session stats - persisted across renders
+  const statsRef = useRef({
+    startTime: Date.now(),
+    shellCommands: 0,
+    builtinCommands: 0,
+  });
+
+  // Exit confirmation state - requires two Ctrl+C presses within 2 seconds
+  const exitConfirmRef = useRef({
+    pending: false,
+    timer: null,
+  });
+
+  // Abort controller for cancelling execution
+  const abortControllerRef = useRef(null);
+
+  // Save outputs to history before exit
+  const saveOutputsBeforeExit = useCallback(() => {
+    if (historyManager && typeof historyManager.saveOutputs === 'function') {
+      try {
+        historyManager.saveOutputs(state.outputs);
+      } catch {
+        // Ignore history saving errors
+      }
+    }
+  }, [historyManager, state.outputs]);
+
+  // Initialize console logger with setState
+  useEffect(() => {
+    initConsoleLogger(setState);
+
+    // Enable HTTP logging
+    httpLogger.enable();
+
+    // Default UX note: Mouse mode is always enabled for wheel scrolling.
+    // Many terminals support Shift+drag to bypass mouse reporting and use native selection.
+    const scrollUpKey = keybindingManager.getActionKeyLabel('consoleScrollUp');
+    const scrollDownKey = keybindingManager.getActionKeyLabel('consoleScrollDown');
+    consoleLogger.info(`Wheel scroll enabled. Use ${scrollUpKey}${scrollDownKey} for precise control, or use Shift+drag for native text selection (if supported).`);
+
+    // Log session start using new format
+    httpLogger.log(
+      httpLogger.constructor.LEVEL.INFO,
+      httpLogger.constructor.ACTION.SESSION,
+      `started sandbox=${sandboxId}`
+    );
+
+    // Map log levels to consoleLogger methods
+    const levelToMethod = {
+      DEBUG: 'debug',
+      INFO: 'info',
+      WARN: 'warn',
+      ERROR: 'error',
+    };
+
+    const handleLogEvent = (event) => {
+      const method = levelToMethod[event.level] || 'info';
+      // Pass fullMessage for body events (used when copying)
+      consoleLogger[method](event.message, event.fullMessage);
+    };
+
+    httpLogger.on('request', handleLogEvent);
+    httpLogger.on('response', handleLogEvent);
+    httpLogger.on('error', handleLogEvent);
+    httpLogger.on('log', handleLogEvent);
+
+    return () => {
+      httpLogger.off('request', handleLogEvent);
+      httpLogger.off('response', handleLogEvent);
+      httpLogger.off('error', handleLogEvent);
+      httpLogger.off('log', handleLogEvent);
+      httpLogger.disable();
+      clearConsoleLogger();
+      // Save outputs on unmount
+      saveOutputsBeforeExit();
+    };
+  }, [sandboxId, saveOutputsBeforeExit]);
+
+  // Handle function keys (F1-F12) using action-based API
+  const functionKeyHandlers = useCallback(() => ({
+    toggleConsole: () => setState(s => toggleConsole(s)),
+    // Page Up/Down: scroll console if visible, otherwise scroll output history
+    consoleScrollUp: () => setState(s => (
+      s.consoleVisible ? scrollConsole(s, -5) : scrollOutputs(s, 3, maxVisibleOutputs)
+    )),
+    consoleScrollDown: () => setState(s => (
+      s.consoleVisible ? scrollConsole(s, 5) : scrollOutputs(s, -3, maxVisibleOutputs)
+    )),
+  }), [maxVisibleOutputs]);
+  useFunctionKeys(functionKeyHandlers());
+
+  // Resource monitoring (via client.exec, not session, to avoid output interference)
+  const { resources } = useResources(client, state.viewMode === 'repl' && !state.isExecuting);
+
+  // Update resources in state
+  useEffect(() => {
+    if (resources) {
+      setState(s => updateResources(s, resources));
+    }
+  }, [resources]);
+
+  // Check triggers and update menu
+  const checkTriggers = useCallback((buffer) => {
+    for (const trigger of triggers) {
+      if (buffer.startsWith(trigger.symbol)) {
+        const items = trigger.getItems(buffer);
+        // Filter items by prefix
+        const filtered = items.filter(item =>
+          item.label.toLowerCase().startsWith(buffer.toLowerCase())
+        );
+        return filtered;
+      }
+    }
+    return [];
+  }, [triggers]);
+
+  // Note: Slash menu is now handled synchronously in useInput via setBufferWithSlashMenu
+  // This eliminates the flicker caused by useEffect's asynchronous updates
+  // Path and @ completion menus are still handled via their respective useEffect hooks
+
+  // Ref for @ completion debounce
+  const atCompletionTimeoutRef = useRef(null);
+  const atCompletionAbortRef = useRef(null);
+
+  // Trigger @ completion for /upload command
+  const triggerAtCompletion = useCallback(async (atContext) => {
+    if (!atContext) return;
+
+    try {
+      let items;
+      if (atContext.isLocal) {
+        // First @: local file completion
+        items = getLocalCompletions(atContext.partialPath, process.cwd());
+      } else {
+        // Second @: remote file completion
+        if (atCompletionAbortRef.current) {
+          atCompletionAbortRef.current.abort();
+        }
+        const controller = new AbortController();
+        atCompletionAbortRef.current = controller;
+        items = await getRemoteCompletions(sessionManager, atContext.partialPath, { signal: controller.signal });
+        if (controller.signal.aborted) {
+          return;
+        }
+      }
+
+      if (items.length > 0) {
+        setState(s => showMenu(s, items, 'at', atContext));
+      } else if (state.menuType === 'at') {
+        setState(s => hideMenu(s));
+      }
+    } catch (e) {
+      // Silently ignore completion errors
+    }
+  }, [sessionManager, state.menuType]);
+
+  // Detect @ in buffer for /upload and /download commands and trigger completion
+  useEffect(() => {
+    if (state.isExecuting) return;
+    if (!state.buffer.startsWith('/upload') && !state.buffer.startsWith('/download')) return;
+
+    // Clear previous timeout
+    if (atCompletionTimeoutRef.current) {
+      clearTimeout(atCompletionTimeoutRef.current);
+    }
+
+    const atContext = parseAtContext(state.buffer);
+    if (atContext) {
+      // Debounce to avoid too many completions while typing
+      atCompletionTimeoutRef.current = setTimeout(() => {
+        triggerAtCompletion(atContext);
+      }, 100);
+    } else if (state.menuVisible && state.menuType === 'at') {
+      // No @ context, hide at menu
+      setState(s => hideMenu(s));
+    }
+
+    return () => {
+      if (atCompletionTimeoutRef.current) {
+        clearTimeout(atCompletionTimeoutRef.current);
+      }
+      if (atCompletionAbortRef.current) {
+        atCompletionAbortRef.current.abort();
+      }
+    };
+  }, [state.buffer, state.isExecuting, triggerAtCompletion, state.menuType, state.menuVisible]);
+
+  // Dynamic page loading functions
+  const loadPreviousPageRef = useRef(null);
+  const loadNextPageRef = useRef(null);
+  
+  const loadPreviousPageAsync = useCallback((paginatedFile) => {
+    if (loadPreviousPageRef.current) return; // Already loading
+    
+    loadPreviousPageRef.current = (async () => {
+      const { filePath, loadedStartLine, loadedEndLine } = paginatedFile;
+      const pageSize = 50;
+      const { newStartLine, newEndLine } = calculatePreviousPageRange(loadedStartLine, pageSize);
+      
+      if (newEndLine < newStartLine) return; // No more content
+      
+      setState(s => setPaginatedFileLoading(s, true));
+      
+      try {
+        const result = await sessionManager.execute(`sed -n '${newStartLine},${newEndLine}p' "${filePath}"`);
+        const newContent = result.output || '';
+        
+        setState(s => {
+          // Prepend new content
+          const currentContent = s.detailContent?.content || '';
+          const updatedContent = newContent + '\n' + currentContent;
+          const linesAdded = newContent.split('\n').length;
+          
+          let newState = { 
+            ...s, 
+            detailContent: {
+              ...s.detailContent,
+              content: updatedContent,
+              scrollOffset: (s.detailContent?.scrollOffset || 0) + linesAdded,
+              title: `${filePath} (${paginatedFile.totalLines} lines, showing ${newStartLine}-${loadedEndLine})`,
+            }
+          };
+          
+          // Update paginated file range
+          newState = extendPaginatedFileRange(newState, newStartLine, loadedEndLine);
+          newState = setPaginatedFileLoading(newState, false);
+          
+          return newState;
+        });
+      } catch (e) {
+        setState(s => setPaginatedFileLoading(s, false));
+      } finally {
+        loadPreviousPageRef.current = null;
+      }
+    })();
+  }, [sessionManager]);
+  
+  const loadNextPageAsync = useCallback((paginatedFile) => {
+    if (loadNextPageRef.current) return; // Already loading
+    
+    loadNextPageRef.current = (async () => {
+      const { filePath, loadedStartLine, loadedEndLine, totalLines } = paginatedFile;
+      const pageSize = 50;
+      const { newStartLine, newEndLine } = calculateNextPageRange(loadedEndLine, totalLines, pageSize);
+      
+      if (newStartLine > totalLines) return; // No more content
+      
+      setState(s => setPaginatedFileLoading(s, true));
+      
+      try {
+        const result = await sessionManager.execute(`sed -n '${newStartLine},${newEndLine}p' "${filePath}"`);
+        const newContent = result.output || '';
+        
+        setState(s => {
+          // Append new content
+          const currentContent = s.detailContent?.content || '';
+          const updatedContent = currentContent + '\n' + newContent;
+          
+          let newState = { 
+            ...s, 
+            detailContent: {
+              ...s.detailContent,
+              content: updatedContent,
+              title: `${filePath} (${paginatedFile.totalLines} lines, showing ${loadedStartLine}-${newEndLine})`,
+            }
+          };
+          
+          // Update paginated file range
+          newState = extendPaginatedFileRange(newState, loadedStartLine, newEndLine);
+          newState = setPaginatedFileLoading(newState, false);
+          
+          return newState;
+        });
+      } catch (e) {
+        setState(s => setPaginatedFileLoading(s, false));
+      } finally {
+        loadNextPageRef.current = null;
+      }
+    })();
+  }, [sessionManager]);
+
+  // Execute command
+  const executeCommand = useCallback(async (command) => {
+    if (!command.trim()) return;
+
+    // Increment shell command count
+    statsRef.current.shellCommands++;
+
+    // Check if this is a cat command that should enable pagination
+    let enablePagination = false;
+    let filePath = null;
+    const PAGINATION_THRESHOLD = 100; // Enable pagination if file > 100 lines
+    const INITIAL_PAGE_SIZE = 70; // Initial load: 70 lines
+    
+    if (shouldEnablePagination(command)) {
+      filePath = extractCatFilePath(command);
+      if (filePath) {
+        try {
+          // Get total line count
+          const lineCountResult = await sessionManager.execute(`wc -l < "${filePath}" 2>/dev/null`);
+          const totalLines = parseInt(lineCountResult.output?.trim() || '0', 10);
+          
+          if (totalLines > PAGINATION_THRESHOLD) {
+            enablePagination = true;
+            
+            // Load initial page
+            setState(s => startExecuting(s, command));
+            setState(s => addToHistory(s, command));
+            
+            const initialContent = await sessionManager.execute(`sed -n '1,${INITIAL_PAGE_SIZE}p' "${filePath}"`);
+            
+            setState(s => {
+              let newState = finishExecuting(s);
+              let output = initialContent.output || '';
+              
+              // Add hint for large files
+              const remainingLines = totalLines - INITIAL_PAGE_SIZE;
+              if (remainingLines > 0) {
+                output += `\n\n[Showing first ${INITIAL_PAGE_SIZE} of ${totalLines} lines. Press Ctrl+V to view full content with pagination.]`;
+              }
+              
+              newState = addOutput(newState, command, output, 0);
+              
+              // Set paginated file state (but don't auto-enter detail view)
+              newState = setPaginatedFile(newState, {
+                filePath,
+                totalLines,
+                loadedStartLine: 1,
+                loadedEndLine: Math.min(INITIAL_PAGE_SIZE, totalLines),
+                isLoading: false,
+              });
+              
+              return newState;
+            });
+            
+            // Update prompt (same as below)
+            try {
+              const pwdResult = await sessionManager.execute('pwd');
+              if (pwdResult.output) {
+                const cwd = pwdResult.output.trim();
+                const newPrompt = `${user}@${hostname}:${cwd}# `;
+                setState(s => updatePrompt(s, newPrompt));
+                if (historyManager && historyManager.updateWorkDir) {
+                  await historyManager.updateWorkDir(cwd);
+                }
+              }
+            } catch (e) {
+              // Ignore
+            }
+            
+            return; // Early return, pagination handled
+          }
+        } catch (e) {
+          // Fall through to normal execution
+        }
+      }
+    }
+
+    // Normal execution (non-paginated or pagination failed)
+    // Auto-limit output for potentially large file viewing commands
+    let actualCommand = command;
+    let wasLimited = false;
+    const MAX_OUTPUT_LINES = 70; // maxLines (20) + buffer (50)
+    
+    if (!enablePagination) {
+      // Check if command is a file viewer without explicit line limit
+      const fileViewerPattern = /^\s*(cat|less|more|zcat|bzcat|xzcat)\s+/;
+      const hasHeadTail = /\|\s*(head|tail)\s+/;
+      const hasLineLimit = /-n\s+\d+/;
+      
+      if (fileViewerPattern.test(command) && !hasHeadTail.test(command) && !hasLineLimit.test(command)) {
+        // Use 2>/dev/null to suppress "Broken pipe" error from cat/less when head closes early
+        actualCommand = `${command} 2>/dev/null | head -n ${MAX_OUTPUT_LINES}`;
+        wasLimited = true;
+      }
+    }
+
+    setState(s => startExecuting(s, command));
+    setState(s => addToHistory(s, command));
+
+    try {
+      const result = await sessionManager.execute(actualCommand);
+
+      setState(s => {
+        let newState = finishExecuting(s);
+        
+        // Format command output using responseFormatter
+        const formatted = formatCommandOutput(result, { locale: 'zh' });
+        let output = formatted.output || '';
+        const exitCode = formatted.exitCode ?? result.exit_code ?? 0;
+        
+        // Add hint if output was auto-limited and reached the limit
+        if (wasLimited && output) {
+          const outputLines = output.split('\n').length;
+          // Only show hint if output reached or is close to the limit
+          if (outputLines >= MAX_OUTPUT_LINES - 5) {
+            output += `\n\n[Output limited to ${MAX_OUTPUT_LINES} lines. Use 'head -n <lines>' or 'tail -n <lines>' to view more.]`;
+          }
+        }
+        
+        // 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;
+        } else if (exitCode === 137) {
+          // 128 + 9 (SIGKILL) - often OOM killed
+          output += output ? '\n' : '';
+          output += '[Process killed (exit code 137). Possibly OOM or manually terminated.]';
+        } else if (exitCode === 143) {
+          // 128 + 15 (SIGTERM) - graceful termination
+          output += output ? '\n' : '';
+          output += '[Process terminated (exit code 143). Received SIGTERM.]';
+        }
+        
+        newState = addOutput(newState, command, output, exitCode, null, formatted.metaInfo, formatted.tips);
+        return newState;
+      });
+
+      // Update prompt after command (for cd, etc.)
+      try {
+        const pwdResult = await sessionManager.execute('pwd');
+        if (pwdResult.output) {
+          const cwd = pwdResult.output.trim();
+          const newPrompt = `${user}@${hostname}:${cwd}# `;
+          setState(s => updatePrompt(s, newPrompt));
+
+          // Update work_dir in history manager
+          if (historyManager && historyManager.updateWorkDir) {
+            await historyManager.updateWorkDir(cwd);
+          }
+        }
+      } catch (e) {
+        // Ignore prompt update errors
+      }
+
+      // Save to history manager
+      if (historyManager) {
+        await historyManager.addCommand(command);
+      }
+    } catch (error) {
+      // Parse the error to extract meaningful output
+      const { output, exitCode } = parseExecutionError(error);
+      
+      // Format error output with metaInfo and tips
+      const errorResult = { output };
+      const formatted = formatCommandOutput(errorResult, { locale: 'zh' });
+      
+      setState(s => {
+        let newState = finishExecuting(s);
+        newState = addOutput(newState, command, formatted.output || output, formatted.exitCode ?? exitCode, null, formatted.metaInfo, formatted.tips);
+        return newState;
+      });
+    }
+  }, [sessionManager, historyManager, sandboxId]);
+
+  // Track last command for /retry
+  const lastCommandRef = useRef(null);
+  const lastOutputRef = useRef(null);
+
+  // Handle built-in commands using the builtinCommands module
+  const handleBuiltinCommand = useCallback(async (command) => {
+    // Increment builtin command count
+    statsRef.current.builtinCommands++;
+
+    // Create execution context for builtin commands
+    const context = {
+      sandboxId,
+      client,
+      sessionManager,
+      historyManager,
+      stats: statsRef.current,
+      lastCommand: lastCommandRef.current,
+      lastOutput: lastOutputRef.current,
+      version,
+      terminalWidth, // Add terminal width for table formatting
+      themeManager: null,
+      setTheme: (name) => themeManager.setActiveTheme(name),
+    };
+
+    setState(s => startExecuting(s, command));
+    setState(s => addToHistory(s, command));
+
+    try {
+      const result = await executeBuiltinCommand(command, context);
+
+      // Handle special actions
+      if (result.action === 'exit') {
+        setState(s => finishExecuting(s));
+        saveOutputsBeforeExit();
+        if (onExit) onExit();
+        exit();
+        return;
+      }
+
+      if (result.action === 'clear') {
+        setState(s => {
+          let newState = finishExecuting(s);
+          return { ...newState, outputs: [] };
+        });
+        return;
+      }
+
+      if (result.action === 'retry' && result.command) {
+        setState(s => finishExecuting(s));
+        await executeCommand(result.command);
+        return;
+      }
+
+      // Show output
+      if (result.output) {
+        setState(s => {
+          let newState = finishExecuting(s);
+          newState = addOutput(newState, command, result.output, result.exitCode || 0);
+          return newState;
+        });
+      } else {
+        setState(s => finishExecuting(s));
+      }
+
+      // Save to history manager
+      if (historyManager) {
+        await historyManager.addCommand(command);
+      }
+    } catch (error) {
+      setState(s => {
+        let newState = finishExecuting(s);
+        newState = addOutput(newState, command, friendlyErrorMessage(error.message), 1);
+        return newState;
+      });
+    }
+  }, [sandboxId, client, sessionManager, historyManager, exit, onExit, executeCommand]);
+
+  // Submit command
+  const submitCommand = useCallback(async (command) => {
+    if (!command.trim()) return;
+
+    setState(s => setBuffer(s, '')); // Clear buffer immediately
+
+    // Handle builtin commands
+    if (isBuiltinCommand(command)) {
+      await handleBuiltinCommand(command);
+      return;
+    }
+
+    // Check for interactive commands
+    const interactiveCheck = checkInteractiveCommand(command);
+    if (interactiveCheck.isInteractive) {
+      setState(s => addOutput(s, command,
+        `Interactive command '${interactiveCheck.cmdName}' not supported in attach mode.\n` +
+        `Alternative: ${interactiveCheck.alternative || 'Use non-interactive mode'}`,
+        1
+      , null, Math.max(20, terminalWidth), 50));
+      return;
+    }
+
+    // Track last command for /retry
+    lastCommandRef.current = command;
+
+    // Execute shell command
+    await executeCommand(command);
+  }, [executeCommand, handleBuiltinCommand]);
+
+  // Trigger path completion (async)
+  const triggerPathCompletion = useCallback(async () => {
+    if (!sessionManager || !state.buffer.trim()) return;
+
+    try {
+      const items = await getPathCompletions(sessionManager, state.buffer);
+      if (items.length === 1) {
+        // Single match - auto-fill directly without showing menu
+        setState(s => setBuffer(s, items[0].value));
+      } else if (items.length > 1) {
+        // Multiple matches - show menu
+        setState(s => showMenu(s, items, 'path'));
+      }
+      // No matches - do nothing
+    } catch (e) {
+      // Silently ignore completion errors
+    }
+  }, [sessionManager, state.buffer]);
+
+  // Use ref to track completion state (avoids re-render)
+  const isCompletingRef = useRef(false);
+
+  // Handle copying log to clipboard
+  const handleCopyLog = useCallback(async (message) => {
+    const success = await copyToClipboard(message);
+    if (success) {
+      consoleLogger.info('Copied to clipboard');
+    } else {
+      consoleLogger.warn('Failed to copy to clipboard');
+    }
+    setState(s => clearConsoleSelection(s));
+  }, []);
+
+  // Auto-save outputs periodically (every 5 seconds when there are changes)
+  const lastSaveRef = useRef(0);
+  useEffect(() => {
+    const outputCount = state.outputs.length;
+    const now = Date.now();
+
+    // Save if outputs changed and at least 5 seconds passed since last save
+    if (outputCount > 1 && now - lastSaveRef.current > 5000) {
+      saveOutputsBeforeExit();
+      lastSaveRef.current = now;
+    }
+  }, [state.outputs.length, saveOutputsBeforeExit]);
+
+  // Wrapper to handle async path completion properly
+  const handleTabCompletion = useCallback(() => {
+    if (state.menuVisible && state.menuItems.length > 0) {
+      // Select from existing menu
+      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(s => setBuffer(hideMenu(s), newBuffer));
+        } else {
+          // For other completions, replace entire buffer
+          setState(s => setBuffer(hideMenu(s), selected.value));
+        }
+      }
+    } else if (!isCompletingRef.current) {
+      // Trigger path completion
+      isCompletingRef.current = true;
+      triggerPathCompletion().finally(() => { isCompletingRef.current = false; });
+    }
+  }, [state.menuVisible, state.menuItems, state.selectedIndex, state.menuType, state.atContext, state.buffer, triggerPathCompletion]);
+
+  // Handle keyboard input using keybindingManager
+  useInput((input, key) => {
+    // If exit is pending and user presses any key other than Ctrl+C, cancel the pending state
+    if (exitConfirmRef.current.pending && !keybindingManager.matchesAction('exit', input, key)) {
+      if (exitConfirmRef.current.timer) {
+        clearTimeout(exitConfirmRef.current.timer);
+      }
+      exitConfirmRef.current.pending = false;
+      setState(s => setExitPending(s, false));
+      // Continue processing the current key input normally (don't return)
+    }
+
+    // Global exit keys - require two presses within 2 seconds
+    if (keybindingManager.matchesAction('exit', input, key)) {
+      if (exitConfirmRef.current.pending) {
+        // Second press - actually exit
+        if (exitConfirmRef.current.timer) {
+          clearTimeout(exitConfirmRef.current.timer);
+        }
+        setState(s => setExitPending(s, false));
+        saveOutputsBeforeExit();
+        if (onExit) onExit();
+        exit();
+        return;
+      } else {
+        // First press - clear buffer and show confirmation in status bar
+        exitConfirmRef.current.pending = true;
+        setState(s => {
+          const newState = setExitPending(s, true);
+          return setBuffer(newState, ''); // Clear input buffer
+        });
+        exitConfirmRef.current.timer = setTimeout(() => {
+          exitConfirmRef.current.pending = false;
+          setState(s => setExitPending(s, false));
+        }, 2000);
+        return;
+      }
+    }
+
+    // Cancel execution with Escape
+    if (state.isExecuting && keybindingManager.matchesAction('cancelExecution', input, key)) {
+      // Debug: log the key that triggered cancellation
+      consoleLogger.warn(`Cancel triggered by key: input=${JSON.stringify(input)}, key=${JSON.stringify(key)}`);
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      setState(s => {
+        let newState = finishExecuting(s);
+        newState = addOutput(newState, s.executingCommand, "Cancelled by user", 130, null, Math.max(20, terminalWidth), 50);
+        return newState;
+      });
+      consoleLogger.warn('Execution cancelled');
+      return;
+    }
+
+    // Toggle mouse capture mode - REMOVED (always enabled)
+    // if (keybindingManager.matchesAction('toggleMouseCapture', input, key)) {
+    //   setState(s => toggleMouseCapture(s));
+    //   return;
+    // }
+
+    // Detail view mode
+    if (state.viewMode === 'detail') {
+      // Check for selection copy first
+      if (keybindingManager.matchesAction('submit', input, key)) {
+        const selectedText = getSelectedText(state);
+        if (selectedText) {
+          handleCopyLog(selectedText);
+          setState(s => clearSelection(s));
+          return;
+        }
+      }
+
+      // Copy full detail content with Ctrl+Y
+      if (keybindingManager.matchesAction('copyLastOutput', input, key)) {
+        if (state.detailContent && state.detailContent.content) {
+          handleCopyLog(state.detailContent.content);
+        }
+        return;
+      }
+
+      if (keybindingManager.matchesAction('detailExit', input, key)) {
+        setState(s => {
+          let newState = exitDetailView(s);
+          // Clear paginated file state when exiting detail view
+          newState = clearPaginatedFile(newState);
+          return newState;
+        });
+        return;
+      }
+      if (keybindingManager.matchesAction('detailScrollUp', input, key)) {
+        setState(s => scrollDetailView(s, -1, terminalHeight - 1));
+        return;
+      }
+      if (keybindingManager.matchesAction('detailScrollDown', input, key)) {
+        setState(s => scrollDetailView(s, 1, terminalHeight - 1));
+        return;
+      }
+      return;
+    }
+
+    // Executing mode - block other input
+    if (state.isExecuting) {
+      // Debug: log all inputs during execution (use warn to ensure visibility)
+      consoleLogger.warn(`Input during execution: input=${JSON.stringify(input)}, key=${JSON.stringify(key)}`);
+      return;
+    }
+
+    // REPL selection mode: Enter to copy (check before regular Enter handling)
+    if (state.viewMode === 'repl' && state.selection?.source === 'repl') {
+      if (keybindingManager.matchesAction('submit', input, key)) {
+        const selectedText = getSelectedText(state);
+        if (selectedText) {
+          handleCopyLog(selectedText);
+          setState(s => clearSelection(s));
+          return;
+        }
+      }
+    }
+
+    // Console selection mode: Enter to copy (check before regular Enter handling)
+    if (state.consoleVisible) {
+      if (keybindingManager.matchesAction('submit', input, key)) {
+        // First check for drag selection
+        const selectedText = getSelectedText(state);
+        if (selectedText && state.selection?.source === 'console') {
+          handleCopyLog(selectedText);
+          setState(s => clearSelection(s));
+          return;
+        }
+
+        // Then check for keyboard selection
+        if (state.consoleSelectedIndex >= 0) {
+          const log = getSelectedConsoleLog(state);
+          if (log) {
+            // Use fullMessage if available (contains complete body), otherwise use message
+            handleCopyLog(log.fullMessage || log.message);
+          }
+          return;
+        }
+      }
+    }
+
+    // Enter: Submit or select
+    if (keybindingManager.matchesAction('submit', input, key)) {
+      if (state.menuVisible && state.menuItems.length > 0) {
+        const selected = state.menuItems[state.selectedIndex];
+        if (selected) {
+          if (state.menuType === 'at' && state.atContext) {
+            // For @ completion, replace the @path part and continue editing
+            const newBuffer = replaceAtPath(state.buffer, state.atContext, selected.value);
+            setState(s => setBuffer(hideMenu(s), newBuffer));
+          } else {
+            // For other menus (slash commands), execute directly
+            setState(s => hideMenu(s));
+            submitCommand(selected.value);
+          }
+        }
+      } else {
+        submitCommand(state.buffer);
+      }
+      return;
+    }
+
+    // Tab: Auto-complete
+    if (keybindingManager.matchesAction('autoComplete', input, key)) {
+      handleTabCompletion();
+      return;
+    }
+
+    // Escape: Close menu, cancel console selection, or clear drag selection
+    if (keybindingManager.matchesAction('closeMenu', input, key)) {
+      // Clear drag selection first if active
+      if (state.selection) {
+        setState(s => clearSelection(s));
+        return;
+      }
+      if (state.consoleVisible && state.consoleSelectedIndex >= 0) {
+        setState(s => clearConsoleSelection(s));
+        return;
+      }
+      if (state.menuVisible) {
+        setState(s => hideMenu(s));
+      }
+      return;
+    }
+
+    // Up arrow - context-dependent
+    if (keybindingManager.matchesAction('menuUp', input, key) || keybindingManager.matchesAction('historyUp', input, key)) {
+      if (state.consoleVisible) {
+        // Console selection mode
+        setState(s => selectConsoleLog(s, -1));
+        return;
+      }
+      if (state.menuVisible) {
+        setState(s => selectPrev(s));
+      } else {
+        setState(s => navigateHistoryUp(s));
+      }
+      return;
+    }
+
+    // Down arrow - context-dependent
+    if (keybindingManager.matchesAction('menuDown', input, key) || keybindingManager.matchesAction('historyDown', input, key)) {
+      if (state.consoleVisible) {
+        // Console selection mode
+        setState(s => selectConsoleLog(s, 1));
+        return;
+      }
+      if (state.menuVisible) {
+        setState(s => selectNext(s));
+      } else {
+        setState(s => navigateHistoryDown(s));
+      }
+      return;
+    }
+
+    // Left arrow - move cursor left (when not in menu/console mode)
+    if (key.leftArrow && !state.menuVisible && !state.consoleVisible) {
+      setState(s => moveCursorLeft(s));
+      return;
+    }
+
+    // Right arrow - move cursor right (when not in menu/console mode)
+    if (key.rightArrow && !state.menuVisible && !state.consoleVisible) {
+      setState(s => moveCursorRight(s));
+      return;
+    }
+
+    // Ctrl+A - move cursor to start
+    if (key.ctrl && input === 'a') {
+      setState(s => moveCursorToStart(s));
+      return;
+    }
+
+    // Ctrl+E - move cursor to end
+    if (key.ctrl && input === 'e') {
+      setState(s => moveCursorToEnd(s));
+      return;
+    }
+
+    // Delete word (Alt/Option + Backspace)
+    if (keybindingManager.matchesAction('deleteWord', input, key)) {
+      setState(s => {
+        const buffer = s.buffer;
+        if (!buffer) return s;
+        // Find the last word boundary (space, /, -, _, etc.)
+        const trimmed = buffer.trimEnd();
+        const match = trimmed.match(/^(.*?)[\s\/\-_\.]+[^\s\/\-_\.]*$/);
+        if (match) {
+          return setBufferWithSlashMenu(s, match[1], checkTriggers);
+        }
+        // No word boundary found, delete everything
+        return setBufferWithSlashMenu(s, '', checkTriggers);
+      });
+      return;
+    }
+
+    // Backspace - delete character at cursor position
+    if (key.backspace || key.delete) {
+      setState(s => {
+        const cursorPos = s.cursorPosition || 0;
+        if (cursorPos === 0) return s; // Nothing to delete
+        const before = s.buffer.slice(0, cursorPos - 1);
+        const after = s.buffer.slice(cursorPos);
+        const newBuffer = before + after;
+        const newState = setBufferWithSlashMenu(s, newBuffer, checkTriggers);
+        return { ...newState, cursorPosition: cursorPos - 1 };
+      });
+      return;
+    }
+
+    // View full output (when not typing)
+    if (keybindingManager.matchesAction('viewOutput', input, key) && !state.buffer) {
+      const lastOutput = state.outputs[state.outputs.length - 1];
+      if (lastOutput && lastOutput.output) {
+        // Check if this is a paginated file
+        let title = lastOutput.command;
+        if (state.paginatedFile) {
+          const { filePath, totalLines, loadedStartLine, loadedEndLine } = state.paginatedFile;
+          title = `${filePath} (${totalLines} lines, showing ${loadedStartLine}-${loadedEndLine})`;
+        }
+        setState(s => enterDetailView(s, title, lastOutput.output));
+      }
+      return;
+    }
+
+    // Copy last output (plain text, no borders)
+    if (keybindingManager.matchesAction('copyLastOutput', input, key) && !state.buffer) {
+      const lastOutput = state.outputs[state.outputs.length - 1];
+      if (lastOutput && lastOutput.output && !lastOutput.isWelcome) {
+        handleCopyLog(lastOutput.output);
+      }
+      return;
+    }
+
+    // Regular character - filter out only mouse events and control characters
+    // Allow printable characters including CJK (Chinese/Japanese/Korean)
+    if (input && !key.ctrl && !key.meta) {
+      // Skip mouse event sequences (handled by useMouse hook)
+      if (input.includes('\x1b[<') || input.includes('\x1b[M')) {
+        return;
+      }
+      // Skip SGR mouse events where ESC was stripped: [<button;x;yM or [<button;x;ym
+      // This can happen when mouse events leak through from useMouse hook
+      if (/^\[<\d+;\d+;\d+[Mm]/.test(input)) {
+        return;
+      }
+      // Filter out non-printable control characters (but allow CJK characters)
+      // Control characters: 0x00-0x1F (except tab 0x09), 0x7F-0x9F
+      // Keep: regular ASCII (0x20-0x7E), CJK and other Unicode characters
+      const filtered = Array.from(input).filter(char => {
+        const code = char.charCodeAt(0);
+        // Allow printable ASCII (space to ~)
+        if (code >= 0x20 && code <= 0x7E) return true;
+        // Allow Unicode characters (includes CJK)
+        if (code > 0x7F && code < 0x9F) return false; // Filter C1 control codes
+        if (code >= 0x9F) return true; // Allow all high Unicode including CJK
+        // Filter other control characters
+        return false;
+      }).join('');
+      
+      if (!filtered) return; // No printable characters, skip
+      
+      // Insert filtered characters at cursor position
+      setState(s => {
+        const cursorPos = s.cursorPosition || 0;
+        const before = s.buffer.slice(0, cursorPos);
+        const after = s.buffer.slice(cursorPos);
+        const newBuffer = before + filtered + after;
+        const newState = setBufferWithSlashMenu(s, newBuffer, checkTriggers);
+        return { ...newState, cursorPosition: cursorPos + filtered.length };
+      });
+    }
+  });
+
+  const { theme, themeName, setTheme, listThemes } = useTheme();
+
+  const hasUserOutput = state.outputs.some(item => !item.isWelcome);
+  const showBanner = !hasUserOutput && state.viewMode === 'repl';
+
+  // Scrollable content (outputs, banner, etc.)
+  const scrollableContent = h(React.Fragment, null,
+    showBanner ? h(WelcomeBanner, null) : null,
+    h(OutputArea, null,
+      ...visibleOutputs.map(item =>
+        h(OutputItem, {
+          key: item.id,
+          item: item,
+          prompt: item.prompt || state.shellPrompt,
+          maxLines: 20,
+        })
+      )
+    )
+    // ExecutionStatus moved to fixed bottom area to prevent overlap
+  );
+
+  // Fixed bottom UI (input, menu, console)
+  const fixedBottomUI = h(React.Fragment, null,
+    // Add empty line to separate output from ExecutionStatus
+    h(Text, null, ''),
+    h(Text, null, ''),
+    // Separator line
+    h(Box, { flexShrink: 0 },
+      h(Text, { dimColor: true }, '─'.repeat(Math.min(80, terminalWidth)))
+    ),
+    // ExecutionStatus moved here from scrollable area to prevent overlap
+    h(ExecutionStatus, {
+      isExecuting: state.isExecuting,
+      command: state.executingCommand,
+      lastDuration: state.lastExecutionDuration,
+      executionStartTime: state.executionStartTime,
+    }),
+    h(InputArea, {
+      prompt: state.shellPrompt,
+      buffer: state.buffer,
+      cursorPosition: state.cursorPosition,
+      showCursor: !state.isExecuting,
+      menuVisible: state.menuVisible,
+      menuType: state.menuType,
+    }),
+    state.menuVisible && !state.isExecuting
+      ? h(DropdownMenu, {
+          items: state.menuItems,
+          selectedIndex: state.selectedIndex,
+        })
+      : null,
+    h(Console, {
+      visible: state.consoleVisible,
+      logs: state.consoleLogs,
+      height: 8,
+      scrollOffset: state.consoleScrollOffset,
+      selectedIndex: state.consoleSelectedIndex,
+      selection: state.selection,
+    })
+  );
+
+  const replContent = h(React.Fragment, null,
+    // Scrollable area
+    h(Box, {
+      flexDirection: 'column',
+      flexGrow: 1,
+      minHeight: 4,
+    },
+      scrollableContent
+    ),
+    // Fixed bottom area
+    h(Box, { flexDirection: 'column', flexShrink: 0 },
+      fixedBottomUI
+    )
+  );
+
+  const body = state.viewMode === 'detail' && state.detailContent
+    ? h(DetailView, {
+        title: state.detailContent.title,
+        content: state.detailContent.content,
+        scrollOffset: state.detailContent.scrollOffset,
+        availableHeight: terminalHeight - 3,
+        selection: state.selection?.source === 'detail' ? state.selection : null,
+        paginatedFile: state.paginatedFile,
+      })
+    : replContent;
+
+  return h(ShellLayout, null,
+    body,
+    h(StatusBar, {
+      sandboxId,
+      hostIp,
+      resources: state.resources,
+      mode: state.viewMode,
+      menuVisible: state.menuVisible,
+      isExecuting: state.isExecuting,
+      consoleVisible: state.consoleVisible,
+      exitPending: state.exitPending,
+      hasSelection: !!state.selection,
+      mouseCaptureEnabled: state.mouseCaptureEnabled !== false,
+    })
+  );
+}