@tokscale/cli 1.0.5 → 1.0.7

package/src/tui/components/DateBreakdownPanel.tsx

@@ -0,0 +1,79 @@
+import { For, createMemo } from "solid-js";
+import type { DailyModelBreakdown } from "../types/index.js";
+import { getSourceColor } from "../utils/colors.js";
+import { formatTokens, formatCost } from "../utils/format.js";
+import { ModelRow } from "./ModelRow.js";
+
+function formatDateDisplay(dateStr: string): string {
+  const date = new Date(dateStr + "T00:00:00");
+  return date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", year: "numeric" });
+}
+
+export interface DateBreakdownPanelProps {
+  breakdown: DailyModelBreakdown;
+  isNarrow: boolean;
+}
+
+export function DateBreakdownPanel(props: DateBreakdownPanelProps) {
+  const groupedBySource = createMemo(() => {
+    if (!props.breakdown?.models) return new Map();
+    const groups = new Map<string, typeof props.breakdown.models>();
+    for (const model of props.breakdown.models) {
+      const existing = groups.get(model.source) || [];
+      existing.push(model);
+      groups.set(model.source, existing);
+    }
+    for (const [, models] of groups) {
+      models.sort((a, b) => {
+        const totalA = a.tokens.input + a.tokens.output + (a.tokens.cacheRead || 0) + (a.tokens.cacheWrite || 0);
+        const totalB = b.tokens.input + b.tokens.output + (b.tokens.cacheRead || 0) + (b.tokens.cacheWrite || 0);
+        return totalB - totalA;
+      });
+    }
+    return groups;
+  });
+
+  return (
+    <box flexDirection="column" marginTop={1} paddingX={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text bold fg="white">{formatDateDisplay(props.breakdown.date)}</text>
+        <box flexDirection="row" gap={2}>
+          <text fg="cyan">{formatTokens(props.breakdown.totalTokens)}</text>
+          <text fg="green" bold>{formatCost(props.breakdown.cost)}</text>
+        </box>
+      </box>
+      
+      <box flexDirection="column" marginTop={1}>
+        <For each={Array.from(groupedBySource().entries())}>
+          {([source, models]) => (
+            <box flexDirection="column">
+              <box flexDirection="row" gap={1}>
+                <text fg={getSourceColor(source)} bold>{`● ${source.toUpperCase()}`}</text>
+                <text dim>{`(${models.length} model${models.length > 1 ? "s" : ""})`}</text>
+              </box>
+              <For each={models}>
+                {(model) => (
+                  <ModelRow
+                    modelId={model.modelId}
+                    tokens={{
+                      input: model.tokens.input,
+                      output: model.tokens.output,
+                      cacheRead: model.tokens.cacheRead,
+                      cacheWrite: model.tokens.cacheWrite,
+                    }}
+                    compact={props.isNarrow}
+                    indent={2}
+                  />
+                )}
+              </For>
+            </box>
+          )}
+        </For>
+      </box>
+      
+      <box flexDirection="row" marginTop={1}>
+        <text dim>Click another day or same day to close</text>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/Footer.tsx

@@ -0,0 +1,225 @@
+import { Show, createSignal, createMemo, 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";
+import { formatTokens } from "../utils/format.js";
+import { isVeryNarrow } from "../utils/responsive.js";
+
+interface FooterProps {
+  enabledSources: Set<SourceType>;
+  sortBy: SortType;
+  totals?: TotalBreakdown;
+  modelCount: number;
+  activeTab: TabType;
+  scrollStart?: number;
+  scrollEnd?: number;
+  totalItems?: number;
+  colorPalette: ColorPaletteName;
+  statusMessage?: string | null;
+  isRefreshing?: boolean;
+  loadingPhase?: LoadingPhase;
+  cacheTimestamp?: number | null;
+  width?: number;
+  onSourceToggle?: (source: SourceType) => void;
+  onSortChange?: (sort: SortType) => void;
+  onPaletteChange?: () => void;
+  onRefresh?: () => void;
+}
+
+function formatTimeAgo(timestamp: number): string {
+  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+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 && 
+    props.scrollEnd !== undefined;
+
+  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} />
+          <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} />
+          </Show>
+          <Show when={showScrollInfo() && !isVeryNarrowTerminal()}>
+            <text dim>|</text>
+            <text dim>{`↓ ${props.scrollStart! + 1}-${props.scrollEnd} of ${props.totalItems}`}</text>
+          </Show>
+        </box>
+        <box flexDirection="row" gap={1}>
+          <text fg="cyan">{formatTokens(totals().total)}</text>
+          <text dim>tokens</text>
+          <text dim>|</text>
+          <text fg="green" bold>{`$${totals().cost.toFixed(2)}`}</text>
+          <Show when={!isVeryNarrowTerminal()}>
+            <text dim>({props.modelCount} models)</text>
+          </Show>
+        </box>
+      </box>
+      <box flexDirection="row" gap={1}>
+        <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>
+              <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]</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>
+        </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>
+      </Show>
+    </box>
+  );
+}
+
+interface SourceBadgeProps {
+  name: string;
+  source: SourceType;
+  enabled: boolean;
+  onToggle?: (source: SourceType) => void;
+}
+
+function SourceBadge(props: SourceBadgeProps) {
+  const handleClick = () => props.onToggle?.(props.source);
+
+  return (
+    <box onMouseDown={handleClick}>
+      <text fg={props.enabled ? "green" : "gray"}>
+        {`[${props.enabled ? "●" : "○"}${props.name}]`}
+      </text>
+    </box>
+  );
+}
+
+interface SortButtonProps {
+  label: string;
+  sortType: SortType;
+  active: boolean;
+  onClick?: (sort: SortType) => void;
+}
+
+function SortButton(props: SortButtonProps) {
+  const handleClick = () => props.onClick?.(props.sortType);
+
+  return (
+    <box onMouseDown={handleClick}>
+      <text fg={props.active ? "white" : "gray"} bold={props.active}>
+        {props.label}
+      </text>
+    </box>
+  );
+}
+
+const SPINNER_COLORS = ["#00FFFF", "#00D7D7", "#00AFAF", "#008787", "#666666", "#666666"];
+const SPINNER_WIDTH = 6;
+const SPINNER_HOLD_START = 20;
+const SPINNER_HOLD_END = 6;
+const SPINNER_TRAIL = 3;
+const SPINNER_INTERVAL = 40;
+
+const PHASE_MESSAGES: Record<LoadingPhase, string> = {
+  "idle": "Initializing...",
+  "loading-pricing": "Loading pricing data...",
+  "syncing-cursor": "Syncing Cursor data...",
+  "parsing-sources": "Parsing session files...",
+  "finalizing-report": "Finalizing report...",
+  "complete": "Complete",
+};
+
+interface LoadingStatusLineProps {
+  phase?: LoadingPhase;
+}
+
+function LoadingStatusLine(props: LoadingStatusLineProps) {
+  const [frame, setFrame] = createSignal(0);
+
+  onMount(() => {
+    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 normalized = frame() % totalCycle;
+
+    if (normalized < forwardFrames) {
+      return { position: normalized, forward: true };
+    } 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: 0, forward: false };
+  };
+
+  const getCharProps = (index: number) => {
+    const { position, forward } = getSpinnerState();
+    const distance = forward ? position - index : index - position;
+    if (distance >= 0 && distance < SPINNER_TRAIL) {
+      return { char: "■", color: SPINNER_COLORS[distance] };
+    }
+    return { char: "⬝", color: "#444444" };
+  };
+
+  const message = () => props.phase ? PHASE_MESSAGES[props.phase] : "Refreshing...";
+
+  return (
+    <box flexDirection="row" gap={1}>
+      <box flexDirection="row" gap={0}>
+        {Array.from({ length: SPINNER_WIDTH }, (_, i) => {
+          const { char, color } = getCharProps(i);
+          return <text fg={color}>{char}</text>;
+        })}
+      </box>
+      <text dim>{message()}</text>
+    </box>
+  );
+}

package/src/tui/components/Header.tsx

@@ -0,0 +1,68 @@
+import { Show } from "solid-js";
+import { exec } from "child_process";
+import type { TabType } from "../types/index.js";
+import { isNarrow, isVeryNarrow } from "../utils/responsive.js";
+
+const REPO_URL = "https://github.com/junhoyeo/tokscale";
+
+function openUrl(url: string) {
+  const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+  exec(`${cmd} ${url}`);
+}
+
+interface HeaderProps {
+  activeTab: TabType;
+  onTabClick?: (tab: TabType) => void;
+  width?: number;
+}
+
+export function Header(props: HeaderProps) {
+  const isNarrowTerminal = () => isNarrow(props.width);
+  const isVeryNarrowTerminal = () => isVeryNarrow(props.width);
+
+  const getTabName = (fullName: string, shortName: string) => 
+    isVeryNarrowTerminal() ? shortName : fullName;
+
+  return (
+    <box flexDirection="row" paddingX={1} paddingY={0} justifyContent="space-between">
+      <box flexDirection="row" gap={isVeryNarrowTerminal() ? 1 : 2}>
+        <Tab name={getTabName("Overview", "Ovw")} tabId="overview" active={props.activeTab === "overview"} onClick={props.onTabClick} />
+        <Tab name={getTabName("Models", "Mod")} tabId="model" active={props.activeTab === "model"} onClick={props.onTabClick} />
+        <Tab name={getTabName("Daily", "Day")} tabId="daily" active={props.activeTab === "daily"} onClick={props.onTabClick} />
+        <Tab name={getTabName("Stats", "Sta")} tabId="stats" active={props.activeTab === "stats"} onClick={props.onTabClick} />
+      </box>
+      <Show when={!isNarrowTerminal()}>
+        <box flexDirection="row" onMouseDown={() => openUrl(REPO_URL)}>
+          <text fg="cyan" bold>tokscale</text>
+          <text fg="#666666">{" | GitHub"}</text>
+        </box>
+      </Show>
+    </box>
+  );
+}
+
+interface TabProps {
+  name: string;
+  tabId: TabType;
+  active: boolean;
+  onClick?: (tab: TabType) => void;
+}
+
+function Tab(props: TabProps) {
+  const handleClick = () => props.onClick?.(props.tabId);
+
+  return (
+    <Show
+      when={props.active}
+      fallback={
+        <box onMouseDown={handleClick}>
+          <text dim>{props.name}</text>
+        </box>
+      }
+    >
+      <box onMouseDown={handleClick}>
+        <text bg="cyan" fg="black" bold>{` ${props.name} `}</text>
+      </box>
+    </Show>
+  );
+}

package/src/tui/components/Legend.tsx

@@ -0,0 +1,39 @@
+import { For, Show } from "solid-js";
+import { getModelColor } from "../utils/colors.js";
+import { isNarrow, isVeryNarrow } from "../utils/responsive.js";
+
+interface LegendProps {
+  models: string[];
+  width?: number;
+}
+
+export function Legend(props: LegendProps) {
+  const isNarrowTerminal = () => isNarrow(props.width);
+  const isVeryNarrowTerminal = () => isVeryNarrow(props.width);
+
+  const maxModelNameWidth = () => isVeryNarrowTerminal() ? 12 : isNarrowTerminal() ? 18 : 30;
+  const truncateModelName = (name: string) => {
+    const max = maxModelNameWidth();
+    return name.length > max ? name.slice(0, max - 1) + "…" : name;
+  };
+
+  const models = () => props.models;
+
+  return (
+    <Show when={models().length > 0}>
+      <box flexDirection="row" gap={1} flexWrap="wrap">
+        <For each={models()}>
+          {(modelId, i) => (
+            <box flexDirection="row" gap={0}>
+              <text fg={getModelColor(modelId)}>●</text>
+              <text>{` ${truncateModelName(modelId)}`}</text>
+              <Show when={i() < models().length - 1}>
+                <text dim>{isVeryNarrowTerminal() ? " " : "  ·"}</text>
+              </Show>
+            </box>
+          )}
+        </For>
+      </box>
+    </Show>
+  );
+}

package/src/tui/components/LoadingSpinner.tsx

@@ -0,0 +1,82 @@
+import { createSignal, onMount, onCleanup } from "solid-js";
+import type { LoadingPhase } from "../types/index.js";
+
+const COLORS = ["#00FFFF", "#00D7D7", "#00AFAF", "#008787", "#666666", "#666666", "#666666", "#666666"];
+const WIDTH = 8;
+const HOLD_START = 30;
+const HOLD_END = 9;
+const TRAIL_LENGTH = 4;
+const INTERVAL = 40;
+
+interface SpinnerState {
+  position: number;
+  forward: boolean;
+}
+
+function getScannerState(frame: number): SpinnerState {
+  const forwardFrames = WIDTH;
+  const backwardFrames = WIDTH - 1;
+  const totalCycle = forwardFrames + HOLD_END + backwardFrames + HOLD_START;
+  const normalized = frame % totalCycle;
+
+  if (normalized < forwardFrames) {
+    return { position: normalized, forward: true };
+  } else if (normalized < forwardFrames + HOLD_END) {
+    return { position: WIDTH - 1, forward: true };
+  } else if (normalized < forwardFrames + HOLD_END + backwardFrames) {
+    return { position: WIDTH - 2 - (normalized - forwardFrames - HOLD_END), forward: false };
+  }
+  return { position: 0, forward: false };
+}
+
+const PHASE_MESSAGES: Record<LoadingPhase, string> = {
+  "idle": "Initializing...",
+  "loading-pricing": "Loading pricing data...",
+  "syncing-cursor": "Syncing Cursor data...",
+  "parsing-sources": "Parsing session files...",
+  "finalizing-report": "Finalizing report...",
+  "complete": "Complete",
+};
+
+interface LoadingSpinnerProps {
+  message?: string;
+  phase?: LoadingPhase;
+}
+
+export function LoadingSpinner(props: LoadingSpinnerProps) {
+  const [frame, setFrame] = createSignal(0);
+
+  onMount(() => {
+    const id = setInterval(() => {
+      setFrame((f) => f + 1);
+    }, INTERVAL);
+    onCleanup(() => clearInterval(id));
+  });
+
+  const state = () => getScannerState(frame());
+  const displayMessage = () => props.message || (props.phase ? PHASE_MESSAGES[props.phase] : "Loading data...");
+
+  const getCharProps = (index: number) => {
+    const { position, forward } = state();
+    const distance = forward ? position - index : index - position;
+
+    if (distance >= 0 && distance < TRAIL_LENGTH) {
+      return { char: "■", color: COLORS[distance] };
+    }
+    return { char: "⬝", color: "#444444" };
+  };
+
+  return (
+    <box flexDirection="column" justifyContent="center" alignItems="center" flexGrow={1}>
+      <box flexDirection="row" gap={0}>
+        {Array.from({ length: WIDTH }, (_, i) => {
+          const { char, color } = getCharProps(i);
+          return <text fg={color}>{char}</text>;
+        })}
+      </box>
+      <box marginTop={1}>
+        <text dim>{displayMessage()}</text>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/ModelRow.tsx

@@ -0,0 +1,47 @@
+import { Show, createMemo } from "solid-js";
+import { TokenBreakdown, type TokenBreakdownData } from "./TokenBreakdown.js";
+import { getModelColor } from "../utils/colors.js";
+
+interface ModelRowProps {
+  modelId: string;
+  tokens: TokenBreakdownData;
+  percentage?: number;
+  isActive?: boolean;
+  compact?: boolean;
+  indent?: number;
+  maxNameWidth?: number;
+}
+
+export function ModelRow(props: ModelRowProps) {
+  const color = () => getModelColor(props.modelId);
+  const bgColor = createMemo(() => props.isActive ? "blue" : undefined);
+  
+  const truncateName = (name: string) => {
+    const max = props.maxNameWidth ?? 50;
+    return name.length > max ? name.slice(0, max - 1) + "…" : name;
+  };
+
+  const indentStr = () => " ".repeat(props.indent ?? 0);
+
+  return (
+    <box flexDirection="column">
+      <box flexDirection="row" backgroundColor={bgColor()}>
+        <Show when={props.indent}>
+          <text>{indentStr()}</text>
+        </Show>
+        <text fg={color()} bg={bgColor()}>●</text>
+        <text fg={props.isActive ? "white" : undefined} bg={bgColor()}>{` ${truncateName(props.modelId)}`}</text>
+        <Show when={props.percentage !== undefined}>
+          <text dim bg={bgColor()}>{` (${props.percentage!.toFixed(1)}%)`}</text>
+        </Show>
+      </box>
+      <box flexDirection="row">
+        <TokenBreakdown 
+          tokens={props.tokens} 
+          compact={props.compact}
+          indent={(props.indent ?? 0) + 2}
+        />
+      </box>
+    </box>
+  );
+}

package/src/tui/components/ModelView.tsx

@@ -0,0 +1,145 @@
+import { For, createMemo, type Accessor } from "solid-js";
+import type { TUIData, SortType } from "../hooks/useData.js";
+import { getModelColor } from "../utils/colors.js";
+import { formatTokensCompact, formatCostFull } from "../utils/format.js";
+import { isNarrow, isVeryNarrow } from "../utils/responsive.js";
+
+const STRIPE_BG = "#232328";
+
+const INPUT_COL_WIDTH = 12;
+const OUTPUT_COL_WIDTH = 12;
+const CACHE_COL_WIDTH = 12;
+const TOTAL_COL_WIDTH = 14;
+const COST_COL_WIDTH = 12;
+const METRIC_COLUMNS_WIDTH_FULL = INPUT_COL_WIDTH + OUTPUT_COL_WIDTH + CACHE_COL_WIDTH + TOTAL_COL_WIDTH + COST_COL_WIDTH;
+const METRIC_COLUMNS_WIDTH_NARROW = TOTAL_COL_WIDTH + COST_COL_WIDTH;
+const SIDE_PADDING = 2;
+const MIN_NAME_COLUMN = 16;
+const MIN_NAME_COLUMN_NARROW = 12;
+
+interface ModelViewProps {
+  data: TUIData;
+  sortBy: SortType;
+  sortDesc: boolean;
+  selectedIndex: Accessor<number>;
+  height: number;
+  width: number;
+}
+
+export function ModelView(props: ModelViewProps) {
+  const sortedEntries = createMemo(() => {
+    const entries = props.data.modelEntries;
+    const sortBy = props.sortBy;
+    const sortDesc = props.sortDesc;
+    
+    return [...entries].sort((a, b) => {
+      let cmp = 0;
+      if (sortBy === "cost") cmp = a.cost - b.cost;
+      else if (sortBy === "tokens") cmp = a.total - b.total;
+      else cmp = a.model.localeCompare(b.model);
+      return sortDesc ? -cmp : cmp;
+    });
+  });
+
+  const isNarrowTerminal = () => isNarrow(props.width);
+  const isVeryNarrowTerminal = () => isVeryNarrow(props.width);
+  
+  const nameColumnWidths = createMemo(() => {
+    const metricWidth = isNarrowTerminal() ? METRIC_COLUMNS_WIDTH_NARROW : METRIC_COLUMNS_WIDTH_FULL;
+    const minName = isNarrowTerminal() ? MIN_NAME_COLUMN_NARROW : MIN_NAME_COLUMN;
+    const available = Math.max(props.width - SIDE_PADDING - metricWidth, minName);
+    const nameColumn = Math.max(minName, available);
+
+    return {
+      column: nameColumn,
+      text: Math.max(nameColumn - 1, 1),
+    };
+  });
+
+  const visibleEntries = createMemo(() => {
+    const maxRows = Math.max(props.height - 3, 0);
+    return sortedEntries().slice(0, maxRows);
+  });
+
+  const formattedRows = createMemo(() => {
+    const nameWidth = nameColumnWidths().text;
+    return visibleEntries().map((entry) => {
+      const sourceLabel = entry.source.charAt(0).toUpperCase() + entry.source.slice(1);
+      const fullName = `${sourceLabel} ${entry.model}`;
+      let displayName = fullName;
+      if (fullName.length > nameWidth) {
+        displayName = nameWidth > 1 ? `${fullName.slice(0, nameWidth - 1)}…` : fullName.slice(0, 1);
+      }
+
+      return {
+        entry,
+        displayName,
+        nameWidth,
+        input: formatTokensCompact(entry.input),
+        output: formatTokensCompact(entry.output),
+        cache: formatTokensCompact(entry.cacheRead),
+        total: formatTokensCompact(entry.total),
+        cost: formatCostFull(entry.cost),
+      };
+    });
+  });
+
+  const sortArrow = () => (props.sortDesc ? "▼" : "▲");
+  const nameHeader = () => isVeryNarrowTerminal() 
+    ? ` Model`
+    : ` Source/Model`;
+  const totalHeader = () => (props.sortBy === "tokens" ? `${sortArrow()} Total` : "Total");
+  const costHeader = () => (props.sortBy === "cost" ? `${sortArrow()} Cost` : "Cost");
+
+  const renderHeader = () => {
+    if (isNarrowTerminal()) {
+      return `${nameHeader().padEnd(nameColumnWidths().column)}${totalHeader().padStart(TOTAL_COL_WIDTH)}${costHeader().padStart(COST_COL_WIDTH)}`;
+    }
+    return `${nameHeader().padEnd(nameColumnWidths().column)}${"Input".padStart(INPUT_COL_WIDTH)}${"Output".padStart(OUTPUT_COL_WIDTH)}${"Cache".padStart(CACHE_COL_WIDTH)}${totalHeader().padStart(TOTAL_COL_WIDTH)}${costHeader().padStart(COST_COL_WIDTH)}`;
+  };
+
+  const renderRowData = (row: typeof formattedRows extends () => (infer T)[] ? T : never) => {
+    if (isNarrowTerminal()) {
+      return `${row.displayName.padEnd(row.nameWidth)}${row.total.padStart(TOTAL_COL_WIDTH)}`;
+    }
+    return `${row.displayName.padEnd(row.nameWidth)}${row.input.padStart(INPUT_COL_WIDTH)}${row.output.padStart(OUTPUT_COL_WIDTH)}${row.cache.padStart(CACHE_COL_WIDTH)}${row.total.padStart(TOTAL_COL_WIDTH)}`;
+  };
+
+  return (
+    <box flexDirection="column">
+      <box flexDirection="row">
+        <text fg="cyan" bold>
+          {renderHeader()}
+        </text>
+      </box>
+
+      <For each={formattedRows()}>
+        {(row, i) => {
+          const isActive = createMemo(() => i() === props.selectedIndex());
+          const rowBg = createMemo(() => isActive() ? "blue" : (i() % 2 === 1 ? STRIPE_BG : undefined));
+          
+          return (
+            <box flexDirection="row">
+              <text 
+                fg={getModelColor(row.entry.model)} 
+                bg={rowBg()}
+              >●</text>
+              <text
+                bg={rowBg()}
+                fg={isActive() ? "white" : undefined}
+              >
+                {renderRowData(row)}
+              </text>
+              <text
+                fg="green"
+                bg={rowBg()}
+              >
+                {row.cost.padStart(COST_COL_WIDTH)}
+              </text>
+            </box>
+          );
+        }}
+      </For>
+    </box>
+  );
+}