@tokentop/ttop 0.2.2

package/src/tui/contexts/LogContext.tsx

@@ -0,0 +1,150 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+export interface LogEntry {
+  id: number;
+  level: LogLevel;
+  message: string;
+  data?: Record<string, unknown>;
+  timestamp: number;
+  source?: string;
+}
+
+interface LogContextValue {
+  logs: LogEntry[];
+  isConsoleOpen: boolean;
+  toggleConsole: () => void;
+  openConsole: () => void;
+  closeConsole: () => void;
+  log: (level: LogLevel, message: string, data?: Record<string, unknown>, source?: string) => void;
+  debug: (message: string, data?: Record<string, unknown>, source?: string) => void;
+  info: (message: string, data?: Record<string, unknown>, source?: string) => void;
+  warn: (message: string, data?: Record<string, unknown>, source?: string) => void;
+  error: (message: string, data?: Record<string, unknown>, source?: string) => void;
+  clearLogs: () => void;
+  exportLogs: () => string;
+}
+
+const LogContext = createContext<LogContextValue | null>(null);
+
+let logIdCounter = 0;
+const MAX_LOGS = 500;
+
+interface LogProviderProps {
+  children: ReactNode;
+  debugEnabled?: boolean;
+}
+
+export function LogProvider({ children, debugEnabled = true }: LogProviderProps) {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [isConsoleOpen, setIsConsoleOpen] = useState(false);
+
+  const addLog = useCallback((level: LogLevel, message: string, data?: Record<string, unknown>, source?: string) => {
+    if (level === 'debug' && !debugEnabled) return;
+
+    const entry: LogEntry = {
+      id: ++logIdCounter,
+      level,
+      message,
+      timestamp: Date.now(),
+      ...(data !== undefined ? { data } : {}),
+      ...(source !== undefined ? { source } : {}),
+    };
+
+    setLogs((prev) => {
+      const next = [...prev, entry];
+      if (next.length > MAX_LOGS) {
+        return next.slice(-MAX_LOGS);
+      }
+      return next;
+    });
+  }, [debugEnabled]);
+
+  const log = useCallback((level: LogLevel, message: string, data?: Record<string, unknown>, source?: string) => {
+    addLog(level, message, data, source);
+  }, [addLog]);
+
+  const debug = useCallback((message: string, data?: Record<string, unknown>, source?: string) => {
+    addLog('debug', message, data, source);
+  }, [addLog]);
+
+  const info = useCallback((message: string, data?: Record<string, unknown>, source?: string) => {
+    addLog('info', message, data, source);
+  }, [addLog]);
+
+  const warn = useCallback((message: string, data?: Record<string, unknown>, source?: string) => {
+    addLog('warn', message, data, source);
+  }, [addLog]);
+
+  const error = useCallback((message: string, data?: Record<string, unknown>, source?: string) => {
+    addLog('error', message, data, source);
+  }, [addLog]);
+
+  const clearLogs = useCallback(() => {
+    setLogs([]);
+  }, []);
+
+  const toggleConsole = useCallback(() => {
+    setIsConsoleOpen((prev) => !prev);
+  }, []);
+
+  const openConsole = useCallback(() => {
+    setIsConsoleOpen(true);
+  }, []);
+
+  const closeConsole = useCallback(() => {
+    setIsConsoleOpen(false);
+  }, []);
+
+  const exportLogs = useCallback(() => {
+    const lines = logs.map((entry) => {
+      const time = new Date(entry.timestamp).toISOString();
+      const src = entry.source ? `[${entry.source}]` : '';
+      const dataStr = entry.data ? ` ${JSON.stringify(entry.data)}` : '';
+      return `${time} ${entry.level.toUpperCase().padEnd(5)} ${src} ${entry.message}${dataStr}`;
+    });
+    return lines.join('\n');
+  }, [logs]);
+
+  const value: LogContextValue = {
+    logs,
+    isConsoleOpen,
+    toggleConsole,
+    openConsole,
+    closeConsole,
+    log,
+    debug,
+    info,
+    warn,
+    error,
+    clearLogs,
+    exportLogs,
+  };
+
+  return (
+    <LogContext.Provider value={value}>
+      {children}
+    </LogContext.Provider>
+  );
+}
+
+export function useLogs(): LogContextValue {
+  const context = useContext(LogContext);
+  if (!context) {
+    throw new Error('useLogs must be used within LogProvider');
+  }
+  return context;
+}
+
+export function useLogger(source: string) {
+  const { log, debug, info, warn, error } = useLogs();
+
+  return {
+    log: (level: LogLevel, message: string, data?: Record<string, unknown>) => log(level, message, data, source),
+    debug: (message: string, data?: Record<string, unknown>) => debug(message, data, source),
+    info: (message: string, data?: Record<string, unknown>) => info(message, data, source),
+    warn: (message: string, data?: Record<string, unknown>) => warn(message, data, source),
+    error: (message: string, data?: Record<string, unknown>) => error(message, data, source),
+  };
+}

package/src/tui/contexts/PluginContext.tsx

@@ -0,0 +1,424 @@
+import { createContext, useContext, useState, useEffect, useCallback, useRef, type ReactNode } from 'react';
+import type { ProviderPlugin, ProviderUsageData, Credentials } from '@/plugins/types/provider.ts';
+import type { ThemePlugin } from '@/plugins/types/theme.ts';
+import type { NotificationPlugin } from '@/plugins/types/notification.ts';
+import { pluginRegistry } from '@/plugins/registry.ts';
+import { createSandboxedHttpClient, createPluginLogger } from '@/plugins/sandbox.ts';
+import { createPluginContext } from '@/plugins/plugin-context-factory.ts';
+import { safeInvoke, safeInvokeSync } from '@/plugins/plugin-host.ts';
+import { notificationBus } from '@/plugins/notification-bus.ts';
+import { pluginLifecycle } from '@/plugins/lifecycle.ts';
+import { installGlobalFetchGuard, runInPluginGuard } from '@/plugins/sandbox-guard.ts';
+import { initPricingFromPlugins } from '@/pricing/index.ts';
+import { useLogs } from './LogContext.tsx';
+import { useStorage } from './StorageContext.tsx';
+import type { ProviderSnapshotInsert } from '@/storage/types.ts';
+import { useDemoMode } from './DemoModeContext.tsx';
+import { useConfig } from './ConfigContext.tsx';
+
+export interface UsageSnapshot {
+  timestamp: number;
+  usedPercent: number | null;
+  limitReached?: boolean | undefined;
+}
+
+const HISTORY_SIZE = 30; // Keep last 30 snapshots per provider
+
+export interface ProviderState {
+  plugin: ProviderPlugin;
+  configured: boolean;
+  usage: ProviderUsageData | null;
+  loading: boolean;
+  lastFetchAt: number | null;
+  history: UsageSnapshot[];
+}
+
+interface PluginContextValue {
+  providers: Map<string, ProviderState>;
+  themes: ThemePlugin[];
+  notifications: NotificationPlugin[];
+  isInitialized: boolean;
+  refreshProvider: (providerId: string) => Promise<void>;
+  refreshAllProviders: () => Promise<void>;
+}
+
+const PluginContext = createContext<PluginContextValue | null>(null);
+
+function getMaxUsagePercent(usage: ProviderUsageData): number | null {
+  if (!usage.limits) return null;
+  
+  const items = usage.limits.items ?? [];
+  if (items.length > 0) {
+    const percents = items.map((item) => item.usedPercent).filter((p): p is number => p !== null);
+    return percents.length > 0 ? Math.max(...percents) : null;
+  }
+  
+  const primary = usage.limits.primary?.usedPercent;
+  const secondary = usage.limits.secondary?.usedPercent;
+  
+  if (primary !== null && primary !== undefined && secondary !== null && secondary !== undefined) {
+    return Math.max(primary, secondary);
+  }
+  return primary ?? secondary ?? null;
+}
+
+function addToHistory(history: UsageSnapshot[], snapshot: UsageSnapshot): UsageSnapshot[] {
+  const newHistory = [...history, snapshot];
+  if (newHistory.length > HISTORY_SIZE) {
+    return newHistory.slice(-HISTORY_SIZE);
+  }
+  return newHistory;
+}
+
+interface PluginProviderProps {
+  children: ReactNode;
+  cliPlugins?: string[];
+}
+
+export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [providers, setProviders] = useState<Map<string, ProviderState>>(new Map());
+  const [themes, setThemes] = useState<ThemePlugin[]>([]);
+  const [notifications, setNotifications] = useState<NotificationPlugin[]>([]);
+  const { demoMode, simulator } = useDemoMode();
+  const { debug, info, warn, error: logError } = useLogs();
+  const { isReady: storageReady, recordProviderSnapshots } = useStorage();
+  const { config } = useConfig();
+
+  useEffect(() => {
+    async function initialize() {
+      installGlobalFetchGuard();
+      debug('Initializing plugin registry...', undefined, 'plugins');
+
+      try {
+        if (!demoMode) {
+          const initConfig: { plugins?: typeof config.plugins; cliPlugins?: string[] } = {
+            plugins: config.plugins,
+          };
+          if (cliPlugins) {
+            initConfig.cliPlugins = cliPlugins;
+          }
+          await pluginRegistry.initialize(initConfig);
+        } else {
+          await pluginRegistry.loadBuiltinPlugins();
+        }
+        info('Plugin registry initialized', undefined, 'plugins');
+      } catch (err) {
+        logError('Failed to initialize plugin registry', { error: String(err) }, 'plugins');
+      }
+
+      const providerPlugins = pluginRegistry.getAll('provider');
+      const themePlugins = pluginRegistry.getAll('theme');
+      const notificationPlugins = pluginRegistry.getAll('notification');
+
+      initPricingFromPlugins(providerPlugins, {
+        'google-gemini': 'google',
+      });
+
+      info(`Loaded plugins`, {
+        providers: providerPlugins.length,
+        themes: themePlugins.length,
+        notifications: notificationPlugins.length,
+      }, 'plugins');
+
+      await pluginLifecycle.initializeAll();
+      await pluginLifecycle.startAll();
+      debug('Plugin lifecycle: all plugins initialized and started', undefined, 'plugins');
+
+      debug('Discovering credentials...', undefined, 'credentials');
+
+      const credentials = new Map<string, Credentials>();
+      if (!demoMode) {
+        await Promise.all(providerPlugins.map(async (p) => {
+          const ctx = createPluginContext(p.id, p.permissions);
+          const result = await safeInvoke(p.id, 'auth.discover', () =>
+            runInPluginGuard(p.id, p.permissions, () => p.auth.discover(ctx)),
+          );
+          if (result.ok && result.value.ok && result.value.credentials) {
+            credentials.set(p.id, result.value.credentials);
+          } else if (!result.ok) {
+            logError(`Credential discovery failed for ${p.id}`, { error: result.error.message }, 'credentials');
+          }
+        }));
+      }
+
+      const providerStates = new Map<string, ProviderState>();
+      const configuredIds: string[] = [];
+      const unconfiguredIds: string[] = [];
+
+      for (const plugin of providerPlugins) {
+        const creds = credentials.get(plugin.id);
+        let configured = false;
+        if (demoMode) {
+          configured = true;
+        } else if (creds) {
+          const check = safeInvokeSync(plugin.id, 'auth.isConfigured', () => plugin.auth.isConfigured(creds));
+          configured = check.ok ? check.value : false;
+        }
+        providerStates.set(plugin.id, {
+          plugin,
+          configured,
+          usage: null,
+          loading: false,
+          lastFetchAt: null,
+          history: [],
+        });
+
+        if (configured) {
+          configuredIds.push(plugin.id);
+        } else {
+          unconfiguredIds.push(plugin.id);
+        }
+      }
+
+      info('Credential discovery complete', {
+        configured: configuredIds,
+        unconfigured: unconfiguredIds,
+      }, 'credentials');
+
+      if (demoMode && simulator) {
+        const snapshot = simulator.tick();
+        for (const [providerId, usage] of snapshot.providerUsage.entries()) {
+          const state = providerStates.get(providerId);
+          if (!state) continue;
+          providerStates.set(providerId, {
+            ...state,
+            usage,
+            lastFetchAt: Date.now(),
+            history: addToHistory(state.history, {
+              timestamp: Date.now(),
+              usedPercent: getMaxUsagePercent(usage),
+              limitReached: usage.limitReached,
+            }),
+          });
+        }
+      }
+
+      notificationBus.registerPlugins(notificationPlugins);
+
+      setProviders(providerStates);
+      setThemes(themePlugins);
+      setNotifications(notificationPlugins);
+      setIsInitialized(true);
+    }
+
+    initialize();
+  }, []);
+
+  const prevPluginConfigRef = useRef<Record<string, Record<string, unknown>>>({});
+  useEffect(() => {
+    if (!isInitialized) return;
+    const prev = prevPluginConfigRef.current;
+    const next = config.pluginConfig ?? {};
+    const allIds = new Set([...Object.keys(prev), ...Object.keys(next)]);
+
+    for (const pluginId of allIds) {
+      const prevStr = JSON.stringify(prev[pluginId] ?? {});
+      const nextStr = JSON.stringify(next[pluginId] ?? {});
+      if (prevStr !== nextStr) {
+        debug(`Plugin config changed for ${pluginId}`, undefined, 'plugins');
+        pluginLifecycle.notifyConfigChange(pluginId, next[pluginId] ?? {});
+      }
+    }
+    prevPluginConfigRef.current = { ...next };
+  }, [config.pluginConfig, isInitialized]);
+
+  const refreshProvider = useCallback(async (providerId: string) => {
+    const state = providers.get(providerId);
+    if (!state || !state.configured) {
+      debug(`Skipping refresh for ${providerId}: not configured`, undefined, 'refresh');
+      return;
+    }
+
+    info(`Refreshing ${providerId}...`, undefined, 'refresh');
+
+    setProviders((prev) => {
+      const next = new Map(prev);
+      const current = next.get(providerId);
+      if (current) {
+        next.set(providerId, { ...current, loading: true });
+      }
+      return next;
+    });
+
+    try {
+      if (demoMode && simulator) {
+        const snapshot = simulator.tick();
+        const usage = snapshot.providerUsage.get(providerId) ?? {
+          fetchedAt: Date.now(),
+          error: 'Demo provider data missing',
+        };
+
+        if (storageReady) {
+          recordProviderSnapshots([
+            {
+              timestamp: Date.now(),
+              provider: providerId,
+              usedPercent: getMaxUsagePercent(usage),
+              limitReached: usage.limitReached ?? false,
+              resetsAt: usage.limits?.primary?.resetsAt ?? null,
+              rawJson: JSON.stringify(usage),
+            },
+          ]);
+        }
+
+        setProviders((prev) => {
+          const next = new Map(prev);
+          const current = next.get(providerId);
+          const currentHistory = current?.history ?? [];
+          const snapshotEntry: UsageSnapshot = {
+            timestamp: Date.now(),
+            usedPercent: getMaxUsagePercent(usage),
+            limitReached: usage.limitReached,
+          };
+          next.set(providerId, {
+            ...state,
+            usage,
+            loading: false,
+            lastFetchAt: Date.now(),
+            history: addToHistory(currentHistory, snapshotEntry),
+          });
+          return next;
+        });
+
+        return;
+      }
+
+      const ctx = createPluginContext(providerId, state.plugin.permissions);
+      const discoverResult = await safeInvoke(providerId, 'auth.discover', () =>
+        runInPluginGuard(providerId, state.plugin.permissions, () => state.plugin.auth.discover(ctx)),
+      );
+
+      if (!discoverResult.ok) {
+        throw discoverResult.error;
+      }
+      const creds = discoverResult.value.ok ? discoverResult.value.credentials : undefined;
+
+      if (!creds) {
+        throw new Error('Credentials not found');
+      }
+
+      const http = createSandboxedHttpClient(providerId, state.plugin.permissions);
+      const logger = createPluginLogger(providerId);
+
+      const fetchResult = await safeInvoke(providerId, 'fetchUsage', () =>
+        runInPluginGuard(providerId, state.plugin.permissions, () =>
+          state.plugin.fetchUsage({ credentials: creds, http, logger, config: {}, signal: AbortSignal.timeout(30_000) }),
+        ),
+      );
+
+      if (!fetchResult.ok) {
+        throw fetchResult.error;
+      }
+
+      const usage = fetchResult.value;
+
+      if (usage.error) {
+        warn(`${providerId} returned error: ${usage.error}`, undefined, 'refresh');
+      } else {
+        info(`${providerId} refreshed successfully`, {
+          limitReached: usage.limitReached,
+          primaryUsage: usage.limits?.primary?.usedPercent,
+        }, 'refresh');
+        
+        if (storageReady) {
+          const now = Date.now();
+          const snapshotInsert: ProviderSnapshotInsert = {
+            timestamp: now,
+            provider: providerId,
+            usedPercent: getMaxUsagePercent(usage),
+            limitReached: usage.limitReached ?? false,
+            resetsAt: usage.limits?.primary?.resetsAt ?? null,
+            rawJson: JSON.stringify(usage),
+          };
+          recordProviderSnapshots([snapshotInsert]);
+        }
+
+        notificationBus.checkProviderUsage(providerId, state.plugin.name, usage);
+      }
+
+      setProviders((prev) => {
+        const next = new Map(prev);
+        const current = next.get(providerId);
+        const currentHistory = current?.history ?? [];
+        
+        const snapshot: UsageSnapshot = {
+          timestamp: Date.now(),
+          usedPercent: getMaxUsagePercent(usage),
+          limitReached: usage.limitReached,
+        };
+        
+        next.set(providerId, {
+          ...state,
+          usage,
+          loading: false,
+          lastFetchAt: Date.now(),
+          history: addToHistory(currentHistory, snapshot),
+        });
+        return next;
+      });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Unknown error';
+      logError(`Failed to refresh ${providerId}: ${errorMsg}`, undefined, 'refresh');
+
+      setProviders((prev) => {
+        const next = new Map(prev);
+        const current = next.get(providerId);
+        next.set(providerId, {
+          ...state,
+          usage: {
+            fetchedAt: Date.now(),
+            error: errorMsg,
+          },
+          loading: false,
+          lastFetchAt: Date.now(),
+          history: current?.history ?? [],
+        });
+        return next;
+      });
+    }
+  }, [providers, debug, info, warn, logError, storageReady, recordProviderSnapshots, demoMode, simulator]);
+
+  const refreshAllProviders = useCallback(async () => {
+    const configuredProviders = Array.from(providers.entries())
+      .filter(([_, state]) => state.configured)
+      .map(([id]) => id);
+
+    info(`Refreshing ${configuredProviders.length} providers`, { providers: configuredProviders }, 'refresh');
+
+    await Promise.all(configuredProviders.map(refreshProvider));
+  }, [providers, refreshProvider, info]);
+
+  const value: PluginContextValue = {
+    providers,
+    themes,
+    notifications,
+    isInitialized,
+    refreshProvider,
+    refreshAllProviders,
+  };
+
+  return (
+    <PluginContext.Provider value={value}>
+      {children}
+    </PluginContext.Provider>
+  );
+}
+
+export function usePlugins(): PluginContextValue {
+  const context = useContext(PluginContext);
+  if (!context) {
+    throw new Error('usePlugins must be used within PluginProvider');
+  }
+  return context;
+}
+
+export function useProvider(providerId: string): ProviderState | undefined {
+  const { providers } = usePlugins();
+  return providers.get(providerId);
+}
+
+export function useConfiguredProviders(): ProviderState[] {
+  const { providers } = usePlugins();
+  return Array.from(providers.values()).filter((p) => p.configured);
+}

package/src/tui/contexts/RealTimeActivityContext.tsx

@@ -0,0 +1,119 @@
+import { createContext, useContext, useState, useEffect, useRef, useCallback, type ReactNode } from 'react';
+import { pluginRegistry } from '@/plugins/registry.ts';
+import type { ActivityUpdate } from '@/plugins/types/agent.ts';
+import { createPluginContext } from '@/plugins/plugin-context-factory.ts';
+import { usePlugins } from './PluginContext.tsx';
+import { useLogs } from './LogContext.tsx';
+import { useDemoMode } from './DemoModeContext.tsx';
+
+type ActivityListener = (delta: number, timestamp: number) => void;
+
+interface RealTimeActivityContextValue {
+  lastActivityAt: number | null;
+  isWatching: boolean;
+  subscribe: (listener: ActivityListener) => () => void;
+}
+
+const RealTimeActivityContext = createContext<RealTimeActivityContextValue | null>(null);
+
+export function RealTimeActivityProvider({ children }: { children: ReactNode }) {
+  const [lastActivityAt, setLastActivityAt] = useState<number | null>(null);
+  const [isWatching, setIsWatching] = useState(false);
+  const { isInitialized: pluginsInitialized } = usePlugins();
+  const { debug, info } = useLogs();
+  const { demoMode } = useDemoMode();
+  
+  const lastSeenRef = useRef<Map<string, number>>(new Map());
+  const listenersRef = useRef<Set<ActivityListener>>(new Set());
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  const subscribe = useCallback((listener: ActivityListener) => {
+    listenersRef.current.add(listener);
+    return () => {
+      listenersRef.current.delete(listener);
+    };
+  }, []);
+
+  const handleActivityUpdate = useCallback((update: ActivityUpdate) => {
+    const key = `${update.sessionId}:${update.messageId}`;
+    const prevTokens = lastSeenRef.current.get(key) ?? 0;
+    const newTokens = update.tokens.input + update.tokens.output + (update.tokens.reasoning ?? 0);
+    const delta = Math.max(0, newTokens - prevTokens);
+    
+    if (delta > 0) {
+      lastSeenRef.current.set(key, newTokens);
+      setLastActivityAt(update.timestamp);
+      debug(`Real-time activity: +${delta} tokens`, { sessionId: update.sessionId }, 'realtime');
+      
+      for (const listener of listenersRef.current) {
+        listener(delta, update.timestamp);
+      }
+    }
+  }, [debug]);
+
+  useEffect(() => {
+    if (demoMode || !pluginsInitialized) return;
+
+    const agentPlugins = pluginRegistry.getAll('agent');
+    const cleanups: (() => void)[] = [];
+
+    for (const plugin of agentPlugins) {
+      if (plugin.capabilities.realTimeTracking && plugin.startActivityWatch) {
+        const ctx = createPluginContext(plugin.id, plugin.permissions);
+        info(`Starting real-time activity watch for ${plugin.id}`, undefined, 'realtime');
+        plugin.startActivityWatch(ctx, handleActivityUpdate);
+        
+        if (plugin.stopActivityWatch) {
+          const stopFn = plugin.stopActivityWatch.bind(plugin, ctx);
+          cleanups.push(stopFn);
+        }
+      }
+    }
+
+    if (cleanups.length > 0) {
+      setIsWatching(true);
+      cleanupRef.current = () => {
+        cleanups.forEach(fn => fn());
+        setIsWatching(false);
+      };
+    }
+
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = null;
+      }
+    };
+  }, [pluginsInitialized, demoMode, handleActivityUpdate, info]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const now = Date.now();
+      if (lastActivityAt && now - lastActivityAt > 60000) {
+        lastSeenRef.current.clear();
+      }
+    }, 30000);
+
+    return () => clearInterval(interval);
+  }, [lastActivityAt]);
+
+  const value: RealTimeActivityContextValue = {
+    lastActivityAt,
+    isWatching,
+    subscribe,
+  };
+
+  return (
+    <RealTimeActivityContext.Provider value={value}>
+      {children}
+    </RealTimeActivityContext.Provider>
+  );
+}
+
+export function useRealTimeActivity(): RealTimeActivityContextValue {
+  const context = useContext(RealTimeActivityContext);
+  if (!context) {
+    throw new Error('useRealTimeActivity must be used within RealTimeActivityProvider');
+  }
+  return context;
+}