@tokentop/ttop 0.5.0 → 0.6.1

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/SettingsModal.tsx

@@ -2,6 +2,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 { notificationBus } from "@/plugins/notification-bus.ts";
 import { formatBudgetDisplay, parseCurrencyInput } from "@/utils/currency.ts";
 import { useConfig } from "../contexts/ConfigContext.tsx";
 import { useDemoMode } from "../contexts/DemoModeContext.tsx";
@@ -20,10 +21,11 @@ interface SettingItem {
   description?: string;
   category: SettingCategory;
   pluginId?: string;
-  type: "toggle" | "select" | "number";
+  type: "toggle" | "select" | "number" | "action";
   options?: string[];
   getValue: (config: AppConfig) => string | number | boolean | null;
   setValue: (config: AppConfig, value: string | number | boolean | null) => AppConfig;
+  onAction?: () => void;
 }
 
 const BASE_SETTINGS: SettingItem[] = [
@@ -205,6 +207,16 @@ const BASE_SETTINGS: SettingItem[] = [
       notifications: { ...c.notifications, soundEnabled: v as boolean },
     }),
   },
+  {
+    key: "testNotification",
+    label: "Test Notifications",
+    description: "Send a test notification to verify toast, flash, and sound alerts are working.",
+    category: "notifications",
+    type: "action",
+    onAction: () => void notificationBus.testNotification(),
+    getValue: () => "▸ Run",
+    setValue: (c) => c,
+  },
 ];
 
 const CATEGORIES: { id: SettingCategory; label: string }[] = [
@@ -362,7 +374,7 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
     provider: "Providers",
     agent: "Agents",
     theme: "Themes",
-    notification: "Delivery",
+    notification: "Notifications",
   };
 
   // Stable ordering for plugin type groups in sidebar
@@ -621,7 +633,9 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
         setSelectedIndex((i) => Math.max(i - 1, 0));
       } else if (key.name === "return" || key.name === "space") {
         const setting = categorySettings[selectedIndex];
-        if (setting?.key === "theme") {
+        if (setting?.type === "action" && setting.onAction) {
+          setting.onAction();
+        } else if (setting?.key === "theme") {
           setShowThemePicker(true);
         } else if (setting?.type === "number") {
           startEditingNumber();
@@ -832,7 +846,9 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
                       setting.type === "number" && editingSettingKey === setting.key;
 
                     let displayValue: string;
-                    if (setting.key === "theme") {
+                    if (setting.type === "action") {
+                      displayValue = "▸ Run";
+                    } else if (setting.key === "theme") {
                       const themeName = themes.find((t) => t.id === value)?.name ?? value;
                       displayValue = `${themeName} ▸`;
                     } else if (setting.type === "toggle") {

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/Toast.tsx

@@ -8,7 +8,7 @@ interface ToastProps {
   type?: "info" | "success" | "warning" | "error";
 }
 
-export function Toast({ message, duration = 2000, onDismiss, type = "success" }: ToastProps) {
+export function Toast({ message, duration = 4000, onDismiss, type = "success" }: ToastProps) {
   const colors = useColors();
 
   useEffect(() => {