@tokentop/ttop 0.2.2 → 0.3.0

package/src/tui/contexts/RealTimeActivityContext.tsx

@@ -1,10 +1,18 @@
-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';
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { createPluginContext } from "@/plugins/plugin-context-factory.ts";
+import { pluginRegistry } from "@/plugins/registry.ts";
+import type { ActivityUpdate } from "@/plugins/types/agent.ts";
+import { useDemoMode } from "./DemoModeContext.tsx";
+import { useLogs } from "./LogContext.tsx";
+import { usePlugins } from "./PluginContext.tsx";
 
 type ActivityListener = (delta: number, timestamp: number) => void;
 
@@ -16,14 +24,22 @@ interface RealTimeActivityContextValue {
 
 const RealTimeActivityContext = createContext<RealTimeActivityContextValue | null>(null);
 
+const LAST_SEEN_MAX_AGE_MS = 5 * 60_000;
+const LAST_SEEN_MAX_ENTRIES = 10_000;
+
+interface LastSeenEntry {
+  tokens: number;
+  updatedAt: number;
+}
+
 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 lastSeenRef = useRef<Map<string, LastSeenEntry>>(new Map());
   const listenersRef = useRef<Set<ActivityListener>>(new Set());
   const cleanupRef = useRef<(() => void) | null>(null);
 
@@ -34,35 +50,39 @@ export function RealTimeActivityProvider({ children }: { children: ReactNode })
     };
   }, []);
 
-  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);
+  const handleActivityUpdate = useCallback(
+    (update: ActivityUpdate) => {
+      const key = `${update.sessionId}:${update.messageId}`;
+      const prev = lastSeenRef.current.get(key);
+      const prevTokens = prev?.tokens ?? 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, { tokens: newTokens, updatedAt: Date.now() });
+        setLastActivityAt(update.timestamp);
+        debug(`Real-time activity: +${delta} tokens`, { sessionId: update.sessionId }, "realtime");
+
+        for (const listener of listenersRef.current) {
+          listener(delta, update.timestamp);
+        }
       }
-    }
-  }, [debug]);
+    },
+    [debug],
+  );
 
   useEffect(() => {
     if (demoMode || !pluginsInitialized) return;
 
-    const agentPlugins = pluginRegistry.getAll('agent');
+    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');
+        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);
@@ -73,7 +93,9 @@ export function RealTimeActivityProvider({ children }: { children: ReactNode })
     if (cleanups.length > 0) {
       setIsWatching(true);
       cleanupRef.current = () => {
-        cleanups.forEach(fn => fn());
+        cleanups.forEach((fn) => {
+          fn();
+        });
         setIsWatching(false);
       };
     }
@@ -88,14 +110,28 @@ export function RealTimeActivityProvider({ children }: { children: ReactNode })
 
   useEffect(() => {
     const interval = setInterval(() => {
+      const map = lastSeenRef.current;
       const now = Date.now();
-      if (lastActivityAt && now - lastActivityAt > 60000) {
-        lastSeenRef.current.clear();
+
+      for (const [key, entry] of map) {
+        if (now - entry.updatedAt > LAST_SEEN_MAX_AGE_MS) {
+          map.delete(key);
+        }
       }
-    }, 30000);
+
+      if (map.size > LAST_SEEN_MAX_ENTRIES) {
+        const excess = map.size - LAST_SEEN_MAX_ENTRIES;
+        const keys = map.keys();
+        for (let i = 0; i < excess; i++) {
+          const next = keys.next();
+          if (next.done) break;
+          map.delete(next.value);
+        }
+      }
+    }, 30_000);
 
     return () => clearInterval(interval);
-  }, [lastActivityAt]);
+  }, []);
 
   const value: RealTimeActivityContextValue = {
     lastActivityAt,
@@ -104,16 +140,14 @@ export function RealTimeActivityProvider({ children }: { children: ReactNode })
   };
 
   return (
-    <RealTimeActivityContext.Provider value={value}>
-      {children}
-    </RealTimeActivityContext.Provider>
+    <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');
+    throw new Error("useRealTimeActivity must be used within RealTimeActivityProvider");
   }
   return context;
 }

package/src/tui/contexts/StorageContext.tsx

@@ -1,18 +1,31 @@
-import { createContext, useContext, useEffect, useRef, useState, useCallback, useMemo, type ReactNode } from 'react';
-import { initDatabase, closeDatabase, isDatabaseInitialized, getAppRunId } from '@/storage/db.ts';
-import { insertProviderSnapshotBatch } from '@/storage/repos/providerSnapshots.ts';
-import { insertUsageEventBatch } from '@/storage/repos/usageEvents.ts';
-import { upsertAgentSession, insertAgentSessionSnapshot, getLatestStreamTotalsForAllSessions } from '@/storage/repos/agentSessions.ts';
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { closeDatabase, getAppRunId, initDatabase, isDatabaseInitialized } from "@/storage/db.ts";
+import {
+  getLatestStreamTotalsForAllSessions,
+  insertAgentSessionSnapshot,
+  upsertAgentSession,
+} from "@/storage/repos/agentSessions.ts";
+import { insertProviderSnapshotBatch } from "@/storage/repos/providerSnapshots.ts";
+import { insertUsageEventBatch } from "@/storage/repos/usageEvents.ts";
 import type {
-  ProviderSnapshotInsert,
-  UsageEventInsert,
-  AgentSessionUpsert,
   AgentSessionSnapshotInsert,
   AgentSessionStreamSnapshotRow,
+  AgentSessionUpsert,
+  ProviderSnapshotInsert,
   StreamTotals,
-} from '@/storage/types.ts';
-import { computeStreamDelta } from '@/storage/types.ts';
-import { useDemoMode } from './DemoModeContext.tsx';
+  UsageEventInsert,
+} from "@/storage/types.ts";
+import { computeStreamDelta } from "@/storage/types.ts";
+import { useDemoMode } from "./DemoModeContext.tsx";
 
 interface StorageContextValue {
   isReady: boolean;
@@ -21,14 +34,27 @@ interface StorageContextValue {
   recordUsageEvents: (events: UsageEventInsert[]) => void;
   recordAgentSession: (
     session: AgentSessionUpsert,
-    snapshot: Omit<AgentSessionSnapshotInsert, 'agentSessionId'>,
-    streams: Omit<AgentSessionStreamSnapshotRow, 'agentSessionSnapshotId'>[]
+    snapshot: Omit<AgentSessionSnapshotInsert, "agentSessionId">,
+    streams: Omit<AgentSessionStreamSnapshotRow, "agentSessionSnapshotId">[],
   ) => number | null;
 }
 
 const StorageContext = createContext<StorageContextValue | null>(null);
 
 const SNAPSHOT_INTERVAL_MS = 60_000;
+const MAX_TRACKED_SESSIONS = 1_000;
+const MAX_TRACKED_STREAMS = 5_000;
+
+function capMapSize<K, V>(map: Map<K, V>, max: number): void {
+  if (map.size <= max) return;
+  const excess = map.size - max;
+  const keys = map.keys();
+  for (let i = 0; i < excess; i++) {
+    const next = keys.next();
+    if (next.done) break;
+    map.delete(next.value);
+  }
+}
 
 interface StorageProviderProps {
   children: ReactNode;
@@ -70,13 +96,13 @@ export function StorageProvider({ children }: StorageProviderProps) {
               });
             }
           } catch (err) {
-            console.error('Failed to seed previous totals from DB:', err);
+            console.error("Failed to seed previous totals from DB:", err);
           }
           setIsReady(true);
           setAppRunId(getAppRunId());
         }
       } catch (err) {
-        console.error('Failed to initialize database:', err);
+        console.error("Failed to initialize database:", err);
       }
     }
 
@@ -90,109 +116,118 @@ export function StorageProvider({ children }: StorageProviderProps) {
     };
   }, [demoMode]);
 
-  const recordProviderSnapshots = useCallback((snapshots: ProviderSnapshotInsert[]) => {
-    if (!isReady || demoMode || snapshots.length === 0) return;
+  const recordProviderSnapshots = useCallback(
+    (snapshots: ProviderSnapshotInsert[]) => {
+      if (!isReady || demoMode || snapshots.length === 0) return;
 
-    const now = Date.now();
-    const filtered = snapshots.filter(s => {
-      const lastTs = lastProviderSnapshotRef.current.get(s.provider) ?? 0;
-      return now - lastTs >= SNAPSHOT_INTERVAL_MS;
-    });
+      const now = Date.now();
+      const filtered = snapshots.filter((s) => {
+        const lastTs = lastProviderSnapshotRef.current.get(s.provider) ?? 0;
+        return now - lastTs >= SNAPSHOT_INTERVAL_MS;
+      });
 
-    if (filtered.length === 0) return;
+      if (filtered.length === 0) return;
 
-    try {
-      insertProviderSnapshotBatch(filtered);
-      for (const s of filtered) {
-        lastProviderSnapshotRef.current.set(s.provider, now);
+      try {
+        insertProviderSnapshotBatch(filtered);
+        for (const s of filtered) {
+          lastProviderSnapshotRef.current.set(s.provider, now);
+        }
+      } catch (err) {
+        console.error("Failed to record provider snapshots:", err);
       }
-    } catch (err) {
-      console.error('Failed to record provider snapshots:', err);
-    }
-  }, [isReady, demoMode]);
+    },
+    [isReady, demoMode],
+  );
 
-  const recordUsageEvents = useCallback((events: UsageEventInsert[]) => {
-    if (!isReady || demoMode || events.length === 0) return;
+  const recordUsageEvents = useCallback(
+    (events: UsageEventInsert[]) => {
+      if (!isReady || demoMode || events.length === 0) return;
 
-    try {
-      insertUsageEventBatch(events);
-    } catch (err) {
-      console.error('Failed to record usage events:', err);
-    }
-  }, [isReady, demoMode]);
+      try {
+        insertUsageEventBatch(events);
+      } catch (err) {
+        console.error("Failed to record usage events:", err);
+      }
+    },
+    [isReady, demoMode],
+  );
 
-  const recordAgentSession = useCallback((
-    session: AgentSessionUpsert,
-    snapshot: Omit<AgentSessionSnapshotInsert, 'agentSessionId'>,
-    streams: Omit<AgentSessionStreamSnapshotRow, 'agentSessionSnapshotId'>[]
-  ): number | null => {
-    if (!isReady || demoMode) return null;
+  const recordAgentSession = useCallback(
+    (
+      session: AgentSessionUpsert,
+      snapshot: Omit<AgentSessionSnapshotInsert, "agentSessionId">,
+      streams: Omit<AgentSessionStreamSnapshotRow, "agentSessionSnapshotId">[],
+    ): number | null => {
+      if (!isReady || demoMode) return null;
 
-    const sessionKey = `${session.agentId}:${session.sessionId}`;
-    const now = Date.now();
-    const lastTs = lastSessionSnapshotRef.current.get(sessionKey) ?? 0;
+      const sessionKey = `${session.agentId}:${session.sessionId}`;
+      const now = Date.now();
+      const lastTs = lastSessionSnapshotRef.current.get(sessionKey) ?? 0;
 
-    if (now - lastTs < SNAPSHOT_INTERVAL_MS) {
-      return null;
-    }
+      if (now - lastTs < SNAPSHOT_INTERVAL_MS) {
+        return null;
+      }
+
+      try {
+        const agentSessionId = upsertAgentSession(session);
+
+        const snapshotId = insertAgentSessionSnapshot({ ...snapshot, agentSessionId }, streams);
+
+        lastSessionSnapshotRef.current.set(sessionKey, now);
+
+        const usageEvents: UsageEventInsert[] = [];
+        for (const stream of streams) {
+          const streamKey = `${sessionKey}:${stream.provider}:${stream.model}`;
+          const current: StreamTotals = {
+            inputTokens: stream.inputTokens,
+            outputTokens: stream.outputTokens,
+            cacheReadTokens: stream.cacheReadTokens,
+            cacheWriteTokens: stream.cacheWriteTokens,
+            costUsd: stream.costUsd,
+            requestCount: stream.requestCount,
+          };
+
+          const previous = previousTotalsRef.current.get(streamKey);
+          const delta = computeStreamDelta(current, previous);
+
+          if (delta) {
+            usageEvents.push({
+              timestamp: now,
+              source: "agent",
+              provider: stream.provider,
+              model: stream.model,
+              agentId: session.agentId,
+              sessionId: session.sessionId,
+              projectPath: session.projectPath ?? null,
+              inputTokens: delta.inputTokens,
+              outputTokens: delta.outputTokens,
+              cacheReadTokens: delta.cacheReadTokens,
+              cacheWriteTokens: delta.cacheWriteTokens,
+              costUsd: delta.costUsd,
+              requestCount: delta.requestCount,
+              pricingSource: stream.pricingSource ?? null,
+            });
+          }
 
-    try {
-      const agentSessionId = upsertAgentSession(session);
-
-      const snapshotId = insertAgentSessionSnapshot(
-        { ...snapshot, agentSessionId },
-        streams
-      );
-
-      lastSessionSnapshotRef.current.set(sessionKey, now);
-
-      const usageEvents: UsageEventInsert[] = [];
-      for (const stream of streams) {
-        const streamKey = `${sessionKey}:${stream.provider}:${stream.model}`;
-        const current: StreamTotals = {
-          inputTokens: stream.inputTokens,
-          outputTokens: stream.outputTokens,
-          cacheReadTokens: stream.cacheReadTokens,
-          cacheWriteTokens: stream.cacheWriteTokens,
-          costUsd: stream.costUsd,
-          requestCount: stream.requestCount,
-        };
-
-        const previous = previousTotalsRef.current.get(streamKey);
-        const delta = computeStreamDelta(current, previous);
-
-        if (delta) {
-          usageEvents.push({
-            timestamp: now,
-            source: 'agent',
-            provider: stream.provider,
-            model: stream.model,
-            agentId: session.agentId,
-            sessionId: session.sessionId,
-            projectPath: session.projectPath ?? null,
-            inputTokens: delta.inputTokens,
-            outputTokens: delta.outputTokens,
-            cacheReadTokens: delta.cacheReadTokens,
-            cacheWriteTokens: delta.cacheWriteTokens,
-            costUsd: delta.costUsd,
-            requestCount: delta.requestCount,
-            pricingSource: stream.pricingSource ?? null,
-          });
+          previousTotalsRef.current.set(streamKey, current);
         }
 
-        previousTotalsRef.current.set(streamKey, current);
-      }
+        if (usageEvents.length > 0) {
+          insertUsageEventBatch(usageEvents);
+        }
 
-      if (usageEvents.length > 0) {
-        insertUsageEventBatch(usageEvents);
-      }
+        capMapSize(lastSessionSnapshotRef.current, MAX_TRACKED_SESSIONS);
+        capMapSize(previousTotalsRef.current, MAX_TRACKED_STREAMS);
 
-      return snapshotId;
-    } catch (err) {
-      console.error('Failed to record agent session:', err);
-      return null;
-    }
-  }, [isReady, demoMode]);
+        return snapshotId;
+      } catch (err) {
+        console.error("Failed to record agent session:", err);
+        return null;
+      }
+    },
+    [isReady, demoMode],
+  );
 
   useEffect(() => {
     if (!demoMode || !isReady || !simulator) return;
@@ -204,25 +239,24 @@ export function StorageProvider({ children }: StorageProviderProps) {
     return () => clearInterval(interval);
   }, [demoMode, isReady, simulator]);
 
-  const value: StorageContextValue = useMemo(() => ({
-    isReady,
-    appRunId,
-    recordProviderSnapshots,
-    recordUsageEvents,
-    recordAgentSession,
-  }), [isReady, appRunId, recordProviderSnapshots, recordUsageEvents, recordAgentSession]);
-
-  return (
-    <StorageContext.Provider value={value}>
-      {children}
-    </StorageContext.Provider>
+  const value: StorageContextValue = useMemo(
+    () => ({
+      isReady,
+      appRunId,
+      recordProviderSnapshots,
+      recordUsageEvents,
+      recordAgentSession,
+    }),
+    [isReady, appRunId, recordProviderSnapshots, recordUsageEvents, recordAgentSession],
   );
+
+  return <StorageContext.Provider value={value}>{children}</StorageContext.Provider>;
 }
 
 export function useStorage(): StorageContextValue {
   const context = useContext(StorageContext);
   if (!context) {
-    throw new Error('useStorage must be used within StorageProvider');
+    throw new Error("useStorage must be used within StorageProvider");
   }
   return context;
 }

package/src/tui/contexts/ThemeContext.tsx

@@ -1,6 +1,12 @@
-import { createContext, useContext, useState, type ReactNode } from 'react';
-import type { ThemePlugin, ThemeColors, ThemeComponents, ColorScheme, ColorSchemePreference } from '@/plugins/types/theme.ts';
-import { tokyoNightTheme } from '@/plugins/themes/tokyo-night.ts';
+import { createContext, type ReactNode, useContext, useState } from "react";
+import { tokyoNightTheme } from "@/plugins/themes/tokyo-night.ts";
+import type {
+  ColorScheme,
+  ColorSchemePreference,
+  ThemeColors,
+  ThemeComponents,
+  ThemePlugin,
+} from "@/plugins/types/theme.ts";
 
 interface ThemeContextValue {
   theme: ThemePlugin;
@@ -42,17 +48,13 @@ export function ThemeProvider({ initialTheme, children }: ThemeProviderProps) {
     setPreviewTheme,
   };
 
-  return (
-    <ThemeContext.Provider value={value}>
-      {children}
-    </ThemeContext.Provider>
-  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 }
 
 export function useTheme(): ThemeContextValue {
   const context = useContext(ThemeContext);
   if (!context) {
-    throw new Error('useTheme must be used within ThemeProvider');
+    throw new Error("useTheme must be used within ThemeProvider");
   }
   return context;
 }
@@ -70,16 +72,19 @@ export function resolveTheme(
   if (themes.length === 0) return tokyoNightTheme;
 
   const targetScheme: ColorScheme | null =
-    schemePref === 'auto' ? detectedMode :
-    schemePref === 'light' ? 'light' :
-    schemePref === 'dark' ? 'dark' :
-    null;
+    schemePref === "auto"
+      ? detectedMode
+      : schemePref === "light"
+        ? "light"
+        : schemePref === "dark"
+          ? "dark"
+          : null;
 
-  const stored = themes.find(t => t.id === themeId);
+  const stored = themes.find((t) => t.id === themeId);
 
   if (!stored) {
     if (targetScheme) {
-      return themes.find(t => t.colorScheme === targetScheme) ?? themes[0]!;
+      return themes.find((t) => t.colorScheme === targetScheme) ?? themes[0]!;
     }
     return themes[0]!;
   }
@@ -89,7 +94,7 @@ export function resolveTheme(
   }
 
   const familySibling = themes.find(
-    t => t.family === stored.family && t.colorScheme === targetScheme && t.id !== stored.id,
+    (t) => t.family === stored.family && t.colorScheme === targetScheme && t.id !== stored.id,
   );
   return familySibling ?? stored;
 }