snow-ai 0.4.8 → 0.4.10

package/dist/app.js

@@ -1,16 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Suspense } from 'react';
 import { Box, Text } from 'ink';
 import { Alert } from '@inkjs/ui';
+import Spinner from 'ink-spinner';
 import WelcomeScreen from './ui/pages/WelcomeScreen.js';
-import MCPConfigScreen from './ui/pages/MCPConfigScreen.js';
-import SystemPromptConfigScreen from './ui/pages/SystemPromptConfigScreen.js';
-import CustomHeadersScreen from './ui/pages/CustomHeadersScreen.js';
-import ChatScreen from './ui/pages/ChatScreen.js';
-import HeadlessModeScreen from './ui/pages/HeadlessModeScreen.js';
+// Lazy load heavy components to improve startup time
+const ChatScreen = React.lazy(() => import('./ui/pages/ChatScreen.js'));
+const HeadlessModeScreen = React.lazy(() => import('./ui/pages/HeadlessModeScreen.js'));
+const MCPConfigScreen = React.lazy(() => import('./ui/pages/MCPConfigScreen.js'));
+const SystemPromptConfigScreen = React.lazy(() => import('./ui/pages/SystemPromptConfigScreen.js'));
+const CustomHeadersScreen = React.lazy(() => import('./ui/pages/CustomHeadersScreen.js'));
 import { useGlobalExit, } from './hooks/useGlobalExit.js';
 import { onNavigate } from './hooks/useGlobalNavigation.js';
 import { useTerminalSize } from './hooks/useTerminalSize.js';
 import { I18nProvider } from './i18n/index.js';
+import { ThemeProvider } from './ui/contexts/ThemeContext.js';
 // Inner component that uses I18n context
 function AppContent({ version, skipWelcome, }) {
     const [currentView, setCurrentView] = useState(skipWelcome ? 'chat' : 'welcome');
@@ -55,21 +58,29 @@ function AppContent({ version, skipWelcome, }) {
         }
     };
     const renderView = () => {
+        const loadingFallback = (React.createElement(Box, null,
+            React.createElement(Text, { color: "cyan" },
+                React.createElement(Spinner, { type: "dots" })),
+            React.createElement(Text, null, " Loading...")));
         switch (currentView) {
             case 'welcome':
                 return (React.createElement(WelcomeScreen, { version: version, onMenuSelect: handleMenuSelect }));
             case 'chat':
-                return React.createElement(ChatScreen, { key: chatScreenKey, skipWelcome: skipWelcome });
+                return (React.createElement(Suspense, { fallback: loadingFallback },
+                    React.createElement(ChatScreen, { key: chatScreenKey, skipWelcome: skipWelcome })));
             case 'settings':
                 return (React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Text, { color: "blue" }, "Settings"),
                     React.createElement(Text, { color: "gray" }, "Settings interface would be implemented here")));
             case 'mcp':
-                return (React.createElement(MCPConfigScreen, { onBack: () => setCurrentView('welcome'), onSave: () => setCurrentView('welcome') }));
+                return (React.createElement(Suspense, { fallback: loadingFallback },
+                    React.createElement(MCPConfigScreen, { onBack: () => setCurrentView('welcome'), onSave: () => setCurrentView('welcome') })));
             case 'systemprompt':
-                return (React.createElement(SystemPromptConfigScreen, { onBack: () => setCurrentView('welcome') }));
+                return (React.createElement(Suspense, { fallback: loadingFallback },
+                    React.createElement(SystemPromptConfigScreen, { onBack: () => setCurrentView('welcome') })));
             case 'customheaders':
-                return React.createElement(CustomHeadersScreen, { onBack: () => setCurrentView('welcome') });
+                return (React.createElement(Suspense, { fallback: loadingFallback },
+                    React.createElement(CustomHeadersScreen, { onBack: () => setCurrentView('welcome') })));
             default:
                 return (React.createElement(WelcomeScreen, { version: version, onMenuSelect: handleMenuSelect }));
         }
@@ -83,9 +94,16 @@ export default function App({ version, skipWelcome, headlessPrompt }) {
     // If headless prompt is provided, use headless mode
     // Wrap in I18nProvider since HeadlessModeScreen might use hooks that depend on it
     if (headlessPrompt) {
+        const loadingFallback = (React.createElement(Box, null,
+            React.createElement(Text, { color: "cyan" },
+                React.createElement(Spinner, { type: "dots" })),
+            React.createElement(Text, null, " Loading...")));
         return (React.createElement(I18nProvider, null,
-            React.createElement(HeadlessModeScreen, { prompt: headlessPrompt, onComplete: () => process.exit(0) })));
+            React.createElement(ThemeProvider, null,
+                React.createElement(Suspense, { fallback: loadingFallback },
+                    React.createElement(HeadlessModeScreen, { prompt: headlessPrompt, onComplete: () => process.exit(0) })))));
     }
     return (React.createElement(I18nProvider, null,
-        React.createElement(AppContent, { version: version, skipWelcome: skipWelcome })));
+        React.createElement(ThemeProvider, null,
+            React.createElement(AppContent, { version: version, skipWelcome: skipWelcome }))));
 }

package/dist/cli.js

@@ -1,4 +1,7 @@
 #!/usr/bin/env node
+// Show loading indicator immediately before any imports
+process.stdout.write('\x1b[?25l'); // Hide cursor
+process.stdout.write('⠋ Loading...\r');
 import React from 'react';
 import { render, Text, Box } from 'ink';
 import Spinner from 'ink-spinner';
@@ -137,6 +140,9 @@ const Startup = ({ version, skipWelcome, headlessPrompt, }) => {
 };
 // Disable bracketed paste mode on startup
 process.stdout.write('\x1b[?2004l');
+// Clear the early loading indicator and show cursor
+process.stdout.write('\x1b[2K\r'); // Clear line
+process.stdout.write('\x1b[?25h'); // Show cursor
 // Re-enable on exit to avoid polluting parent shell
 const cleanup = () => {
     process.stdout.write('\x1b[?2004l');

package/dist/i18n/lang/en.js

@@ -22,6 +22,8 @@ export const en = {
         sensitiveCommandsInfo: 'Configure commands that require confirmation even in YOLO mode',
         languageSettings: 'Language Settings',
         languageSettingsInfo: 'Switch application language',
+        themeSettings: 'Theme Settings',
+        themeSettingsInfo: 'Configure theme and preview DiffViewer',
         exit: 'Exit',
         exitInfo: 'Exit the application',
     },
@@ -274,6 +276,25 @@ export const en = {
         // Navigation hints
         listNavigationHint: '↑↓: Navigate • Space: Toggle • A: Add • D: Delete • R: Reset • Esc: Back',
     },
+    themeSettings: {
+        title: 'Theme Settings',
+        current: 'Current:',
+        preview: 'Preview:',
+        back: '← Back',
+        backInfo: 'Return to main menu',
+        darkTheme: 'Dark Theme',
+        darkThemeInfo: 'Classic dark color scheme',
+        lightTheme: 'Light Theme',
+        lightThemeInfo: 'Classic light color scheme',
+        githubDark: 'GitHub Dark',
+        githubDarkInfo: 'GitHub inspired dark theme',
+        rainbow: 'Rainbow',
+        rainbowInfo: 'Vibrant rainbow colors for a fun experience',
+        solarizedDark: 'Solarized Dark',
+        solarizedDarkInfo: 'Solarized dark theme with precision colors',
+        nord: 'Nord',
+        nordInfo: 'Arctic, north-bluish color palette',
+    },
     helpPanel: {
         title: '🔰 Keyboard Shortcuts & Help',
         textEditingTitle: '📝 Text Editing:',

package/dist/i18n/lang/es.js

@@ -22,6 +22,8 @@ export const es = {
         sensitiveCommandsInfo: 'Configurar comandos que requieren confirmación incluso en modo YOLO',
         languageSettings: 'Configuración de Idioma',
         languageSettingsInfo: 'Cambiar el idioma de la aplicación',
+        themeSettings: 'Configuración de Tema',
+        themeSettingsInfo: 'Configurar tema y vista previa del visor de diferencias',
         exit: 'Salir',
         exitInfo: 'Salir de la aplicación',
     },
@@ -274,6 +276,25 @@ export const es = {
         // Navigation hints
         listNavigationHint: '↑↓: Navegar • Espacio: Alternar • A: Agregar • D: Eliminar • R: Restablecer • Esc: Volver',
     },
+    themeSettings: {
+        title: 'Configuración de Tema',
+        current: 'Actual:',
+        preview: 'Vista previa:',
+        back: '← Atrás',
+        backInfo: 'Volver al menú principal',
+        darkTheme: 'Tema Oscuro',
+        darkThemeInfo: 'Esquema de colores oscuros clásico',
+        lightTheme: 'Tema Claro',
+        lightThemeInfo: 'Esquema de colores claros clásico',
+        githubDark: 'GitHub Oscuro',
+        githubDarkInfo: 'Tema oscuro inspirado en GitHub',
+        rainbow: 'Arcoíris',
+        rainbowInfo: 'Colores vibrantes del arcoíris para una experiencia divertida',
+        solarizedDark: 'Solarized Oscuro',
+        solarizedDarkInfo: 'Tema oscuro Solarized con colores precisos',
+        nord: 'Nord',
+        nordInfo: 'Paleta de colores ártica y azulada del norte',
+    },
     helpPanel: {
         title: '🔰 Atajos de Teclado y Ayuda',
         textEditingTitle: '📝 Edición de Texto:',

package/dist/i18n/lang/ja.js

@@ -22,6 +22,8 @@ export const ja = {
         sensitiveCommandsInfo: 'YOLOモードでも確認が必要なコマンドを構成',
         languageSettings: '言語設定',
         languageSettingsInfo: 'アプリケーションの言語を切り替え',
+        themeSettings: 'テーマ設定',
+        themeSettingsInfo: 'テーマを設定して差分ビューワーをプレビュー',
         exit: '終了',
         exitInfo: 'アプリケーションを終了',
     },
@@ -274,6 +276,25 @@ export const ja = {
         // Navigation hints
         listNavigationHint: '↑↓: 移動 • Space: 切替 • A: 追加 • D: 削除 • R: リセット • Esc: 戻る',
     },
+    themeSettings: {
+        title: 'テーマ設定',
+        current: '現在:',
+        preview: 'プレビュー:',
+        back: '← 戻る',
+        backInfo: 'メインメニューに戻る',
+        darkTheme: 'ダークテーマ',
+        darkThemeInfo: 'クラシックダーク配色',
+        lightTheme: 'ライトテーマ',
+        lightThemeInfo: 'クラシックライト配色',
+        githubDark: 'GitHub ダーク',
+        githubDarkInfo: 'GitHubにインスパイアされたダークテーマ',
+        rainbow: 'レインボー',
+        rainbowInfo: '鮮やかな虹色で楽しい体験',
+        solarizedDark: 'Solarized ダーク',
+        solarizedDarkInfo: '精密な色を持つ Solarized ダークテーマ',
+        nord: 'Nord',
+        nordInfo: '北極、北方の青みがかった色パレット',
+    },
     helpPanel: {
         title: '🔰 キーボードショートカットとヘルプ',
         textEditingTitle: '📝 テキスト編集:',

package/dist/i18n/lang/ko.js

@@ -22,6 +22,8 @@ export const ko = {
         sensitiveCommandsInfo: 'YOLO 모드에서도 확인이 필요한 명령 구성',
         languageSettings: '언어 설정',
         languageSettingsInfo: '애플리케이션 언어 전환',
+        themeSettings: '테마 설정',
+        themeSettingsInfo: '테마를 구성하고 차이점 뷰어를 미리 보기',
         exit: '종료',
         exitInfo: '애플리케이션 종료',
     },
@@ -274,6 +276,25 @@ export const ko = {
         // Navigation hints
         listNavigationHint: '↑↓: 이동 • 스페이스: 토글 • A: 추가 • D: 삭제 • R: 재설정 • Esc: 뒤로',
     },
+    themeSettings: {
+        title: '테마 설정',
+        current: '현재:',
+        preview: '미리 보기:',
+        back: '← 뒤로',
+        backInfo: '메인 메뉴로 돌아가기',
+        darkTheme: '다크 테마',
+        darkThemeInfo: '클래식 다크 컬러 스키마',
+        lightTheme: '라이트 테마',
+        lightThemeInfo: '클래식 라이트 컬러 스키마',
+        githubDark: 'GitHub 다크',
+        githubDarkInfo: 'GitHub에서 영감을 받은 다크 테마',
+        rainbow: '레인보우',
+        rainbowInfo: '재미있는 경험을 위한 생동감 있는 무지개 색상',
+        solarizedDark: 'Solarized 다크',
+        solarizedDarkInfo: '정밀한 색상을 가진 Solarized 다크 테마',
+        nord: 'Nord',
+        nordInfo: '북극, 북부 청량 컬러 팔레트',
+    },
     helpPanel: {
         title: '🔰 키보드 단축키 및 도움말',
         textEditingTitle: '📝 텍스트 편집:',

package/dist/i18n/lang/zh-TW.js

@@ -22,6 +22,8 @@ export const zhTW = {
         sensitiveCommandsInfo: '配置即使在 YOLO 模式下也需要確認的命令',
         languageSettings: '語言設定',
         languageSettingsInfo: '切換應用語言',
+        themeSettings: '主題設定',
+        themeSettingsInfo: '設定主題並預覽差異檢視器',
         exit: '退出',
         exitInfo: '退出應用程式',
     },
@@ -274,6 +276,25 @@ export const zhTW = {
         // Navigation hints
         listNavigationHint: '↑↓: 導航 • 空格: 切換 • A: 新增 • D: 刪除 • R: 重設 • Esc: 返回',
     },
+    themeSettings: {
+        title: '主題設定',
+        current: '目前:',
+        preview: '預覽:',
+        back: '← 返回',
+        backInfo: '返回主選單',
+        darkTheme: '深色主題',
+        darkThemeInfo: '經典深色配色方案',
+        lightTheme: '淺色主題',
+        lightThemeInfo: '經典淺色配色方案',
+        githubDark: 'GitHub 深色',
+        githubDarkInfo: '受 GitHub 啟發的深色主題',
+        rainbow: '彩虹',
+        rainbowInfo: '生動的彩虹色彩，帶來有趣的體驗',
+        solarizedDark: 'Solarized 深色',
+        solarizedDarkInfo: '具有精確色彩的 Solarized 深色主題',
+        nord: 'Nord',
+        nordInfo: '北極、北方藍調色板',
+    },
     helpPanel: {
         title: '🔰 鍵盤快捷鍵和說明',
         textEditingTitle: '📝 文字編輯:',

package/dist/i18n/lang/zh.js

@@ -22,6 +22,8 @@ export const zh = {
         sensitiveCommandsInfo: '配置即使在 YOLO 模式下也需要确认的命令',
         languageSettings: '语言设置',
         languageSettingsInfo: '切换应用语言',
+        themeSettings: '主题设置',
+        themeSettingsInfo: '配置主题并预览差异查看器',
         exit: '退出',
         exitInfo: '退出应用程序',
     },
@@ -274,6 +276,25 @@ export const zh = {
         // Navigation hints
         listNavigationHint: '↑↓: 导航 • 空格: 切换 • A: 添加 • D: 删除 • R: 重置 • Esc: 返回',
     },
+    themeSettings: {
+        title: '主题设置',
+        current: '当前:',
+        preview: '预览:',
+        back: '← 返回',
+        backInfo: '返回主菜单',
+        darkTheme: '深色主题',
+        darkThemeInfo: '经典深色配色方案',
+        lightTheme: '浅色主题',
+        lightThemeInfo: '经典浅色配色方案',
+        githubDark: 'GitHub 深色',
+        githubDarkInfo: '受 GitHub 启发的深色主题',
+        rainbow: '彩虹',
+        rainbowInfo: '生动的彩虹色彩，带来有趣的体验',
+        solarizedDark: 'Solarized 深色',
+        solarizedDarkInfo: '具有精确色彩的 Solarized 深色主题',
+        nord: 'Nord',
+        nordInfo: '北极、北方蓝调色板',
+    },
     helpPanel: {
         title: '🔰 键盘快捷键和帮助',
         textEditingTitle: '📝 文本编辑:',

package/dist/i18n/types.d.ts

@@ -23,6 +23,8 @@ export type TranslationKeys = {
         sensitiveCommandsInfo: string;
         languageSettings: string;
         languageSettingsInfo: string;
+        themeSettings: string;
+        themeSettingsInfo: string;
         exit: string;
         exitInfo: string;
     };
@@ -271,6 +273,25 @@ export type TranslationKeys = {
         confirmHint: string;
         listNavigationHint: string;
     };
+    themeSettings: {
+        title: string;
+        current: string;
+        preview: string;
+        back: string;
+        backInfo: string;
+        darkTheme: string;
+        darkThemeInfo: string;
+        lightTheme: string;
+        lightThemeInfo: string;
+        githubDark: string;
+        githubDarkInfo: string;
+        rainbow: string;
+        rainbowInfo: string;
+        solarizedDark: string;
+        solarizedDarkInfo: string;
+        nord: string;
+        nordInfo: string;
+    };
     helpPanel: {
         title: string;
         textEditingTitle: string;

package/dist/mcp/todo.js

@@ -267,7 +267,7 @@ This REPLACES the entire TODO list. For adding tasks to existing list, use "todo
                                         description: 'Parent TODO ID (optional, for creating subtasks in hierarchical structure)',
                                     },
                                 },
-                                required: ['content'],
+                                required: ['content', 'parentId'],
                             },
                             description: 'Complete list of TODO items. Each item must represent a discrete, verifiable unit of work. For programming tasks, typical structure: analyze code → implement changes → test functionality → verify build → commit (if requested).',
                         },

package/dist/ui/components/AgentPickerPanel.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 AgentPickerPanel = memo(({ agents, selectedIndex, visible, maxHeight }) => {
+    const { theme } = useTheme();
     // Fixed maximum display items to prevent rendering issues
     const MAX_DISPLAY_ITEMS = 5;
     const effectiveMaxItems = maxHeight
@@ -39,7 +41,7 @@ const AgentPickerPanel = memo(({ agents, selectedIndex, visible, maxHeight }) =>
             React.createElement(Box, { width: "100%" },
                 React.createElement(Box, { flexDirection: "column", width: "100%" },
                     React.createElement(Box, null,
-                        React.createElement(Text, { color: "yellow", bold: true }, "Sub-Agent Selection")),
+                        React.createElement(Text, { color: theme.colors.warning, bold: true }, "Sub-Agent Selection")),
                     React.createElement(Box, { marginTop: 1 },
                         React.createElement(Alert, { variant: "warning" }, "No sub-agents configured. Please configure sub-agents first."))))));
     }
@@ -47,23 +49,23 @@ const AgentPickerPanel = memo(({ agents, selectedIndex, visible, maxHeight }) =>
         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 Sub-Agent",
                         ' ',
                         agents.length > effectiveMaxItems &&
                             `(${selectedIndex + 1}/${agents.length})`),
-                    React.createElement(Text, { color: "gray", dimColor: true }, "(Press ESC to close)")),
+                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, "(Press ESC to close)")),
                 displayedAgents.map((agent, index) => (React.createElement(Box, { key: agent.id, flexDirection: "column", width: "100%" },
-                    React.createElement(Text, { color: index === displayedSelectedIndex ? 'green' : 'gray', bold: true },
+                    React.createElement(Text, { color: index === displayedSelectedIndex ? theme.colors.success : theme.colors.menuSecondary, bold: true },
                         index === displayedSelectedIndex ? '❯ ' : '  ',
                         "#",
                         agent.name),
                     React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: index === displayedSelectedIndex ? 'green' : 'gray', dimColor: true },
+                        React.createElement(Text, { color: index === displayedSelectedIndex ? theme.colors.success : theme.colors.menuSecondary, dimColor: true },
                             "\u2514\u2500 ",
                             agent.description || 'No description'))))),
                 agents.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 ",
                         agents.length - effectiveMaxItems,
                         " more hidden")))))));

package/dist/ui/components/ChatInput.js

@@ -16,6 +16,7 @@ import { useTerminalFocus } from '../../hooks/useTerminalFocus.js';
 import { useAgentPicker } from '../../hooks/useAgentPicker.js';
 import { useTodoPicker } from '../../hooks/useTodoPicker.js';
 import { useI18n } from '../../i18n/index.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 /**
  * Calculate context usage percentage
  * This is the same logic used in ChatInput to display usage
@@ -36,6 +37,7 @@ export function calculateContextPercentage(contextUsage) {
 export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type your message...', disabled = false, isProcessing = false, chatHistory = [], onHistorySelect, yoloMode = false, contextUsage, initialContent = null, onContextPercentageChange, }) {
     // Use i18n hook for translations
     const { t } = useI18n();
+    const { theme } = useTheme();
     // Use terminal size hook to listen for resize events
     const { columns: terminalWidth } = useTerminalSize();
     const prevTerminalWidthRef = useRef(terminalWidth);
@@ -206,14 +208,14 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
     // 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));
+            // Focused: solid block cursor (use inverted colors)
+            return (React.createElement(Text, { backgroundColor: theme.colors.menuNormal, color: theme.colors.background }, char));
         }
         else {
             // Unfocused: no cursor, just render the character normally
             return React.createElement(Text, null, char);
         }
-    }, [hasFocus]);
+    }, [hasFocus, theme]);
     // Render content with cursor (treat all text including placeholders as plain text)
     const renderContent = () => {
         if (buffer.text.length > 0) {
@@ -243,7 +245,7 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
         else {
             return (React.createElement(React.Fragment, null,
                 renderCursor(' '),
-                React.createElement(Text, { color: disabled ? 'darkGray' : 'gray', dimColor: true }, disabled ? t.chatScreen.waitingForResponse : placeholder)));
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, disabled ? t.chatScreen.waitingForResponse : placeholder)));
         }
     };
     return (React.createElement(Box, { flexDirection: "column", paddingX: 1, width: terminalWidth },
@@ -264,7 +266,7 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                 const hasMoreAbove = startIndex > 0;
                 const hasMoreBelow = endIndex < userMessages.length;
                 return (React.createElement(React.Fragment, null,
-                    React.createElement(Box, { height: 1 }, hasMoreAbove ? (React.createElement(Text, { color: "gray", dimColor: true }, t.chatScreen.moreAbove.replace('{count}', startIndex.toString()))) : (React.createElement(Text, null, " "))),
+                    React.createElement(Box, { height: 1 }, hasMoreAbove ? (React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.chatScreen.moreAbove.replace('{count}', startIndex.toString()))) : (React.createElement(Text, null, " "))),
                     visibleMessages.map((message, displayIndex) => {
                         const actualIndex = startIndex + displayIndex;
                         // Ensure single line by removing all newlines and control characters
@@ -280,24 +282,24 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                             : singleLineLabel;
                         return (React.createElement(Box, { key: message.value, height: 1 },
                             React.createElement(Text, { color: actualIndex === historySelectedIndex
-                                    ? 'green'
-                                    : 'white', bold: true, wrap: "truncate" },
+                                    ? theme.colors.menuSelected
+                                    : theme.colors.menuNormal, bold: true, wrap: "truncate" },
                                 actualIndex === historySelectedIndex ? '❯  ' : '  ',
                                 truncatedLabel)));
                     }),
-                    React.createElement(Box, { height: 1 }, hasMoreBelow ? (React.createElement(Text, { color: "gray", dimColor: true }, t.chatScreen.moreBelow.replace('{count}', (userMessages.length - endIndex).toString()))) : (React.createElement(Text, null, " ")))));
+                    React.createElement(Box, { height: 1 }, hasMoreBelow ? (React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.chatScreen.moreBelow.replace('{count}', (userMessages.length - endIndex).toString()))) : (React.createElement(Text, null, " ")))));
             })()),
             React.createElement(Box, { marginBottom: 1 },
-                React.createElement(Text, { color: "cyan", dimColor: true }, t.chatScreen.historyNavigateHint)))),
+                React.createElement(Text, { color: theme.colors.menuInfo, dimColor: true }, t.chatScreen.historyNavigateHint)))),
         !showHistoryMenu && (React.createElement(React.Fragment, null,
             React.createElement(Box, { flexDirection: "column", width: terminalWidth - 2 },
-                React.createElement(Text, { color: "gray" }, '─'.repeat(terminalWidth - 2)),
+                React.createElement(Text, { color: theme.colors.menuSecondary }, '─'.repeat(terminalWidth - 2)),
                 React.createElement(Box, { flexDirection: "row" },
-                    React.createElement(Text, { color: "cyan", bold: true },
+                    React.createElement(Text, { color: theme.colors.menuInfo, bold: true },
                         "\u276F",
                         ' '),
                     React.createElement(Box, { flexGrow: 1 }, renderContent())),
-                React.createElement(Text, { color: "gray" }, '─'.repeat(terminalWidth - 2))),
+                React.createElement(Text, { color: theme.colors.menuSecondary }, '─'.repeat(terminalWidth - 2))),
             (showCommands && getFilteredCommands().length > 0) ||
                 showFilePicker ? (React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, null, showCommands && getFilteredCommands().length > 0
@@ -313,9 +315,9 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
             React.createElement(AgentPickerPanel, { agents: getFilteredAgents(), selectedIndex: agentSelectedIndex, visible: showAgentPicker, maxHeight: 5 }),
             React.createElement(TodoPickerPanel, { todos: todos, selectedIndex: todoSelectedIndex, selectedTodos: selectedTodos, visible: showTodoPicker, maxHeight: 5, isLoading: todoIsLoading, searchQuery: todoSearchQuery, totalCount: totalTodoCount }),
             yoloMode && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "yellow", dimColor: true }, t.chatScreen.yoloModeActive))),
+                React.createElement(Text, { color: theme.colors.warning, dimColor: true }, t.chatScreen.yoloModeActive))),
             contextUsage && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true }, (() => {
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, (() => {
                     // Determine which caching system is being used
                     const isAnthropic = (contextUsage.cacheCreationTokens || 0) > 0 ||
                         (contextUsage.cacheReadTokens || 0) > 0;
@@ -330,13 +332,13 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                         : contextUsage.inputTokens;
                     let color;
                     if (percentage < 50)
-                        color = 'green';
+                        color = theme.colors.success;
                     else if (percentage < 75)
-                        color = 'yellow';
+                        color = theme.colors.warning;
                     else if (percentage < 90)
-                        color = 'orange';
+                        color = theme.colors.warning;
                     else
-                        color = 'red';
+                        color = theme.colors.error;
                     const formatNumber = (num) => {
                         if (num >= 1000)
                             return `${(num / 1000).toFixed(1)}k`;
@@ -354,7 +356,7 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                             React.createElement(Text, null, " \u00B7 "),
                             isAnthropic && (React.createElement(React.Fragment, null,
                                 (contextUsage.cacheReadTokens || 0) > 0 && (React.createElement(React.Fragment, null,
-                                    React.createElement(Text, { color: "cyan" },
+                                    React.createElement(Text, { color: theme.colors.menuInfo },
                                         "\u21AF",
                                         ' ',
                                         formatNumber(contextUsage.cacheReadTokens || 0),
@@ -362,13 +364,13 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                                         t.chatScreen.cached))),
                                 (contextUsage.cacheCreationTokens || 0) > 0 && (React.createElement(React.Fragment, null,
                                     (contextUsage.cacheReadTokens || 0) > 0 && (React.createElement(Text, null, " \u00B7 ")),
-                                    React.createElement(Text, { color: "magenta" },
+                                    React.createElement(Text, { color: theme.colors.warning },
                                         "\u25C6",
                                         ' ',
                                         formatNumber(contextUsage.cacheCreationTokens || 0),
                                         ' ',
                                         t.chatScreen.newCache))))),
-                            isOpenAI && (React.createElement(Text, { color: "cyan" },
+                            isOpenAI && (React.createElement(Text, { color: theme.colors.menuInfo },
                                 "\u21AF ",
                                 formatNumber(contextUsage.cachedTokens || 0),
                                 ' ',

package/dist/ui/components/CommandPanel.js

@@ -2,8 +2,10 @@ import React, { memo, useMemo } from 'react';
 import { Box, Text } from 'ink';
 import { Alert } from '@inkjs/ui';
 import { useI18n } from '../../i18n/index.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 const CommandPanel = memo(({ commands, selectedIndex, visible, maxHeight, isProcessing = false, }) => {
     const { t } = useI18n();
+    const { theme } = useTheme();
     // Fixed maximum display items to prevent rendering issues
     const MAX_DISPLAY_ITEMS = 5;
     const effectiveMaxItems = maxHeight
@@ -41,7 +43,7 @@ const CommandPanel = memo(({ commands, selectedIndex, visible, maxHeight, isProc
             React.createElement(Box, { width: "100%" },
                 React.createElement(Box, { flexDirection: "column", width: "100%" },
                     React.createElement(Box, null,
-                        React.createElement(Text, { color: "yellow", bold: true }, t.commandPanel.title)),
+                        React.createElement(Text, { color: theme.colors.warning, bold: true }, t.commandPanel.title)),
                     React.createElement(Box, { marginTop: 1 },
                         React.createElement(Alert, { variant: "info" }, t.commandPanel.processingMessage))))));
     }
@@ -53,22 +55,22 @@ const CommandPanel = memo(({ commands, selectedIndex, visible, maxHeight, isProc
         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 },
                         t.commandPanel.availableCommands,
                         ' ',
                         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 },
+                    React.createElement(Text, { color: index === displayedSelectedIndex ? theme.colors.success : theme.colors.menuSecondary, bold: true },
                         index === displayedSelectedIndex ? '❯ ' : '  ',
                         "/",
                         command.name),
                     React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: index === displayedSelectedIndex ? 'green' : 'gray', dimColor: true },
+                        React.createElement(Text, { color: index === displayedSelectedIndex ? theme.colors.success : theme.colors.menuSecondary, dimColor: true },
                             "\u2514\u2500 ",
                             command.description))))),
                 commands.length > effectiveMaxItems && (React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, { color: "gray", dimColor: true },
+                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                         t.commandPanel.scrollHint,
                         " \u00B7",
                         ' ',

package/dist/ui/components/DiffViewer.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import * as Diff from 'diff';
+import { useTheme } from '../contexts/ThemeContext.js';
 // Helper function to strip line numbers from content (format: "123→content")
 function stripLineNumbers(content) {
     return content
@@ -13,6 +14,7 @@ function stripLineNumbers(content) {
         .join('\n');
 }
 export default function DiffViewer({ oldContent = '', newContent, filename, completeOldContent, completeNewContent, startLineNumber = 1, }) {
+    const { theme } = useTheme();
     // If complete file contents are provided, use them for intelligent diff
     const useCompleteContent = completeOldContent && completeNewContent;
     const diffOldContent = useCompleteContent
@@ -34,10 +36,10 @@ export default function DiffViewer({ oldContent = '', newContent, filename, comp
                 filename && React.createElement(Text, { color: "cyan" },
                     " ",
                     filename)),
-            React.createElement(Box, { flexDirection: "column" }, allLines.map((line, index) => (React.createElement(Text, { key: index, color: "white", backgroundColor: "#006400" },
+            React.createElement(Box, { flexDirection: "column" }, allLines.map((line, index) => (React.createElement(Text, { key: index, color: "white", backgroundColor: theme.colors.diffAdded },
                 "+ ",
                 line))))));
-    }, [isNewFile, diffNewContent, filename]);
+    }, [isNewFile, diffNewContent, filename, theme.colors.text, theme.colors.diffAdded]);
     if (isNewFile) {
         return newFileContent;
     }
@@ -151,13 +153,13 @@ export default function DiffViewer({ oldContent = '', newContent, filename, comp
                         ? String(lineNum).padStart(4, ' ')
                         : '    ';
                     if (change.type === 'added') {
-                        return (React.createElement(Text, { key: changeIndex, color: "white", backgroundColor: "#006400" },
+                        return (React.createElement(Text, { key: changeIndex, color: "white", backgroundColor: theme.colors.diffAdded },
                             lineNumStr,
                             " + ",
                             change.content));
                     }
                     if (change.type === 'removed') {
-                        return (React.createElement(Text, { key: changeIndex, color: "white", backgroundColor: "#8B0000" },
+                        return (React.createElement(Text, { key: changeIndex, color: "white", backgroundColor: theme.colors.diffRemoved },
                             lineNumStr,
                             " - ",
                             change.content));