snow-ai 0.4.8 → 0.4.10

package/dist/ui/components/FileList.js

@@ -3,7 +3,9 @@ import { Box, Text } from 'ink';
 import fs from 'fs';
 import path from 'path';
 import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 const FileList = memo(forwardRef(({ query, selectedIndex, visible, maxItems = 10, rootPath = process.cwd(), onFilteredCountChange, searchMode = 'file', }, ref) => {
+    const { theme } = useTheme();
     const [files, setFiles] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     // Get terminal size for dynamic content display
@@ -325,7 +327,7 @@ const FileList = memo(forwardRef(({ query, selectedIndex, visible, maxItems = 10
     }
     if (filteredFiles.length === 0) {
         return (React.createElement(Box, { paddingX: 1, marginTop: 1 },
-            React.createElement(Text, { color: "gray", dimColor: true }, "No files found")));
+            React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, "No files found")));
     }
     return (React.createElement(Box, { paddingX: 1, marginTop: 1, flexDirection: "column" },
         React.createElement(Box, { marginBottom: 1 },
@@ -335,20 +337,20 @@ const FileList = memo(forwardRef(({ query, selectedIndex, visible, maxItems = 10
                 allFilteredFiles.length > effectiveMaxItems &&
                     `(${selectedIndex + 1}/${allFilteredFiles.length})`)),
         filteredFiles.map((file, index) => (React.createElement(Box, { key: `${file.path}-${file.lineNumber || 0}`, flexDirection: "column" },
-            React.createElement(Text, { backgroundColor: index === displaySelectedIndex ? '#1E3A8A' : undefined, color: index === displaySelectedIndex
-                    ? '#FFFFFF'
+            React.createElement(Text, { backgroundColor: index === displaySelectedIndex ? theme.colors.menuSelected : undefined, color: index === displaySelectedIndex
+                    ? theme.colors.menuNormal
                     : file.isDirectory
-                        ? 'yellow'
+                        ? theme.colors.warning
                         : 'white' }, searchMode === 'content' && file.lineNumber !== undefined
                 ? `${file.path}:${file.lineNumber}`
                 : file.isDirectory
                     ? '◇ ' + file.path
                     : '◆ ' + file.path),
-            searchMode === 'content' && file.lineContent && (React.createElement(Text, { backgroundColor: index === displaySelectedIndex ? '#1E3A8A' : undefined, color: index === displaySelectedIndex ? '#D1D5DB' : 'gray', dimColor: true },
+            searchMode === 'content' && file.lineContent && (React.createElement(Text, { backgroundColor: index === displaySelectedIndex ? theme.colors.menuSelected : undefined, color: index === displaySelectedIndex ? theme.colors.menuSecondary : theme.colors.menuSecondary, dimColor: true },
                 '  ',
                 file.lineContent))))),
         allFilteredFiles.length > effectiveMaxItems && (React.createElement(Box, { marginTop: 1 },
-            React.createElement(Text, { color: "gray", dimColor: true },
+            React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                 "\u2191\u2193 to scroll \u00B7 ",
                 allFilteredFiles.length - effectiveMaxItems,
                 ' ',

package/dist/ui/components/Menu.d.ts

@@ -9,7 +9,7 @@ type MenuOption = {
 type Props = {
     options: MenuOption[];
     onSelect: (value: string) => void;
-    onSelectionChange?: (infoText: string) => void;
+    onSelectionChange?: (infoText: string, value: string) => void;
     maxHeight?: number;
 };
 declare function Menu({ options, onSelect, onSelectionChange, maxHeight }: Props): React.JSX.Element;

package/dist/ui/components/Menu.js

@@ -2,11 +2,13 @@ import React, { useState, useCallback } from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
 import { resetTerminal } from '../../utils/terminal.js';
 import { useI18n } from '../../i18n/index.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 function Menu({ options, onSelect, onSelectionChange, maxHeight }) {
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [scrollOffset, setScrollOffset] = useState(0);
     const { stdout } = useStdout();
     const { t } = useI18n();
+    const { theme } = useTheme();
     // Calculate available height
     const terminalHeight = stdout?.rows || 24;
     const headerHeight = 8; // Space for header, borders, etc.
@@ -15,7 +17,7 @@ function Menu({ options, onSelect, onSelectionChange, maxHeight }) {
     React.useEffect(() => {
         const currentOption = options[selectedIndex];
         if (onSelectionChange && currentOption?.infoText) {
-            onSelectionChange(currentOption.infoText);
+            onSelectionChange(currentOption.infoText, currentOption.value);
         }
     }, [selectedIndex, options, onSelectionChange]);
     // Auto-scroll to keep selected item visible
@@ -56,9 +58,9 @@ function Menu({ options, onSelect, onSelectionChange, maxHeight }) {
     const moreBelowCount = options.length - (scrollOffset + visibleItemCount);
     return (React.createElement(Box, { flexDirection: "column", width: '100%', padding: 1 },
         React.createElement(Box, { marginBottom: 1 },
-            React.createElement(Text, { color: "cyan" }, t.menu.navigate)),
+            React.createElement(Text, { color: theme.colors.menuInfo }, t.menu.navigate)),
         hasMoreAbove && (React.createElement(Box, null,
-            React.createElement(Text, { color: "gray", dimColor: true },
+            React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                 "\u2191 +",
                 moreAboveCount,
                 " more above"))),
@@ -66,13 +68,13 @@ 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 },
+                        ? theme.colors.menuSelected
+                        : option.color || theme.colors.menuNormal, bold: true },
                     actualIndex === selectedIndex ? '❯ ' : '  ',
                     option.label)));
         }),
         hasMoreBelow && (React.createElement(Box, null,
-            React.createElement(Text, { color: "gray", dimColor: true },
+            React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                 "\u2193 +",
                 moreBelowCount,
                 " more below")))));

package/dist/ui/components/PendingMessages.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Box, Text } from 'ink';
+import { useTheme } from '../contexts/ThemeContext.js';
 export default function PendingMessages({ pendingMessages }) {
+    const { theme } = useTheme();
     if (pendingMessages.length === 0) {
         return null;
     }
-    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1 },
-        React.createElement(Text, { color: "yellow", bold: true },
+    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.warning, paddingX: 1 },
+        React.createElement(Text, { color: theme.colors.warning, bold: true },
             "\u2B11 Pending Messages (",
             pendingMessages.length,
             ")"),
@@ -15,13 +17,13 @@ export default function PendingMessages({ pendingMessages }) {
                     index + 1,
                     "."),
                 React.createElement(Box, { marginLeft: 1 },
-                    React.createElement(Text, { color: "gray" }, message.text.length > 60 ? `${message.text.substring(0, 60)}...` : message.text))),
+                    React.createElement(Text, { color: theme.colors.menuSecondary }, message.text.length > 60 ? `${message.text.substring(0, 60)}...` : message.text))),
             message.images && message.images.length > 0 && (React.createElement(Box, { marginLeft: 3 },
-                React.createElement(Text, { color: "gray", dimColor: true },
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                     "\u2514\u2500 ",
                     message.images.length,
                     " image",
                     message.images.length > 1 ? 's' : '',
                     " attached")))))),
-        React.createElement(Text, { color: "yellow", dimColor: true }, "Will be sent after tool execution completes")));
+        React.createElement(Text, { color: theme.colors.warning, dimColor: true }, "Will be sent after tool execution completes")));
 }

package/dist/ui/components/TodoPickerPanel.js

@@ -1,7 +1,9 @@
 import React, { memo, useMemo } from 'react';
 import { Box, Text } from 'ink';
 import { Alert } from '@inkjs/ui';
+import { useTheme } from '../contexts/ThemeContext.js';
 const TodoPickerPanel = memo(({ todos, selectedIndex, selectedTodos, visible, maxHeight, isLoading = false, searchQuery = '', totalCount = 0, }) => {
+    const { theme } = useTheme();
     // Fixed maximum display items to prevent rendering issues
     const MAX_DISPLAY_ITEMS = 5;
     const effectiveMaxItems = maxHeight
@@ -39,7 +41,7 @@ const TodoPickerPanel = memo(({ todos, selectedIndex, selectedTodos, visible, ma
             React.createElement(Box, { width: "100%" },
                 React.createElement(Box, { flexDirection: "column", width: "100%" },
                     React.createElement(Box, null,
-                        React.createElement(Text, { color: "yellow", bold: true }, "TODO Selection")),
+                        React.createElement(Text, { color: theme.colors.warning, bold: true }, "TODO Selection")),
                     React.createElement(Box, { marginTop: 1 },
                         React.createElement(Alert, { variant: "info" }, "Scanning project for TODO comments..."))))));
     }
@@ -49,7 +51,7 @@ const TodoPickerPanel = memo(({ todos, selectedIndex, selectedTodos, visible, ma
             React.createElement(Box, { width: "100%" },
                 React.createElement(Box, { flexDirection: "column", width: "100%" },
                     React.createElement(Box, null,
-                        React.createElement(Text, { color: "yellow", bold: true }, "TODO Selection")),
+                        React.createElement(Text, { color: theme.colors.warning, bold: true }, "TODO Selection")),
                     React.createElement(Box, { marginTop: 1 },
                         React.createElement(Alert, { variant: "info" }, "No TODO comments found in the project"))))));
     }
@@ -59,7 +61,7 @@ const TodoPickerPanel = memo(({ todos, selectedIndex, selectedTodos, visible, ma
             React.createElement(Box, { width: "100%" },
                 React.createElement(Box, { flexDirection: "column", width: "100%" },
                     React.createElement(Box, null,
-                        React.createElement(Text, { color: "yellow", bold: true }, "TODO Selection")),
+                        React.createElement(Text, { color: theme.colors.warning, bold: true }, "TODO Selection")),
                     React.createElement(Box, { marginTop: 1 },
                         React.createElement(Alert, { variant: "warning" },
                             "No TODOs match \"",
@@ -68,13 +70,13 @@ const TodoPickerPanel = memo(({ todos, selectedIndex, selectedTodos, visible, ma
                             totalCount,
                             ")")),
                     React.createElement(Box, { marginTop: 1 },
-                        React.createElement(Text, { color: "gray", dimColor: true }, "Type to filter \u00B7 Backspace to clear search"))))));
+                        React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, "Type to filter \u00B7 Backspace to clear search"))))));
     }
     return (React.createElement(Box, { flexDirection: "column" },
         React.createElement(Box, { width: "100%" },
             React.createElement(Box, { flexDirection: "column", width: "100%" },
                 React.createElement(Box, null,
-                    React.createElement(Text, { color: "yellow", bold: true },
+                    React.createElement(Text, { color: theme.colors.warning, bold: true },
                         "Select TODOs",
                         ' ',
                         todos.length > effectiveMaxItems &&
@@ -84,14 +86,14 @@ const TodoPickerPanel = memo(({ todos, selectedIndex, selectedTodos, visible, ma
                             totalCount > todos.length &&
                             ` (${todos.length}/${totalCount})`)),
                 React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, { color: "gray", dimColor: true }, searchQuery
+                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, searchQuery
                         ? 'Type to filter · Backspace to clear · Space: toggle · Enter: confirm'
                         : 'Type to search · Space: toggle · Enter: confirm · Esc: cancel')),
                 displayedTodos.map((todo, index) => {
                     const isSelected = index === displayedSelectedIndex;
                     const isChecked = selectedTodos.has(todo.id);
                     return (React.createElement(Box, { key: todo.id, flexDirection: "column", width: "100%" },
-                        React.createElement(Text, { color: isSelected ? 'green' : 'gray', bold: true },
+                        React.createElement(Text, { color: isSelected ? theme.colors.success : theme.colors.menuSecondary, bold: true },
                             isSelected ? '❯ ' : '  ',
                             isChecked ? '[✓]' : '[ ]',
                             " ",
@@ -99,17 +101,17 @@ const TodoPickerPanel = memo(({ todos, selectedIndex, selectedTodos, visible, ma
                             ":",
                             todo.line),
                         React.createElement(Box, { marginLeft: 5 },
-                            React.createElement(Text, { color: isSelected ? 'green' : 'gray', dimColor: !isSelected },
+                            React.createElement(Text, { color: isSelected ? theme.colors.success : theme.colors.menuSecondary, dimColor: !isSelected },
                                 "\u2514\u2500 ",
                                 todo.content))));
                 }),
                 todos.length > effectiveMaxItems && (React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, { color: "gray", dimColor: true },
+                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                         "\u2191\u2193 to scroll \u00B7 ",
                         todos.length - effectiveMaxItems,
                         " more hidden"))),
                 selectedTodos.size > 0 && (React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, { color: "cyan" },
+                    React.createElement(Text, { color: theme.colors.menuInfo },
                         selectedTodos.size,
                         " TODO(s) selected")))))));
 });

package/dist/ui/components/TodoTree.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Box, Text } from 'ink';
+import { useTheme } from '../contexts/ThemeContext.js';
 /**
  * TODO Tree 组件 - 显示带复选框的任务树
  */
 export default function TodoTree({ todos }) {
+    const { theme } = useTheme();
     if (todos.length === 0) {
         return null;
     }
@@ -30,9 +32,9 @@ export default function TodoTree({ todos }) {
     const getStatusColor = (status) => {
         switch (status) {
             case 'completed':
-                return 'green';
+                return theme.colors.success;
             case 'pending':
-                return 'gray';
+                return theme.colors.menuSecondary;
         }
     };
     const renderTodo = (todo, depth = 0) => {
@@ -49,10 +51,10 @@ export default function TodoTree({ todos }) {
                     todo.content)),
             children.map(child => renderTodo(child, depth + 1))));
     };
-    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, marginBottom: 1 },
+    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.menuInfo, paddingX: 1, marginBottom: 1 },
         React.createElement(Box, { marginBottom: 0 },
-            React.createElement(Text, { bold: true, color: "cyan" }, "TODO List")),
+            React.createElement(Text, { bold: true, color: theme.colors.menuInfo }, "TODO List")),
         rootTodos.map(todo => renderTodo(todo)),
         React.createElement(Box, { marginTop: 0 },
-            React.createElement(Text, { dimColor: true, color: "gray" }, "[ ] Pending \u00B7 [\u2713] Completed"))));
+            React.createElement(Text, { dimColor: true, color: theme.colors.menuSecondary }, "[ ] Pending \u00B7 [\u2713] Completed"))));
 }

package/dist/ui/components/ToolConfirmation.js

@@ -3,6 +3,7 @@ import { Box, Text } from 'ink';
 import TextInput from 'ink-text-input';
 import SelectInput from 'ink-select-input';
 import { isSensitiveCommand } from '../../utils/sensitiveCommandManager.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 // Helper function to format argument values with truncation
 function formatArgumentValue(value, maxLength = 100) {
     if (value === null || value === undefined) {
@@ -41,6 +42,7 @@ function formatArgumentsAsTree(args, toolName) {
     }));
 }
 export default function ToolConfirmation({ toolName, toolArguments, allTools, onConfirm, }) {
+    const { theme } = useTheme();
     const [hasSelected, setHasSelected] = useState(false);
     const [showRejectInput, setShowRejectInput] = useState(false);
     const [rejectReason, setRejectReason] = useState('');
@@ -135,18 +137,18 @@ export default function ToolConfirmation({ toolName, toolArguments, allTools, on
             onConfirm({ type: 'reject_with_reply', reason: rejectReason.trim() });
         }
     };
-    return (React.createElement(Box, { flexDirection: "column", marginX: 1, marginY: 1, borderStyle: 'round', borderColor: 'yellow', paddingX: 1 },
+    return (React.createElement(Box, { flexDirection: "column", marginX: 1, marginY: 1, borderStyle: 'round', borderColor: theme.colors.warning, paddingX: 1 },
         React.createElement(Box, { marginBottom: 1 },
-            React.createElement(Text, { bold: true, color: "yellow" }, "[Tool Confirmation]")),
+            React.createElement(Text, { bold: true, color: theme.colors.warning }, "[Tool Confirmation]")),
         !formattedAllTools && (React.createElement(React.Fragment, null,
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Text, null,
                     "Tool:",
                     ' ',
-                    React.createElement(Text, { bold: true, color: "cyan" }, toolName))),
+                    React.createElement(Text, { bold: true, color: theme.colors.menuInfo }, toolName))),
             sensitiveCommandCheck.isSensitive && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
                 React.createElement(Box, { marginBottom: 1 },
-                    React.createElement(Text, { bold: true, color: "red" }, "SENSITIVE COMMAND DETECTED")),
+                    React.createElement(Text, { bold: true, color: theme.colors.error }, "SENSITIVE COMMAND DETECTED")),
                 React.createElement(Box, { flexDirection: "column", gap: 0 },
                     React.createElement(Box, null,
                         React.createElement(Text, { dimColor: true }, "Pattern: "),
@@ -155,11 +157,11 @@ export default function ToolConfirmation({ toolName, toolArguments, allTools, on
                         React.createElement(Text, { dimColor: true }, "Reason: "),
                         React.createElement(Text, { color: "white" }, sensitiveCommandCheck.matchedCommand?.description))),
                 React.createElement(Box, { marginTop: 1, paddingX: 1, paddingY: 0 },
-                    React.createElement(Text, { color: "yellow", italic: true }, "This command requires confirmation even in YOLO/Always-Approved mode")))),
+                    React.createElement(Text, { color: theme.colors.warning, italic: true }, "This command requires confirmation even in YOLO/Always-Approved mode")))),
             formattedArgs && formattedArgs.length > 0 && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
                 React.createElement(Text, { dimColor: true }, "Arguments:"),
                 formattedArgs.map((arg, index) => (React.createElement(Box, { key: index, flexDirection: "column" },
-                    React.createElement(Text, { color: "gray", dimColor: true },
+                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                         arg.isLast ? '└─' : '├─',
                         " ",
                         arg.key,
@@ -171,15 +173,15 @@ export default function ToolConfirmation({ toolName, toolArguments, allTools, on
                 React.createElement(Text, null,
                     "Tools:",
                     ' ',
-                    React.createElement(Text, { bold: true, color: "cyan" },
+                    React.createElement(Text, { bold: true, color: theme.colors.menuInfo },
                         formattedAllTools.length,
                         " tools in parallel"))),
             formattedAllTools.map((tool, toolIndex) => (React.createElement(Box, { key: toolIndex, flexDirection: "column", marginBottom: toolIndex < formattedAllTools.length - 1 ? 1 : 0 },
-                React.createElement(Text, { color: "cyan", bold: true },
+                React.createElement(Text, { color: theme.colors.menuInfo, bold: true },
                     toolIndex + 1,
                     ". ",
                     tool.name),
-                tool.args.length > 0 && (React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, tool.args.map((arg, argIndex) => (React.createElement(Text, { key: argIndex, color: "gray", dimColor: true },
+                tool.args.length > 0 && (React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, tool.args.map((arg, argIndex) => (React.createElement(Text, { key: argIndex, color: theme.colors.menuSecondary, dimColor: true },
                     arg.isLast ? '└─' : '├─',
                     " ",
                     arg.key,
@@ -191,12 +193,12 @@ export default function ToolConfirmation({ toolName, toolArguments, allTools, on
         !hasSelected && !showRejectInput && (React.createElement(SelectInput, { items: items, onSelect: handleSelect })),
         showRejectInput && !hasSelected && (React.createElement(Box, { flexDirection: "column" },
             React.createElement(Box, { marginBottom: 1 },
-                React.createElement(Text, { color: "yellow" }, "Enter rejection reason:")),
+                React.createElement(Text, { color: theme.colors.warning }, "Enter rejection reason:")),
             React.createElement(Box, { marginBottom: 1 },
-                React.createElement(Text, { color: "cyan" }, "> "),
+                React.createElement(Text, { color: theme.colors.menuInfo }, "> "),
                 React.createElement(TextInput, { value: rejectReason, onChange: setRejectReason, onSubmit: handleRejectReasonSubmit })),
             React.createElement(Box, null,
                 React.createElement(Text, { dimColor: true }, "Press Enter to submit")))),
         hasSelected && (React.createElement(Box, null,
-            React.createElement(Text, { color: "green" }, "Confirmed")))));
+            React.createElement(Text, { color: theme.colors.success }, "Confirmed")))));
 }

package/dist/ui/components/ToolResultPreview.js

@@ -305,14 +305,28 @@ function renderTodoPreview(_toolName, data, _maxLines) {
     let todoData = data;
     // If data has content array (MCP format), extract the text
     if (data.content && Array.isArray(data.content) && data.content[0]?.text) {
+        const textContent = data.content[0].text;
+        // Skip parsing if it's a plain message string
+        if (textContent === 'No TODO list found' || textContent === 'TODO item not found') {
+            return (React.createElement(Box, { marginLeft: 2 },
+                React.createElement(Text, { color: "gray", dimColor: true },
+                    "\u2514\u2500 ",
+                    textContent)));
+        }
+        // Try to parse JSON
         try {
-            todoData = JSON.parse(data.content[0].text);
+            todoData = JSON.parse(textContent);
         }
         catch (e) {
-            // If parsing fails, just use original data
+            // If parsing fails, show the raw text
+            return (React.createElement(Box, { marginLeft: 2 },
+                React.createElement(Text, { color: "gray", dimColor: true },
+                    "\u2514\u2500 ",
+                    textContent)));
         }
     }
-    if (!todoData.todos) {
+    // Check if we have valid todo data
+    if (!todoData.todos || !Array.isArray(todoData.todos)) {
         return (React.createElement(Box, { marginLeft: 2 },
             React.createElement(Text, { color: "gray", dimColor: true },
                 "\u2514\u2500 ",

package/dist/ui/contexts/ThemeContext.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { ThemeType, Theme } from '../themes/index.js';
+interface ThemeContextType {
+    theme: Theme;
+    themeType: ThemeType;
+    setThemeType: (type: ThemeType) => void;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+}
+export declare function ThemeProvider({ children }: ThemeProviderProps): React.JSX.Element;
+export declare function useTheme(): ThemeContextType;
+export {};

package/dist/ui/contexts/ThemeContext.js

@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState, } from 'react';
+import { themes } from '../themes/index.js';
+import { getCurrentTheme, setCurrentTheme, } from '../../utils/themeConfig.js';
+const ThemeContext = createContext(undefined);
+export function ThemeProvider({ children }) {
+    const [themeType, setThemeTypeState] = useState(() => {
+        // Load initial theme from config
+        return getCurrentTheme();
+    });
+    const setThemeType = (type) => {
+        setThemeTypeState(type);
+        // Persist to config file
+        setCurrentTheme(type);
+    };
+    const value = {
+        theme: themes[themeType],
+        themeType,
+        setThemeType,
+    };
+    return (React.createElement(ThemeContext.Provider, { value: value }, children));
+}
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}

package/dist/ui/pages/ChatScreen.js

@@ -4,6 +4,7 @@ import Spinner from 'ink-spinner';
 import Gradient from 'ink-gradient';
 import ansiEscapes from 'ansi-escapes';
 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';
@@ -56,6 +57,7 @@ import '../../utils/commands/todoPicker.js';
 import '../../utils/commands/help.js';
 export default function ChatScreen({ skipWelcome }) {
     const { t } = useI18n();
+    const { theme } = useTheme();
     const [messages, setMessages] = useState([]);
     const [isSaving] = useState(false);
     const [pendingMessages, setPendingMessages] = useState([]);
@@ -1112,7 +1114,7 @@ export default function ChatScreen({ skipWelcome }) {
                     .replace('{current}', terminalHeight.toString())
                     .replace('{required}', MIN_TERMINAL_HEIGHT.toString()))),
             React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true }, t.chatScreen.terminalMinHeight))));
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.chatScreen.terminalMinHeight))));
     }
     return (React.createElement(Box, { flexDirection: "column", height: "100%", width: terminalWidth },
         React.createElement(Static, { key: remountKey, items: [
@@ -1136,7 +1138,7 @@ export default function ChatScreen({ skipWelcome }) {
                                 const pasteKey = process.platform === 'darwin' ? 'Ctrl+V' : 'Alt+V';
                                 return `• ${t.chatScreen.headerShortcuts.replace('{pasteKey}', pasteKey)}`;
                             })()),
-                            React.createElement(Text, { color: "gray", dimColor: true },
+                            React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                                 "\u2022",
                                 ' ',
                                 t.chatScreen.headerWorkingDirectory.replace('{directory}', workingDirectory))))),
@@ -1199,12 +1201,12 @@ export default function ChatScreen({ skipWelcome }) {
                     }
                     return (React.createElement(Box, { key: `msg-${index}`, marginTop: index > 0 && !shouldShowParallelIndicator ? 1 : 0, marginBottom: isLastMessage ? 1 : 0, paddingX: 1, flexDirection: "column", width: terminalWidth },
                         isFirstInGroup && (React.createElement(Box, { marginBottom: 0 },
-                            React.createElement(Text, { color: "#FF6EBF", dimColor: true }, "\u250C\u2500 Parallel execution"))),
+                            React.createElement(Text, { color: theme.colors.menuInfo, dimColor: true }, "\u250C\u2500 Parallel execution"))),
                         React.createElement(Box, null,
                             React.createElement(Text, { color: message.role === 'user'
                                     ? 'green'
                                     : message.role === 'command'
-                                        ? 'gray'
+                                        ? theme.colors.menuSecondary
                                         : toolStatusColor, bold: true },
                                 shouldShowParallelIndicator && !isFirstInGroup
                                     ? '│'
@@ -1215,7 +1217,7 @@ export default function ChatScreen({ skipWelcome }) {
                                         ? '⌘'
                                         : '❆'),
                             React.createElement(Box, { marginLeft: 1, flexDirection: "column" }, message.role === 'command' ? (React.createElement(React.Fragment, null,
-                                React.createElement(Text, { color: "gray", dimColor: true },
+                                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                                     "\u2514\u2500 ",
                                     message.commandName),
                                 message.content && (React.createElement(Text, { color: "white" }, message.content)))) : (React.createElement(React.Fragment, null,
@@ -1225,7 +1227,7 @@ export default function ChatScreen({ skipWelcome }) {
                                             ? 'yellow'
                                             : message.content.startsWith('✓')
                                                 ? 'green'
-                                                : 'red', backgroundColor: message.role === 'user' ? '#4a4a4a' : undefined }, message.content || ' ')) : (React.createElement(MarkdownRenderer, { content: message.content || ' ' })),
+                                                : 'red', backgroundColor: message.role === 'user' ? theme.colors.border : undefined }, message.content || ' ')) : (React.createElement(MarkdownRenderer, { content: message.content || ' ' })),
                                 message.subAgentUsage &&
                                     (() => {
                                         const formatTokens = (num) => {
@@ -1233,7 +1235,7 @@ export default function ChatScreen({ skipWelcome }) {
                                                 return `${(num / 1000).toFixed(1)}K`;
                                             return num.toString();
                                         };
-                                        return (React.createElement(Text, { color: "gray", dimColor: true },
+                                        return (React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                                             "\u2514\u2500 Usage: In=",
                                             formatTokens(message.subAgentUsage.inputTokens),
                                             ", Out=",
@@ -1251,7 +1253,7 @@ export default function ChatScreen({ skipWelcome }) {
                                 message.toolDisplay &&
                                     message.toolDisplay.args.length > 0 &&
                                     // Hide tool arguments for sub-agent internal tools
-                                    !message.subAgentInternal && (React.createElement(Box, { flexDirection: "column" }, message.toolDisplay.args.map((arg, argIndex) => (React.createElement(Text, { key: argIndex, color: "gray", dimColor: true },
+                                    !message.subAgentInternal && (React.createElement(Box, { flexDirection: "column" }, message.toolDisplay.args.map((arg, argIndex) => (React.createElement(Text, { key: argIndex, color: theme.colors.menuSecondary, dimColor: true },
                                     arg.isLast ? '└─' : '├─',
                                     " ",
                                     arg.key,
@@ -1311,13 +1313,13 @@ export default function ChatScreen({ skipWelcome }) {
                                     message.content.includes('⚇✗')) &&
                                     message.content.includes('Tool execution rejected by user:') && (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
                                     React.createElement(Text, { color: "yellow", dimColor: true }, "Rejection reason:"),
-                                    React.createElement(Text, { color: "gray", dimColor: true },
+                                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                                         "\u2514\u2500",
                                         ' ',
                                         message.content
                                             .split('Tool execution rejected by user:')[1]
                                             ?.trim() || 'No reason provided'))),
-                                message.files && message.files.length > 0 && (React.createElement(Box, { flexDirection: "column" }, message.files.map((file, fileIndex) => (React.createElement(Text, { key: fileIndex, color: "gray", dimColor: true },
+                                message.files && message.files.length > 0 && (React.createElement(Box, { flexDirection: "column" }, message.files.map((file, fileIndex) => (React.createElement(Text, { key: fileIndex, color: theme.colors.menuSecondary, dimColor: true },
                                     "\u2514\u2500 ",
                                     file.path,
                                     file.exists
@@ -1325,17 +1327,17 @@ export default function ChatScreen({ skipWelcome }) {
                                         : ' (file not found)'))))),
                                 message.role === 'user' &&
                                     message.images &&
-                                    message.images.length > 0 && (React.createElement(Box, { marginTop: 1, flexDirection: "column" }, message.images.map((_image, imageIndex) => (React.createElement(Text, { key: imageIndex, color: "gray", dimColor: true },
+                                    message.images.length > 0 && (React.createElement(Box, { marginTop: 1, flexDirection: "column" }, message.images.map((_image, imageIndex) => (React.createElement(Text, { key: imageIndex, color: theme.colors.menuSecondary, dimColor: true },
                                     "\u2514\u2500 [image #",
                                     imageIndex + 1,
                                     "]"))))),
                                 message.discontinued && (React.createElement(Text, { color: "red", bold: true }, "\u2514\u2500 user discontinue")))))),
                         isLastInGroup && (React.createElement(Box, { marginTop: 0 },
-                            React.createElement(Text, { color: "#FF6EBF", dimColor: true }, "\u2514\u2500 End parallel execution")))));
+                            React.createElement(Text, { color: theme.colors.menuInfo, dimColor: true }, "\u2514\u2500 End parallel execution")))));
                 }),
             ] }, item => item),
         (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(Text, { color: [theme.colors.menuInfo, theme.colors.success, theme.colors.menuSelected, theme.colors.menuInfo, theme.colors.menuSecondary][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
@@ -1365,9 +1367,9 @@ export default function ChatScreen({ skipWelcome }) {
                     "/",
                     streamingState.codebaseSearchStatus.maxAttempts,
                     ")"),
-                React.createElement(Text, { color: "gray", dimColor: true }, streamingState.codebaseSearchStatus.message))) : (
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, streamingState.codebaseSearchStatus.message))) : (
             // Normal thinking status
-            React.createElement(Text, { color: "gray", dimColor: true },
+            React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                 React.createElement(ShimmerText, { text: streamingState.isReasoning
                         ? t.chatScreen.statusDeepThinking
                         : streamingState.streamTokenCount > 0
@@ -1385,7 +1387,7 @@ export default function ChatScreen({ skipWelcome }) {
                         : streamingState.streamTokenCount,
                     ' ',
                     "tokens"),
-                ")")))) : (React.createElement(Text, { color: "gray", dimColor: true }, t.chatScreen.sessionCreating))))),
+                ")")))) : (React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.chatScreen.sessionCreating))))),
         React.createElement(Box, { paddingX: 1, width: terminalWidth },
             React.createElement(PendingMessages, { pendingMessages: pendingMessages })),
         pendingToolConfirmation && (React.createElement(ToolConfirmation, { toolName: pendingToolConfirmation.batchToolNames ||
@@ -1397,11 +1399,11 @@ export default function ChatScreen({ skipWelcome }) {
         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 }, t.chatScreen.pressEscToClose)))),
+                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(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true }, t.chatScreen.pressEscToClose)))),
+                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))),
         snapshotState.pendingRollback && (React.createElement(FileRollbackConfirmation, { fileCount: snapshotState.pendingRollback.fileCount, filePaths: snapshotState.pendingRollback.filePaths || [], onConfirm: handleRollbackConfirm })),
@@ -1428,7 +1430,7 @@ export default function ChatScreen({ skipWelcome }) {
                             ? 'green'
                             : vscodeState.vscodeConnectionStatus === 'error'
                                 ? 'red'
-                                : 'gray', dimColor: vscodeState.vscodeConnectionStatus !== 'error' },
+                                : theme.colors.menuSecondary, dimColor: vscodeState.vscodeConnectionStatus !== 'error' },
                     "\u25CF",
                     ' ',
                     vscodeState.vscodeConnectionStatus === 'connecting'