@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/components/UsageGauge.tsx

@@ -1,4 +1,4 @@
-import { useColors } from '../contexts/ThemeContext.tsx';
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 interface UsageGaugeProps {
   label: string;
@@ -25,23 +25,20 @@ export function UsageGauge({
   const filledWidth = Math.round((percent / 100) * barWidth);
   const emptyWidth = barWidth - filledWidth;
 
-  const fillColor = percent >= 90 ? colors.gaugeDanger :
-                    percent >= 70 ? colors.gaugeWarning :
-                    providerColor;
+  const fillColor =
+    percent >= 90 ? colors.gaugeDanger : percent >= 70 ? colors.gaugeWarning : providerColor;
 
-  const filledBar = '█'.repeat(filledWidth);
-  const emptyBar = '·'.repeat(emptyWidth);
+  const filledBar = "█".repeat(filledWidth);
+  const emptyBar = "·".repeat(emptyWidth);
 
-  const resetText = resetsAt ? formatResetTime(resetsAt) : '';
+  const resetText = resetsAt ? formatResetTime(resetsAt) : "";
   const showWindowLabel = windowLabel && !label.toLowerCase().includes(windowLabel.toLowerCase());
 
   return (
     <box flexDirection="column" width={width}>
       <box flexDirection="row" justifyContent="space-between">
         <text fg={colors.textMuted}>{label}</text>
-        <text fg={colors.text}>
-          {usedPercent !== null ? `${Math.round(percent)}%` : '--'}
-        </text>
+        <text fg={colors.text}>{usedPercent !== null ? `${Math.round(percent)}%` : "--"}</text>
       </box>
       <box flexDirection="row">
         <text>
@@ -51,8 +48,8 @@ export function UsageGauge({
       </box>
       {(showWindowLabel || resetText) && (
         <text fg={colors.textMuted}>
-          {showWindowLabel ? windowLabel : ''}
-          {showWindowLabel && resetText ? ' · ' : ''}
+          {showWindowLabel ? windowLabel : ""}
+          {showWindowLabel && resetText ? " · " : ""}
           {resetText}
         </text>
       )}
@@ -64,7 +61,7 @@ function formatResetTime(timestamp: number): string {
   const now = Date.now();
   const diff = timestamp - now;
 
-  if (diff <= 0) return 'resets soon';
+  if (diff <= 0) return "resets soon";
 
   const minutes = Math.floor(diff / 60000);
   const hours = Math.floor(minutes / 60);

package/src/tui/components/index.ts

@@ -1,5 +1,5 @@
-export { Header } from './Header.tsx';
-export { StatusBar } from './StatusBar.tsx';
-export { UsageGauge } from './UsageGauge.tsx';
-export { ProviderCard } from './ProviderCard.tsx';
-export { DebugConsole } from './DebugConsole.tsx';
+export { DebugConsole } from "./DebugConsole.tsx";
+export { Header } from "./Header.tsx";
+export { ProviderCard } from "./ProviderCard.tsx";
+export { StatusBar } from "./StatusBar.tsx";
+export { UsageGauge } from "./UsageGauge.tsx";

package/src/tui/contexts/AgentSessionContext.tsx

@@ -1,17 +1,25 @@
-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';
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { aggregateSessionUsage } from "@/agents/aggregator.ts";
+import { priceSessions } from "@/agents/costing.ts";
+import type { AgentId, AgentInfo, AgentSessionAggregate } from "@/agents/types.ts";
+import { createPluginContext } from "@/plugins/plugin-context-factory.ts";
+import { pluginRegistry } from "@/plugins/registry.ts";
+import { createPluginLogger, createSandboxedHttpClient } from "@/plugins/sandbox.ts";
+import type { AgentPlugin, SessionParseOptions } from "@/plugins/types/agent.ts";
+import { persistSessions } from "@/storage/persistence-service.ts";
+import type { PricingSource } from "@/storage/types.ts";
+import { useDemoMode } from "./DemoModeContext.tsx";
+import { useLogs } from "./LogContext.tsx";
+import { usePlugins } from "./PluginContext.tsx";
+import { useTimeWindow } from "./TimeWindowContext.tsx";
 
 interface AgentSessionContextValue {
   sessions: AgentSessionAggregate[];
@@ -24,12 +32,6 @@ interface AgentSessionContextValue {
 
 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;
@@ -48,13 +50,13 @@ export function AgentSessionProvider({
   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 isRefreshingRef = useRef(false);
 
   const discoverAgents = useCallback(async (): Promise<AgentInfo[]> => {
-    const agentPlugins = pluginRegistry.getAll('agent');
+    const agentPlugins = pluginRegistry.getAll("agent");
     const discovered: AgentInfo[] = [];
 
     for (const plugin of agentPlugins) {
@@ -78,7 +80,7 @@ export function AgentSessionProvider({
           installed: false,
           sessionParsingSupported: false,
         };
-        agentInfo.error = err instanceof Error ? err.message : 'Unknown error';
+        agentInfo.error = err instanceof Error ? err.message : "Unknown error";
         discovered.push(agentInfo);
       }
     }
@@ -86,144 +88,159 @@ export function AgentSessionProvider({
     return discovered;
   }, []);
 
-  const fetchAgentSessions = useCallback(async (
-    plugin: AgentPlugin,
-    options: SessionParseOptions
-  ): Promise<AgentSessionAggregate[]> => {
-    const agentId = plugin.id;
-    const agentName = plugin.name;
+  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 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);
+      const rawSessions = await plugin.parseSessions(options, ctx);
 
-    if (rawSessions.length === 0) {
-      return [];
-    }
+      if (rawSessions.length === 0) {
+        return [];
+      }
 
-    const aggregated = aggregateSessionUsage({
-      agentId,
-      agentName,
-      rows: rawSessions,
-    });
+      const aggregated = aggregateSessionUsage({
+        agentId,
+        agentName,
+        rows: rawSessions,
+      });
 
-    return aggregated;
-  }, []);
+      return aggregated;
+    },
+    [],
+  );
 
-  const refreshSessions = useCallback(async (options: SessionParseOptions = {}) => {
-    const isInitialLoad = sessions.length === 0;
-    if (isInitialLoad) {
-      setIsLoading(true);
-    }
-    setError(null);
+  const refreshSessions = useCallback(
+    async (options: SessionParseOptions = {}) => {
+      if (isRefreshingRef.current) return;
+      isRefreshingRef.current = true;
 
-    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;
+      const isInitialLoad = sessions.length === 0;
+      if (isInitialLoad) {
+        setIsLoading(true);
       }
+      setError(null);
 
-      debug('Starting session refresh...', undefined, 'agent-sessions');
+      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;
+        }
 
-      const discoveredAgents = await discoverAgents();
-      setAgents(discoveredAgents);
+        debug("Starting session refresh...", undefined, "agent-sessions");
 
-      const agentPlugins = pluginRegistry.getAll('agent');
-      const allAggregates: AgentSessionAggregate[] = [];
+        const discoveredAgents = await discoverAgents();
+        setAgents(discoveredAgents);
 
-      for (const plugin of agentPlugins) {
-        if (!plugin.capabilities.sessionParsing) {
-          debug(`Skipping ${plugin.id}: session parsing not supported`, undefined, 'agent-sessions');
-          continue;
-        }
+        const agentPlugins = pluginRegistry.getAll("agent");
+        const allAggregates: AgentSessionAggregate[] = [];
 
-        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');
+        for (const plugin of agentPlugins) {
+          if (!plugin.capabilities.sessionParsing) {
+            debug(
+              `Skipping ${plugin.id}: session parsing not supported`,
+              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');
+          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);
+        const pricedSessions = await priceSessions(allAggregates);
 
-      pricedSessions.sort((a, b) => b.lastActivityAt - a.lastActivityAt);
+        pricedSessions.sort((a, b) => b.lastActivityAt - a.lastActivityAt);
 
-      if (storageReady) {
+        // Persist to storage — the persistence service handles throttling
+        // internally (fingerprint gate + 5-minute per-session throttle).
+        // Safe to call every tick; state lives on globalThis, survives HMR.
         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());
+        const persistData = pricedSessions.map((session) => ({
+          session: {
+            agentId: session.agentId,
+            sessionId: session.sessionId,
+            projectPath: session.projectPath ?? null,
+            startedAt: session.startedAt ?? null,
+            lastSeenAt: now,
+          },
+          snapshot: {
+            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,
+          },
+          streams: 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,
+          })),
+        }));
+        const persistedCount = persistSessions(persistData);
+        debug(
+          `Persisted ${persistedCount}/${pricedSessions.length} 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);
+        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 {
+        isRefreshingRef.current = false;
+        if (isInitialLoad) {
+          setIsLoading(false);
+        }
       }
-    }
-  }, [sessions.length, discoverAgents, fetchAgentSessions, debug, warn, logError, storageReady, recordAgentSession, demoMode]);
+    },
+    [sessions.length, discoverAgents, fetchAgentSessions, debug, warn, logError, demoMode],
+  );
 
   const refreshSessionsRef = useRef(refreshSessions);
   refreshSessionsRef.current = refreshSessions;
@@ -243,15 +260,15 @@ export function AgentSessionProvider({
   useEffect(() => {
     if (!autoRefresh) return;
 
-    debug(`Setting up session refresh interval: ${refreshInterval}ms`, undefined, 'agent-sessions');
-    
+    debug(`Setting up session refresh interval: ${refreshInterval}ms`, undefined, "agent-sessions");
+
     const intervalId = setInterval(() => {
-      debug('Interval tick - refreshing sessions', undefined, 'agent-sessions');
+      debug("Interval tick - refreshing sessions", undefined, "agent-sessions");
       refreshSessionsRef.current();
     }, refreshInterval);
 
     return () => {
-      debug('Clearing session refresh interval', undefined, 'agent-sessions');
+      debug("Clearing session refresh interval", undefined, "agent-sessions");
       clearInterval(intervalId);
     };
   }, [autoRefresh, refreshInterval, debug]);
@@ -265,29 +282,25 @@ export function AgentSessionProvider({
     refreshSessions,
   };
 
-  return (
-    <AgentSessionContext.Provider value={value}>
-      {children}
-    </AgentSessionContext.Provider>
-  );
+  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');
+    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');
+  return sessions.filter((s) => s.status === "active");
 }
 
 export function useSessionsByAgent(agentId: AgentId): AgentSessionAggregate[] {
   const { sessions } = useAgentSessions();
-  return sessions.filter(s => s.agentId === agentId);
+  return sessions.filter((s) => s.agentId === agentId);
 }
 
 export function useTotalCost(): number {
@@ -302,6 +315,6 @@ export function useTotalTokens(): { input: number; output: number } {
       input: acc.input + s.totals.input,
       output: acc.output + s.totals.output,
     }),
-    { input: 0, output: 0 }
+    { input: 0, output: 0 },
   );
 }

package/src/tui/contexts/ConfigContext.tsx

@@ -1,14 +1,14 @@
-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';
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useState } from "react";
+import { type AppConfig, DEFAULT_CONFIG, loadConfig, saveConfig } 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;
+  updateRefresh: (updates: Partial<AppConfig["refresh"]>) => void;
+  updateDisplay: (updates: Partial<AppConfig["display"]>) => void;
+  updateNotifications: (updates: Partial<AppConfig["notifications"]>) => void;
   resetToDefaults: () => void;
   saveNow: () => Promise<void>;
 }
@@ -32,21 +32,23 @@ export function ConfigProvider({ children, initialConfig }: ConfigProviderProps)
     },
     display: {
       ...DEFAULT_CONFIG.display,
-      defaultTimeWindow: '1h',
+      defaultTimeWindow: "1h",
       sidebarCollapsed: false,
     },
     budgets: {
       daily: 50,
       weekly: 200,
       monthly: 800,
-      currency: 'USD',
+      currency: "USD",
     },
     alerts: {
       ...DEFAULT_CONFIG.alerts,
       criticalPercent: 90,
     },
   };
-  const [config, setConfig] = useState<AppConfig>(initialConfig ?? (demoMode ? demoConfig : DEFAULT_CONFIG));
+  const [config, setConfig] = useState<AppConfig>(
+    initialConfig ?? (demoMode ? demoConfig : DEFAULT_CONFIG),
+  );
   const [isLoading, setIsLoading] = useState(!initialConfig);
   const [pendingSave, setPendingSave] = useState(false);
 
@@ -79,7 +81,7 @@ export function ConfigProvider({ children, initialConfig }: ConfigProviderProps)
     setPendingSave(true);
   }, []);
 
-  const updateRefresh = useCallback((updates: Partial<AppConfig['refresh']>) => {
+  const updateRefresh = useCallback((updates: Partial<AppConfig["refresh"]>) => {
     setConfig((prev) => ({
       ...prev,
       refresh: { ...prev.refresh, ...updates },
@@ -87,7 +89,7 @@ export function ConfigProvider({ children, initialConfig }: ConfigProviderProps)
     setPendingSave(true);
   }, []);
 
-  const updateDisplay = useCallback((updates: Partial<AppConfig['display']>) => {
+  const updateDisplay = useCallback((updates: Partial<AppConfig["display"]>) => {
     setConfig((prev) => ({
       ...prev,
       display: { ...prev.display, ...updates },
@@ -95,7 +97,7 @@ export function ConfigProvider({ children, initialConfig }: ConfigProviderProps)
     setPendingSave(true);
   }, []);
 
-  const updateNotifications = useCallback((updates: Partial<AppConfig['notifications']>) => {
+  const updateNotifications = useCallback((updates: Partial<AppConfig["notifications"]>) => {
     setConfig((prev) => ({
       ...prev,
       notifications: { ...prev.notifications, ...updates },
@@ -135,7 +137,7 @@ export function ConfigProvider({ children, initialConfig }: ConfigProviderProps)
 export function useConfig(): ConfigContextValue {
   const context = useContext(ConfigContext);
   if (!context) {
-    throw new Error('useConfig must be used within a ConfigProvider');
+    throw new Error("useConfig must be used within a ConfigProvider");
   }
   return context;
 }