snow-ai 0.2.14 → 0.2.16

package/dist/ui/pages/ChatScreen.js

@@ -13,14 +13,20 @@ import DiffViewer from '../components/DiffViewer.js';
 import ToolResultPreview from '../components/ToolResultPreview.js';
 import TodoTree from '../components/TodoTree.js';
 import FileRollbackConfirmation from '../components/FileRollbackConfirmation.js';
+import ShimmerText from '../components/ShimmerText.js';
 import { getOpenAiConfig } from '../../utils/apiConfig.js';
 import { sessionManager } from '../../utils/sessionManager.js';
 import { useSessionSave } from '../../hooks/useSessionSave.js';
 import { useToolConfirmation } from '../../hooks/useToolConfirmation.js';
 import { handleConversationWithTools } from '../../hooks/useConversation.js';
+import { useVSCodeState } from '../../hooks/useVSCodeState.js';
+import { useSnapshotState } from '../../hooks/useSnapshotState.js';
+import { useStreamingState } from '../../hooks/useStreamingState.js';
+import { useCommandHandler } from '../../hooks/useCommandHandler.js';
 import { parseAndValidateFileReferences, createMessageWithFileInstructions, getSystemInfo, } from '../../utils/fileUtils.js';
-import { compressContext } from '../../utils/contextCompressor.js';
+import { convertSessionMessagesToUI } from '../../utils/sessionConverter.js';
 import { incrementalSnapshotManager } from '../../utils/incrementalSnapshot.js';
+import { formatElapsedTime } from '../../utils/textUtils.js';
 // Import commands to register them
 import '../../utils/commands/clear.js';
 import '../../utils/commands/resume.js';
@@ -29,38 +35,15 @@ import '../../utils/commands/yolo.js';
 import '../../utils/commands/init.js';
 import '../../utils/commands/ide.js';
 import '../../utils/commands/compact.js';
-import { navigateTo } from '../../hooks/useGlobalNavigation.js';
-import { vscodeConnection, } from '../../utils/vscodeConnection.js';
-// Format elapsed time to human readable format
-function formatElapsedTime(seconds) {
-    if (seconds < 60) {
-        return `${seconds}s`;
-    }
-    else if (seconds < 3600) {
-        const minutes = Math.floor(seconds / 60);
-        const remainingSeconds = seconds % 60;
-        return `${minutes}m ${remainingSeconds}s`;
-    }
-    else {
-        const hours = Math.floor(seconds / 3600);
-        const remainingMinutes = Math.floor((seconds % 3600) / 60);
-        const remainingSeconds = seconds % 60;
-        return `${hours}h ${remainingMinutes}m ${remainingSeconds}s`;
-    }
-}
 export default function ChatScreen({}) {
     const [messages, setMessages] = useState([]);
-    const [isStreaming, setIsStreaming] = useState(false);
     const [isSaving] = useState(false);
     const [currentTodos, setCurrentTodos] = useState([]);
-    const [animationFrame, setAnimationFrame] = useState(0);
-    const [abortController, setAbortController] = useState(null);
     const [pendingMessages, setPendingMessages] = useState([]);
     const pendingMessagesRef = useRef([]);
     const [remountKey, setRemountKey] = useState(0);
     const [showMcpInfo, setShowMcpInfo] = useState(false);
     const [mcpPanelKey, setMcpPanelKey] = useState(0);
-    const [streamTokenCount, setStreamTokenCount] = useState(0);
     const [yoloMode, setYoloMode] = useState(() => {
         // Load yolo mode from localStorage on initialization
         try {
@@ -71,23 +54,18 @@ export default function ChatScreen({}) {
             return false;
         }
     });
-    const [contextUsage, setContextUsage] = useState(null);
-    const [elapsedSeconds, setElapsedSeconds] = useState(0);
-    const [timerStartTime, setTimerStartTime] = useState(null);
-    const [vscodeConnected, setVscodeConnected] = useState(false);
-    const [vscodeConnectionStatus, setVscodeConnectionStatus] = useState('disconnected');
-    const [editorContext, setEditorContext] = useState({});
     const [isCompressing, setIsCompressing] = useState(false);
     const [compressionError, setCompressionError] = useState(null);
     const [showSessionPanel, setShowSessionPanel] = useState(false);
     const [showMcpPanel, setShowMcpPanel] = useState(false);
-    const [snapshotFileCount, setSnapshotFileCount] = useState(new Map());
-    const [pendingRollback, setPendingRollback] = useState(null);
+    const [shouldIncludeSystemInfo, setShouldIncludeSystemInfo] = useState(true); // Include on first message
     const { stdout } = useStdout();
     const terminalHeight = stdout?.rows || 24;
     const workingDirectory = process.cwd();
-    // Minimum terminal height required for proper rendering
-    const MIN_TERMINAL_HEIGHT = 10;
+    // Use custom hooks
+    const streamingState = useStreamingState();
+    const vscodeState = useVSCodeState();
+    const snapshotState = useSnapshotState(messages.length);
     // Use session save hook
     const { saveMessage, clearSavedMessages, initializeFromSession } = useSessionSave();
     // Sync pendingMessages to ref for real-time access in callbacks
@@ -105,121 +83,44 @@ export default function ChatScreen({}) {
     }, [yoloMode]);
     // Use tool confirmation hook
     const { pendingToolConfirmation, requestToolConfirmation, isToolAutoApproved, addMultipleToAlwaysApproved, } = useToolConfirmation();
-    // Animation for streaming/saving indicator
-    useEffect(() => {
-        if (!isStreaming && !isSaving)
-            return;
-        const interval = setInterval(() => {
-            setAnimationFrame(prev => (prev + 1) % 5);
-        }, 300);
-        return () => {
-            clearInterval(interval);
-            setAnimationFrame(0);
-        };
-    }, [isStreaming, isSaving]);
-    // Timer for tracking request duration
-    useEffect(() => {
-        if (isStreaming && timerStartTime === null) {
-            // Start timer when streaming begins
-            setTimerStartTime(Date.now());
-            setElapsedSeconds(0);
-        }
-        else if (!isStreaming && timerStartTime !== null) {
-            // Stop timer when streaming ends
-            setTimerStartTime(null);
-        }
-    }, [isStreaming, timerStartTime]);
-    // Update elapsed time every second
-    useEffect(() => {
-        if (timerStartTime === null)
-            return;
-        const interval = setInterval(() => {
-            const elapsed = Math.floor((Date.now() - timerStartTime) / 1000);
-            setElapsedSeconds(elapsed);
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [timerStartTime]);
-    // Monitor VSCode connection status and editor context
-    useEffect(() => {
-        const checkConnectionInterval = setInterval(() => {
-            const isConnected = vscodeConnection.isConnected();
-            setVscodeConnected(isConnected);
-            // Update connection status based on actual connection state
-            if (isConnected && vscodeConnectionStatus !== 'connected') {
-                setVscodeConnectionStatus('connected');
-            }
-            else if (!isConnected && vscodeConnectionStatus === 'connected') {
-                setVscodeConnectionStatus('disconnected');
-            }
-        }, 1000);
-        const unsubscribe = vscodeConnection.onContextUpdate(context => {
-            setEditorContext(context);
-            // When we receive context, it means connection is successful
-            if (vscodeConnectionStatus !== 'connected') {
-                setVscodeConnectionStatus('connected');
-            }
-        });
-        return () => {
-            clearInterval(checkConnectionInterval);
-            unsubscribe();
-        };
-    }, [vscodeConnectionStatus]);
-    // Separate effect for handling connecting timeout
-    useEffect(() => {
-        if (vscodeConnectionStatus !== 'connecting') {
-            return;
-        }
-        // Set timeout for connecting state (30 seconds to allow for VSCode extension reconnection)
-        const connectingTimeout = setTimeout(() => {
-            const isConnected = vscodeConnection.isConnected();
-            const isServerRunning = vscodeConnection.isServerRunning();
-            // Only set error if still not connected after timeout
-            if (!isConnected) {
-                if (isServerRunning) {
-                    // Server is running but no connection - show error with helpful message
-                    setVscodeConnectionStatus('error');
-                }
-                else {
-                    // Server not running - go back to disconnected
-                    setVscodeConnectionStatus('disconnected');
-                }
-            }
-        }, 30000); // Increased to 30 seconds
-        return () => {
-            clearTimeout(connectingTimeout);
-        };
-    }, [vscodeConnectionStatus]);
-    // Load snapshot file counts when session changes
-    useEffect(() => {
-        const loadSnapshotFileCounts = async () => {
-            const currentSession = sessionManager.getCurrentSession();
-            if (!currentSession)
-                return;
-            const snapshots = await incrementalSnapshotManager.listSnapshots(currentSession.id);
-            const counts = new Map();
-            for (const snapshot of snapshots) {
-                counts.set(snapshot.messageIndex, snapshot.fileCount);
-            }
-            setSnapshotFileCount(counts);
-        };
-        loadSnapshotFileCounts();
-    }, [messages.length]); // Reload when messages change
+    // Minimum terminal height required for proper rendering
+    const MIN_TERMINAL_HEIGHT = 10;
+    // Forward reference for processMessage (defined below)
+    const processMessageRef = useRef();
+    // Use command handler hook
+    const { handleCommandExecution } = useCommandHandler({
+        messages,
+        setMessages,
+        setRemountKey,
+        clearSavedMessages,
+        setIsCompressing,
+        setCompressionError,
+        setShowSessionPanel,
+        setShowMcpInfo,
+        setShowMcpPanel,
+        setMcpPanelKey,
+        setYoloMode,
+        setContextUsage: streamingState.setContextUsage,
+        setShouldIncludeSystemInfo,
+        setVscodeConnectionStatus: vscodeState.setVscodeConnectionStatus,
+        processMessage: (message, images, useBasicModel, hideUserMessage) => processMessageRef.current?.(message, images, useBasicModel, hideUserMessage) || Promise.resolve(),
+    });
     // Pending messages are now handled inline during tool execution in useConversation
     // Auto-send pending messages when streaming completely stops (as fallback)
     useEffect(() => {
-        if (!isStreaming && pendingMessages.length > 0) {
+        if (!streamingState.isStreaming && pendingMessages.length > 0) {
             const timer = setTimeout(() => {
                 processPendingMessages();
             }, 100);
             return () => clearTimeout(timer);
         }
         return undefined;
-    }, [isStreaming, pendingMessages.length]);
+    }, [streamingState.isStreaming, pendingMessages.length]);
     // ESC key handler to interrupt streaming or close overlays
     useInput((_, key) => {
-        if (pendingRollback) {
+        if (snapshotState.pendingRollback) {
             if (key.escape) {
-                setPendingRollback(null);
+                snapshotState.setPendingRollback(null);
             }
             return;
         }
@@ -241,9 +142,9 @@ export default function ChatScreen({}) {
             }
             return;
         }
-        if (key.escape && isStreaming && abortController) {
+        if (key.escape && streamingState.isStreaming && streamingState.abortController) {
             // Abort the controller
-            abortController.abort();
+            streamingState.abortController.abort();
             // Add discontinued message
             setMessages(prev => [
                 ...prev,
@@ -255,162 +156,25 @@ export default function ChatScreen({}) {
                 },
             ]);
             // Stop streaming state
-            setIsStreaming(false);
-            setAbortController(null);
-            setStreamTokenCount(0);
+            streamingState.setIsStreaming(false);
+            streamingState.setAbortController(null);
+            streamingState.setStreamTokenCount(0);
         }
     });
-    const handleCommandExecution = async (commandName, result) => {
-        // Handle /compact command
-        if (commandName === 'compact' &&
-            result.success &&
-            result.action === 'compact') {
-            // Set compressing state (不添加命令面板消息)
-            setIsCompressing(true);
-            setCompressionError(null);
-            try {
-                // Convert messages to ChatMessage format for compression
-                const chatMessages = messages
-                    .filter(msg => msg.role !== 'command')
-                    .map(msg => ({
-                    role: msg.role,
-                    content: msg.content,
-                    tool_call_id: msg.toolCallId,
-                }));
-                // Compress the context
-                const result = await compressContext(chatMessages);
-                // Replace all messages with a summary message (不包含 "Context Compressed" 标题)
-                const summaryMessage = {
-                    role: 'assistant',
-                    content: result.summary,
-                    streaming: false,
-                };
-                // Clear session and set new compressed state
-                sessionManager.clearCurrentSession();
-                clearSavedMessages();
-                setMessages([summaryMessage]);
-                setRemountKey(prev => prev + 1);
-                // Update token usage with compression result
-                setContextUsage({
-                    prompt_tokens: result.usage.prompt_tokens,
-                    completion_tokens: result.usage.completion_tokens,
-                    total_tokens: result.usage.total_tokens,
-                });
-            }
-            catch (error) {
-                // Show error message
-                const errorMsg = error instanceof Error ? error.message : 'Unknown compression error';
-                setCompressionError(errorMsg);
-                const errorMessage = {
-                    role: 'assistant',
-                    content: `**Compression Failed**\n\n${errorMsg}`,
-                    streaming: false,
-                };
-                setMessages(prev => [...prev, errorMessage]);
-            }
-            finally {
-                setIsCompressing(false);
-            }
-            return;
-        }
-        // Handle /ide command
-        if (commandName === 'ide') {
-            if (result.success) {
-                setVscodeConnectionStatus('connecting');
-                // Add command execution feedback
-                const commandMessage = {
-                    role: 'command',
-                    content: '',
-                    commandName: commandName,
-                };
-                setMessages(prev => [...prev, commandMessage]);
-            }
-            else {
-                setVscodeConnectionStatus('error');
-            }
-            return;
-        }
-        if (result.success && result.action === 'clear') {
-            if (stdout && typeof stdout.write === 'function') {
-                stdout.write('\x1B[3J\x1B[2J\x1B[H');
+    const handleHistorySelect = async (selectedIndex, _message) => {
+        // Count total files that will be rolled back (from selectedIndex onwards)
+        let totalFileCount = 0;
+        for (const [index, count] of snapshotState.snapshotFileCount.entries()) {
+            if (index >= selectedIndex) {
+                totalFileCount += count;
             }
-            // Clear current session and start new one
-            sessionManager.clearCurrentSession();
-            clearSavedMessages();
-            setMessages([]);
-            setRemountKey(prev => prev + 1);
-            // Reset context usage (token statistics)
-            setContextUsage(null);
-            // Note: yoloMode is preserved via localStorage (lines 68-76, 104-111)
-            // Note: VSCode connection is preserved and managed by vscodeConnection utility
-            // Add command execution feedback
-            const commandMessage = {
-                role: 'command',
-                content: '',
-                commandName: commandName,
-            };
-            setMessages([commandMessage]);
-        }
-        else if (result.success && result.action === 'showSessionPanel') {
-            setShowSessionPanel(true);
-            const commandMessage = {
-                role: 'command',
-                content: '',
-                commandName: commandName,
-            };
-            setMessages(prev => [...prev, commandMessage]);
         }
-        else if (result.success && result.action === 'showMcpInfo') {
-            setShowMcpInfo(true);
-            setMcpPanelKey(prev => prev + 1);
-            const commandMessage = {
-                role: 'command',
-                content: '',
-                commandName: commandName,
-            };
-            setMessages(prev => [...prev, commandMessage]);
-        }
-        else if (result.success && result.action === 'showMcpPanel') {
-            setShowMcpPanel(true);
-            const commandMessage = {
-                role: 'command',
-                content: '',
-                commandName: commandName,
-            };
-            setMessages(prev => [...prev, commandMessage]);
-        }
-        else if (result.success && result.action === 'goHome') {
-            navigateTo('welcome');
-        }
-        else if (result.success && result.action === 'toggleYolo') {
-            setYoloMode(prev => !prev);
-            const commandMessage = {
-                role: 'command',
-                content: '',
-                commandName: commandName,
-            };
-            setMessages(prev => [...prev, commandMessage]);
-        }
-        else if (result.success &&
-            result.action === 'initProject' &&
-            result.prompt) {
-            // Add command execution feedback
-            const commandMessage = {
-                role: 'command',
-                content: '',
-                commandName: commandName,
-            };
-            setMessages(prev => [...prev, commandMessage]);
-            // Auto-send the prompt using basicModel, hide the prompt from UI
-            processMessage(result.prompt, undefined, true, true);
-        }
-    };
-    const handleHistorySelect = async (selectedIndex, _message) => {
-        // Check if there are files to rollback
-        const fileCount = snapshotFileCount.get(selectedIndex) || 0;
-        if (fileCount > 0) {
-            // Show confirmation dialog
-            setPendingRollback({ messageIndex: selectedIndex, fileCount });
+        if (totalFileCount > 0) {
+            // Show confirmation dialog with total file count
+            snapshotState.setPendingRollback({
+                messageIndex: selectedIndex,
+                fileCount: totalFileCount,
+            });
         }
         else {
             // No files to rollback, just rollback conversation
@@ -422,7 +186,8 @@ export default function ChatScreen({}) {
         if (rollbackFiles) {
             const currentSession = sessionManager.getCurrentSession();
             if (currentSession) {
-                await incrementalSnapshotManager.rollbackToSnapshot(currentSession.id, selectedIndex);
+                // Use rollbackToMessageIndex to rollback all snapshots >= selectedIndex
+                await incrementalSnapshotManager.rollbackToMessageIndex(currentSession.id, selectedIndex);
             }
         }
         // Truncate messages array to remove the selected user message and everything after it
@@ -430,11 +195,11 @@ export default function ChatScreen({}) {
         clearSavedMessages();
         setRemountKey(prev => prev + 1);
         // Clear pending rollback dialog
-        setPendingRollback(null);
+        snapshotState.setPendingRollback(null);
     };
     const handleRollbackConfirm = (rollbackFiles) => {
-        if (pendingRollback) {
-            performRollback(pendingRollback.messageIndex, rollbackFiles);
+        if (snapshotState.pendingRollback) {
+            performRollback(snapshotState.pendingRollback.messageIndex, rollbackFiles);
         }
     };
     const handleSessionPanelSelect = async (sessionId) => {
@@ -442,11 +207,20 @@ export default function ChatScreen({}) {
         try {
             const session = await sessionManager.loadSession(sessionId);
             if (session) {
+                // Convert API format messages to UI format for proper rendering
+                const uiMessages = convertSessionMessagesToUI(session.messages);
                 initializeFromSession(session.messages);
-                setMessages(session.messages);
+                setMessages(uiMessages);
                 setPendingMessages([]);
-                setIsStreaming(false);
+                streamingState.setIsStreaming(false);
                 setRemountKey(prev => prev + 1);
+                // Load snapshot file counts for the loaded session
+                const snapshots = await incrementalSnapshotManager.listSnapshots(session.id);
+                const counts = new Map();
+                for (const snapshot of snapshots) {
+                    counts.set(snapshot.messageIndex, snapshot.fileCount);
+                }
+                snapshotState.setSnapshotFileCount(counts);
             }
         }
         catch (error) {
@@ -455,7 +229,7 @@ export default function ChatScreen({}) {
     };
     const handleMessageSubmit = async (message, images) => {
         // If streaming, add to pending messages instead of sending immediately
-        if (isStreaming) {
+        if (streamingState.isStreaming) {
             setPendingMessages(prev => [...prev, message]);
             return;
         }
@@ -490,8 +264,8 @@ export default function ChatScreen({}) {
                 mimeType: f.mimeType,
             })),
         ];
-        // Get system information
-        const systemInfo = getSystemInfo();
+        // Get system information only if needed
+        const systemInfo = shouldIncludeSystemInfo ? getSystemInfo() : undefined;
         // Only add user message to UI if not hidden
         if (!hideUserMessage) {
             const userMessage = {
@@ -502,14 +276,18 @@ export default function ChatScreen({}) {
                 systemInfo,
             };
             setMessages(prev => [...prev, userMessage]);
+            // After including system info once, don't include it again
+            if (shouldIncludeSystemInfo) {
+                setShouldIncludeSystemInfo(false);
+            }
         }
-        setIsStreaming(true);
+        streamingState.setIsStreaming(true);
         // Create new abort controller for this request
         const controller = new AbortController();
-        setAbortController(controller);
+        streamingState.setAbortController(controller);
         try {
             // Create message for AI with file read instructions, system info, and editor context
-            const messageForAI = createMessageWithFileInstructions(cleanContent, regularFiles, systemInfo, vscodeConnected ? editorContext : undefined);
+            const messageForAI = createMessageWithFileInstructions(cleanContent, regularFiles, systemInfo, vscodeState.vscodeConnected ? vscodeState.editorContext : undefined);
             // Start conversation with tool support
             await handleConversationWithTools({
                 userContent: messageForAI,
@@ -518,17 +296,19 @@ export default function ChatScreen({}) {
                 messages,
                 saveMessage,
                 setMessages,
-                setStreamTokenCount,
+                setStreamTokenCount: streamingState.setStreamTokenCount,
                 setCurrentTodos,
                 requestToolConfirmation,
                 isToolAutoApproved,
                 addMultipleToAlwaysApproved,
                 yoloMode,
-                setContextUsage,
+                setContextUsage: streamingState.setContextUsage,
                 useBasicModel,
                 getPendingMessages: () => pendingMessagesRef.current,
                 clearPendingMessages: () => setPendingMessages([]),
-                setIsStreaming,
+                setIsStreaming: streamingState.setIsStreaming,
+                setIsReasoning: streamingState.setIsReasoning,
+                setRetryStatus: streamingState.setRetryStatus,
             });
         }
         catch (error) {
@@ -545,11 +325,13 @@ export default function ChatScreen({}) {
         }
         finally {
             // End streaming
-            setIsStreaming(false);
-            setAbortController(null);
-            setStreamTokenCount(0);
+            streamingState.setIsStreaming(false);
+            streamingState.setAbortController(null);
+            streamingState.setStreamTokenCount(0);
         }
     };
+    // Set the ref to the actual function
+    processMessageRef.current = processMessage;
     const processPendingMessages = async () => {
         if (pendingMessages.length === 0)
             return;
@@ -562,10 +344,10 @@ export default function ChatScreen({}) {
         const userMessage = { role: 'user', content: combinedMessage };
         setMessages(prev => [...prev, userMessage]);
         // Start streaming response
-        setIsStreaming(true);
+        streamingState.setIsStreaming(true);
         // Create new abort controller for this request
         const controller = new AbortController();
-        setAbortController(controller);
+        streamingState.setAbortController(controller);
         // Save user message
         saveMessage({
             role: 'user',
@@ -582,16 +364,18 @@ export default function ChatScreen({}) {
                 messages,
                 saveMessage,
                 setMessages,
-                setStreamTokenCount,
+                setStreamTokenCount: streamingState.setStreamTokenCount,
                 setCurrentTodos,
                 requestToolConfirmation,
                 isToolAutoApproved,
                 addMultipleToAlwaysApproved,
                 yoloMode,
-                setContextUsage,
+                setContextUsage: streamingState.setContextUsage,
                 getPendingMessages: () => pendingMessagesRef.current,
                 clearPendingMessages: () => setPendingMessages([]),
-                setIsStreaming,
+                setIsStreaming: streamingState.setIsStreaming,
+                setIsReasoning: streamingState.setIsReasoning,
+                setRetryStatus: streamingState.setRetryStatus,
             });
         }
         catch (error) {
@@ -608,9 +392,9 @@ export default function ChatScreen({}) {
         }
         finally {
             // End streaming
-            setIsStreaming(false);
-            setAbortController(null);
-            setStreamTokenCount(0);
+            streamingState.setIsStreaming(false);
+            streamingState.setAbortController(null);
+            streamingState.setStreamTokenCount(0);
         }
     };
     if (showMcpInfo) {
@@ -640,9 +424,9 @@ export default function ChatScreen({}) {
                             React.createElement(Text, { color: "cyan" }, "\u2746 "),
                             React.createElement(Gradient, { name: "rainbow" }, "Programming efficiency x10!"),
                             React.createElement(Text, { color: "white" }, " \u26C7")),
-                        React.createElement(Text, { color: "gray", dimColor: true }, "\u2022 Ask for code explanations and debugging help"),
-                        React.createElement(Text, { color: "gray", dimColor: true }, "\u2022 Press ESC during response to interrupt"),
-                        React.createElement(Text, { color: "gray", dimColor: true },
+                        React.createElement(Text, null, "\u2022 Ask for code explanations and debugging help"),
+                        React.createElement(Text, null, "\u2022 Press ESC during response to interrupt"),
+                        React.createElement(Text, null,
                             "\u2022 Working directory: ",
                             workingDirectory))),
                 ...messages
@@ -788,23 +572,39 @@ export default function ChatScreen({}) {
                 React.createElement(Box, { marginLeft: 1 },
                     React.createElement(Text, { color: "yellow" },
                         React.createElement(Spinner, { type: "dots" }))))))),
-        (isStreaming || isSaving) && !pendingToolConfirmation && (React.createElement(Box, { marginBottom: 1, marginX: 1 },
-            React.createElement(Text, { color: ['#FF6EBF', 'green', 'blue', 'cyan', '#B588F8'][animationFrame], bold: true }, "\u2746"),
-            React.createElement(Box, { marginLeft: 1, marginBottom: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true }, isStreaming ? (React.createElement(React.Fragment, null,
-                    "Thinking... (",
-                    formatElapsedTime(elapsedSeconds),
-                    streamTokenCount > 0 && (React.createElement(React.Fragment, null,
-                        ' · ',
-                        React.createElement(Text, { color: "cyan" },
-                            "\u2193",
-                            ' ',
-                            streamTokenCount >= 1000
-                                ? `${(streamTokenCount / 1000).toFixed(1)}k`
-                                : streamTokenCount,
-                            ' ',
-                            "tokens"))),
-                    ")")) : ('Create the first dialogue record file...'))))),
+        (streamingState.isStreaming || isSaving) && !pendingToolConfirmation && (React.createElement(Box, { marginBottom: 1, marginX: 1 },
+            React.createElement(Text, { color: ['#FF6EBF', 'green', 'blue', 'cyan', '#B588F8'][streamingState.animationFrame], bold: true }, "\u2746"),
+            React.createElement(Box, { marginLeft: 1, marginBottom: 1, flexDirection: "column" }, streamingState.isStreaming ? (React.createElement(React.Fragment, null, streamingState.retryStatus && streamingState.retryStatus.isRetrying ? (
+            // Retry status display - hide "Thinking" and show retry info
+            React.createElement(Box, { flexDirection: "column" },
+                streamingState.retryStatus.errorMessage && (React.createElement(Text, { color: "red", dimColor: true },
+                    "\u2717 Error: ",
+                    streamingState.retryStatus.errorMessage)),
+                streamingState.retryStatus.remainingSeconds !== undefined && streamingState.retryStatus.remainingSeconds > 0 ? (React.createElement(Text, { color: "yellow", dimColor: true },
+                    "\u27F3 Retry ",
+                    streamingState.retryStatus.attempt,
+                    "/5 in ",
+                    streamingState.retryStatus.remainingSeconds,
+                    "s...")) : (React.createElement(Text, { color: "yellow", dimColor: true },
+                    "\u27F3 Resending... (Attempt ",
+                    streamingState.retryStatus.attempt,
+                    "/5)")))) : (
+            // Normal thinking status
+            React.createElement(Text, { color: "gray", dimColor: true },
+                React.createElement(ShimmerText, { text: streamingState.isReasoning ? 'Deep thinking...' : 'Thinking...' }),
+                ' ',
+                "(",
+                formatElapsedTime(streamingState.elapsedSeconds),
+                ' · ',
+                React.createElement(Text, { color: "cyan" },
+                    "\u2193",
+                    ' ',
+                    streamingState.streamTokenCount >= 1000
+                        ? `${(streamingState.streamTokenCount / 1000).toFixed(1)}k`
+                        : streamingState.streamTokenCount,
+                    ' ',
+                    "tokens"),
+                ")")))) : (React.createElement(Text, { color: "gray", dimColor: true }, "Create the first dialogue record file..."))))),
         React.createElement(Box, { marginX: 1 },
             React.createElement(PendingMessages, { pendingMessages: pendingMessages })),
         pendingToolConfirmation && (React.createElement(ToolConfirmation, { toolName: pendingToolConfirmation.batchToolNames ||
@@ -817,44 +617,44 @@ export default function ChatScreen({}) {
             React.createElement(MCPInfoPanel, null),
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: "gray", dimColor: true }, "Press ESC to close")))),
-        pendingRollback && (React.createElement(FileRollbackConfirmation, { fileCount: pendingRollback.fileCount, onConfirm: handleRollbackConfirm })),
+        snapshotState.pendingRollback && (React.createElement(FileRollbackConfirmation, { fileCount: snapshotState.pendingRollback.fileCount, onConfirm: handleRollbackConfirm })),
         !pendingToolConfirmation &&
             !isCompressing &&
             !showSessionPanel &&
             !showMcpPanel &&
-            !pendingRollback && (React.createElement(React.Fragment, null,
-            React.createElement(ChatInput, { onSubmit: handleMessageSubmit, onCommand: handleCommandExecution, placeholder: "Ask me anything about coding...", disabled: !!pendingToolConfirmation, chatHistory: messages, onHistorySelect: handleHistorySelect, yoloMode: yoloMode, contextUsage: contextUsage
+            !snapshotState.pendingRollback && (React.createElement(React.Fragment, null,
+            React.createElement(ChatInput, { onSubmit: handleMessageSubmit, onCommand: handleCommandExecution, placeholder: "Ask me anything about coding...", disabled: !!pendingToolConfirmation, chatHistory: messages, onHistorySelect: handleHistorySelect, yoloMode: yoloMode, contextUsage: streamingState.contextUsage
                     ? {
-                        inputTokens: contextUsage.prompt_tokens,
+                        inputTokens: streamingState.contextUsage.prompt_tokens,
                         maxContextTokens: getOpenAiConfig().maxContextTokens || 4000,
-                        cacheCreationTokens: contextUsage.cache_creation_input_tokens,
-                        cacheReadTokens: contextUsage.cache_read_input_tokens,
-                        cachedTokens: contextUsage.cached_tokens,
+                        cacheCreationTokens: streamingState.contextUsage.cache_creation_input_tokens,
+                        cacheReadTokens: streamingState.contextUsage.cache_read_input_tokens,
+                        cachedTokens: streamingState.contextUsage.cached_tokens,
                     }
-                    : undefined, snapshotFileCount: snapshotFileCount }),
-            vscodeConnectionStatus !== 'disconnected' && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: vscodeConnectionStatus === 'connecting'
+                    : undefined, snapshotFileCount: snapshotState.snapshotFileCount }),
+            vscodeState.vscodeConnectionStatus !== 'disconnected' && (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: vscodeState.vscodeConnectionStatus === 'connecting'
                         ? 'yellow'
-                        : vscodeConnectionStatus === 'connected'
+                        : vscodeState.vscodeConnectionStatus === 'connected'
                             ? 'green'
-                            : vscodeConnectionStatus === 'error'
+                            : vscodeState.vscodeConnectionStatus === 'error'
                                 ? 'red'
-                                : 'gray', dimColor: vscodeConnectionStatus !== 'error' },
+                                : 'gray', dimColor: vscodeState.vscodeConnectionStatus !== 'error' },
                     "\u25CF",
                     ' ',
-                    vscodeConnectionStatus === 'connecting'
+                    vscodeState.vscodeConnectionStatus === 'connecting'
                         ? 'Waiting for VSCode extension to connect...'
-                        : vscodeConnectionStatus === 'connected'
+                        : vscodeState.vscodeConnectionStatus === 'connected'
                             ? 'VSCode Connected'
-                            : vscodeConnectionStatus === 'error'
+                            : vscodeState.vscodeConnectionStatus === 'error'
                                 ? 'Connection Failed - Make sure Snow CLI extension is installed and active in VSCode'
                                 : 'VSCode',
-                    vscodeConnectionStatus === 'connected' &&
-                        editorContext.activeFile &&
-                        ` | ${editorContext.activeFile}`,
-                    vscodeConnectionStatus === 'connected' &&
-                        editorContext.selectedText &&
-                        ` | ${editorContext.selectedText.length} chars selected`))))),
+                    vscodeState.vscodeConnectionStatus === 'connected' &&
+                        vscodeState.editorContext.activeFile &&
+                        ` | ${vscodeState.editorContext.activeFile}`,
+                    vscodeState.vscodeConnectionStatus === 'connected' &&
+                        vscodeState.editorContext.selectedText &&
+                        ` | ${vscodeState.editorContext.selectedText.length} chars selected`))))),
         isCompressing && (React.createElement(Box, { marginTop: 1 },
             React.createElement(Text, { color: "cyan" },
                 React.createElement(Spinner, { type: "dots" }),