@tokentop/ttop 0.4.0 → 0.6.0

package/src/tui/components/SessionsTable.tsx

@@ -7,6 +7,8 @@ import { useAnimatedValue } from "../hooks/useAnimatedValue.ts";
 import { applyEntranceFade, useEntranceAnimation } from "../hooks/useEntranceAnimation.ts";
 import { useExitAnimation } from "../hooks/useExitAnimation.ts";
 import { interpolateColor, useValueFlash } from "../hooks/useValueFlash.ts";
+import type { SortDirection, SortField } from "../types/sort.ts";
+import { getSortDirectionIndicator, getSortFieldLabel } from "../types/sort.ts";
 
 interface SessionsTableProps {
   sessions: AgentSessionAggregate[];
@@ -17,6 +19,8 @@ interface SessionsTableProps {
   focusedPanel: "sessions" | "sidebar" | "limits";
   windowLabel: string;
   getProviderColor: (id: string) => string;
+  sortField: SortField;
+  sortDirection: SortDirection;
 }
 
 function extractRepoName(projectPath: string | null): string {
@@ -154,6 +158,7 @@ const SessionRow = memo(function SessionRow({
   const effectiveTokens = session.totals.input + session.totals.output;
   const cacheRead = session.totals.cacheRead ?? 0;
   const hasCacheData = cacheRead > 0;
+  const isEstimated = session.metadata?.isEstimated === true;
   const costUsd = session.totalCostUsd ?? 0;
 
   const animatedTokens = useAnimatedValue(effectiveTokens, { durationMs: 300, precision: 0 });
@@ -260,10 +265,11 @@ const SessionRow = memo(function SessionRow({
           {String(session.requestCount).padStart(4)}
         </text>
         <text width={14} height={1} {...bgProp}>
-          <span fg={tokenColor}>{formatTokensVal(animatedTokens).padStart(7)}</span>
-          <span fg={colors.textMuted}>
-            {hasCacheData ? ` ↯${formatCacheBadge(cacheRead)}` : ""}
+          <span fg={tokenColor}>
+            {isEstimated ? "≈" : " "}
+            {formatTokensVal(animatedTokens).padStart(7)}
           </span>
+          <span fg={textMutedColor}>{hasCacheData ? ` ↯${formatCacheBadge(cacheRead)}` : ""}</span>
         </text>
         <text width={8} height={1} fg={costColor} {...bgProp}>
           {costDisplay.padStart(7)}
@@ -315,8 +321,11 @@ const SessionRow = memo(function SessionRow({
           : modelWithCount.padEnd(narrowModelMaxChars)}
       </text>
       <text width={narrowTokenW} height={1} {...bgProp}>
-        <span fg={tokenColor}>{formatTokensVal(animatedTokens).padStart(7)}</span>
-        <span fg={colors.textMuted}>
+        <span fg={tokenColor}>
+          {isEstimated ? "≈" : " "}
+          {formatTokensVal(animatedTokens).padStart(7)}
+        </span>
+        <span fg={textMutedColor}>
           {hasCacheData && showCacheBadge ? ` ↯${formatCacheBadge(cacheRead)}` : ""}
         </span>
       </text>
@@ -348,6 +357,8 @@ export const SessionsTable = forwardRef(function SessionsTable(
     focusedPanel,
     windowLabel,
     getProviderColor,
+    sortField,
+    sortDirection,
   }: SessionsTableProps,
   ref: Ref<ScrollBoxRenderable>,
 ) {
@@ -384,16 +395,18 @@ export const SessionsTable = forwardRef(function SessionsTable(
   const { items: animatedSessions, isBulkChange } = useExitAnimation(sessions, {
     durationMs: 500,
     getKey: getSessionKey,
+    bulkThreshold: 100,
   });
 
-  // Track bulk changes to force scrollbox remount (clears ghost text)
-  const bulkCountRef = useRef(0);
-  if (isBulkChange) bulkCountRef.current++;
-
   let activeIndex = 0;
   const selectedSession = sessions[selectedRow] ?? null;
   const inspector = selectedSession ? getInspectorData(selectedSession) : null;
 
+  // Sort indicator helpers for column headers
+  const sortIndicator = (field: string) =>
+    sortField === field ? (sortDirection === "desc" ? "▼" : "▲") : " ";
+  const sortColor = (field: string) => (sortField === field ? colors.primary : colors.textMuted);
+
   return (
     <box
       flexDirection="column"
@@ -411,9 +424,15 @@ export const SessionsTable = forwardRef(function SessionsTable(
         justifyContent="space-between"
         overflow="hidden"
       >
-        <text height={1} fg={colors.textMuted}>
-          SESSIONS{filterQuery ? ` [${isFiltering ? "Filter: " : ""}${filterQuery}]` : ""}
-          {isLoading ? " ⟳" : "  "}
+        <text height={1}>
+          <span fg={colors.textMuted}>SESSIONS </span>
+          <span fg={colors.primary}>
+            Sort: {getSortFieldLabel(sortField)} {getSortDirectionIndicator(sortDirection)}
+          </span>
+          <span fg={colors.textMuted}>
+            {filterQuery ? ` [${isFiltering ? "Filter: " : ""}${filterQuery}]` : ""}
+            {isLoading ? " ⟳" : "  "}
+          </span>
         </text>
         <text height={1} fg={colors.textMuted}>
           [{windowLabel}] {sessions.length} sessions
@@ -428,36 +447,36 @@ export const SessionsTable = forwardRef(function SessionsTable(
           <text width={8} height={1} fg={colors.textMuted}>
             ID{" "}
           </text>
-          <text width={12} height={1} fg={colors.textMuted}>
-            AGENT{" "}
+          <text width={12} height={1} fg={sortColor("agent")}>
+            AGENT{sortIndicator("agent")}
           </text>
           <text width={18} height={1} fg={colors.textMuted}>
             MODEL{" "}
           </text>
-          <text width={5} height={1} fg={colors.textMuted}>
-            {" "}
+          <text width={5} height={1} fg={sortColor("requests")}>
+            {sortIndicator("requests")}
             REQ{" "}
           </text>
-          <text width={14} height={1} fg={colors.textMuted}>
-            {" "}
+          <text width={14} height={1} fg={sortColor("tokens")}>
+            {sortIndicator("tokens")}
             TOKENS{" "}
           </text>
-          <text width={8} height={1} fg={colors.textMuted}>
-            {" "}
+          <text width={8} height={1} fg={sortColor("cost")}>
+            {sortIndicator("cost")}
             COST{" "}
           </text>
-          <text width={14} height={1} fg={colors.textMuted}>
-            PROJECT{" "}
+          <text width={14} height={1} fg={sortColor("project")}>
+            PROJECT{sortIndicator("project")}
           </text>
           <text flexGrow={1} height={1} fg={colors.textMuted}>
             NAME
           </text>
-          <text width={6} height={1} fg={colors.textMuted}>
-            {" "}
+          <text width={6} height={1} fg={sortColor("duration")}>
+            {sortIndicator("duration")}
             DUR{" "}
           </text>
-          <text width={5} height={1} fg={colors.textMuted}>
-            LAST{" "}
+          <text width={5} height={1} fg={sortColor("time")}>
+            LAST{sortIndicator("time")}
           </text>
           <text width={2} height={1} fg={colors.textMuted}>
             {" "}
@@ -468,24 +487,30 @@ export const SessionsTable = forwardRef(function SessionsTable(
           <text width={2} height={1} fg={colors.textMuted}>
             {" "}
           </text>
-          <text width={9} height={1} fg={colors.textMuted}>
-            AGENT{" "}
+          <text width={9} height={1} fg={sortColor("agent")}>
+            AGENT{sortIndicator("agent")}
           </text>
           <text width={isTight ? 13 : 16} height={1} fg={colors.textMuted}>
             {isTight ? "MODEL        " : "MODEL           "}
           </text>
-          <text width={isTight ? 9 : 14} height={1} fg={colors.textMuted}>
-            {isTight ? "  TOKENS " : " TOKENS        "}
+          <text width={isTight ? 9 : 14} height={1} fg={sortColor("tokens")}>
+            {isTight
+              ? `${sortIndicator("tokens")} TOKENS `
+              : `${sortIndicator("tokens")}TOKENS        `}
           </text>
-          <text width={7} height={1} fg={colors.textMuted}>
-            {" "}
+          <text width={7} height={1} fg={sortColor("cost")}>
+            {sortIndicator("cost")}
             COST{" "}
           </text>
-          <text flexGrow={1} height={1} fg={colors.textMuted}>
-            {nameMaxWidth >= 7 ? "PROJECT" : nameMaxWidth >= 4 ? "PROJ" : ""}
+          <text flexGrow={1} height={1} fg={sortColor("project")}>
+            {nameMaxWidth >= 7
+              ? `PROJECT${sortIndicator("project")}`
+              : nameMaxWidth >= 4
+                ? "PROJ"
+                : ""}
           </text>
-          <text width={5} height={1} fg={colors.textMuted}>
-            LAST{" "}
+          <text width={5} height={1} fg={sortColor("time")}>
+            LAST{sortIndicator("time")}
           </text>
           <text width={2} height={1} fg={colors.textMuted}>
             {" "}
@@ -493,7 +518,7 @@ export const SessionsTable = forwardRef(function SessionsTable(
         </box>
       )}
 
-      <scrollbox key={`sessions-sb-${bulkCountRef.current}`} ref={ref} flexGrow={1}>
+      <scrollbox ref={ref} flexGrow={1}>
         <box flexDirection="column" flexGrow={1}>
           {sessions.length === 0 && animatedSessions.length === 0 && (
             <box paddingLeft={2}>

package/src/tui/components/SettingsModal.tsx

@@ -1,7 +1,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 type { ConfigField, PluginType } from "@/plugins/types/base.ts";
 import { formatBudgetDisplay, parseCurrencyInput } from "@/utils/currency.ts";
 import { useConfig } from "../contexts/ConfigContext.tsx";
 import { useDemoMode } from "../contexts/DemoModeContext.tsx";

package/src/tui/components/Skeleton.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useColors } from "../contexts/ThemeContext.tsx";
+import { animationTick } from "../hooks/useAnimationTick.ts";
 import { interpolateColor } from "../hooks/useValueFlash.ts";
 
 const SHIMMER_INTERVAL = 50;
@@ -12,13 +13,15 @@ interface ShimmerSegment {
 
 function useShimmer(length: number, baseColor: string, highlightColor: string): ShimmerSegment[] {
   const [phase, setPhase] = useState(0);
+  const lastAdvanceRef = useRef(Date.now());
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setPhase((p) => (p + 1) % (length + SHIMMER_WAVE_LENGTH));
-    }, SHIMMER_INTERVAL);
-
-    return () => clearInterval(interval);
+    return animationTick.subscribe((now) => {
+      if (now - lastAdvanceRef.current >= SHIMMER_INTERVAL) {
+        lastAdvanceRef.current = now;
+        setPhase((p) => (p + 1) % (length + SHIMMER_WAVE_LENGTH));
+      }
+    });
   }, [length]);
 
   const segments: ShimmerSegment[] = [];

package/src/tui/components/SortOverlay.tsx

@@ -0,0 +1,167 @@
+import { useKeyboard } from "@opentui/react";
+import { useEffect, useState } from "react";
+import { useInputFocus } from "../contexts/InputContext.tsx";
+import { useColors } from "../contexts/ThemeContext.tsx";
+import type { SortDirection, SortFieldDef } from "../types/sort.ts";
+import { getSortDirectionIndicator } from "../types/sort.ts";
+import { ModalBackdrop, Z_INDEX } from "./ModalBackdrop.tsx";
+
+interface SortOverlayProps<F extends string = string> {
+  fields: readonly SortFieldDef<F>[];
+  currentField: F;
+  currentDirection: SortDirection;
+  onSelect: (field: F, direction: SortDirection) => void;
+  onClose: () => void;
+}
+
+export function SortOverlay<F extends string>({
+  fields,
+  currentField,
+  currentDirection,
+  onSelect,
+  onClose,
+}: SortOverlayProps<F>) {
+  const colors = useColors();
+  const { setInputFocused } = useInputFocus();
+
+  const [highlightedIndex, setHighlightedIndex] = useState(() => {
+    const idx = fields.findIndex((f) => f.id === currentField);
+    return idx === -1 ? 0 : idx;
+  });
+
+  const [pendingDirection, setPendingDirection] = useState<SortDirection>(currentDirection);
+
+  // Capture input focus to block App.tsx and view-level keyboard handlers
+  useEffect(() => {
+    setInputFocused(true);
+    return () => setInputFocused(false);
+  }, [setInputFocused]);
+
+  useKeyboard((key) => {
+    // Navigation
+    if (key.name === "up" || key.name === "k") {
+      setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : fields.length - 1));
+      return;
+    }
+
+    if (key.name === "down" || key.name === "j") {
+      setHighlightedIndex((prev) => (prev < fields.length - 1 ? prev + 1 : 0));
+      return;
+    }
+
+    // Toggle direction in-place
+    if (key.name === "space" || key.sequence === " ") {
+      setPendingDirection((prev) => (prev === "asc" ? "desc" : "asc"));
+      return;
+    }
+
+    // Apply highlighted selection
+    if (key.name === "return") {
+      const field = fields[highlightedIndex];
+      if (field) {
+        onSelect(field.id, pendingDirection);
+      }
+      return;
+    }
+
+    // Cancel
+    if (key.name === "escape") {
+      onClose();
+      return;
+    }
+
+    // Number quick-select: 1-9 selects field by position
+    // If already sorting by that field, flip direction instead
+    if (key.sequence && key.sequence.length === 1) {
+      const digit = key.sequence.charCodeAt(0) - 48; // '0' = 48
+      if (digit >= 1 && digit <= fields.length) {
+        const field = fields[digit - 1];
+        if (field) {
+          const direction =
+            field.id === currentField
+              ? currentDirection === "desc"
+                ? "asc"
+                : "desc"
+              : field.defaultDirection;
+          onSelect(field.id, direction);
+        }
+        return;
+      }
+    }
+  });
+
+  return (
+    <ModalBackdrop zIndex={Z_INDEX.MODAL} onBackdropClick={onClose}>
+      <box
+        width={34}
+        flexDirection="column"
+        border
+        borderStyle="double"
+        borderColor={colors.primary}
+        backgroundColor={colors.background}
+        overflow="hidden"
+      >
+        {/* Header */}
+        <box height={1} justifyContent="center">
+          <text fg={colors.primary} height={1}>
+            Sort By
+          </text>
+        </box>
+
+        {/* Sort Fields */}
+        <box flexDirection="column">
+          {fields.map((field, index) => {
+            const isHighlighted = index === highlightedIndex;
+            const isCurrent = field.id === currentField;
+
+            const textColor = isHighlighted ? colors.background : colors.text;
+            const numberColor = isHighlighted ? colors.background : colors.textMuted;
+            const markerColor = isHighlighted ? colors.background : colors.primary;
+
+            return (
+              <box
+                key={field.id}
+                flexDirection="row"
+                height={1}
+                paddingLeft={1}
+                paddingRight={1}
+                justifyContent="space-between"
+                {...(isHighlighted ? { backgroundColor: colors.primary } : {})}
+              >
+                {/* Left: number + marker + label + direction */}
+                <text height={1}>
+                  <span fg={numberColor}>{index + 1} </span>
+                  <span fg={markerColor}>{isCurrent ? "● " : "  "}</span>
+                  <span fg={textColor}>{field.label}</span>
+                  {isHighlighted ? (
+                    <span fg={colors.warning}> {getSortDirectionIndicator(pendingDirection)}</span>
+                  ) : null}
+                </text>
+              </box>
+            );
+          })}
+        </box>
+
+        {/* Footer Hints */}
+        <box flexDirection="column" paddingLeft={1} paddingRight={1} marginTop={1}>
+          <box flexDirection="row" justifyContent="space-between" height={1}>
+            <text fg={colors.textSubtle} height={1}>
+              ↑↓ navigate
+            </text>
+            <text fg={colors.textSubtle} height={1}>
+              Space toggle
+            </text>
+          </box>
+          <box flexDirection="row" justifyContent="space-between" height={1}>
+            <text fg={colors.textSubtle} height={1}>
+              Enter apply
+            </text>
+            <text fg={colors.textSubtle} height={1}>
+              Esc cancel
+            </text>
+          </box>
+        </box>
+      </box>
+    </ModalBackdrop>
+  );
+}

package/src/tui/components/Spinner.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { animationTick } from "../hooks/useAnimationTick.ts";
 
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const FRAME_INTERVAL = 80;
@@ -9,13 +10,15 @@ interface SpinnerProps {
 
 export function Spinner({ color }: SpinnerProps) {
   const [frameIndex, setFrameIndex] = useState(0);
+  const lastAdvanceRef = useRef(Date.now());
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setFrameIndex((i) => (i + 1) % SPINNER_FRAMES.length);
-    }, FRAME_INTERVAL);
-
-    return () => clearInterval(interval);
+    return animationTick.subscribe((now) => {
+      if (now - lastAdvanceRef.current >= FRAME_INTERVAL) {
+        lastAdvanceRef.current = now;
+        setFrameIndex((i) => (i + 1) % SPINNER_FRAMES.length);
+      }
+    });
   }, []);
 
   return <text {...(color ? { fg: color } : {})}>{SPINNER_FRAMES[frameIndex]}</text>;
@@ -23,13 +26,15 @@ export function Spinner({ color }: SpinnerProps) {
 
 export function useSpinner(): string {
   const [frameIndex, setFrameIndex] = useState(0);
+  const lastAdvanceRef = useRef(Date.now());
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setFrameIndex((i) => (i + 1) % SPINNER_FRAMES.length);
-    }, FRAME_INTERVAL);
-
-    return () => clearInterval(interval);
+    return animationTick.subscribe((now) => {
+      if (now - lastAdvanceRef.current >= FRAME_INTERVAL) {
+        lastAdvanceRef.current = now;
+        setFrameIndex((i) => (i + 1) % SPINNER_FRAMES.length);
+      }
+    });
   }, []);
 
   return SPINNER_FRAMES[frameIndex] ?? "⠋";

package/src/tui/components/ThemePicker.tsx

@@ -1,6 +1,6 @@
 import { useKeyboard } from "@opentui/react";
+import type { ColorSchemePreference, ThemePlugin } from "@tokentop/plugin-sdk";
 import { useEffect, useMemo, useState } from "react";
-import type { ColorSchemePreference, ThemePlugin } from "@/plugins/types/theme.ts";
 import { useColors } from "../contexts/ThemeContext.tsx";
 
 interface ThemePickerProps {

package/src/tui/contexts/AgentSessionContext.tsx

@@ -1,3 +1,4 @@
+import type { AgentPlugin, SessionParseOptions } from "@tokentop/plugin-sdk";
 import {
   createContext,
   type ReactNode,
@@ -7,13 +8,12 @@ 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";
 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";
@@ -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,