snow-ai 0.4.14 → 0.4.16

package/dist/ui/components/ChatInput.js

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { useCallback, useEffect, useRef, useMemo, lazy, Suspense } from 'react';
 import { Box, Text } from 'ink';
 import { cpSlice } from '../../utils/textUtils.js';
-import CommandPanel from './CommandPanel.js';
-import FileList from './FileList.js';
-import AgentPickerPanel from './AgentPickerPanel.js';
-import TodoPickerPanel from './TodoPickerPanel.js';
+// Lazy load panel components to reduce initial bundle size
+const CommandPanel = lazy(() => import('./CommandPanel.js'));
+const FileList = lazy(() => import('./FileList.js'));
+const AgentPickerPanel = lazy(() => import('./AgentPickerPanel.js'));
+const TodoPickerPanel = lazy(() => import('./TodoPickerPanel.js'));
 import { useInputBuffer } from '../../hooks/useInputBuffer.js';
 import { useCommandPanel } from '../../hooks/useCommandPanel.js';
 import { useFilePicker } from '../../hooks/useFilePicker.js';
@@ -309,11 +310,15 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                             ? t.chatScreen.contentSearchHint
                             : t.chatScreen.fileSearchHint
                         : ''))) : null,
-            React.createElement(CommandPanel, { commands: getFilteredCommands(), selectedIndex: commandSelectedIndex, query: buffer.getFullText().slice(1), visible: showCommands, isProcessing: commandPanelIsProcessing }),
+            React.createElement(Suspense, { fallback: null },
+                React.createElement(CommandPanel, { commands: getFilteredCommands(), selectedIndex: commandSelectedIndex, query: buffer.getFullText().slice(1), visible: showCommands, isProcessing: commandPanelIsProcessing })),
             React.createElement(Box, null,
-                React.createElement(FileList, { ref: fileListRef, query: fileQuery, selectedIndex: fileSelectedIndex, visible: showFilePicker, maxItems: 10, rootPath: process.cwd(), onFilteredCountChange: handleFilteredCountChange, searchMode: searchMode })),
-            React.createElement(AgentPickerPanel, { agents: getFilteredAgents(), selectedIndex: agentSelectedIndex, visible: showAgentPicker, maxHeight: 5 }),
-            React.createElement(TodoPickerPanel, { todos: todos, selectedIndex: todoSelectedIndex, selectedTodos: selectedTodos, visible: showTodoPicker, maxHeight: 5, isLoading: todoIsLoading, searchQuery: todoSearchQuery, totalCount: totalTodoCount }),
+                React.createElement(Suspense, { fallback: null },
+                    React.createElement(FileList, { ref: fileListRef, query: fileQuery, selectedIndex: fileSelectedIndex, visible: showFilePicker, maxItems: 10, rootPath: process.cwd(), onFilteredCountChange: handleFilteredCountChange, searchMode: searchMode }))),
+            React.createElement(Suspense, { fallback: null },
+                React.createElement(AgentPickerPanel, { agents: getFilteredAgents(), selectedIndex: agentSelectedIndex, visible: showAgentPicker, maxHeight: 5 })),
+            React.createElement(Suspense, { fallback: null },
+                React.createElement(TodoPickerPanel, { todos: todos, selectedIndex: todoSelectedIndex, selectedTodos: selectedTodos, visible: showTodoPicker, maxHeight: 5, isLoading: todoIsLoading, searchQuery: todoSearchQuery, totalCount: totalTodoCount })),
             yoloMode && (React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: theme.colors.warning, dimColor: true }, t.chatScreen.yoloModeActive))),
             contextUsage && (React.createElement(Box, { marginTop: 1 },

package/dist/ui/pages/ChatScreen.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
 import { Box, Text, useInput, Static, useStdout } from 'ink';
 import Spinner from 'ink-spinner';
 import Gradient from 'ink-gradient';
@@ -7,17 +7,18 @@ import { useI18n } from '../../i18n/I18nContext.js';
 import { useTheme } from '../contexts/ThemeContext.js';
 import ChatInput from '../components/ChatInput.js';
 import PendingMessages from '../components/PendingMessages.js';
-import MCPInfoScreen from '../components/MCPInfoScreen.js';
-import MCPInfoPanel from '../components/MCPInfoPanel.js';
-import SessionListPanel from '../components/SessionListPanel.js';
-import UsagePanel from '../components/UsagePanel.js';
-import HelpPanel from '../components/HelpPanel.js';
 import MarkdownRenderer from '../components/MarkdownRenderer.js';
 import ToolConfirmation from '../components/ToolConfirmation.js';
 import DiffViewer from '../components/DiffViewer.js';
 import ToolResultPreview from '../components/ToolResultPreview.js';
 import FileRollbackConfirmation from '../components/FileRollbackConfirmation.js';
 import ShimmerText from '../components/ShimmerText.js';
+// Lazy load panel components to reduce initial bundle size
+const MCPInfoScreen = lazy(() => import('../components/MCPInfoScreen.js'));
+const MCPInfoPanel = lazy(() => import('../components/MCPInfoPanel.js'));
+const SessionListPanel = lazy(() => import('../components/SessionListPanel.js'));
+const UsagePanel = lazy(() => import('../components/UsagePanel.js'));
+const HelpPanel = lazy(() => import('../components/HelpPanel.js'));
 import { getOpenAiConfig } from '../../utils/apiConfig.js';
 import { sessionManager } from '../../utils/sessionManager.js';
 import { useSessionSave } from '../../hooks/useSessionSave.js';
@@ -30,7 +31,7 @@ import { useStreamingState } from '../../hooks/useStreamingState.js';
 import { useCommandHandler } from '../../hooks/useCommandHandler.js';
 import { useTerminalSize } from '../../hooks/useTerminalSize.js';
 import { parseAndValidateFileReferences, createMessageWithFileInstructions, } from '../../utils/fileUtils.js';
-import { executeCommand } from '../../utils/commandExecutor.js';
+import { vscodeConnection } from '../../utils/vscodeConnection.js';
 import { convertSessionMessagesToUI } from '../../utils/sessionConverter.js';
 import { incrementalSnapshotManager } from '../../utils/incrementalSnapshot.js';
 import { formatElapsedTime } from '../../utils/textUtils.js';
@@ -94,6 +95,8 @@ export default function ChatScreen({ skipWelcome }) {
     useEffect(() => {
         pendingMessagesRef.current = pendingMessages;
     }, [pendingMessages]);
+    // Track if commands are loaded
+    const [commandsLoaded, setCommandsLoaded] = useState(false);
     // Load commands dynamically to avoid blocking initial render
     useEffect(() => {
         // Use Promise.all to load all commands in parallel
@@ -113,8 +116,14 @@ export default function ChatScreen({ skipWelcome }) {
             import('../../utils/commands/agent.js'),
             import('../../utils/commands/todoPicker.js'),
             import('../../utils/commands/help.js'),
-        ]).catch(error => {
+        ])
+            .then(() => {
+            setCommandsLoaded(true);
+        })
+            .catch(error => {
             console.error('Failed to load commands:', error);
+            // Still mark as loaded to allow app to continue
+            setCommandsLoaded(true);
         });
     }, []);
     // Auto-start codebase indexing on mount if enabled
@@ -371,6 +380,10 @@ export default function ChatScreen({ skipWelcome }) {
         processMessage: (message, images, useBasicModel, hideUserMessage) => processMessageRef.current?.(message, images, useBasicModel, hideUserMessage) || Promise.resolve(),
     });
     useEffect(() => {
+        // Wait for commands to be loaded before attempting auto-connect
+        if (!commandsLoaded) {
+            return;
+        }
         if (hasAttemptedAutoVscodeConnect.current) {
             return;
         }
@@ -379,22 +392,33 @@ export default function ChatScreen({ skipWelcome }) {
             return;
         }
         hasAttemptedAutoVscodeConnect.current = true;
-        (async () => {
-            try {
-                const result = await executeCommand('ide');
-                await handleCommandExecution('ide', result);
-            }
-            catch (error) {
-                console.error('Failed to auto-connect VSCode:', error);
-                await handleCommandExecution('ide', {
-                    success: false,
-                    message: error instanceof Error
-                        ? error.message
-                        : 'Failed to start VSCode connection',
-                });
-            }
-        })();
-    }, [handleCommandExecution, vscodeState.vscodeConnectionStatus]);
+        // Auto-connect IDE in background without blocking UI
+        // Use setTimeout to defer execution and make it fully async
+        const timer = setTimeout(() => {
+            // Fire and forget - don't wait for result
+            (async () => {
+                try {
+                    // Clean up any existing connection state first (like manual /ide does)
+                    if (vscodeConnection.isConnected() || vscodeConnection.isClientRunning()) {
+                        vscodeConnection.stop();
+                        vscodeConnection.resetReconnectAttempts();
+                        await new Promise(resolve => setTimeout(resolve, 100));
+                    }
+                    // Set connecting status after cleanup
+                    vscodeState.setVscodeConnectionStatus('connecting');
+                    // Now try to connect
+                    await vscodeConnection.start();
+                    // If we get here, connection succeeded
+                    // Status will be updated by useVSCodeState hook monitoring
+                }
+                catch (error) {
+                    console.error('Background VSCode auto-connect failed:', error);
+                    // Let useVSCodeState handle the timeout and error state
+                }
+            })();
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [commandsLoaded, vscodeState]);
     // Pending messages are now handled inline during tool execution in useConversation
     // Auto-send pending messages when streaming completely stops (as fallback)
     useEffect(() => {
@@ -1111,7 +1135,11 @@ export default function ChatScreen({ skipWelcome }) {
         }
     };
     if (showMcpInfo) {
-        return (React.createElement(MCPInfoScreen, { onClose: () => setShowMcpInfo(false), panelKey: mcpPanelKey }));
+        return (React.createElement(Suspense, { fallback: React.createElement(Box, null,
+                React.createElement(Text, null,
+                    React.createElement(Spinner, { type: "dots" }),
+                    " Loading...")) },
+            React.createElement(MCPInfoScreen, { onClose: () => setShowMcpInfo(false), panelKey: mcpPanelKey })));
     }
     // Show warning if terminal is too small
     if (terminalHeight < MIN_TERMINAL_HEIGHT) {
@@ -1404,17 +1432,33 @@ export default function ChatScreen({ skipWelcome }) {
                 ? pendingToolConfirmation.tool.function.arguments
                 : undefined, allTools: pendingToolConfirmation.allTools, onConfirm: pendingToolConfirmation.resolve })),
         showSessionPanel && (React.createElement(Box, { paddingX: 1, width: terminalWidth },
-            React.createElement(SessionListPanel, { onSelectSession: handleSessionPanelSelect, onClose: () => setShowSessionPanel(false) }))),
+            React.createElement(Suspense, { fallback: React.createElement(Box, null,
+                    React.createElement(Text, null,
+                        React.createElement(Spinner, { type: "dots" }),
+                        " Loading...")) },
+                React.createElement(SessionListPanel, { onSelectSession: handleSessionPanelSelect, onClose: () => setShowSessionPanel(false) })))),
         showMcpPanel && (React.createElement(Box, { paddingX: 1, flexDirection: "column", width: terminalWidth },
-            React.createElement(MCPInfoPanel, null),
+            React.createElement(Suspense, { fallback: React.createElement(Box, null,
+                    React.createElement(Text, null,
+                        React.createElement(Spinner, { type: "dots" }),
+                        " Loading...")) },
+                React.createElement(MCPInfoPanel, null)),
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.chatScreen.pressEscToClose)))),
         showUsagePanel && (React.createElement(Box, { paddingX: 1, flexDirection: "column", width: terminalWidth },
-            React.createElement(UsagePanel, null),
+            React.createElement(Suspense, { fallback: React.createElement(Box, null,
+                    React.createElement(Text, null,
+                        React.createElement(Spinner, { type: "dots" }),
+                        " Loading...")) },
+                React.createElement(UsagePanel, null)),
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.chatScreen.pressEscToClose)))),
         showHelpPanel && (React.createElement(Box, { paddingX: 1, flexDirection: "column", width: terminalWidth },
-            React.createElement(HelpPanel, null))),
+            React.createElement(Suspense, { fallback: React.createElement(Box, null,
+                    React.createElement(Text, null,
+                        React.createElement(Spinner, { type: "dots" }),
+                        " Loading...")) },
+                React.createElement(HelpPanel, null)))),
         snapshotState.pendingRollback && (React.createElement(FileRollbackConfirmation, { fileCount: snapshotState.pendingRollback.fileCount, filePaths: snapshotState.pendingRollback.filePaths || [], onConfirm: handleRollbackConfirm })),
         !pendingToolConfirmation &&
             !isCompressing &&
@@ -1432,29 +1476,21 @@ export default function ChatScreen({ skipWelcome }) {
                         cachedTokens: streamingState.contextUsage.cached_tokens,
                     }
                     : undefined, initialContent: restoreInputContent, onContextPercentageChange: setCurrentContextPercentage }),
-            vscodeState.vscodeConnectionStatus !== 'disconnected' && (React.createElement(Box, { marginTop: 1, paddingX: 1 },
+            (vscodeState.vscodeConnectionStatus === 'connecting' ||
+                vscodeState.vscodeConnectionStatus === 'connected') && (React.createElement(Box, { marginTop: 1, paddingX: 1 },
                 React.createElement(Text, { color: vscodeState.vscodeConnectionStatus === 'connecting'
                         ? 'yellow'
-                        : vscodeState.vscodeConnectionStatus === 'connected'
-                            ? 'green'
-                            : vscodeState.vscodeConnectionStatus === 'error'
-                                ? 'red'
-                                : theme.colors.menuSecondary, dimColor: vscodeState.vscodeConnectionStatus !== 'error' },
+                        : 'green', dimColor: true }, vscodeState.vscodeConnectionStatus === 'connecting' ? (React.createElement(React.Fragment, null,
+                    React.createElement(Spinner, { type: "dots" }),
+                    " ",
+                    t.chatScreen.ideConnecting)) : (React.createElement(React.Fragment, null,
                     "\u25CF",
                     ' ',
-                    vscodeState.vscodeConnectionStatus === 'connecting'
-                        ? t.chatScreen.ideConnecting
-                        : vscodeState.vscodeConnectionStatus === 'connected'
-                            ? t.chatScreen.ideConnected
-                            : vscodeState.vscodeConnectionStatus === 'error'
-                                ? t.chatScreen.ideError
-                                : 'IDE',
-                    vscodeState.vscodeConnectionStatus === 'connected' &&
-                        vscodeState.editorContext.activeFile &&
+                    t.chatScreen.ideConnected,
+                    vscodeState.editorContext.activeFile &&
                         t.chatScreen.ideActiveFile.replace('{file}', vscodeState.editorContext.activeFile),
-                    vscodeState.vscodeConnectionStatus === 'connected' &&
-                        vscodeState.editorContext.selectedText &&
-                        t.chatScreen.ideSelectedText.replace('{count}', vscodeState.editorContext.selectedText.length.toString())))),
+                    vscodeState.editorContext.selectedText &&
+                        t.chatScreen.ideSelectedText.replace('{count}', vscodeState.editorContext.selectedText.length.toString())))))),
             codebaseIndexing && codebaseProgress && (React.createElement(Box, { marginTop: 1, paddingX: 1 },
                 React.createElement(Text, { color: "cyan", dimColor: true },
                     React.createElement(Spinner, { type: "dots" }),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "snow-ai",
-	"version": "0.4.14",
+	"version": "0.4.16",
 	"description": "Intelligent Command Line Assistant powered by AI",
 	"license": "MIT",
 	"bin": {