snow-ai 0.2.22 → 0.2.23

package/dist/api/models.js

@@ -47,6 +47,7 @@ async function fetchGeminiModels(baseUrl, apiKey) {
 }
 /**
  * Fetch models from Anthropic API
+ * Supports both Anthropic native format and OpenAI-compatible format for backward compatibility
  */
 async function fetchAnthropicModels(baseUrl, apiKey, customHeaders) {
     const url = `${baseUrl.replace(/\/$/, '')}/models`;
@@ -57,6 +58,7 @@ async function fetchAnthropicModels(baseUrl, apiKey, customHeaders) {
     };
     if (apiKey) {
         headers['x-api-key'] = apiKey;
+        headers['Authorization'] = `Bearer ${apiKey}`;
     }
     const response = await fetch(url, {
         method: 'GET',
@@ -66,13 +68,27 @@ async function fetchAnthropicModels(baseUrl, apiKey, customHeaders) {
         throw new Error(`Failed to fetch models: ${response.status} ${response.statusText}`);
     }
     const data = await response.json();
-    // Convert Anthropic format to standard Model format
-    return (data.data || []).map(model => ({
-        id: model.id,
-        object: 'model',
-        created: new Date(model.created_at).getTime() / 1000, // Convert to Unix timestamp
-        owned_by: 'anthropic',
-    }));
+    // Try to parse as Anthropic format first
+    if (data.data && Array.isArray(data.data) && data.data.length > 0) {
+        const firstItem = data.data[0];
+        // Check if it's Anthropic format (has created_at field)
+        if ('created_at' in firstItem && typeof firstItem.created_at === 'string') {
+            // Anthropic native format
+            return data.data.map(model => ({
+                id: model.id,
+                object: 'model',
+                created: new Date(model.created_at).getTime() / 1000,
+                owned_by: 'anthropic',
+            }));
+        }
+        // Fallback to OpenAI format (has created field as number)
+        if ('id' in firstItem && 'object' in firstItem) {
+            // OpenAI-compatible format
+            return data.data;
+        }
+    }
+    // If no data array or empty, return empty array
+    return [];
 }
 /**
  * Fetch available models based on configured request method

package/dist/app.js

@@ -10,12 +10,15 @@ import CustomHeadersScreen from './ui/pages/CustomHeadersScreen.js';
 import ChatScreen from './ui/pages/ChatScreen.js';
 import { useGlobalExit } from './hooks/useGlobalExit.js';
 import { onNavigate } from './hooks/useGlobalNavigation.js';
+import { useTerminalSize } from './hooks/useTerminalSize.js';
 export default function App({ version }) {
     const [currentView, setCurrentView] = useState('welcome');
     const [exitNotification, setExitNotification] = useState({
         show: false,
         message: ''
     });
+    // Get terminal size for proper width calculation
+    const { columns: terminalWidth } = useTerminalSize();
     // Global exit handler
     useGlobalExit(setExitNotification);
     // Global navigation handler
@@ -57,8 +60,8 @@ export default function App({ version }) {
                 return (React.createElement(WelcomeScreen, { version: version, onMenuSelect: handleMenuSelect }));
         }
     };
-    return (React.createElement(Box, { flexDirection: "column", height: "100%" },
-        React.createElement(Box, { flexGrow: 1, flexShrink: 1, minHeight: 0 }, renderView()),
+    return (React.createElement(Box, { flexDirection: "column", width: terminalWidth },
+        renderView(),
         exitNotification.show && (React.createElement(Box, { paddingX: 1, flexShrink: 0 },
             React.createElement(Alert, { variant: "warning" }, exitNotification.message)))));
 }

package/dist/cli.js

@@ -1,17 +1,20 @@
 #!/usr/bin/env node
 import React from 'react';
-import { render } from 'ink';
+import { render, Text, Box } from 'ink';
+import Spinner from 'ink-spinner';
 import meow from 'meow';
-import { execSync } from 'child_process';
+import { exec, execSync } from 'child_process';
+import { promisify } from 'util';
 import App from './app.js';
 import { vscodeConnection } from './utils/vscodeConnection.js';
-// Check for updates in the background
+const execAsync = promisify(exec);
+// Check for updates asynchronously
 async function checkForUpdates(currentVersion) {
     try {
-        const latestVersion = execSync('npm view snow-ai version', {
+        const { stdout } = await execAsync('npm view snow-ai version', {
             encoding: 'utf8',
-            stdio: ['pipe', 'pipe', 'ignore'],
-        }).trim();
+        });
+        const latestVersion = stdout.trim();
         if (latestVersion && latestVersion !== currentVersion) {
             console.log('\n🔔 Update available!');
             console.log(`   Current version: ${currentVersion}`);
@@ -53,12 +56,41 @@ if (cli.flags.update) {
         process.exit(1);
     }
 }
+// Startup component that shows loading spinner during update check
+const Startup = ({ version }) => {
+    const [appReady, setAppReady] = React.useState(false);
+    React.useEffect(() => {
+        let mounted = true;
+        const init = async () => {
+            // Check for updates with timeout
+            const updateCheckPromise = version
+                ? checkForUpdates(version)
+                : Promise.resolve();
+            // Race between update check and 3-second timeout
+            await Promise.race([
+                updateCheckPromise,
+                new Promise(resolve => setTimeout(resolve, 3000)),
+            ]);
+            if (mounted) {
+                setAppReady(true);
+            }
+        };
+        init();
+        return () => {
+            mounted = false;
+        };
+    }, [version]);
+    if (!appReady) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Box, null,
+                React.createElement(Text, { color: "cyan" },
+                    React.createElement(Spinner, { type: "dots" })),
+                React.createElement(Text, null, " Checking for updates..."))));
+    }
+    return React.createElement(App, { version: version });
+};
 // Disable bracketed paste mode on startup
 process.stdout.write('\x1b[?2004l');
-// Check for updates in the background (non-blocking)
-if (cli.pkg.version) {
-    checkForUpdates(cli.pkg.version);
-}
 // Re-enable on exit to avoid polluting parent shell
 const cleanup = () => {
     process.stdout.write('\x1b[?2004l');
@@ -74,7 +106,7 @@ process.on('SIGTERM', () => {
     cleanup();
     process.exit(0);
 });
-render(React.createElement(App, { version: cli.pkg.version }), {
+render(React.createElement(Startup, { version: cli.pkg.version }), {
     exitOnCtrlC: false,
     patchConsole: true,
 });

package/dist/hooks/useCommandHandler.js

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { sessionManager } from '../utils/sessionManager.js';
 import { compressContext } from '../utils/contextCompressor.js';
 import { navigateTo } from './useGlobalNavigation.js';
+import { resetTerminal } from '../utils/terminal.js';
 export function useCommandHandler(options) {
     const { stdout } = useStdout();
     const handleCommandExecution = useCallback(async (commandName, result) => {
@@ -90,9 +91,7 @@ export function useCommandHandler(options) {
             return;
         }
         if (result.success && result.action === 'clear') {
-            if (stdout && typeof stdout.write === 'function') {
-                stdout.write('\x1B[3J\x1B[2J\x1B[H');
-            }
+            resetTerminal(stdout);
             // Clear current session and start new one
             sessionManager.clearCurrentSession();
             options.clearSavedMessages();

package/dist/hooks/useKeyboardInput.js

@@ -26,6 +26,17 @@ export function useKeyboardInput(options) {
     useInput((input, key) => {
         if (disabled)
             return;
+        // Filter out focus events - ONLY if the input is exactly a focus event
+        // Focus events from terminals: ESC[I (focus in) or ESC[O (focus out)
+        // DO NOT filter if input contains other content (like drag-and-drop paths)
+        // The key insight: focus events are standalone, user input is never JUST "[I" or "[O"
+        if (input === '\x1b[I' ||
+            input === '\x1b[O' ||
+            // Some terminals may send without ESC, but only if it's the entire input
+            (input === '[I' && input.length === 2) ||
+            (input === '[O' && input.length === 2)) {
+            return;
+        }
         // Shift+Tab - Toggle YOLO mode
         if (key.shift && key.tab) {
             executeCommand('yolo').then(result => {

package/dist/hooks/useTerminalFocus.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Hook to detect terminal window focus state.
+ * Returns true when terminal has focus, false otherwise.
+ *
+ * Uses ANSI escape sequences to detect focus events:
+ * - ESC[I (\x1b[I) - Focus gained
+ * - ESC[O (\x1b[O) - Focus lost
+ *
+ * Cross-platform support:
+ * - ✅ Windows Terminal
+ * - ✅ macOS Terminal.app, iTerm2
+ * - ✅ Linux: GNOME Terminal, Konsole, Alacritty, kitty, etc.
+ *
+ * Note: Older or minimal terminals that don't support focus reporting
+ * will simply ignore the escape sequences and cursor will remain visible.
+ *
+ * Also provides a function to check if input contains focus events
+ * so they can be filtered from normal input processing.
+ */
+export declare function useTerminalFocus(): {
+    hasFocus: boolean;
+    isFocusEvent: (input: string) => boolean;
+};

package/dist/hooks/useTerminalFocus.js

@@ -0,0 +1,57 @@
+import { useState, useEffect } from 'react';
+/**
+ * Hook to detect terminal window focus state.
+ * Returns true when terminal has focus, false otherwise.
+ *
+ * Uses ANSI escape sequences to detect focus events:
+ * - ESC[I (\x1b[I) - Focus gained
+ * - ESC[O (\x1b[O) - Focus lost
+ *
+ * Cross-platform support:
+ * - ✅ Windows Terminal
+ * - ✅ macOS Terminal.app, iTerm2
+ * - ✅ Linux: GNOME Terminal, Konsole, Alacritty, kitty, etc.
+ *
+ * Note: Older or minimal terminals that don't support focus reporting
+ * will simply ignore the escape sequences and cursor will remain visible.
+ *
+ * Also provides a function to check if input contains focus events
+ * so they can be filtered from normal input processing.
+ */
+export function useTerminalFocus() {
+    const [hasFocus, setHasFocus] = useState(true); // Default to focused
+    useEffect(() => {
+        // Set up listener first
+        const handleData = (data) => {
+            const str = data.toString();
+            // Focus gained: ESC[I
+            if (str === '\x1b[I') {
+                setHasFocus(true);
+            }
+            // Focus lost: ESC[O
+            if (str === '\x1b[O') {
+                setHasFocus(false);
+            }
+        };
+        // Listen to stdin data
+        process.stdin.on('data', handleData);
+        // Enable focus reporting AFTER listener is set up
+        // Add a small delay to ensure listener is fully registered
+        const timer = setTimeout(() => {
+            // ESC[?1004h - Enable focus events
+            process.stdout.write('\x1b[?1004h');
+        }, 50);
+        return () => {
+            clearTimeout(timer);
+            // Disable focus reporting on cleanup
+            // ESC[?1004l - Disable focus events
+            process.stdout.write('\x1b[?1004l');
+            process.stdin.off('data', handleData);
+        };
+    }, []);
+    // Helper function to check if input is a focus event
+    const isFocusEvent = (input) => {
+        return input === '\x1b[I' || input === '\x1b[O';
+    };
+    return { hasFocus, isFocusEvent };
+}

package/dist/hooks/useTerminalSize.d.ts

@@ -0,0 +1,4 @@
+export declare function useTerminalSize(): {
+    columns: number;
+    rows: number;
+};

package/dist/hooks/useTerminalSize.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+export function useTerminalSize() {
+    const [size, setSize] = useState({
+        columns: process.stdout.columns || 80,
+        rows: process.stdout.rows || 20,
+    });
+    useEffect(() => {
+        function updateSize() {
+            setSize({
+                columns: process.stdout.columns || 80,
+                rows: process.stdout.rows || 20,
+            });
+        }
+        process.stdout.on('resize', updateSize);
+        return () => {
+            process.stdout.off('resize', updateSize);
+        };
+    }, []);
+    return size;
+}

package/dist/ui/components/ChatInput.js

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect } from 'react';
-import { Box, Text, useStdout } from 'ink';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Box, Text } from 'ink';
 import { cpSlice, cpLen } from '../../utils/textUtils.js';
 import CommandPanel from './CommandPanel.js';
 import FileList from './FileList.js';
@@ -9,12 +9,19 @@ import { useFilePicker } from '../../hooks/useFilePicker.js';
 import { useHistoryNavigation } from '../../hooks/useHistoryNavigation.js';
 import { useClipboard } from '../../hooks/useClipboard.js';
 import { useKeyboardInput } from '../../hooks/useKeyboardInput.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { useTerminalFocus } from '../../hooks/useTerminalFocus.js';
 export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type your message...', disabled = false, chatHistory = [], onHistorySelect, yoloMode = false, contextUsage, snapshotFileCount, }) {
-    const { stdout } = useStdout();
-    const terminalWidth = stdout?.columns || 80;
+    // Use terminal size hook to listen for resize events
+    const { columns: terminalWidth } = useTerminalSize();
+    const prevTerminalWidthRef = useRef(terminalWidth);
+    // Use terminal focus hook to detect focus state
+    const { hasFocus } = useTerminalFocus();
+    // Recalculate viewport dimensions to ensure proper resizing
     const uiOverhead = 8;
+    const viewportWidth = Math.max(40, terminalWidth - uiOverhead);
     const viewport = {
-        width: Math.max(40, terminalWidth - uiOverhead),
+        width: viewportWidth,
         height: 1,
     };
     // Use input buffer hook
@@ -72,6 +79,31 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
         }, 10);
         return () => clearTimeout(timer);
     }, [showFilePicker, forceUpdate]);
+    // Handle terminal width changes with debounce (like gemini-cli)
+    useEffect(() => {
+        // Skip on initial mount
+        if (prevTerminalWidthRef.current === terminalWidth) {
+            prevTerminalWidthRef.current = terminalWidth;
+            return;
+        }
+        prevTerminalWidthRef.current = terminalWidth;
+        // Debounce the re-render to avoid flickering during resize
+        const timer = setTimeout(() => {
+            forceUpdate({});
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [terminalWidth, forceUpdate]);
+    // Render cursor based on focus state
+    const renderCursor = useCallback((char) => {
+        if (hasFocus) {
+            // Focused: solid block cursor
+            return (React.createElement(Text, { backgroundColor: "white", color: "black" }, char));
+        }
+        else {
+            // Unfocused: no cursor, just render the character normally
+            return React.createElement(Text, null, char);
+        }
+    }, [hasFocus]);
     // Render content with cursor and paste placeholders
     const renderContent = useCallback(() => {
         if (buffer.text.length > 0) {
@@ -105,10 +137,10 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                         const afterCursorInPart = cpSlice(part, cursorPos - partStart + 1);
                         return (React.createElement(React.Fragment, { key: partIndex }, isPlaceholder ? (React.createElement(Text, { color: isImagePlaceholder ? 'magenta' : 'cyan', dimColor: true },
                             beforeCursorInPart,
-                            React.createElement(Text, { backgroundColor: "white", color: "black" }, atCursor),
+                            renderCursor(atCursor),
                             afterCursorInPart)) : (React.createElement(React.Fragment, null,
                             beforeCursorInPart,
-                            React.createElement(Text, { backgroundColor: "white", color: "black" }, atCursor),
+                            renderCursor(atCursor),
                             afterCursorInPart))));
                     }
                     else {
@@ -117,27 +149,26 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                 });
                 return (React.createElement(Text, null,
                     elements,
-                    !cursorRendered && (React.createElement(Text, { backgroundColor: "white", color: "black" }, ' '))));
+                    !cursorRendered && renderCursor(' ')));
             }
             else {
                 // 普通文本渲染
+                const charInfo = buffer.getCharAtCursor();
+                const atCursor = charInfo.char === '\n' ? ' ' : charInfo.char;
                 return (React.createElement(Text, null,
                     cpSlice(displayText, 0, cursorPos),
-                    React.createElement(Text, { backgroundColor: "white", color: "black" }, (() => {
-                        const charInfo = buffer.getCharAtCursor();
-                        return charInfo.char === '\n' ? ' ' : charInfo.char;
-                    })()),
+                    renderCursor(atCursor),
                     cpSlice(displayText, cursorPos + 1)));
             }
         }
         else {
             return (React.createElement(React.Fragment, null,
-                React.createElement(Text, { backgroundColor: disabled ? 'gray' : 'white', color: disabled ? 'darkGray' : 'black' }, ' '),
+                renderCursor(' '),
                 React.createElement(Text, { color: disabled ? 'darkGray' : 'gray', dimColor: true }, disabled ? 'Waiting for response...' : placeholder)));
         }
-    }, [buffer, disabled, placeholder]);
-    return (React.createElement(Box, { flexDirection: "column", paddingX: 1, width: "100%", key: `input-${showFilePicker ? 'picker' : 'normal'}` },
-        showHistoryMenu && (React.createElement(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "round", borderColor: "#A9C13E", padding: 1, width: "100%" },
+    }, [buffer, disabled, placeholder, renderCursor]);
+    return (React.createElement(Box, { flexDirection: "column", paddingX: 1, width: terminalWidth },
+        showHistoryMenu && (React.createElement(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "round", borderColor: "#A9C13E", padding: 1, width: terminalWidth - 2 },
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Text, { color: "cyan" }, "Use \u2191\u2193 keys to navigate, press Enter to select:")),
             React.createElement(Box, { flexDirection: "column" },
@@ -160,7 +191,7 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                         }
                         return (React.createElement(Box, { key: message.value },
                             React.createElement(Text, { color: index === historySelectedIndex ? 'green' : 'white', bold: true },
-                                index === historySelectedIndex ? '➣  ' : '  ',
+                                index === historySelectedIndex ? '❯  ' : '  ',
                                 message.label),
                             fileCount > 0 && (React.createElement(Text, { color: "yellow", dimColor: true },
                                 ' ',
@@ -177,11 +208,14 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                         getUserMessages().length - 8,
                         " more items")))))),
         !showHistoryMenu && (React.createElement(React.Fragment, null,
-            React.createElement(Box, { flexDirection: "row", borderStyle: "round", borderColor: "gray", paddingX: 1, paddingY: 0, flexGrow: 1, width: "100%" },
-                React.createElement(Text, { color: "cyan", bold: true },
-                    "\u27A3",
-                    ' '),
-                React.createElement(Box, { flexGrow: 1 }, renderContent())),
+            React.createElement(Box, { flexDirection: "column", width: terminalWidth - 2 },
+                React.createElement(Text, { color: "gray" }, '─'.repeat(terminalWidth - 2)),
+                React.createElement(Box, { flexDirection: "row" },
+                    React.createElement(Text, { color: "cyan", bold: true },
+                        "\u276F",
+                        ' '),
+                    React.createElement(Box, { flexGrow: 1 }, renderContent())),
+                React.createElement(Text, { color: "gray" }, '─'.repeat(terminalWidth - 2))),
             React.createElement(CommandPanel, { commands: getFilteredCommands(), selectedIndex: commandSelectedIndex, query: buffer.getFullText().slice(1), visible: showCommands }),
             React.createElement(Box, null,
                 React.createElement(FileList, { ref: fileListRef, query: fileQuery, selectedIndex: fileSelectedIndex, visible: showFilePicker, maxItems: 10, rootPath: process.cwd(), onFilteredCountChange: handleFilteredCountChange })),

package/dist/ui/components/CommandPanel.js

@@ -39,7 +39,7 @@ const CommandPanel = memo(({ commands, selectedIndex, visible, maxHeight }) => {
                         commands.length > effectiveMaxItems && `(${selectedIndex + 1}/${commands.length})`)),
                 displayedCommands.map((command, index) => (React.createElement(Box, { key: command.name, flexDirection: "column", width: "100%" },
                     React.createElement(Text, { color: index === displayedSelectedIndex ? "green" : "gray", bold: true },
-                        index === displayedSelectedIndex ? "➣ " : "  ",
+                        index === displayedSelectedIndex ? "❯ " : "  ",
                         "/",
                         command.name),
                     React.createElement(Box, { marginLeft: 3 },

package/dist/ui/components/FileList.js

@@ -185,8 +185,8 @@ const FileList = memo(forwardRef(({ query, selectedIndex, visible, maxItems = 10
             React.createElement(Text, { backgroundColor: index === displaySelectedIndex ? '#1E3A8A' : undefined, color: index === displaySelectedIndex
                     ? '#FFFFFF'
                     : file.isDirectory
-                        ? 'cyan'
-                        : 'white' }, file.path)))),
+                        ? 'yellow'
+                        : 'white' }, file.isDirectory ? '◇ ' + file.path : '◆ ' + file.path)))),
         allFilteredFiles.length > effectiveMaxItems && (React.createElement(Box, { marginTop: 1 },
             React.createElement(Text, { color: "gray", dimColor: true },
                 "\u2191\u2193 to scroll \u00B7 ",

package/dist/ui/components/FileRollbackConfirmation.js

@@ -42,7 +42,7 @@ export default function FileRollbackConfirmation({ fileCount, onConfirm }) {
             React.createElement(Text, { color: "gray", dimColor: true }, "Do you want to rollback the files as well?")),
         React.createElement(Box, { flexDirection: "column" }, options.map((option, index) => (React.createElement(Box, { key: index },
             React.createElement(Text, { color: index === selectedIndex ? 'green' : 'white', bold: index === selectedIndex },
-                index === selectedIndex ? '➣  ' : '  ',
+                index === selectedIndex ? '❯  ' : '  ',
                 option.label))))),
         React.createElement(Box, { marginTop: 1 },
             React.createElement(Text, { color: "gray", dimColor: true }, "Use \u2191\u2193 to select, Enter to confirm, ESC to cancel"))));

package/dist/ui/components/Menu.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
+import { resetTerminal } from '../../utils/terminal.js';
 function Menu({ options, onSelect, onSelectionChange, maxHeight }) {
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [scrollOffset, setScrollOffset] = useState(0);
@@ -25,9 +26,7 @@ function Menu({ options, onSelect, onSelectionChange, maxHeight }) {
         }
     }, [selectedIndex, scrollOffset, visibleItemCount]);
     const clearTerminal = useCallback(() => {
-        if (stdout && typeof stdout.write === 'function') {
-            stdout.write('\x1B[3J\x1B[2J\x1B[H');
-        }
+        resetTerminal(stdout);
     }, [stdout]);
     const handleInput = useCallback((_input, key) => {
         if (key.upArrow) {
@@ -65,7 +64,7 @@ function Menu({ options, onSelect, onSelectionChange, maxHeight }) {
             const actualIndex = scrollOffset + index;
             return (React.createElement(Box, { key: option.value },
                 React.createElement(Text, { color: actualIndex === selectedIndex ? 'green' : option.color || 'white', bold: true },
-                    actualIndex === selectedIndex ? '➣ ' : '  ',
+                    actualIndex === selectedIndex ? '❯ ' : '  ',
                     option.label)));
         }),
         hasMoreBelow && (React.createElement(Box, null,

package/dist/ui/pages/ApiConfigScreen.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 type Props = {
     onBack: () => void;
     onSave: () => void;
+    inlineMode?: boolean;
 };
-export default function ApiConfigScreen({ onBack, onSave }: Props): React.JSX.Element;
+export default function ApiConfigScreen({ onBack, onSave, inlineMode }: Props): React.JSX.Element;
 export {};

package/dist/ui/pages/ApiConfigScreen.js

@@ -4,7 +4,7 @@ import Gradient from 'ink-gradient';
 import { Select, Alert } from '@inkjs/ui';
 import TextInput from 'ink-text-input';
 import { getOpenAiConfig, updateOpenAiConfig, validateApiConfig, } from '../../utils/apiConfig.js';
-export default function ApiConfigScreen({ onBack, onSave }) {
+export default function ApiConfigScreen({ onBack, onSave, inlineMode = false }) {
     const [baseUrl, setBaseUrl] = useState('');
     const [apiKey, setApiKey] = useState('');
     const [requestMethod, setRequestMethod] = useState('chat');
@@ -106,15 +106,15 @@ export default function ApiConfigScreen({ onBack, onSave }) {
         }
     });
     return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-        React.createElement(Box, { marginBottom: 2, borderStyle: "double", borderColor: "cyan", paddingX: 2, paddingY: 1 },
+        !inlineMode && (React.createElement(Box, { marginBottom: 2, borderStyle: "double", borderColor: "cyan", paddingX: 2, paddingY: 1 },
             React.createElement(Box, { flexDirection: "column" },
                 React.createElement(Gradient, { name: "rainbow" }, "OpenAI API Configuration"),
-                React.createElement(Text, { color: "gray", dimColor: true }, "Configure your OpenAI API settings"))),
+                React.createElement(Text, { color: "gray", dimColor: true }, "Configure your OpenAI API settings")))),
         React.createElement(Box, { flexDirection: "column", marginBottom: 2 },
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'baseUrl' ? 'green' : 'white' },
-                        currentField === 'baseUrl' ? '➣ ' : '  ',
+                        currentField === 'baseUrl' ? '❯ ' : '  ',
                         "Base URL:"),
                     currentField === 'baseUrl' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(TextInput, { value: baseUrl, onChange: setBaseUrl, placeholder: "https://api.openai.com/v1" }))),
@@ -123,7 +123,7 @@ export default function ApiConfigScreen({ onBack, onSave }) {
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'apiKey' ? 'green' : 'white' },
-                        currentField === 'apiKey' ? '➣ ' : '  ',
+                        currentField === 'apiKey' ? '❯ ' : '  ',
                         "API Key:"),
                     currentField === 'apiKey' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(TextInput, { value: apiKey, onChange: setApiKey, placeholder: "sk-...", mask: "*" }))),
@@ -132,7 +132,7 @@ export default function ApiConfigScreen({ onBack, onSave }) {
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'requestMethod' ? 'green' : 'white' },
-                        currentField === 'requestMethod' ? '➣ ' : '  ',
+                        currentField === 'requestMethod' ? '❯ ' : '  ',
                         "Request Method:"),
                     currentField === 'requestMethod' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Select, { options: requestMethodOptions, defaultValue: requestMethod, onChange: (value) => {
@@ -144,7 +144,7 @@ export default function ApiConfigScreen({ onBack, onSave }) {
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'anthropicBeta' ? 'green' : 'white' },
-                        currentField === 'anthropicBeta' ? '➣ ' : '  ',
+                        currentField === 'anthropicBeta' ? '❯ ' : '  ',
                         "Anthropic Beta (for Claude API):"),
                     React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "gray" },

package/dist/ui/pages/ChatScreen.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Box, Text, useInput, Static, useStdout } from 'ink';
 import Spinner from 'ink-spinner';
 import Gradient from 'ink-gradient';
+import ansiEscapes from 'ansi-escapes';
 import ChatInput from '../components/ChatInput.js';
 import PendingMessages from '../components/PendingMessages.js';
 import MCPInfoScreen from '../components/MCPInfoScreen.js';
@@ -23,6 +24,7 @@ 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 { useTerminalSize } from '../../hooks/useTerminalSize.js';
 import { parseAndValidateFileReferences, createMessageWithFileInstructions, getSystemInfo, } from '../../utils/fileUtils.js';
 import { executeCommand } from '../../utils/commandExecutor.js';
 import { convertSessionMessagesToUI } from '../../utils/sessionConverter.js';
@@ -61,9 +63,10 @@ export default function ChatScreen({}) {
     const [showSessionPanel, setShowSessionPanel] = useState(false);
     const [showMcpPanel, setShowMcpPanel] = useState(false);
     const [shouldIncludeSystemInfo, setShouldIncludeSystemInfo] = useState(true); // Include on first message
+    const { columns: terminalWidth, rows: terminalHeight } = useTerminalSize();
     const { stdout } = useStdout();
-    const terminalHeight = stdout?.rows || 24;
     const workingDirectory = process.cwd();
+    const isInitialMount = useRef(true);
     // Use custom hooks
     const streamingState = useStreamingState();
     const vscodeState = useVSCodeState();
@@ -83,6 +86,21 @@ export default function ChatScreen({}) {
             // Ignore localStorage errors
         }
     }, [yoloMode]);
+    // Clear terminal and remount on terminal width change (like gemini-cli)
+    // Use debounce to avoid flickering during continuous resize
+    useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            return;
+        }
+        const handler = setTimeout(() => {
+            stdout.write(ansiEscapes.clearTerminal);
+            setRemountKey(prev => prev + 1);
+        }, 200); // Wait for resize to stabilize
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [terminalWidth, stdout]);
     // Use tool confirmation hook
     const { pendingToolConfirmation, requestToolConfirmation, isToolAutoApproved, addMultipleToAlwaysApproved, } = useToolConfirmation();
     // Minimum terminal height required for proper rendering
@@ -445,10 +463,10 @@ export default function ChatScreen({}) {
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: "gray", dimColor: true }, "Please resize your terminal window to continue."))));
     }
-    return (React.createElement(Box, { flexDirection: "column", height: "100%", width: "100%" },
+    return (React.createElement(Box, { flexDirection: "column", height: "100%", width: terminalWidth },
         React.createElement(Static, { key: remountKey, items: [
-                React.createElement(Box, { key: "header", paddingX: 1, width: "100%" },
-                    React.createElement(Box, { borderColor: 'cyan', borderStyle: "round", paddingX: 2, paddingY: 1, width: "100%" },
+                React.createElement(Box, { key: "header", paddingX: 1, width: terminalWidth },
+                    React.createElement(Box, { borderColor: 'cyan', borderStyle: "round", paddingX: 2, paddingY: 1, width: terminalWidth - 2 },
                         React.createElement(Box, { flexDirection: "column" },
                             React.createElement(Text, { color: "white", bold: true },
                                 React.createElement(Text, { color: "cyan" }, "\u2746 "),
@@ -483,7 +501,7 @@ export default function ChatScreen({}) {
                             toolStatusColor = 'blue';
                         }
                     }
-                    return (React.createElement(Box, { key: `msg-${index}`, marginBottom: isToolMessage ? 0 : 1, paddingX: 1, flexDirection: "column", width: "100%" },
+                    return (React.createElement(Box, { key: `msg-${index}`, marginBottom: isToolMessage ? 0 : 1, paddingX: 1, flexDirection: "column", width: terminalWidth },
                         React.createElement(Box, null,
                             React.createElement(Text, { color: message.role === 'user'
                                     ? 'green'
@@ -606,14 +624,14 @@ export default function ChatScreen({}) {
             ] }, item => item),
         messages
             .filter(m => m.toolPending)
-            .map((message, index) => (React.createElement(Box, { key: `pending-tool-${index}`, marginBottom: 1, paddingX: 1, width: "100%" },
+            .map((message, index) => (React.createElement(Box, { key: `pending-tool-${index}`, marginBottom: 1, paddingX: 1, width: terminalWidth },
             React.createElement(Text, { color: "yellowBright", bold: true }, "\u2746"),
             React.createElement(Box, { marginLeft: 1, marginBottom: 1, flexDirection: "row" },
                 React.createElement(MarkdownRenderer, { content: message.content || ' ', color: "yellow" }),
                 React.createElement(Box, { marginLeft: 1 },
                     React.createElement(Text, { color: "yellow" },
                         React.createElement(Spinner, { type: "dots" }))))))),
-        (streamingState.isStreaming || isSaving) && !pendingToolConfirmation && (React.createElement(Box, { marginBottom: 1, paddingX: 1, width: "100%" },
+        (streamingState.isStreaming || isSaving) && !pendingToolConfirmation && (React.createElement(Box, { marginBottom: 1, paddingX: 1, width: terminalWidth },
             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 ? (
@@ -653,15 +671,15 @@ export default function ChatScreen({}) {
                     ' ',
                     "tokens"),
                 ")")))) : (React.createElement(Text, { color: "gray", dimColor: true }, "Create the first dialogue record file..."))))),
-        React.createElement(Box, { paddingX: 1, width: "100%" },
+        React.createElement(Box, { paddingX: 1, width: terminalWidth },
             React.createElement(PendingMessages, { pendingMessages: pendingMessages })),
         pendingToolConfirmation && (React.createElement(ToolConfirmation, { toolName: pendingToolConfirmation.batchToolNames ||
                 pendingToolConfirmation.tool.function.name, toolArguments: !pendingToolConfirmation.allTools
                 ? pendingToolConfirmation.tool.function.arguments
                 : undefined, allTools: pendingToolConfirmation.allTools, onConfirm: pendingToolConfirmation.resolve })),
-        showSessionPanel && (React.createElement(Box, { paddingX: 1, width: "100%" },
+        showSessionPanel && (React.createElement(Box, { paddingX: 1, width: terminalWidth },
             React.createElement(SessionListPanel, { onSelectSession: handleSessionPanelSelect, onClose: () => setShowSessionPanel(false) }))),
-        showMcpPanel && (React.createElement(Box, { paddingX: 1, flexDirection: "column", width: "100%" },
+        showMcpPanel && (React.createElement(Box, { paddingX: 1, flexDirection: "column", width: terminalWidth },
             React.createElement(MCPInfoPanel, null),
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: "gray", dimColor: true }, "Press ESC to close")))),

package/dist/ui/pages/ModelConfigScreen.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 type Props = {
     onBack: () => void;
     onSave: () => void;
+    inlineMode?: boolean;
 };
-export default function ModelConfigScreen({ onBack, onSave }: Props): React.JSX.Element;
+export default function ModelConfigScreen({ onBack, onSave, inlineMode }: Props): React.JSX.Element;
 export {};

package/dist/ui/pages/ModelConfigScreen.js

@@ -4,7 +4,7 @@ import Gradient from 'ink-gradient';
 import { Select, Alert } from '@inkjs/ui';
 import { fetchAvailableModels, filterModels } from '../../api/models.js';
 import { getOpenAiConfig, updateOpenAiConfig, } from '../../utils/apiConfig.js';
-export default function ModelConfigScreen({ onBack, onSave }) {
+export default function ModelConfigScreen({ onBack, onSave, inlineMode = false }) {
     const [advancedModel, setAdvancedModel] = useState('');
     const [basicModel, setBasicModel] = useState('');
     const [maxContextTokens, setMaxContextTokens] = useState(4000);
@@ -340,29 +340,28 @@ export default function ModelConfigScreen({ onBack, onSave }) {
     });
     if (baseUrlMissing) {
         return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: "cyan", paddingX: 1, paddingY: 0 },
+            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: "cyan", paddingX: 1, paddingY: 0 },
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Gradient, { name: 'rainbow' }, "Model Configuration"),
-                    React.createElement(Text, { color: "gray", dimColor: true }, "Configure AI models for different tasks"))),
+                    React.createElement(Text, { color: "gray", dimColor: true }, "Configure AI models for different tasks")))),
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Alert, { variant: "error" }, "Base URL not configured. Please configure API settings first before setting up models.")),
             React.createElement(Box, { flexDirection: "column" },
                 React.createElement(Alert, { variant: "info" }, "Press Esc to return to main menu"))));
     }
     if (loading) {
-        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            React.createElement(Box, { marginBottom: 1, borderStyle: "double", paddingX: 1, paddingY: 0 },
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Gradient, { name: "rainbow" }, "Model Configuration"),
-                    React.createElement(Text, { color: "gray", dimColor: true }, "Loading available models...")))));
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 }, !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", paddingX: 1, paddingY: 0 },
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Gradient, { name: "rainbow" }, "Model Configuration"),
+                React.createElement(Text, { color: "gray", dimColor: true }, "Loading available models..."))))));
     }
     // 手动输入模式的界面
     if (manualInputMode) {
         return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: "cyan", paddingX: 1, paddingY: 0 },
+            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: "cyan", paddingX: 1, paddingY: 0 },
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Gradient, { name: 'rainbow' }, "Manual Input Model"),
-                    React.createElement(Text, { color: "gray", dimColor: true }, "Enter model name manually"))),
+                    React.createElement(Text, { color: "gray", dimColor: true }, "Enter model name manually")))),
             React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
                 React.createElement(Text, { color: "cyan" },
                     currentField === 'advancedModel' ? 'Advanced Model' : 'Basic Model',
@@ -376,91 +375,91 @@ export default function ModelConfigScreen({ onBack, onSave }) {
                 React.createElement(Alert, { variant: "info" }, "Press Enter to confirm, Esc to cancel"))));
     }
     return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-        React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: "cyan", paddingX: 1, paddingY: 0 },
+        !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: "cyan", paddingX: 1, paddingY: 0 },
             React.createElement(Box, { flexDirection: "column" },
                 React.createElement(Gradient, { name: 'rainbow' }, "Model Configuration"),
-                React.createElement(Text, { color: "gray", dimColor: true }, "Configure AI models for different tasks"))),
+                React.createElement(Text, { color: "gray", dimColor: true }, "Configure AI models for different tasks")))),
         React.createElement(Box, { flexDirection: "column" },
             React.createElement(Box, null,
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'advancedModel' ? 'green' : 'white' },
-                        currentField === 'advancedModel' ? '➣ ' : '  ',
+                        currentField === 'advancedModel' ? '❯ ' : '  ',
                         "Advanced Model (Main Work):"),
-                    currentField === 'advancedModel' && isEditing && (React.createElement(Box, { marginLeft: 2 }, loading ? (React.createElement(Text, { color: "yellow" }, "Loading models...")) : (React.createElement(Box, { flexDirection: "column" },
+                    currentField === 'advancedModel' && isEditing && (React.createElement(Box, { marginLeft: 3 }, loading ? (React.createElement(Text, { color: "yellow" }, "Loading models...")) : (React.createElement(Box, { flexDirection: "column" },
                         searchTerm && (React.createElement(Text, { color: "cyan" },
                             "Filter: ",
                             searchTerm)),
                         React.createElement(Select, { options: getCurrentOptions(), defaultValue: getCurrentValue(), onChange: handleModelChange }))))),
-                    (!isEditing || currentField !== 'advancedModel') && (React.createElement(Box, { marginLeft: 2 },
+                    (!isEditing || currentField !== 'advancedModel') && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "gray" }, advancedModel || 'Not set'))))),
             React.createElement(Box, null,
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'basicModel' ? 'green' : 'white' },
-                        currentField === 'basicModel' ? '➣ ' : '  ',
+                        currentField === 'basicModel' ? '❯ ' : '  ',
                         "Basic Model (Summary & Analysis):"),
-                    currentField === 'basicModel' && isEditing && (React.createElement(Box, { marginLeft: 2 }, loading ? (React.createElement(Text, { color: "yellow" }, "Loading models...")) : (React.createElement(Box, { flexDirection: "column" },
+                    currentField === 'basicModel' && isEditing && (React.createElement(Box, { marginLeft: 3 }, loading ? (React.createElement(Text, { color: "yellow" }, "Loading models...")) : (React.createElement(Box, { flexDirection: "column" },
                         searchTerm && (React.createElement(Text, { color: "cyan" },
                             "Filter: ",
                             searchTerm)),
                         React.createElement(Select, { options: getCurrentOptions(), defaultValue: getCurrentValue(), onChange: handleModelChange }))))),
-                    (!isEditing || currentField !== 'basicModel') && (React.createElement(Box, { marginLeft: 2 },
+                    (!isEditing || currentField !== 'basicModel') && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "gray" }, basicModel || 'Not set'))))),
             React.createElement(Box, null,
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'maxContextTokens' ? 'green' : 'white' },
-                        currentField === 'maxContextTokens' ? '➣ ' : '  ',
+                        currentField === 'maxContextTokens' ? '❯ ' : '  ',
                         "Max Context Tokens (Auto-compress when reached):"),
-                    currentField === 'maxContextTokens' && isEditing && (React.createElement(Box, { marginLeft: 2 },
+                    currentField === 'maxContextTokens' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "cyan" },
                             "Enter value: ",
                             maxContextTokens))),
-                    (!isEditing || currentField !== 'maxContextTokens') && (React.createElement(Box, { marginLeft: 2 },
+                    (!isEditing || currentField !== 'maxContextTokens') && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "gray" }, maxContextTokens))))),
             React.createElement(Box, null,
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'maxTokens' ? 'green' : 'white' },
-                        currentField === 'maxTokens' ? '➣ ' : '  ',
+                        currentField === 'maxTokens' ? '❯ ' : '  ',
                         "Max Tokens (Max tokens for single response):"),
-                    currentField === 'maxTokens' && isEditing && (React.createElement(Box, { marginLeft: 2 },
+                    currentField === 'maxTokens' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "cyan" },
                             "Enter value: ",
                             maxTokens))),
-                    (!isEditing || currentField !== 'maxTokens') && (React.createElement(Box, { marginLeft: 2 },
+                    (!isEditing || currentField !== 'maxTokens') && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "gray" }, maxTokens))))),
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: "cyan", bold: true }, "Compact Model (Context Compression):")),
             React.createElement(Box, null,
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'compactBaseUrl' ? 'green' : 'white' },
-                        currentField === 'compactBaseUrl' ? '➣ ' : '  ',
+                        currentField === 'compactBaseUrl' ? '❯ ' : '  ',
                         "Base URL:"),
-                    currentField === 'compactBaseUrl' && isEditing && (React.createElement(Box, { marginLeft: 2 },
+                    currentField === 'compactBaseUrl' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "cyan" },
                             compactBaseUrl,
                             React.createElement(Text, { color: "white" }, "_")))),
-                    (!isEditing || currentField !== 'compactBaseUrl') && (React.createElement(Box, { marginLeft: 2 },
+                    (!isEditing || currentField !== 'compactBaseUrl') && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "gray" }, compactBaseUrl || 'Not set'))))),
             React.createElement(Box, null,
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'compactApiKey' ? 'green' : 'white' },
-                        currentField === 'compactApiKey' ? '➣ ' : '  ',
+                        currentField === 'compactApiKey' ? '❯ ' : '  ',
                         "API Key:"),
-                    currentField === 'compactApiKey' && isEditing && (React.createElement(Box, { marginLeft: 2 },
+                    currentField === 'compactApiKey' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "cyan" },
                             compactApiKey.replace(/./g, '*'),
                             React.createElement(Text, { color: "white" }, "_")))),
-                    (!isEditing || currentField !== 'compactApiKey') && (React.createElement(Box, { marginLeft: 2 },
+                    (!isEditing || currentField !== 'compactApiKey') && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "gray" }, compactApiKey ? compactApiKey.replace(/./g, '*') : 'Not set'))))),
             React.createElement(Box, null,
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: currentField === 'compactModelName' ? 'green' : 'white' },
-                        currentField === 'compactModelName' ? '➣ ' : '  ',
+                        currentField === 'compactModelName' ? '❯ ' : '  ',
                         "Model Name:"),
-                    currentField === 'compactModelName' && isEditing && (React.createElement(Box, { marginLeft: 2 },
+                    currentField === 'compactModelName' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "cyan" },
                             compactModelName,
                             React.createElement(Text, { color: "white" }, "_")))),
-                    (!isEditing || currentField !== 'compactModelName') && (React.createElement(Box, { marginLeft: 2 },
+                    (!isEditing || currentField !== 'compactModelName') && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(Text, { color: "gray" }, compactModelName || 'Not set')))))),
         React.createElement(Box, { flexDirection: "column", marginTop: 1 }, isEditing ? (React.createElement(React.Fragment, null,
             React.createElement(Alert, { variant: "info" }, "Editing mode: Type to filter models, \u2191\u2193 to select, Enter to confirm"))) : (React.createElement(React.Fragment, null,

package/dist/ui/pages/WelcomeScreen.js

@@ -1,16 +1,25 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import { Box, Text } from 'ink';
+import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { Box, Text, useStdout, Static } from 'ink';
 import { Alert } from '@inkjs/ui';
 import Gradient from 'ink-gradient';
+import ansiEscapes from 'ansi-escapes';
 import Menu from '../components/Menu.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import ApiConfigScreen from './ApiConfigScreen.js';
+import ModelConfigScreen from './ModelConfigScreen.js';
 export default function WelcomeScreen({ version = '1.0.0', onMenuSelect, }) {
     const [infoText, setInfoText] = useState('Start a new chat conversation');
+    const [inlineView, setInlineView] = useState('menu');
+    const { columns: terminalWidth } = useTerminalSize();
+    const { stdout } = useStdout();
+    const isInitialMount = useRef(true);
+    const [remountKey, setRemountKey] = useState(0);
     const menuOptions = useMemo(() => [
         {
             label: 'Start',
             value: 'chat',
             infoText: 'Start a new chat conversation',
-            clearTerminal: true
+            clearTerminal: true,
         },
         {
             label: 'API Settings',
@@ -42,22 +51,63 @@ export default function WelcomeScreen({ version = '1.0.0', onMenuSelect, }) {
             value: 'exit',
             color: 'rgb(232, 131, 136)',
             infoText: 'Exit the application',
-        }
+        },
     ], []);
     const handleSelectionChange = useCallback((newInfoText) => {
         setInfoText(newInfoText);
     }, []);
-    return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-        React.createElement(Box, { borderStyle: "double", paddingX: 1, paddingY: 1, borderColor: 'cyan' },
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: "white", bold: true },
-                    React.createElement(Text, { color: "cyan" }, "\u2746 "),
-                    React.createElement(Gradient, { name: "rainbow" }, "SNOW AI CLI")),
-                React.createElement(Text, { color: "gray", dimColor: true }, "Intelligent Command Line Assistant"),
-                React.createElement(Text, { color: "magenta", dimColor: true },
-                    "Version ",
-                    version),
-                onMenuSelect && (React.createElement(Box, null,
-                    React.createElement(Menu, { options: menuOptions, onSelect: onMenuSelect, onSelectionChange: handleSelectionChange }))),
-                React.createElement(Alert, { variant: 'info' }, infoText)))));
+    const handleInlineMenuSelect = useCallback((value) => {
+        // Handle inline views (config, models) or pass through to parent
+        if (value === 'config') {
+            setInlineView('api-config');
+        }
+        else if (value === 'models') {
+            setInlineView('model-config');
+        }
+        else {
+            // Pass through to parent for other actions (chat, exit, etc.)
+            onMenuSelect?.(value);
+        }
+    }, [onMenuSelect]);
+    const handleBackToMenu = useCallback(() => {
+        setInlineView('menu');
+    }, []);
+    const handleConfigSave = useCallback(() => {
+        setInlineView('menu');
+    }, []);
+    // Clear terminal and re-render on terminal width change
+    // Use debounce to avoid flickering during continuous resize
+    useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            return;
+        }
+        const handler = setTimeout(() => {
+            stdout.write(ansiEscapes.clearTerminal);
+            setRemountKey(prev => prev + 1); // Force re-render
+        }, 0); // Wait for resize to stabilize
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [terminalWidth, stdout]);
+    return (React.createElement(Box, { flexDirection: "column", width: terminalWidth },
+        React.createElement(Static, { key: remountKey, items: [
+                React.createElement(Box, { key: "welcome-header", flexDirection: "row", paddingLeft: 2, paddingTop: 1, paddingBottom: 1, width: terminalWidth },
+                    React.createElement(Box, { flexDirection: "column", justifyContent: "center" },
+                        React.createElement(Text, { bold: true },
+                            React.createElement(Gradient, { name: "rainbow" }, "\u2746 SNOW AI CLI")),
+                        React.createElement(Text, { color: "gray", dimColor: true },
+                            "v",
+                            version,
+                            " \u2022 Intelligent Command Line Assistant"))),
+            ] }, item => item),
+        onMenuSelect && inlineView === 'menu' && (React.createElement(Box, { paddingX: 1 },
+            React.createElement(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 1 },
+                React.createElement(Menu, { options: menuOptions, onSelect: handleInlineMenuSelect, onSelectionChange: handleSelectionChange })))),
+        inlineView === 'menu' && (React.createElement(Box, { paddingX: 1 },
+            React.createElement(Alert, { variant: "info" }, infoText))),
+        inlineView === 'api-config' && (React.createElement(Box, { paddingX: 1 },
+            React.createElement(ApiConfigScreen, { onBack: handleBackToMenu, onSave: handleConfigSave, inlineMode: true }))),
+        inlineView === 'model-config' && (React.createElement(Box, { paddingX: 1 },
+            React.createElement(ModelConfigScreen, { onBack: handleBackToMenu, onSave: handleConfigSave, inlineMode: true })))));
 }

package/dist/utils/terminal.d.ts

@@ -0,0 +1,5 @@
+type WritableStreamLike = Pick<NodeJS.WriteStream, 'write'> | {
+    write: (data: string) => unknown;
+};
+export declare function resetTerminal(stream?: WritableStreamLike): void;
+export {};

package/dist/utils/terminal.js

@@ -0,0 +1,12 @@
+export function resetTerminal(stream) {
+    const target = stream ?? process.stdout;
+    if (!target || typeof target.write !== 'function') {
+        return;
+    }
+    // RIS (Reset to Initial State) clears scrollback and resets terminal modes
+    target.write('\x1bc');
+    target.write('\x1B[3J\x1B[2J\x1B[H');
+    // DO NOT re-enable focus reporting here
+    // Let useTerminalFocus handle it when ChatScreen mounts
+    // This avoids the race condition where focus event arrives before listener is ready
+}

package/dist/utils/textBuffer.js

@@ -8,6 +8,10 @@ function sanitizeInput(str) {
         .replace(/\r\n/g, '\n') // Normalize line endings
         .replace(/\r/g, '\n') // Convert remaining \r to \n
         .replace(/\t/g, '  ') // Convert tabs to spaces
+        // Remove focus events - only the complete escape sequences
+        // ESC[I and ESC[O are focus events, don't confuse with user input like "[I"
+        .replace(/\x1b\[I/g, '')
+        .replace(/\x1b\[O/g, '')
         // Remove control characters except newlines
         .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, '');
 }
@@ -344,9 +348,13 @@ export class TextBuffer {
      * Update the viewport dimensions, useful for terminal resize handling.
      */
     updateViewport(viewport) {
+        const needsRecalculation = this.viewport.width !== viewport.width ||
+            this.viewport.height !== viewport.height;
         this.viewport = viewport;
-        this.recalculateVisualState();
-        this.scheduleUpdate();
+        if (needsRecalculation) {
+            this.recalculateVisualState();
+            this.scheduleUpdate();
+        }
     }
     /**
      * Get the character and its visual info at cursor position for proper rendering.

package/package.json

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