aegiscode 3.1.8 → 3.1.10

package/src/ui/test.ts

@@ -0,0 +1,189 @@
+/**
+ * UI Component Tests (D)
+ *
+ * Tests for MessageList, MessageRenderer, ErrorBoundary, ChatSearch,
+ * and other UI components.
+ *
+ * Run with: tsx src/ui/test.ts
+ *
+ * Rendering debugger:
+ *   tsx src/ui/test.ts --debug-rendering    Enable render debugger during tests
+ *   tsx src/ui/test.ts --render-report      Run tests then print render report
+ */
+
+import React from 'react';
+import { render } from 'ink';
+import { ErrorBoundary } from './components/common/ErrorBoundary.js';
+import { MessageList } from './components/layout/MessageList.js';
+import { WelcomeMessage } from './components/layout/WelcomeMessage.js';
+import { MessageSeparator } from './components/layout/MessageSeparator.js';
+import { ChatStatusBar } from './components/layout/ChatStatusBar.js';
+import { vanillaStore, getState } from '../store/index.js';
+import { startRenderDebugger, stopRenderDebugger, getRenderReport } from './render-debugger.js';
+
+let testsPassed = 0;
+let testsFailed = 0;
+
+function pass(msg: string) {
+  testsPassed++;
+  console.log(`  ✓ ${msg}`);
+}
+
+function fail(msg: string, error?: any) {
+  testsFailed++;
+  console.log(`  ✗ ${msg}${error ? `: ${error}` : ''}`);
+}
+
+async function runTests() {
+  console.log('\nUI Component Tests\n');
+
+  // Auto-start render debugger if --debug-rendering flag is set
+  const enableDebug = process.argv.includes('--debug-rendering');
+  if (enableDebug) {
+    startRenderDebugger({ reportInterval: 5000, verbose: false });
+  }
+
+  // ===== ErrorBoundary =====
+  console.log('ErrorBoundary:');
+
+  // 1. ErrorBoundary renders children normally
+  const GoodComponent = () => React.createElement('test-good', null, 'hello');
+  try {
+    const { unmount } = render(
+      React.createElement(ErrorBoundary, null,
+        React.createElement(GoodComponent),
+      ),
+    );
+    pass('renders children without error');
+    unmount();
+  } catch (e) {
+    fail('renders children without error', e);
+  }
+
+  // 2. ErrorBoundary catches errors
+  const BadComponent = () => { throw new Error('test error'); };
+  try {
+    const { unmount } = render(
+      React.createElement(ErrorBoundary,
+        { fallback: React.createElement('div', null, 'fallback'), children: React.createElement(BadComponent) },
+      ),
+    );
+    pass('catches rendering errors');
+    unmount();
+  } catch (e) {
+    // If we get here, ErrorBoundary caught it - that's fine for ink
+    pass('catches rendering errors (error propagated)');
+  }
+
+  // ===== MessageList =====
+  console.log('\nMessageList:');
+
+  // 3. MessageList renders welcome when empty
+  try {
+    const { unmount } = render(
+      React.createElement(MessageList, { terminalWidth: 80, terminalHeight: 24 }),
+    );
+    pass('renders without messages');
+    unmount();
+  } catch (e) {
+    fail('renders without messages', e);
+  }
+
+  // 4. MessageList renders messages
+  try {
+    // Add a test message directly to store
+    getState().session.messages.push({
+      id: 'test-1',
+      role: 'user',
+      content: 'Hello world',
+      timestamp: Date.now(),
+    });
+
+    const { unmount, rerender } = render(
+      React.createElement(MessageList, { terminalWidth: 80, terminalHeight: 24 }),
+    );
+
+    pass('renders with messages');
+    unmount();
+
+    // Clean up
+    getState().session.messages = [];
+  } catch (e) {
+    fail('renders with messages', e);
+  }
+
+  // ===== ChatStatusBar =====
+  console.log('\nChatStatusBar:');
+
+  // 5. ChatStatusBar renders
+  try {
+    const { unmount } = render(
+      React.createElement(ChatStatusBar, null),
+    );
+    pass('renders ChatStatusBar');
+    unmount();
+  } catch (e) {
+    fail('renders ChatStatusBar', e);
+  }
+
+  // ===== Store Integration =====
+  console.log('\nStore Integration:');
+
+  // 6. Messages have expected shape
+  const msg = { id: 'test-2', role: 'assistant' as const, content: 'test', timestamp: Date.now() };
+  getState().session.messages.push(msg);
+  const messages = getState().session.messages;
+  if (messages.length > 0 && messages[0].id && messages[0].role && messages[0].content) {
+    pass('messages have correct shape');
+  } else {
+    fail('messages missing required fields');
+  }
+
+  // 7. Message streaming state transitions
+  const streamId = 'test-stream-1';
+  getState().session.messages.push({
+    id: streamId,
+    role: 'assistant',
+    content: '',
+    timestamp: Date.now(),
+    isStreaming: true,
+  });
+
+  // Simulate streaming
+  const msgIndex = getState().session.messages.findIndex(m => m.id === streamId);
+  if (msgIndex >= 0) {
+    getState().session.messages[msgIndex].content = 'partial';
+    pass('streaming content update works');
+  } else {
+    fail('streaming message not found');
+  }
+
+  // Finish streaming
+  getState().session.messages[msgIndex].isStreaming = false;
+  pass('streaming completion works');
+
+  // Clean up
+  getState().session.messages = [];
+
+  // ===== Summary =====
+  console.log(`\n${'='.repeat(40)}`);
+  console.log(`Tests: ${testsPassed} passed, ${testsFailed} failed`);
+
+  // Print render report if debug was enabled or --render-report flag set
+  if (enableDebug || process.argv.includes('--render-report')) {
+    console.log(getRenderReport());
+  }
+
+  if (enableDebug) {
+    stopRenderDebugger();
+  }
+
+  if (testsFailed > 0) {
+    process.exit(1);
+  }
+}
+
+runTests().catch((error) => {
+  console.error('Test suite error:', error);
+  process.exit(1);
+});

package/src/ui/themes/ThemeManager.ts

@@ -0,0 +1,332 @@
+/**
+ * 
+ * 
+ * 
+ * 
+ */
+
+import { execSync } from 'node:child_process';
+import type { Theme, ThemePreset, RoleStyle, ColorMode } from './types.js';
+import { defaultTheme } from './defaultTheme.js';
+import { darkTheme } from './darkTheme.js';
+import { lightTheme } from './lightTheme.js';
+import { aegisTheme } from './aegisTheme.js';
+import { configManager } from '../../config/ConfigManager.js';
+
+/**
+ * 
+ * 
+ * 
+ * 1. macOS 系统级暗色模式
+ * 2. COLORFGBG 环境变量（一些终端会设置）
+ * 3. 默认返回 unknown
+ */
+function detectColorMode(): ColorMode {
+  // 1. macOS 系统级检
+  if (process.platform === 'darwin') {
+    try {
+      const result = execSync('defaults read -g AppleInterfaceStyle 2>/dev/null', {
+        encoding: 'utf-8',
+        timeout: 1000,
+      }).trim();
+      if (result === 'Dark') {
+        return 'dark';
+      }
+    } catch {
+      // 如果命令失败或返回空，说明是亮色模
+      return 'light';
+    }
+  }
+
+  // 2. 检查 COLORFGBG 环境变
+  // 格式: "foreground;background" 如 "15;0" (白字黑底) 或 "0;15" (黑字白
+  const colorFgBg = process.env.COLORFGBG;
+  if (colorFgBg) {
+    const parts = colorFgBg.split(';');
+    if (parts.length >= 2) {
+      const bg = parseInt(parts[parts.length - 1], 10);
+      // 背景色 0-7 通常是暗色，8-15 通常是亮
+      // 0=黑, 7=白(暗), 8=亮黑(灰), 15=亮
+      if (!isNaN(bg)) {
+        if (bg === 0 || bg <= 6) {
+          return 'dark';
+        } else if (bg === 7 || bg >= 8) {
+          return 'light';
+        }
+      }
+    }
+  }
+
+  // 3. 检查常见终端的默认模
+  const termProgram = process.env.TERM_PROGRAM?.toLowerCase();
+  if (termProgram) {
+    // VS Code 集成终端通常跟随编辑器主
+    if (termProgram === 'vscode') {
+      // VS Code 的 VSCODE_THEME_KIND 变
+      const themeKind = process.env.VSCODE_THEME_KIND;
+      if (themeKind === 'vscode-dark' || themeKind === 'vscode-high-contrast') {
+        return 'dark';
+      } else if (themeKind === 'vscode-light' || themeKind === 'vscode-high-contrast-light') {
+        return 'light';
+      }
+    }
+  }
+
+  return 'unknown';
+}
+
+/**
+ * 
+ */
+const presetThemes: ThemePreset[] = [
+  {
+    id: 'default',
+    name: 'Default',
+    description: 'Balanced theme (works on most terminals)',
+    theme: defaultTheme,
+  },
+  {
+    id: 'aegis',
+    name: 'ÆGIS',
+    description: 'ÆGIS teal — the signature brand theme',
+    theme: aegisTheme,
+  },
+  {
+    id: 'light',
+    name: 'Light',
+    description: 'Optimized for light/white terminal backgrounds',
+    theme: lightTheme,
+  },
+  {
+    id: 'dark',
+    name: 'Dark',
+    description: 'Dark theme for dark terminal backgrounds',
+    theme: darkTheme,
+  },
+  {
+    id: 'ocean',
+    name: 'Ocean',
+    description: 'Deep blue ocean theme',
+    theme: {
+      ...darkTheme,
+      name: 'ocean',
+      colors: {
+        ...darkTheme.colors,
+        primary: '#0ea5e9',      // sky-500
+        secondary: '#06b6d4',    // cyan-500
+        accent: '#14b8a6',       // teal-500
+        background: {
+          primary: '#0c4a6e',    // sky-900
+          secondary: '#075985',  // sky-800
+          dark: '#082f49',       // sky-950
+        },
+      },
+    },
+  },
+  {
+    id: 'forest',
+    name: 'Forest',
+    description: 'Natural green forest theme',
+    theme: {
+      ...darkTheme,
+      name: 'forest',
+      colors: {
+        ...darkTheme.colors,
+        primary: '#22c55e',      // green-500
+        secondary: '#16a34a',    // green-600
+        accent: '#84cc16',       // lime-500
+        background: {
+          primary: '#14532d',    // green-900
+          secondary: '#166534',  // green-800
+          dark: '#052e16',       // green-950
+        },
+      },
+    },
+  },
+  {
+    id: 'sunset',
+    name: 'Sunset',
+    description: 'Warm sunset colors',
+    theme: {
+      ...darkTheme,
+      name: 'sunset',
+      colors: {
+        ...darkTheme.colors,
+        primary: '#f97316',      // orange-500
+        secondary: '#ea580c',    // orange-600
+        accent: '#eab308',       // yellow-500
+        background: {
+          primary: '#7c2d12',    // orange-900
+          secondary: '#9a3412',  // orange-800
+          dark: '#431407',       // orange-950
+        },
+      },
+    },
+  },
+];
+
+/**
+ * 
+ */
+export class ThemeManager {
+  private currentTheme: Theme = defaultTheme;
+  private themes: Map<string, Theme> = new Map();
+  private initialized: boolean = false;
+
+  constructor() {
+    // 注册预设主
+    for (const preset of presetThemes) {
+      this.themes.set(preset.id, preset.theme);
+    }
+  }
+
+  /**
+   * 
+   * 
+   * 
+   * 1. 用户保存的主题（用户配置文件中）
+   * 2. 自动检测终端颜色模式，选择合适的主题
+   * 3. 使用默认主题
+   */
+  initializeFromConfig(): void {
+    if (this.initialized) return;
+    
+    try {
+      const savedTheme = configManager.getTheme();
+      
+      // 如果用户之前保存过主题，使用保存的主
+      if (savedTheme && this.themes.has(savedTheme)) {
+        this.currentTheme = this.themes.get(savedTheme)!;
+        this.initialized = true;
+        return;
+      }
+      
+      // 没有用户保存的主题，自动检测终端颜色模
+      const colorMode = detectColorMode();
+      
+      if (colorMode === 'dark') {
+        this.currentTheme = this.themes.get('dark')!;
+      } else if (colorMode === 'light') {
+        this.currentTheme = this.themes.get('light')!;
+      }
+      // colorMode === 'unknown' 时保持默认主
+      
+      this.initialized = true;
+    } catch {
+      // 配置读取失败时使用默认主
+      this.initialized = true;
+    }
+  }
+  
+  /**
+   * 
+   */
+  getDetectedColorMode(): ColorMode {
+    return detectColorMode();
+  }
+
+  /**
+   * 
+   */
+  setTheme(themeName: string, persist: boolean = true): void {
+    const theme = this.themes.get(themeName);
+    if (theme) {
+      this.currentTheme = theme;
+      
+      // 同步保存到配置文件，确保立即生
+      if (persist) {
+        try {
+          configManager.saveTheme(themeName);
+        } catch {
+          // 保存失败时静默忽
+        }
+      }
+    } else {
+      throw new Error(`Theme '${themeName}' not found`);
+    }
+  }
+
+  /**
+   * 
+   */
+  getTheme(): Theme {
+    return this.currentTheme;
+  }
+
+  /**
+   * 
+   */
+  getCurrentThemeName(): string {
+    return this.currentTheme.name;
+  }
+
+  /**
+   * 
+   */
+  hasTheme(themeName: string): boolean {
+    return this.themes.has(themeName);
+  }
+
+  /**
+   * 
+   */
+  getAvailableThemes(): string[] {
+    return Array.from(this.themes.keys());
+  }
+
+  /**
+   * 
+   */
+  getThemePresets(): ThemePreset[] {
+    return presetThemes;
+  }
+
+  /**
+   * 
+   */
+  registerTheme(id: string, theme: Theme): void {
+    this.themes.set(id, theme);
+  }
+
+  /**
+   * 
+   */
+  getRoleStyle(role: 'user' | 'assistant' | 'system' | 'tool'): RoleStyle {
+    const colors = this.currentTheme.colors;
+    
+    switch (role) {
+      case 'user':
+        return {
+          color: colors.text.muted,
+          prefix: '',
+          bold: false,
+        };
+      case 'assistant':
+        return {
+          color: colors.primary,
+          prefix: '',
+          bold: false,
+        };
+      case 'system':
+        return {
+          color: colors.warning,
+          prefix: '!',
+          bold: true,
+        };
+      case 'tool':
+        return {
+          color: colors.info,
+          prefix: '',
+          bold: false,
+        };
+      default:
+        return {
+          color: colors.text.primary,
+          prefix: '',
+        };
+    }
+  }
+}
+
+// 导出单
+export const themeManager = new ThemeManager();

package/src/ui/themes/aegisTheme.ts

@@ -0,0 +1,87 @@
+import type { Theme, BaseColors, Spacing } from './types.js';
+
+const aegisColors: BaseColors = {
+  primary: '#00e5c0',      // teal
+  secondary: '#7c6fd4',    // purple
+  accent: '#00e5c0',       // teal
+  success: '#22c55e',
+  warning: '#f59e0b',
+  error: '#ef4444',
+  info: '#00e5c0',
+  text: {
+    primary: '#e8e6f4',
+    secondary: '#8882a4',
+    muted: '#44405a',
+    light: '#e8e6f4',
+  },
+  background: {
+    primary: '#04040c',
+    secondary: '#181828',
+    dark: '#0c0c16',
+  },
+  border: {
+    light: 'rgba(255,255,255,0.06)',
+    dark: '#1a1a2a',
+  },
+  syntax: {
+    keyword: '#00e5c0',
+    string: '#7c6fd4',
+    number: '#f59e0b',
+    comment: '#44405a',
+    function: '#f472b6',
+    variable: '#e8e6f4',
+    operator: '#89DDFF',
+    type: '#FFCB6B',
+    tag: '#F07178',
+    attr: '#C3E88D',
+    default: '#A6ACCD',
+  },
+};
+
+const spacing: Spacing = {
+  xs: 0, sm: 1, md: 2, lg: 3, xl: 4
+};
+
+const tokens = {
+  elevation: {
+    flat: 'rgba(0,0,0,0)',
+    raised: 'rgba(0, 229, 192, 0.08)',
+    overlay: 'rgba(0, 0, 0, 0.5)',
+    sticky: 'rgba(0, 229, 192, 0.15)',
+  },
+  radius: {
+    sm: 0,
+    md: 1,
+    lg: 2,
+    full: 0,
+  },
+  animation: {
+    fast: 80,
+    normal: 150,
+    slow: 300,
+    easing: 'ease-out',
+  },
+  semantic: {
+    interactive: {
+      idle: aegisColors.primary,
+      hover: '#33ffd9',
+      active: '#00bfa0',
+      disabled: '#44405a',
+    },
+    focus: {
+      ring: '#00e5c0',
+      glow: 'rgba(0, 229, 192, 0.3)',
+    },
+    code: {
+      background: '#08080f',
+      border: '#1a1a2a',
+    },
+  },
+};
+
+export const aegisTheme: Theme = {
+  name: 'aegis',
+  colors: aegisColors,
+  spacing,
+  tokens,
+};

package/src/ui/themes/darkTheme.ts

@@ -0,0 +1,87 @@
+/**
+ * 
+ */
+
+import type { Theme } from './types.js';
+import { defaultTheme } from './defaultTheme.js';
+
+const darkTokens = {
+  elevation: {
+    flat: 'rgba(0,0,0,0)',
+    raised: 'rgba(96, 165, 250, 0.08)',
+    overlay: 'rgba(0, 0, 0, 0.4)',
+    sticky: 'rgba(96, 165, 250, 0.12)',
+  },
+  radius: {
+    sm: 0,
+    md: 1,
+    lg: 2,
+    full: 0,
+  },
+  animation: {
+    fast: 80,
+    normal: 150,
+    slow: 300,
+    easing: 'ease-out',
+  },
+  semantic: {
+    interactive: {
+      idle: '#60a5fa',
+      hover: '#93c5fd',
+      active: '#3b82f6',
+      disabled: '#9ca3af',
+    },
+    focus: {
+      ring: '#60a5fa',
+      glow: 'rgba(96, 165, 250, 0.3)',
+    },
+    code: {
+      background: '#1f2937',
+      border: '#374151',
+    },
+  },
+};
+
+export const darkTheme: Theme = {
+  ...defaultTheme,
+  name: 'dark',
+  tokens: darkTokens,
+  colors: {
+    ...defaultTheme.colors,
+    primary: '#60a5fa',      // blue-400
+    secondary: '#818cf8',    // indigo-400
+    accent: '#a78bfa',       // violet-400
+    success: '#34d399',      // emerald-400
+    warning: '#fbbf24',      // amber-400
+    error: '#f87171',        // red-400
+    info: '#22d3ee',         // cyan-400
+    text: {
+      primary: '#f9fafb',    // gray-50
+      secondary: '#e5e7eb',  // gray-200
+      muted: '#9ca3af',      // gray-400
+      light: '#111827',      // gray-900
+    },
+    background: {
+      primary: '#111827',    // gray-900
+      secondary: '#374151',  // gray-700
+      dark: '#030712',       // gray-950
+    },
+    border: {
+      light: '#374151',      // gray-700
+      dark: '#1f2937',       // gray-800
+    },
+    syntax: {
+      comment: '#9ca3af',    // gray-400
+      string: '#34d399',     // emerald-400
+      number: '#f472b6',     // pink-400
+      keyword: '#a78bfa',    // violet-400
+      function: '#60a5fa',   // blue-400
+      variable: '#e5e7eb',   // gray-200
+      operator: '#fbbf24',   // amber-400
+      type: '#22d3ee',       // cyan-400
+      tag: '#fb7185',        // rose-400
+      attr: '#facc15',       // yellow-400
+      default: '#f9fafb',    // gray-50
+    },
+  },
+};