aiexecode 1.0.66 → 1.0.68

package/src/ui/README.md

@@ -1,208 +0,0 @@
-# UI System Documentation
-
-이 디렉토리는 Ink 기반의 터미널 UI 시스템을 포함합니다.
-
-## 구조
-
-```
-ui/
-├── App.js                      # 메인 앱 진입점 (Context 제공)
-├── index.js                    # UI 렌더링 진입점
-├── api.js                      # UI 상태 업데이트 API
-├── example-usage.js            # API 사용 예제
-├── contexts/                   # React Context 시스템
-│   ├── AppContext.js          # 전역 앱 상태
-│   ├── UIStateContext.js      # UI 상태 관리
-│   └── StreamingContext.js    # 스트리밍 상태
-├── components/                 # UI 컴포넌트
-│   ├── Header.js              # 헤더 (로고)
-│   ├── Footer.js              # 푸터 (상태 정보)
-│   ├── HistoryItemDisplay.js  # 개별 히스토리 아이템
-│   ├── InputPrompt.js         # 입력 프롬프트
-│   ├── Composer.js            # 입력 영역 + 로딩 표시
-│   ├── Notifications.js       # 알림/경고 표시
-│   ├── LoadingIndicator.js    # 로딩 인디케이터
-│   ├── StreamingIndicator.js  # 스트리밍 애니메이션
-│   ├── AgenticProgressDisplay.js  # 에이전틱 작업 진행 표시
-│   └── SuggestionsDisplay.js  # 자동완성 제안
-├── hooks/                      # Custom hooks
-│   ├── useKeypress.js         # 키보드 이벤트
-│   └── useCompletion.js       # 자동완성
-├── themes/                     # 테마 시스템
-│   └── semantic-tokens.js     # 색상 토큰
-└── utils/                      # 유틸리티
-    └── text-buffer.js         # 텍스트 버퍼 (멀티라인)
-```
-
-## 아키텍처
-
-### Context 시스템
-
-**AppContext**: 전역 애플리케이션 상태
-- version, model, buffer, commands, callbacks
-
-**UIStateContext**: UI 상태 관리
-- history, pendingHistoryItems
-- streamingState, operations
-- layout dimensions (mainAreaWidth, terminalHeight)
-
-**StreamingContext**: 실시간 스트리밍 상태 전달
-
-### 레이아웃 구조
-
-```
-┌──────────────────────────────────┐
-│ App (Main Layout)                │
-│  ├─ Header (Static)              │
-│  ├─ History (Static)             │
-│  ├─ Pending Items (Dynamic)      │
-│  ├─ Notifications                │
-│  ├─ Composer                     │
-│  │   ├─ LoadingIndicator         │
-│  │   ├─ AgenticProgressDisplay   │
-│  │   └─ InputPrompt              │
-│  └─ Footer                       │
-└──────────────────────────────────┘
-```
-
-### StreamingState
-
-```javascript
-StreamingState = {
-    Idle: 'idle',                    // 대기 중
-    Responding: 'responding',        // AI 응답 중
-    WaitingForConfirmation: 'waiting_for_confirmation',
-    Executing: 'executing',          // 작업 실행 중
-    Completed: 'completed',          // 완료
-    Error: 'error'                   // 에러
-}
-```
-
-## UI API 사용법
-
-### 기본 사용
-
-```javascript
-import {
-    StreamingState,
-    setStreamingState,
-    setThought,
-    addHistoryMessage
-} from './ui/api.js';
-
-// AI가 생각 중일 때
-setStreamingState(StreamingState.Responding);
-setThought('코드 구조를 분석하고 있습니다...');
-
-// 완료 후 메시지 추가
-setStreamingState(StreamingState.Completed);
-addHistoryMessage({
-    type: 'assistant',
-    text: '분석이 완료되었습니다!'
-});
-```
-
-### 작업 진행 표시
-
-```javascript
-import { startOperation, updateOperation, completeOperation } from './ui/api.js';
-
-// 작업 시작
-const opId = startOperation({
-    type: 'reading',        // thinking, analyzing, reading, writing, editing, executing, etc.
-    name: '파일 읽기',
-    description: 'src/ 디렉토리 분석 중'
-});
-
-// 진행 상황 업데이트
-updateOperation(opId, {
-    progress: 50,
-    detail: 'components/ 처리 중...'
-});
-
-// 작업 완료
-completeOperation(opId);
-```
-
-### 자동 작업 관리
-
-```javascript
-import { runOperation } from './ui/api.js';
-
-await runOperation({
-    type: 'building',
-    name: '프로젝트 빌드',
-    description: 'npm run build'
-}, async (update) => {
-    update({ progress: 25, detail: 'TypeScript 컴파일 중...' });
-    await buildStep1();
-
-    update({ progress: 75, detail: '번들링 중...' });
-    await buildStep2();
-
-    update({ progress: 100, detail: '완료!' });
-});
-```
-
-### 배치 업데이트
-
-```javascript
-import { batchUpdate } from './ui/api.js';
-
-batchUpdate({
-    streamingState: StreamingState.Executing,
-    thought: '최선의 접근 방법을 고민 중...',
-    progressMessage: '요구사항 분석 중',
-    addHistory: {
-        type: 'system',
-        text: '분석 시작...'
-    }
-});
-```
-
-## 작업 타입 (operation types)
-
-| Type | Icon | Description |
-|------|------|-------------|
-| `thinking` | 🤔 | 생각/추론 중 |
-| `analyzing` | 🔍 | 분석 중 |
-| `reading` | 📖 | 파일 읽기 |
-| `writing` | ✏️ | 파일 쓰기 |
-| `editing` | 📝 | 파일 편집 |
-| `executing` | ⚙️ | 명령 실행 |
-| `building` | 🔨 | 빌드 |
-| `testing` | 🧪 | 테스트 |
-| `debugging` | 🐛 | 디버깅 |
-| `searching` | 🔎 | 검색 |
-| `planning` | 📋 | 계획 수립 |
-
-## 메시지 타입
-
-| Type | Icon | Color | Usage |
-|------|------|-------|-------|
-| `user` | `>` | Accent | 사용자 입력 |
-| `assistant` | `◆` | Info | AI 응답 |
-| `system` | `ℹ` | Secondary | 시스템 메시지 |
-| `error` | `✗` | Error | 에러 메시지 |
-| `tool` | `⚙` | Success | 도구 실행 결과 |
-| `thinking` | `💭` | Link | AI 사고 과정 |
-
-## 애니메이션
-
-### Spinner
-- 속도: 80ms per frame
-- 프레임: `['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']`
-
-### Dots
-- 속도: 400ms per frame
-- 프레임: `['.  ', '.. ', '...', '   ']`
-
-## 성능 최적화
-
-1. **Static 컴포넌트**: 불변 히스토리는 Static으로 렌더링하여 리렌더링 방지
-2. **Dynamic 영역**: 진행 중인 작업만 동적으로 업데이트
-3. **조건부 렌더링**: 필요한 컴포넌트만 표시
-
-## 예제
-
-자세한 사용 예제는 `example-usage.js` 파일을 참고하세요.

package/src/ui/api.js

@@ -1,167 +0,0 @@
-/**
- * UI API - Helper functions to update UI state from external code
- *
- * This module provides a simple API for the AI agent to update the UI
- * with progress information, operations, and streaming states.
- */
-
-let uiStateRef = null;
-
-/**
- * Initialize the UI API with the UI state reference
- */
-export function initializeUIAPI(uiState) {
-    uiStateRef = uiState;
-}
-
-/**
- * Add a message to the history
- */
-export function addHistoryMessage(message) {
-    if (!uiStateRef) return;
-
-    uiStateRef.setHistory(prev => [...prev, {
-        id: Date.now(),
-        ...message
-    }]);
-}
-
-/**
- * Add a pending history item (for streaming content)
- */
-export function addPendingMessage(message) {
-    if (!uiStateRef) return;
-
-    uiStateRef.setPendingHistoryItems(prev => [...prev, message]);
-}
-
-/**
- * Clear pending messages
- */
-export function clearPendingMessages() {
-    if (!uiStateRef) return;
-
-    uiStateRef.setPendingHistoryItems([]);
-}
-
-/**
- * Update streaming state
- */
-export function setStreamingState(state) {
-    if (!uiStateRef) return;
-
-    uiStateRef.setStreamingState(state);
-}
-
-/**
- * Set the current thought/reasoning message
- */
-export function setThought(thought) {
-    if (!uiStateRef) return;
-
-    uiStateRef.setThought(thought);
-}
-
-/**
- * Set progress message
- */
-export function setProgressMessage(message) {
-    if (!uiStateRef) return;
-
-    uiStateRef.setProgressMessage(message);
-}
-
-/**
- * Start a new operation
- * @param {Object} operation - { type, name, description }
- * @returns {number} operation ID
- */
-export function startOperation(operation) {
-    if (!uiStateRef) return null;
-
-    const id = Date.now();
-    uiStateRef.addOperation({
-        ...operation,
-        id,
-        startTime: Date.now(),
-        status: 'running'
-    });
-
-    return id;
-}
-
-/**
- * Update an existing operation
- * @param {number} id - Operation ID
- * @param {Object} updates - { status, progress, detail }
- */
-export function updateOperation(id, updates) {
-    if (!uiStateRef) return;
-
-    uiStateRef.updateOperation(id, updates);
-}
-
-/**
- * Complete an operation
- * @param {number} id - Operation ID
- */
-export function completeOperation(id) {
-    if (!uiStateRef) return;
-
-    uiStateRef.completeOperation(id);
-}
-
-/**
- * Add an operation with automatic completion
- * Useful for simple sequential operations
- */
-export async function runOperation(operation, asyncFn) {
-    const opId = startOperation(operation);
-
-    try {
-        const result = await asyncFn((updates) => {
-            updateOperation(opId, updates);
-        });
-
-        completeOperation(opId);
-        return result;
-    } catch (error) {
-        updateOperation(opId, {
-            status: 'error',
-            detail: error.message
-        });
-        throw error;
-    }
-}
-
-/**
- * Clear all operations
- */
-export function clearOperations() {
-    if (!uiStateRef) return;
-
-    uiStateRef.setOperations([]);
-}
-
-/**
- * Batch update multiple UI elements at once
- */
-export function batchUpdate(updates) {
-    if (!uiStateRef) return;
-
-    if (updates.streamingState !== undefined) {
-        setStreamingState(updates.streamingState);
-    }
-    if (updates.thought !== undefined) {
-        setThought(updates.thought);
-    }
-    if (updates.progressMessage !== undefined) {
-        setProgressMessage(updates.progressMessage);
-    }
-    if (updates.addHistory) {
-        addHistoryMessage(updates.addHistory);
-    }
-}
-
-// Export StreamingState enum for convenience
-export { StreamingState } from './contexts/UIStateContext.js';

package/src/ui/components/AgenticProgressDisplay.js

@@ -1,126 +0,0 @@
-/**
- * AgenticProgressDisplay - Shows agentic coding operations with detailed progress
- * Isolated animation to prevent parent re-renders
- */
-
-import React, { useState, useEffect, memo } from 'react';
-import { Box, Text } from 'ink';
-import { theme } from '../themes/semantic-tokens.js';
-
-const OPERATION_ICONS = {
-    thinking: '🤔',
-    analyzing: '🔍',
-    reading: '📖',
-    writing: '✏️',
-    editing: '📝',
-    executing: '⚙️',
-    building: '🔨',
-    testing: '🧪',
-    debugging: '🐛',
-    searching: '🔎',
-    planning: '📋',
-    completed: '✅'
-};
-
-const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-
-// operations 렌더링 활성화 여부
-const RENDER_OPERATIONS = false;
-
-// Isolated spinner component
-const SpinnerFrame = memo(function SpinnerFrame() {
-    const [frameIndex, setFrameIndex] = useState(0);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setFrameIndex(prev => (prev + 1) % SPINNER_FRAMES.length);
-        }, 80);
-
-        return () => clearInterval(interval);
-    }, []);
-
-    return React.createElement(Text, { color: theme.status.info },
-        SPINNER_FRAMES[frameIndex] + ' '
-    );
-});
-
-// Main component
-export const AgenticProgressDisplay = memo(function AgenticProgressDisplay({ operations = [] }) {
-    if (!RENDER_OPERATIONS || operations.length === 0) {
-        return null;
-    }
-
-    return React.createElement(Box, {
-        flexDirection: "column",
-        borderStyle: "round",
-        borderColor: theme.border.default,
-        paddingX: 1,
-        marginBottom: 1
-    },
-        React.createElement(Box, { marginBottom: 1 },
-            React.createElement(Text, { color: theme.text.accent, bold: true },
-                '🤖 Agentic Operations')
-        ),
-        operations.map((op, index) =>
-            React.createElement(OperationItem, {
-                key: op.id || index,
-                operation: op
-            })
-        )
-    );
-});
-
-const OperationItem = memo(function OperationItem({ operation }) {
-    const { type, name, status, progress, detail, startTime } = operation;
-
-    const icon = OPERATION_ICONS[type] || '•';
-    const statusColor = {
-        running: theme.status.info,
-        completed: theme.status.success,
-        error: theme.status.error,
-        waiting: theme.text.secondary
-    }[status] || theme.text.secondary;
-
-    const elapsed = startTime ? Math.floor((Date.now() - startTime) / 1000) : 0;
-
-    return React.createElement(Box, {
-        flexDirection: "column",
-        marginBottom: 0
-    },
-        React.createElement(Box, { flexDirection: "row" },
-            status === 'running' && React.createElement(SpinnerFrame),
-            React.createElement(Text, null, icon + ' '),
-            React.createElement(Text, { color: statusColor, bold: status === 'running' }, name),
-            status === 'running' && elapsed > 0 && React.createElement(Text, {
-                color: theme.text.secondary,
-                dimColor: true
-            }, ` (${elapsed}s)`)
-        ),
-        detail && React.createElement(Box, { marginLeft: 4 },
-            React.createElement(Text, {
-                color: theme.text.secondary,
-                dimColor: true
-            }, detail)
-        ),
-        progress && React.createElement(Box, { marginLeft: 4 },
-            React.createElement(ProgressBar, { progress })
-        )
-    );
-});
-
-const ProgressBar = memo(function ProgressBar({ progress }) {
-    const percentage = Math.min(100, Math.max(0, progress));
-    const width = 40;
-    const filled = Math.floor((percentage / 100) * width);
-    const empty = width - filled;
-
-    const bar = '█'.repeat(filled) + '░'.repeat(empty);
-
-    return React.createElement(Box, { flexDirection: "row" },
-        React.createElement(Text, { color: theme.status.info }, bar),
-        React.createElement(Text, {
-            color: theme.text.secondary,
-            dimColor: true
-        }, ` ${percentage.toFixed(0)}%`)
-    );
-});

package/src/ui/components/Composer.js

@@ -1,55 +0,0 @@
-/**
- * Composer - Input area with loading indicators and context display
- */
-
-import React from 'react';
-import { Box } from 'ink';
-import { InputPrompt } from './InputPrompt.js';
-import { LoadingIndicator } from './LoadingIndicator.js';
-import { AgenticProgressDisplay } from './AgenticProgressDisplay.js';
-import { SessionSpinner } from './SessionSpinner.js';
-import { useUIState, StreamingState } from '../contexts/UIStateContext.js';
-import { createDebugLogger } from '../../util/debug_log.js';
-
-const debugLog = createDebugLogger('ui_components.log', 'Composer');
-
-// 로딩/진행상황 렌더링 활성화 여부
-const RENDER_LOADING_PROGRESS = false;
-
-export function Composer({ onSubmit, onClearScreen, commands = [], buffer }) {
-    debugLog('Composer rendering');
-    const uiState = useUIState();
-
-    const showLoading = uiState.streamingState === StreamingState.Responding ||
-        uiState.streamingState === StreamingState.Executing;
-
-    debugLog(`Composer - streamingState: ${uiState.streamingState}, showLoading: ${showLoading}, operations: ${uiState.operations.length}`);
-
-    return React.createElement(Box, {
-        flexDirection: "column",
-        flexShrink: 0
-    },
-        RENDER_LOADING_PROGRESS && showLoading && React.createElement(LoadingIndicator, {
-            thought: uiState.thought,
-            currentLoadingPhrase: uiState.progressMessage,
-            elapsedTime: uiState.elapsedTime
-        }),
-
-        RENDER_LOADING_PROGRESS && uiState.operations.length > 0 && React.createElement(AgenticProgressDisplay, {
-            operations: uiState.operations
-        }),
-
-        React.createElement(SessionSpinner, {
-            isRunning: uiState.isSessionRunning,
-            message: uiState.sessionMessage
-        }),
-
-        React.createElement(InputPrompt, {
-            buffer,
-            onSubmit,
-            onClearScreen,
-            commands,
-            focus: true
-        })
-    );
-}

package/src/ui/components/LoadingIndicator.js

@@ -1,54 +0,0 @@
-/**
- * LoadingIndicator - Shows loading state with thought/progress message
- * Isolated animation to prevent parent re-renders
- */
-
-import React, { useState, useEffect, memo } from 'react';
-import { Box, Text } from 'ink';
-import { theme } from '../themes/semantic-tokens.js';
-
-const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-
-// Isolated spinner animation component
-const SpinnerFrame = memo(function SpinnerFrame() {
-    const [frameIndex, setFrameIndex] = useState(0);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setFrameIndex(prev => (prev + 1) % SPINNER_FRAMES.length);
-        }, 80);
-
-        return () => clearInterval(interval);
-    }, []);
-
-    return React.createElement(Text, { color: theme.status.info },
-        SPINNER_FRAMES[frameIndex] + ' '
-    );
-});
-
-// Main component
-export const LoadingIndicator = memo(function LoadingIndicator({ thought, currentLoadingPhrase, elapsedTime }) {
-    if (!thought && !currentLoadingPhrase && !elapsedTime) {
-        return null;
-    }
-
-    const displayTime = elapsedTime ? `${Math.floor(elapsedTime / 1000)}s` : '';
-
-    return React.createElement(Box, {
-        flexDirection: "column",
-        marginBottom: 0
-    },
-        thought && React.createElement(Box, null,
-            React.createElement(SpinnerFrame),
-            React.createElement(Text, { color: theme.text.link, italic: true }, '💭 ' + thought)
-        ),
-        currentLoadingPhrase && React.createElement(Box, null,
-            React.createElement(SpinnerFrame),
-            React.createElement(Text, { color: theme.text.secondary }, currentLoadingPhrase),
-            displayTime && React.createElement(Text, {
-                color: theme.text.secondary,
-                dimColor: true
-            }, ` (${displayTime})`)
-        )
-    );
-});