@tokentop/ttop 0.3.0 → 0.4.0

package/src/tui/contexts/AgentSessionContext.tsx

@@ -14,11 +14,11 @@ 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

@@ -14,6 +14,7 @@ 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 { AgentPlugin } from "@/plugins/types/agent.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";
@@ -43,6 +44,7 @@ export interface ProviderState {
 
 interface PluginContextValue {
   providers: Map<string, ProviderState>;
+  agents: AgentPlugin[];
   themes: ThemePlugin[];
   notifications: NotificationPlugin[];
   isInitialized: boolean;
@@ -87,6 +89,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 +119,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 +225,7 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
       notificationBus.registerPlugins(notificationPlugins);
 
       setProviders(providerStates);
+      setAgents(agentPlugins);
       setThemes(themePlugins);
       setNotifications(notificationPlugins);
       setIsInitialized(true);
@@ -444,6 +449,7 @@ export function PluginProvider({ children, cliPlugins }: PluginProviderProps) {
 
   const value: PluginContextValue = {
     providers,
+    agents,
     themes,
     notifications,
     isInitialized,

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/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/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;

package/src/tui/views/ProjectsView.tsx

@@ -1202,6 +1202,7 @@ export function ProjectsView() {
   const [isFiltering, setIsFiltering] = useState(false);
   const scrollOffsetRef = useRef(0);
   const scrollboxRef = useRef<ScrollBoxRenderable>(null);
+  const selectedProjectPathRef = useRef<string | null>(null);
 
   // Aggregate projects
   const projectStats = useMemo(
@@ -1252,16 +1253,38 @@ export function ProjectsView() {
   // Visible columns
   const visibleColumns: ColumnSpec[] = useMemo(() => getVisibleColumns(termWidth), [termWidth]);
 
-  // Clamp selection
-  useEffect(() => {
+  // Stabilize selection across re-sorts: track selected project by path
+  // so the highlight follows the same project when live data causes reordering.
+  useLayoutEffect(() => {
     if (sortedProjects.length === 0) {
-      if (selectedIndex !== 0) setSelectedIndex(0);
+      setSelectedIndex(0);
       scrollOffsetRef.current = 0;
       scrollboxRef.current?.scrollTo(0);
-    } else if (selectedIndex >= sortedProjects.length) {
-      setSelectedIndex(sortedProjects.length - 1);
+      selectedProjectPathRef.current = null;
+      return;
+    }
+
+    if (selectedProjectPathRef.current) {
+      const newIndex = sortedProjects.findIndex((p) => p.path === selectedProjectPathRef.current);
+      if (newIndex !== -1) {
+        setSelectedIndex(newIndex);
+        return;
+      }
+      // Tracked project was filtered out — fall through to clamp
+      selectedProjectPathRef.current = null;
+    }
+
+    // Clamp to valid range (functional update avoids selectedIndex in deps)
+    setSelectedIndex((prev) => Math.min(prev, sortedProjects.length - 1));
+  }, [sortedProjects]);
+
+  // Record which project the user selected
+  useEffect(() => {
+    const project = sortedProjects[selectedIndex];
+    if (project) {
+      selectedProjectPathRef.current = project.path;
     }
-  }, [sortedProjects.length, selectedIndex]);
+  }, [selectedIndex, sortedProjects]);
 
   // Scroll to keep selected row visible
   const visibleRows = useMemo(() => {

package/src/tui/views/RealTimeDashboard.tsx

@@ -64,6 +64,7 @@ export function RealTimeDashboard() {
   const [sortField, setSortField] = useState<"cost" | "tokens" | "time">("cost");
   const [pendingG, setPendingG] = useState(false);
   const scrollOffsetRef = useRef(0);
+  const selectedSessionIdRef = useRef<string | null>(null);
   const setScrollOffset = useCallback((val: number) => {
     scrollOffsetRef.current = val;
     sessionsScrollboxRef.current?.scrollTo(val);
@@ -192,19 +193,39 @@ export function RealTimeDashboard() {
     return result;
   }, [baseFilteredSessions, activeDriverFilter, driverDimension, sortField]);
 
-  useEffect(() => {
+  // Stabilize selection across re-sorts: track selected session by ID
+  // so the highlight follows the same session when live data causes reordering.
+  useLayoutEffect(() => {
     if (processedSessions.length === 0) {
-      if (selectedRow !== 0) setSelectedRow(0);
-      if (scrollOffsetRef.current !== 0) setScrollOffset(0);
+      setSelectedRow(0);
+      setScrollOffset(0);
+      selectedSessionIdRef.current = null;
       return;
     }
 
-    const maxRow = processedSessions.length - 1;
-    if (selectedRow > maxRow) {
-      setSelectedRow(maxRow);
-      return;
+    if (selectedSessionIdRef.current) {
+      const newIndex = processedSessions.findIndex(
+        (s) => s.sessionId === selectedSessionIdRef.current,
+      );
+      if (newIndex !== -1) {
+        setSelectedRow(newIndex);
+        return;
+      }
+      // Tracked session was filtered out — fall through to clamp
+      selectedSessionIdRef.current = null;
+    }
+
+    // Clamp to valid range (functional update avoids selectedRow in deps)
+    setSelectedRow((prev) => Math.min(prev, processedSessions.length - 1));
+  }, [processedSessions, setScrollOffset]);
+
+  // Record which session the user selected (runs after navigation and stabilization)
+  useEffect(() => {
+    const session = processedSessions[selectedRow];
+    if (session) {
+      selectedSessionIdRef.current = session.sessionId;
     }
-  }, [processedSessions.length, selectedRow, setScrollOffset]);
+  }, [selectedRow, processedSessions]);
 
   useLayoutEffect(() => {
     if (!sessionsScrollboxRef.current || processedSessions.length === 0) return;

package/src/tui/views/SettingsView.tsx

@@ -284,7 +284,7 @@ export function SettingsView() {
   const colors = useColors();
   const { showToast } = useToastContext();
   const { config, isLoading, updateConfig, resetToDefaults, saveNow } = useConfig();
-  const { providers, notifications } = usePlugins();
+  const { providers, agents, themes, notifications } = usePlugins();
   const { demoMode, seed, preset } = useDemoMode();
   const { width: terminalWidth } = useTerminalDimensions();
 
@@ -293,9 +293,14 @@ export function SettingsView() {
   const [focusedPane, setFocusedPane] = useState<"categories" | "settings">("settings");
 
   const pluginSettings = useMemo(() => {
-    const allPlugins = [...Array.from(providers.values()).map((p) => p.plugin), ...notifications];
+    const allPlugins = [
+      ...Array.from(providers.values()).map((p) => p.plugin),
+      ...agents,
+      ...themes,
+      ...notifications,
+    ];
     return buildPluginSettings(allPlugins);
-  }, [providers, notifications, config]);
+  }, [providers, agents, themes, notifications]);
 
   const allSettings = useMemo(() => [...SETTINGS, ...pluginSettings], [pluginSettings]);
   const categorySettings = allSettings.filter((s) => s.category === selectedCategory);

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.3.0"; // x-release-please-version
+export const VERSION = "0.4.0"; // x-release-please-version