aiexecode 1.0.157

package/src/frontend/components/Header.js

@@ -0,0 +1,42 @@
+/**
+ * Header component with ASCII art logo
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import Gradient from 'ink-gradient';
+import { theme } from '../design/themeColors.js';
+
+// const ASCII_LOGO = `
+//        d8888 8888888 8888888888 Y88b   d88P 8888888888                      888          
+//       d88888   888   888         Y88b d88P  888                             888          
+//      d88P888   888   888          Y88o88P   888                             888          
+//     d88P 888   888   8888888       Y888P    8888888    .d8888b .d88b.   .d88888  .d88b.  
+//    d88P  888   888   888           d888b    888       d88P"   d88""88b d88" 888 d8P  Y8b 
+//   d88P   888   888   888          d88888b   888       888     888  888 888  888 88888888 
+//  d8888888888   888   888         d88P Y88b  888       Y88b.   Y88..88P Y88b 888 Y8b.     
+// d88P     888 8888888 8888888888 d88P   Y88b 8888888888 "Y8888P "Y88P"   "Y88888  "Y8888  
+// `;
+
+export function Header({ version = '1.0.0', updateInfo = null }) {
+    const ASCII_LOGO = `
+    ▞▀▖▜▘▛▀▘▌ ▌▛▀▘        ▌
+    ▙▄▌▐ ▙▄ ▝▞ ▙▄ ▞▀▖▞▀▖▞▀▌▞▀▖
+    ▌ ▌▐ ▌  ▞▝▖▌  ▌ ▖▌ ▌▌ ▌▛▀
+    ▘ ▘▀▘▀▀▘▘ ▘▀▀▘▝▀ ▝▀ ▝▀▘▝▀▘
+    https://cokac.com
+    `.split('\n').map(line => line.trim()).join("\n");
+    return React.createElement(Box, { flexDirection: "column", marginBottom: 1, marginLeft: 2 },
+        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}`),
+            updateInfo && updateInfo.updateAvailable && React.createElement(Text, null,
+                React.createElement(Text, { color: '#666666' }, ' → '),
+                React.createElement(Text, { color: theme.status.warning }, `v${updateInfo.remoteVersion}`),
+                React.createElement(Text, null, ' available ('),
+                React.createElement(Text, { color: '#FFD700' }, 'npm install aiexecode -g'),
+                React.createElement(Text, null, ')')
+            )
+        )
+    );
+}

package/src/frontend/components/HelpView.js

@@ -0,0 +1,154 @@
+/**
+ * Help View Component - Ink-based UI for displaying available commands
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+export function HelpView({ commands, customCommands = [], skills = [] }) {
+    // 커맨드를 카테고리별로 분류
+    const aiCommands = commands.filter(cmd =>
+        ['model', 'apikey'].includes(cmd.name)
+    );
+
+    const sessionCommands = commands.filter(cmd =>
+        ['exit'].includes(cmd.name)
+    );
+
+    const otherCommands = commands.filter(cmd =>
+        !aiCommands.includes(cmd) && !sessionCommands.includes(cmd)
+    );
+
+    const renderCommandGroup = (title, commandList) => {
+        if (commandList.length === 0) return null;
+
+        return React.createElement(Box, {
+            flexDirection: 'column',
+            marginBottom: 1
+        },
+            React.createElement(Text, {
+                bold: true,
+                color: 'cyan'
+            }, title),
+
+            commandList.map(cmd =>
+                React.createElement(Box, {
+                    key: cmd.name,
+                    flexDirection: 'row',
+                    marginLeft: 2
+                },
+                    React.createElement(Text, { color: 'white', bold: true }, cmd.usage),
+                    React.createElement(Text, { color: 'gray' }, '  ' + cmd.description)
+                )
+            )
+        );
+    };
+
+    // 커스텀 커맨드 렌더링
+    const renderCustomCommands = () => {
+        if (customCommands.length === 0) return null;
+
+        return React.createElement(Box, {
+            flexDirection: 'column',
+            marginBottom: 1
+        },
+            React.createElement(Text, {
+                bold: true,
+                color: 'cyan'
+            }, 'Custom Commands'),
+
+            customCommands.map(cmd =>
+                React.createElement(Box, {
+                    key: cmd.name,
+                    flexDirection: 'row',
+                    marginLeft: 2
+                },
+                    React.createElement(Text, { color: 'white', bold: true },
+                        `/${cmd.name}${cmd.argumentHint ? ' ' + cmd.argumentHint : ''}`
+                    ),
+                    React.createElement(Text, { color: 'gray', dimColor: true },
+                        ` (${cmd.source})`
+                    ),
+                    cmd.description && React.createElement(Text, { color: 'gray' },
+                        '  ' + cmd.description.substring(0, 50) + (cmd.description.length > 50 ? '...' : '')
+                    )
+                )
+            )
+        );
+    };
+
+    // 스킬 렌더링
+    const renderSkills = () => {
+        if (skills.length === 0) return null;
+
+        return React.createElement(Box, {
+            flexDirection: 'column',
+            marginBottom: 1
+        },
+            React.createElement(Text, {
+                bold: true,
+                color: 'cyan'
+            }, 'Skills'),
+
+            skills.map(skill =>
+                React.createElement(Box, {
+                    key: skill.name,
+                    flexDirection: 'row',
+                    marginLeft: 2
+                },
+                    React.createElement(Text, { color: 'white', bold: true }, `/${skill.name}`),
+                    React.createElement(Text, { color: 'gray', dimColor: true },
+                        ` (${skill.source})`
+                    ),
+                    skill.description && React.createElement(Text, { color: 'gray' },
+                        '  ' + skill.description.substring(0, 50) + (skill.description.length > 50 ? '...' : '')
+                    )
+                )
+            )
+        );
+    };
+
+    return React.createElement(Box, {
+        flexDirection: 'column',
+        paddingY: 1
+    },
+        // Header
+        React.createElement(Text, {
+            bold: true,
+            color: 'whiteBright'
+        }, 'Available Commands'),
+
+        React.createElement(Text, null),
+
+        // AI Configuration Commands
+        renderCommandGroup('AI Configuration', aiCommands),
+
+        // Session Commands
+        renderCommandGroup('Session', sessionCommands),
+
+        // Other Commands
+        renderCommandGroup('Other', otherCommands),
+
+        // Custom Commands
+        renderCustomCommands(),
+
+        // Skills
+        renderSkills(),
+
+        // Footer
+        React.createElement(Box, {
+            flexDirection: 'column',
+            marginTop: 1
+        },
+            React.createElement(Text, {
+                dimColor: true
+            }, 'Type any command followed by arguments to execute'),
+            React.createElement(Text, {
+                dimColor: true
+            }, 'Custom commands: ~/.aiexe/commands/ or .aiexe/commands/'),
+            React.createElement(Text, {
+                dimColor: true
+            }, 'Skills: ~/.aiexe/skills/ or .aiexe/skills/')
+        )
+    );
+}

package/src/frontend/components/Input.js

@@ -0,0 +1,344 @@
+/**
+ * Advanced Input component with multi-line support
+ */
+
+import React, { useCallback, useState, useRef, useEffect, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../design/themeColors.js';
+import { useKeypress, keyMatchers, Command } from '../hooks/useKeypress.js';
+import { useCompletion } from '../hooks/useCompletion.js';
+import { useFileCompletion } from '../hooks/useFileCompletion.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';
+
+// 20개의 placeholder 메시지
+const PLACEHOLDER_MESSAGES = [
+    '  Fix all bugs in the codebase',
+    '  Add unit tests for the API',
+    '  Refactor the authentication module',
+    '  Optimize database queries',
+    '  Implement user profile page',
+    '  Add error handling to services',
+    '  Write documentation for utils',
+    '  Create REST API endpoints',
+    '  Set up CI/CD pipeline',
+    '  Improve code performance',
+    '  Add input validation',
+    '  Implement caching layer',
+    '  Fix linting errors',
+    '  Add logging functionality',
+    '  Create data migration scripts',
+    '  Implement search feature',
+    '  Add authentication middleware',
+    '  Optimize bundle size',
+    '  Update dependencies',
+    '  Add responsive design'
+];
+
+// 무작위 placeholder 선택 함수
+function getRandomPlaceholder() {
+    return PLACEHOLDER_MESSAGES[Math.floor(Math.random() * PLACEHOLDER_MESSAGES.length)];
+}
+
+function InputPromptComponent({ buffer, onSubmit, onClearScreen, onExit, commands = [], placeholder, focus = true, isSessionRunning = false }) {
+    const [isExiting, setIsExiting] = useState(false);
+
+    // placeholder가 제공되지 않으면 무작위로 선택 (컴포넌트 마운트 시 한 번만)
+    const defaultPlaceholder = useMemo(() => placeholder || getRandomPlaceholder(), []);
+
+    const commandCompletionRaw = useCompletion(buffer, commands);
+    const fileCompletionRaw = useFileCompletion(buffer);
+
+    // Stabilize completion objects to prevent handleInput from being recreated
+    const commandCompletion = useMemo(() => commandCompletionRaw, [
+        commandCompletionRaw.showSuggestions,
+        commandCompletionRaw.suggestions.length,
+        commandCompletionRaw.activeSuggestionIndex,
+        commandCompletionRaw.handleAutocomplete,
+        commandCompletionRaw.navigateUp,
+        commandCompletionRaw.navigateDown
+    ]);
+
+    const fileCompletion = useMemo(() => fileCompletionRaw, [
+        fileCompletionRaw.showSuggestions,
+        fileCompletionRaw.suggestions.length,
+        fileCompletionRaw.activeSuggestionIndex,
+        fileCompletionRaw.handleAutocomplete,
+        fileCompletionRaw.navigateUp,
+        fileCompletionRaw.navigateDown
+    ]);
+
+    // 파일 자동완성 우선, 그 다음 명령어 자동완성
+    const completion = fileCompletion.showSuggestions ? fileCompletion : commandCompletion;
+
+
+    const handleSubmitAndClear = useCallback((submittedValue) => {
+        buffer.setText('');
+        onSubmit(submittedValue);
+    }, [onSubmit, buffer]);
+
+    const handleInput = useCallback((key) => {
+        if (!focus) return;
+
+        // Block all input if exiting
+        if (isExiting) return;
+
+        // PRIORITY 1: Handle paste events
+        if (key.paste) {
+            buffer.handleInput(key);
+            return;
+        }
+
+        // PRIORITY 2: Exit commands
+        if (keyMatchers[Command.QUIT](key)) {
+            // Direct exit without confirmation
+            setIsExiting(true);
+            if (onExit) {
+                onExit();
+            }
+            return;
+        }
+
+        if (keyMatchers[Command.EXIT](key)) {
+            if (buffer.text.length > 0) return;
+            // Direct exit
+            setIsExiting(true);
+            if (onExit) {
+                onExit();
+            }
+            return;
+        }
+
+        // PRIORITY 4: Escape handling
+        if (keyMatchers[Command.ESCAPE](key)) {
+            // 1순위: 자동완성 목록이 열려있으면 목록만 닫기
+            if (completion.showSuggestions) {
+                completion.resetCompletionState();
+                return;
+            }
+
+            // 2순위: 입력 텍스트가 있으면 지우기
+            if (buffer.text !== '') {
+                buffer.setText('');
+                return;
+            }
+
+            // 3순위: 세션이 실행 중이면 중단 요청
+            if (isSessionRunning) {
+                // 중단 요청 전송
+                uiEvents.requestSessionInterrupt();
+                return;
+            }
+
+            // 4순위: 아무것도 없으면 무시
+            return;
+        }
+
+        // PRIORITY 5: Clear screen
+        if (keyMatchers[Command.CLEAR_SCREEN](key)) {
+            onClearScreen();
+            return;
+        }
+
+        // PRIORITY 6: Submit handling
+        if (keyMatchers[Command.SUBMIT](key)) {
+            // Block submission if session is running
+            if (isSessionRunning) {
+                return;
+            }
+
+            // If suggestions are shown, accept the active suggestion
+            if (completion.showSuggestions && completion.suggestions.length > 0) {
+                const targetIndex = completion.activeSuggestionIndex === -1 ? 0 : completion.activeSuggestionIndex;
+                const suggestion = completion.suggestions[targetIndex];
+
+                // 파일 자동완성인 경우 (@로 시작) 완성만 하고 submit하지 않음
+                if (suggestion.value.startsWith('@')) {
+                    completion.handleAutocomplete(targetIndex);
+                    return;
+                }
+
+                // 명령어 자동완성인 경우 완성 후 바로 실행
+                completion.handleAutocomplete(targetIndex);
+                const completedCommand = suggestion.value;
+                handleSubmitAndClear(completedCommand);
+                return;
+            }
+
+            if (buffer.text.trim()) {
+                const [row, col] = buffer.cursor;
+                const line = buffer.lines[row];
+                const charBefore = col > 0 ? cpSlice(line, col - 1, col) : '';
+
+                if (charBefore === '\\') {
+                    buffer.backspace();
+                    buffer.newline();
+                } else {
+                    handleSubmitAndClear(buffer.text);
+                }
+            }
+            return;
+        }
+
+        // PRIORITY 7: Newline
+        if (keyMatchers[Command.NEWLINE](key)) {
+            buffer.newline();
+            return;
+        }
+
+        // PRIORITY 8: Navigation commands
+        if (keyMatchers[Command.HOME](key)) {
+            buffer.move('home');
+            return;
+        }
+
+        if (keyMatchers[Command.END](key)) {
+            buffer.move('end');
+            return;
+        }
+
+        if (keyMatchers[Command.KILL_LINE_LEFT](key)) {
+            buffer.killLineLeft();
+            return;
+        }
+
+        if (keyMatchers[Command.KILL_LINE_RIGHT](key)) {
+            buffer.killLineRight();
+            return;
+        }
+
+        if (keyMatchers[Command.DELETE_WORD_BACKWARD](key)) {
+            buffer.deleteWordLeft();
+            return;
+        }
+
+        // PRIORITY 9: Autocomplete
+        if (keyMatchers[Command.ACCEPT_SUGGESTION](key)) {
+            if (completion.showSuggestions && completion.suggestions.length > 0) {
+                const targetIndex = completion.activeSuggestionIndex === -1 ? 0 : completion.activeSuggestionIndex;
+                completion.handleAutocomplete(targetIndex);
+                return;
+            }
+        }
+
+        // PRIORITY 10: Arrow keys (completion or navigation)
+        if (key.upArrow) {
+            if (completion.showSuggestions && completion.suggestions.length > 1) {
+                completion.navigateUp();
+                return;
+            }
+            buffer.move('up');
+            return;
+        }
+        if (key.downArrow) {
+            if (completion.showSuggestions && completion.suggestions.length > 1) {
+                completion.navigateDown();
+                return;
+            }
+            buffer.move('down');
+            return;
+        }
+        if (key.leftArrow) {
+            buffer.move('left');
+            return;
+        }
+        if (key.rightArrow) {
+            buffer.move('right');
+            return;
+        }
+
+        // PRIORITY 11: Backspace and Delete
+        if (key.backspace) {
+            const count = key.repeatCount || 1;
+            for (let i = 0; i < count; i++) {
+                buffer.backspace();
+            }
+            return;
+        }
+
+        if (key.delete) {
+            const count = key.repeatCount || 1;
+            for (let i = 0; i < count; i++) {
+                buffer.delete();
+            }
+            return;
+        }
+
+        // PRIORITY 12: Default input handling
+        buffer.handleInput(key);
+    }, [
+        focus,
+        buffer,
+        onClearScreen,
+        handleSubmitAndClear,
+        completion,
+        isSessionRunning,
+        isExiting,
+        onExit
+    ]);
+
+    useKeypress(handleInput, { isActive: focus });
+
+    // 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]);
+    const scrollVisualRow = useMemo(() => buffer.visualScrollRow, [buffer.visualScrollRow]);
+    const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow;
+    const bufferTextLength = useMemo(() => buffer.text.length, [buffer.text]);
+
+    return React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
+        React.createElement(Box, {
+            borderStyle: "round",
+            borderColor: theme.brand.light,
+            paddingX: 1,
+            flexDirection: "row",
+            alignItems: "flex-start",
+            minHeight: 3,
+            maxHeight: 12,  // Limit input height to prevent pushing other elements
+            flexShrink: 0   // Prevent input from being squeezed by other elements
+            // Don't set explicit width - let Ink calculate it
+        },
+            React.createElement(Text, { color: theme.brand.light }, '> '),
+            React.createElement(Box, { flexGrow: 1, flexDirection: "column" },
+                bufferTextLength === 0 && defaultPlaceholder
+                    ? (focus
+                        ? React.createElement(Text, null,
+                            chalk.inverse(defaultPlaceholder.slice(0, 1)),
+                            React.createElement(Text, { color: theme.text.secondary }, defaultPlaceholder.slice(1)))
+                        : React.createElement(Text, { color: theme.text.secondary }, defaultPlaceholder))
+                    : linesToRender.map((lineText, visualIdxInRenderedSet) => {
+                        const isOnCursorLine = focus && visualIdxInRenderedSet === cursorVisualRow;
+                        let display = lineText;
+
+                        // Render cursor inline
+                        if (isOnCursorLine && cursorVisualColAbsolute < cpLen(lineText)) {
+                            const charToHighlight = cpSlice(lineText, cursorVisualColAbsolute, cursorVisualColAbsolute + 1);
+                            const highlighted = chalk.inverse(charToHighlight);
+                            display =
+                                cpSlice(lineText, 0, cursorVisualColAbsolute) +
+                                highlighted +
+                                cpSlice(lineText, cursorVisualColAbsolute + 1);
+                        } else if (isOnCursorLine && cursorVisualColAbsolute === cpLen(lineText)) {
+                            display = lineText + chalk.inverse(' ');
+                        }
+
+                        return React.createElement(Box, { key: `line-${visualIdxInRenderedSet}`, height: 1 },
+                            React.createElement(Text, { color: theme.text.primary }, display)
+                        );
+                    })
+            )
+        ),
+
+        completion.showSuggestions && React.createElement(AutocompleteMenu, {
+            suggestions: completion.suggestions,
+            activeIndex: completion.activeSuggestionIndex
+        })
+    );
+}
+
+// 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 Input = InputPromptComponent;

package/src/frontend/components/LoadingIndicator.js

@@ -0,0 +1,31 @@
+/**
+ * Loading Indicator component
+ * Displays a loading spinner during initialization
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+
+export function LoadingIndicator({ tasks = [] }) {
+    return React.createElement(Box, {
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 10
+    },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { color: "cyan" },
+                React.createElement(Spinner, { type: "dots" }),
+                " Initializing..."
+            )
+        ),
+        tasks.length > 0 && tasks.map((task) =>
+            React.createElement(Text, {
+                key: task.id,
+                color: "gray",
+                dimColor: true
+            }, task.text)
+        )
+    );
+}

package/src/frontend/components/ModelListView.js

@@ -0,0 +1,49 @@
+/**
+ * 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({ modelsByProvider }) {
+    const sections = [
+        React.createElement(Text, {
+            key: 'header',
+            bold: true,
+            color: 'whiteBright'
+        }, 'Available AI Models'),
+
+        React.createElement(Text, { key: 'spacer1' }, null)
+    ];
+
+    // 모든 모델을 하나의 리스트로 통합
+    const allModels = [];
+    Object.keys(modelsByProvider).forEach(provider => {
+        const models = modelsByProvider[provider];
+        models.forEach(model => {
+            allModels.push(model);
+        });
+    });
+
+    // 모델 리스트 추가
+    allModels.forEach((model, index) => {
+        sections.push(
+            React.createElement(Text, {
+                key: model.id,
+                color: 'white'
+            }, `  • ${model.id}`)
+        );
+    });
+
+    sections.push(
+        React.createElement(Text, { key: 'spacer2' }, null),
+        React.createElement(Text, { key: 'usage', bold: true }, 'Usage:'),
+        React.createElement(Text, { key: 'usage-cmd' }, '  /model <model-id>'),
+        React.createElement(Text, { key: 'usage-example', dimColor: true }, '  Example: /model glm-4.5')
+    );
+
+    return React.createElement(Box, {
+        flexDirection: 'column'
+    }, ...sections);
+}

package/src/frontend/components/ModelUpdatedView.js

@@ -0,0 +1,22 @@
+/**
+ * Model Updated View Component - Ink-based UI for model update confirmation
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../design/themeColors.js';
+
+export function ModelUpdatedView({ provider, modelId, modelInfo, settingsFile, warning }) {
+    return React.createElement(Box, {
+        flexDirection: 'column'
+    },
+        React.createElement(Text, {
+            color: 'green'
+        }, `Model updated: ${modelId}`),
+
+        // Warning if API key not configured
+        warning && React.createElement(Text, {
+            color: 'yellow'
+        }, `Warning: ${warning.message} ${warning.hint}`)
+    );
+}