aegiscode 3.1.8 → 3.1.10

package/src/ui/components/common/ErrorBoundary.tsx

@@ -0,0 +1,82 @@
+/**
+ * ErrorBoundary - React 错误边界组件
+ *
+ * Enhanced with region name for logging and optional fallback render prop.
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface Props {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  /** Region name for debug logging (e.g. 'MessageList', 'ThinkingPanel') */
+  name?: string;
+  /** Called when an error is caught, for telemetry */
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    const region = this.props.name || 'unknown';
+    console.error(`[ErrorBoundary:${region}] Caught error:`, error);
+    console.error(`[ErrorBoundary:${region}] Component stack:`, errorInfo.componentStack);
+    this.props.onError?.(error, errorInfo);
+  }
+
+  render(): React.ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      const region = this.props.name || 'application';
+
+      return (
+        <Box flexDirection="column" padding={1}>
+          <Text color="red" bold>
+            ❌ {region} Error
+          </Text>
+          <Box marginTop={1}>
+            <Text color="yellow">
+              An unexpected error occurred in {region}. Please restart the application.
+            </Text>
+          </Box>
+          {this.state.error && (
+            <Box marginTop={1} flexDirection="column">
+              <Text color="gray">Error: {this.state.error.message}</Text>
+              {this.state.error.stack && (
+                <Box marginTop={1}>
+                  <Text color="gray" dimColor>
+                    {this.state.error.stack.split('\n').slice(0, 5).join('\n')}
+                  </Text>
+                </Box>
+              )}
+            </Box>
+          )}
+          <Box marginTop={1}>
+            <Text color="cyan">Press Ctrl+C to exit</Text>
+          </Box>
+        </Box>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/ui/components/common/ExitMessage.tsx

@@ -0,0 +1,120 @@
+/**
+ * ExitMessage - visar session-info och synkar till aegiscloud.org vid exit
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Box, Text, useApp } from 'ink';
+import { themeManager } from '../../themes/index.js';
+import { getState } from '../../../store/index.js';
+
+interface ExitMessageProps {
+  sessionId: string;
+  exitDelay?: number;
+}
+
+export const ExitMessage: React.FC<ExitMessageProps> = ({
+  sessionId,
+  exitDelay = 800,
+}) => {
+  const { exit } = useApp();
+  const theme = themeManager.getTheme();
+  const [syncStatus, setSyncStatus] = useState<'syncing' | 'done' | 'skip' | 'error'>('syncing');
+
+  useEffect(() => {
+    const doExit = async () => {
+      const { appendToLocalMemory, syncConversation } = await import('../../../services/CloudSync.js');
+      const { sharedMemory } = await import('../../../memory/SharedMemory.js');
+      const storeMessages = getState().session.messages;
+
+      if (storeMessages?.length > 0) {
+        const messages = storeMessages.map((m: any) => ({
+          role: m.role as string,
+          content: typeof m.content === 'string' ? m.content : JSON.stringify(m.content),
+        }));
+
+        // Local memory + episodic summary
+        await appendToLocalMemory(sessionId, messages).catch(() => {});
+        let model: string | undefined;
+        try {
+          const fs   = await import('fs');
+          const path = await import('path');
+          const os   = await import('os');
+          const cfg  = JSON.parse(fs.readFileSync(path.join(os.homedir(), '.aegiscode', 'config.json'), 'utf8'));
+          model = cfg?.default?.model || cfg?.models?.find((m: any) => m.id === cfg.currentModelId)?.model;
+          if (sharedMemory.isEnabled()) {
+            const apiKey  = cfg?.default?.apiKey || cfg?.models?.find((m: any) => m.id === cfg.currentModelId)?.apiKey;
+            const baseURL = cfg?.default?.baseURL || cfg?.models?.find((m: any) => m.id === cfg.currentModelId)?.baseURL;
+            await sharedMemory.summarizeAndStoreSession(sessionId, apiKey, baseURL, model);
+          }
+        } catch {}
+        for (let attempt = 0; attempt < 3; attempt++) {
+          try {
+            const result = await syncConversation(sessionId, messages, model);
+            if (result.reason === 'uploaded') {
+              setSyncStatus('done');
+              break;
+            } else if (result.reason === 'error' && attempt < 2) {
+              await new Promise(r => setTimeout(r, 1000 * (attempt + 1)));
+              continue;
+            } else {
+              setSyncStatus(result.reason === 'error' ? 'error' : 'skip');
+              break;
+            }
+          } catch {
+            if (attempt < 2) {
+              await new Promise(r => setTimeout(r, 1000 * (attempt + 1)));
+              continue;
+            }
+            setSyncStatus('error');
+          }
+        }
+      } else {
+        setSyncStatus('skip');
+      }
+
+      setTimeout(() => { exit(); setTimeout(() => process.exit(0), 50); }, 300);
+    };
+    doExit();
+  }, [exit, sessionId]);
+
+  const shortId = sessionId.length > 16
+    ? `${sessionId.slice(0, 8)}..${sessionId.slice(-6)}`
+    : sessionId;
+
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      <Box marginBottom={1}>
+        <Text color={theme.colors.text.muted}>─ </Text>
+        <Text color={theme.colors.warning}>session saved</Text>
+        <Text color={theme.colors.text.muted}> [</Text>
+        <Text color={theme.colors.info}>{shortId}</Text>
+        <Text color={theme.colors.text.muted}>]</Text>
+        {syncStatus === 'syncing' && (
+          <Text color={theme.colors.text.muted}> · syncing…</Text>
+        )}
+        {syncStatus === 'done' && (
+          <Text color={theme.colors.success}> · synced ↑</Text>
+        )}
+        {syncStatus === 'error' && (
+          <Text color={theme.colors.warning}> · sync failed</Text>
+        )}
+        {syncStatus === 'skip' && (
+          <Text color={theme.colors.text.muted}> · local only</Text>
+        )}
+      </Box>
+
+      <Box flexDirection="column" marginLeft={2}>
+        <Text color={theme.colors.text.muted}>resume: </Text>
+        <Box marginLeft={2}>
+          <Text color={theme.colors.success}>aegis --continue</Text>
+        </Box>
+        <Box marginLeft={2}>
+          <Text color={theme.colors.success}>aegis --resume </Text>
+          <Text color={theme.colors.info}>{sessionId}</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ExitMessage;

package/src/ui/components/common/LoadingIndicator.tsx

@@ -0,0 +1,49 @@
+/**
+ * LoadingIndicator - 加载指示器组件
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+import { themeManager } from '../../themes/index.js';
+
+interface LoadingIndicatorProps {
+  /** 是否显示 */
+  isVisible?: boolean;
+  /** 加载文本 */
+  text?: string;
+  /** 显示详情 */
+  details?: string;
+}
+
+/**
+ * 
+ */
+export const LoadingIndicator: React.FC<LoadingIndicatorProps> = React.memo(({
+  isVisible = true,
+  text = 'Thinking...',
+  details,
+}) => {
+  const theme = themeManager.getTheme();
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="row" paddingX={1} marginY={1}>
+      <Box flexDirection="column">
+        <Text color={theme.colors.warning}>{text}</Text>
+        {details && (
+          <Text color={theme.colors.text.muted} dimColor>
+            {details}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+});
+
+LoadingIndicator.displayName = 'LoadingIndicator';
+
+export default LoadingIndicator;

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

@@ -0,0 +1,6 @@
+/**
+ * 
+ */
+
+export { ErrorBoundary } from './ErrorBoundary.js';
+export { LoadingIndicator } from './LoadingIndicator.js';

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

@@ -0,0 +1,208 @@
+/**
+ * ConfirmationPrompt - 权限确认组件
+ * 
+ * 
+ */
+
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { themeManager } from '../../themes/index.js';
+import { FocusId, focusManager, useIsFocused } from '../../focus/index.js';
+import type { ConfirmationDetails, ConfirmationResponse } from '../../../agent/types.js';
+
+interface ConfirmationPromptProps {
+  details: ConfirmationDetails;
+  onResponse: (response: ConfirmationResponse) => void;
+}
+
+export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
+  details,
+  onResponse,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const theme = themeManager.getTheme();
+  const isFocused = useIsFocused(FocusId.CONFIRMATION_PROMPT);
+
+  const options = [
+    { key: 'y', label: 'allow', scope: 'once' as const, approved: true },
+    { key: 'a', label: 'always', scope: 'session' as const, approved: true },
+    { key: 'n', label: 'deny', scope: 'once' as const, approved: false },
+    { key: 'd', label: 'never', scope: 'session' as const, approved: false },
+  ];
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));
+    } else if (key.return) {
+      const sel = options[selectedIndex];
+      onResponse({ approved: sel.approved, scope: sel.scope, reason: sel.approved ? undefined : 'denied' });
+    } else if (input === 'y' || input === 'Y') {
+      onResponse({ approved: true, scope: 'once' });
+    } else if (input === 'a' || input === 'A') {
+      onResponse({ approved: true, scope: 'session' });
+    } else if (input === 'n' || input === 'N') {
+      onResponse({ approved: false, scope: 'once', reason: 'denied' });
+    } else if (input === 'd' || input === 'D') {
+      onResponse({ approved: false, scope: 'session', reason: 'denied for this session' });
+    }
+  }, { isActive: isFocused });
+
+  // Extract tool name from title (e.g. "Permission Required: Bash" -> "Bash")
+  const toolName = details.title.replace(/^.*:\s*/, '');
+
+  // Skip showing the tool name header for tools where the label+highlight is self-explanatory
+  const hideHeader = ['Bash', 'Shell'].includes(toolName) && details.details?.includes('**Command:**');
+
+  // Extract the primary content to highlight (command, file path, etc.)
+  const { label, highlight, extra } = extractHighlight(details.details);
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      {/* Header: tool name + reason (skipped for bash/shell when command is shown) */}
+      {!hideHeader && (
+        <Box>
+          <Text color={theme.colors.warning} bold>? </Text>
+          <Text bold>{toolName}</Text>
+          {details.message && details.message !== details.title && (
+            <Text color={theme.colors.text.muted} dimColor> · {details.message}</Text>
+          )}
+        </Box>
+      )}
+
+      {/* When header is hidden (Bash/Shell), show "? Command: <cmd>" on one line */}
+      {hideHeader && highlight && (
+        <Box>
+          <Text color={theme.colors.warning} bold>? </Text>
+          {label && <Text color={theme.colors.text.muted} dimColor>{label} </Text>}
+          <Text color={theme.colors.accent} wrap="wrap">{highlight}</Text>
+        </Box>
+      )}
+
+      {/* Highlighted content (command / file path) — only when header is shown */}
+      {!hideHeader && highlight && (
+        <Box marginLeft={2}>
+          {label && <Text color={theme.colors.text.muted} dimColor>{label} </Text>}
+          <Text color={theme.colors.accent} wrap="wrap">{highlight}</Text>
+        </Box>
+      )}
+
+      {/* Extra detail lines (e.g. directory, content preview) */}
+      {extra.length > 0 && (
+        <Box flexDirection="column" marginLeft={2}>
+          {extra.map((line, i) => (
+            <Text key={i} color={theme.colors.text.muted} dimColor wrap="wrap">
+              {line}
+            </Text>
+          ))}
+        </Box>
+      )}
+
+      {/* Affected files */}
+      {details.affectedFiles && details.affectedFiles.length > 0 && (
+        <Box marginLeft={2}>
+          <Text color={theme.colors.info} dimColor>
+            {details.affectedFiles.join(', ')}
+          </Text>
+        </Box>
+      )}
+
+      {/* Risks - single line */}
+      {details.risks && details.risks.length > 0 && (
+        <Box marginLeft={2}>
+          <Text color={theme.colors.text.muted} dimColor>
+            {details.risks.join(' · ')}
+          </Text>
+        </Box>
+      )}
+
+      {/* Options - vertical, up/down selection */}
+      <Box flexDirection="column" marginLeft={2} marginTop={1}>
+        {options.map((opt, i) => {
+          const active = i === selectedIndex;
+          return (
+            <Box key={opt.key}>
+              <Text
+                color={active ? theme.colors.success : theme.colors.text.muted}
+                bold={active}
+                dimColor={!active}
+              >
+                {active ? '> ' : '  '}
+                {opt.label}
+              </Text>
+              <Text color={theme.colors.text.muted} dimColor>  ({opt.key})</Text>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * 
+ * 
+ */
+function extractHighlight(details?: string): { label: string; highlight: string; extra: string[] } {
+  if (!details) return { label: '', highlight: '', extra: [] };
+
+  const strip = (s: string) =>
+    s.replace(/\*\*(.+?)\*\*/g, '$1').replace(/`([^`]+)`/g, '$1').trim();
+
+  const lines = details.split('\n').filter(l => l.trim());
+  let label = '';
+  let highlight = '';
+  const highlightLines: string[] = [];
+  const extra: string[] = [];
+  let inHighlight = false;
+
+  const KNOWN_PREFIX = /^(Command|File|Directory|Content Preview|Before|After):\s*/;
+
+  for (const raw of lines) {
+    const line = strip(raw);
+    if (line === '```' || line.startsWith('```')) {
+      // skip code fences
+      continue;
+    }
+    if (/^Command:\s*/.test(line)) {
+      label = 'Command:';
+      highlightLines.push(line.replace(/^Command:\s*/, ''));
+      inHighlight = true;
+    } else if (/^File:\s*/.test(line)) {
+      label = 'File:';
+      highlightLines.push(line.replace(/^File:\s*/, ''));
+      inHighlight = true;
+    } else if (/^(Directory|Content Preview|Before|After):\s*/.test(line)) {
+      inHighlight = false;
+      extra.push(line);
+    } else if (inHighlight) {
+      // Continuation of a multi-line Command/File value — keep it part of the
+      // highlight instead of dropping it into the unrelated "extra" lines, or
+      // multi-line bash commands get silently truncated to their first line.
+      highlightLines.push(line);
+    } else if (line) {
+      extra.push(line);
+    }
+  }
+
+  highlight = highlightLines.join('\n');
+
+  return { label, highlight, extra };
+}
+
+/**
+ * 
+ * 
+ */
+export function createAutoConfirmationHandler(
+  mode: 'approve' | 'deny' | 'approve_session' = 'deny'
+): (details: ConfirmationDetails) => Promise<ConfirmationResponse> {
+  return async () => ({
+    approved: mode.startsWith('approve'),
+    scope: mode === 'approve_session' ? 'session' : 'once',
+    reason: `Auto-${mode} by non-interactive mode`,
+  });
+}
+
+export default ConfirmationPrompt;

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

@@ -0,0 +1,149 @@
+/**
+ * InteractiveSelector - 交互式选择器组件
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { themeManager } from '../../themes/index.js';
+import { FocusId, focusManager } from '../../focus/index.js';
+
+export interface SelectorOption<T = string> {
+  value: T;
+  label: string;
+  description?: string;
+  isCurrent?: boolean;
+}
+
+interface InteractiveSelectorProps<T = string> {
+  title: string;
+  options: SelectorOption<T>[];
+  onSelect: (value: T) => void;
+  onCancel: () => void;
+  initialIndex?: number;
+  focusId?: string;
+  maxVisible?: number;
+}
+
+export function InteractiveSelector<T = string>({
+  title,
+  options,
+  onSelect,
+  onCancel,
+  initialIndex = 0,
+  focusId = FocusId.SELECTOR,
+  maxVisible = 10,
+}: InteractiveSelectorProps<T>): React.ReactElement {
+  const theme = themeManager.getTheme();
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    // Start at current item if one is marked
+    const currentIdx = options.findIndex(o => o.isCurrent);
+    return currentIdx >= 0 ? currentIdx : initialIndex;
+  });
+  const [scrollTop, setScrollTop] = useState(0);
+
+  const selectFiredRef = useRef(false);
+  useEffect(() => { selectFiredRef.current = false; }, [options]);
+
+  // Keep viewport window in sync with cursor
+  useEffect(() => {
+    setScrollTop(prev => {
+      if (selectedIndex < prev) return selectedIndex;
+      if (selectedIndex >= prev + maxVisible) return selectedIndex - maxVisible + 1;
+      return prev;
+    });
+  }, [selectedIndex, maxVisible]);
+
+  useInput((input, key) => {
+    if (focusManager.getCurrentFocus() !== focusId) return;
+
+    if (key.upArrow || input === 'k') {
+      setSelectedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));
+    } else if (key.downArrow || input === 'j') {
+      setSelectedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));
+    } else if (key.pageUp) {
+      setSelectedIndex(prev => Math.max(0, prev - maxVisible));
+    } else if (key.pageDown) {
+      setSelectedIndex(prev => Math.min(options.length - 1, prev + maxVisible));
+    } else if (key.return) {
+      if (!selectFiredRef.current) {
+        selectFiredRef.current = true;
+        onSelect(options[selectedIndex].value);
+      }
+    } else if (key.escape || input === 'q') {
+      onCancel();
+    }
+  });
+
+  useEffect(() => {
+    if (selectedIndex >= options.length) setSelectedIndex(0);
+  }, [options.length, selectedIndex]);
+
+  const visibleOptions = options.slice(scrollTop, scrollTop + maxVisible);
+  const hasAbove = scrollTop > 0;
+  const hasBelow = scrollTop + maxVisible < options.length;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={theme.colors.primary}
+      paddingX={2}
+      paddingY={1}
+    >
+      <Box marginBottom={1} flexDirection="row" justifyContent="space-between">
+        <Text bold color={theme.colors.primary}>{title}</Text>
+        {options.length > maxVisible && (
+          <Text color={theme.colors.text.muted} dimColor>
+            {selectedIndex + 1}/{options.length}
+          </Text>
+        )}
+      </Box>
+
+      {hasAbove && (
+        <Box>
+          <Text color={theme.colors.text.muted} dimColor>  ↑ {scrollTop} more</Text>
+        </Box>
+      )}
+
+      <Box flexDirection="column">
+        {visibleOptions.map((option, i) => {
+          const absIndex = scrollTop + i;
+          const isSelected = absIndex === selectedIndex;
+          return (
+            <Box key={String(option.value)} flexDirection="row">
+              <Text
+                color={isSelected ? theme.colors.primary : theme.colors.text.primary}
+                bold={isSelected}
+              >
+                {isSelected ? '▸ ' : '  '}
+                {option.label}
+                {option.isCurrent ? ' ✓' : ''}
+              </Text>
+              {option.description && (
+                <Text color={theme.colors.text.muted} dimColor>
+                  {' - '}{option.description}
+                </Text>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+
+      {hasBelow && (
+        <Box>
+          <Text color={theme.colors.text.muted} dimColor>
+            {'  ↓ '}{options.length - scrollTop - maxVisible} more
+          </Text>
+        </Box>
+      )}
+
+      <Box marginTop={1} borderStyle="single" borderTop borderBottom={false} borderLeft={false} borderRight={false} borderColor={theme.colors.border.light}>
+        <Text color={theme.colors.text.muted} dimColor>
+          ↑/↓ navigate  PgUp/PgDn page  Enter confirm  Esc cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+export default InteractiveSelector;