aiexecode 1.0.66 → 1.0.69

package/src/frontend/README.md

@@ -0,0 +1,81 @@
+# UI System Documentation
+
+이 디렉토리는 Ink 기반의 터미널 UI 시스템을 포함합니다.
+
+## 구조
+
+```
+ui/
+├── App.js                      # 메인 앱 진입점
+├── index.js                    # UI 렌더링 진입점
+├── components/                 # UI 컴포넌트
+│   ├── Header.js              # 헤더 (로고)
+│   ├── Footer.js              # 푸터 (상태 정보)
+│   ├── ConversationItem.js    # 개별 대화 아이템
+│   ├── Input.js               # 입력 컴포넌트
+│   ├── SessionSpinner.js      # 세션 처리 스피너
+│   ├── AutocompleteMenu.js    # 자동완성 메뉴
+│   ├── BlankLine.js           # 빈 줄 컴포넌트
+│   ├── FileDiffViewer.js      # 파일 diff 뷰어
+│   ├── ToolApprovalPrompt.js  # 도구 승인 프롬프트
+│   ├── SetupWizard.js         # 초기 설정 마법사
+│   ├── HelpView.js            # 도움말 뷰
+│   ├── CurrentModelView.js    # 현재 모델 뷰
+│   ├── ModelListView.js       # 모델 목록 뷰
+│   └── ModelUpdatedView.js    # 모델 변경 확인 뷰
+├── hooks/                      # Custom hooks
+│   ├── useKeypress.js         # 키보드 이벤트
+│   └── useCompletion.js       # 자동완성
+├── design/                     # 디자인 시스템
+│   └── themeColors.js         # 테마 색상
+└── utils/                      # 유틸리티
+    ├── inputBuffer.js         # 입력 버퍼 (멀티라인)
+    ├── outputRedirector.js    # 출력 리다이렉터
+    ├── syntaxHighlighter.js   # 문법 하이라이터
+    ├── markdownParser.js      # 마크다운 파서
+    ├── diffUtils.js           # Diff 유틸리티
+    └── renderInkComponent.js  # Ink 컴포넌트 렌더러
+```
+
+## 아키텍처
+
+### 레이아웃 구조
+
+```
+┌──────────────────────────────────┐
+│ App (Main Layout)                │
+│  ├─ Header (Static)              │
+│  ├─ History (Static)             │
+│  ├─ SessionSpinner (Dynamic)     │
+│  ├─ Input                        │
+│  └─ Footer                       │
+└──────────────────────────────────┘
+```
+
+## UI 상태 관리
+
+UI 상태는 `uiEvents` 모듈을 통해 관리됩니다. 자세한 내용은 `src/system/ui_events.js`를 참조하세요.
+
+
+## 메시지 타입
+
+| Type | Icon | Color | Usage |
+|------|------|-------|-------|
+| `user` | `>` | Accent | 사용자 입력 |
+| `assistant` | `◆` | Info | AI 응답 |
+| `system` | `ℹ` | Secondary | 시스템 메시지 |
+| `error` | `✗` | Error | 에러 메시지 |
+| `tool` | `⚙` | Success | 도구 실행 결과 |
+| `thinking` | `💭` | Link | AI 사고 과정 |
+
+## 애니메이션
+
+### SessionSpinner
+- ink-spinner 라이브러리 사용
+- 경과 시간 표시 (초/분)
+
+## 성능 최적화
+
+1. **Static 컴포넌트**: 불변 히스토리는 Static으로 렌더링하여 리렌더링 방지
+2. **Dynamic 영역**: 진행 중인 작업만 동적으로 업데이트
+3. **조건부 렌더링**: 필요한 컴포넌트만 표시

package/src/{ui/components/SuggestionsDisplay.js → frontend/components/AutocompleteMenu.js}

@@ -1,12 +1,12 @@
 /**
- * Suggestions display component for autocompletion
+ * Autocomplete menu component for command suggestions
  */
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import { theme } from '../themes/semantic-tokens.js';
+import { theme } from '../design/themeColors.js';
 
-export function SuggestionsDisplay({ suggestions = [], activeIndex = 0 }) {
+export function AutocompleteMenu({ suggestions = [], activeIndex = 0 }) {
     if (suggestions.length === 0) {
         return null;
     }

package/src/{ui/components/HistoryItemDisplay.js → frontend/components/ConversationItem.js}

@@ -1,13 +1,12 @@
 /**
- * HistoryItemDisplay - Renders individual history items
+ * ConversationItem - Renders individual conversation items
  */
 
 import React, { useState, useEffect } from 'react';
 import { Box, Text } from 'ink';
-import { theme } from '../themes/semantic-tokens.js';
-import { StreamingIndicator } from './StreamingIndicator.js';
-import { colorizeCode } from '../utils/codeColorizer.js';
-import { renderMarkdown } from '../utils/markdownRenderer.js';
+import { theme } from '../design/themeColors.js';
+import { colorizeCode } from '../utils/syntaxHighlighter.js';
+import { renderMarkdown } from '../utils/markdownParser.js';
 import { FileDiffViewer } from './FileDiffViewer.js';
 import { getToolDisplayName, formatToolCall } from '../../system/tool_registry.js';
 import { getFileSnapshot } from '../../system/file_integrity.js';
@@ -18,12 +17,9 @@ import { createHash } from 'crypto';
 import { createDebugLogger } from '../../util/debug_log.js';
 import { prepareEditReplaceDiff } from '../utils/diffUtils.js';
 
-const debugLog = createDebugLogger('ui_components.log', 'HistoryItemDisplay');
+const debugLog = createDebugLogger('ui_components.log', 'ConversationItem');
 const OLDSTRING_LOG_FILE = join(DEBUG_LOG_DIR, 'oldstring.txt');
 
-// 스트리밍 인디케이터 및 operations 렌더링 활성화 여부
-const RENDER_STREAMING_INDICATORS = false;
-
 // Evidence logging for old_string NOT FOUND issues
 function logOldStringEvidence(evidence) {
     try {
@@ -183,7 +179,7 @@ function StandardDisplay({ item, isPending, hasFollowingResult, nextItem, isLast
 
     debugLog('---------- StandardDisplay START ----------');
     debugLog(`type: ${type}, toolName: ${toolName || 'N/A'}`);
-    debugLog(`text: ${text?.substring(0, 100) || 'N/A'}...`);
+    debugLog(`text: ${typeof text === 'string' ? text?.substring(0, 100) : JSON.stringify(text)?.substring(0, 100) || 'N/A'}...`);
     debugLog(`hasFollowingResult: ${hasFollowingResult}, isLastInBatch: ${isLastInBatch}`);
 
     // tool_start는 args를, tool_result는 toolInput을 사용
@@ -756,38 +752,21 @@ function StandardDisplay({ item, isPending, hasFollowingResult, nextItem, isLast
                 React.createElement(Text, {
                     color: theme.text.secondary
                 }, ` ${formattedArgs}`)
-            ),
-
-            RENDER_STREAMING_INDICATORS && operations.length > 0 && React.createElement(Box, {
-                flexDirection: "column",
-                marginLeft: 2,
-                marginTop: 1
-            },
-                operations.map((op, index) =>
-                    React.createElement(OperationDisplay, {
-                        key: op.id || index,
-                        operation: op,
-                        isPending
-                    })
-                )
-            ),
-
-            RENDER_STREAMING_INDICATORS && isPending && item.isStreaming && React.createElement(StreamingIndicator, {
-                message: item.streamingMessage || 'Processing...'
-            })
+            )
         );
     }
 
-    debugLog(`Rendering default display: icon="${config.icon}", text="${text?.substring(0, 50)}..."`);
+    debugLog(`Rendering default display: icon="${config.icon}", text="${typeof text === 'string' ? text?.substring(0, 50) : JSON.stringify(text)?.substring(0, 50) || 'N/A'}..."`);
     debugLog(`marginBottom: ${marginBottom}, marginTop: ${marginTop}`);
     debugLog(`operations count: ${operations.length}`);
     debugLog('---------- StandardDisplay END ----------');
 
     // Check if this is a denied tool result
     // Don't display tool_result when denied (already shown in tool_start)
-    const isDeniedResult = type === 'tool_result' && 
-                          (text?.includes('User denied tool execution') || 
-                           text?.includes('User denied code execution'));
+    const textStr = typeof text === 'string' ? text : '';
+    const isDeniedResult = type === 'tool_result' &&
+                          (textStr.includes('User denied tool execution') ||
+                           textStr.includes('User denied code execution'));
 
     if (isDeniedResult) {
         // Don't display tool_result when denied (already shown in tool_start)
@@ -798,41 +777,41 @@ function StandardDisplay({ item, isPending, hasFollowingResult, nextItem, isLast
     const isErrorResult = type === 'tool_result' && originalResult?.operation_successful === false;
     const textColor = isErrorResult ? theme.status.error : theme.text.primary;
 
+    // text가 구조화된 포맷인지 확인 (format_tool_result에서 반환)
+    let textContent;
+    if (text && typeof text === 'object' && text.type === 'formatted' && Array.isArray(text.parts)) {
+        // 구조화된 parts를 렌더링
+        textContent = React.createElement(Box, { flexDirection: "row" },
+            ...text.parts.map((part, idx) =>
+                React.createElement(Text, {
+                    key: idx,
+                    color: part.style?.color || textColor,
+                    bold: part.style?.bold || false
+                }, part.text)
+            )
+        );
+    } else {
+        // 일반 문자열
+        textContent = React.createElement(Text, {
+            color: textColor
+        }, text);
+    }
+
     return React.createElement(Box, { flexDirection: "column", marginBottom, marginTop, marginLeft: 2 },
         React.createElement(Box, { flexDirection: "row" },
             React.createElement(Text, { color: config.color, bold: config.bold }, config.icon),
             React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
-                React.createElement(Text, {
-                    color: textColor
-                }, text)
+                textContent
             )
-        ),
-
-        RENDER_STREAMING_INDICATORS && operations.length > 0 && React.createElement(Box, {
-            flexDirection: "column",
-            marginLeft: 2,
-            marginTop: 1
-        },
-            operations.map((op, index) =>
-                React.createElement(OperationDisplay, {
-                    key: op.id || index,
-                    operation: op,
-                    isPending
-                })
-            )
-        ),
-
-        RENDER_STREAMING_INDICATORS && isPending && item.isStreaming && React.createElement(StreamingIndicator, {
-            message: item.streamingMessage || 'Processing...'
-        })
+        )
     );
 }
 
-export function HistoryItemDisplay({ item, isPending = false, terminalWidth, nextItem, isLastInBatch = false }) {
-    debugLog('========== HistoryItemDisplay RENDER ==========');
+export function ConversationItem({ item, isPending = false, terminalWidth, nextItem, isLastInBatch = false }) {
+    debugLog('========== ConversationItem RENDER ==========');
     debugLog(`Item type: ${item.type}`);
     debugLog(`Item toolName: ${item.toolName || 'N/A'}`);
-    debugLog(`Item text: ${item.text?.substring(0, 100) || 'N/A'}...`);
+    debugLog(`Item text: ${typeof item.text === 'string' ? item.text?.substring(0, 100) : JSON.stringify(item.text)?.substring(0, 100) || 'N/A'}...`);
     debugLog(`isPending: ${isPending}, isLastInBatch: ${isLastInBatch}`);
     debugLog(`nextItem: ${nextItem ? nextItem.type : 'null'}`);
 
@@ -856,34 +835,3 @@ export function HistoryItemDisplay({ item, isPending = false, terminalWidth, nex
 
     return result;
 }
-
-const OPERATION_STATUS = {
-    running: { icon: '⟳', color: theme.status.info },
-    completed: { icon: '✓', color: theme.status.success },
-    error: { icon: '✗', color: theme.status.error },
-    pending: { icon: '○', color: theme.text.secondary },
-    default: { icon: '•', color: theme.text.secondary }
-};
-
-function getOperationStatus(status) {
-    return OPERATION_STATUS[status] || OPERATION_STATUS.default;
-}
-
-function OperationDisplay({ operation, isPending }) {
-    const { name, status, description, progress } = operation;
-    const statusConfig = getOperationStatus(status);
-
-    return React.createElement(Box, { flexDirection: "column", marginBottom: 0 },
-        React.createElement(Box, { flexDirection: "row" },
-            React.createElement(Text, { color: statusConfig.color }, `${statusConfig.icon} `),
-            React.createElement(Text, { color: theme.text.primary }, name),
-            description && React.createElement(Text, {
-                color: theme.text.secondary,
-                dimColor: true
-            }, ` - ${description}`)
-        ),
-        progress && React.createElement(Box, { marginLeft: 2 },
-            React.createElement(Text, { color: theme.text.secondary }, progress)
-        )
-    );
-}

package/src/{ui → frontend}/components/CurrentModelView.js

@@ -4,17 +4,15 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import { theme } from '../themes/semantic-tokens.js';
+import { theme } from '../design/themeColors.js';
 
 export function CurrentModelView({ provider, modelId, modelInfo }) {
     const providerColors = {
-        openai: 'cyan',
-        anthropic: 'magenta'
+        openai: 'cyan'
     };
 
     const providerEmojis = {
-        openai: '🤖',
-        anthropic: '🧠'
+        openai: '🤖'
     };
 
     return React.createElement(Box, {

package/src/{ui → frontend}/components/Footer.js

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import { theme } from '../themes/semantic-tokens.js';
+import { theme } from '../design/themeColors.js';
 import { OPENAI_MODELS } from '../../config/openai_models.js';
 
 export function Footer({ model = 'gpt-4', reasoningEffort = null, cwd = process.cwd() }) {
@@ -18,10 +18,8 @@ export function Footer({ model = 'gpt-4', reasoningEffort = null, cwd = process.
         displayModel = `${model} (${reasoningEffort})`;
     }
 
-    return React.createElement(Box, { justifyContent: "space-between", paddingX: 1, marginTop: 0 },
-        React.createElement(Box, null,
-            React.createElement(Text, { color: theme.text.link }, `CWD:${displayCwd}`)),
-        React.createElement(Box, null,
-            React.createElement(Text, { color: theme.text.accent }, displayModel))
+    return React.createElement(Box, { paddingX: 1, marginTop: 0, gap: 1 },
+        React.createElement(Text, { color: theme.brand.dark }, displayModel),
+        React.createElement(Text, { color: theme.brand.dark }, displayCwd)
     );
 }

package/src/{ui → frontend}/components/Header.js

@@ -5,7 +5,7 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import Gradient from 'ink-gradient';
-import { theme } from '../themes/semantic-tokens.js';
+import { theme } from '../design/themeColors.js';
 
 // const ASCII_LOGO = `
 //        d8888 8888888 8888888888 Y88b   d88P 8888888888                      888          
@@ -27,10 +27,7 @@ export function Header({ version = '1.0.0' }) {
     by 코드깎는노인
     `.split('\n').map(line => line.trim()).join("\n");
     return React.createElement(Box, { flexDirection: "column", marginBottom: 1, marginLeft: 2 },
-        theme.ui.gradient
-            ? React.createElement(Gradient, { colors: theme.ui.gradient },
-                React.createElement(Text, null, ASCII_LOGO))
-            : React.createElement(Text, { color: theme.text.accent }, ASCII_LOGO),
+        React.createElement(Text, { color: theme.brand.light }, ASCII_LOGO),
         React.createElement(Box, { justifyContent: "flex-left" },
             React.createElement(Text, { color: theme.text.secondary }, `AIEXEcode v${version}`)
         )

package/src/{ui/components/InputPrompt.js → frontend/components/Input.js}

@@ -1,26 +1,20 @@
 /**
- * Advanced InputPrompt component with multi-line support
+ * Advanced Input component with multi-line support
  */
 
 import React, { useCallback, useState, useRef, useEffect, useMemo } from 'react';
 import { Box, Text } from 'ink';
-import { theme } from '../themes/semantic-tokens.js';
+import { theme } from '../design/themeColors.js';
 import { useKeypress, keyMatchers, Command } from '../hooks/useKeypress.js';
 import { useCompletion } from '../hooks/useCompletion.js';
-import { SuggestionsDisplay } from './SuggestionsDisplay.js';
-import { cpSlice, cpLen } from '../utils/text-buffer.js';
+import { AutocompleteMenu } from './AutocompleteMenu.js';
+import { cpSlice, cpLen } from '../utils/inputBuffer.js';
 import { uiEvents } from '../../system/ui_events.js';
 import chalk from 'chalk';
 import stringWidth from 'string-width';
 
-const CTRL_EXIT_PROMPT_DURATION_MS = 1000;
-
-function InputPromptComponent({ buffer, onSubmit, onClearScreen, onExit, commands = [], placeholder = '  Type your message...', focus = true, isSessionRunning = false }) {
-    const [ctrlCPressedOnce, setCtrlCPressedOnce] = useState(false);
-    const [ctrlDPressedOnce, setCtrlDPressedOnce] = useState(false);
+function InputPromptComponent({ buffer, onSubmit, onClearScreen, onExit, commands = [], placeholder = '  What should I do?', focus = true, isSessionRunning = false }) {
     const [isExiting, setIsExiting] = useState(false);
-    const ctrlCTimerRef = useRef(null);
-    const ctrlDTimerRef = useRef(null);
 
     const completionRaw = useCompletion(buffer, commands);
 
@@ -35,28 +29,6 @@ function InputPromptComponent({ buffer, onSubmit, onClearScreen, onExit, command
     ]);
 
 
-    const handleExit = useCallback((
-        pressedOnce,
-        setPressedOnce,
-        timerRef
-    ) => {
-        if (pressedOnce) {
-            if (timerRef.current) {
-                clearTimeout(timerRef.current);
-            }
-            // Always call onExit callback
-            if (onExit) {
-                onExit();
-            }
-        } else {
-            setPressedOnce(true);
-            timerRef.current = setTimeout(() => {
-                setPressedOnce(false);
-                timerRef.current = null;
-            }, CTRL_EXIT_PROMPT_DURATION_MS);
-        }
-    }, [onExit]);
-
     const handleSubmitAndClear = useCallback((submittedValue) => {
         buffer.setText('');
         onSubmit(submittedValue);
@@ -86,7 +58,11 @@ function InputPromptComponent({ buffer, onSubmit, onClearScreen, onExit, command
 
         if (keyMatchers[Command.EXIT](key)) {
             if (buffer.text.length > 0) return;
-            handleExit(ctrlDPressedOnce, setCtrlDPressedOnce, ctrlDTimerRef);
+            // Direct exit
+            setIsExiting(true);
+            if (onExit) {
+                onExit();
+            }
             return;
         }
 
@@ -244,23 +220,14 @@ function InputPromptComponent({ buffer, onSubmit, onClearScreen, onExit, command
         buffer,
         onClearScreen,
         handleSubmitAndClear,
-        ctrlCPressedOnce,
-        ctrlDPressedOnce,
-        handleExit,
         completion,
         isSessionRunning,
-        isExiting
+        isExiting,
+        onExit
     ]);
 
     useKeypress(handleInput, { isActive: focus });
 
-    useEffect(() => {
-        return () => {
-            if (ctrlCTimerRef.current) clearTimeout(ctrlCTimerRef.current);
-            if (ctrlDTimerRef.current) clearTimeout(ctrlDTimerRef.current);
-        };
-    }, []);
-
     // Extract all needed values in one go to avoid multiple getter calls
     const linesToRender = useMemo(() => buffer.viewportVisualLines, [buffer.viewportVisualLines]);
     const [cursorVisualRowAbsolute, cursorVisualColAbsolute] = useMemo(() => buffer.visualCursor, [buffer.visualCursor]);
@@ -269,14 +236,9 @@ function InputPromptComponent({ buffer, onSubmit, onClearScreen, onExit, command
     const bufferTextLength = useMemo(() => buffer.text.length, [buffer.text]);
 
     return React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
-        ctrlCPressedOnce && React.createElement(Text, { color: theme.status.warning },
-            'Press Ctrl+C again to exit.'),
-        ctrlDPressedOnce && React.createElement(Text, { color: theme.status.warning },
-            'Press Ctrl+D again to exit.'),
-
         React.createElement(Box, {
             borderStyle: "round",
-            borderColor: focus ? theme.border.focused : theme.border.default,
+            borderColor: theme.brand.light,
             paddingX: 1,
             flexDirection: "row",
             alignItems: "flex-start",
@@ -285,7 +247,7 @@ function InputPromptComponent({ buffer, onSubmit, onClearScreen, onExit, command
             flexShrink: 0   // Prevent input from being squeezed by other elements
             // Don't set explicit width - let Ink calculate it
         },
-            React.createElement(Text, { color: theme.text.accent }, '> '),
+            React.createElement(Text, { color: theme.brand.light }, '> '),
             React.createElement(Box, { flexGrow: 1, flexDirection: "column" },
                 bufferTextLength === 0 && placeholder
                     ? (focus
@@ -316,7 +278,7 @@ function InputPromptComponent({ buffer, onSubmit, onClearScreen, onExit, command
             )
         ),
 
-        completion.showSuggestions && React.createElement(SuggestionsDisplay, {
+        completion.showSuggestions && React.createElement(AutocompleteMenu, {
             suggestions: completion.suggestions,
             activeIndex: completion.activeSuggestionIndex
         })
@@ -325,4 +287,4 @@ function InputPromptComponent({ buffer, onSubmit, onClearScreen, onExit, command
 
 // Don't memoize - buffer state changes frequently and we need to react to it
 // The buffer object reference is stable (from useRef), but its internal state changes
-export const InputPrompt = InputPromptComponent;
+export const Input = InputPromptComponent;

package/src/frontend/components/ModelListView.js

@@ -0,0 +1,106 @@
+/**
+ * Model List View Component - Ink-based UI for displaying available models
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../design/themeColors.js';
+
+export function ModelListView({ openaiModels }) {
+    const sections = [
+        // Header
+        React.createElement(Box, {
+            key: 'header',
+            borderStyle: 'double',
+            borderColor: 'gray',
+            paddingX: 2,
+            paddingY: 0,
+            justifyContent: 'center'
+        },
+            React.createElement(Text, {
+                bold: true,
+                color: 'whiteBright'
+            }, 'Available AI Models')
+        ),
+
+        React.createElement(Text, { key: 'spacer1' }, null),
+
+        // OpenAI Section
+        React.createElement(Box, {
+            key: 'openai-section',
+            flexDirection: 'column',
+            borderStyle: 'round',
+            borderColor: 'gray',
+            paddingX: 2,
+            paddingY: 1
+        },
+            React.createElement(Box, { flexDirection: 'column' },
+                React.createElement(Text, {
+                    bold: true,
+                    color: 'cyan'
+                }, '🤖 OpenAI Models'),
+                React.createElement(Text, {
+                    dimColor: true,
+                    italic: true
+                }, 'GPT-5 Series (Latest generation, recommended)'),
+                React.createElement(Text, null)
+            ),
+
+            openaiModels.map((model, index) =>
+                React.createElement(Box, {
+                    key: model.id,
+                    flexDirection: 'column',
+                    marginBottom: index < openaiModels.length - 1 ? 1 : 0
+                },
+                    React.createElement(Box, { flexDirection: 'row', gap: 1 },
+                        React.createElement(Text, { color: 'green', bold: true }, '•'),
+                        React.createElement(Text, {
+                            color: 'white',
+                            bold: true
+                        }, model.id)
+                    ),
+                    React.createElement(Box, {
+                        flexDirection: 'column',
+                        marginLeft: 2,
+                        gap: 0
+                    },
+                        React.createElement(Text, {
+                            color: theme.text.secondary
+                        }, `${model.name} - ${model.description}`),
+                        React.createElement(Text, {
+                            dimColor: true,
+                            italic: true
+                        }, `💰 $${model.pricing.input}/$${model.pricing.output} (input/output per 1M tokens)`)
+                    )
+                )
+            )
+        )
+    ];
+
+    sections.push(
+        React.createElement(Text, { key: 'spacer4' }, null),
+
+        // Footer
+        React.createElement(Box, {
+            key: 'footer',
+            flexDirection: 'column',
+            borderStyle: 'single',
+            borderColor: 'gray',
+            paddingX: 2,
+            paddingY: 1
+        },
+            React.createElement(Text, { bold: true }, '📖 Usage'),
+            React.createElement(Text, null, '  /model <model-id>'),
+            React.createElement(Text, { dimColor: true }, '  Example: /model gpt-5'),
+            React.createElement(Text, null),
+            React.createElement(Text, { bold: true }, '🔗 More Info'),
+            React.createElement(Text, { color: theme.text.link }, '  OpenAI: https://platform.openai.com/docs/pricing')
+        )
+    );
+
+    return React.createElement(Box, {
+        flexDirection: 'column',
+        paddingX: 2,
+        paddingY: 1
+    }, ...sections);
+}

package/src/{ui → frontend}/components/ModelUpdatedView.js

@@ -4,17 +4,15 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import { theme } from '../themes/semantic-tokens.js';
+import { theme } from '../design/themeColors.js';
 
 export function ModelUpdatedView({ provider, modelId, modelInfo, settingsFile, warning }) {
     const providerColors = {
-        openai: 'cyan',
-        anthropic: 'magenta'
+        openai: 'cyan'
     };
 
     const providerEmojis = {
-        openai: '🤖',
-        anthropic: '🧠'
+        openai: '🤖'
     };
 
     return React.createElement(Box, {

package/src/{ui → frontend}/components/SessionSpinner.js

@@ -6,7 +6,7 @@
 import React, { useState, useEffect, memo } from 'react';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
-import { theme } from '../themes/semantic-tokens.js';
+import { theme } from '../design/themeColors.js';
 
 // Internal component that handles the animation
 const SpinnerContent = memo(function SpinnerContent({ message, elapsedSeconds }) {
@@ -26,11 +26,11 @@ const SpinnerContent = memo(function SpinnerContent({ message, elapsedSeconds })
         marginBottom: 0
     },
         React.createElement(Box, { marginRight: 1 },
-            React.createElement(Text, { color: theme.text.accent },
+            React.createElement(Text, { color: theme.brand.light },
                 React.createElement(Spinner, { type: 'dots' })
             )
         ),
-        React.createElement(Text, { color: theme.text.accent }, message),
+        React.createElement(Text, { color: theme.brand.light }, message),
         React.createElement(Text, { color: theme.text.secondary },
             ` (${formatTime(elapsedSeconds)})`
         )