aegiscode 3.1.7 → 3.1.10

package/src/ui/components/dialog/SetupWizard.tsx

@@ -0,0 +1,297 @@
+/**
+ * SetupWizard - Interactive first-run setup guide
+ *
+ * Saves API keys to ~/.aegiscode/.env — config.json picks them up automatically.
+ * Flow: pick provider → enter key → add another? → done
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as os from 'node:os';
+import { themeManager } from '../../themes/index.js';
+import { appActions } from '../../../store/index.js';
+
+interface Provider {
+  id: string;
+  label: string;
+  envVar: string;
+  keyUrl: string;
+  noKey?: boolean;
+}
+
+const PROVIDERS: Provider[] = [
+  {
+    id: 'anthropic',
+    label: 'Anthropic (Claude)',
+    envVar: 'ANTHROPIC_API_KEY',
+    keyUrl: 'console.anthropic.com/settings/keys',
+  },
+  {
+    id: 'openai',
+    label: 'OpenAI (GPT)',
+    envVar: 'OPENAI_API_KEY',
+    keyUrl: 'platform.openai.com/api-keys',
+  },
+  {
+    id: 'deepseek',
+    label: 'DeepSeek',
+    envVar: 'DEEPSEEK_API_KEY',
+    keyUrl: 'platform.deepseek.com/api_keys',
+  },
+  {
+    id: 'groq',
+    label: 'Groq',
+    envVar: 'GROQ_API_KEY',
+    keyUrl: 'console.groq.com/keys',
+  },
+  {
+    id: 'gemini',
+    label: 'Google Gemini',
+    envVar: 'GEMINI_API_KEY',
+    keyUrl: 'aistudio.google.com/app/apikey',
+  },
+  {
+    id: 'ollama',
+    label: 'Ollama (local)',
+    envVar: '',
+    keyUrl: '',
+    noKey: true,
+  },
+];
+
+type Step = 'provider' | 'apikey' | 'another' | 'saving' | 'done';
+
+interface SetupWizardProps {
+  onComplete: () => void;
+}
+
+function readEnv(envPath: string): Record<string, string> {
+  const result: Record<string, string> = {};
+  if (!fs.existsSync(envPath)) return result;
+  for (const line of fs.readFileSync(envPath, 'utf-8').split('\n')) {
+    const eq = line.indexOf('=');
+    if (eq < 0 || line.trim().startsWith('#')) continue;
+    result[line.slice(0, eq).trim()] = line.slice(eq + 1).trim();
+  }
+  return result;
+}
+
+function writeEnv(envPath: string, vars: Record<string, string>): void {
+  const lines = Object.entries(vars).map(([k, v]) => `${k}=${v}`);
+  fs.writeFileSync(envPath, lines.join('\n') + '\n', 'utf-8');
+}
+
+export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
+  const theme = themeManager.getTheme();
+  const [step, setStep] = useState<Step>('provider');
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [apiKey, setApiKey] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState<string[]>([]); // env var names already saved this session
+
+  const selectedProvider = PROVIDERS[selectedIdx];
+  const envPath = path.join(os.homedir(), '.aegiscode', '.env');
+
+  const saveKeyToEnv = useCallback((provider: Provider, key: string) => {
+    const configDir = path.join(os.homedir(), '.aegiscode');
+    if (!fs.existsSync(configDir)) fs.mkdirSync(configDir, { recursive: true });
+    const vars = readEnv(envPath);
+    vars[provider.envVar] = key;
+    writeEnv(envPath, vars);
+  }, [envPath]);
+
+  const finalize = useCallback(() => {
+    setStep('saving');
+    // Inject saved env vars into process.env so ConfigManager picks them up immediately
+    const vars = readEnv(envPath);
+    for (const [k, v] of Object.entries(vars)) {
+      if (v && !v.startsWith('YOUR_')) process.env[k] = v;
+    }
+    appActions().setInitializationStatus('ready');
+    setStep('done');
+    setTimeout(() => onComplete(), 300);
+  }, [envPath, onComplete]);
+
+  useInput((input, key) => {
+    if (step === 'provider') {
+      if (key.upArrow) {
+        setSelectedIdx(i => (i > 0 ? i - 1 : PROVIDERS.length - 1));
+      } else if (key.downArrow) {
+        setSelectedIdx(i => (i < PROVIDERS.length - 1 ? i + 1 : 0));
+      } else if (key.return) {
+        if (selectedProvider.noKey) {
+          // Ollama needs no key — mark as done and ask for another
+          setSaved(s => [...s, 'Ollama']);
+          setStep('another');
+        } else {
+          setApiKey('');
+          setError(null);
+          setStep('apikey');
+        }
+      } else if (key.escape) {
+        if (saved.length > 0) {
+          finalize();
+        } else {
+          process.exit(0);
+        }
+      }
+    } else if (step === 'apikey') {
+      if (key.return) {
+        const trimmed = apiKey.trim();
+        if (!trimmed) {
+          setError('Key cannot be empty.');
+          return;
+        }
+        try {
+          saveKeyToEnv(selectedProvider, trimmed);
+          setSaved(s => [...s, selectedProvider.envVar]);
+          setApiKey('');
+          setError(null);
+          setStep('another');
+        } catch (err) {
+          setError((err as Error).message);
+        }
+      } else if (key.escape) {
+        setApiKey('');
+        setError(null);
+        setStep('provider');
+      } else if (key.backspace || key.delete) {
+        setApiKey(prev => prev.slice(0, -1));
+      } else if (input && !key.ctrl && !key.meta && input.length === 1) {
+        setApiKey(prev => prev + input);
+      }
+    } else if (step === 'another') {
+      if (input === 'y' || input === 'Y') {
+        setStep('provider');
+      } else if (input === 'n' || input === 'N' || key.return || key.escape) {
+        finalize();
+      }
+    }
+  });
+
+  const primary = theme.colors.primary;
+  const muted = theme.colors.text?.muted ?? 'gray';
+  const textPrimary = theme.colors.text?.primary ?? 'white';
+
+  if (step === 'saving' || step === 'done') {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Text color={primary}>◆ Saving configuration...</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text bold color={primary}>◆ ÆGIS — Setup</Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text color={muted}>
+          Keys are saved to <Text color={textPrimary}>~/.aegiscode/.env</Text>
+        </Text>
+      </Box>
+
+      {/* Saved so far */}
+      {saved.length > 0 && (
+        <Box marginBottom={1} flexDirection="column">
+          {saved.map(v => (
+            <Text key={v} color="green">✓ {v}</Text>
+          ))}
+        </Box>
+      )}
+
+      {step === 'provider' && (
+        <>
+          <Box marginBottom={1}>
+            <Text bold color={textPrimary}>Select provider:</Text>
+          </Box>
+          <Box flexDirection="column" marginBottom={1}>
+            {PROVIDERS.map((p, i) => {
+              const isSelected = i === selectedIdx;
+              const alreadySaved = saved.includes(p.envVar || 'Ollama');
+              return (
+                <Box key={p.id}>
+                  <Text color={isSelected ? primary : muted}>
+                    {isSelected ? '❯ ' : '  '}
+                  </Text>
+                  <Text bold={isSelected} color={isSelected ? textPrimary : muted}>
+                    {p.label}
+                  </Text>
+                  <Text color={muted}>
+                    {'  '}
+                  </Text>
+                  <Text color={alreadySaved ? 'green' : muted} dimColor={!alreadySaved}>
+                    {p.noKey ? '(no key needed)' : p.envVar}
+                    {alreadySaved ? ' ✓' : ''}
+                  </Text>
+                </Box>
+              );
+            })}
+          </Box>
+          <Box>
+            <Text color={muted} dimColor>
+              ↑↓ navigate  Enter select{saved.length > 0 ? '  Esc done' : '  Esc exit'}
+            </Text>
+          </Box>
+        </>
+      )}
+
+      {step === 'apikey' && (
+        <>
+          <Box marginBottom={1}>
+            <Text bold color={textPrimary}>
+              {selectedProvider.label}
+            </Text>
+          </Box>
+          <Box marginBottom={1}>
+            <Text color={muted} dimColor>
+              Get your key at: {selectedProvider.keyUrl}
+            </Text>
+          </Box>
+          <Box marginBottom={1}>
+            <Text color={muted}>{selectedProvider.envVar}=</Text>
+          </Box>
+          <Box marginBottom={1} borderStyle="round" borderColor={primary} paddingX={1}>
+            <Text color={textPrimary}>
+              {apiKey.length > 0
+                ? apiKey.slice(0, 8) + '•'.repeat(Math.max(0, apiKey.length - 8))
+                : ''}
+              <Text color={primary}>▏</Text>
+              {apiKey.length === 0 && (
+                <Text color={muted} dimColor>paste your key here</Text>
+              )}
+            </Text>
+          </Box>
+          {error && (
+            <Box marginBottom={1}>
+              <Text color="red">✗ {error}</Text>
+            </Box>
+          )}
+          <Box>
+            <Text color={muted} dimColor>Enter confirm  Esc back</Text>
+          </Box>
+        </>
+      )}
+
+      {step === 'another' && (
+        <>
+          <Box marginBottom={1}>
+            <Text color="green">✓ Saved to ~/.aegiscode/.env</Text>
+          </Box>
+          <Box>
+            <Text color={textPrimary}>Add another provider? </Text>
+            <Text color={primary} bold>y</Text>
+            <Text color={muted}>/</Text>
+            <Text color={primary} bold>n</Text>
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default SetupWizard;

package/src/ui/components/dialog/UpdatePrompt.tsx

@@ -0,0 +1,155 @@
+/**
+ * UpdatePrompt - 版本更新提示组件
+ * 
+ * 
+ * - Update now: 立即执行升级
+ * - Skip: 跳过本次提示
+ * - Skip until next version: 跳过当前版本的提示
+ */
+
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import type { VersionCheckResult } from '../../../services/VersionChecker.js';
+import {
+  setSkipUntilVersion,
+  getUpgradeCommand,
+  performUpgrade,
+  restartApp,
+} from '../../../services/VersionChecker.js';
+
+interface UpdatePromptProps {
+  versionInfo: VersionCheckResult;
+  onComplete: () => void;
+}
+
+type MenuOption = 'update' | 'skip' | 'skipUntil';
+
+const menuOptions: { key: MenuOption; label: string }[] = [
+  { key: 'update', label: 'Update now' },
+  { key: 'skip', label: 'Skip' },
+  { key: 'skipUntil', label: 'Skip until next version' },
+];
+
+export const UpdatePrompt: React.FC<UpdatePromptProps> = ({
+  versionInfo,
+  onComplete,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [updateResult, setUpdateResult] = useState<string | null>(null);
+
+  useInput(async (input, key) => {
+    if (isUpdating) return;
+
+    // 上下键选
+    if (key.upArrow) {
+      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : menuOptions.length - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setSelectedIndex((prev) => (prev < menuOptions.length - 1 ? prev + 1 : 0));
+      return;
+    }
+
+    // 数字键快速选
+    const numKey = parseInt(input, 10);
+    if (numKey >= 1 && numKey <= menuOptions.length) {
+      setSelectedIndex(numKey - 1);
+      return;
+    }
+
+    // Enter 确认选
+    if (key.return) {
+      const selected = menuOptions[selectedIndex];
+      await handleSelection(selected.key);
+    }
+  });
+
+  const handleSelection = async (option: MenuOption) => {
+    switch (option) {
+      case 'update':
+        setIsUpdating(true);
+        const result = await performUpgrade();
+        setUpdateResult(result.message);
+        if (result.success) {
+          // 升级成功，自动重启应
+          setTimeout(() => restartApp(), 1500);
+        } else {
+          // 升级失败，继续进入应
+          setTimeout(() => onComplete(), 2000);
+        }
+        break;
+
+      case 'skip':
+        onComplete();
+        break;
+
+      case 'skipUntil':
+        if (versionInfo.latestVersion) {
+          await setSkipUntilVersion(versionInfo.latestVersion);
+        }
+        onComplete();
+        break;
+    }
+  };
+
+  // 显示升级结
+  if (updateResult) {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Text>{updateResult}</Text>
+      </Box>
+    );
+  }
+
+  // 显示升级
+  if (isUpdating) {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Text color="yellow">⏳ Upgrading...</Text>
+        <Text color="gray">{getUpgradeCommand()}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      {/* 标题 */}
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          🎉 New version available!
+        </Text>
+      </Box>
+
+      {/* 版本信息 */}
+      <Box marginBottom={1}>
+        <Text>
+          <Text color="gray">{versionInfo.currentVersion}</Text>
+          <Text color="gray"> → </Text>
+          <Text color="green" bold>{versionInfo.latestVersion}</Text>
+        </Text>
+      </Box>
+
+      {/* 菜单选项 */}
+      <Box flexDirection="column" marginBottom={1}>
+        {menuOptions.map((option, index) => (
+          <Box key={option.key}>
+            <Text color={selectedIndex === index ? 'cyan' : 'white'}>
+              {selectedIndex === index ? '❯ ' : '  '}
+              {index + 1}. {option.label}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+
+      {/* 提示 */}
+      <Box>
+        <Text color="gray">
+          Use ↑↓ to navigate, Enter to select, or press 1-3
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default UpdatePrompt;

package/src/ui/components/dialog/index.ts

@@ -0,0 +1,8 @@
+/**
+ * 
+ */
+
+export { ConfirmationPrompt } from './ConfirmationPrompt.js';
+export { UpdatePrompt } from './UpdatePrompt.js';
+export { InteractiveSelector, type SelectorOption } from './InteractiveSelector.js';
+export { SetupWizard } from './SetupWizard.js';

package/src/ui/components/index.ts

@@ -0,0 +1,28 @@
+/**
+ * UI 组件导出
+ * 
+ * 
+ * - common/    通用组件 (ErrorBoundary, LoadingIndicator)
+ * - input/     输入组件 (CustomTextInput, InputArea)
+ * - markdown/  Markdown 渲染 (MessageRenderer, CodeHighlighter, parser)
+ * - dialog/    对话框组件 (ConfirmationPrompt, UpdatePrompt)
+ * - layout/    布局组件 (ChatStatusBar, MessageArea)
+ */
+
+// 通用组
+export * from './common/index.js';
+
+// 输入组
+export * from './input/index.js';
+
+// Markdown 组
+export * from './markdown/index.js';
+
+// 对话框组
+export * from './dialog/index.js';
+
+// 布局组
+export * from './layout/index.js';
+
+// 主界
+export { AegisInterface } from './AegisInterface.js';

package/src/ui/components/input/CommandSuggestions.tsx

@@ -0,0 +1,139 @@
+/**
+ * CommandSuggestions - Dropdown autocomplete for slash commands
+ *
+ * Shows fuzzy-matched command suggestions when user types "/..."
+ */
+
+import React, { useMemo, useEffect, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getCommandCompletions } from '../../../slash-commands/index.js';
+import { themeManager } from '../../themes/index.js';
+import { FocusId, focusManager } from '../../focus/index.js';
+
+interface CommandSuggestionsProps {
+  /** The current input value */
+  input: string;
+  /** Cursor position */
+  cursorPosition: number;
+  /** Callback to set input value (for tab-complete) */
+  onSelectSuggestion: (suggestion: string) => void;
+  /** Whether suggestions are visible */
+  visible: boolean;
+}
+
+export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
+  input,
+  cursorPosition,
+  onSelectSuggestion,
+  visible,
+}) => {
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const theme = themeManager.getTheme();
+
+  // Reset selection when suggestions change
+  const lastInputRef = useRef(input);
+  useEffect(() => {
+    if (lastInputRef.current !== input) {
+      setSelectedIndex(0);
+      lastInputRef.current = input;
+    }
+  }, [input]);
+
+  const suggestions = useMemo(() => {
+    if (!visible || !input.startsWith('/')) return [];
+
+    const partial = input.slice(0, cursorPosition);
+    const results = getCommandCompletions(partial);
+    const isListing = partial.trim() === '/';
+
+    if (isListing) {
+      // Alphabetical when showing all commands
+      results.sort((a, b) => a.command.localeCompare(b.command));
+    } else {
+      results.sort((a, b) => (b.matchScore ?? 0) - (a.matchScore ?? 0));
+    }
+    return results;
+  }, [input, cursorPosition, visible]);
+
+  // Clamp selected index
+  const clampedIndex = Math.min(selectedIndex, Math.max(0, suggestions.length - 1));
+
+  // Tab key: cycle through suggestions
+  useInput(
+    (_, key) => {
+      if (!visible || suggestions.length === 0) return;
+      if (focusManager.getCurrentFocus() !== FocusId.MAIN_INPUT) return;
+
+      if (key.tab && !key.shift) {
+        // Select next suggestion (cycle)
+        const next = (clampedIndex + 1) % suggestions.length;
+        setSelectedIndex(next);
+        return;
+      }
+
+      if (key.tab && key.shift) {
+        // Select previous suggestion
+        const prev = clampedIndex <= 0 ? suggestions.length - 1 : clampedIndex - 1;
+        setSelectedIndex(prev);
+        return;
+      }
+
+      // Enter on a suggestion: select it
+      if (key.return && suggestions.length > 0) {
+        const selected = suggestions[clampedIndex];
+        if (selected) {
+          // Replace the command part of the input
+          const beforeCursor = input.slice(0, cursorPosition);
+          const afterCursor = input.slice(cursorPosition);
+          const slashIdx = beforeCursor.lastIndexOf('/');
+
+          if (slashIdx !== -1) {
+            const newBefore = beforeCursor.slice(0, slashIdx);
+            const completed = `${newBefore}${selected.command} `;
+            onSelectSuggestion(completed + afterCursor);
+          }
+        }
+      }
+    },
+    { isActive: visible && suggestions.length > 0 }
+  );
+
+  if (!visible || suggestions.length === 0) return null;
+
+  return (
+    <Box
+      flexDirection="column"
+      marginLeft={1}
+      marginBottom={0}
+      borderStyle="round"
+      borderColor={theme.colors.border.light}
+      paddingX={1}
+      paddingY={0}
+    >
+      <Text dimColor>Commands ({suggestions.length}):</Text>
+      {suggestions.map((s, i) => {
+        const isSelected = i === clampedIndex;
+        return (
+          <Box key={s.command} flexDirection="row">
+            <Text>
+              {isSelected ? (
+                <Text color={theme.colors.primary} bold>{'>'}</Text>
+              ) : (
+                <Text> </Text>
+              )}{' '}
+              <Text color={isSelected ? theme.colors.primary : undefined} bold={isSelected}>
+                {s.command}
+              </Text>
+              <Text color={theme.colors.text.muted}> — {s.description}</Text>
+            </Text>
+          </Box>
+        );
+      })}
+      <Text dimColor>
+        Tab/Shift+Tab to navigate · Enter to select
+      </Text>
+    </Box>
+  );
+};
+
+export default CommandSuggestions;