@tokentop/ttop 0.5.0 → 0.6.1

package/src/tui/contexts/AgentSessionContext.tsx

@@ -8,7 +8,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { aggregateSessionUsage } from "@/agents/aggregator.ts";
+import { aggregateSessionUsage, deduplicateAggregates } 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";
@@ -21,6 +21,10 @@ import { useLogs } from "./LogContext.tsx";
 import { usePlugins } from "./PluginContext.tsx";
 import { useTimeWindow } from "./TimeWindowContext.tsx";
 
+/** Polling interval when at least one session is active. */
+const ACTIVE_INTERVAL_MS = 3_000;
+/** Polling interval when all sessions are idle/historical. */
+const IDLE_INTERVAL_MS = 15_000;
 interface AgentSessionContextValue {
   sessions: AgentSessionAggregate[];
   agents: AgentInfo[];
@@ -35,14 +39,24 @@ const AgentSessionContext = createContext<AgentSessionContextValue | null>(null)
 interface AgentSessionProviderProps {
   children: ReactNode;
   autoRefresh?: boolean;
-  refreshInterval?: number;
 }
 
-export function AgentSessionProvider({
-  children,
-  autoRefresh = false,
-  refreshInterval = 30000,
-}: AgentSessionProviderProps) {
+/**
+ * Compute a lightweight fingerprint of session state.
+ * If the fingerprint hasn't changed, we skip setSessions() to avoid
+ * unnecessary React re-renders of the entire session list.
+ */
+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.
+  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};`;
+  }
+  return fp;
+}
+
+export function AgentSessionProvider({ children, autoRefresh = false }: AgentSessionProviderProps) {
   const [sessions, setSessions] = useState<AgentSessionAggregate[]>([]);
   const [agents, setAgents] = useState<AgentInfo[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -54,6 +68,7 @@ export function AgentSessionProvider({
   const { windowMs } = useTimeWindow();
   const hasBackfilled = useRef(false);
   const isRefreshingRef = useRef(false);
+  const lastFingerprintRef = useRef<string>("");
 
   const discoverAgents = useCallback(async (): Promise<AgentInfo[]> => {
     const agentPlugins = pluginRegistry.getAll("agent");
@@ -178,10 +193,34 @@ export function AgentSessionProvider({
           }
         }
 
-        const pricedSessions = await priceSessions(allAggregates);
+        // Deduplicate sessions claimed by multiple agents scanning the same directory.
+        const dedupedAggregates = deduplicateAggregates(allAggregates);
+        if (dedupedAggregates.length < allAggregates.length) {
+          debug(
+            `Deduplicated sessions: ${allAggregates.length} \u2192 ${dedupedAggregates.length}`,
+            undefined,
+            "agent-sessions",
+          );
+        }
+
+        const pricedSessions = await priceSessions(dedupedAggregates);
 
         pricedSessions.sort((a, b) => b.lastActivityAt - a.lastActivityAt);
 
+        // --- Change detection: skip React update if nothing changed ---
+        const newFingerprint = computeSessionFingerprint(pricedSessions);
+        const changed = newFingerprint !== lastFingerprintRef.current;
+        lastFingerprintRef.current = newFingerprint;
+
+        if (!changed) {
+          debug(
+            "Session refresh: no changes detected, skipping render",
+            undefined,
+            "agent-sessions",
+          );
+          return;
+        }
+
         // 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.
@@ -260,18 +299,32 @@ export function AgentSessionProvider({
   useEffect(() => {
     if (!autoRefresh) return;
 
-    debug(`Setting up session refresh interval: ${refreshInterval}ms`, undefined, "agent-sessions");
+    // Adaptive polling: poll faster when sessions are active, slower when idle.
+    // The interval is re-evaluated after each tick based on current session state.
+    let timerId: ReturnType<typeof setTimeout> | null = null;
 
-    const intervalId = setInterval(() => {
-      debug("Interval tick - refreshing sessions", undefined, "agent-sessions");
-      refreshSessionsRef.current();
-    }, refreshInterval);
+    const scheduleNext = () => {
+      const hasActive = sessions.some((s) => s.status === "active");
+      const interval = hasActive ? ACTIVE_INTERVAL_MS : IDLE_INTERVAL_MS;
+
+      timerId = setTimeout(() => {
+        debug(
+          `Adaptive tick (${hasActive ? "active" : "idle"}, ${interval}ms)`,
+          undefined,
+          "agent-sessions",
+        );
+        refreshSessionsRef.current().then(scheduleNext);
+      }, interval);
+    };
+
+    scheduleNext();
 
     return () => {
-      debug("Clearing session refresh interval", undefined, "agent-sessions");
-      clearInterval(intervalId);
+      if (timerId !== null) {
+        clearTimeout(timerId);
+      }
     };
-  }, [autoRefresh, refreshInterval, debug]);
+  }, [autoRefresh, sessions, debug]);
 
   const value: AgentSessionContextValue = {
     sessions,

package/src/tui/contexts/PluginContext.tsx

@@ -44,6 +44,8 @@ export interface ProviderState {
   loading: boolean;
   lastFetchAt: number | null;
   history: UsageSnapshot[];
+  /** Timestamp (ms) until which this provider should be skipped due to rate limiting. 0 = not rate limited. */
+  rateLimitUntil: number;
 }
 
 interface PluginContextValue {
@@ -190,6 +192,7 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
           loading: false,
           lastFetchAt: null,
           history: [],
+          rateLimitUntil: 0,
         });
 
         if (configured) {
@@ -238,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;
@@ -264,6 +275,18 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
         return;
       }
 
+      // Skip providers that are currently rate-limited (backoff)
+      const now = Date.now();
+      if (state.rateLimitUntil > now) {
+        const remainingSec = Math.round((state.rateLimitUntil - now) / 1000);
+        debug(
+          `Skipping ${providerId}: rate limited for ${remainingSec}s more`,
+          undefined,
+          "refresh",
+        );
+        return;
+      }
+
       info(`Refreshing ${providerId}...`, undefined, "refresh");
 
       setProviders((prev) => {
@@ -310,6 +333,7 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
               usage,
               loading: false,
               lastFetchAt: Date.now(),
+              rateLimitUntil: 0,
               history: addToHistory(currentHistory, snapshotEntry),
             });
             return next;
@@ -337,16 +361,24 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
         const http = createSandboxedHttpClient(providerId, state.plugin.permissions);
         const logger = createPluginLogger(providerId);
 
-        const fetchResult = await safeInvoke(providerId, "fetchUsage", () =>
-          runInPluginGuard(providerId, state.plugin.permissions, () =>
-            state.plugin.fetchUsage({
-              credentials: creds,
-              http,
-              logger,
-              config: {},
-              signal: AbortSignal.timeout(30_000),
-            }),
-          ),
+        const fetchResult = await safeInvoke(
+          providerId,
+          "fetchUsage",
+          () =>
+            runInPluginGuard(providerId, state.plugin.permissions, () =>
+              state.plugin.fetchUsage({
+                credentials: creds,
+                http,
+                logger,
+                config: {},
+                signal: AbortSignal.timeout(30_000),
+              }),
+            ),
+          {
+            // Count non-rate-limit errors as circuit breaker failures.
+            // Rate limits are handled separately via backoff scheduling.
+            isFailure: (usage) => !!usage.error && !usage.rateLimited,
+          },
         );
 
         if (!fetchResult.ok) {
@@ -355,6 +387,34 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
 
         const usage = fetchResult.value;
 
+        // Handle rate-limited responses: set backoff, preserve last good data
+        if (usage.rateLimited) {
+          const backoffMs = usage.retryAfterMs ?? 300_000; // default 5 min
+          const backoffUntil = Date.now() + backoffMs;
+          warn(
+            `${providerId} rate limited, backing off for ${Math.round(backoffMs / 1000)}s`,
+            { retryAfterMs: backoffMs, until: new Date(backoffUntil).toISOString() },
+            "refresh",
+          );
+
+          setProviders((prev) => {
+            const next = new Map(prev);
+            const current = next.get(providerId);
+            // Preserve the last successful usage data if we have it
+            const preservedUsage = current?.usage && !current.usage.error ? current.usage : usage;
+            next.set(providerId, {
+              ...state,
+              usage: preservedUsage,
+              loading: false,
+              lastFetchAt: Date.now(),
+              rateLimitUntil: backoffUntil,
+              history: current?.history ?? [],
+            });
+            return next;
+          });
+          return;
+        }
+
         if (usage.error) {
           warn(`${providerId} returned error: ${usage.error}`, undefined, "refresh");
         } else {
@@ -399,6 +459,7 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
             usage,
             loading: false,
             lastFetchAt: Date.now(),
+            rateLimitUntil: 0,
             history: addToHistory(currentHistory, snapshot),
           });
           return next;
@@ -418,6 +479,7 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
             },
             loading: false,
             lastFetchAt: Date.now(),
+            rateLimitUntil: current?.rateLimitUntil ?? 0,
             history: current?.history ?? [],
           });
           return next;

package/src/tui/contexts/ThemeContext.tsx

@@ -16,6 +16,7 @@ interface ThemeContextValue {
   setTheme: (theme: ThemePlugin) => void;
   previewTheme: ThemePlugin | null;
   setPreviewTheme: (theme: ThemePlugin | null) => void;
+  cliTheme: string | undefined;
 }
 
 const defaultComponents: ThemeComponents = {
@@ -29,10 +30,11 @@ const ThemeContext = createContext<ThemeContextValue | null>(null);
 
 interface ThemeProviderProps {
   initialTheme?: ThemePlugin;
+  cliTheme?: string;
   children: ReactNode;
 }
 
-export function ThemeProvider({ initialTheme, children }: ThemeProviderProps) {
+export function ThemeProvider({ initialTheme, cliTheme, children }: ThemeProviderProps) {
   const [theme, setTheme] = useState<ThemePlugin>(initialTheme ?? tokyoNightTheme);
   const [previewTheme, setPreviewTheme] = useState<ThemePlugin | null>(null);
 
@@ -46,6 +48,7 @@ export function ThemeProvider({ initialTheme, children }: ThemeProviderProps) {
     setTheme,
     previewTheme,
     setPreviewTheme,
+    cliTheme,
   };
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

package/src/tui/createApp.tsx

@@ -13,6 +13,7 @@ export interface CreateAppOptions {
   demoSeed?: number;
   demoPreset?: DemoPreset;
   cliPlugins?: string[];
+  cliTheme?: string;
 }
 
 export const DEFAULT_APP_OPTIONS = {
@@ -32,6 +33,7 @@ export function createAppElement(options: CreateAppOptions = {}): ReactNode {
       {...(options.demoSeed !== undefined ? { demoSeed: options.demoSeed } : {})}
       {...(options.demoPreset !== undefined ? { demoPreset: options.demoPreset } : {})}
       {...(options.cliPlugins ? { cliPlugins: options.cliPlugins } : {})}
+      {...(options.cliTheme ? { cliTheme: options.cliTheme } : {})}
     />
   );
 

package/src/tui/hooks/index.ts

@@ -6,6 +6,7 @@ export {
   useAnimatedTokens,
   useAnimatedValue,
 } from "./useAnimatedValue.ts";
+export { animationTick, useAnimationTick } from "./useAnimationTick.ts";
 export type { DashboardDeltas, UseDashboardStateResult } from "./useDashboardState.ts";
 export { useDashboardState } from "./useDashboardState.ts";
 export type { ActivityDebugData, ActivityState, UseActivityRateResult } from "./useEmaActivity.ts";

package/src/tui/hooks/useAnimatedValue.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { animationTick } from "./useAnimationTick.ts";
 
 export type EasingFunction = (t: number) => number;
 
@@ -14,6 +15,7 @@ export interface UseAnimatedValueOptions {
   durationMs?: number;
   easing?: keyof typeof easings | EasingFunction;
   precision?: number;
+  /** @deprecated Ignored — animations now use the global 30 Hz tick. */
   frameRate?: number;
 }
 
@@ -21,57 +23,58 @@ export function useAnimatedValue(
   targetValue: number,
   options: UseAnimatedValueOptions = {},
 ): number {
-  const { durationMs = 300, easing = "easeOutQuad", precision = 2, frameRate = 60 } = options;
+  const { durationMs = 300, easing = "easeOutQuad", precision = 2 } = options;
 
   const [displayValue, setDisplayValue] = useState(targetValue);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const displayRef = useRef(targetValue);
   const startValueRef = useRef(targetValue);
-  const startTimeRef = useRef<number>(Date.now());
+  const startTimeRef = useRef(0);
   const targetRef = useRef(targetValue);
+  const unsubRef = useRef<(() => void) | null>(null);
 
   const easingFn = typeof easing === "function" ? easing : easings[easing];
-  const frameInterval = Math.round(1000 / frameRate);
 
   useEffect(() => {
-    if (targetRef.current === targetValue && displayValue === targetValue) {
+    // Already at target — nothing to animate
+    if (targetRef.current === targetValue && displayRef.current === targetValue) {
       return;
     }
 
-    if (intervalRef.current !== null) {
-      clearInterval(intervalRef.current);
-    }
+    // Clean up any existing subscription
+    unsubRef.current?.();
 
-    startValueRef.current = displayValue;
+    // Set up animation from current display value to new target
+    startValueRef.current = displayRef.current;
     startTimeRef.current = Date.now();
     targetRef.current = targetValue;
 
-    intervalRef.current = setInterval(() => {
-      const elapsed = Date.now() - startTimeRef.current;
+    // Subscribe to global tick — auto-starts the shared timer
+    unsubRef.current = animationTick.subscribe((now) => {
+      const elapsed = now - startTimeRef.current;
       const progress = Math.min(elapsed / durationMs, 1);
       const easedProgress = easingFn(progress);
-
       const startVal = startValueRef.current;
-      const currentValue = startVal + (targetRef.current - startVal) * easedProgress;
-      const roundedValue = Number(currentValue.toFixed(precision));
+      const target = targetRef.current;
+      const currentValue = startVal + (target - startVal) * easedProgress;
+      const rounded = Number(currentValue.toFixed(precision));
 
-      setDisplayValue(roundedValue);
+      displayRef.current = rounded;
+      setDisplayValue(rounded);
 
       if (progress >= 1) {
-        if (intervalRef.current !== null) {
-          clearInterval(intervalRef.current);
-          intervalRef.current = null;
-        }
-        setDisplayValue(targetRef.current);
+        displayRef.current = target;
+        setDisplayValue(target);
+        // Unsubscribe — if no other animations are active, the global timer stops
+        unsubRef.current?.();
+        unsubRef.current = null;
       }
-    }, frameInterval);
+    });
 
     return () => {
-      if (intervalRef.current !== null) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
+      unsubRef.current?.();
+      unsubRef.current = null;
     };
-  }, [targetValue, durationMs, easingFn, precision, frameInterval, displayValue]);
+  }, [targetValue, durationMs, easingFn, precision]);
 
   return displayValue;
 }

package/src/tui/hooks/useAnimationTick.ts

@@ -0,0 +1,93 @@
+/**
+ * Global animation tick manager.
+ *
+ * Replaces per-component setInterval timers with a single shared 30 Hz tick.
+ * This eliminates the ~90 concurrent timers that were causing ~2,400 state
+ * updates/sec and ~60% CPU usage at idle.
+ *
+ * The tick automatically starts when the first subscriber joins and stops
+ * when the last subscriber leaves, consuming zero CPU when no animations
+ * are active.
+ *
+ * @see https://github.com/tokentopapp/tokentop/issues/55
+ */
+import { useEffect, useRef } from "react";
+
+type TickCallback = (now: number) => void;
+
+const TICK_RATE_HZ = 30;
+const TICK_INTERVAL_MS = Math.round(1000 / TICK_RATE_HZ);
+
+class AnimationTickManager {
+  private callbacks = new Set<TickCallback>();
+  private interval: ReturnType<typeof setInterval> | null = null;
+
+  /**
+   * Subscribe a callback to the global tick.
+   * Returns an unsubscribe function. When the last subscriber leaves,
+   * the underlying setInterval is cleared automatically.
+   */
+  subscribe(callback: TickCallback): () => void {
+    this.callbacks.add(callback);
+    if (this.callbacks.size === 1) {
+      this.start();
+    }
+    return () => {
+      this.callbacks.delete(callback);
+      if (this.callbacks.size === 0) {
+        this.stop();
+      }
+    };
+  }
+
+  /** Number of active subscribers (useful for debugging). */
+  get subscriberCount(): number {
+    return this.callbacks.size;
+  }
+
+  /** Whether the global interval is currently running. */
+  get isRunning(): boolean {
+    return this.interval !== null;
+  }
+
+  private start(): void {
+    if (this.interval !== null) return;
+    this.interval = setInterval(() => {
+      const now = Date.now();
+      for (const cb of this.callbacks) {
+        cb(now);
+      }
+    }, TICK_INTERVAL_MS);
+  }
+
+  private stop(): void {
+    if (this.interval !== null) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+  }
+}
+
+/** Global animation tick singleton — single 30 Hz timer shared by all hooks. */
+export const animationTick = new AnimationTickManager();
+
+/**
+ * React hook to subscribe to the global animation tick.
+ *
+ * The callback fires at ~30 Hz while `active` is true.
+ * Uses a ref to always call the latest callback (no stale closures).
+ *
+ * @param callback - Called with current timestamp (Date.now()) on each tick
+ * @param active - Whether to subscribe (default: true). When false, the
+ *   subscription is paused and the global timer may stop if no other
+ *   subscribers remain.
+ */
+export function useAnimationTick(callback: TickCallback, active = true): void {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  useEffect(() => {
+    if (!active) return;
+    return animationTick.subscribe((now) => callbackRef.current(now));
+  }, [active]);
+}

package/src/tui/hooks/useDashboardKeyboard.ts

@@ -7,6 +7,7 @@ import { useAgentSessions } from "../contexts/AgentSessionContext.tsx";
 import { useInputFocus } from "../contexts/InputContext.tsx";
 import { useTimeWindow } from "../contexts/TimeWindowContext.tsx";
 import { useToastContext } from "../contexts/ToastContext.tsx";
+import type { SortDirection, SortField } from "../types/sort.ts";
 
 function formatSessionSummary(session: AgentSessionAggregate): string {
   const effectiveTokens = session.totals.input + session.totals.output;
@@ -54,7 +55,9 @@ interface DashboardKeyboardState {
   sidebarCollapsed: boolean;
   filterQuery: string;
   isFiltering: boolean;
-  sortField: "cost" | "tokens" | "time";
+  sortField: SortField;
+  sortDirection: SortDirection;
+  showSortOverlay: boolean;
   pendingG: boolean;
   scrollOffset: number;
   limitSelectedIndex: number;
@@ -76,13 +79,15 @@ interface DashboardKeyboardActions {
   setSidebarCollapsed: (fn: (prev: boolean) => boolean) => void;
   setFilterQuery: (fn: (prev: string) => string) => void;
   setIsFiltering: (val: boolean) => void;
-  setSortField: (fn: (prev: "cost" | "tokens" | "time") => "cost" | "tokens" | "time") => void;
+  setSortField: (fn: (prev: SortField) => SortField) => void;
+  setSortDirection: (fn: (prev: SortDirection) => SortDirection) => void;
   setPendingG: (val: boolean) => void;
   setScrollOffset: (val: number) => void;
   setLimitSelectedIndex: (fn: (prev: number) => number) => void;
   setDriverDimension: (fn: (prev: DriverDimension) => DriverDimension) => void;
   setSelectedDriverIndex: (fn: (prev: number) => number) => void;
   setActiveDriverFilter: (val: string | null) => void;
+  setShowSortOverlay: (val: boolean) => void;
 }
 
 interface UseDashboardKeyboardProps {
@@ -115,7 +120,7 @@ export function useDashboardKeyboard({
 
   useEffect(() => {
     isFilteringRef.current = state.isFiltering;
-    modalOpenRef.current = state.showHelp || state.showSessionDrawer;
+    modalOpenRef.current = state.showHelp || state.showSessionDrawer || state.showSortOverlay;
     pendingGRef.current = state.pendingG;
     sessionsRef.current = processedSessions;
     focusedPanelRef.current = state.focusedPanel;
@@ -129,6 +134,7 @@ export function useDashboardKeyboard({
     state.isFiltering,
     state.showHelp,
     state.showSessionDrawer,
+    state.showSortOverlay,
     state.pendingG,
     processedSessions,
     state.focusedPanel,
@@ -242,8 +248,9 @@ export function useDashboardKeyboard({
       return;
     }
 
+    // Open sort overlay menu
     if (key.name === "s") {
-      actions.setSortField((curr) => (curr === "cost" ? "tokens" : "cost"));
+      actions.setShowSortOverlay(true);
       return;
     }
 

package/src/tui/hooks/useEntranceAnimation.ts

@@ -1,7 +1,9 @@
 import { useEffect, useRef, useState } from "react";
+import { animationTick } from "./useAnimationTick.ts";
 
 export interface UseEntranceAnimationOptions {
   durationMs?: number;
+  /** @deprecated Ignored — animations now use the global 30 Hz tick. */
   fps?: number;
 }
 
@@ -11,26 +13,30 @@ export interface UseEntranceAnimationOptions {
  * Use this to fade in new items in a list.
  */
 export function useEntranceAnimation(options: UseEntranceAnimationOptions = {}): number {
-  const { durationMs = 400, fps = 30 } = options;
+  const { durationMs = 400 } = options;
   const mountTime = useRef(Date.now());
   const [intensity, setIntensity] = useState(0);
+  const unsubRef = useRef<(() => void) | null>(null);
 
   useEffect(() => {
-    const intervalMs = 1000 / fps;
-
-    const tick = () => {
-      const elapsed = Date.now() - mountTime.current;
+    unsubRef.current = animationTick.subscribe((now) => {
+      const elapsed = now - mountTime.current;
       const progress = Math.min(1, elapsed / durationMs);
       const eased = 1 - (1 - progress) ** 2;
       setIntensity(eased);
 
-      if (progress < 1) {
-        setTimeout(tick, intervalMs);
+      if (progress >= 1) {
+        setIntensity(1);
+        unsubRef.current?.();
+        unsubRef.current = null;
       }
-    };
+    });
 
-    tick();
-  }, [durationMs, fps]);
+    return () => {
+      unsubRef.current?.();
+      unsubRef.current = null;
+    };
+  }, [durationMs]);
 
   return intensity;
 }

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]);
+}