@tokentop/ttop 0.5.0 → 0.6.0

package/src/plugins/providers/openai-api.ts

@@ -49,6 +49,15 @@ interface CostsResponse {
   has_more: boolean;
 }
 
+class RateLimitError extends Error {
+  readonly retryAfterMs: number;
+  constructor(retryAfterMs: number) {
+    super(`Rate limited. Retry after ${retryAfterMs / 1000}s.`);
+    this.name = "RateLimitError";
+    this.retryAfterMs = retryAfterMs;
+  }
+}
+
 export const openaiApiPlugin: ProviderPlugin = {
   apiVersion: 2,
   id: "openai-api",
@@ -145,6 +154,21 @@ export const openaiApiPlugin: ProviderPlugin = {
         fetchCosts(http, adminKey, oneDayAgo),
       ]);
 
+      // If either helper hit a 429, surface rate-limit info immediately
+      for (const settled of [usageResult, costsResult]) {
+        if (settled.status === "rejected" && settled.reason instanceof RateLimitError) {
+          log.warn("Rate limited by OpenAI API", { retryAfterMs: settled.reason.retryAfterMs });
+          return {
+            planType: "API",
+            allowed: true,
+            fetchedAt: Date.now(),
+            error: settled.reason.message,
+            rateLimited: true,
+            retryAfterMs: settled.reason.retryAfterMs,
+          };
+        }
+      }
+
       const result: ProviderUsageData = {
         planType: "API",
         allowed: true,
@@ -208,6 +232,16 @@ export const openaiApiPlugin: ProviderPlugin = {
 
       return result;
     } catch (err) {
+      if (err instanceof RateLimitError) {
+        return {
+          planType: "API",
+          allowed: true,
+          fetchedAt: Date.now(),
+          error: err.message,
+          rateLimited: true,
+          retryAfterMs: err.retryAfterMs,
+        };
+      }
       const msg = err instanceof Error ? err.message : String(err);
       log.error("OpenAI fetch error", { error: msg });
 
@@ -236,6 +270,15 @@ async function fetchCompletionsUsage(
   });
 
   if (!response.ok) {
+    if (response.status === 429) {
+      const retryAfterHeader = response.headers.get("retry-after");
+      const parsedRetryAfter = retryAfterHeader
+        ? Number.parseInt(retryAfterHeader, 10)
+        : Number.NaN;
+      const retrySec =
+        Number.isFinite(parsedRetryAfter) && parsedRetryAfter > 0 ? parsedRetryAfter : 300;
+      throw new RateLimitError(retrySec * 1000);
+    }
     if (response.status === 403) {
       return null;
     }
@@ -260,6 +303,15 @@ async function fetchCosts(
   });
 
   if (!response.ok) {
+    if (response.status === 429) {
+      const retryAfterHeader = response.headers.get("retry-after");
+      const parsedRetryAfter = retryAfterHeader
+        ? Number.parseInt(retryAfterHeader, 10)
+        : Number.NaN;
+      const retrySec =
+        Number.isFinite(parsedRetryAfter) && parsedRetryAfter > 0 ? parsedRetryAfter : 300;
+      throw new RateLimitError(retrySec * 1000);
+    }
     if (response.status === 403) {
       return null;
     }

package/src/plugins/providers/perplexity.ts

@@ -135,11 +135,20 @@ export const perplexityPlugin: ProviderPlugin = {
       }
 
       if (response.status === 429) {
+        const retryAfterHeader = response.headers.get("retry-after");
+        const parsedRetryAfter = retryAfterHeader
+          ? Number.parseInt(retryAfterHeader, 10)
+          : Number.NaN;
+        const retrySec =
+          Number.isFinite(parsedRetryAfter) && parsedRetryAfter > 0 ? parsedRetryAfter : 300;
+        log.warn("Rate limited by Perplexity API", { retryAfterHeader, retryAfterSec: retrySec });
         return {
           planType: "API",
           allowed: true,
           fetchedAt: Date.now(),
-          error: "Rate limited",
+          error: `Rate limited. Retry after ${retrySec}s.`,
+          rateLimited: true,
+          retryAfterMs: retrySec * 1000,
         };
       }
 

package/src/plugins/providers/zai.ts

@@ -124,6 +124,22 @@ export const zaiCodingPlanPlugin: ProviderPlugin = {
       if (!response.ok) {
         log.warn("Failed to fetch Z.ai usage", { status: response.status });
 
+        if (response.status === 429) {
+          const retryAfterHeader = response.headers.get("retry-after");
+          const parsedRetryAfter = retryAfterHeader
+            ? Number.parseInt(retryAfterHeader, 10)
+            : Number.NaN;
+          const retrySec =
+            Number.isFinite(parsedRetryAfter) && parsedRetryAfter > 0 ? parsedRetryAfter : 300;
+          log.warn("Rate limited by Z.ai API", { retryAfterHeader, retryAfterSec: retrySec });
+          return {
+            fetchedAt: Date.now(),
+            error: `Rate limited. Retry after ${retrySec}s.`,
+            rateLimited: true,
+            retryAfterMs: retrySec * 1000,
+          };
+        }
+
         if (response.status === 401 || response.status === 403) {
           return {
             fetchedAt: Date.now(),

package/src/pricing/fallback.ts

@@ -57,6 +57,10 @@ export const FALLBACK_PRICING: Record<string, Record<string, ModelPricing>> = {
     "gemini-2.0-flash-lite": { input: 0.075, output: 0.3, source: "fallback" },
     "gemini-2.5-pro": { input: 1.25, output: 10, source: "fallback" },
     "gemini-2.5-flash": { input: 0.15, output: 0.6, source: "fallback" },
+    "gemini-3-flash-preview": { input: 0.5, output: 3, cacheRead: 0.05, source: "fallback" },
+    "gemini-3-pro-preview": { input: 2, output: 12, cacheRead: 0.2, source: "fallback" },
+    "gemini-3.1-pro-preview": { input: 2, output: 12, cacheRead: 0.2, source: "fallback" },
+    "gemini-3.1-flash-lite-preview": { input: 0.25, output: 1.5, source: "fallback" },
   },
 
   openrouter: {

package/src/tui/App.tsx

@@ -48,6 +48,7 @@ interface AppProps {
   demoSeed?: number;
   demoPreset?: DemoPreset;
   cliPlugins?: string[];
+  cliTheme?: string;
 }
 
 type View = "dashboard" | "providers" | "trends" | "projects";
@@ -55,7 +56,7 @@ type View = "dashboard" | "providers" | "trends" | "projects";
 function AppContent() {
   const renderer = useSafeRenderer();
   const colors = useColors();
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme, cliTheme } = useTheme();
   const { refreshAllProviders, isInitialized, themes } = usePlugins();
   const { info } = useLogs();
   const { toast, showToast, dismissToast } = useToastContext();
@@ -292,8 +293,10 @@ function AppContent() {
 
   useEffect(() => {
     if (themes.length === 0) return;
+    // CLI --theme flag takes priority over config
+    const themeId = cliTheme ?? config.display.theme;
     const resolved = resolveTheme(
-      config.display.theme,
+      themeId,
       config.display.colorScheme,
       themes,
       renderer?.themeMode ?? null,
@@ -301,7 +304,7 @@ function AppContent() {
     if (resolved.id !== theme.id) {
       setTheme(resolved);
     }
-  }, [themes, config.display.theme, config.display.colorScheme, renderer]);
+  }, [themes, cliTheme, config.display.theme, config.display.colorScheme, renderer]);
 
   useEffect(() => {
     if (isInitialized) {
@@ -364,23 +367,24 @@ function AppContent() {
   );
 }
 
-function ConfiguredApp({ cliPlugins }: { cliPlugins?: string[] }) {
+function ConfiguredApp({ cliPlugins, cliTheme }: { cliPlugins?: string[]; cliTheme?: string }) {
   const { config, isLoading } = useConfig();
 
   if (isLoading) {
     return null;
   }
 
-  const initialTheme = builtinThemeList.find((t) => t.id === config.display.theme);
+  const themeId = cliTheme ?? config.display.theme;
+  const initialTheme = builtinThemeList.find((t) => t.id === themeId);
   const themeProps = initialTheme ? { initialTheme } : {};
 
   return (
-    <ThemeProvider {...themeProps}>
+    <ThemeProvider {...themeProps} {...(cliTheme ? { cliTheme } : {})}>
       <TimeWindowProvider defaultWindow={config.display.defaultTimeWindow}>
         <ToastProvider>
           <PluginProvider {...(cliPlugins ? { cliPlugins } : {})}>
             <RealTimeActivityProvider>
-              <AgentSessionProvider autoRefresh={true} refreshInterval={1000}>
+              <AgentSessionProvider autoRefresh={true}>
                 <DashboardRuntimeProvider>
                   <DrawerProvider>
                     <AppContent />
@@ -401,6 +405,7 @@ export function App({
   demoSeed,
   demoPreset,
   cliPlugins,
+  cliTheme,
 }: AppProps) {
   const demoProviderProps: { demoMode: boolean; demoSeed?: number; demoPreset?: DemoPreset } = {
     demoMode,
@@ -414,7 +419,10 @@ export function App({
         <InputProvider>
           <StorageProvider>
             <ConfigProvider>
-              <ConfiguredApp {...(cliPlugins ? { cliPlugins } : {})} />
+              <ConfiguredApp
+                {...(cliPlugins ? { cliPlugins } : {})}
+                {...(cliTheme ? { cliTheme } : {})}
+              />
             </ConfigProvider>
           </StorageProvider>
         </InputProvider>

package/src/tui/components/HelpOverlay.tsx

@@ -59,7 +59,7 @@ export function HelpOverlay() {
           <text width={10} height={1} fg={colors.textMuted}>
             s
           </text>
-          <text height={1}>Sort</text>
+          <text height={1}>Sort menu</text>
         </box>
         <box flexDirection="row" height={1}>
           <text width={10} height={1} fg={colors.textMuted}>

package/src/tui/components/LimitGauge.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { getErrorCategoryDisplay, type ProviderErrorCategory } from "@/utils/error-category.ts";
 import { useColors } from "../contexts/ThemeContext.tsx";
 import { usePulse } from "../hooks/usePulse.ts";
 
@@ -8,6 +9,7 @@ interface LimitGaugeProps {
   color: string;
   ghost?: boolean;
   error?: string;
+  errorCategory?: ProviderErrorCategory;
   resetTime?: string;
   compact?: boolean;
   labelWidth?: number;
@@ -89,6 +91,7 @@ export function LimitGauge({
   color,
   ghost = false,
   error,
+  errorCategory,
   resetTime,
   compact = false,
   labelWidth = 12,
@@ -152,7 +155,12 @@ export function LimitGauge({
 
   if (error) {
     const displayLabel = truncateLabel(label, labelWidth);
-    const errorIcon = selected ? "▌" : "✗";
+
+    const display = errorCategory ? getErrorCategoryDisplay(errorCategory) : undefined;
+    const errColor = display?.isWarning ? colors.warning : colors.error;
+    const errLabel = display?.label ?? "ERR";
+    const errorIcon = selected ? "\u258C" : (display?.icon ?? "\u2717");
+
     return (
       <box
         height={1}
@@ -160,10 +168,10 @@ export function LimitGauge({
         {...(selected ? { backgroundColor: colors.borderMuted } : {})}
       >
         <text height={1}>
-          <span fg={selected ? colors.primary : colors.error}>{errorIcon} </span>
+          <span fg={selected ? colors.primary : errColor}>{errorIcon} </span>
           <span fg={selected ? colors.text : colors.text}>{displayLabel} </span>
-          <span fg={colors.error}>{"─".repeat(barWidth)}</span>
-          <span fg={colors.error}> ERR</span>
+          <span fg={errColor}>{"\u2500".repeat(barWidth)}</span>
+          <span fg={errColor}> {errLabel}</span>
         </text>
       </box>
     );

package/src/tui/components/ProviderCard.tsx

@@ -1,10 +1,12 @@
 import type { BoxRenderable } from "@opentui/core";
 import { useTerminalDimensions } from "@opentui/react";
 import type { ProviderUsageData } from "@tokentop/plugin-sdk";
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { forwardRef, useCallback } from "react";
+import { classifyProviderError, getErrorCategoryDisplay } from "@/utils/error-category.ts";
 import { useColors } from "../contexts/ThemeContext.tsx";
+import { usePulse } from "../hooks/usePulse.ts";
 import { SkeletonProviderContent } from "./Skeleton.tsx";
-import { useSpinner } from "./Spinner.tsx";
+import { Spinner } from "./Spinner.tsx";
 import { UsageGauge } from "./UsageGauge.tsx";
 
 interface CompactGaugeProps {
@@ -60,9 +62,11 @@ export const ProviderCard = forwardRef<BoxRenderable, ProviderCardProps>(
     const colors = useColors();
     const { width: termWidth } = useTerminalDimensions();
     const providerColor = color ?? colors.primary;
-    const spinnerFrame = useSpinner();
-
-    const [pulseStep, setPulseStep] = useState(0);
+    const pulseStep = usePulse({
+      enabled: usage?.limitReached ?? false,
+      intervalMs: 150,
+      steps: 12,
+    });
 
     const rawItems = usage?.limits?.items;
     const hasItems = rawItems && rawItems.length > 0;
@@ -78,36 +82,34 @@ export const ProviderCard = forwardRef<BoxRenderable, ProviderCardProps>(
       sortedItems.length > maxVisibleGauges ? sortedItems.slice(0, maxVisibleGauges) : sortedItems;
     const useCompactMode = visibleItems.length > 3;
 
-    useEffect(() => {
-      if (!usage?.limitReached) {
-        setPulseStep(0);
-        return;
-      }
-
-      const timer = setInterval(() => {
-        setPulseStep((p) => (p + 1) % 12);
-      }, 150);
-
-      return () => clearInterval(timer);
-    }, [usage?.limitReached]);
-
     const handleClick = useCallback(() => {
       if (onFocus) {
         onFocus();
       }
     }, [onFocus]);
 
+    const errorCategory = usage?.error ? classifyProviderError(usage.error) : undefined;
+    const errorDisplay = errorCategory ? getErrorCategoryDisplay(errorCategory) : undefined;
+
     const statusColor = !configured
       ? colors.textSubtle
       : loading
         ? colors.info
         : usage?.error
-          ? colors.error
+          ? errorDisplay?.isWarning
+            ? colors.warning
+            : colors.error
           : usage?.limitReached
             ? colors.warning
             : colors.success;
 
-    const statusIcon = !configured ? "○" : usage?.error ? "✗" : usage?.limitReached ? "!" : "●";
+    const statusIcon = !configured
+      ? "○"
+      : usage?.error
+        ? (errorDisplay?.icon ?? "✗")
+        : usage?.limitReached
+          ? "!"
+          : "●";
 
     const isInitialLoad = loading && !usage;
 
@@ -154,7 +156,11 @@ export const ProviderCard = forwardRef<BoxRenderable, ProviderCardProps>(
               <strong>{name}</strong>
             </span>
           </text>
-          <text fg={statusColor}>{configured && loading ? spinnerFrame : statusIcon}</text>
+          {configured && loading ? (
+            <Spinner color={statusColor} />
+          ) : (
+            <text fg={statusColor}>{statusIcon}</text>
+          )}
         </box>
 
         {!configured && <text fg={colors.textSubtle}>Not configured</text>}
@@ -162,7 +168,17 @@ export const ProviderCard = forwardRef<BoxRenderable, ProviderCardProps>(
         {configured && isInitialLoad && <SkeletonProviderContent />}
 
         {configured && !isInitialLoad && usage?.error && (
-          <text fg={colors.error}>{usage.error}</text>
+          <box flexDirection="column" gap={0}>
+            <text fg={errorDisplay?.isWarning ? colors.warning : colors.error}>
+              <span>
+                <bold>{errorDisplay?.label ?? "ERR"}</bold>
+              </span>
+              <span fg={colors.textMuted}> — </span>
+              <span fg={errorDisplay?.isWarning ? colors.warning : colors.error}>
+                {usage.error}
+              </span>
+            </text>
+          </box>
         )}
 
         {configured && !isInitialLoad && usage && !usage.error && (

package/src/tui/components/ProviderLimitsPanel.tsx

@@ -1,5 +1,6 @@
 import { useTerminalDimensions } from "@opentui/react";
 import { useMemo } from "react";
+import type { ProviderErrorCategory } from "@/utils/error-category.ts";
 import { useConfig } from "../contexts/ConfigContext.tsx";
 import { useColors } from "../contexts/ThemeContext.tsx";
 import { usePulse } from "../hooks/usePulse.ts";
@@ -34,6 +35,7 @@ interface ProviderData {
   usedPercent: number;
   color: string;
   error?: string;
+  errorCategory?: ProviderErrorCategory;
   resetTime?: string;
   used?: number;
   limit?: number;
@@ -186,6 +188,7 @@ export function ProviderLimitsPanel({
               usedPercent={p.usedPercent}
               color={p.color}
               {...(p.error ? { error: p.error } : {})}
+              {...(p.errorCategory ? { errorCategory: p.errorCategory } : {})}
               compact={true}
               selected={focused && startIndex + idx === safeSelectedIndex}
               warningThreshold={warningThreshold}
@@ -269,6 +272,7 @@ export function ProviderLimitsPanel({
               usedPercent={p.usedPercent}
               color={p.color}
               {...(p.error ? { error: p.error } : {})}
+              {...(p.errorCategory ? { errorCategory: p.errorCategory } : {})}
               {...(p.resetTime ? { resetTime: p.resetTime } : {})}
               labelWidth={14}
               barWidth={12}
@@ -326,6 +330,7 @@ export function ProviderLimitsPanel({
             usedPercent={p.usedPercent}
             color={p.color}
             {...(p.error ? { error: p.error } : {})}
+            {...(p.errorCategory ? { errorCategory: p.errorCategory } : {})}
             {...(p.resetTime ? { resetTime: p.resetTime } : {})}
             labelWidth={12}
             barWidth={10}

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 {
@@ -265,9 +269,7 @@ const SessionRow = memo(function SessionRow({
             {isEstimated ? "≈" : " "}
             {formatTokensVal(animatedTokens).padStart(7)}
           </span>
-          <span fg={colors.textMuted}>
-            {hasCacheData ? ` ↯${formatCacheBadge(cacheRead)}` : ""}
-          </span>
+          <span fg={textMutedColor}>{hasCacheData ? ` ↯${formatCacheBadge(cacheRead)}` : ""}</span>
         </text>
         <text width={8} height={1} fg={costColor} {...bgProp}>
           {costDisplay.padStart(7)}
@@ -323,7 +325,7 @@ const SessionRow = memo(function SessionRow({
           {isEstimated ? "≈" : " "}
           {formatTokensVal(animatedTokens).padStart(7)}
         </span>
-        <span fg={colors.textMuted}>
+        <span fg={textMutedColor}>
           {hasCacheData && showCacheBadge ? ` ↯${formatCacheBadge(cacheRead)}` : ""}
         </span>
       </text>
@@ -355,6 +357,8 @@ export const SessionsTable = forwardRef(function SessionsTable(
     focusedPanel,
     windowLabel,
     getProviderColor,
+    sortField,
+    sortDirection,
   }: SessionsTableProps,
   ref: Ref<ScrollBoxRenderable>,
 ) {
@@ -391,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"
@@ -418,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
@@ -435,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}>
             {" "}
@@ -475,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}>
             {" "}
@@ -500,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/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[] = [];