@tokentop/ttop 0.3.0 → 0.5.0

package/src/tui/contexts/AgentSessionContext.tsx

@@ -1,3 +1,4 @@
+import type { AgentPlugin, SessionParseOptions } from "@tokentop/plugin-sdk";
 import {
   createContext,
   type ReactNode,
@@ -13,12 +14,11 @@ import type { AgentId, AgentInfo, AgentSessionAggregate } from "@/agents/types.t
 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 { useStorage } from "./StorageContext.tsx";
 import { useTimeWindow } from "./TimeWindowContext.tsx";
 
 interface AgentSessionContextValue {
@@ -32,13 +32,6 @@ interface AgentSessionContextValue {
 
 const AgentSessionContext = createContext<AgentSessionContextValue | null>(null);
 
-const MAX_PERSISTENCE_FINGERPRINTS = 500;
-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;
@@ -57,7 +50,6 @@ 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);
@@ -190,65 +182,47 @@ export function AgentSessionProvider({
 
         pricedSessions.sort((a, b) => b.lastActivityAt - a.lastActivityAt);
 
-        if (storageReady) {
-          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,
-              })),
-            );
-          }
-          if (sessionPersistenceFingerprints.size > MAX_PERSISTENCE_FINGERPRINTS) {
-            const excess = sessionPersistenceFingerprints.size - MAX_PERSISTENCE_FINGERPRINTS;
-            const keys = sessionPersistenceFingerprints.keys();
-            for (let i = 0; i < excess; i++) {
-              const next = keys.next();
-              if (next.done) break;
-              sessionPersistenceFingerprints.delete(next.value);
-            }
-          }
-
-          debug(
-            `Persisted ${persistedCount}/${pricedSessions.length} changed sessions to storage`,
-            undefined,
-            "agent-sessions",
-          );
-        }
+        // 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) => ({
+          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());
@@ -265,17 +239,7 @@ export function AgentSessionProvider({
         }
       }
     },
-    [
-      sessions.length,
-      discoverAgents,
-      fetchAgentSessions,
-      debug,
-      warn,
-      logError,
-      storageReady,
-      recordAgentSession,
-      demoMode,
-    ],
+    [sessions.length, discoverAgents, fetchAgentSessions, debug, warn, logError, demoMode],
   );
 
   const refreshSessionsRef = useRef(refreshSessions);

package/src/tui/contexts/PluginContext.tsx

@@ -1,3 +1,11 @@
+import type {
+  AgentPlugin,
+  Credentials,
+  NotificationPlugin,
+  ProviderPlugin,
+  ProviderUsageData,
+  ThemePlugin,
+} from "@tokentop/plugin-sdk";
 import {
   createContext,
   type ReactNode,
@@ -14,9 +22,6 @@ import { safeInvoke, safeInvokeSync } from "@/plugins/plugin-host.ts";
 import { pluginRegistry } from "@/plugins/registry.ts";
 import { createPluginLogger, createSandboxedHttpClient } from "@/plugins/sandbox.ts";
 import { installGlobalFetchGuard, runInPluginGuard } from "@/plugins/sandbox-guard.ts";
-import type { NotificationPlugin } from "@/plugins/types/notification.ts";
-import type { Credentials, ProviderPlugin, ProviderUsageData } from "@/plugins/types/provider.ts";
-import type { ThemePlugin } from "@/plugins/types/theme.ts";
 import { initPricingFromPlugins } from "@/pricing/index.ts";
 import type { ProviderSnapshotInsert } from "@/storage/types.ts";
 import { useConfig } from "./ConfigContext.tsx";
@@ -43,6 +48,7 @@ export interface ProviderState {
 
 interface PluginContextValue {
   providers: Map<string, ProviderState>;
+  agents: AgentPlugin[];
   themes: ThemePlugin[];
   notifications: NotificationPlugin[];
   isInitialized: boolean;
@@ -87,6 +93,7 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
   const [isInitialized, setIsInitialized] = useState(false);
   const [providers, setProviders] = useState<Map<string, ProviderState>>(new Map());
   const [themes, setThemes] = useState<ThemePlugin[]>([]);
+  const [agents, setAgents] = useState<AgentPlugin[]>([]);
   const [notifications, setNotifications] = useState<NotificationPlugin[]>([]);
   const { demoMode, simulator } = useDemoMode();
   const { debug, info, warn, error: logError } = useLogs();
@@ -116,6 +123,7 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
       }
 
       const providerPlugins = pluginRegistry.getAll("provider");
+      const agentPlugins = pluginRegistry.getAll("agent");
       const themePlugins = pluginRegistry.getAll("theme");
       const notificationPlugins = pluginRegistry.getAll("notification");
 
@@ -221,6 +229,7 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
       notificationBus.registerPlugins(notificationPlugins);
 
       setProviders(providerStates);
+      setAgents(agentPlugins);
       setThemes(themePlugins);
       setNotifications(notificationPlugins);
       setIsInitialized(true);
@@ -444,6 +453,7 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
 
   const value: PluginContextValue = {
     providers,
+    agents,
     themes,
     notifications,
     isInitialized,

package/src/tui/contexts/RealTimeActivityContext.tsx

@@ -1,3 +1,4 @@
+import type { ActivityUpdate } from "@tokentop/plugin-sdk";
 import {
   createContext,
   type ReactNode,
@@ -9,7 +10,6 @@ import {
 } from "react";
 import { createPluginContext } from "@/plugins/plugin-context-factory.ts";
 import { pluginRegistry } from "@/plugins/registry.ts";
-import type { ActivityUpdate } from "@/plugins/types/agent.ts";
 import { useDemoMode } from "./DemoModeContext.tsx";
 import { useLogs } from "./LogContext.tsx";
 import { usePlugins } from "./PluginContext.tsx";
@@ -50,25 +50,38 @@ export function RealTimeActivityProvider({ children }: { children: ReactNode })
     };
   }, []);
 
-  const handleActivityUpdate = useCallback(
-    (update: ActivityUpdate) => {
-      const key = `${update.sessionId}:${update.messageId}`;
-      const prev = lastSeenRef.current.get(key);
-      const prevTokens = prev?.tokens ?? 0;
-      const newTokens = update.tokens.input + update.tokens.output + (update.tokens.reasoning ?? 0);
-      const delta = Math.max(0, newTokens - prevTokens);
-
-      if (delta > 0) {
-        lastSeenRef.current.set(key, { tokens: newTokens, updatedAt: Date.now() });
-        setLastActivityAt(update.timestamp);
-        debug(`Real-time activity: +${delta} tokens`, { sessionId: update.sessionId }, "realtime");
-
-        for (const listener of listenersRef.current) {
-          listener(delta, update.timestamp);
-        }
+  // Store the actual handler logic in a ref so it always has access to the
+  // latest `debug` without changing callback identity. This prevents the
+  // useEffect below from re-running on every render (which would trigger
+  // stopActivityWatch/startActivityWatch churn on every plugin).
+  const handleActivityUpdateRef = useRef<(update: ActivityUpdate) => void>(() => {});
+  handleActivityUpdateRef.current = (update: ActivityUpdate) => {
+    const key = `${update.sessionId}:${update.messageId}`;
+    const prev = lastSeenRef.current.get(key);
+    const prevTokens = prev?.tokens ?? 0;
+    const input = update.tokens.input ?? 0;
+    const output = update.tokens.output ?? 0;
+    const reasoning = update.tokens.reasoning ?? 0;
+    const newTokens = input + output + reasoning;
+    if (!Number.isFinite(newTokens)) return;
+    const delta = Math.max(0, newTokens - prevTokens);
+
+    if (delta > 0) {
+      lastSeenRef.current.set(key, { tokens: newTokens, updatedAt: Date.now() });
+      setLastActivityAt(update.timestamp);
+      debug(`Real-time activity: +${delta} tokens`, { sessionId: update.sessionId }, "realtime");
+
+      for (const listener of listenersRef.current) {
+        listener(delta, update.timestamp);
       }
-    },
-    [debug],
+    }
+  };
+
+  // Stable wrapper — identity never changes, so the useEffect below only
+  // runs once per plugin initialization (not on every debug/info change).
+  const handleActivityUpdate = useCallback(
+    (update: ActivityUpdate) => handleActivityUpdateRef.current(update),
+    [],
   );
 
   useEffect(() => {
@@ -106,7 +119,7 @@ export function RealTimeActivityProvider({ children }: { children: ReactNode })
         cleanupRef.current = null;
       }
     };
-  }, [pluginsInitialized, demoMode, handleActivityUpdate, info]);
+  }, [pluginsInitialized, demoMode, handleActivityUpdate]);
 
   useEffect(() => {
     const interval = setInterval(() => {

package/src/tui/contexts/StorageContext.tsx

@@ -9,22 +9,11 @@ import {
   useState,
 } from "react";
 import { closeDatabase, getAppRunId, initDatabase, isDatabaseInitialized } from "@/storage/db.ts";
-import {
-  getLatestStreamTotalsForAllSessions,
-  insertAgentSessionSnapshot,
-  upsertAgentSession,
-} from "@/storage/repos/agentSessions.ts";
+import { seedPreviousTotals } from "@/storage/persistence-service.ts";
 import { insertProviderSnapshotBatch } from "@/storage/repos/providerSnapshots.ts";
 import { insertUsageEventBatch } from "@/storage/repos/usageEvents.ts";
-import type {
-  AgentSessionSnapshotInsert,
-  AgentSessionStreamSnapshotRow,
-  AgentSessionUpsert,
-  ProviderSnapshotInsert,
-  StreamTotals,
-  UsageEventInsert,
-} from "@/storage/types.ts";
-import { computeStreamDelta } from "@/storage/types.ts";
+import { incrementalVacuum, pruneOldData } from "@/storage/retention.ts";
+import type { ProviderSnapshotInsert, UsageEventInsert } from "@/storage/types.ts";
 import { useDemoMode } from "./DemoModeContext.tsx";
 
 interface StorageContextValue {
@@ -32,29 +21,12 @@ interface StorageContextValue {
   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;
-const MAX_TRACKED_SESSIONS = 1_000;
-const MAX_TRACKED_STREAMS = 5_000;
-
-function capMapSize<K, V>(map: Map<K, V>, max: number): void {
-  if (map.size <= max) return;
-  const excess = map.size - max;
-  const keys = map.keys();
-  for (let i = 0; i < excess; i++) {
-    const next = keys.next();
-    if (next.done) break;
-    map.delete(next.value);
-  }
-}
+const PROVIDER_SNAPSHOT_INTERVAL_MS = 300_000;
+const PRUNE_INTERVAL_MS = 60 * 60 * 1000; // 1 hour
 
 interface StorageProviderProps {
   children: ReactNode;
@@ -64,8 +36,6 @@ 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(() => {
@@ -81,23 +51,24 @@ export function StorageProvider({ children }: StorageProviderProps) {
     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);
+
+        // Prune expired snapshots before seeding — keeps startup fast
+        try {
+          const pruneResult = pruneOldData();
+          if (pruneResult.agentSessionSnapshots > 0 || pruneResult.providerSnapshots > 0) {
+            console.log(
+              `[retention] Pruned ${pruneResult.agentSessionSnapshots} session snapshots, ` +
+                `${pruneResult.providerSnapshots} provider snapshots in ${pruneResult.durationMs}ms`,
+            );
+            incrementalVacuum();
           }
+        } catch (err) {
+          console.error("Failed to prune old data:", err);
+        }
+
+        if (mounted) {
+          // Seed the persistence service with previous stream totals from DB
+          seedPreviousTotals();
           setIsReady(true);
           setAppRunId(getAppRunId());
         }
@@ -123,7 +94,7 @@ export function StorageProvider({ children }: StorageProviderProps) {
       const now = Date.now();
       const filtered = snapshots.filter((s) => {
         const lastTs = lastProviderSnapshotRef.current.get(s.provider) ?? 0;
-        return now - lastTs >= SNAPSHOT_INTERVAL_MS;
+        return now - lastTs >= PROVIDER_SNAPSHOT_INTERVAL_MS;
       });
 
       if (filtered.length === 0) return;
@@ -153,82 +124,6 @@ export function StorageProvider({ children }: StorageProviderProps) {
     [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);
-        }
-
-        capMapSize(lastSessionSnapshotRef.current, MAX_TRACKED_SESSIONS);
-        capMapSize(previousTotalsRef.current, MAX_TRACKED_STREAMS);
-
-        return snapshotId;
-      } catch (err) {
-        console.error("Failed to record agent session:", err);
-        return null;
-      }
-    },
-    [isReady, demoMode],
-  );
-
   useEffect(() => {
     if (!demoMode || !isReady || !simulator) return;
 
@@ -239,15 +134,32 @@ export function StorageProvider({ children }: StorageProviderProps) {
     return () => clearInterval(interval);
   }, [demoMode, isReady, simulator]);
 
+  // Periodic data retention pruning (every hour)
+  useEffect(() => {
+    if (demoMode || !isReady) return;
+
+    const intervalId = setInterval(() => {
+      try {
+        const result = pruneOldData();
+        if (result.agentSessionSnapshots > 0 || result.providerSnapshots > 0) {
+          incrementalVacuum();
+        }
+      } catch {
+        // Silently ignore periodic prune failures
+      }
+    }, PRUNE_INTERVAL_MS);
+
+    return () => clearInterval(intervalId);
+  }, [demoMode, isReady]);
+
   const value: StorageContextValue = useMemo(
     () => ({
       isReady,
       appRunId,
       recordProviderSnapshots,
       recordUsageEvents,
-      recordAgentSession,
     }),
-    [isReady, appRunId, recordProviderSnapshots, recordUsageEvents, recordAgentSession],
+    [isReady, appRunId, recordProviderSnapshots, recordUsageEvents],
   );
 
   return <StorageContext.Provider value={value}>{children}</StorageContext.Provider>;

package/src/tui/contexts/ThemeContext.tsx

@@ -1,12 +1,12 @@
-import { createContext, type ReactNode, useContext, useState } from "react";
-import { tokyoNightTheme } from "@/plugins/themes/tokyo-night.ts";
 import type {
   ColorScheme,
   ColorSchemePreference,
   ThemeColors,
   ThemeComponents,
   ThemePlugin,
-} from "@/plugins/types/theme.ts";
+} from "@tokentop/plugin-sdk";
+import { createContext, type ReactNode, useContext, useState } from "react";
+import { tokyoNightTheme } from "@/plugins/themes/tokyo-night.ts";
 
 interface ThemeContextValue {
   theme: ThemePlugin;

package/src/tui/hooks/useExitAnimation.ts

@@ -43,6 +43,10 @@ export function useExitAnimation<T>(
     for (const [key, entry] of exitingRef.current) {
       if (now - entry.startTime >= durationMs) {
         exitingRef.current.delete(key);
+        // Also clean from prev refs so the render-time diff
+        // doesn't re-add them on the next forceUpdate render.
+        prevKeysRef.current.delete(key);
+        prevItemsRef.current.delete(key);
       } else {
         anyActive = true;
       }

package/src/tui/hooks/useSessionEnrichedProviders.ts

@@ -1,6 +1,6 @@
+import type { ProviderUsageData } from "@tokentop/plugin-sdk";
 import { useMemo } from "react";
 import type { AgentSessionAggregate } from "@/agents/types.ts";
-import type { ProviderUsageData } from "@/plugins/types/provider.ts";
 import type { ProviderState } from "../contexts/PluginContext.tsx";
 
 interface ProviderSessionTotals {

package/src/tui/views/Dashboard.tsx

@@ -1,6 +1,6 @@
 import type { BoxRenderable, InputRenderable, ScrollBoxRenderable } from "@opentui/core";
 import { useKeyboard, useTerminalDimensions } from "@opentui/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { GhostProviderCard } from "../components/GhostProviderCard.tsx";
 import { ProviderAggregateStrip } from "../components/ProviderAggregateStrip.tsx";
 import { ProviderCard } from "../components/ProviderCard.tsx";
@@ -39,6 +39,7 @@ export function Dashboard() {
   const isFilteringRef = useRef(isFiltering);
   const expandedIndexRef = useRef(expandedIndex);
   const focusedIndexRef = useRef(focusedIndex);
+  const selectedProviderIdRef = useRef<string | null>(null);
 
   useEffect(() => {
     isFilteringRef.current = isFiltering;
@@ -49,7 +50,6 @@ export function Dashboard() {
   useEffect(() => {
     focusedIndexRef.current = focusedIndex;
   }, [focusedIndex]);
-
   useEffect(() => {
     setInputFocused(isFiltering);
     return () => setInputFocused(false);
@@ -80,7 +80,7 @@ export function Dashboard() {
     return Math.max(primary, secondary);
   }, []);
 
-  const providerList = Array.from(providers.values());
+  const providerList = useMemo(() => Array.from(providers.values()), [providers]);
 
   const filteredAndSortedProviders = useMemo(() => {
     let result = providerList.filter((p) => p.configured);
@@ -127,6 +127,43 @@ export function Dashboard() {
   const configured = filteredAndSortedProviders;
   const unconfigured = useMemo(() => providerList.filter((p) => !p.configured), [providerList]);
 
+  // Stabilize selection across re-sorts: track selected provider by ID
+  // so the highlight follows the same provider when live data causes reordering.
+  useLayoutEffect(() => {
+    if (focusedIndex === null) return;
+
+    if (selectedProviderIdRef.current && focusedIndex < configured.length) {
+      // Early return if current index already points to tracked provider
+      // (prevents infinite re-render loop when providerList creates new array refs)
+      if (configured[focusedIndex]?.plugin.id === selectedProviderIdRef.current) return;
+
+      const newIndex = configured.findIndex((p) => p.plugin.id === selectedProviderIdRef.current);
+      if (newIndex !== -1) {
+        if (newIndex !== focusedIndex) setFocusedIndex(newIndex);
+        return;
+      }
+      selectedProviderIdRef.current = null;
+    }
+
+    const includeUnconfigured = viewMode === "cards" && showUnconfigured;
+    const total = configured.length + (includeUnconfigured ? unconfigured.length : 0);
+    if (total === 0) {
+      setFocusedIndex(null);
+    } else if (focusedIndex >= total) {
+      setFocusedIndex(total - 1);
+    }
+  }, [filteredAndSortedProviders, unconfigured.length, showUnconfigured, viewMode]);
+
+  // Record which provider the user selected
+  useEffect(() => {
+    if (focusedIndex !== null && focusedIndex < configured.length) {
+      const provider = configured[focusedIndex];
+      if (provider) selectedProviderIdRef.current = provider.plugin.id;
+    } else {
+      selectedProviderIdRef.current = null;
+    }
+  }, [focusedIndex, configured]);
+
   const cycleFocus = useCallback(
     (direction: 1 | -1) => {
       const includeUnconfigured = viewMode === "cards" && showUnconfigured;