aiexecode 1.0.66 → 1.0.68

package/src/ai_based/pip_package_lookup.js

@@ -3,9 +3,12 @@ import { request, getModelForProvider } from "../system/ai_request.js";
 import { safeReadFile, safeWriteFile } from '../util/safe_fs.js';
 import { join } from 'path';
 import { CONFIG_DIR, ensureConfigDirectory } from "../util/config.js";
+import { createDebugLogger } from "../util/debug_log.js";
+
+const debugLog = createDebugLogger('pip_package_lookup.log', 'pip_package_lookup');
+
 dotenv.config({ quiet: true });
 
-function consolelog() { }
 // 이 파일은 import에 쓰인 이름을 실제 pip 설치 이름과 연결해 줍니다.
 // pip_package_installer가 정확한 패키지를 설치할 수 있도록 모든 모듈이 같은 이름을 공유하게 만듭니다.
 // Package name cache file path
@@ -28,9 +31,9 @@ async function savePackageStore(store) {
     try {
         await ensureConfigDirectory();
         await safeWriteFile(CACHE_FILE, JSON.stringify(store, null, 2), 'utf8');
-        consolelog(`✓ Package cache saved to ${CACHE_FILE}`);
+        debugLog(`✓ Package cache saved to ${CACHE_FILE}`);
     } catch (error) {
-        consolelog('Failed to save package cache:', error);
+        debugLog('Failed to save package cache:', error);
     }
 }
 
@@ -107,7 +110,7 @@ export async function checkValidPackageName(pkgList) {
     
     for (const pkg of pkgList) {
         if (packageStore.hasOwnProperty(pkg)) {
-            consolelog(`✓ Found in cache: ${pkg} -> ${packageStore[pkg]}`);
+            debugLog(`✓ Found in cache: ${pkg} -> ${packageStore[pkg]}`);
             // 캐시된 값이 null이 아닌 경우만 결과에 추가 (표준 라이브러리는 null로 저장됨)
             if (packageStore[pkg] !== null) {
                 cachedResults.push(packageStore[pkg]);
@@ -119,12 +122,12 @@ export async function checkValidPackageName(pkgList) {
     
     // 3. 캐시되지 않은 패키지가 없으면 캐시 결과만 반환
     if (uncachedPackages.length === 0) {
-        consolelog("All packages found in cache, no AI request needed");
+        debugLog("All packages found in cache, no AI request needed");
         return cachedResults;
     }
     
-    consolelog(`Cache miss for packages: ${uncachedPackages.join(', ')}`);
-    consolelog("Making AI request for uncached packages...");
+    debugLog(`Cache miss for packages: ${uncachedPackages.join(', ')}`);
+    debugLog("Making AI request for uncached packages...");
     
     // 4. AI에게 캐시되지 않은 패키지들만 요청
     const codeGenerationTemplate = [
@@ -169,14 +172,14 @@ export async function checkValidPackageName(pkgList) {
             packageStore[import_name] = pip_name;
             aiResults.push(pip_name);
             receivedMappings.add(import_name);
-            consolelog(`✓ Cached: ${import_name} -> ${pip_name}`);
+            debugLog(`✓ Cached: ${import_name} -> ${pip_name}`);
         }
         
         // 6. AI 응답에 포함되지 않은 패키지들은 표준 라이브러리로 간주하여 null로 캐시
         for (const pkg of uncachedPackages) {
             if (!receivedMappings.has(pkg)) {
                 packageStore[pkg] = null;
-                consolelog(`✓ Cached as standard library: ${pkg} -> null`);
+                debugLog(`✓ Cached as standard library: ${pkg} -> null`);
             }
         }
 
@@ -187,7 +190,7 @@ export async function checkValidPackageName(pkgList) {
         return [...cachedResults, ...aiResults];
         
     } catch (error) {
-        consolelog("Error validating package names:", error);
+        debugLog("Error validating package names:", error);
         // 에러 발생 시 캐시 결과와 원본 패키지명 반환
         return [...cachedResults, ...uncachedPackages];
     }

package/src/commands/apikey.js

@@ -1,30 +1,21 @@
 import { uiEvents } from '../system/ui_events.js';
 import { loadSettings, saveSettings, SETTINGS_FILE } from '../util/config.js';
 import { resetAIClients } from '../system/ai_request.js';
-import { ENABLE_ANTHROPIC_PROVIDER } from '../config/feature_flags.js';
 
 /**
  * /apikey 커맨드 - AI Provider 및 API 키 설정
  */
 export default {
     name: 'apikey',
-    description: ENABLE_ANTHROPIC_PROVIDER
-        ? 'Set AI provider and API key (openai or anthropic)'
-        : 'Set AI provider and API key (openai)',
-    usage: ENABLE_ANTHROPIC_PROVIDER
-        ? '/apikey <provider> <api-key>'
-        : '/apikey openai <api-key>',
+    description: 'Set AI provider and API key (openai)',
+    usage: '/apikey openai <api-key>',
     handler: async (args, context) => {
         // 인자 확인
         if (!args || args.length < 2) {
-            const usageExamples = ENABLE_ANTHROPIC_PROVIDER
-                ? `  /apikey openai sk-proj-...\n  /apikey anthropic sk-ant-...`
-                : `  /apikey openai sk-proj-...`;
-
             uiEvents.addSystemMessage(
                 `Please enter provider and API key.\n\n` +
                 `Usage:\n` +
-                usageExamples
+                `  /apikey openai sk-proj-...`
             );
             return;
         }
@@ -36,36 +27,19 @@ export default {
             const providerArg = args[0].toLowerCase();
 
             // Provider 검증
-            const validProviders = ENABLE_ANTHROPIC_PROVIDER
-                ? ['openai', 'anthropic']
-                : ['openai'];
-
-            if (!validProviders.includes(providerArg)) {
-                const validProvidersText = ENABLE_ANTHROPIC_PROVIDER
-                    ? 'openai, anthropic'
-                    : 'openai';
-
+            if (providerArg !== 'openai') {
                 uiEvents.addSystemMessage(
                     `Invalid provider: ${providerArg}\n\n` +
-                    `Valid providers: ${validProvidersText}`
+                    `Valid providers: openai`
                 );
                 return;
             }
 
-            const provider = providerArg;
             const apiKey = args[1];
 
-            // Provider 설정
-            settings.AI_PROVIDER = provider;
-
             // API 키 업데이트
-            if (provider === 'openai') {
-                settings.OPENAI_API_KEY = apiKey;
-                process.env.OPENAI_API_KEY = apiKey;
-            } else if (provider === 'anthropic') {
-                settings.ANTHROPIC_API_KEY = apiKey;
-                process.env.ANTHROPIC_API_KEY = apiKey;
-            }
+            settings.OPENAI_API_KEY = apiKey;
+            process.env.OPENAI_API_KEY = apiKey;
 
             // 설정 저장
             await saveSettings(settings);
@@ -80,7 +54,7 @@ export default {
 
             uiEvents.addSystemMessage(
                 `API configuration complete\n\n` +
-                `Provider: ${provider.toUpperCase()}\n` +
+                `Provider: OPENAI\n` +
                 `API Key: ${maskedKey}\n` +
                 `Saved to: ${SETTINGS_FILE}`
             );

package/src/commands/help.js

@@ -1,5 +1,7 @@
+import React from 'react';
 import { uiEvents } from '../system/ui_events.js';
-import { renderInkComponent } from '../ui/utils/renderInkComponent.js';
+import { renderInkComponent } from '../frontend/utils/renderInkComponent.js';
+import { HelpView } from '../frontend/components/HelpView.js';
 
 /**
  * /help 커맨드 - 사용 가능한 커맨드 목록 표시
@@ -11,9 +13,6 @@ export default {
     handler: async (args, context) => {
         const { commandRegistry } = context;
 
-        const React = await import('react');
-        const { HelpView } = await import('../ui/components/HelpView.js');
-
         const commands = commandRegistry.getCommands();
 
         const component = React.createElement(HelpView, {

package/src/commands/model.js

@@ -1,65 +1,37 @@
+import React from 'react';
 import { uiEvents } from '../system/ui_events.js';
 import { loadSettings, saveSettings, SETTINGS_FILE } from '../util/config.js';
 import { resetAIClients } from '../system/ai_request.js';
-import { CLAUDE_MODELS, getClaude4Models, getClaude3Models, DEFAULT_CLAUDE_MODEL } from '../config/claude_models.js';
 import { OPENAI_MODELS, getGPT5Models, DEFAULT_OPENAI_MODEL } from '../config/openai_models.js';
-import { renderInkComponent } from '../ui/utils/renderInkComponent.js';
-import { ENABLE_ANTHROPIC_PROVIDER } from '../config/feature_flags.js';
+import { renderInkComponent } from '../frontend/utils/renderInkComponent.js';
+import { ModelListView } from '../frontend/components/ModelListView.js';
+import { CurrentModelView } from '../frontend/components/CurrentModelView.js';
+import { ModelUpdatedView } from '../frontend/components/ModelUpdatedView.js';
 
 // 지원하는 모델 목록
 // OpenAI: https://platform.openai.com/docs/pricing
-// Anthropic: https://docs.claude.com/en/docs/about-claude/models/overview
 const MODELS = {
-    openai: OPENAI_MODELS,
-    anthropic: CLAUDE_MODELS
+    openai: OPENAI_MODELS
 };
 
 // 모델 ID로 provider 찾기
 function getProviderForModel(modelId) {
-    for (const [provider, models] of Object.entries(MODELS)) {
-        // Feature flag가 비활성화된 경우 anthropic provider 제외
-        if (!ENABLE_ANTHROPIC_PROVIDER && provider === 'anthropic') {
-            continue;
-        }
-        if (models[modelId]) {
-            return provider;
-        }
+    if (MODELS.openai[modelId]) {
+        return 'openai';
     }
     return null;
 }
 
 // 모든 모델 목록 표시
 async function listAllModels() {
-    const React = await import('react');
-    const { ModelListView } = await import('../ui/components/ModelListView.js');
-
     const gpt5Models = getGPT5Models();
     const openaiModels = gpt5Models.map(id => ({
         id,
         ...MODELS.openai[id]
     }));
 
-    // Feature flag에 따라 Claude 모델 표시 여부 결정
-    let claudeModels = null;
-    if (ENABLE_ANTHROPIC_PROVIDER) {
-        const claude4Models = getClaude4Models();
-        const claude3Models = getClaude3Models();
-
-        claudeModels = {
-            claude4: claude4Models.map(id => ({
-                id,
-                ...CLAUDE_MODELS[id]
-            })),
-            claude3: claude3Models.map(id => ({
-                id,
-                ...CLAUDE_MODELS[id]
-            }))
-        };
-    }
-
     const component = React.createElement(ModelListView, {
-        openaiModels,
-        claudeModels
+        openaiModels
     });
 
     const output = await renderInkComponent(component);
@@ -69,23 +41,12 @@ async function listAllModels() {
 // 현재 설정된 모델 표시
 async function showCurrentModel() {
     try {
-        const React = await import('react');
-        const { CurrentModelView } = await import('../ui/components/CurrentModelView.js');
-
         const settings = await loadSettings();
-        const provider = settings?.AI_PROVIDER || 'openai';
-
-        let currentModel;
-        if (provider === 'anthropic') {
-            currentModel = settings?.ANTHROPIC_MODEL || DEFAULT_CLAUDE_MODEL;
-        } else {
-            currentModel = settings?.OPENAI_MODEL || DEFAULT_OPENAI_MODEL;
-        }
-
-        const modelInfo = MODELS[provider]?.[currentModel];
+        const currentModel = settings?.OPENAI_MODEL || DEFAULT_OPENAI_MODEL;
+        const modelInfo = MODELS.openai?.[currentModel];
 
         const component = React.createElement(CurrentModelView, {
-            provider,
+            provider: 'openai',
             modelId: currentModel,
             modelInfo
         });
@@ -102,9 +63,7 @@ async function showCurrentModel() {
  */
 export default {
     name: 'model',
-    description: ENABLE_ANTHROPIC_PROVIDER
-        ? 'Select AI model (OpenAI or Anthropic)'
-        : 'Select AI model (OpenAI)',
+    description: 'Select AI model (OpenAI)',
     usage: '/model [model-id] or /model list',
     handler: async (args, context) => {
         // 인자가 없으면 현재 모델 표시
@@ -139,17 +98,9 @@ export default {
             // 현재 설정 로드
             const settings = await loadSettings();
 
-            // Provider와 모델 업데이트
-            settings.AI_PROVIDER = provider;
-            process.env.AI_PROVIDER = provider;
-            
-            if (provider === 'openai') {
-                settings.OPENAI_MODEL = modelId;
-                process.env.OPENAI_MODEL = modelId;
-            } else if (provider === 'anthropic') {
-                settings.ANTHROPIC_MODEL = modelId;
-                process.env.ANTHROPIC_MODEL = modelId;
-            }
+            // 모델 업데이트
+            settings.OPENAI_MODEL = modelId;
+            process.env.OPENAI_MODEL = modelId;
 
             // 설정 저장
             await saveSettings(settings);
@@ -161,22 +112,14 @@ export default {
             uiEvents.emit('model:changed', { model: modelId });
 
             // 성공 메시지
-            const React = await import('react');
-            const { ModelUpdatedView } = await import('../ui/components/ModelUpdatedView.js');
-
             const modelInfo = MODELS[provider][modelId];
 
             let warning = null;
-            if (provider === 'openai' && !settings.OPENAI_API_KEY) {
+            if (!settings.OPENAI_API_KEY) {
                 warning = {
                     message: 'OpenAI API key is not configured.',
                     hint: 'Set your API key with: `/apikey openai sk-proj-...`'
                 };
-            } else if (provider === 'anthropic' && !settings.ANTHROPIC_API_KEY) {
-                warning = {
-                    message: 'Anthropic API key is not configured.',
-                    hint: 'Set your API key with: `/apikey anthropic sk-ant-...`'
-                };
             }
 
             const component = React.createElement(ModelUpdatedView, {

package/src/commands/reasoning_effort.js

@@ -38,7 +38,7 @@ async function checkModelSupport() {
     const provider = settings?.AI_PROVIDER || 'openai';
 
     if (provider !== 'openai') {
-        return { supported: false, reason: 'Anthropic models do not support reasoning_effort.' };
+        return { supported: false, reason: 'Only OpenAI models support reasoning_effort.' };
     }
 
     const modelInfo = OPENAI_MODELS[currentModel];

package/src/config/feature_flags.js

@@ -3,17 +3,6 @@
  * 기능 활성화/비활성화를 제어하는 플래그들을 관리합니다.
  */
 
-/**
- * Anthropic 제공자 활성화 여부
- *
- * true: Anthropic(Claude) 모델을 사용자 인터페이스에 표시하고 사용 가능
- * false: Anthropic 관련 기능을 사용자 인터페이스에서 숨김 (구현은 보존됨)
- *
- * 이 플래그는 사용자가 접하는 UI, 명령어, 설정 화면 등에만 영향을 미치며,
- * 실제 API 호출 및 내부 구현 코드는 모두 보존됩니다.
- */
-export const ENABLE_ANTHROPIC_PROVIDER = false;
-
 /**
  * 에러 메시지 상세도 설정
  *
@@ -23,6 +12,5 @@ export const ENABLE_ANTHROPIC_PROVIDER = false;
 export const ERROR_VERBOSITY = 'concise';
 
 export default {
-  ENABLE_ANTHROPIC_PROVIDER,
   ERROR_VERBOSITY
 };

package/src/{ui → frontend}/App.js

@@ -7,11 +7,11 @@ import React, { useState, useEffect, useMemo, useCallback, memo, useRef } from '
 import { Box, Text, Newline, useStdout, Static } from 'ink';
 import { Header } from './components/Header.js';
 import { Footer } from './components/Footer.js';
-import { InputPrompt } from './components/InputPrompt.js';
+import { Input } from './components/Input.js';
 import { SessionSpinner } from './components/SessionSpinner.js';
-import { HistoryItemDisplay } from './components/HistoryItemDisplay.js';
+import { ConversationItem } from './components/ConversationItem.js';
 import { BlankLine } from './components/BlankLine.js';
-import { useTextBuffer } from './utils/text-buffer.js';
+import { useTextBuffer } from './utils/inputBuffer.js';
 import { uiEvents } from '../system/ui_events.js';
 import { getToolDisplayConfig, extractMessageFromArgs, formatToolCall, formatToolResult, getToolDisplayName } from '../system/tool_registry.js';
 import { ToolApprovalPrompt } from './components/ToolApprovalPrompt.js';
@@ -20,9 +20,6 @@ import { createDebugLogger } from '../util/debug_log.js';
 
 const debugLog = createDebugLogger('ui_app.log', 'App');
 
-// pendingHistory 렌더링 활성화 여부
-const RENDER_PENDING_HISTORY = false;
-
 /**
  * 빈 줄 추가 여부를 결정하는 함수
  *
@@ -179,13 +176,13 @@ function shouldAddBlankLineAfter(item, nextItem) {
  *
  * ## 기능
  *
- * 히스토리 아이템 배열을 받아서 HistoryItemDisplay와 BlankLine 컴포넌트를
+ * 히스토리 아이템 배열을 받아서 ConversationItem과 BlankLine 컴포넌트를
  * 적절히 조합한 React 엘리먼트 배열을 생성합니다.
  *
  * ## 처리 과정
  *
  * 각 아이템마다:
- * 1. HistoryItemDisplay 컴포넌트 생성
+ * 1. ConversationItem 컴포넌트 생성
  * 2. shouldAddBlankLineAfter()로 빈 줄 필요 여부 확인
  * 3. 필요하면 BlankLine 컴포넌트 추가
  *
@@ -193,16 +190,16 @@ function shouldAddBlankLineAfter(item, nextItem) {
  *
  * 입력: [user, tool_start, tool_result]
  * 출력:
- *   - HistoryItemDisplay(user)
+ *   - ConversationItem(user)
  *   - BlankLine (user 뒤)
- *   - HistoryItemDisplay(tool_start)
- *   - HistoryItemDisplay(tool_result)  <- tool_start와 붙음, 빈 줄 없음
+ *   - ConversationItem(tool_start)
+ *   - ConversationItem(tool_result)  <- tool_start와 붙음, 빈 줄 없음
  *   - BlankLine (tool_result 뒤)
  *
  * ## 키 관리
  *
  * - startKey부터 시작하여 순차적으로 증가
- * - HistoryItemDisplay: `${keyPrefix}-${n}`
+ * - ConversationItem: `${keyPrefix}-${n}`
  * - BlankLine: `${keyPrefix}-blank-${n}`
  * - 반환값의 nextKey: 다음에 사용할 키 번호
  *
@@ -234,7 +231,7 @@ function createItemsWithBlankLines(items, terminalWidth, startKey, keyPrefix = '
 
         // 1. 아이템 추가
         elements.push(
-            React.createElement(HistoryItemDisplay, {
+            React.createElement(ConversationItem, {
                 key: `${keyPrefix}-${currentKey}`,
                 item,
                 terminalWidth,
@@ -242,7 +239,7 @@ function createItemsWithBlankLines(items, terminalWidth, startKey, keyPrefix = '
                 isLastInBatch
             })
         );
-        debugLog(`[createItemsWithBlankLines] Added HistoryItemDisplay with key: ${keyPrefix}-${currentKey}`);
+        debugLog(`[createItemsWithBlankLines] Added ConversationItem with key: ${keyPrefix}-${currentKey}`);
         currentKey++;
 
         // 2. 빈 줄 추가 여부 확인 (shouldAddBlankLineAfter 함수 참조)
@@ -591,7 +588,8 @@ export function App({ onSubmit, onClearScreen, onExit, commands = [], model, ver
 
         debugLog(`[Transform] Transformed type: ${transformed.type}`);
         debugLog(`[Transform] Transformed toolName: ${transformed.toolName || 'N/A'}`);
-        debugLog(`[Transform] Transformed text (first 100 chars): ${transformed.text?.substring(0, 100) || 'N/A'}...`);
+        const textPreview1 = transformed.text ? (typeof transformed.text === 'string' ? transformed.text.substring(0, 100) : JSON.stringify(transformed.text).substring(0, 100)) : 'N/A';
+        debugLog(`[Transform] Transformed text (first 100 chars): ${textPreview1}...`);
         debugLog(`[Session] isSessionRunning: ${isSessionRunning}`);
 
         if (isSessionRunning) {
@@ -643,7 +641,8 @@ export function App({ onSubmit, onClearScreen, onExit, commands = [], model, ver
                     if (prev.length > 0) {
                         debugLog(`[Pair Matching] Pending items:`);
                         prev.forEach((p, idx) => {
-                            debugLog(`  [${idx}] type=${p.type}, toolName=${p.toolName || 'N/A'}, text=${p.text?.substring(0, 50) || 'N/A'}...`);
+                            const textPreview2 = p.text ? (typeof p.text === 'string' ? p.text.substring(0, 50) : JSON.stringify(p.text).substring(0, 50)) : 'N/A';
+                            debugLog(`  [${idx}] type=${p.type}, toolName=${p.toolName || 'N/A'}, text=${textPreview2}...`);
                         });
                     } else {
                         debugLog(`[Pair Matching] WARNING: Pending array is EMPTY - no tool_start to match!`);
@@ -746,7 +745,8 @@ export function App({ onSubmit, onClearScreen, onExit, commands = [], model, ver
 
                 // 쌍의 시작 부분 (tool_start, code_execution)은 pending에 추가
                 debugLog(`[Pending Add] Adding to pending (waiting for pair): ${newType}, toolName=${transformed.toolName || 'N/A'}`);
-                debugLog(`[Pending Add] Text: ${transformed.text?.substring(0, 80) || 'N/A'}...`);
+                const textPreview3 = transformed.text ? (typeof transformed.text === 'string' ? transformed.text.substring(0, 80) : JSON.stringify(transformed.text).substring(0, 80)) : 'N/A';
+                debugLog(`[Pending Add] Text: ${textPreview3}...`);
                 debugLog(`[Pending Add] Current pending items BEFORE add:`);
                 if (prev.length > 0) {
                     prev.forEach((p, idx) => {
@@ -779,9 +779,9 @@ export function App({ onSubmit, onClearScreen, onExit, commands = [], model, ver
     }, [isSessionRunning, transformEvent, terminalWidth]);
 
     // Render a single history item (Memoized)
-    const MemoizedHistoryItem = React.useMemo(() =>
-        React.memo(function MemoizedHistoryItem({ item, terminalWidth, nextItem, itemKey }) {
-            return React.createElement(HistoryItemDisplay, {
+    const MemoizedConversationItem = React.useMemo(() =>
+        React.memo(function MemoizedConversationItem({ item, terminalWidth, nextItem, itemKey }) {
+            return React.createElement(ConversationItem, {
                 item,
                 terminalWidth,
                 nextItem
@@ -791,14 +791,14 @@ export function App({ onSubmit, onClearScreen, onExit, commands = [], model, ver
 
     const renderHistoryItem = useCallback((item, index, prefix = 'history', allItems = []) => {
         const nextItem = allItems[index + 1];
-        return React.createElement(MemoizedHistoryItem, {
+        return React.createElement(MemoizedConversationItem, {
             key: `${prefix}-${index}`,
             itemKey: `${prefix}-${index}`,
             item,
             terminalWidth,
             nextItem
         });
-    }, [terminalWidth, MemoizedHistoryItem]);
+    }, [terminalWidth, MemoizedConversationItem]);
 
     // Handle session state transitions
     const handleSessionTransition = useCallback((wasRunning, isRunning) => {
@@ -914,8 +914,6 @@ export function App({ onSubmit, onClearScreen, onExit, commands = [], model, ver
         process.env.OPENAI_API_KEY = settings.OPENAI_API_KEY;
         process.env.OPENAI_MODEL = settings.OPENAI_MODEL;
         process.env.OPENAI_REASONING_EFFORT = settings.OPENAI_REASONING_EFFORT;
-        process.env.ANTHROPIC_API_KEY = settings.ANTHROPIC_API_KEY;
-        process.env.ANTHROPIC_MODEL = settings.ANTHROPIC_MODEL;
 
         // 클라이언트 리셋
         resetAIClients();
@@ -981,7 +979,7 @@ export function App({ onSubmit, onClearScreen, onExit, commands = [], model, ver
                 isRunning: isSessionRunning,
                 message: sessionMessage
             }),
-            !approvalRequest && React.createElement(InputPrompt, {
+            !approvalRequest && React.createElement(Input, {
                 buffer,
                 onSubmit: handleSubmit,
                 onClearScreen: handleClearScreen,

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;
     }