aiexecode 1.0.92 → 1.0.96

package/src/frontend/components/SetupWizard.js

@@ -5,7 +5,24 @@
 import React, { useState, useRef } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { theme } from '../design/themeColors.js';
-import { AI_MODELS, getAllModelIds, DEFAULT_MODEL } from '../../config/ai_models.js';
+import { AI_MODELS, getAllModelIds, getModelsByProvider, DEFAULT_MODEL } from '../../config/ai_models.js';
+
+/**
+ * API 키 스타일로 provider 감지
+ * @param {string} apiKey - API 키
+ * @returns {string|null} provider 이름 또는 null
+ */
+function detectProviderFromApiKey(apiKey) {
+    if (!apiKey || typeof apiKey !== 'string') return null;
+
+    if (apiKey.startsWith('sk-proj-')) {
+        return 'openai';
+    } else if (/^[a-f0-9]{32}\.[A-Za-z0-9]{16}$/.test(apiKey)) {
+        // Z.AI API 키 형식: 32자리 hex + '.' + 16자리 영숫자
+        return 'zai';
+    }
+    return null;
+}
 
 const STEPS = {
     API_KEY: 'api_key',
@@ -17,6 +34,8 @@ export function SetupWizard({ onComplete, onCancel }) {
     const [step, setStep] = useState(STEPS.API_KEY);
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [textInput, setTextInput] = useState('');
+    const [detectedProvider, setDetectedProvider] = useState(null);
+    const [errorMessage, setErrorMessage] = useState('');
 
     // settings를 ref로 관리하여 stale closure 문제 방지
     const settingsRef = useRef({
@@ -25,6 +44,14 @@ export function SetupWizard({ onComplete, onCancel }) {
         REASONING_EFFORT: 'medium'
     });
 
+    // 감지된 provider에 따른 모델 목록
+    const getAvailableModels = () => {
+        if (detectedProvider) {
+            return getModelsByProvider(detectedProvider);
+        }
+        return getAllModelIds();
+    };
+
     // 현재 스텝이 텍스트 입력인지 선택지인지 판단
     const isTextInputStep = step === STEPS.API_KEY;
 
@@ -41,14 +68,26 @@ export function SetupWizard({ onComplete, onCancel }) {
                 if (!textInput.trim()) {
                     return;
                 }
-                settingsRef.current.API_KEY = textInput.trim();
+                const apiKey = textInput.trim();
+                // API 키 스타일로 provider 감지
+                const provider = detectProviderFromApiKey(apiKey);
+                if (!provider) {
+                    // 유효하지 않은 API 키 형식
+                    setErrorMessage('Invalid API key. Please use OpenAI (sk-proj-...) or Z.AI format.');
+                    setTextInput('');
+                    return;
+                }
+                // 유효한 API 키
+                setErrorMessage('');
+                settingsRef.current.API_KEY = apiKey;
+                setDetectedProvider(provider);
                 setStep(STEPS.MODEL);
                 setTextInput('');
                 setSelectedIndex(0);
                 break;
 
             case STEPS.MODEL:
-                const models = getAllModelIds();
+                const models = getAvailableModels();
                 const selectedModel = models[selectedIndex];
                 settingsRef.current.MODEL = selectedModel;
 
@@ -97,6 +136,10 @@ export function SetupWizard({ onComplete, onCancel }) {
 
             if (input && !key.ctrl && !key.meta) {
                 setTextInput(prev => prev + input);
+                // 입력 시 에러 메시지 클리어
+                if (errorMessage) {
+                    setErrorMessage('');
+                }
             }
             return;
         }
@@ -118,7 +161,7 @@ export function SetupWizard({ onComplete, onCancel }) {
     const getMaxIndexForStep = (currentStep) => {
         switch (currentStep) {
             case STEPS.MODEL:
-                return getAllModelIds().length - 1;
+                return getAvailableModels().length - 1;
             case STEPS.REASONING_EFFORT:
                 return 3; // 4 options
             default:
@@ -145,16 +188,18 @@ export function SetupWizard({ onComplete, onCancel }) {
             case STEPS.API_KEY:
                 return React.createElement(Box, { flexDirection: 'column' },
                     React.createElement(Text, { bold: true, color: theme.text.accent }, '1. API Key:'),
-                    React.createElement(Text, { color: theme.text.secondary }, '   Get your API key from: https://platform.openai.com/account/api-keys or https://console.anthropic.com/settings/keys'),
+                    React.createElement(Text, { color: theme.text.secondary }, '   Get your API key from: https://platform.openai.com/account/api-keys or https://z.ai/manage-apikey/apikey-list'),
                     React.createElement(Text, null),
                     React.createElement(Box, {
                         borderStyle: 'round',
-                        borderColor: theme.border.focused,
+                        borderColor: errorMessage ? theme.status.error : theme.border.focused,
                         paddingX: 1
                     },
                         React.createElement(Text, null, textInput ? '*'.repeat(textInput.length) : ' ')
                     ),
-                    React.createElement(Text, null),
+                    errorMessage
+                        ? React.createElement(Text, { color: theme.status.error }, errorMessage)
+                        : React.createElement(Text, null),
                     React.createElement(Text, { dimColor: true }, 'Type your API key and press Enter')
                 );
 
@@ -163,7 +208,7 @@ export function SetupWizard({ onComplete, onCancel }) {
                     React.createElement(Text, { bold: true, color: theme.text.accent }, '2. Choose Model:'),
                     React.createElement(Text, null),
                     renderOptions(
-                        getAllModelIds().map(modelId => {
+                        getAvailableModels().map(modelId => {
                             const model = AI_MODELS[modelId];
                             return `${modelId} (${model.name})`;
                         })

package/src/frontend/utils/syntaxHighlighter.js

@@ -114,11 +114,11 @@ export function colorizeCode(code, language, showLineNumbers = true) {
         const lines = codeToHighlight.split('\n');
         const padWidth = String(lines.length).length;
 
-        return React.createElement(Box, { flexDirection: 'column' },
+        return React.createElement(Box, { flexDirection: 'column', width: '100%' },
             lines.map((line, index) => {
                 const contentToRender = highlightLine(line, language);
 
-                return React.createElement(Box, { key: index },
+                return React.createElement(Box, { key: index, width: '100%' },
                     showLineNumbers && React.createElement(Text, { color: 'gray' },
                         `${String(index + 1).padStart(padWidth, ' ')} `
                     ),
@@ -135,9 +135,9 @@ export function colorizeCode(code, language, showLineNumbers = true) {
         const lines = codeToHighlight.split('\n');
         const padWidth = String(lines.length).length;
 
-        return React.createElement(Box, { flexDirection: 'column' },
+        return React.createElement(Box, { flexDirection: 'column', width: '100%' },
             lines.map((line, index) =>
-                React.createElement(Box, { key: index },
+                React.createElement(Box, { key: index, width: '100%' },
                     showLineNumbers && React.createElement(Text, { color: 'gray' },
                         `${String(index + 1).padStart(padWidth, ' ')} `
                     ),

package/src/frontend/utils/toolUIFormatter.js

@@ -0,0 +1,261 @@
+/**
+ * Tool UI Formatter
+ * 도구 스키마에서 UI 포맷팅 로직을 분리하여 tools → frontend 의존성을 제거합니다.
+ */
+
+import { theme } from '../design/themeColors.js';
+import { toDisplayPath } from '../../util/path_helper.js';
+
+/**
+ * 도구별 UI 포맷터 정의
+ * 각 도구의 ui_display 설정을 중앙에서 관리합니다.
+ */
+export const toolUIFormatters = {
+    // ============================================
+    // File Reader
+    // ============================================
+    read_file: {
+        show_tool_call: true,
+        show_tool_result: true,
+        display_name: 'Read',
+        format_tool_call: (args) => {
+            return `(${toDisplayPath(args.filePath)})`;
+        },
+        format_tool_result: (result) => {
+            if (result.operation_successful) {
+                const lines = result.total_line_count || 0;
+                return {
+                    type: 'formatted',
+                    parts: [
+                        { text: 'Read ', style: {} },
+                        { text: String(lines), style: { color: theme.brand.light, bold: true } },
+                        { text: ` line${lines !== 1 ? 's' : ''}`, style: {} }
+                    ]
+                };
+            }
+            return result.error_message || 'Error reading file';
+        }
+    },
+
+    read_file_range: {
+        show_tool_call: true,
+        show_tool_result: true,
+        display_name: 'Read',
+        format_tool_call: (args) => {
+            return `(${toDisplayPath(args.filePath)}, lines ${args.startLine}-${args.endLine})`;
+        },
+        format_tool_result: (result) => {
+            if (result.operation_successful) {
+                const lineCount = result.file_content ? result.file_content.split('\n').length : 0;
+                return {
+                    type: 'formatted',
+                    parts: [
+                        { text: 'Read ', style: {} },
+                        { text: String(lineCount), style: { color: theme.brand.light, bold: true } },
+                        { text: ` line${lineCount !== 1 ? 's' : ''}`, style: {} }
+                    ]
+                };
+            }
+            return result.error_message || 'Error reading file';
+        }
+    },
+
+    // ============================================
+    // Code Editor
+    // ============================================
+    write_file: {
+        show_tool_call: true,
+        show_tool_result: true,
+        display_name: 'Write',
+        format_tool_call: (args) => {
+            return `(${toDisplayPath(args.file_path)})`;
+        },
+        format_tool_result: (result) => {
+            if (result.operation_successful) {
+                const lines = result.total_line_count || 0;
+                const action = result.file_existed ? 'Overwrote' : 'Created';
+                return {
+                    type: 'formatted',
+                    parts: [
+                        { text: `${action} `, style: {} },
+                        { text: String(lines), style: { color: theme.brand.light, bold: true } },
+                        { text: ` line${lines !== 1 ? 's' : ''}`, style: {} }
+                    ]
+                };
+            }
+            return result.error_message || 'Error writing file';
+        }
+    },
+
+    edit_file_replace: {
+        show_tool_call: true,
+        show_tool_result: true,
+        display_name: 'Replace',
+        format_tool_call: (args) => {
+            return `(${toDisplayPath(args.file_path)})`;
+        },
+        format_tool_result: (result) => {
+            if (result.operation_successful) {
+                const count = result.replacement_count || 0;
+                return {
+                    type: 'formatted',
+                    parts: [
+                        { text: 'Replaced ', style: {} },
+                        { text: String(count), style: { color: theme.brand.light, bold: true } },
+                        { text: ` occurrence${count !== 1 ? 's' : ''}`, style: {} }
+                    ]
+                };
+            }
+            return result.error_message || 'Error replacing string';
+        }
+    },
+
+    edit_file_range: {
+        show_tool_call: true,
+        show_tool_result: true,
+        display_name: 'Edit',
+        format_tool_call: (args) => {
+            return `(${toDisplayPath(args.file_path)}, lines ${args.start_line}-${args.end_line})`;
+        },
+        format_tool_result: (result) => {
+            if (result.operation_successful) {
+                const op = result.operation_type;
+                if (op === 'delete') {
+                    return `Deleted lines`;
+                } else if (op === 'insert') {
+                    return `Inserted lines`;
+                } else {
+                    return `Replaced lines`;
+                }
+            }
+            return result.error_message || 'Error editing file';
+        }
+    },
+
+    // ============================================
+    // Search Tools
+    // ============================================
+    glob_search: {
+        show_tool_call: true,
+        show_tool_result: true,
+        display_name: 'Search',
+        format_tool_call: (args) => {
+            const pattern = args.pattern || '';
+            return `(${pattern})`;
+        },
+        format_tool_result: (result) => {
+            if (result.operation_successful) {
+                const matches = result.total_matches || 0;
+                return {
+                    type: 'formatted',
+                    parts: [
+                        { text: 'Found ', style: {} },
+                        { text: String(matches), style: { color: theme.brand.light, bold: true } },
+                        { text: ` match${matches !== 1 ? 'es' : ''}`, style: {} }
+                    ]
+                };
+            }
+            return result.error_message || 'Search failed';
+        }
+    },
+
+    ripgrep: {
+        show_tool_call: true,
+        show_tool_result: true,
+        display_name: 'Grep',
+        format_tool_call: (args) => {
+            const pattern = args.pattern || '';
+            const shortened = pattern.length > 30 ? pattern.substring(0, 27) + '...' : pattern;
+            return `(${shortened})`;
+        },
+        format_tool_result: (result) => {
+            if (result.operation_successful) {
+                const matches = result.totalMatches || 0;
+                return {
+                    type: 'formatted',
+                    parts: [
+                        { text: 'Found ', style: {} },
+                        { text: String(matches), style: { color: theme.brand.light, bold: true } },
+                        { text: ` match${matches !== 1 ? 'es' : ''}`, style: {} }
+                    ]
+                };
+            }
+            return result.error_message || 'Search failed';
+        }
+    },
+
+    // ============================================
+    // Web Downloader
+    // ============================================
+    fetch_web_page: {
+        show_tool_call: true,
+        show_tool_result: true,
+        display_name: 'Fetch',
+        format_tool_call: (args) => {
+            const url = args.url || '';
+            const shortened = url.length > 50 ? url.substring(0, 47) + '...' : url;
+            return `(${shortened})`;
+        },
+        format_tool_result: (result) => {
+            if (result.operation_successful) {
+                const contentLength = result.content?.length || 0;
+                return {
+                    type: 'formatted',
+                    parts: [
+                        { text: 'Fetched ', style: {} },
+                        { text: String(contentLength), style: { color: theme.brand.light, bold: true } },
+                        { text: ' characters', style: {} }
+                    ]
+                };
+            }
+            return result.error_message || 'Fetch failed';
+        }
+    }
+};
+
+/**
+ * 도구 이름으로 UI 포맷터를 가져옵니다.
+ * @param {string} toolName - 도구 이름
+ * @returns {Object|null} UI 포맷터 또는 null
+ */
+export function getToolUIFormatter(toolName) {
+    return toolUIFormatters[toolName] || null;
+}
+
+/**
+ * 도구 호출을 포맷팅합니다.
+ * @param {string} toolName - 도구 이름
+ * @param {Object} args - 도구 인자
+ * @returns {string} 포맷팅된 문자열
+ */
+export function formatToolCall(toolName, args) {
+    const formatter = getToolUIFormatter(toolName);
+    if (formatter && formatter.format_tool_call) {
+        return formatter.format_tool_call(args);
+    }
+    return `(${JSON.stringify(args)})`;
+}
+
+/**
+ * 도구 결과를 포맷팅합니다.
+ * @param {string} toolName - 도구 이름
+ * @param {Object} result - 도구 실행 결과
+ * @returns {string|Object} 포맷팅된 결과
+ */
+export function formatToolResult(toolName, result) {
+    const formatter = getToolUIFormatter(toolName);
+    if (formatter && formatter.format_tool_result) {
+        return formatter.format_tool_result(result);
+    }
+    return result.operation_successful ? 'Success' : (result.error_message || 'Error');
+}
+
+/**
+ * 도구의 표시 이름을 가져옵니다.
+ * @param {string} toolName - 도구 이름
+ * @returns {string} 표시 이름
+ */
+export function getToolDisplayName(toolName) {
+    const formatter = getToolUIFormatter(toolName);
+    return formatter?.display_name || toolName;
+}