aegiscode 3.1.10 → 3.4.2

package/src/ui/App.tsx

@@ -1,166 +0,0 @@
-/**
- * App.tsx - rooted UI with stable references
- */
-
-import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { Box, Text } from 'ink';
-
-import { ErrorBoundary } from './components/common/ErrorBoundary.js';
-import pkg from '../../package.json' with { type: 'json' };
-import { UpdatePrompt } from './components/dialog/UpdatePrompt.js';
-import { AegisInterface } from './components/AegisInterface.js';
-import { themeManager } from './themes/index.js';
-import type { PermissionMode } from '../cli/types.js';
-import type { VersionCheckResult } from '../services/VersionChecker.js';
-import type { RuntimeConfig, ClawdConfig } from '../config/types.js';
-import { DEFAULT_CONFIG } from '../config/types.js';
-import {
-  ensureStoreInitialized,
-  appActions,
-  configActions,
-  getConfig,
-  useInitializationStatus,
-} from '../store/index.js';
-
-export interface AppProps {
-  apiKey: string;
-  baseURL?: string;
-  model?: string;
-  initialMessage?: string;
-  debug?: boolean;
-  permissionMode?: PermissionMode;
-  versionCheckPromise?: Promise<VersionCheckResult | null>;
-  resumeSessionId?: string;
-  routerEnabled?: boolean;
-}
-
-function mergeRuntimeConfig(baseConfig: ClawdConfig, props: AppProps): RuntimeConfig {
-  const runtimeConfig: RuntimeConfig = { ...baseConfig };
-
-  if (props.initialMessage) runtimeConfig.initialMessage = props.initialMessage;
-  if (props.resumeSessionId) runtimeConfig.resumeSessionId = props.resumeSessionId;
-  if (props.permissionMode) runtimeConfig.defaultPermissionMode = props.permissionMode;
-  if (props.routerEnabled) {
-    runtimeConfig.autoRouter = { ...runtimeConfig.autoRouter, enabled: true };
-  }
-  if (props.model) {
-    // Try to map model name to model ID first
-    const models = baseConfig.models || [];
-    const matched = models.find((m: any) => m.model === props.model || m.id === props.model);
-    runtimeConfig.currentModelId = matched ? matched.id : props.model;
-  }
-
-  return runtimeConfig;
-}
-
-function initializeStoreState(config: RuntimeConfig): void {
-  configActions().setConfig(config);
-
-  const isRealKey = (key?: string) => !!key && !key.startsWith('YOUR_');
-  const hasRealDefault = isRealKey(config.default?.apiKey);
-  const hasRealModel = config.models?.some(m => isRealKey((m as any).apiKey));
-
-  if (!hasRealDefault && !hasRealModel) {
-    appActions().setInitializationStatus('needsSetup');
-  } else {
-    appActions().setInitializationStatus('ready');
-  }
-}
-
-const AppWrapper: React.FC<AppProps> = (props) => {
-  const { versionCheckPromise, permissionMode, ...mainProps } = props;
-  
-  const initializationStatus = useInitializationStatus();
-  
-  const [versionInfo, setVersionInfo] = useState<VersionCheckResult | null>(null);
-  const [showUpdatePrompt, setShowUpdatePrompt] = useState(false);
-  const initDoneRef = useRef(false);
-
-  // Stable initializeApp using ref to avoid re-creating on every render
-  const propsRef = useRef(props);
-  propsRef.current = props;
-  const initializeApp = useCallback(async () => {
-    const p = propsRef.current;
-    if (p.debug) console.log('[DEBUG] Initializing application and Store...');
-    
-    try {
-      appActions().setInitializationStatus('loading');
-      
-      await ensureStoreInitialized();
-      
-      const baseConfig = getConfig() ?? DEFAULT_CONFIG;
-      const mergedConfig = mergeRuntimeConfig(baseConfig, p);
-      initializeStoreState(mergedConfig);
-      
-      initDoneRef.current = true;
-      if (p.debug) console.log('[DEBUG] Store initialized successfully');
-    } catch (error) {
-      appActions().setInitializationError(
-        error instanceof Error ? error.message : 'Unknown initialization error'
-      );
-      if (propsRef.current.debug) console.log('[DEBUG] Store initialization failed:', error);
-    }
-  }, []);
-
-  useEffect(() => {
-    // Start initialization immediately — don't wait for version check
-    const initPromise = initializeApp();
-
-    if (versionCheckPromise) {
-      // Run version check in parallel; only show prompt if init hasn't finished
-      versionCheckPromise
-        .then((versionResult) => {
-          if (versionResult && versionResult.shouldPrompt && !initDoneRef.current) {
-            setVersionInfo(versionResult);
-            setShowUpdatePrompt(true);
-          }
-        })
-        .catch((error) => {
-          if (props.debug) console.log('[DEBUG] Version check failed:', error);
-        });
-    }
-
-    // Keep the lint happy — both are used
-    void initPromise;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [versionCheckPromise, props.debug]);
-
-  if (showUpdatePrompt && versionInfo) {
-    return (
-      <UpdatePrompt
-        versionInfo={versionInfo}
-        onComplete={async () => {
-          setShowUpdatePrompt(false);
-          await initializeApp();
-        }}
-      />
-    );
-  }
-
-  if (initializationStatus === 'pending' || initializationStatus === 'loading') {
-    return (
-      <Box padding={1}>
-
-      </Box>
-    );
-  }
-
-  if (initializationStatus === 'error') {
-    return (
-      <Box padding={1} flexDirection="column">
-        <Text color="red">❌ Initialization failed</Text>
-        <Text color="gray">Please check your configuration and try again.</Text>
-      </Box>
-    );
-  }
-
-  return <AegisInterface {...mainProps} />;
-};
-
-export const App: React.FC<AppProps> = (props) => {
-  return (
-    <ErrorBoundary>
-      <AppWrapper {...props} />
-    </ErrorBoundary>
-  );
-};

package/src/ui/components/AegisInterface.tsx

@@ -1,484 +0,0 @@
-/**
- * AegisInterface.tsx - Main CLI interface component
- *
- * Refactored to use extracted hooks: useAgent, useCommandProcessor, useTerminalSize.
- * Previously 977 lines — now ~450 lines of orchestration, with logic in focused hooks.
- */
-
-import React, { useEffect, useCallback, useRef, useState, useLayoutEffect } from 'react';
-import { Box, Text, useInput, measureElement, type DOMElement } from 'ink';
-
-// Store
-import {
-  useInitializationStatus,
-  useActiveModal,
-  useMessages,
-  usePendingCommands,
-  useAutoRouterActiveModel,
-  useRouterEnabled,
-  useWorkflow,
-  sessionActions,
-  configActions,
-  commandActions,
-  getState,
-  subscribe,
-} from '../../store/index.js';
-
-// Hooks
-import { useTerminalSize } from '../hooks/useTerminalSize.js';
-import { useCtrlCHandler } from '../hooks/useCtrlCHandler.js';
-import { useConfirmation } from '../hooks/useConfirmation.js';
-import { useAgent } from '../hooks/useAgent.js';
-import { useCommandProcessor } from '../hooks/useCommandProcessor.js';
-
-// Components
-import { MessageRenderer } from './markdown/MessageRenderer.js';
-import { InputArea } from './input/InputArea.js';
-import { ChatStatusBar } from './layout/ChatStatusBar.js';
-import { WelcomeMessage } from './layout/WelcomeMessage.js';
-import { MessageList } from './layout/MessageList.js';
-import { ContextBar } from './layout/ContextBar.js';
-import { ConfirmationPrompt } from './dialog/ConfirmationPrompt.js';
-import { InteractiveSelector, type SelectorOption } from './dialog/InteractiveSelector.js';
-import { SetupWizard } from './dialog/SetupWizard.js';
-import { ExitMessage } from './common/ExitMessage.js';
-import { ErrorBoundary } from './common/ErrorBoundary.js';
-
-// Focus
-import { FocusId, focusActions } from '../focus/index.js';
-import { copyToClipboard } from '../../utils/clipboard.js';
-
-// Heartbeat (online status ping)
-import { startHeartbeat, stopHeartbeat } from '../../services/Heartbeat.js';
-
-// Theme
-import { themeManager } from '../themes/index.js';
-
-// ========== Types ==========
-
-export interface AegisInterfaceProps {
-  apiKey: string;
-  baseURL?: string;
-  model?: string;
-  initialMessage?: string;
-  debug?: boolean;
-  resumeSessionId?: string;
-}
-
-// ========== Memoized Sub-Components ==========
-
-const QueuedCommands: React.FC = React.memo(() => {
-  const pendingCommands = usePendingCommands();
-  const theme = themeManager.getTheme();
-
-  if (pendingCommands.length === 0) return null;
-
-  return (
-    <Box flexDirection="column" marginTop={0} marginBottom={0}>
-      {pendingCommands.map((cmd, i) => (
-        <Box key={i} flexDirection="row" marginLeft={1}>
-          <Text color={theme.colors.text.muted} dimColor>
-            <Text color={theme.colors.primary}>#{i+1}</Text> {cmd.length > 60 ? cmd.slice(0, 60) + '...' : cmd}
-          </Text>
-        </Box>
-      ))}
-    </Box>
-  );
-});
-
-QueuedCommands.displayName = 'QueuedCommands';
-
-const RecentMessagesPreview: React.FC<{ terminalWidth: number; count?: number }> = React.memo(
-  ({ terminalWidth, count = 3 }) => {
-    const messages = getState().session.messages;
-    const recentMessages = messages.slice(-count);
-
-    return (
-      <Box flexDirection="column" marginBottom={1}>
-        {recentMessages.map((msg, index) => (
-          <MessageRenderer
-            key={msg.id || index}
-            content={msg.content}
-            role={msg.role}
-            terminalWidth={terminalWidth}
-            showPrefix={true}
-          />
-        ))}
-      </Box>
-    );
-  }
-);
-
-RecentMessagesPreview.displayName = 'RecentMessagesPreview';
-
-// ========== Main Component ==========
-
-export const AegisInterface: React.FC<AegisInterfaceProps> = ({
-  apiKey,
-  baseURL,
-  model,
-  initialMessage,
-  debug,
-  resumeSessionId,
-}) => {
-  // ==================== Terminal Size ====================
-  const { width: terminalWidth, height: terminalHeight } = useTerminalSize();
-
-  // ==================== Store State ====================
-  const initializationStatus = useInitializationStatus();
-  const activeModal = useActiveModal();
-  const messages = useMessages();
-
-  const getMessages = useCallback(() => getState().session.messages, []);
-
-  // ==================== Agent Hook ====================
-  const {
-    agentRef,
-    contextManagerRef,
-    isInitializing,
-    initError,
-    currentModel,
-    handleSetupComplete,
-  } = useAgent({ apiKey, baseURL, model, debug, resumeSessionId });
-
-  const autoRouterActiveModel = useAutoRouterActiveModel();
-  const routerEnabled = useRouterEnabled();
-  const workflow = useWorkflow();
-
-  // ==================== Below-MessageList overhead measurement ====================
-  // MessageList budgets its viewport with a fixed UI_OVERHEAD constant that only
-  // accounts for the input area/status bar. ContextBar (workflow indicator) and
-  // QueuedCommands render below it and can take a variable number of extra rows
-  // (e.g. ContextBar only appears at all when workflow.visible) — without telling
-  // MessageList about that, its row budget and what's actually left on screen drift
-  // apart, which looks like messages getting clipped/disappearing. Measuring the
-  // actual rendered height post-layout keeps the two in sync regardless of what
-  // gets added below the message list in the future.
-  const belowMessageListRef = useRef<DOMElement>(null);
-  const [belowOverheadLines, setBelowOverheadLines] = useState(0);
-  const pendingCommandsForOverhead = usePendingCommands();
-  useLayoutEffect(() => {
-    if (!belowMessageListRef.current) return;
-    const { height } = measureElement(belowMessageListRef.current);
-    setBelowOverheadLines(height);
-  }, [workflow, pendingCommandsForOverhead.length]);
-
-  // ==================== Stable Refs ====================
-  const debugRef = useRef(debug);
-  debugRef.current = debug;
-  const modelRef = useRef(model);
-  modelRef.current = model;
-  const getMessagesRef = useRef(getMessages);
-  getMessagesRef.current = getMessages;
-
-  // ==================== Local State ====================
-  const [isExiting, setIsExiting] = useState(false);
-  const [exitSessionId, setExitSessionId] = useState<string | null>(null);
-  const [isScrolledUp, setIsScrolledUp] = useState(false);
-  const [renderLatency, setRenderLatency] = useState(0);
-
-  const renderLatencyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const handleRenderLatency = useCallback((ms: number) => {
-    // Debounce: only update state at most every 500ms
-    if (renderLatencyTimerRef.current) return;
-    renderLatencyTimerRef.current = setTimeout(() => {
-      renderLatencyTimerRef.current = null;
-    }, 500);
-    setRenderLatency(ms);
-  }, []);
-
-  // Clean up latency debounce timer on unmount
-  useEffect(() => {
-    return () => {
-      if (renderLatencyTimerRef.current) clearTimeout(renderLatencyTimerRef.current);
-    };
-  }, []);
-
-  // ==================== Heartbeat (online status) ====================
-  useEffect(() => {
-    startHeartbeat();
-    return () => stopHeartbeat();
-  }, []);
-
-  const [selectorState, setSelectorState] = useState<{
-    isVisible: boolean;
-    title: string;
-    options: SelectorOption[];
-    handler: 'theme' | 'model' | null;
-  }>({
-    isVisible: false,
-    title: '',
-    options: [],
-    handler: null,
-  });
-
-  // ==================== Hooks ====================
-  const { confirmationState, confirmationHandler, handleResponse } = useConfirmation();
-  const confirmationHandlerRef = useRef(confirmationHandler);
-  confirmationHandlerRef.current = confirmationHandler;
-
-  // Command processor — extracted hook
-  const { processCommand, handleSubmit, processQueue } = useCommandProcessor({
-    agentRef,
-    contextManagerRef,
-    modelRef,
-    debugRef,
-    getMessagesRef,
-    confirmationHandlerRef,
-    onSelectorRequest: (state) => {
-      setSelectorState({
-        isVisible: true,
-        title: state.title,
-        options: state.options,
-        handler: state.handler,
-      });
-      focusActions.setFocus(FocusId.SELECTOR);
-    },
-  });
-
-  // ESC interrupt (scrolling handled by MessageList internally)
-  useInput((_input, key) => {
-    if (key.escape && getState().session.isThinking) {
-      commandActions().abort();
-      sessionActions().setThinking(false);
-    }
-  });
-
-  // ==================== Alt+C: Copy last assistant reply ====================
-  useInput((_input, key) => {
-    if (key.meta && _input === 'c') {
-      const msgs = getState().session.messages.filter(m => m.role === 'assistant');
-      if (msgs.length === 0) return;
-      const last = msgs[msgs.length - 1];
-      // Strip markdown for clean copy
-      const plain = last.content
-        .replace(/```[\s\S]*?```/g, m => m.replace(/```\w*\n?/, '').replace(/\n?```/, ''))
-        .replace(/\*\*(.+?)\*\*/g, '$1')
-        .replace(/\*(.+?)\*/g, '$1')
-        .replace(/`([^`]+)`/g, '$1')
-        .replace(/~~(.+?)~~/g, '$1')
-        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
-        .replace(/^#{1,6}\s+/gm, '')
-        .replace(/^>\s+/gm, '')
-        .trim();
-      if (!plain) return;
-      copyToClipboard(plain)
-        .then(async () => {
-          const { nanoid } = await import('nanoid');
-          sessionActions().addMessage({
-            id: nanoid(),
-            role: 'system',
-            content: '✓ Copied last reply to clipboard',
-            timestamp: Date.now(),
-          });
-        })
-        .catch(async (err) => {
-          const { nanoid } = await import('nanoid');
-          sessionActions().addMessage({
-            id: nanoid(),
-            role: 'system',
-            content: `✗ Copy failed: ${err instanceof Error ? err.message : String(err)}`,
-            timestamp: Date.now(),
-          });
-        });
-    }
-  });
-
-  // ==================== Alt+R: Toggle auto-router ====================
-  useInput((_input, key) => {
-    if (key.meta && _input === 'r') {
-      const isEnabled = getState().config.config?.autoRouter?.enabled ?? false;
-      handleSubmit(isEnabled ? '/router off' : '/router on');
-    }
-  });
-
-  // ==================== Ctrl+C Handler ====================
-  useCtrlCHandler({
-    onInterrupt: () => {
-      commandActions().abort();
-      sessionActions().setThinking(false);
-    },
-    onBeforeExit: () => {
-      const currentMessageCount = getState().session.messages.length;
-      const currentSessionId = contextManagerRef.current?.getCurrentSessionId() || getState().session.sessionId;
-      if (currentSessionId && currentMessageCount > 0) {
-        // Flush pending saves before exit so the last messages are persisted
-        contextManagerRef.current?.flush().catch(() => {});
-        setExitSessionId(currentSessionId);
-        setIsExiting(true);
-        return true;
-      }
-      return false;
-    },
-  });
-
-  // ==================== Focus Management ====================
-  useEffect(() => {
-    if (confirmationState.isVisible) return;
-    if (selectorState.isVisible) {
-      focusActions.setFocus(FocusId.SELECTOR);
-    } else if (activeModal === 'themeSelector') {
-      focusActions.setFocus(FocusId.THEME_SELECTOR);
-    } else {
-      focusActions.setFocus(FocusId.MAIN_INPUT);
-    }
-  }, [confirmationState.isVisible, selectorState.isVisible, activeModal]);
-
-  // ==================== Selector Handlers ====================
-  const handleSelectorSelect = useCallback(async (value: string) => {
-    const { handler } = selectorState;
-    focusActions.setFocus(FocusId.MAIN_INPUT);
-    setSelectorState({ isVisible: false, title: '', options: [], handler: null });
-
-    if (handler === 'theme') {
-      themeManager.setTheme(value);
-      sessionActions().addAssistantMessage('✓ ' + value);
-    } else if (handler === 'model') {
-      if (value.startsWith('__ollama__')) {
-        const modelName = value.slice('__ollama__'.length);
-        const id = modelName.replace(/[^a-z0-9_-]/gi, '-').toLowerCase();
-        try {
-          const fs = await import('fs');
-          const path = await import('path');
-          const os = await import('os');
-          const cfgPath = path.join(os.homedir(), '.aegiscode', 'config.json');
-          try {
-            const cfg = JSON.parse(fs.readFileSync(cfgPath, 'utf8'));
-            cfg.models = cfg.models || [];
-            if (!cfg.models.find((m: any) => m.id === id)) {
-              cfg.models.push({ id, name: modelName, model: modelName, baseURL: 'http://localhost:11434/v1', apiKey: 'ollama' });
-            }
-            cfg.currentModelId = id;
-            fs.writeFileSync(cfgPath, JSON.stringify(cfg, null, 2));
-          } catch { /* non-fatal */ }
-        } catch { /* non-fatal */ }
-        configActions().updateConfig({ currentModelId: id });
-      } else {
-        configActions().updateConfig({ currentModelId: value });
-      }
-    }
-  }, [selectorState]);
-
-  const handleSelectorCancel = useCallback(() => {
-    setSelectorState({ isVisible: false, title: '', options: [], handler: null });
-    focusActions.setFocus(FocusId.MAIN_INPUT);
-  }, []);
-
-  // ==================== Queue Processor ====================
-  useEffect(() => {
-    let prevIsThinking = getState().session.isThinking;
-    const unsubscribe = subscribe((state) => {
-      const currentIsThinking = state.session.isThinking;
-      const hasPending = state.command.pendingCommands.length > 0;
-      if (prevIsThinking && !currentIsThinking && hasPending) {
-        processQueue();
-      }
-      prevIsThinking = currentIsThinking;
-    });
-    return unsubscribe;
-  }, [processQueue]);
-
-  // ==================== Initial Message ====================
-  const initialMessageSent = useRef(false);
-  useEffect(() => {
-    if (initialMessage && !initialMessageSent.current && !isInitializing && agentRef.current) {
-      initialMessageSent.current = true;
-      handleSubmit(initialMessage);
-    }
-  }, [initialMessage, handleSubmit, isInitializing]);
-
-  // ==================== Scroll State Notification ====================
-  const handleScrolledUpChange = useCallback((scrolledUp: boolean) => {
-    setIsScrolledUp(scrolledUp);
-  }, []);
-
-  // ==================== Render ====================
-
-  if (isInitializing) {
-    return (
-      <Box flexDirection="column" padding={1}>
-        <Box>
-          <Text color="yellow"> Initializing...</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  if (initError) {
-    return (
-      <Box flexDirection="column" padding={1}>
-        <Text color="red">Agent initialization failed:</Text>
-        <Text color="red">{initError}</Text>
-      </Box>
-    );
-  }
-
-  if (initializationStatus === 'needsSetup') {
-    return <SetupWizard onComplete={handleSetupComplete} />;
-  }
-
-  const hasPendingInitialMessage = !!(initialMessage && !initialMessageSent.current);
-
-  return (
-    <Box flexDirection="column" width="100%" paddingX={0} flexGrow={1}>
-      {messages.length === 0 && <WelcomeMessage terminalWidth={terminalWidth - 2} />}
-
-      {selectorState.isVisible ? (
-        <>
-          <RecentMessagesPreview terminalWidth={terminalWidth - 2} count={3} />
-          <InteractiveSelector
-            title={selectorState.title}
-            options={selectorState.options}
-            onSelect={handleSelectorSelect}
-            onCancel={handleSelectorCancel}
-            focusId={FocusId.SELECTOR}
-          />
-        </>
-      ) : (
-        <>
-          {messages.length > 0 && (
-            <ErrorBoundary name="MessageList" fallback={<Text color="red">Message list error</Text>}>
-              <Box flexGrow={1} minHeight={0}>
-                <MessageList
-                  terminalWidth={terminalWidth - 2}
-                  terminalHeight={terminalHeight}
-                  onScrolledUpChange={handleScrolledUpChange}
-                  onRenderLatency={handleRenderLatency}
-                  extraOverheadLines={belowOverheadLines}
-                />
-              </Box>
-            </ErrorBoundary>
-          )}
-          <Box ref={belowMessageListRef} flexDirection="column">
-            <ContextBar workflow={workflow} />
-            <QueuedCommands />
-          </Box>
-
-          {confirmationState.isVisible && confirmationState.details && (
-            <ErrorBoundary name="ConfirmationPrompt" fallback={null}>
-              <ConfirmationPrompt
-                details={confirmationState.details}
-                onResponse={handleResponse}
-              />
-            </ErrorBoundary>
-          )}
-
-          <ErrorBoundary name="InputArea" fallback={<Text color="red">Input error — restart app</Text>}>
-            <InputArea onSubmit={handleSubmit} />
-          </ErrorBoundary>
-          <ChatStatusBar
-            model={autoRouterActiveModel || currentModel}
-            modelIsAuto={!!autoRouterActiveModel}
-            isScrolledUp={messages.length > 0 && isScrolledUp}
-            renderLatency={renderLatency}
-            routerEnabled={routerEnabled}
-          />
-        </>
-      )}
-
-      {isExiting && exitSessionId && (
-        <ExitMessage sessionId={exitSessionId} />
-      )}
-    </Box>
-  );
-};