@tokentop/ttop 0.2.2

package/src/tui/contexts/StorageContext.tsx

@@ -0,0 +1,233 @@
+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 type {
+  ProviderSnapshotInsert,
+  UsageEventInsert,
+  AgentSessionUpsert,
+  AgentSessionSnapshotInsert,
+  AgentSessionStreamSnapshotRow,
+  StreamTotals,
+} from '@/storage/types.ts';
+import { computeStreamDelta } from '@/storage/types.ts';
+import { useDemoMode } from './DemoModeContext.tsx';
+
+interface StorageContextValue {
+  isReady: boolean;
+  appRunId: number | null;
+  recordProviderSnapshots: (snapshots: ProviderSnapshotInsert[]) => void;
+  recordUsageEvents: (events: UsageEventInsert[]) => void;
+  recordAgentSession: (
+    session: AgentSessionUpsert,
+    snapshot: Omit<AgentSessionSnapshotInsert, 'agentSessionId'>,
+    streams: Omit<AgentSessionStreamSnapshotRow, 'agentSessionSnapshotId'>[]
+  ) => number | null;
+}
+
+const StorageContext = createContext<StorageContextValue | null>(null);
+
+const SNAPSHOT_INTERVAL_MS = 60_000;
+
+interface StorageProviderProps {
+  children: ReactNode;
+}
+
+export function StorageProvider({ children }: StorageProviderProps) {
+  const [isReady, setIsReady] = useState(false);
+  const [appRunId, setAppRunId] = useState<number | null>(null);
+  const lastProviderSnapshotRef = useRef<Map<string, number>>(new Map());
+  const lastSessionSnapshotRef = useRef<Map<string, number>>(new Map());
+  const previousTotalsRef = useRef<Map<string, StreamTotals>>(new Map());
+  const { demoMode, simulator } = useDemoMode();
+
+  useEffect(() => {
+    // Skip real database in demo mode - all data stays in memory
+    if (demoMode) {
+      setIsReady(true);
+      setAppRunId(null);
+      return;
+    }
+
+    let mounted = true;
+
+    async function init() {
+      try {
+        await initDatabase();
+        if (mounted) {
+          try {
+            const latestTotals = getLatestStreamTotalsForAllSessions();
+            for (const row of latestTotals) {
+              const streamKey = `${row.agentId}:${row.sessionId}:${row.provider}:${row.model}`;
+              previousTotalsRef.current.set(streamKey, {
+                inputTokens: row.inputTokens,
+                outputTokens: row.outputTokens,
+                cacheReadTokens: row.cacheReadTokens,
+                cacheWriteTokens: row.cacheWriteTokens,
+                costUsd: row.costUsd,
+                requestCount: row.requestCount,
+              });
+            }
+          } catch (err) {
+            console.error('Failed to seed previous totals from DB:', err);
+          }
+          setIsReady(true);
+          setAppRunId(getAppRunId());
+        }
+      } catch (err) {
+        console.error('Failed to initialize database:', err);
+      }
+    }
+
+    init();
+
+    return () => {
+      mounted = false;
+      if (isDatabaseInitialized()) {
+        closeDatabase();
+      }
+    };
+  }, [demoMode]);
+
+  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;
+    });
+
+    if (filtered.length === 0) return;
+
+    try {
+      insertProviderSnapshotBatch(filtered);
+      for (const s of filtered) {
+        lastProviderSnapshotRef.current.set(s.provider, now);
+      }
+    } catch (err) {
+      console.error('Failed to record provider snapshots:', err);
+    }
+  }, [isReady, demoMode]);
+
+  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]);
+
+  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;
+
+    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,
+          });
+        }
+
+        previousTotalsRef.current.set(streamKey, current);
+      }
+
+      if (usageEvents.length > 0) {
+        insertUsageEventBatch(usageEvents);
+      }
+
+      return snapshotId;
+    } catch (err) {
+      console.error('Failed to record agent session:', err);
+      return null;
+    }
+  }, [isReady, demoMode]);
+
+  useEffect(() => {
+    if (!demoMode || !isReady || !simulator) return;
+
+    const interval = setInterval(() => {
+      simulator.tick();
+    }, 1000);
+
+    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>
+  );
+}
+
+export function useStorage(): StorageContextValue {
+  const context = useContext(StorageContext);
+  if (!context) {
+    throw new Error('useStorage must be used within StorageProvider');
+  }
+  return context;
+}
+
+export function useStorageReady(): boolean {
+  const { isReady } = useStorage();
+  return isReady;
+}

package/src/tui/contexts/ThemeContext.tsx

@@ -0,0 +1,95 @@
+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';
+
+interface ThemeContextValue {
+  theme: ThemePlugin;
+  colors: ThemeColors;
+  components: ThemeComponents;
+  colorScheme: ColorScheme;
+  setTheme: (theme: ThemePlugin) => void;
+  previewTheme: ThemePlugin | null;
+  setPreviewTheme: (theme: ThemePlugin | null) => void;
+}
+
+const defaultComponents: ThemeComponents = {
+  header: {},
+  statusBar: {},
+  gauge: { height: 1, borderRadius: 0 },
+  commandPalette: {},
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+interface ThemeProviderProps {
+  initialTheme?: ThemePlugin;
+  children: ReactNode;
+}
+
+export function ThemeProvider({ initialTheme, children }: ThemeProviderProps) {
+  const [theme, setTheme] = useState<ThemePlugin>(initialTheme ?? tokyoNightTheme);
+  const [previewTheme, setPreviewTheme] = useState<ThemePlugin | null>(null);
+
+  const active = previewTheme ?? theme;
+
+  const value: ThemeContextValue = {
+    theme,
+    colors: active.colors,
+    components: { ...defaultComponents, ...active.components },
+    colorScheme: active.colorScheme,
+    setTheme,
+    previewTheme,
+    setPreviewTheme,
+  };
+
+  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');
+  }
+  return context;
+}
+
+export function useColors(): ThemeColors {
+  return useTheme().colors;
+}
+
+export function resolveTheme(
+  themeId: string,
+  schemePref: ColorSchemePreference,
+  themes: ThemePlugin[],
+  detectedMode: ColorScheme | null,
+): ThemePlugin {
+  if (themes.length === 0) return tokyoNightTheme;
+
+  const targetScheme: ColorScheme | null =
+    schemePref === 'auto' ? detectedMode :
+    schemePref === 'light' ? 'light' :
+    schemePref === 'dark' ? 'dark' :
+    null;
+
+  const stored = themes.find(t => t.id === themeId);
+
+  if (!stored) {
+    if (targetScheme) {
+      return themes.find(t => t.colorScheme === targetScheme) ?? themes[0]!;
+    }
+    return themes[0]!;
+  }
+
+  if (!targetScheme || stored.colorScheme === targetScheme) {
+    return stored;
+  }
+
+  const familySibling = themes.find(
+    t => t.family === stored.family && t.colorScheme === targetScheme && t.id !== stored.id,
+  );
+  return familySibling ?? stored;
+}

package/src/tui/contexts/TimeWindowContext.tsx

@@ -0,0 +1,158 @@
+import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from 'react';
+
+export type TimeWindow = '5m' | '15m' | '1h' | '24h' | '7d' | '30d' | 'all';
+
+export const TIME_WINDOW_OPTIONS: TimeWindow[] = ['5m', '15m', '1h', '24h', '7d', '30d', 'all'];
+
+export const TIME_WINDOW_LABELS: Record<TimeWindow, string> = {
+  '5m': '5 min',
+  '15m': '15 min',
+  '1h': '1 hour',
+  '24h': '24 hours',
+  '7d': '7 days',
+  '30d': '30 days',
+  'all': 'All time',
+};
+
+export const TIME_WINDOW_MS: Record<TimeWindow, number | null> = {
+  '5m': 5 * 60 * 1000,
+  '15m': 15 * 60 * 1000,
+  '1h': 60 * 60 * 1000,
+  '24h': 24 * 60 * 60 * 1000,
+  '7d': 7 * 24 * 60 * 60 * 1000,
+  '30d': 30 * 24 * 60 * 60 * 1000,
+  'all': null,
+};
+
+export type BudgetType = 'daily' | 'weekly' | 'monthly' | 'none';
+
+export const TIME_WINDOW_BUDGET_TYPE: Record<TimeWindow, BudgetType> = {
+  '5m': 'daily',
+  '15m': 'daily',
+  '1h': 'daily',
+  '24h': 'daily',
+  '7d': 'weekly',
+  '30d': 'monthly',
+  'all': 'none',
+};
+
+export const BUDGET_TYPE_LABELS: Record<BudgetType, string> = {
+  daily: 'Daily',
+  weekly: 'Weekly',
+  monthly: 'Monthly',
+  none: 'Total',
+};
+
+export type BudgetLock = BudgetType | 'sync';
+
+const BUDGET_LOCK_CYCLE: BudgetLock[] = ['sync', 'daily', 'weekly', 'monthly'];
+
+export const BUDGET_LOCK_LABELS: Record<BudgetLock, string> = {
+  sync: 'Sync',
+  daily: 'Daily',
+  weekly: 'Weekly',
+  monthly: 'Monthly',
+  none: 'None',
+};
+
+interface TimeWindowContextValue {
+  window: TimeWindow;
+  setWindow: (w: TimeWindow) => void;
+  cycleWindow: () => void;
+  cycleWindowBack: () => void;
+  windowMs: number | null;
+  windowLabel: string;
+  getWindowStart: () => number | null;
+  budgetType: BudgetType;
+  budgetTypeLabel: string;
+  budgetLock: BudgetLock;
+  setBudgetLock: (lock: BudgetLock) => void;
+  cycleBudgetLock: () => void;
+  budgetLockLabel: string;
+}
+
+const TimeWindowContext = createContext<TimeWindowContextValue | null>(null);
+
+interface TimeWindowProviderProps {
+  children: ReactNode;
+  defaultWindow?: TimeWindow;
+}
+
+function getNextWindow(current: TimeWindow): TimeWindow {
+  const idx = TIME_WINDOW_OPTIONS.indexOf(current);
+  const nextIdx = (idx + 1) % TIME_WINDOW_OPTIONS.length;
+  return TIME_WINDOW_OPTIONS[nextIdx] as TimeWindow;
+}
+
+function getPrevWindow(current: TimeWindow): TimeWindow {
+  const idx = TIME_WINDOW_OPTIONS.indexOf(current);
+  const prevIdx = (idx - 1 + TIME_WINDOW_OPTIONS.length) % TIME_WINDOW_OPTIONS.length;
+  return TIME_WINDOW_OPTIONS[prevIdx] as TimeWindow;
+}
+
+export function TimeWindowProvider({ children, defaultWindow = '24h' }: TimeWindowProviderProps) {
+  const [window, setWindowState] = useState<TimeWindow>(defaultWindow);
+  const [budgetLock, setBudgetLock] = useState<BudgetLock>('sync');
+
+  const setWindow = useCallback((w: TimeWindow) => {
+    setWindowState(w);
+  }, []);
+
+  const cycleWindow = useCallback(() => {
+    setWindowState(getNextWindow);
+  }, []);
+
+  const cycleWindowBack = useCallback(() => {
+    setWindowState(getPrevWindow);
+  }, []);
+
+  const cycleBudgetLock = useCallback(() => {
+    setBudgetLock(current => {
+      const idx = BUDGET_LOCK_CYCLE.indexOf(current);
+      const nextIdx = (idx + 1) % BUDGET_LOCK_CYCLE.length;
+      return BUDGET_LOCK_CYCLE[nextIdx] as BudgetLock;
+    });
+  }, []);
+
+  const windowMs = TIME_WINDOW_MS[window];
+  const windowLabel = TIME_WINDOW_LABELS[window];
+  const budgetType = budgetLock === 'sync' ? TIME_WINDOW_BUDGET_TYPE[window] : budgetLock;
+  const budgetTypeLabel = BUDGET_TYPE_LABELS[budgetType];
+  const budgetLockLabel = BUDGET_LOCK_LABELS[budgetLock];
+
+  const getWindowStart = useCallback((): number | null => {
+    const ms = TIME_WINDOW_MS[window];
+    if (ms === null) return null;
+    return Date.now() - ms;
+  }, [window]);
+
+  const value: TimeWindowContextValue = useMemo(() => ({
+    window,
+    setWindow,
+    cycleWindow,
+    cycleWindowBack,
+    windowMs,
+    windowLabel,
+    getWindowStart,
+    budgetType,
+    budgetTypeLabel,
+    budgetLock,
+    setBudgetLock,
+    cycleBudgetLock,
+    budgetLockLabel,
+  }), [window, setWindow, cycleWindow, windowMs, windowLabel, getWindowStart, budgetType, budgetTypeLabel, budgetLock, cycleBudgetLock, budgetLockLabel]);
+
+  return (
+    <TimeWindowContext.Provider value={value}>
+      {children}
+    </TimeWindowContext.Provider>
+  );
+}
+
+export function useTimeWindow(): TimeWindowContextValue {
+  const context = useContext(TimeWindowContext);
+  if (!context) {
+    throw new Error('useTimeWindow must be used within TimeWindowProvider');
+  }
+  return context;
+}

package/src/tui/contexts/ToastContext.tsx

@@ -0,0 +1,40 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+
+interface ToastState {
+  message: string;
+  type: 'info' | 'success' | 'warning' | 'error';
+}
+
+interface ToastContextValue {
+  toast: ToastState | null;
+  showToast: (message: string, type?: 'info' | 'success' | 'warning' | 'error') => void;
+  dismissToast: () => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toast, setToast] = useState<ToastState | null>(null);
+
+  const showToast = useCallback((message: string, type: 'info' | 'success' | 'warning' | 'error' = 'success') => {
+    setToast({ message, type });
+  }, []);
+
+  const dismissToast = useCallback(() => {
+    setToast(null);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toast, showToast, dismissToast }}>
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToastContext() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToastContext must be used within a ToastProvider');
+  }
+  return context;
+}

package/src/tui/contexts/index.ts

@@ -0,0 +1,5 @@
+export { ThemeProvider, useTheme, useColors } from './ThemeContext.tsx';
+export { PluginProvider, usePlugins, useProvider, useConfiguredProviders } from './PluginContext.tsx';
+export { LogProvider, useLogs, useLogger, type LogLevel, type LogEntry } from './LogContext.tsx';
+export { InputProvider, useInputFocus } from './InputContext.tsx';
+

package/src/tui/createApp.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type { DemoPreset } from '@/demo/simulator.ts';
+import { TestModeContext } from './hooks/useSafeRenderer.ts';
+import { App } from './App.tsx';
+
+export { App };
+
+export interface CreateAppOptions {
+  debug?: boolean;
+  refreshInterval?: number;
+  testMode?: boolean;
+  demoMode?: boolean;
+  demoSeed?: number;
+  demoPreset?: DemoPreset;
+  cliPlugins?: string[];
+}
+
+export const DEFAULT_APP_OPTIONS = {
+  debug: false,
+  refreshInterval: 60000,
+  testMode: false,
+  demoMode: false,
+} as const;
+
+export function createAppElement(options: CreateAppOptions = {}): ReactNode {
+  const isTestMode = options.testMode ?? DEFAULT_APP_OPTIONS.testMode;
+  
+  const appElement = (
+    <App
+      debug={options.debug ?? DEFAULT_APP_OPTIONS.debug}
+      demoMode={options.demoMode ?? DEFAULT_APP_OPTIONS.demoMode}
+      {...(options.demoSeed !== undefined ? { demoSeed: options.demoSeed } : {})}
+      {...(options.demoPreset !== undefined ? { demoPreset: options.demoPreset } : {})}
+      {...(options.cliPlugins ? { cliPlugins: options.cliPlugins } : {})}
+    />
+  );
+  
+  if (isTestMode) {
+    return (
+      <TestModeContext.Provider value={true}>
+        {appElement}
+      </TestModeContext.Provider>
+    );
+  }
+  
+  return appElement;
+}