centaurus-cli 3.0.1 → 3.1.0

package/dist/ui/components/InteractiveShell.js

@@ -1,361 +1,243 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Box, Text, useInput } from 'ink';
-import Spinner from 'ink-spinner';
-import stripAnsi from 'strip-ansi';
-import { encodeKeyToAnsi } from '../../utils/ansi-encoder.js';
-import { processTerminalOutput } from '../../utils/terminal-output.js';
-import { TERMINAL_HEIGHT_CONSTANTS } from '../../hooks/useTerminalDimensions.js';
-import { sanitizeUnicode } from '../../utils/unicode-sanitizer.js';
-/**
- * Format CWD with remote context prefix for SSH/Docker/WSL environments.
- */
+import React, { useEffect, useState, useRef } from "react";
+import { Box, Text, useInput } from "ink";
+import Spinner from "ink-spinner";
+import stripAnsi from "strip-ansi";
+import { encodeKeyToAnsi } from "../../utils/ansi-encoder.js";
+import { processTerminalOutput } from "../../utils/terminal-output.js";
+import { TERMINAL_HEIGHT_CONSTANTS } from "../../hooks/useTerminalDimensions.js";
+import { sanitizeUnicode } from "../../utils/unicode-sanitizer.js";
 function formatCwdWithContext(cwd, remoteContext) {
-    if (remoteContext && cwd) {
-        return `${remoteContext}:${cwd.replace(/\\/g, '/')}`;
-    }
-    return cwd;
+  if (remoteContext && cwd) {
+    return `${remoteContext}:${cwd.replace(/\\/g, "/")}`;
+  }
+  return cwd;
 }
-/**
- * Truncate long commands for display to prevent rendering issues
- * @param command - The command string to truncate
- * @param maxLength - Maximum length before truncation (default: 80)
- * @returns Truncated command with ellipsis if needed
- */
 function truncateCommand(command, maxLength = 80) {
-    if (!command || command.length <= maxLength)
-        return command;
-    return command.substring(0, maxLength) + '...';
+  if (!command || command.length <= maxLength) return command;
+  return command.substring(0, maxLength) + "...";
 }
-export const InteractiveShell = React.memo(({ command, cwd, isRunning, output, exitCode, error, onInput, isFocused, onFocusChange, onSignal, onResize, remoteContext, shellId, isAgentControlled = false, showCursor = true, onToggleAgentControl, onWarpifySession }) => {
-    const isMac = process.platform === 'darwin';
-    // Scroll offset for viewing previous output (0 = at bottom/following latest)
-    const [scrollOffset, setScrollOffset] = useState(0);
-    // Track if user has manually scrolled (to disable auto-follow)
-    const isAutoFollowRef = useRef(true);
-    // Track total lines for scroll calculations
-    const totalLinesRef = useRef(0);
-    // Blinking cursor state
-    const [cursorVisible, setCursorVisible] = useState(true);
-    // Handle cursor blinking
-    useEffect(() => {
-        if (!isFocused || !showCursor)
-            return;
-        const interval = setInterval(() => {
-            setCursorVisible(v => !v);
-        }, 530); // 530ms is a standard blink rate
-        return () => clearInterval(interval);
-    }, [isFocused, showCursor]);
-    // Calculate visible lines based on focus mode and terminal height
-    // Uses centralized terminal dimensions for consistency
-    const terminalRows = process.stdout.rows || 24;
-    const { INPUT_BOX_RESERVED_HEIGHT, SAFETY_BUFFER, MIN_STREAMING_LINES } = TERMINAL_HEIGHT_CONSTANTS;
-    // Shell-specific chrome: header (2), borders (2), focus indicator (1)
-    const shellChrome = 5;
-    // In focus mode, InputBox is hidden so we don't reserve space for it
-    // Reserve enough to target ~23 visible lines in a typical terminal
-    const totalReservedFocused = 12; // Header, footer, focus indicator, and safety buffer
-    const totalReservedUnfocused = INPUT_BOX_RESERVED_HEIGHT + shellChrome + SAFETY_BUFFER;
-    // Calculate max visible lines based on focus state
-    // Calculate max visible lines based on focus state
-    // User Requirement: Max 75% of screen height
-    const maxAllowedHeight = Math.floor(terminalRows * 0.75);
-    const availableForShellFocused = Math.max(MIN_STREAMING_LINES, Math.min(terminalRows - totalReservedFocused, maxAllowedHeight));
-    const availableForShellUnfocused = Math.max(MIN_STREAMING_LINES, terminalRows - totalReservedUnfocused);
-    // When agent controlled, use only half the available height to make room for AI panel
-    // SAFEGUARD: Ensure we don't calculate a negative or zero height, and maintain a minimum usable area
-    const rawAgentHeight = Math.floor(availableForShellFocused / 2);
-    const agentControlledHeight = Math.max(MIN_STREAMING_LINES, rawAgentHeight);
-    // If even the minimum agent height would push us beyond available space (very small terminal),
-    // we might need to compromise. But for now, ensuring it's at least MIN_STREAMING_LINES (3) is key.
-    const maxVisibleLines = isFocused
-        ? (isAgentControlled
-            ? agentControlledHeight // Already clamped above
-            : Math.max(MIN_STREAMING_LINES, availableForShellFocused)) // Focus mode: use most of terminal
-        : Math.max(1, Math.min(5, availableForShellUnfocused)); // Unfocused: show at most 5 lines, at least 1
-    // Handle terminal resize events
-    useEffect(() => {
-        if (!onResize || !isRunning)
-            return;
-        const handleResize = () => {
-            const cols = process.stdout.columns || 80;
-            const rows = process.stdout.rows || 24;
-            onResize(cols, rows);
-        };
-        handleResize();
-        process.stdout.on('resize', handleResize);
-        return () => {
-            process.stdout.off('resize', handleResize);
-        };
-    }, [onResize, isRunning]);
-    // Get processed output and calculate total lines
-    // Memoize this to prevent expensive re-processing on every render/blink
-    // Only re-process if output changes or cursor state changes
-    const { lines, total } = React.useMemo(() => {
-        if (!output)
-            return { lines: [], total: 0 };
-        const highlightCursor = isFocused && showCursor && cursorVisible;
-        const processedOutput = processTerminalOutput(output, { highlightCursor });
-        const splitLines = processedOutput.split('\n');
-        return { lines: splitLines, total: splitLines.length };
-    }, [output, isFocused, showCursor, cursorVisible]);
-    // Helper to access lines (replacing getProcessedOutput call)
-    // const getProcessedOutput = () => ... REMOVED
-    // Get visible lines based on scroll offset
-    const getVisibleOutput = () => {
-        // const { lines, total } = getProcessedOutput(); // Replaced by useMemo above
-        totalLinesRef.current = total;
-        if (total === 0)
-            return '';
-        // SAFETY: Use current terminal width for wrapping calculations
-        const cols = process.stdout.columns || 80;
-        // STRICT HEIGHT CALCULATION
-        // We must count *visual* lines (how many rows a line takes up when wrapped)
-        // otherwise a single long line could blow out our height budget
-        let visualLineCount = 0;
-        const visualLinesMap = new Array(lines.length).fill(1);
-        // 1. Calculate visual height of all lines
-        // precise calculation is expensive, so we estimate: length / columns
-        for (let i = 0; i < lines.length; i++) {
-            const line = lines[i];
-            const stripped = stripAnsi(line || '');
-            // Minimum 1 row, ceil(length/cols) for wrapping
-            // We add a small buffer for safety margin in calculation logic
-            const rows = Math.max(1, Math.ceil(stripped.length / cols));
-            visualLinesMap[i] = rows;
-        }
-        // 2. Determine which lines to show based on scrollOffset
-        // We work backwards from the bottom (latest output)
-        const visibleLinesToRender = [];
-        let currentHeight = 0;
-        // Apply scroll offset - skip N visual lines from bottom
-        // This is a simplified approach: we skip logical lines until we pass the visual offset
-        // Ideally we would skip pixel-perfect but logical-line skipping is safer for now
-        let linesToSkip = scrollOffset;
-        let startIndex = lines.length - 1;
-        // Adjust start index based on scroll
-        while (linesToSkip > 0 && startIndex >= 0) {
-            // We treat scrollOffset as "logical lines" for consistency with existing UX controls
-            // or we could treat it as visual lines? 
-            // Existing behavior: scrollOffset is logical lines. Let's keep that for predictable scrolling.
-            linesToSkip--;
-            startIndex--;
-        }
-        // 3. Collect lines that fit in maxVisibleLines
-        for (let i = startIndex; i >= 0; i--) {
-            const lineRows = visualLinesMap[i];
-            // If adding this line exceeds max height, we stop
-            // Exception: Always show at least one line if it's the only one
-            if (currentHeight + lineRows > maxVisibleLines && visibleLinesToRender.length > 0) {
-                break;
-            }
-            visibleLinesToRender.unshift(lines[i]);
-            currentHeight += lineRows;
-        }
-        return visibleLinesToRender.join('\n');
-    };
-    // Reset scroll offset when exiting focus mode
-    useEffect(() => {
-        if (!isFocused) {
-            setScrollOffset(0);
-            isAutoFollowRef.current = true;
-        }
-    }, [isFocused]);
-    // Track previous total lines to adjust scroll offset when new output arrives
-    const prevTotalLinesRef = useRef(0);
-    // When new output comes in and user is scrolled up, adjust offset to maintain position
-    useEffect(() => {
-        // const { total } = getProcessedOutput(); // Replaced by useMemo
-        const prevTotal = prevTotalLinesRef.current;
-        if (prevTotal > 0 && total > prevTotal && !isAutoFollowRef.current && scrollOffset > 0) {
-            // New lines were added while user is scrolled up
-            // Increase scroll offset by the number of new lines to stay at the same position
-            const newLines = total - prevTotal;
-            const maxOffset = Math.max(0, total - maxVisibleLines);
-            setScrollOffset(prev => Math.min(prev + newLines, maxOffset));
-        }
-        prevTotalLinesRef.current = total;
-    }, [output, maxVisibleLines, total]);
-    // Handle input - PTY mode sends everything immediately
-    useInput((input, key) => {
-        if (!isFocused)
-            return;
-        // Alt+E: Warpify session - detect and attach to remote session
-        // Mac: Cmd+E (key.meta) OR Ctrl+E (fallback if Cmd intercepted)
-        // Win: Alt+E (key.meta)
-        // Note: Ctrl+E might come in as input='\u0005' (ASCII 5) rather than key.ctrl+e
-        const isCtrlE = (key.ctrl && input.toLowerCase() === 'e') || input === '\u0005';
-        if ((key.meta && input.toLowerCase() === 'e') || isCtrlE) {
-            if (onWarpifySession) {
-                onWarpifySession();
-            }
-            return;
-        }
-        // Alt+I: Toggle agent control mode
-        // Mac: Cmd+I (key.meta)
-        if (key.meta && input.toLowerCase() === 'i') {
-            if (onToggleAgentControl) {
-                onToggleAgentControl();
-            }
-            return;
-        }
-        // Global: Ctrl+F to exit focus mode
-        // BUT: Block if agent controlled AND still running
-        if (key.ctrl && input === 'f') {
-            if (isAgentControlled && isRunning) {
-                // Blocked - can't exit focus while agent controlled and running
-                // User must first disable agent control with Alt+I or wait for completion
-                return;
-            }
-            onFocusChange(false);
-            return;
-        }
-        // Scroll controls (only in focus mode, don't send to PTY)
-        // Shift+Up: Scroll up one line
-        if (key.shift && key.upArrow) {
-            const maxOffset = Math.max(0, totalLinesRef.current - maxVisibleLines);
-            if (scrollOffset < maxOffset) {
-                isAutoFollowRef.current = false;
-                setScrollOffset(prev => Math.min(prev + 1, maxOffset));
-            }
-            return;
-        }
-        // Shift+Down: Scroll down one line
-        if (key.shift && key.downArrow) {
-            if (scrollOffset > 0) {
-                setScrollOffset(prev => {
-                    const newOffset = Math.max(prev - 1, 0);
-                    if (newOffset === 0) {
-                        isAutoFollowRef.current = true;
-                    }
-                    return newOffset;
-                });
-            }
-            return;
-        }
-        // Page Up: Scroll up one page
-        if (key.pageUp) {
-            const maxOffset = Math.max(0, totalLinesRef.current - maxVisibleLines);
-            if (scrollOffset < maxOffset) {
-                isAutoFollowRef.current = false;
-                setScrollOffset(prev => Math.min(prev + maxVisibleLines, maxOffset));
-            }
-            return;
-        }
-        // Page Down: Scroll down one page
-        if (key.pageDown) {
-            if (scrollOffset > 0) {
-                setScrollOffset(prev => {
-                    const newOffset = Math.max(prev - maxVisibleLines, 0);
-                    if (newOffset === 0) {
-                        isAutoFollowRef.current = true;
-                    }
-                    return newOffset;
-                });
-            }
-            return;
-        }
-        // Below this point, we need onInput to send to PTY
-        if (!onInput)
-            return;
-        // Ctrl+C - send to PTY AND signal backend for forceful termination
-        if (key.ctrl && input === 'c') {
-            onInput('\x03');
-            if (onSignal) {
-                onSignal('SIGINT');
-            }
-            return;
-        }
-        // Ctrl+D - EOF
-        if (key.ctrl && input === 'd') {
-            onInput('\x04');
-            return;
-        }
-        // Ctrl+Z - Suspend
-        if (key.ctrl && input === 'z') {
-            onInput('\x1A');
-            return;
-        }
-        // Encode and send all keys immediately
-        const encoded = encodeKeyToAnsi(input, key);
-        if (encoded) {
-            onInput(encoded);
-        }
-    }, { isActive: isFocused });
-    // Determine border color and icon based on status
-    const getBorderColor = () => {
-        if (isRunning)
-            return '#00ccff';
-        if (error || (exitCode !== undefined && exitCode !== 0))
-            return '#ff3366';
-        return '#00cc66';
+const InteractiveShell = React.memo(({
+  command,
+  cwd,
+  isRunning,
+  output,
+  exitCode,
+  error,
+  onInput,
+  isFocused,
+  onFocusChange,
+  onSignal,
+  onResize,
+  remoteContext,
+  shellId,
+  isAgentControlled = false,
+  showCursor = true,
+  onToggleAgentControl,
+  onWarpifySession
+}) => {
+  const isMac = process.platform === "darwin";
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const isAutoFollowRef = useRef(true);
+  const totalLinesRef = useRef(0);
+  const [cursorVisible, setCursorVisible] = useState(true);
+  useEffect(() => {
+    if (!isFocused || !showCursor) return;
+    const interval = setInterval(() => {
+      setCursorVisible((v) => !v);
+    }, 530);
+    return () => clearInterval(interval);
+  }, [isFocused, showCursor]);
+  const terminalRows = process.stdout.rows || 24;
+  const {
+    INPUT_BOX_RESERVED_HEIGHT,
+    SAFETY_BUFFER,
+    MIN_STREAMING_LINES
+  } = TERMINAL_HEIGHT_CONSTANTS;
+  const shellChrome = 5;
+  const totalReservedFocused = 12;
+  const totalReservedUnfocused = INPUT_BOX_RESERVED_HEIGHT + shellChrome + SAFETY_BUFFER;
+  const maxAllowedHeight = Math.floor(terminalRows * 0.75);
+  const availableForShellFocused = Math.max(
+    MIN_STREAMING_LINES,
+    Math.min(terminalRows - totalReservedFocused, maxAllowedHeight)
+  );
+  const availableForShellUnfocused = Math.max(MIN_STREAMING_LINES, terminalRows - totalReservedUnfocused);
+  const rawAgentHeight = Math.floor(availableForShellFocused / 2);
+  const agentControlledHeight = Math.max(MIN_STREAMING_LINES, rawAgentHeight);
+  const maxVisibleLines = isFocused ? isAgentControlled ? agentControlledHeight : Math.max(MIN_STREAMING_LINES, availableForShellFocused) : Math.max(1, Math.min(5, availableForShellUnfocused));
+  useEffect(() => {
+    if (!onResize || !isRunning) return;
+    const handleResize = () => {
+      const cols = process.stdout.columns || 80;
+      const rows = process.stdout.rows || 24;
+      onResize(cols, rows);
     };
-    const getStatusIcon = () => {
-        if (isRunning)
-            return React.createElement(Spinner, { type: "dots" });
-        if (error || (exitCode !== undefined && exitCode !== 0))
-            return '✗';
-        return '✓';
+    handleResize();
+    process.stdout.on("resize", handleResize);
+    return () => {
+      process.stdout.off("resize", handleResize);
     };
-    const color = getBorderColor();
-    const visibleOutput = getVisibleOutput();
-    // Strip ANSI codes then sanitize problematic Unicode (emojis, wide chars)
-    // to prevent layout issues caused by character width mismatches
-    const cleanOutput = sanitizeUnicode(visibleOutput);
-    const truncatedCommand = truncateCommand(command, 80);
-    // SAFEGUARD: Check for critically small dimensions that crash Yoga WASM
-    // Yoga can crash with "memory access out of bounds" if containers have negative computed size
-    // affecting Ink's Box rendering.
-    const currentCols = process.stdout.columns || 80;
-    const currentRows = process.stdout.rows || 24;
-    const SAFE_MIN_WIDTH = 15;
-    const SAFE_MIN_HEIGHT = 5;
-    if (currentCols < SAFE_MIN_WIDTH || currentRows < SAFE_MIN_HEIGHT) {
-        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            React.createElement(Text, { color: "yellow" }, "Terminal too small"),
-            React.createElement(Text, { dimColor: true },
-                currentCols,
-                "x",
-                currentRows)));
+  }, [onResize, isRunning]);
+  const { lines, total } = React.useMemo(() => {
+    if (!output) return { lines: [], total: 0 };
+    const highlightCursor = isFocused && showCursor && cursorVisible;
+    const processedOutput = processTerminalOutput(output, { highlightCursor });
+    const splitLines = processedOutput.split("\n");
+    return { lines: splitLines, total: splitLines.length };
+  }, [output, isFocused, showCursor, cursorVisible]);
+  const getVisibleOutput = () => {
+    totalLinesRef.current = total;
+    if (total === 0) return "";
+    const cols = process.stdout.columns || 80;
+    let visualLineCount = 0;
+    const visualLinesMap = new Array(lines.length).fill(1);
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const stripped = stripAnsi(line || "");
+      const rows = Math.max(1, Math.ceil(stripped.length / cols));
+      visualLinesMap[i] = rows;
+    }
+    const visibleLinesToRender = [];
+    let currentHeight = 0;
+    let linesToSkip = scrollOffset;
+    let startIndex = lines.length - 1;
+    while (linesToSkip > 0 && startIndex >= 0) {
+      linesToSkip--;
+      startIndex--;
+    }
+    for (let i = startIndex; i >= 0; i--) {
+      const lineRows = visualLinesMap[i];
+      if (currentHeight + lineRows > maxVisibleLines && visibleLinesToRender.length > 0) {
+        break;
+      }
+      visibleLinesToRender.unshift(lines[i]);
+      currentHeight += lineRows;
+    }
+    return visibleLinesToRender.join("\n");
+  };
+  useEffect(() => {
+    if (!isFocused) {
+      setScrollOffset(0);
+      isAutoFollowRef.current = true;
+    }
+  }, [isFocused]);
+  const prevTotalLinesRef = useRef(0);
+  useEffect(() => {
+    const prevTotal = prevTotalLinesRef.current;
+    if (prevTotal > 0 && total > prevTotal && !isAutoFollowRef.current && scrollOffset > 0) {
+      const newLines = total - prevTotal;
+      const maxOffset = Math.max(0, total - maxVisibleLines);
+      setScrollOffset((prev) => Math.min(prev + newLines, maxOffset));
+    }
+    prevTotalLinesRef.current = total;
+  }, [output, maxVisibleLines, total]);
+  useInput((input, key) => {
+    if (!isFocused) return;
+    const isCtrlE = key.ctrl && input.toLowerCase() === "e" || input === "";
+    if (key.meta && input.toLowerCase() === "e" || isCtrlE) {
+      if (onWarpifySession) {
+        onWarpifySession();
+      }
+      return;
+    }
+    if (key.meta && input.toLowerCase() === "i") {
+      if (onToggleAgentControl) {
+        onToggleAgentControl();
+      }
+      return;
+    }
+    if (key.ctrl && input === "f") {
+      if (isAgentControlled && isRunning) {
+        return;
+      }
+      onFocusChange(false);
+      return;
+    }
+    if (key.shift && key.upArrow) {
+      const maxOffset = Math.max(0, totalLinesRef.current - maxVisibleLines);
+      if (scrollOffset < maxOffset) {
+        isAutoFollowRef.current = false;
+        setScrollOffset((prev) => Math.min(prev + 1, maxOffset));
+      }
+      return;
+    }
+    if (key.shift && key.downArrow) {
+      if (scrollOffset > 0) {
+        setScrollOffset((prev) => {
+          const newOffset = Math.max(prev - 1, 0);
+          if (newOffset === 0) {
+            isAutoFollowRef.current = true;
+          }
+          return newOffset;
+        });
+      }
+      return;
+    }
+    if (key.pageUp) {
+      const maxOffset = Math.max(0, totalLinesRef.current - maxVisibleLines);
+      if (scrollOffset < maxOffset) {
+        isAutoFollowRef.current = false;
+        setScrollOffset((prev) => Math.min(prev + maxVisibleLines, maxOffset));
+      }
+      return;
+    }
+    if (key.pageDown) {
+      if (scrollOffset > 0) {
+        setScrollOffset((prev) => {
+          const newOffset = Math.max(prev - maxVisibleLines, 0);
+          if (newOffset === 0) {
+            isAutoFollowRef.current = true;
+          }
+          return newOffset;
+        });
+      }
+      return;
+    }
+    if (!onInput) return;
+    if (key.ctrl && input === "c") {
+      onInput("");
+      if (onSignal) {
+        onSignal("SIGINT");
+      }
+      return;
+    }
+    if (key.ctrl && input === "d") {
+      onInput("");
+      return;
+    }
+    if (key.ctrl && input === "z") {
+      onInput("");
+      return;
+    }
+    const encoded = encodeKeyToAnsi(input, key);
+    if (encoded) {
+      onInput(encoded);
     }
-    return (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
-        React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: color, paddingX: 1 },
-            React.createElement(Box, { marginBottom: 1 },
-                React.createElement(Text, { color: color, bold: true },
-                    getStatusIcon(),
-                    "  Shell"),
-                React.createElement(Text, { color: "#666666" },
-                    " ",
-                    truncatedCommand,
-                    " "),
-                React.createElement(Text, { color: "#666666", dimColor: true },
-                    "[current working directory ",
-                    formatCwdWithContext(cwd, remoteContext),
-                    "]")),
-            cleanOutput && (React.createElement(Box, { height: maxVisibleLines, overflow: "hidden" },
-                React.createElement(Text, { wrap: "wrap" }, cleanOutput))),
-            isFocused && isRunning && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
-                React.createElement(Box, null, isAgentControlled ? (React.createElement(React.Fragment, null,
-                    React.createElement(Text, { color: "#9945FF", bold: true }, "[ AGENT CONTROL ] "),
-                    React.createElement(Text, { color: "#666666" },
-                        isMac ? 'Cmd+I' : 'Alt+I',
-                        " to disable | Shift+\u2191\u2193 scroll | PgUp/PgDn page"))) : (React.createElement(React.Fragment, null,
-                    React.createElement(Text, { color: "#ffaa00", bold: true }, "[ FOCUS MODE ] "),
-                    React.createElement(Text, { color: "#666666" },
-                        "Ctrl+F exit ",
-                        onWarpifySession ? `| ${isMac ? 'Cmd+E / Ctrl+E' : 'Alt+E'} warpify ` : '',
-                        "| ",
-                        isMac ? 'Cmd+I' : 'Alt+I',
-                        " agent | Shift+\u2191\u2193 scroll")))),
-                scrollOffset > 0 && (React.createElement(Box, null,
-                    React.createElement(Text, { color: "#666666", dimColor: true },
-                        "\u2191 Scrolled ",
-                        scrollOffset,
-                        " line",
-                        scrollOffset > 1 ? 's' : '',
-                        " from bottom (viewing history)"))))),
-            error && !isRunning && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "#ff3366", wrap: "wrap" }, error.replace(/\r/g, ''))))),
-        isRunning && !isFocused && (React.createElement(Box, { marginLeft: 1 },
-            React.createElement(Text, { color: "#666666", dimColor: true }, "ctrl + f to focus")))));
+  }, { isActive: isFocused });
+  const getBorderColor = () => {
+    if (isRunning) return "#00ccff";
+    if (error || exitCode !== void 0 && exitCode !== 0) return "#ff3366";
+    return "#00cc66";
+  };
+  const getStatusIcon = () => {
+    if (isRunning) return /* @__PURE__ */ React.createElement(Spinner, { type: "dots" });
+    if (error || exitCode !== void 0 && exitCode !== 0) return "\u2717";
+    return "\u2713";
+  };
+  const color = getBorderColor();
+  const visibleOutput = getVisibleOutput();
+  const cleanOutput = sanitizeUnicode(visibleOutput);
+  const truncatedCommand = truncateCommand(command, 80);
+  const currentCols = process.stdout.columns || 80;
+  const currentRows = process.stdout.rows || 24;
+  const SAFE_MIN_WIDTH = 15;
+  const SAFE_MIN_HEIGHT = 5;
+  if (currentCols < SAFE_MIN_WIDTH || currentRows < SAFE_MIN_HEIGHT) {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "yellow" }, "Terminal too small"), /* @__PURE__ */ React.createElement(Text, { dimColor: true }, currentCols, "x", currentRows));
+  }
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginBottom: 1 }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: color, paddingX: 1 }, /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { color, bold: true }, getStatusIcon(), "  Shell"), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " ", truncatedCommand, " "), /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "[current working directory ", formatCwdWithContext(cwd, remoteContext), "]")), cleanOutput && /* @__PURE__ */ React.createElement(Box, { height: maxVisibleLines, overflow: "hidden" }, /* @__PURE__ */ React.createElement(Text, { wrap: "wrap" }, cleanOutput)), isFocused && isRunning && /* @__PURE__ */ React.createElement(Box, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, null, isAgentControlled ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, "[ AGENT CONTROL ] "), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, isMac ? "Cmd+I" : "Alt+I", " to disable | Shift+\u2191\u2193 scroll | PgUp/PgDn page")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#ffaa00", bold: true }, "[ FOCUS MODE ] "), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "Ctrl+F exit ", onWarpifySession ? `| ${isMac ? "Cmd+E / Ctrl+E" : "Alt+E"} warpify ` : "", "| ", isMac ? "Cmd+I" : "Alt+I", " agent | Shift+\u2191\u2193 scroll"))), scrollOffset > 0 && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "\u2191 Scrolled ", scrollOffset, " line", scrollOffset > 1 ? "s" : "", " from bottom (viewing history)"))), error && !isRunning && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#ff3366", wrap: "wrap" }, error.replace(/\r/g, "")))), isRunning && !isFocused && /* @__PURE__ */ React.createElement(Box, { marginLeft: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "ctrl + f to focus")));
 });
+export {
+  InteractiveShell
+};
 //# sourceMappingURL=InteractiveShell.js.map