@tokentop/ttop 0.6.0 → 0.7.0

package/src/pricing/models-dev.ts

@@ -8,6 +8,12 @@ interface ModelsDevCost {
   output: number;
   cache_read?: number;
   cache_write?: number;
+  context_over_200k?: {
+    input?: number;
+    output?: number;
+    cache_read?: number;
+    cache_write?: number;
+  };
 }
 
 interface ModelsDevModel {
@@ -88,6 +94,14 @@ export async function getModelPricing(
     pricing.cacheWrite = model.cost.cache_write;
   }
 
+  const lc = model.cost.context_over_200k;
+  if (lc) {
+    if (lc.input !== undefined) pricing.longContextInput = lc.input;
+    if (lc.output !== undefined) pricing.longContextOutput = lc.output;
+    if (lc.cache_read !== undefined) pricing.longContextCacheRead = lc.cache_read;
+    if (lc.cache_write !== undefined) pricing.longContextCacheWrite = lc.cache_write;
+  }
+
   return pricing;
 }
 
@@ -119,6 +133,14 @@ export async function getProviderModels(
       pricing.cacheWrite = model.cost.cache_write;
     }
 
+    const lc = model.cost.context_over_200k;
+    if (lc) {
+      if (lc.input !== undefined) pricing.longContextInput = lc.input;
+      if (lc.output !== undefined) pricing.longContextOutput = lc.output;
+      if (lc.cache_read !== undefined) pricing.longContextCacheRead = lc.cache_read;
+      if (lc.cache_write !== undefined) pricing.longContextCacheWrite = lc.cache_write;
+    }
+
     result[modelId] = pricing;
   }
 

package/src/storage/persistence-service.test.ts

@@ -0,0 +1,201 @@
+import { beforeEach, describe, expect, mock, test } from "bun:test";
+import type {
+  AgentSessionSnapshotInsert,
+  AgentSessionStreamSnapshotRow,
+  AgentSessionUpsert,
+  UsageEventInsert,
+} from "./types.ts";
+
+mock.module("./db.ts", () => ({
+  isDatabaseInitialized: () => true,
+}));
+
+let upsertCalls: AgentSessionUpsert[] = [];
+let snapshotCalls: Array<{
+  snapshot: AgentSessionSnapshotInsert;
+  streams: Omit<AgentSessionStreamSnapshotRow, "agentSessionSnapshotId">[];
+}> = [];
+let usageEventCalls: UsageEventInsert[][] = [];
+
+let seededSnapshots: Array<{
+  agentId: string;
+  sessionId: string;
+  timestamp: number;
+  totalCostUsd: number;
+  requestCount: number;
+  totalInputTokens: number;
+  totalOutputTokens: number;
+}> = [];
+
+mock.module("./repos/agentSessions.ts", () => ({
+  getLatestSnapshotsForAllSessions: () => seededSnapshots,
+  getLatestStreamTotalsForAllSessions: () => [],
+  upsertAgentSession: (session: AgentSessionUpsert) => {
+    upsertCalls.push(session);
+    return upsertCalls.length;
+  },
+  insertAgentSessionSnapshot: (
+    snapshot: AgentSessionSnapshotInsert,
+    streams: Omit<AgentSessionStreamSnapshotRow, "agentSessionSnapshotId">[],
+  ) => {
+    snapshotCalls.push({ snapshot, streams });
+  },
+}));
+
+mock.module("./repos/usageEvents.ts", () => ({
+  insertUsageEventBatch: (events: UsageEventInsert[]) => {
+    usageEventCalls.push(events);
+  },
+}));
+
+const { persistSessions, seedPreviousTotals } = await import("./persistence-service.ts");
+
+beforeEach(() => {
+  upsertCalls = [];
+  snapshotCalls = [];
+  usageEventCalls = [];
+  seededSnapshots = [];
+  (globalThis as { __tokentopPersistence?: unknown }).__tokentopPersistence = undefined;
+});
+
+function makePersistData(overrides: {
+  agentId?: string;
+  sessionId?: string;
+  totalCostUsd?: number;
+  requestCount?: number;
+  totalInputTokens?: number;
+  totalOutputTokens?: number;
+  timestamp?: number;
+}) {
+  const now = overrides.timestamp ?? Date.now();
+  return {
+    session: {
+      agentId: overrides.agentId ?? "claude-code",
+      sessionId: overrides.sessionId ?? "s1",
+      projectPath: null,
+      startedAt: null,
+      lastSeenAt: now,
+    },
+    snapshot: {
+      timestamp: now,
+      lastActivityAt: now,
+      status: null,
+      totalInputTokens: overrides.totalInputTokens ?? 1000,
+      totalOutputTokens: overrides.totalOutputTokens ?? 500,
+      totalCacheReadTokens: 0,
+      totalCacheWriteTokens: 0,
+      totalCostUsd: overrides.totalCostUsd ?? 1.5,
+      requestCount: overrides.requestCount ?? 10,
+    },
+    streams: [],
+  };
+}
+
+describe("seedPreviousTotals", () => {
+  test("skips persist for session whose fingerprint matches seeded DB snapshot", () => {
+    seededSnapshots = [
+      {
+        agentId: "claude-code",
+        sessionId: "s1",
+        timestamp: Date.now() - 60_000,
+        totalCostUsd: 1.5,
+        requestCount: 10,
+        totalInputTokens: 1000,
+        totalOutputTokens: 500,
+      },
+    ];
+
+    seedPreviousTotals();
+
+    const persistedCount = persistSessions([
+      makePersistData({
+        agentId: "claude-code",
+        sessionId: "s1",
+        totalCostUsd: 1.5,
+        requestCount: 10,
+        totalInputTokens: 1000,
+        totalOutputTokens: 500,
+      }),
+    ]);
+
+    expect(persistedCount).toBe(0);
+    expect(upsertCalls).toHaveLength(0);
+    expect(snapshotCalls).toHaveLength(0);
+  });
+
+  test("persists session whose usage changed since seeded snapshot", () => {
+    seededSnapshots = [
+      {
+        agentId: "claude-code",
+        sessionId: "s1",
+        timestamp: Date.now() - 10 * 60 * 1000,
+        totalCostUsd: 1.5,
+        requestCount: 10,
+        totalInputTokens: 1000,
+        totalOutputTokens: 500,
+      },
+    ];
+
+    seedPreviousTotals();
+
+    const persistedCount = persistSessions([
+      makePersistData({
+        agentId: "claude-code",
+        sessionId: "s1",
+        totalCostUsd: 2.0,
+        requestCount: 12,
+        totalInputTokens: 1200,
+        totalOutputTokens: 600,
+      }),
+    ]);
+
+    expect(persistedCount).toBe(1);
+    expect(upsertCalls).toHaveLength(1);
+    expect(snapshotCalls).toHaveLength(1);
+  });
+
+  test("persists brand-new session not present in seed", () => {
+    seededSnapshots = [];
+
+    seedPreviousTotals();
+
+    const persistedCount = persistSessions([
+      makePersistData({ agentId: "claude-code", sessionId: "new-session" }),
+    ]);
+
+    expect(persistedCount).toBe(1);
+    expect(upsertCalls).toHaveLength(1);
+  });
+
+  test("skips thousands of unchanged sessions after seed (regression for startup freeze)", () => {
+    const baseTs = Date.now() - 60_000;
+    seededSnapshots = Array.from({ length: 5000 }, (_, i) => ({
+      agentId: "claude-code",
+      sessionId: `s${i}`,
+      timestamp: baseTs + i,
+      totalCostUsd: i * 0.01,
+      requestCount: i,
+      totalInputTokens: i * 100,
+      totalOutputTokens: i * 50,
+    }));
+
+    seedPreviousTotals();
+
+    const persistData = seededSnapshots.map((s) =>
+      makePersistData({
+        agentId: s.agentId,
+        sessionId: s.sessionId,
+        totalCostUsd: s.totalCostUsd,
+        requestCount: s.requestCount,
+        totalInputTokens: s.totalInputTokens,
+        totalOutputTokens: s.totalOutputTokens,
+      }),
+    );
+
+    const persistedCount = persistSessions(persistData);
+
+    expect(persistedCount).toBe(0);
+    expect(upsertCalls).toHaveLength(0);
+    expect(snapshotCalls).toHaveLength(0);
+  });
+});

package/src/storage/persistence-service.ts

@@ -15,6 +15,7 @@
 
 import { isDatabaseInitialized } from "./db.ts";
 import {
+  getLatestSnapshotsForAllSessions,
   getLatestStreamTotalsForAllSessions,
   insertAgentSessionSnapshot,
   upsertAgentSession,
@@ -36,6 +37,12 @@ import { computeStreamDelta } from "./types.ts";
 /** Minimum interval between DB writes for the same session */
 const SNAPSHOT_INTERVAL_MS = 300_000; // 5 minutes
 
+/** Remove tracking entries for sessions not written in this window */
+const STALE_ENTRY_MAX_AGE_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+/** Run eviction at most this often */
+const EVICTION_INTERVAL_MS = 10 * 60 * 1000; // 10 minutes
+
 // ---------------------------------------------------------------------------
 // Global state (survives bun --hot HMR and React remounts)
 // ---------------------------------------------------------------------------
@@ -49,6 +56,8 @@ interface PersistenceState {
   previousStreamTotals: Map<string, StreamTotals>;
   /** Whether startup seeding has completed */
   seeded: boolean;
+  /** Timestamp of last stale entry eviction run */
+  lastEvictionAt: number;
 }
 
 declare global {
@@ -63,6 +72,7 @@ function getState(): PersistenceState {
       sessionFingerprints: new Map(),
       previousStreamTotals: new Map(),
       seeded: false,
+      lastEvictionAt: 0,
     };
   }
   return globalThis.__tokentopPersistence;
@@ -91,6 +101,27 @@ export interface SessionPersistData {
   streams: Omit<AgentSessionStreamSnapshotRow, "agentSessionSnapshotId">[];
 }
 
+function evictStaleEntries(state: PersistenceState, now: number): void {
+  if (now - state.lastEvictionAt < EVICTION_INTERVAL_MS) return;
+  state.lastEvictionAt = now;
+
+  const cutoff = now - STALE_ENTRY_MAX_AGE_MS;
+  for (const [key, ts] of state.lastWriteTimestamps) {
+    if (ts < cutoff) {
+      state.lastWriteTimestamps.delete(key);
+      state.sessionFingerprints.delete(key);
+    }
+  }
+
+  // Evict stream totals whose parent session was evicted
+  for (const streamKey of state.previousStreamTotals.keys()) {
+    const sessionKey = streamKey.slice(0, streamKey.indexOf(":", streamKey.indexOf(":") + 1));
+    if (!state.lastWriteTimestamps.has(sessionKey)) {
+      state.previousStreamTotals.delete(streamKey);
+    }
+  }
+}
+
 /**
  * Persist session data to the database with per-session throttling.
  *
@@ -105,6 +136,7 @@ export function persistSessions(sessions: SessionPersistData[]): number {
 
   const state = getState();
   const now = Date.now();
+  evictStaleEntries(state, now);
   let persistedCount = 0;
 
   for (const { session, snapshot, streams } of sessions) {
@@ -177,11 +209,6 @@ export function persistSessions(sessions: SessionPersistData[]): number {
   return persistedCount;
 }
 
-/**
- * Seed previous stream totals from the database.
- * Called once at startup after DB initialization to ensure
- * accurate delta computation from the first persistence call.
- */
 export function seedPreviousTotals(): void {
   const state = getState();
   if (state.seeded) return;
@@ -199,6 +226,28 @@ export function seedPreviousTotals(): void {
         requestCount: row.requestCount,
       });
     }
+
+    // Seeds Gate 1/2 so the first post-startup tick does not rewrite every
+    // historical session. computeFingerprint only reads cost/count/input/output,
+    // so the other fields are placeholders to satisfy the snapshot shape.
+    const latestSnapshots = getLatestSnapshotsForAllSessions();
+    for (const snap of latestSnapshots) {
+      const sessionKey = `${snap.agentId}:${snap.sessionId}`;
+      const fp = computeFingerprint({
+        timestamp: snap.timestamp,
+        lastActivityAt: snap.timestamp,
+        status: null,
+        totalInputTokens: snap.totalInputTokens,
+        totalOutputTokens: snap.totalOutputTokens,
+        totalCacheReadTokens: 0,
+        totalCacheWriteTokens: 0,
+        totalCostUsd: snap.totalCostUsd,
+        requestCount: snap.requestCount,
+      });
+      state.sessionFingerprints.set(sessionKey, fp);
+      state.lastWriteTimestamps.set(sessionKey, snap.timestamp);
+    }
+
     state.seeded = true;
   } catch (err) {
     console.error("Failed to seed previous totals from DB:", err);

package/src/storage/repos/agentSessions.ts

@@ -172,6 +172,55 @@ export interface LatestStreamTotals {
   requestCount: number;
 }
 
+export interface LatestSessionSnapshot {
+  agentId: string;
+  sessionId: string;
+  timestamp: number;
+  totalCostUsd: number;
+  requestCount: number;
+  totalInputTokens: number;
+  totalOutputTokens: number;
+}
+
+export function getLatestSnapshotsForAllSessions(): LatestSessionSnapshot[] {
+  const db = getDatabase();
+
+  const rows = db
+    .prepare(`
+    SELECT
+      s.agent_id, s.session_id,
+      snap.timestamp,
+      snap.total_cost_usd, snap.request_count,
+      snap.total_input_tokens, snap.total_output_tokens
+    FROM agent_session_snapshots snap
+    JOIN agent_sessions s ON s.id = snap.agent_session_id
+    WHERE snap.id IN (
+      SELECT MAX(snap2.id)
+      FROM agent_session_snapshots snap2
+      GROUP BY snap2.agent_session_id
+    )
+  `)
+    .all() as Array<{
+    agent_id: string;
+    session_id: string;
+    timestamp: number;
+    total_cost_usd: number;
+    request_count: number;
+    total_input_tokens: number;
+    total_output_tokens: number;
+  }>;
+
+  return rows.map((r) => ({
+    agentId: r.agent_id,
+    sessionId: r.session_id,
+    timestamp: r.timestamp,
+    totalCostUsd: r.total_cost_usd,
+    requestCount: r.request_count,
+    totalInputTokens: r.total_input_tokens,
+    totalOutputTokens: r.total_output_tokens,
+  }));
+}
+
 export function getLatestStreamTotalsForAllSessions(): LatestStreamTotals[] {
   const db = getDatabase();
 

package/src/tui/App.tsx

@@ -16,6 +16,7 @@ import { copyToClipboard } from "@/utils/clipboard.ts";
 import { type CommandAction, CommandPalette } from "./components/CommandPalette.tsx";
 import { DebugPanel } from "./components/DebugPanel.tsx";
 import { Header } from "./components/Header.tsx";
+import { NotificationFlash } from "./components/NotificationFlash.tsx";
 import { SessionDetailsDrawer } from "./components/SessionDetailsDrawer.tsx";
 import { SettingsModal } from "./components/SettingsModal.tsx";
 import { StatusBar } from "./components/StatusBar.tsx";
@@ -35,6 +36,7 @@ import { RealTimeActivityProvider } from "./contexts/RealTimeActivityContext.tsx
 import { StorageProvider } from "./contexts/StorageContext.tsx";
 import { TimeWindowProvider } from "./contexts/TimeWindowContext.tsx";
 import { ToastProvider, useToastContext } from "./contexts/ToastContext.tsx";
+import { useNotificationBridge } from "./hooks/useNotificationBridge.ts";
 import { useSafeRenderer } from "./hooks/useSafeRenderer.ts";
 import { triggerShutdown } from "./shutdown.ts";
 import { Dashboard } from "./views/Dashboard.tsx";
@@ -68,6 +70,8 @@ function AppContent() {
   const { debugDataRef, activity, sparkData } = useDashboardRuntime();
   const burstRecorderRef = { current: null as BurstRecorder | null };
 
+  useNotificationBridge();
+
   const refreshInterval = config.refresh.pauseAutoRefresh ? 0 : config.refresh.intervalMs;
 
   const [lastRefresh, setLastRefresh] = useState<number | null>(null);
@@ -241,12 +245,12 @@ function AppContent() {
   ]);
 
   useKeyboard((key) => {
-    if (key.ctrl && key.name === "p") {
-      handleCaptureFrame();
+    if ((key.ctrl && key.shift && key.name === "p") || (key.shift && key.name === "p")) {
+      handleBurstRecord();
       return;
     }
-    if (key.ctrl && key.shift && key.name === "p") {
-      handleBurstRecord();
+    if (key.ctrl && key.name === "p") {
+      handleCaptureFrame();
       return;
     }
 
@@ -363,6 +367,8 @@ function AppContent() {
       {isDrawerOpen && selectedSession && (
         <SessionDetailsDrawer session={selectedSession} onClose={hideDrawer} />
       )}
+
+      <NotificationFlash />
     </box>
   );
 }

package/src/tui/components/NotificationFlash.tsx

@@ -0,0 +1,141 @@
+import type { NotificationEvent } from "@tokentop/plugin-sdk";
+import { useEffect, useRef, useState } from "react";
+import { notificationBus } from "@/plugins/notification-bus.ts";
+import { useColors } from "../contexts/ThemeContext.tsx";
+import { animationTick } from "../hooks/useAnimationTick.ts";
+import { Z_INDEX } from "./ModalBackdrop.tsx";
+
+/**
+ * Notification flash as an animated border glow.
+ *
+ * On notification:
+ *   0–15%   Overbright burst → alert color  (double border)
+ *   15–40%  Alert color fading              (double border)
+ *   40–100% Continuing fade → background    (single border, then unmount)
+ *
+ * Uses the global 30 Hz animation tick for smooth interpolation.
+ */
+
+const GLOW_DURATION_MS = 500;
+
+/** Bright, saturated alert colors — vivid regardless of theme */
+const GLOW_COLORS: Record<NotificationEvent["severity"], string> = {
+  critical: "#ff3333",
+  warning: "#ffaa22",
+  info: "#3399ff",
+};
+
+// ── Color math ──────────────────────────────────────────────
+
+function parseHex(hex: string): [number, number, number] {
+  const h = hex.replace("#", "");
+  return [
+    Number.parseInt(h.slice(0, 2), 16),
+    Number.parseInt(h.slice(2, 4), 16),
+    Number.parseInt(h.slice(4, 6), 16),
+  ];
+}
+
+function toHex(r: number, g: number, b: number): string {
+  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v)));
+  return `#${[r, g, b].map((v) => clamp(v).toString(16).padStart(2, "0")).join("")}`;
+}
+
+/** Linearly interpolate two hex colors. t=0 → from, t=1 → to. */
+function lerpColor(from: string, to: string, t: number): string {
+  const [r1, g1, b1] = parseHex(from);
+  const [r2, g2, b2] = parseHex(to);
+  return toHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
+}
+
+/** Brighten a color by a factor (>1 = brighter). Clamps at 255. */
+function brighten(hex: string, factor = 1.4): string {
+  const [r, g, b] = parseHex(hex);
+  return toHex(r * factor, g * factor, b * factor);
+}
+
+/** easeOutCubic — fast attack, gentle tail */
+function easeOutCubic(t: number): number {
+  return 1 - (1 - t) ** 3;
+}
+
+// ── Component ───────────────────────────────────────────────
+
+export function NotificationFlash() {
+  const colors = useColors();
+  const [flash, setFlash] = useState<{
+    severity: NotificationEvent["severity"];
+    startTime: number;
+  } | null>(null);
+  const [borderColor, setBorderColor] = useState<string | null>(null);
+  const [borderStyle, setBorderStyle] = useState<"double" | "single">("double");
+  const unsubRef = useRef<(() => void) | null>(null);
+
+  // Register flash handler on the notification bus
+  useEffect(() => {
+    notificationBus.setFlashHandler((severity) => {
+      setFlash({ severity, startTime: Date.now() });
+    });
+    return () => notificationBus.setFlashHandler(null);
+  }, []);
+
+  // Drive the animation via the global 30 Hz tick
+  useEffect(() => {
+    if (!flash) {
+      setBorderColor(null);
+      return;
+    }
+
+    unsubRef.current?.();
+
+    const alertColor = GLOW_COLORS[flash.severity];
+    const brightColor = brighten(alertColor);
+    const bgColor = colors.background;
+
+    unsubRef.current = animationTick.subscribe((now) => {
+      const elapsed = now - flash.startTime;
+      const progress = Math.min(elapsed / GLOW_DURATION_MS, 1);
+
+      let currentColor: string;
+      if (progress < 0.15) {
+        // Burst phase: overbright → alert color
+        currentColor = lerpColor(brightColor, alertColor, progress / 0.15);
+      } else {
+        // Fade phase: alert → background (eased for gentle tail)
+        const fadeT = (progress - 0.15) / 0.85;
+        currentColor = lerpColor(alertColor, bgColor, easeOutCubic(fadeT));
+      }
+
+      setBorderColor(currentColor);
+      setBorderStyle(progress < 0.4 ? "double" : "single");
+
+      if (progress >= 1) {
+        unsubRef.current?.();
+        unsubRef.current = null;
+        setFlash(null);
+        setBorderColor(null);
+      }
+    });
+
+    return () => {
+      unsubRef.current?.();
+      unsubRef.current = null;
+    };
+  }, [flash, colors.background]);
+
+  if (!borderColor) return null;
+
+  return (
+    <box
+      position="absolute"
+      left={0}
+      top={0}
+      width="100%"
+      height="100%"
+      zIndex={Z_INDEX.TOAST + 1}
+      border
+      borderStyle={borderStyle}
+      borderColor={borderColor}
+    />
+  );
+}

package/src/tui/components/SessionDetailsDrawer.tsx

@@ -158,6 +158,16 @@ export function SessionDetailsDrawer({ session, onClose: _onClose }: SessionDeta
     };
   }, [session.streams]);
 
+  const hasAnyLongContext = session.streams.some((s) => s.hasLongContext);
+  const totalLongContextRequests = session.streams.reduce(
+    (sum, s) => sum + (s.longContextRequestCount ?? 0),
+    0,
+  );
+  const totalLongContextTokens = session.streams.reduce((sum, s) => {
+    if (!s.longContextTokens) return sum;
+    return sum + s.longContextTokens.input + s.longContextTokens.output;
+  }, 0);
+
   const isMultiDay = session.lastActivityAt - session.startedAt > 24 * 60 * 60 * 1000;
   const startTimeStr = formatTimelineLabel(session.startedAt, isMultiDay);
   const endTimeStr = formatTimelineLabel(session.lastActivityAt, isMultiDay);
@@ -338,6 +348,18 @@ export function SessionDetailsDrawer({ session, onClose: _onClose }: SessionDeta
               </text>
             </box>
           )}
+
+          {hasAnyLongContext && (
+            <box flexDirection="row" height={1} marginBottom={0}>
+              <text height={1} overflow="hidden">
+                <span fg={colors.warning}>↑ Long ctx: </span>
+                <span fg={colors.text}>{totalLongContextRequests} reqs</span>
+                <span fg={colors.textMuted}> · </span>
+                <span fg={colors.text}>{formatTokens(totalLongContextTokens)} tokens</span>
+                <span fg={colors.textMuted}> at tiered rate</span>
+              </text>
+            </box>
+          )}
         </box>
 
         <box
@@ -407,11 +429,17 @@ export function SessionDetailsDrawer({ session, onClose: _onClose }: SessionDeta
                   </text>
                   <box width={10} height={1} justifyContent="flex-end">
                     <text fg={colors.textMuted}>
-                      {formatTokens(stream.tokens.input + stream.tokens.output)}
+                      {formatTokens(
+                        stream.tokens.input +
+                          stream.tokens.output +
+                          (stream.longContextTokens?.input ?? 0) +
+                          (stream.longContextTokens?.output ?? 0),
+                      )}
                     </text>
                   </box>
                   <box width={10} height={1} justifyContent="flex-end">
                     <text fg={colors.success}>{formatCost(stream.costUsd)}</text>
+                    <text fg={colors.textMuted}>{stream.hasLongContext ? "↑" : " "}</text>
                   </box>
                 </box>
               );