aiexecode 1.0.66 → 1.0.69

package/src/ui/components/ModelListView.js

@@ -1,214 +0,0 @@
-/**
- * Model List View Component - Ink-based UI for displaying available models
- */
-
-import React from 'react';
-import { Box, Text } from 'ink';
-import { theme } from '../themes/semantic-tokens.js';
-
-export function ModelListView({ openaiModels, claudeModels }) {
-    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)`)
-                    )
-                )
-            )
-        )
-    ];
-
-    // Anthropic 섹션들은 claudeModels가 있을 때만 추가
-    if (claudeModels) {
-        sections.push(
-            React.createElement(Text, { key: 'spacer2' }, null),
-
-            // Anthropic Claude 4.x Section
-            React.createElement(Box, {
-                key: 'claude4-section',
-                flexDirection: 'column',
-                borderStyle: 'round',
-                borderColor: 'gray',
-                paddingX: 2,
-                paddingY: 1
-            },
-                React.createElement(Box, { flexDirection: 'column' },
-                    React.createElement(Text, {
-                        bold: true,
-                        color: 'magenta'
-                    }, '🧠 Anthropic Claude Models'),
-                    React.createElement(Text, {
-                        dimColor: true,
-                        italic: true
-                    }, 'Claude 4.x Series (Latest)'),
-                    React.createElement(Text, null)
-                ),
-
-                claudeModels.claude4.map((model, index) =>
-                    React.createElement(Box, {
-                        key: model.id,
-                        flexDirection: 'column',
-                        marginBottom: index < claudeModels.claude4.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)`)
-                        )
-                    )
-                )
-            ),
-
-            React.createElement(Text, { key: 'spacer3' }, null),
-
-            // Claude 3.x Section
-            React.createElement(Box, {
-                key: 'claude3-section',
-                flexDirection: 'column',
-                borderStyle: 'round',
-                borderColor: 'gray',
-                paddingX: 2,
-                paddingY: 1
-            },
-                React.createElement(Box, { flexDirection: 'column' },
-                    React.createElement(Text, {
-                        dimColor: true,
-                        italic: true
-                    }, 'Claude 3.x Series'),
-                    React.createElement(Text, null)
-                ),
-
-                claudeModels.claude3.map((model, index) =>
-                    React.createElement(Box, {
-                        key: model.id,
-                        flexDirection: 'column',
-                        marginBottom: index < claudeModels.claude3.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'),
-            claudeModels && React.createElement(Text, { color: theme.text.link }, '  Anthropic: https://docs.claude.com/en/docs/about-claude/models/overview')
-        )
-    );
-
-    return React.createElement(Box, {
-        flexDirection: 'column',
-        paddingX: 2,
-        paddingY: 1
-    }, ...sections);
-}

package/src/ui/components/Notifications.js

@@ -1,55 +0,0 @@
-/**
- * Notifications - System notifications and warnings
- */
-
-import React from 'react';
-import { Box, Text } from 'ink';
-import { theme } from '../themes/semantic-tokens.js';
-import { useUIState, StreamingState } from '../contexts/UIStateContext.js';
-
-export function Notifications({ warnings = [], errors = [] }) {
-    const uiState = useUIState();
-
-    // Don't show notifications during streaming to avoid clutter
-    if (uiState.streamingState === StreamingState.Responding) {
-        return null;
-    }
-
-    if (warnings.length === 0 && errors.length === 0) {
-        return null;
-    }
-
-    return React.createElement(Box, {
-        flexDirection: "column",
-        marginBottom: 1
-    },
-        warnings.length > 0 && React.createElement(Box, {
-            borderStyle: "round",
-            borderColor: theme.status.warning,
-            paddingX: 1,
-            marginBottom: errors.length > 0 ? 1 : 0,
-            flexDirection: "column"
-        },
-            warnings.map((warning, index) =>
-                React.createElement(Text, {
-                    key: index,
-                    color: theme.status.warning
-                }, '⚠ ' + warning)
-            )
-        ),
-
-        errors.length > 0 && React.createElement(Box, {
-            borderStyle: "round",
-            borderColor: theme.status.error,
-            paddingX: 1,
-            flexDirection: "column"
-        },
-            errors.map((error, index) =>
-                React.createElement(Text, {
-                    key: index,
-                    color: theme.status.error
-                }, '✗ ' + error)
-            )
-        )
-    );
-}

package/src/ui/components/StreamingIndicator.js

@@ -1,36 +0,0 @@
-/**
- * StreamingIndicator - Animated indicator for streaming/processing state
- * 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 = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-const DOTS_FRAMES = ['.  ', '.. ', '...', '   '];
-
-// Isolated animation component
-const AnimatedFrame = memo(function AnimatedFrame({ type }) {
-    const [frameIndex, setFrameIndex] = useState(0);
-
-    useEffect(() => {
-        const frames = type === 'spinner' ? SPINNER_FRAMES : DOTS_FRAMES;
-        const interval = setInterval(() => {
-            setFrameIndex(prev => (prev + 1) % frames.length);
-        }, type === 'spinner' ? 80 : 400);
-
-        return () => clearInterval(interval);
-    }, [type]);
-
-    const frames = type === 'spinner' ? SPINNER_FRAMES : DOTS_FRAMES;
-    return React.createElement(Text, { color: theme.status.info }, frames[frameIndex] + ' ');
-});
-
-// Main component
-export const StreamingIndicator = memo(function StreamingIndicator({ message = 'Processing', type = 'spinner' }) {
-    return React.createElement(Box, { marginLeft: 2, marginTop: 0 },
-        React.createElement(AnimatedFrame, { type }),
-        React.createElement(Text, { color: theme.text.secondary }, message)
-    );
-});

package/src/ui/contexts/AppContext.js

@@ -1,25 +0,0 @@
-/**
- * AppContext - Global application state
- */
-
-import React, { createContext, useContext } from 'react';
-import { createDebugLogger } from '../../util/debug_log.js';
-
-const debugLog = createDebugLogger('ui_contexts.log', 'AppContext');
-
-const AppContext = createContext(null);
-
-export function AppProvider({ children, value }) {
-    debugLog('AppProvider initialized');
-    return React.createElement(AppContext.Provider, { value }, children);
-}
-
-export function useAppContext() {
-    const context = useContext(AppContext);
-    if (!context) {
-        debugLog('ERROR: useAppContext called outside AppProvider');
-        throw new Error('useAppContext must be used within AppProvider');
-    }
-    debugLog('useAppContext accessed successfully');
-    return context;
-}

package/src/ui/contexts/StreamingContext.js

@@ -1,20 +0,0 @@
-/**
- * StreamingContext - Real-time streaming state
- */
-
-import React, { createContext, useContext } from 'react';
-import { createDebugLogger } from '../../util/debug_log.js';
-
-const debugLog = createDebugLogger('ui_contexts.log', 'StreamingContext');
-
-const StreamingContext = createContext(null);
-
-export const StreamingContextProvider = StreamingContext.Provider;
-
-export function useStreaming() {
-    const context = useContext(StreamingContext);
-    debugLog('useStreaming accessed');
-    return context;
-}
-
-export { StreamingContext };

package/src/ui/contexts/UIStateContext.js

@@ -1,117 +0,0 @@
-/**
- * UIStateContext - UI state management
- */
-
-import React, { createContext, useContext, useState, useRef } from 'react';
-import { createDebugLogger } from '../../util/debug_log.js';
-
-const debugLog = createDebugLogger('ui_contexts.log', 'UIStateContext');
-
-const UIStateContext = createContext(null);
-
-export const StreamingState = {
-    Idle: 'idle',
-    Responding: 'responding',
-    WaitingForConfirmation: 'waiting_for_confirmation',
-    Executing: 'executing',
-    Completed: 'completed',
-    Error: 'error'
-};
-
-export function UIStateProvider({ children, initialState = {} }) {
-    debugLog(`UIStateProvider initializing - history items: ${(initialState.history || []).length}`);
-
-    const [history, setHistory] = useState(initialState.history || []);
-    const [pendingHistoryItems, setPendingHistoryItems] = useState([]);
-    const [streamingState, setStreamingState] = useState(StreamingState.Idle);
-    const [currentOperation, setCurrentOperation] = useState(null);
-    const [progressMessage, setProgressMessage] = useState('');
-    const [thought, setThought] = useState('');
-    const [mainAreaWidth, setMainAreaWidth] = useState(process.stdout.columns || 80);
-    const [terminalHeight, setTerminalHeight] = useState(process.stdout.rows || 24);
-    const [elapsedTime, setElapsedTime] = useState(0);
-    const [operations, setOperations] = useState([]);
-    const [isSessionRunning, setIsSessionRunning] = useState(false);
-    const [sessionMessage, setSessionMessage] = useState('Processing...');
-    const [historyRemountKey, setHistoryRemountKey] = useState(0);
-
-    const rootUiRef = useRef(null);
-    const mainControlsRef = useRef(null);
-
-    debugLog('UIStateProvider initialized with all state variables');
-
-    const value = {
-        // History
-        history,
-        setHistory,
-        pendingHistoryItems,
-        setPendingHistoryItems,
-
-        // Streaming state
-        streamingState,
-        setStreamingState,
-        currentOperation,
-        setCurrentOperation,
-        progressMessage,
-        setProgressMessage,
-        thought,
-        setThought,
-
-        // Operations tracking
-        operations,
-        setOperations,
-        addOperation: (operation) => {
-            debugLog(`addOperation: ${operation.type || 'unknown'} - ${operation.name || 'unnamed'}`);
-            setOperations(prev => [...prev, {
-                ...operation,
-                id: Date.now(),
-                startTime: Date.now(),
-                status: 'running'
-            }]);
-        },
-        updateOperation: (id, updates) => {
-            debugLog(`updateOperation: id=${id}, updates=${JSON.stringify(updates)}`);
-            setOperations(prev => prev.map(op =>
-                op.id === id ? { ...op, ...updates } : op
-            ));
-        },
-        completeOperation: (id) => {
-            debugLog(`completeOperation: id=${id}`);
-            setOperations(prev => prev.map(op =>
-                op.id === id ? { ...op, status: 'completed', endTime: Date.now() } : op
-            ));
-        },
-
-        // Layout
-        mainAreaWidth,
-        setMainAreaWidth,
-        terminalHeight,
-        setTerminalHeight,
-        rootUiRef,
-        mainControlsRef,
-
-        // Timer
-        elapsedTime,
-        setElapsedTime,
-
-        // Session state
-        isSessionRunning,
-        setIsSessionRunning,
-        sessionMessage,
-        setSessionMessage,
-
-        // History remount key for Static component optimization
-        historyRemountKey,
-        setHistoryRemountKey,
-    };
-
-    return React.createElement(UIStateContext.Provider, { value }, children);
-}
-
-export function useUIState() {
-    const context = useContext(UIStateContext);
-    if (!context) {
-        throw new Error('useUIState must be used within UIStateProvider');
-    }
-    return context;
-}

package/src/ui/example-usage.js

@@ -1,180 +0,0 @@
-/**
- * Example usage of the UI API
- *
- * This file demonstrates how to use the UI API to update the interface
- * during agentic coding operations.
- */
-
-import {
-    StreamingState,
-    addHistoryMessage,
-    setStreamingState,
-    setThought,
-    setProgressMessage,
-    startOperation,
-    updateOperation,
-    completeOperation,
-    runOperation,
-    batchUpdate
-} from './api.js';
-
-/**
- * Example: Simple progress update
- */
-export async function exampleSimpleProgress() {
-    // Start responding
-    setStreamingState(StreamingState.Responding);
-    setThought('Analyzing the code structure...');
-
-    // Simulate work
-    await new Promise(resolve => setTimeout(resolve, 2000));
-
-    // Update thought
-    setThought('Planning the implementation...');
-    await new Promise(resolve => setTimeout(resolve, 2000));
-
-    // Complete
-    setStreamingState(StreamingState.Completed);
-    addHistoryMessage({
-        type: 'assistant',
-        text: 'Analysis complete! Here\'s what I found...'
-    });
-}
-
-/**
- * Example: Multi-step operation with detailed progress
- */
-export async function exampleDetailedOperations() {
-    setStreamingState(StreamingState.Executing);
-
-    // Operation 1: Reading files
-    const readOpId = startOperation({
-        type: 'reading',
-        name: 'Reading source files',
-        description: 'Analyzing codebase structure'
-    });
-
-    await new Promise(resolve => setTimeout(resolve, 1000));
-
-    updateOperation(readOpId, {
-        progress: 50,
-        detail: 'Processing src/components...'
-    });
-
-    await new Promise(resolve => setTimeout(resolve, 1000));
-
-    completeOperation(readOpId);
-
-    // Operation 2: Analyzing
-    const analyzeOpId = startOperation({
-        type: 'analyzing',
-        name: 'Analyzing dependencies',
-        description: 'Checking import relationships'
-    });
-
-    await new Promise(resolve => setTimeout(resolve, 1500));
-    completeOperation(analyzeOpId);
-
-    // Operation 3: Writing code
-    const writeOpId = startOperation({
-        type: 'writing',
-        name: 'Writing new component',
-        description: 'Creating Button.js'
-    });
-
-    await new Promise(resolve => setTimeout(resolve, 2000));
-    completeOperation(writeOpId);
-
-    setStreamingState(StreamingState.Completed);
-    addHistoryMessage({
-        type: 'assistant',
-        text: 'Successfully created the new component!'
-    });
-}
-
-/**
- * Example: Using runOperation helper
- */
-export async function exampleAutoOperation() {
-    setStreamingState(StreamingState.Executing);
-
-    await runOperation({
-        type: 'building',
-        name: 'Building project',
-        description: 'Running npm run build'
-    }, async (update) => {
-        // Simulate build steps
-        update({ progress: 25, detail: 'Compiling TypeScript...' });
-        await new Promise(resolve => setTimeout(resolve, 1000));
-
-        update({ progress: 50, detail: 'Bundling assets...' });
-        await new Promise(resolve => setTimeout(resolve, 1000));
-
-        update({ progress: 75, detail: 'Optimizing output...' });
-        await new Promise(resolve => setTimeout(resolve, 1000));
-
-        update({ progress: 100, detail: 'Build complete!' });
-    });
-
-    setStreamingState(StreamingState.Completed);
-    addHistoryMessage({
-        type: 'assistant',
-        text: 'Build completed successfully!'
-    });
-}
-
-/**
- * Example: Batch updates
- */
-export async function exampleBatchUpdate() {
-    batchUpdate({
-        streamingState: StreamingState.Responding,
-        thought: 'Thinking about the best approach...',
-        progressMessage: 'Analyzing requirements',
-        addHistory: {
-            type: 'system',
-            text: 'Starting analysis...'
-        }
-    });
-
-    await new Promise(resolve => setTimeout(resolve, 2000));
-
-    batchUpdate({
-        streamingState: StreamingState.Completed,
-        thought: null,
-        progressMessage: null,
-        addHistory: {
-            type: 'assistant',
-            text: 'Analysis complete!'
-        }
-    });
-}
-
-/**
- * Example: Error handling
- */
-export async function exampleErrorHandling() {
-    const opId = startOperation({
-        type: 'testing',
-        name: 'Running tests',
-        description: 'npm test'
-    });
-
-    try {
-        await new Promise((resolve, reject) => {
-            setTimeout(() => reject(new Error('Test failed: timeout')), 1000);
-        });
-
-        completeOperation(opId);
-    } catch (error) {
-        updateOperation(opId, {
-            status: 'error',
-            detail: error.message
-        });
-
-        addHistoryMessage({
-            type: 'error',
-            text: `Test failed: ${error.message}`
-        });
-    }
-}

package/src/ui/hooks/useTerminalResize.js

@@ -1,39 +0,0 @@
-/**
- * Hook to handle terminal resize events
- * Clears the screen on resize to prevent rendering artifacts
- */
-
-import { useEffect } from 'react';
-import { useStdout } from 'ink';
-
-export function useTerminalResize(onResize) {
-    const { stdout } = useStdout();
-
-    useEffect(() => {
-        if (!stdout || typeof stdout.on !== 'function') {
-            return;
-        }
-
-        const handleResize = () => {
-            // Clear the screen to prevent artifacts
-            if (stdout.write && typeof stdout.write === 'function') {
-                // ANSI escape code to clear screen and reset cursor
-                stdout.write('\x1Bc');
-            }
-
-            if (onResize) {
-                onResize();
-            }
-        };
-
-        stdout.on('resize', handleResize);
-
-        return () => {
-            if (stdout.off && typeof stdout.off === 'function') {
-                stdout.off('resize', handleResize);
-            } else if (stdout.removeListener && typeof stdout.removeListener === 'function') {
-                stdout.removeListener('resize', handleResize);
-            }
-        };
-    }, [stdout, onResize]);
-}