@tokentop/ttop 0.6.0 → 0.7.0

package/src/tui/components/SessionsTable.tsx

@@ -13,6 +13,8 @@ import { getSortDirectionIndicator, getSortFieldLabel } from "../types/sort.ts";
 interface SessionsTableProps {
   sessions: AgentSessionAggregate[];
   selectedRow: number;
+  scrollOffset: number;
+  visibleRows: number;
   isLoading: boolean;
   isFiltering: boolean;
   filterQuery: string;
@@ -159,6 +161,7 @@ const SessionRow = memo(function SessionRow({
   const cacheRead = session.totals.cacheRead ?? 0;
   const hasCacheData = cacheRead > 0;
   const isEstimated = session.metadata?.isEstimated === true;
+  const hasLongContext = session.streams.some((s) => s.hasLongContext === true);
   const costUsd = session.totalCostUsd ?? 0;
 
   const animatedTokens = useAnimatedValue(effectiveTokens, { durationMs: 300, precision: 0 });
@@ -271,8 +274,9 @@ const SessionRow = memo(function SessionRow({
           </span>
           <span fg={textMutedColor}>{hasCacheData ? ` ↯${formatCacheBadge(cacheRead)}` : ""}</span>
         </text>
-        <text width={8} height={1} fg={costColor} {...bgProp}>
-          {costDisplay.padStart(7)}
+        <text width={8} height={1} {...bgProp}>
+          <span fg={costColor}>{costDisplay.padStart(7)}</span>
+          <span fg={textMutedColor}>{hasLongContext ? "↑" : " "}</span>
         </text>
         <text width={14} height={1} fg={textSubtleColor} {...bgProp}>
           {projectDisplay}
@@ -329,8 +333,9 @@ const SessionRow = memo(function SessionRow({
           {hasCacheData && showCacheBadge ? ` ↯${formatCacheBadge(cacheRead)}` : ""}
         </span>
       </text>
-      <text width={7} height={1} fg={costColor} {...bgProp}>
-        {formatCostVal(costUsd).padStart(6)}
+      <text width={7} height={1} {...bgProp}>
+        <span fg={costColor}>{formatCostVal(costUsd).padStart(6)}</span>
+        <span fg={textMutedColor}>{hasLongContext ? "↑" : " "}</span>
       </text>
       <text flexGrow={1} height={1} fg={textSubtleColor} {...bgProp}>
         {projectDisplay}
@@ -351,6 +356,8 @@ export const SessionsTable = forwardRef(function SessionsTable(
   {
     sessions,
     selectedRow,
+    scrollOffset,
+    visibleRows,
     isLoading,
     isFiltering,
     filterQuery,
@@ -398,10 +405,18 @@ export const SessionsTable = forwardRef(function SessionsTable(
     bulkThreshold: 100,
   });
 
-  let activeIndex = 0;
   const selectedSession = sessions[selectedRow] ?? null;
   const inspector = selectedSession ? getInspectorData(selectedSession) : null;
 
+  // Spacer boxes preserve scrollbox inner height so scrollTo(scrollOffset) still maps correctly.
+  const RENDER_BUFFER = 4;
+  const visibleStart = Math.max(0, scrollOffset - RENDER_BUFFER);
+  const visibleEnd = Math.min(animatedSessions.length, scrollOffset + visibleRows + RENDER_BUFFER);
+  const visibleSlice =
+    animatedSessions.length > 0 ? animatedSessions.slice(visibleStart, visibleEnd) : [];
+  const topSpacer = visibleStart;
+  const bottomSpacer = Math.max(0, animatedSessions.length - visibleEnd);
+
   // Sort indicator helpers for column headers
   const sortIndicator = (field: string) =>
     sortField === field ? (sortDirection === "desc" ? "▼" : "▲") : " ";
@@ -527,8 +542,10 @@ export const SessionsTable = forwardRef(function SessionsTable(
               </text>
             </box>
           )}
-          {animatedSessions.map((entry) => {
-            const isSelectedRow = !entry.isExiting && activeIndex++ === selectedRow;
+          {topSpacer > 0 && <box height={topSpacer} flexShrink={0} />}
+          {visibleSlice.map((entry, i) => {
+            const absIndex = visibleStart + i;
+            const isSelectedRow = !entry.isExiting && absIndex === selectedRow;
             return (
               <SessionRow
                 key={entry.item.sessionId}
@@ -544,6 +561,7 @@ export const SessionsTable = forwardRef(function SessionsTable(
               />
             );
           })}
+          {bottomSpacer > 0 && <box height={bottomSpacer} flexShrink={0} />}
         </box>
       </scrollbox>
       {terminalHeight >= 30 && (

package/src/tui/components/SettingsModal.tsx

@@ -2,6 +2,7 @@ import { useKeyboard, useTerminalDimensions } from "@opentui/react";
 import type { ConfigField, PluginType } from "@tokentop/plugin-sdk";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { AppConfig, SparklineOrientation, SparklineStyle } from "@/config/schema.ts";
+import { notificationBus } from "@/plugins/notification-bus.ts";
 import { formatBudgetDisplay, parseCurrencyInput } from "@/utils/currency.ts";
 import { useConfig } from "../contexts/ConfigContext.tsx";
 import { useDemoMode } from "../contexts/DemoModeContext.tsx";
@@ -20,10 +21,11 @@ interface SettingItem {
   description?: string;
   category: SettingCategory;
   pluginId?: string;
-  type: "toggle" | "select" | "number";
+  type: "toggle" | "select" | "number" | "action";
   options?: string[];
   getValue: (config: AppConfig) => string | number | boolean | null;
   setValue: (config: AppConfig, value: string | number | boolean | null) => AppConfig;
+  onAction?: () => void;
 }
 
 const BASE_SETTINGS: SettingItem[] = [
@@ -205,6 +207,16 @@ const BASE_SETTINGS: SettingItem[] = [
       notifications: { ...c.notifications, soundEnabled: v as boolean },
     }),
   },
+  {
+    key: "testNotification",
+    label: "Test Notifications",
+    description: "Send a test notification to verify toast, flash, and sound alerts are working.",
+    category: "notifications",
+    type: "action",
+    onAction: () => void notificationBus.testNotification(),
+    getValue: () => "▸ Run",
+    setValue: (c) => c,
+  },
 ];
 
 const CATEGORIES: { id: SettingCategory; label: string }[] = [
@@ -362,7 +374,7 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
     provider: "Providers",
     agent: "Agents",
     theme: "Themes",
-    notification: "Delivery",
+    notification: "Notifications",
   };
 
   // Stable ordering for plugin type groups in sidebar
@@ -621,7 +633,9 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
         setSelectedIndex((i) => Math.max(i - 1, 0));
       } else if (key.name === "return" || key.name === "space") {
         const setting = categorySettings[selectedIndex];
-        if (setting?.key === "theme") {
+        if (setting?.type === "action" && setting.onAction) {
+          setting.onAction();
+        } else if (setting?.key === "theme") {
           setShowThemePicker(true);
         } else if (setting?.type === "number") {
           startEditingNumber();
@@ -832,7 +846,9 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
                       setting.type === "number" && editingSettingKey === setting.key;
 
                     let displayValue: string;
-                    if (setting.key === "theme") {
+                    if (setting.type === "action") {
+                      displayValue = "▸ Run";
+                    } else if (setting.key === "theme") {
                       const themeName = themes.find((t) => t.id === value)?.name ?? value;
                       displayValue = `${themeName} ▸`;
                     } else if (setting.type === "toggle") {

package/src/tui/components/Toast.tsx

@@ -8,7 +8,7 @@ interface ToastProps {
   type?: "info" | "success" | "warning" | "error";
 }
 
-export function Toast({ message, duration = 2000, onDismiss, type = "success" }: ToastProps) {
+export function Toast({ message, duration = 4000, onDismiss, type = "success" }: ToastProps) {
   const colors = useColors();
 
   useEffect(() => {

package/src/tui/contexts/AgentSessionContext.tsx

@@ -5,10 +5,17 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
-import { aggregateSessionUsage, deduplicateAggregates } from "@/agents/aggregator.ts";
+import {
+  aggregateSessionUsage,
+  deduplicateAggregates,
+  isCrossAgentShadow,
+  markCrossAgentShadows,
+  selectEffectiveSessions,
+} 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";
@@ -48,10 +55,12 @@ interface AgentSessionProviderProps {
  */
 function computeSessionFingerprint(sessions: AgentSessionAggregate[]): string {
   // Build a compact string from the fields that actually affect the UI.
-  // This is intentionally simple — no crypto hashing needed, just string comparison.
+  // Shadow bit is included so that flipping a session's dedup status
+  // (gaining or losing its cross-agent shadow mark) triggers a re-render.
   let fp = `${sessions.length}:`;
   for (const s of sessions) {
-    fp += `${s.sessionId},${s.status},${s.lastActivityAt},${s.totals.input},${s.totals.output},${s.totalCostUsd ?? 0},${s.requestCount};`;
+    const shadow = isCrossAgentShadow(s) ? "1" : "0";
+    fp += `${s.sessionId},${s.status},${s.lastActivityAt},${s.totals.input},${s.totals.output},${s.totalCostUsd ?? 0},${s.requestCount},${shadow};`;
   }
   return fp;
 }
@@ -68,6 +77,9 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
   const { windowMs } = useTimeWindow();
   const hasBackfilled = useRef(false);
   const isRefreshingRef = useRef(false);
+  // Bugfix: track first completed load separately so an empty 1h window does not
+  // keep re-entering the initial loading state forever.
+  const hasLoadedOnceRef = useRef(false);
   const lastFingerprintRef = useRef<string>("");
 
   const discoverAgents = useCallback(async (): Promise<AgentInfo[]> => {
@@ -110,7 +122,17 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
 
       const http = createSandboxedHttpClient(plugin.id, plugin.permissions);
       const logger = createPluginLogger(plugin.id);
-      const ctx = { http, logger, config: {}, signal: AbortSignal.timeout(60_000) };
+      // Lazy signal: only create the 120s timer if the plugin actually reads ctx.signal.
+      let parseSignal: AbortSignal | undefined;
+      const ctx = {
+        http,
+        logger,
+        config: {},
+        get signal(): AbortSignal {
+          if (!parseSignal) parseSignal = AbortSignal.timeout(120_000);
+          return parseSignal;
+        },
+      };
 
       const rawSessions = await plugin.parseSessions(options, ctx);
 
@@ -134,7 +156,7 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
       if (isRefreshingRef.current) return;
       isRefreshingRef.current = true;
 
-      const isInitialLoad = sessions.length === 0;
+      const isInitialLoad = !hasLoadedOnceRef.current;
       if (isInitialLoad) {
         setIsLoading(true);
       }
@@ -193,7 +215,6 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
           }
         }
 
-        // Deduplicate sessions claimed by multiple agents scanning the same directory.
         const dedupedAggregates = deduplicateAggregates(allAggregates);
         if (dedupedAggregates.length < allAggregates.length) {
           debug(
@@ -203,6 +224,8 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
           );
         }
 
+        markCrossAgentShadows(dedupedAggregates);
+
         const pricedSessions = await priceSessions(dedupedAggregates);
 
         pricedSessions.sort((a, b) => b.lastActivityAt - a.lastActivityAt);
@@ -221,11 +244,13 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
           return;
         }
 
+        const effectiveSessions = selectEffectiveSessions(pricedSessions);
+
         // 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();
-        const persistData = pricedSessions.map((session) => ({
+        const persistData = effectiveSessions.map((session) => ({
           session: {
             agentId: session.agentId,
             sessionId: session.sessionId,
@@ -258,7 +283,7 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
         }));
         const persistedCount = persistSessions(persistData);
         debug(
-          `Persisted ${persistedCount}/${pricedSessions.length} sessions to storage`,
+          `Persisted ${persistedCount}/${effectiveSessions.length} sessions to storage`,
           undefined,
           "agent-sessions",
         );
@@ -266,7 +291,11 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
         setSessions(pricedSessions);
         setLastRefreshAt(Date.now());
 
-        debug(`Session refresh complete`, { count: pricedSessions.length }, "agent-sessions");
+        debug(
+          `Session refresh complete`,
+          { count: pricedSessions.length, effective: effectiveSessions.length },
+          "agent-sessions",
+        );
       } catch (err) {
         const errorMsg = err instanceof Error ? err.message : "Unknown error";
         logError(`Session refresh failed: ${errorMsg}`, undefined, "agent-sessions");
@@ -275,15 +304,19 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
         isRefreshingRef.current = false;
         if (isInitialLoad) {
           setIsLoading(false);
+          hasLoadedOnceRef.current = true;
         }
       }
     },
-    [sessions.length, discoverAgents, fetchAgentSessions, debug, warn, logError, demoMode],
+    [discoverAgents, fetchAgentSessions, debug, warn, logError, demoMode, simulator],
   );
 
   const refreshSessionsRef = useRef(refreshSessions);
   refreshSessionsRef.current = refreshSessions;
 
+  const sessionsRef = useRef(sessions);
+  sessionsRef.current = sessions;
+
   useEffect(() => {
     if (!(demoMode || pluginsInitialized)) return;
 
@@ -304,7 +337,7 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
     let timerId: ReturnType<typeof setTimeout> | null = null;
 
     const scheduleNext = () => {
-      const hasActive = sessions.some((s) => s.status === "active");
+      const hasActive = sessionsRef.current.some((s) => s.status === "active");
       const interval = hasActive ? ACTIVE_INTERVAL_MS : IDLE_INTERVAL_MS;
 
       timerId = setTimeout(() => {
@@ -324,16 +357,21 @@ export function AgentSessionProvider({ children, autoRefresh = false }: AgentSes
         clearTimeout(timerId);
       }
     };
-  }, [autoRefresh, sessions, debug]);
-
-  const value: AgentSessionContextValue = {
-    sessions,
-    agents,
-    isLoading,
-    lastRefreshAt,
-    error,
-    refreshSessions,
-  };
+  }, [autoRefresh, debug]);
+
+  const effectiveSessions = useMemo(() => selectEffectiveSessions(sessions), [sessions]);
+
+  const value: AgentSessionContextValue = useMemo(
+    () => ({
+      sessions: effectiveSessions,
+      agents,
+      isLoading,
+      lastRefreshAt,
+      error,
+      refreshSessions,
+    }),
+    [effectiveSessions, agents, isLoading, lastRefreshAt, error, refreshSessions],
+  );
 
   return <AgentSessionContext.Provider value={value}>{children}</AgentSessionContext.Provider>;
 }

package/src/tui/contexts/PluginContext.tsx

@@ -241,6 +241,14 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
     initialize();
   }, []);
 
+  useEffect(() => {
+    if (!isInitialized) return;
+    notificationBus.setPluginConfig("terminal-bell", {
+      ...((config.pluginConfig ?? {})["terminal-bell"] ?? {}),
+      enabled: config.notifications.soundEnabled,
+    });
+  }, [config.notifications.soundEnabled, isInitialized]);
+
   const prevPluginConfigRef = useRef<Record<string, Record<string, unknown>>>({});
   useEffect(() => {
     if (!isInitialized) return;
@@ -267,7 +275,11 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
         return;
       }
 
-      // Skip providers that are currently rate-limited (backoff)
+      if (state.loading) {
+        debug(`Skipping refresh for ${providerId}: already in flight`, undefined, "refresh");
+        return;
+      }
+
       const now = Date.now();
       if (state.rateLimitUntil > now) {
         const remainingSec = Math.round((state.rateLimitUntil - now) / 1000);
@@ -352,19 +364,25 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
 
         const http = createSandboxedHttpClient(providerId, state.plugin.permissions);
         const logger = createPluginLogger(providerId);
+        // Lazy signal: only create the 30s timer if a plugin actually reads ctx.signal.
+        let fetchSignal: AbortSignal | undefined;
+        const fetchCtx = {
+          credentials: creds,
+          http,
+          logger,
+          config: {},
+          get signal(): AbortSignal {
+            if (!fetchSignal) fetchSignal = AbortSignal.timeout(30_000);
+            return fetchSignal;
+          },
+        };
 
         const fetchResult = await safeInvoke(
           providerId,
           "fetchUsage",
           () =>
             runInPluginGuard(providerId, state.plugin.permissions, () =>
-              state.plugin.fetchUsage({
-                credentials: creds,
-                http,
-                logger,
-                config: {},
-                signal: AbortSignal.timeout(30_000),
-              }),
+              state.plugin.fetchUsage(fetchCtx),
             ),
           {
             // Count non-rate-limit errors as circuit breaker failures.
@@ -505,14 +523,25 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
     await Promise.all(configuredProviders.map(refreshProvider));
   }, [providers, refreshProvider, info]);
 
+  const refreshProviderRef = useRef(refreshProvider);
+  const refreshAllProvidersRef = useRef(refreshAllProviders);
+  refreshProviderRef.current = refreshProvider;
+  refreshAllProvidersRef.current = refreshAllProviders;
+
+  const stableRefreshProvider = useCallback(
+    (providerId: string) => refreshProviderRef.current(providerId),
+    [],
+  );
+  const stableRefreshAllProviders = useCallback(() => refreshAllProvidersRef.current(), []);
+
   const value: PluginContextValue = {
     providers,
     agents,
     themes,
     notifications,
     isInitialized,
-    refreshProvider,
-    refreshAllProviders,
+    refreshProvider: stableRefreshProvider,
+    refreshAllProviders: stableRefreshAllProviders,
   };
 
   return <PluginContext.Provider value={value}>{children}</PluginContext.Provider>;

package/src/tui/hooks/useNotificationBridge.ts

@@ -0,0 +1,29 @@
+import type { NotificationEvent } from "@tokentop/plugin-sdk";
+import { useEffect } from "react";
+import { notificationBus } from "@/plugins/notification-bus.ts";
+import { useToastContext } from "../contexts/ToastContext.tsx";
+
+function severityToToastType(
+  severity: NotificationEvent["severity"],
+): "info" | "warning" | "error" {
+  switch (severity) {
+    case "critical":
+      return "error";
+    case "warning":
+      return "warning";
+    default:
+      return "info";
+  }
+}
+
+export function useNotificationBridge(): void {
+  const { showToast } = useToastContext();
+
+  useEffect(() => {
+    const handler = (event: NotificationEvent) => {
+      showToast(event.title, severityToToastType(event.severity));
+    };
+    notificationBus.setToastHandler(handler);
+    return () => notificationBus.setToastHandler(null);
+  }, [showToast]);
+}

package/src/tui/utils/scrollFollow.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, test } from "bun:test";
+import { computeScrollOffset } from "./scrollFollow.ts";
+
+describe("computeScrollOffset", () => {
+  test("cursor inside viewport leaves offset unchanged", () => {
+    expect(computeScrollOffset(5, 0, 10, 100)).toBe(0);
+  });
+
+  test("cursor at bottom edge leaves offset unchanged", () => {
+    expect(computeScrollOffset(9, 0, 10, 100)).toBe(0);
+  });
+
+  test("cursor past bottom pulls offset down by one row", () => {
+    expect(computeScrollOffset(10, 0, 10, 100)).toBe(1);
+  });
+
+  test("cursor past top pulls offset up", () => {
+    expect(computeScrollOffset(3, 5, 10, 100)).toBe(3);
+  });
+
+  test("clamps offset to non-negative", () => {
+    expect(computeScrollOffset(0, 0, 10, 100)).toBe(0);
+  });
+
+  test("clamps offset to total - visibleRows", () => {
+    expect(computeScrollOffset(99, 0, 10, 100)).toBe(90);
+  });
+
+  test("offset stays 0 when content fits in viewport", () => {
+    expect(computeScrollOffset(3, 0, 10, 4)).toBe(0);
+  });
+
+  // Regression test for cursor-disappears-then-jump bug: rapid j presses
+  // that React batches into a single render must still land with the cursor
+  // visible at the bottom edge. Simulating N sequential functional updates
+  // (the reducer runs each one in order) verifies the invariant.
+  test("batched rapid j-presses keep cursor at bottom edge each step", () => {
+    const vis = 10;
+    const total = 1000;
+    let state = { row: 0, offset: 0 };
+    for (let i = 0; i < 50; i++) {
+      const nextRow = Math.min(state.row + 1, total - 1);
+      const nextOffset = computeScrollOffset(nextRow, state.offset, vis, total);
+      state = { row: nextRow, offset: nextOffset };
+      expect(state.row).toBeGreaterThanOrEqual(state.offset);
+      expect(state.row).toBeLessThan(state.offset + vis);
+    }
+    expect(state.row).toBe(50);
+    expect(state.offset).toBe(41);
+  });
+
+  test("batched rapid k-presses at top keep cursor at top edge", () => {
+    const vis = 10;
+    const total = 1000;
+    let state = { row: 50, offset: 41 };
+    for (let i = 0; i < 50; i++) {
+      const nextRow = Math.max(state.row - 1, 0);
+      const nextOffset = computeScrollOffset(nextRow, state.offset, vis, total);
+      state = { row: nextRow, offset: nextOffset };
+      expect(state.row).toBeGreaterThanOrEqual(state.offset);
+      expect(state.row).toBeLessThan(state.offset + vis);
+    }
+    expect(state.row).toBe(0);
+    expect(state.offset).toBe(0);
+  });
+
+  test("re-clamp when list shrinks below current offset", () => {
+    expect(computeScrollOffset(5, 50, 10, 20)).toBe(5);
+    expect(computeScrollOffset(19, 50, 10, 20)).toBe(10);
+  });
+});

package/src/tui/utils/scrollFollow.ts

@@ -0,0 +1,12 @@
+export function computeScrollOffset(
+  row: number,
+  prevOffset: number,
+  visibleRows: number,
+  total: number,
+): number {
+  let next = prevOffset;
+  if (row < next) next = row;
+  else if (row >= next + visibleRows) next = row - visibleRows + 1;
+  const max = Math.max(0, total - visibleRows);
+  return Math.max(0, Math.min(next, max));
+}

package/src/tui/views/Dashboard.tsx

@@ -60,12 +60,6 @@ export function Dashboard() {
   const cardRefs = useRef<(BoxRenderable | null)[]>([]);
   const inputRef = useRef<InputRenderable>(null);
 
-  useEffect(() => {
-    if (isInitialized) {
-      refreshAllProviders();
-    }
-  }, [isInitialized]);
-
   const getMaxUsage = useCallback((state: ProviderState) => {
     if (!state.usage?.limits) return 0;