@tokentop/ttop 0.2.2

package/src/tui/contexts/AgentSessionContext.tsx

@@ -0,0 +1,307 @@
+import { createContext, useContext, useState, useEffect, useCallback, useRef, type ReactNode } from 'react';
+import type { AgentPlugin, SessionParseOptions } from '@/plugins/types/agent.ts';
+import type { AgentSessionAggregate, AgentInfo, AgentId } from '@/agents/types.ts';
+import { aggregateSessionUsage } from '@/agents/aggregator.ts';
+import { priceSessions } from '@/agents/costing.ts';
+import { pluginRegistry } from '@/plugins/registry.ts';
+import { createSandboxedHttpClient, createPluginLogger } from '@/plugins/sandbox.ts';
+import { createPluginContext } from '@/plugins/plugin-context-factory.ts';
+import { useLogs } from './LogContext.tsx';
+import { usePlugins } from './PluginContext.tsx';
+import { useStorage } from './StorageContext.tsx';
+import type { PricingSource } from '@/storage/types.ts';
+import { useDemoMode } from './DemoModeContext.tsx';
+import { useTimeWindow } from './TimeWindowContext.tsx';
+
+interface AgentSessionContextValue {
+  sessions: AgentSessionAggregate[];
+  agents: AgentInfo[];
+  isLoading: boolean;
+  lastRefreshAt: number | null;
+  error: string | null;
+  refreshSessions: (options?: SessionParseOptions) => Promise<void>;
+}
+
+const AgentSessionContext = createContext<AgentSessionContextValue | null>(null);
+
+const sessionPersistenceFingerprints = new Map<string, string>();
+
+function sessionFingerprint(session: AgentSessionAggregate): string {
+  return `${session.lastActivityAt}:${session.totalCostUsd ?? 0}:${session.requestCount}`;
+}
+
+interface AgentSessionProviderProps {
+  children: ReactNode;
+  autoRefresh?: boolean;
+  refreshInterval?: number;
+}
+
+export function AgentSessionProvider({
+  children,
+  autoRefresh = false,
+  refreshInterval = 30000,
+}: AgentSessionProviderProps) {
+  const [sessions, setSessions] = useState<AgentSessionAggregate[]>([]);
+  const [agents, setAgents] = useState<AgentInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastRefreshAt, setLastRefreshAt] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { debug, warn, error: logError } = useLogs();
+  const { isInitialized: pluginsInitialized } = usePlugins();
+  const { isReady: storageReady, recordAgentSession } = useStorage();
+  const { demoMode, simulator } = useDemoMode();
+  const { windowMs } = useTimeWindow();
+  const hasBackfilled = useRef(false);
+
+  const discoverAgents = useCallback(async (): Promise<AgentInfo[]> => {
+    const agentPlugins = pluginRegistry.getAll('agent');
+    const discovered: AgentInfo[] = [];
+
+    for (const plugin of agentPlugins) {
+      const agentId = plugin.id;
+      const agentName = plugin.name;
+      const ctx = createPluginContext(plugin.id, plugin.permissions);
+
+      try {
+        const installed = await plugin.isInstalled(ctx);
+        const agentInfo: AgentInfo = {
+          agentId,
+          name: agentName,
+          installed,
+          sessionParsingSupported: plugin.capabilities.sessionParsing,
+        };
+        discovered.push(agentInfo);
+      } catch (err) {
+        const agentInfo: AgentInfo = {
+          agentId,
+          name: agentName,
+          installed: false,
+          sessionParsingSupported: false,
+        };
+        agentInfo.error = err instanceof Error ? err.message : 'Unknown error';
+        discovered.push(agentInfo);
+      }
+    }
+
+    return discovered;
+  }, []);
+
+  const fetchAgentSessions = useCallback(async (
+    plugin: AgentPlugin,
+    options: SessionParseOptions
+  ): Promise<AgentSessionAggregate[]> => {
+    const agentId = plugin.id;
+    const agentName = plugin.name;
+
+    const http = createSandboxedHttpClient(plugin.id, plugin.permissions);
+    const logger = createPluginLogger(plugin.id);
+    const ctx = { http, logger, config: {}, signal: AbortSignal.timeout(60_000) };
+
+    const rawSessions = await plugin.parseSessions(options, ctx);
+
+    if (rawSessions.length === 0) {
+      return [];
+    }
+
+    const aggregated = aggregateSessionUsage({
+      agentId,
+      agentName,
+      rows: rawSessions,
+    });
+
+    return aggregated;
+  }, []);
+
+  const refreshSessions = useCallback(async (options: SessionParseOptions = {}) => {
+    const isInitialLoad = sessions.length === 0;
+    if (isInitialLoad) {
+      setIsLoading(true);
+    }
+    setError(null);
+
+    try {
+      if (demoMode && simulator) {
+        const snapshot = simulator.tick();
+        const demoSessions = snapshot.sessions;
+        setSessions(demoSessions);
+        setLastRefreshAt(Date.now());
+        debug('Demo sessions refreshed', { count: demoSessions.length }, 'agent-sessions');
+        return;
+      }
+
+      debug('Starting session refresh...', undefined, 'agent-sessions');
+
+      const discoveredAgents = await discoverAgents();
+      setAgents(discoveredAgents);
+
+      const agentPlugins = pluginRegistry.getAll('agent');
+      const allAggregates: AgentSessionAggregate[] = [];
+
+      for (const plugin of agentPlugins) {
+        if (!plugin.capabilities.sessionParsing) {
+          debug(`Skipping ${plugin.id}: session parsing not supported`, undefined, 'agent-sessions');
+          continue;
+        }
+
+        try {
+          const pluginCtx = createPluginContext(plugin.id, plugin.permissions);
+          const installed = await plugin.isInstalled(pluginCtx);
+          if (!installed) {
+            debug(`Skipping ${plugin.id}: not installed`, undefined, 'agent-sessions');
+            continue;
+          }
+
+          const aggregates = await fetchAgentSessions(plugin, options);
+          allAggregates.push(...aggregates);
+          debug(`Fetched ${aggregates.length} sessions from ${plugin.id}`, undefined, 'agent-sessions');
+        } catch (err) {
+          const errorMsg = err instanceof Error ? err.message : 'Unknown error';
+          warn(`Failed to fetch sessions from ${plugin.id}: ${errorMsg}`, undefined, 'agent-sessions');
+        }
+      }
+
+      const pricedSessions = await priceSessions(allAggregates);
+
+      pricedSessions.sort((a, b) => b.lastActivityAt - a.lastActivityAt);
+
+      if (storageReady) {
+        const now = Date.now();
+        let persistedCount = 0;
+        for (const session of pricedSessions) {
+          const fp = sessionFingerprint(session);
+          const prevFp = sessionPersistenceFingerprints.get(session.sessionId);
+          if (prevFp === fp) continue;
+
+          sessionPersistenceFingerprints.set(session.sessionId, fp);
+          persistedCount++;
+
+          recordAgentSession(
+            {
+              agentId: session.agentId,
+              sessionId: session.sessionId,
+              projectPath: session.projectPath ?? null,
+              startedAt: session.startedAt ?? null,
+              lastSeenAt: now,
+            },
+            {
+              timestamp: now,
+              lastActivityAt: session.lastActivityAt,
+              status: session.status,
+              totalInputTokens: session.totals.input,
+              totalOutputTokens: session.totals.output,
+              totalCacheReadTokens: session.totals.cacheRead ?? 0,
+              totalCacheWriteTokens: session.totals.cacheWrite ?? 0,
+              totalCostUsd: session.totalCostUsd ?? 0,
+              requestCount: session.requestCount,
+            },
+            session.streams.map(s => ({
+              provider: s.providerId,
+              model: s.modelId,
+              inputTokens: s.tokens.input,
+              outputTokens: s.tokens.output,
+              cacheReadTokens: s.tokens.cacheRead ?? 0,
+              cacheWriteTokens: s.tokens.cacheWrite ?? 0,
+              costUsd: s.costUsd ?? 0,
+              requestCount: s.requestCount,
+              pricingSource: (s.pricingSource as PricingSource) ?? null,
+            }))
+          );
+        }
+        debug(`Persisted ${persistedCount}/${pricedSessions.length} changed sessions to storage`, undefined, 'agent-sessions');
+      }
+
+      setSessions(pricedSessions);
+      setLastRefreshAt(Date.now());
+
+      debug(`Session refresh complete`, { count: pricedSessions.length }, 'agent-sessions');
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Unknown error';
+      logError(`Session refresh failed: ${errorMsg}`, undefined, 'agent-sessions');
+      setError(errorMsg);
+    } finally {
+      if (isInitialLoad) {
+        setIsLoading(false);
+      }
+    }
+  }, [sessions.length, discoverAgents, fetchAgentSessions, debug, warn, logError, storageReady, recordAgentSession, demoMode]);
+
+  const refreshSessionsRef = useRef(refreshSessions);
+  refreshSessionsRef.current = refreshSessions;
+
+  useEffect(() => {
+    if (!(demoMode || pluginsInitialized)) return;
+
+    const since = windowMs !== null ? Date.now() - windowMs : undefined;
+    refreshSessions(since ? { since } : {}).then(() => {
+      if (since && !hasBackfilled.current) {
+        hasBackfilled.current = true;
+        refreshSessionsRef.current();
+      }
+    });
+  }, [pluginsInitialized, demoMode]);
+
+  useEffect(() => {
+    if (!autoRefresh) return;
+
+    debug(`Setting up session refresh interval: ${refreshInterval}ms`, undefined, 'agent-sessions');
+    
+    const intervalId = setInterval(() => {
+      debug('Interval tick - refreshing sessions', undefined, 'agent-sessions');
+      refreshSessionsRef.current();
+    }, refreshInterval);
+
+    return () => {
+      debug('Clearing session refresh interval', undefined, 'agent-sessions');
+      clearInterval(intervalId);
+    };
+  }, [autoRefresh, refreshInterval, debug]);
+
+  const value: AgentSessionContextValue = {
+    sessions,
+    agents,
+    isLoading,
+    lastRefreshAt,
+    error,
+    refreshSessions,
+  };
+
+  return (
+    <AgentSessionContext.Provider value={value}>
+      {children}
+    </AgentSessionContext.Provider>
+  );
+}
+
+export function useAgentSessions(): AgentSessionContextValue {
+  const context = useContext(AgentSessionContext);
+  if (!context) {
+    throw new Error('useAgentSessions must be used within AgentSessionProvider');
+  }
+  return context;
+}
+
+export function useActiveSessions(): AgentSessionAggregate[] {
+  const { sessions } = useAgentSessions();
+  return sessions.filter(s => s.status === 'active');
+}
+
+export function useSessionsByAgent(agentId: AgentId): AgentSessionAggregate[] {
+  const { sessions } = useAgentSessions();
+  return sessions.filter(s => s.agentId === agentId);
+}
+
+export function useTotalCost(): number {
+  const { sessions } = useAgentSessions();
+  return sessions.reduce((sum, s) => sum + (s.totalCostUsd ?? 0), 0);
+}
+
+export function useTotalTokens(): { input: number; output: number } {
+  const { sessions } = useAgentSessions();
+  return sessions.reduce(
+    (acc, s) => ({
+      input: acc.input + s.totals.input,
+      output: acc.output + s.totals.output,
+    }),
+    { input: 0, output: 0 }
+  );
+}

package/src/tui/contexts/ConfigContext.tsx

@@ -0,0 +1,141 @@
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+import { loadConfig, saveConfig, DEFAULT_CONFIG, type AppConfig } from '@/config/schema.ts';
+import { useDemoMode } from './DemoModeContext.tsx';
+
+interface ConfigContextValue {
+  config: AppConfig;
+  isLoading: boolean;
+  updateConfig: (updates: Partial<AppConfig>) => void;
+  updateRefresh: (updates: Partial<AppConfig['refresh']>) => void;
+  updateDisplay: (updates: Partial<AppConfig['display']>) => void;
+  updateNotifications: (updates: Partial<AppConfig['notifications']>) => void;
+  resetToDefaults: () => void;
+  saveNow: () => Promise<void>;
+}
+
+const ConfigContext = createContext<ConfigContextValue | null>(null);
+
+interface ConfigProviderProps {
+  children: ReactNode;
+  /** For testing: skip async loading and use this config directly */
+  initialConfig?: AppConfig;
+}
+
+export function ConfigProvider({ children, initialConfig }: ConfigProviderProps) {
+  const { demoMode } = useDemoMode();
+  const demoConfig: AppConfig = {
+    ...DEFAULT_CONFIG,
+    refresh: {
+      ...DEFAULT_CONFIG.refresh,
+      intervalMs: 5000,
+      pauseAutoRefresh: false,
+    },
+    display: {
+      ...DEFAULT_CONFIG.display,
+      defaultTimeWindow: '1h',
+      sidebarCollapsed: false,
+    },
+    budgets: {
+      daily: 50,
+      weekly: 200,
+      monthly: 800,
+      currency: 'USD',
+    },
+    alerts: {
+      ...DEFAULT_CONFIG.alerts,
+      criticalPercent: 90,
+    },
+  };
+  const [config, setConfig] = useState<AppConfig>(initialConfig ?? (demoMode ? demoConfig : DEFAULT_CONFIG));
+  const [isLoading, setIsLoading] = useState(!initialConfig);
+  const [pendingSave, setPendingSave] = useState(false);
+
+  useEffect(() => {
+    if (initialConfig) return; // Skip loading if initial config provided
+    if (demoMode) {
+      setConfig(demoConfig);
+      setIsLoading(false);
+      return;
+    }
+    loadConfig().then((loaded) => {
+      setConfig(loaded);
+      setIsLoading(false);
+    });
+  }, [initialConfig, demoMode]);
+
+  useEffect(() => {
+    if (demoMode || isLoading || !pendingSave) return;
+
+    const timeout = setTimeout(() => {
+      saveConfig(config).catch(() => {});
+      setPendingSave(false);
+    }, 500);
+
+    return () => clearTimeout(timeout);
+  }, [config, isLoading, pendingSave]);
+
+  const updateConfig = useCallback((updates: Partial<AppConfig>) => {
+    setConfig((prev) => ({ ...prev, ...updates }));
+    setPendingSave(true);
+  }, []);
+
+  const updateRefresh = useCallback((updates: Partial<AppConfig['refresh']>) => {
+    setConfig((prev) => ({
+      ...prev,
+      refresh: { ...prev.refresh, ...updates },
+    }));
+    setPendingSave(true);
+  }, []);
+
+  const updateDisplay = useCallback((updates: Partial<AppConfig['display']>) => {
+    setConfig((prev) => ({
+      ...prev,
+      display: { ...prev.display, ...updates },
+    }));
+    setPendingSave(true);
+  }, []);
+
+  const updateNotifications = useCallback((updates: Partial<AppConfig['notifications']>) => {
+    setConfig((prev) => ({
+      ...prev,
+      notifications: { ...prev.notifications, ...updates },
+    }));
+    setPendingSave(true);
+  }, []);
+
+  const resetToDefaults = useCallback(() => {
+    setConfig(DEFAULT_CONFIG);
+    setPendingSave(true);
+  }, []);
+
+  const saveNow = useCallback(async () => {
+    if (demoMode) return;
+    await saveConfig(config);
+    setPendingSave(false);
+  }, [config, demoMode]);
+
+  return (
+    <ConfigContext.Provider
+      value={{
+        config,
+        isLoading,
+        updateConfig,
+        updateRefresh,
+        updateDisplay,
+        updateNotifications,
+        resetToDefaults,
+        saveNow,
+      }}
+    >
+      {children}
+    </ConfigContext.Provider>
+  );
+}
+
+export function useConfig(): ConfigContextValue {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error('useConfig must be used within a ConfigProvider');
+  }
+  return context;
+}

package/src/tui/contexts/DashboardRuntimeContext.tsx

@@ -0,0 +1,102 @@
+import { createContext, useContext, useState, useEffect, useRef, type ReactNode } from 'react';
+import { useAgentSessions } from './AgentSessionContext.tsx';
+import { useTimeWindow } from './TimeWindowContext.tsx';
+import { useRealTimeActivity } from './RealTimeActivityContext.tsx';
+import { useEmaActivity, type ActivityState, type ActivityDebugData } from '../hooks/useEmaActivity.ts';
+
+interface Deltas {
+  cost: number;
+  tokens: number;
+  windowSec: number;
+}
+
+interface DashboardRuntimeContextValue {
+  activity: ActivityState;
+  sparkData: number[];
+  
+  deltas: Deltas;
+  history: Array<{time: number, cost: number, tokens: number}>;
+  
+  debugDataRef: React.MutableRefObject<ActivityDebugData>;
+}
+
+const DashboardRuntimeContext = createContext<DashboardRuntimeContextValue | null>(null);
+
+export function DashboardRuntimeProvider({ children }: { children: ReactNode }) {
+  const { sessions: agentSessions, isLoading } = useAgentSessions();
+  const { windowMs } = useTimeWindow();
+  const { subscribe } = useRealTimeActivity();
+  
+  const totalTokens = agentSessions.reduce((sum, s) => sum + s.totals.input + s.totals.output, 0);
+  const { activity, sparkData, debugDataRef, injectDelta } = useEmaActivity(totalTokens);
+  
+  useEffect(() => {
+    return subscribe((delta, _timestamp) => {
+      injectDelta(delta);
+    });
+  }, [subscribe, injectDelta]);
+
+  const historyRef = useRef<{time: number, cost: number, tokens: number}[]>([]);
+  const [deltas, setDeltas] = useState<Deltas>({ cost: 0, tokens: 0, windowSec: 0 });
+
+  useEffect(() => {
+    if (isLoading || agentSessions.length === 0) return;
+    
+    const totalCost = agentSessions.reduce((sum, s) => sum + (s.totalCostUsd ?? 0), 0);
+    const currentTime = Date.now();
+    
+    const lastEntry = historyRef.current[historyRef.current.length - 1];
+    const isDiscontinuity = lastEntry && (
+      totalTokens < lastEntry.tokens ||
+      totalTokens > lastEntry.tokens * 2
+    );
+    if (isDiscontinuity) {
+      historyRef.current = [];
+    }
+    
+    historyRef.current.push({ time: currentTime, cost: totalCost, tokens: totalTokens });
+    
+    if (historyRef.current.length > 300) historyRef.current.shift();
+
+    const targetTime = windowMs !== null ? currentTime - windowMs : 0;
+    let baseline = historyRef.current[0];
+    
+    for (let i = historyRef.current.length - 1; i >= 0; i--) {
+      if (historyRef.current[i]!.time <= targetTime) {
+        baseline = historyRef.current[i];
+        break;
+      }
+    }
+    
+    if (baseline) {
+      const windowSec = (currentTime - baseline.time) / 1000;
+      setDeltas({
+        cost: totalCost - baseline.cost,
+        tokens: totalTokens - baseline.tokens,
+        windowSec,
+      });
+    }
+  }, [agentSessions, isLoading, windowMs, totalTokens]);
+
+  const value: DashboardRuntimeContextValue = {
+    activity,
+    sparkData,
+    deltas,
+    history: historyRef.current,
+    debugDataRef
+  };
+
+  return (
+    <DashboardRuntimeContext.Provider value={value}>
+      {children}
+    </DashboardRuntimeContext.Provider>
+  );
+}
+
+export function useDashboardRuntime() {
+  const context = useContext(DashboardRuntimeContext);
+  if (!context) {
+    throw new Error('useDashboardRuntime must be used within DashboardRuntimeProvider');
+  }
+  return context;
+}

package/src/tui/contexts/DemoModeContext.tsx

@@ -0,0 +1,60 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { DemoSimulator, type DemoPreset, type DemoSimulatorOptions } from '@/demo/simulator.ts';
+
+interface DemoModeContextValue {
+  demoMode: boolean;
+  simulator: DemoSimulator | null;
+  seed: number | null;
+  preset: DemoPreset | null;
+}
+
+const DemoModeContext = createContext<DemoModeContextValue>({
+  demoMode: false,
+  simulator: null,
+  seed: null,
+  preset: null,
+});
+
+interface DemoModeProviderProps {
+  demoMode: boolean;
+  demoSeed?: number;
+  demoPreset?: DemoPreset;
+  children: ReactNode;
+}
+
+function buildSimulatorOptions(seed: number | undefined, preset: DemoPreset | undefined): DemoSimulatorOptions {
+  if (seed !== undefined && preset !== undefined) {
+    return { seed, preset };
+  }
+  if (seed !== undefined) {
+    return { seed };
+  }
+  if (preset !== undefined) {
+    return { preset };
+  }
+  return {};
+}
+
+export function DemoModeProvider({ demoMode, demoSeed, demoPreset, children }: DemoModeProviderProps) {
+  const simulator = useMemo(() => {
+    if (!demoMode) return null;
+    return new DemoSimulator(buildSimulatorOptions(demoSeed, demoPreset));
+  }, [demoMode, demoSeed, demoPreset]);
+
+  const value = useMemo<DemoModeContextValue>(() => ({
+    demoMode,
+    simulator,
+    seed: simulator?.getSeed() ?? null,
+    preset: simulator?.getPreset() ?? null,
+  }), [demoMode, simulator]);
+
+  return (
+    <DemoModeContext.Provider value={value}>
+      {children}
+    </DemoModeContext.Provider>
+  );
+}
+
+export function useDemoMode(): DemoModeContextValue {
+  return useContext(DemoModeContext);
+}

package/src/tui/contexts/DrawerContext.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import type { AgentSessionAggregate } from '@/agents/types.ts';
+
+interface DrawerContextValue {
+  selectedSession: AgentSessionAggregate | null;
+  showDrawer: (session: AgentSessionAggregate) => void;
+  hideDrawer: () => void;
+  isOpen: boolean;
+}
+
+const DrawerContext = createContext<DrawerContextValue | null>(null);
+
+export function DrawerProvider({ children }: { children: ReactNode }) {
+  const [selectedSession, setSelectedSession] = useState<AgentSessionAggregate | null>(null);
+
+  const showDrawer = useCallback((session: AgentSessionAggregate) => {
+    setSelectedSession(session);
+  }, []);
+
+  const hideDrawer = useCallback(() => {
+    setSelectedSession(null);
+  }, []);
+
+  return (
+    <DrawerContext.Provider value={{
+      selectedSession,
+      showDrawer,
+      hideDrawer,
+      isOpen: selectedSession !== null,
+    }}>
+      {children}
+    </DrawerContext.Provider>
+  );
+}
+
+export function useDrawer(): DrawerContextValue {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error('useDrawer must be used within DrawerProvider');
+  }
+  return context;
+}

package/src/tui/contexts/InputContext.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+
+interface InputContextType {
+  isInputFocused: boolean;
+  setInputFocused: (focused: boolean) => void;
+}
+
+const InputContext = createContext<InputContextType | undefined>(undefined);
+
+export function InputProvider({ children }: { children: ReactNode }) {
+  const [isInputFocused, setIsInputFocused] = useState(false);
+
+  const setInputFocused = useCallback((focused: boolean) => {
+    setIsInputFocused(focused);
+  }, []);
+
+  return (
+    <InputContext.Provider value={{ isInputFocused, setInputFocused }}>
+      {children}
+    </InputContext.Provider>
+  );
+}
+
+export function useInputFocus() {
+  const context = useContext(InputContext);
+  if (context === undefined) {
+    throw new Error('useInputFocus must be used within an InputProvider');
+  }
+  return context;
+}