@tokscale/cli 1.0.13 → 1.0.15

package/src/cli.ts

@@ -295,9 +295,9 @@ async function main() {
 
   program
     .command("wrapped")
-    .description("Generate 2025 Wrapped shareable image")
-    .option("--output <file>", "Output file path (default: tokscale-2025-wrapped.png)")
-    .option("--year <year>", "Year to generate wrapped for (default: current year)")
+    .description("Generate Wrapped shareable image")
+    .option("--output <file>", "Output file path (default: tokscale-<year>-wrapped.png)")
+    .option("--year <year>", "Year to generate (default: current year)")
     .option("--opencode", "Include only OpenCode data")
     .option("--claude", "Include only Claude Code data")
     .option("--codex", "Include only Codex CLI data")
@@ -305,6 +305,8 @@ async function main() {
     .option("--cursor", "Include only Cursor IDE data")
     .option("--no-spinner", "Disable loading spinner (for scripting)")
     .option("--short", "Display total tokens in abbreviated format (e.g., 7.14B)")
+    .option("--agents", "Show Top OpenCode Agents instead of Top Clients")
+    .option("--pin-sisyphus", "Pin Sisyphus and Planner-Sisyphus at top of agents list")
     .action(async (options) => {
       await handleWrappedCommand(options);
     });
@@ -924,22 +926,28 @@ async function handleGraphCommand(options: GraphCommandOptions) {
 interface WrappedCommandOptions extends FilterOptions {
   output?: string;
   year?: string;
-  spinner?: boolean; // --no-spinner sets this to false
+  spinner?: boolean;
   short?: boolean;
+  agents?: boolean;
+  pinSisyphus?: boolean;
 }
 
 async function handleWrappedCommand(options: WrappedCommandOptions) {
   const useSpinner = options.spinner !== false;
   const spinner = useSpinner ? createSpinner({ color: "cyan" }) : null;
-  spinner?.start(pc.gray("Generating your 2025 Wrapped..."));
+  const currentYear = new Date().getFullYear().toString();
+  const year = options.year || currentYear;
+  spinner?.start(pc.gray(`Generating your ${year} Wrapped...`));
 
   try {
     const enabledSources = getEnabledSources(options);
     const outputPath = await generateWrapped({
       output: options.output,
-      year: options.year || "2025",
+      year,
       sources: enabledSources,
       short: options.short,
+      includeAgents: options.agents,
+      pinSisyphus: options.pinSisyphus,
     });
 
     spinner?.stop();

package/src/native.ts

@@ -183,6 +183,7 @@ interface NativeParsedMessage {
   cacheWrite: number;
   reasoning: number;
   sessionId: string;
+  agent?: string;
 }
 
 interface NativeParsedMessages {
@@ -435,6 +436,7 @@ export interface ParsedMessages {
     cacheWrite: number;
     reasoning: number;
     sessionId: string;
+    agent?: string;
   }>;
   opencodeCount: number;
   claudeCount: number;
@@ -448,6 +450,8 @@ export interface LocalParseOptions {
   since?: string;
   until?: string;
   year?: string;
+  /** Force TypeScript fallback even when native module is available (needed for agent field) */
+  forceTypescript?: boolean;
 }
 
 export interface FinalizeOptions {
@@ -637,8 +641,8 @@ async function runInSubprocess<T>(method: string, args: unknown[]): Promise<T> {
 }
 
 export async function parseLocalSourcesAsync(options: LocalParseOptions): Promise<ParsedMessages> {
-  // Use TypeScript fallback when native module is not available
-  if (!isNativeAvailable()) {
+  // Use TypeScript fallback when native module is not available or when explicitly requested
+  if (!isNativeAvailable() || options.forceTypescript) {
     const result = parseLocalSourcesTS({
       sources: options.sources,
       since: options.since,
@@ -646,7 +650,6 @@ export async function parseLocalSourcesAsync(options: LocalParseOptions): Promis
       year: options.year,
     });
 
-    // Convert TypeScript ParsedMessages to native format
     return {
       messages: result.messages.map((msg) => ({
         source: msg.source,
@@ -660,6 +663,7 @@ export async function parseLocalSourcesAsync(options: LocalParseOptions): Promis
         cacheWrite: msg.tokens.cacheWrite,
         reasoning: msg.tokens.reasoning,
         sessionId: msg.sessionId,
+        agent: msg.agent,
       })),
       opencodeCount: result.opencodeCount,
       claudeCount: result.claudeCount,
@@ -696,6 +700,7 @@ function buildMessagesForFallback(options: FinalizeOptions): UnifiedMessage[] {
       reasoning: msg.reasoning,
     },
     cost: 0,
+    agent: msg.agent,
   }));
 
   if (options.includeCursor) {

package/src/sessions/opencode.ts

@@ -28,6 +28,25 @@ interface OpenCodeMessageFile {
     created: number;
     completed?: number;
   };
+  agent?: string;
+  mode?: string;
+}
+
+export function normalizeAgentName(agent: string): string {
+  const agentLower = agent.toLowerCase();
+
+  if (agentLower.includes("plan")) {
+    if (agentLower.includes("omo") || agentLower.includes("sisyphus")) {
+      return "Planner-Sisyphus";
+    }
+    return agent;
+  }
+
+  if (agentLower === "omo" || agentLower === "sisyphus") {
+    return "Sisyphus";
+  }
+
+  return agent;
 }
 
 export function getOpenCodeStoragePath(): string {
@@ -69,6 +88,9 @@ export function parseOpenCodeMessages(): UnifiedMessage[] {
               reasoning: msg.tokens.reasoning || 0,
             };
 
+            const agentOrMode = msg.mode || msg.agent;
+            const agent = agentOrMode ? normalizeAgentName(agentOrMode) : undefined;
+
             messages.push(
               createUnifiedMessage(
                 "opencode",
@@ -77,7 +99,8 @@ export function parseOpenCodeMessages(): UnifiedMessage[] {
                 sessionId,
                 msg.time.created,
                 tokens,
-                msg.cost || 0
+                msg.cost || 0,
+                agent
               )
             );
           }

package/src/sessions/types.ts

@@ -15,10 +15,11 @@ export interface UnifiedMessage {
   modelId: string;
   providerId: string;
   sessionId: string;
-  timestamp: number; // Unix milliseconds
-  date: string; // YYYY-MM-DD
+  timestamp: number;
+  date: string;
   tokens: TokenBreakdown;
   cost: number;
+  agent?: string;
 }
 
 export type SourceType = "opencode" | "claude" | "codex" | "gemini" | "cursor";
@@ -34,9 +35,6 @@ export function timestampToDate(timestampMs: number): string {
   return `${year}-${month}-${day}`;
 }
 
-/**
- * Create a unified message
- */
 export function createUnifiedMessage(
   source: string,
   modelId: string,
@@ -44,7 +42,8 @@ export function createUnifiedMessage(
   sessionId: string,
   timestamp: number,
   tokens: TokenBreakdown,
-  cost: number = 0
+  cost: number = 0,
+  agent?: string
 ): UnifiedMessage {
   return {
     source,
@@ -55,5 +54,6 @@ export function createUnifiedMessage(
     date: timestampToDate(timestamp),
     tokens,
     cost,
+    agent,
   };
 }

package/src/tui/App.tsx

@@ -1,4 +1,4 @@
-import { createSignal, Switch, Match, onCleanup } from "solid-js";
+import { createEffect, createSignal, Switch, Match, onCleanup } from "solid-js";
 import { useKeyboard, useTerminalDimensions, useRenderer } from "@opentui/solid";
 import clipboardy from "clipboardy";
 import { Header } from "./components/Header.js";
@@ -39,7 +39,7 @@ export function App(props: AppProps) {
   const [enabledSources, setEnabledSources] = createSignal<Set<SourceType>>(
     new Set(props.enabledSources ?? ALL_SOURCES)
   );
-  const [sortBy, setSortBy] = createSignal<SortType>(props.sortBy ?? "cost");
+  const [sortBy, setSortBy] = createSignal<SortType>(props.sortBy ?? "tokens");
   const [sortDesc, setSortDesc] = createSignal(props.sortDesc ?? true);
   const [selectedIndex, setSelectedIndex] = createSignal(0);
   const [scrollOffset, setScrollOffset] = createSignal(0);
@@ -61,6 +61,8 @@ export function App(props: AppProps) {
 
   const [statusMessage, setStatusMessage] = createSignal<string | null>(null);
   let statusTimeout: ReturnType<typeof setTimeout> | null = null;
+  const [autoRefreshEnabled, setAutoRefreshEnabled] = createSignal(settings.autoRefreshEnabled ?? false);
+  const [autoRefreshMs, setAutoRefreshMs] = createSignal(settings.autoRefreshMs ?? 60000);
 
   const showStatus = (msg: string, duration = 2000) => {
     if (statusTimeout) clearTimeout(statusTimeout);
@@ -72,6 +74,68 @@ export function App(props: AppProps) {
     if (statusTimeout) clearTimeout(statusTimeout);
   });
 
+  const MIN_AUTO_REFRESH_MS = 30000;
+  const MAX_AUTO_REFRESH_MS = 3600000;
+  const AUTO_REFRESH_STEPS_MS = [
+    30000,
+    60000,
+    120000,
+    300000,
+    600000,
+  ];
+  const AUTO_REFRESH_AFTER_MAX_STEP_MS = 600000;
+
+  const clampAutoRefresh = (value: number) =>
+    Math.min(MAX_AUTO_REFRESH_MS, Math.max(MIN_AUTO_REFRESH_MS, value));
+
+  const formatIntervalSeconds = (ms: number) => {
+    const seconds = Math.round(ms / 1000);
+    if (seconds < 60) return `${seconds}s`;
+    const minutes = Math.round(seconds / 60);
+    return `${minutes}m`;
+  };
+
+  const getAutoRefreshIntervalStep = (current: number, direction: "up" | "down") => {
+    const value = clampAutoRefresh(current);
+    const cappedSteps = AUTO_REFRESH_STEPS_MS;
+    const maxStep = cappedSteps[cappedSteps.length - 1];
+
+    if (value > maxStep) {
+      const delta = direction === "up" ? AUTO_REFRESH_AFTER_MAX_STEP_MS : -AUTO_REFRESH_AFTER_MAX_STEP_MS;
+      return clampAutoRefresh(value + delta);
+    }
+
+    if (value === maxStep && direction === "up") {
+      return clampAutoRefresh(value + AUTO_REFRESH_AFTER_MAX_STEP_MS);
+    }
+
+    if (value === maxStep && direction === "down") {
+      return cappedSteps[cappedSteps.length - 2];
+    }
+
+    let idx = cappedSteps.findIndex((step) => step >= value);
+    if (idx === -1) idx = cappedSteps.length - 1;
+
+    if (direction === "up") {
+      const nextIndex = value === cappedSteps[idx] ? idx + 1 : idx;
+      return clampAutoRefresh(cappedSteps[Math.min(nextIndex, cappedSteps.length - 1)]);
+    }
+
+    const prevIndex = value === cappedSteps[idx] ? idx - 1 : idx - 1;
+    return clampAutoRefresh(cappedSteps[Math.max(prevIndex, 0)]);
+  };
+
+  createEffect(() => {
+    if (!autoRefreshEnabled()) return;
+    const ms = autoRefreshMs();
+    const interval = setInterval(() => {
+      if (!loading() && !isRefreshing()) {
+        refresh();
+      }
+    }, ms);
+    onCleanup(() => clearInterval(interval));
+  });
+
   const contentHeight = () => Math.max(rows() - 4, 12);
   const overviewChartHeight = () => Math.max(5, Math.floor(contentHeight() * 0.35));
   const overviewListHeight = () => Math.max(4, contentHeight() - overviewChartHeight() - 4);
@@ -108,6 +172,30 @@ export function App(props: AppProps) {
       return;
     }
 
+    if (key.name === "r" && key.shift) {
+      const next = !autoRefreshEnabled();
+      setAutoRefreshEnabled(next);
+      saveSettings({ autoRefreshEnabled: next });
+      showStatus(`Auto update: ${next ? "ON" : "OFF"} (${formatIntervalSeconds(autoRefreshMs())})`);
+      return;
+    }
+
+    if ((key.name === "+") || (key.name === "=" && key.shift)) {
+      const next = getAutoRefreshIntervalStep(autoRefreshMs(), "up");
+      setAutoRefreshMs(next);
+      saveSettings({ autoRefreshMs: next });
+      showStatus(`Auto update interval: ${formatIntervalSeconds(next)}`);
+      return;
+    }
+
+    if (key.name === "-" || key.name === "_") {
+      const next = getAutoRefreshIntervalStep(autoRefreshMs(), "down");
+      setAutoRefreshMs(next);
+      saveSettings({ autoRefreshMs: next });
+      showStatus(`Auto update interval: ${formatIntervalSeconds(next)}`);
+      return;
+    }
+
     if (key.name === "r") {
       refresh();
       return;
@@ -307,6 +395,7 @@ export function App(props: AppProps) {
                   colorPalette={colorPalette()}
                   width={columns()}
                   selectedDate={selectedDate()}
+                  sortBy={sortBy()}
                 />
               </Match>
             </Switch>
@@ -328,6 +417,8 @@ export function App(props: AppProps) {
         isRefreshing={isRefreshing()}
         loadingPhase={loadingPhase()}
         cacheTimestamp={cacheTimestamp()}
+        autoRefreshEnabled={autoRefreshEnabled()}
+        autoRefreshMs={autoRefreshMs()}
         width={columns()}
         onSourceToggle={handleSourceToggle}
         onSortChange={handleSortChange}

package/src/tui/components/Footer.tsx

@@ -1,5 +1,16 @@
-import { Show, createSignal, createMemo, onMount, onCleanup } from "solid-js";
-import type { SourceType, SortType, TabType, LoadingPhase } from "../types/index.js";
+import {
+  Show,
+  createSignal,
+  createEffect,
+  onMount,
+  onCleanup,
+} from "solid-js";
+import type {
+  SourceType,
+  SortType,
+  TabType,
+  LoadingPhase,
+} from "../types/index.js";
 import type { ColorPaletteName } from "../config/themes.js";
 import type { TotalBreakdown } from "../hooks/useData.js";
 import { getPalette } from "../config/themes.js";
@@ -20,6 +31,8 @@ interface FooterProps {
   isRefreshing?: boolean;
   loadingPhase?: LoadingPhase;
   cacheTimestamp?: number | null;
+  autoRefreshEnabled?: boolean;
+  autoRefreshMs?: number;
   width?: number;
   onSourceToggle?: (source: SourceType) => void;
   onSortChange?: (sort: SortType) => void;
@@ -27,8 +40,8 @@ interface FooterProps {
   onRefresh?: () => void;
 }
 
-function formatTimeAgo(timestamp: number): string {
-  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+function formatTimeAgo(timestamp: number, now: number): string {
+  const seconds = Math.max(Math.floor((now - timestamp) / 1000), 0);
   if (seconds < 60) return `${seconds}s ago`;
   const minutes = Math.floor(seconds / 60);
   if (minutes < 60) return `${minutes}m ago`;
@@ -38,35 +51,106 @@ function formatTimeAgo(timestamp: number): string {
   return `${days}d ago`;
 }
 
+function formatIntervalSeconds(ms: number | undefined): string {
+  if (!ms || ms <= 0) return "0s";
+  const seconds = Math.round(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  return `${minutes}m`;
+}
+
 export function Footer(props: FooterProps) {
   const palette = () => getPalette(props.colorPalette);
   const isVeryNarrowTerminal = () => isVeryNarrow(props.width);
-  
-  const showScrollInfo = () => 
-    props.activeTab === "overview" && 
-    props.totalItems && 
-    props.scrollStart !== undefined && 
+  const [now, setNow] = createSignal(Date.now());
+  let nowInterval: ReturnType<typeof setInterval> | null = null;
+
+  createEffect(() => {
+    if (props.cacheTimestamp) {
+      if (!nowInterval) {
+        nowInterval = setInterval(() => setNow(Date.now()), 1000);
+      }
+    } else if (nowInterval) {
+      clearInterval(nowInterval);
+      nowInterval = null;
+    }
+  });
+
+  onCleanup(() => {
+    if (nowInterval) clearInterval(nowInterval);
+  });
+
+  const showScrollInfo = () =>
+    props.activeTab === "overview" &&
+    props.totalItems &&
+    props.scrollStart !== undefined &&
     props.scrollEnd !== undefined;
 
-  const totals = () => props.totals || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0, total: 0, cost: 0 };
+  const totals = () =>
+    props.totals || {
+      input: 0,
+      output: 0,
+      cacheRead: 0,
+      cacheWrite: 0,
+      reasoning: 0,
+      total: 0,
+      cost: 0,
+    };
 
   return (
     <box flexDirection="column" paddingX={1}>
       <box flexDirection="row" justifyContent="space-between">
         <box flexDirection="row" gap={1}>
-          <SourceBadge name={isVeryNarrowTerminal() ? "1" : "1:OC"} source="opencode" enabled={props.enabledSources.has("opencode")} onToggle={props.onSourceToggle} />
-          <SourceBadge name={isVeryNarrowTerminal() ? "2" : "2:CC"} source="claude" enabled={props.enabledSources.has("claude")} onToggle={props.onSourceToggle} />
-          <SourceBadge name={isVeryNarrowTerminal() ? "3" : "3:CX"} source="codex" enabled={props.enabledSources.has("codex")} onToggle={props.onSourceToggle} />
-          <SourceBadge name={isVeryNarrowTerminal() ? "4" : "4:CR"} source="cursor" enabled={props.enabledSources.has("cursor")} onToggle={props.onSourceToggle} />
-          <SourceBadge name={isVeryNarrowTerminal() ? "5" : "5:GM"} source="gemini" enabled={props.enabledSources.has("gemini")} onToggle={props.onSourceToggle} />
+          <SourceBadge
+            name={isVeryNarrowTerminal() ? "1" : "1:OC"}
+            source="opencode"
+            enabled={props.enabledSources.has("opencode")}
+            onToggle={props.onSourceToggle}
+          />
+          <SourceBadge
+            name={isVeryNarrowTerminal() ? "2" : "2:CC"}
+            source="claude"
+            enabled={props.enabledSources.has("claude")}
+            onToggle={props.onSourceToggle}
+          />
+          <SourceBadge
+            name={isVeryNarrowTerminal() ? "3" : "3:CX"}
+            source="codex"
+            enabled={props.enabledSources.has("codex")}
+            onToggle={props.onSourceToggle}
+          />
+          <SourceBadge
+            name={isVeryNarrowTerminal() ? "4" : "4:CR"}
+            source="cursor"
+            enabled={props.enabledSources.has("cursor")}
+            onToggle={props.onSourceToggle}
+          />
+          <SourceBadge
+            name={isVeryNarrowTerminal() ? "5" : "5:GM"}
+            source="gemini"
+            enabled={props.enabledSources.has("gemini")}
+            onToggle={props.onSourceToggle}
+          />
           <Show when={!isVeryNarrowTerminal()}>
             <text dim>|</text>
-            <SortButton label="Cost" sortType="cost" active={props.sortBy === "cost"} onClick={props.onSortChange} />
-            <SortButton label="Tokens" sortType="tokens" active={props.sortBy === "tokens"} onClick={props.onSortChange} />
+            <SortButton
+              label="Cost"
+              sortType="cost"
+              active={props.sortBy === "cost"}
+              onClick={props.onSortChange}
+            />
+            <SortButton
+              label="Tokens"
+              sortType="tokens"
+              active={props.sortBy === "tokens"}
+              onClick={props.onSortChange}
+            />
           </Show>
           <Show when={showScrollInfo() && !isVeryNarrowTerminal()}>
             <text dim>|</text>
-            <text dim>{`↓ ${props.scrollStart! + 1}-${props.scrollEnd} of ${props.totalItems}`}</text>
+            <text
+              dim
+            >{`↓ ${props.scrollStart! + 1}-${props.scrollEnd} of ${props.totalItems}`}</text>
           </Show>
         </box>
         <box flexDirection="row" gap={1}>
@@ -80,38 +164,61 @@ export function Footer(props: FooterProps) {
         </box>
       </box>
       <box flexDirection="row" gap={1}>
-        <Show when={props.statusMessage} fallback={
-          <Show when={isVeryNarrowTerminal()} fallback={
-            <>
-              <text dim>↑↓ scroll • ←→/tab view • y copy •</text>
+        <Show
+          when={props.statusMessage}
+          fallback={
+            <Show
+              when={isVeryNarrowTerminal()}
+              fallback={
+                <>
+                  <text dim>↑↓ scroll • ←→/tab view • y copy •</text>
+                  <box onMouseDown={props.onPaletteChange}>
+                    <text fg="magenta">{`[p:${palette().name}]`}</text>
+                  </box>
+                  <text fg={props.autoRefreshEnabled ? "green" : "gray"}>
+                    {`[Shift+R:auto update ${formatIntervalSeconds(props.autoRefreshMs)}]`}
+                  </text>
+                  <text dim>[-/+ interval]•</text>
+                  <box onMouseDown={props.onRefresh}>
+                    <text fg="yellow">[r:refresh]</text>
+                  </box>
+                  <text dim>• e export • q quit</text>
+                </>
+              }
+            >
+              <text dim>↑↓•←→•y•</text>
               <box onMouseDown={props.onPaletteChange}>
-                <text fg="magenta">{`[p:${palette().name}]`}</text>
+                <text fg="magenta">[p]</text>
               </box>
+              <text fg={props.autoRefreshEnabled ? "green" : "gray"}>
+                {`[Shift+R:auto update ${formatIntervalSeconds(props.autoRefreshMs)}]`}
+              </text>
+              <text dim>-+•</text>
               <box onMouseDown={props.onRefresh}>
-                <text fg="yellow">[r:refresh]</text>
+                <text fg="yellow">[r]</text>
               </box>
-              <text dim>• e export • q quit</text>
-            </>
-          }>
-            <text dim>↑↓•←→•y•</text>
-            <box onMouseDown={props.onPaletteChange}>
-              <text fg="magenta">[p]</text>
-            </box>
-            <box onMouseDown={props.onRefresh}>
-              <text fg="yellow">[r]</text>
-            </box>
-            <text dim>•e•q</text>
-          </Show>
-        }>
-          <text fg="green" bold>{props.statusMessage}</text>
+              <text dim>•e•q</text>
+            </Show>
+          }
+        >
+          <text fg="green" bold>
+            {props.statusMessage}
+          </text>
         </Show>
       </box>
       <Show when={props.isRefreshing}>
         <LoadingStatusLine phase={props.loadingPhase} />
       </Show>
       <Show when={!props.isRefreshing && props.cacheTimestamp}>
-        <box flexDirection="row">
-          <text dim>{`Last updated: ${formatTimeAgo(props.cacheTimestamp!)}`}</text>
+        <box flexDirection="row" gap={1}>
+          <text
+            dim
+          >{`Last updated: ${formatTimeAgo(props.cacheTimestamp!, now())}`}</text>
+          <Show when={props.autoRefreshEnabled}>
+            <text
+              dim
+            >{`• Auto: ${formatIntervalSeconds(props.autoRefreshMs)}`}</text>
+          </Show>
         </box>
       </Show>
     </box>
@@ -156,7 +263,14 @@ function SortButton(props: SortButtonProps) {
   );
 }
 
-const SPINNER_COLORS = ["#00FFFF", "#00D7D7", "#00AFAF", "#008787", "#666666", "#666666"];
+const SPINNER_COLORS = [
+  "#00FFFF",
+  "#00D7D7",
+  "#00AFAF",
+  "#008787",
+  "#666666",
+  "#666666",
+];
 const SPINNER_WIDTH = 6;
 const SPINNER_HOLD_START = 20;
 const SPINNER_HOLD_END = 6;
@@ -164,12 +278,12 @@ const SPINNER_TRAIL = 3;
 const SPINNER_INTERVAL = 40;
 
 const PHASE_MESSAGES: Record<LoadingPhase, string> = {
-  "idle": "Initializing...",
+  idle: "Initializing...",
   "loading-pricing": "Loading pricing data...",
   "syncing-cursor": "Syncing Cursor data...",
   "parsing-sources": "Parsing session files...",
   "finalizing-report": "Finalizing report...",
-  "complete": "Complete",
+  complete: "Complete",
 };
 
 interface LoadingStatusLineProps {
@@ -180,14 +294,15 @@ function LoadingStatusLine(props: LoadingStatusLineProps) {
   const [frame, setFrame] = createSignal(0);
 
   onMount(() => {
-    const id = setInterval(() => setFrame(f => f + 1), SPINNER_INTERVAL);
+    const id = setInterval(() => setFrame((f) => f + 1), SPINNER_INTERVAL);
     onCleanup(() => clearInterval(id));
   });
 
   const getSpinnerState = () => {
     const forwardFrames = SPINNER_WIDTH;
     const backwardFrames = SPINNER_WIDTH - 1;
-    const totalCycle = forwardFrames + SPINNER_HOLD_END + backwardFrames + SPINNER_HOLD_START;
+    const totalCycle =
+      forwardFrames + SPINNER_HOLD_END + backwardFrames + SPINNER_HOLD_START;
     const normalized = frame() % totalCycle;
 
     if (normalized < forwardFrames) {
@@ -195,7 +310,11 @@ function LoadingStatusLine(props: LoadingStatusLineProps) {
     } else if (normalized < forwardFrames + SPINNER_HOLD_END) {
       return { position: SPINNER_WIDTH - 1, forward: true };
     } else if (normalized < forwardFrames + SPINNER_HOLD_END + backwardFrames) {
-      return { position: SPINNER_WIDTH - 2 - (normalized - forwardFrames - SPINNER_HOLD_END), forward: false };
+      return {
+        position:
+          SPINNER_WIDTH - 2 - (normalized - forwardFrames - SPINNER_HOLD_END),
+        forward: false,
+      };
     }
     return { position: 0, forward: false };
   };
@@ -209,7 +328,8 @@ function LoadingStatusLine(props: LoadingStatusLineProps) {
     return { char: "⬝", color: "#444444" };
   };
 
-  const message = () => props.phase ? PHASE_MESSAGES[props.phase] : "Refreshing...";
+  const message = () =>
+    props.phase ? PHASE_MESSAGES[props.phase] : "Refreshing...";
 
   return (
     <box flexDirection="row" gap={1}>