@tokscale/cli 1.0.5 → 1.0.6

package/src/tui/App.tsx

@@ -0,0 +1,339 @@
+import { createSignal, Switch, Match, onCleanup } from "solid-js";
+import { useKeyboard, useTerminalDimensions, useRenderer } from "@opentui/solid";
+import clipboardy from "clipboardy";
+import { Header } from "./components/Header.js";
+import { Footer } from "./components/Footer.js";
+import { ModelView } from "./components/ModelView.js";
+import { DailyView } from "./components/DailyView.js";
+import { StatsView } from "./components/StatsView.js";
+import { OverviewView } from "./components/OverviewView.js";
+import { LoadingSpinner } from "./components/LoadingSpinner.js";
+import { useData, type DateFilters } from "./hooks/useData.js";
+import type { ColorPaletteName } from "./config/themes.js";
+import { DEFAULT_PALETTE, getPaletteNames } from "./config/themes.js";
+import { loadSettings, saveSettings, getCacheTimestamp } from "./config/settings.js";
+import { TABS, ALL_SOURCES, type TUIOptions, type TabType, type SortType, type SourceType } from "./types/index.js";
+
+export type AppProps = TUIOptions;
+
+const PALETTE_NAMES = getPaletteNames();
+
+function cycleTabForward(current: TabType): TabType {
+  const idx = TABS.indexOf(current);
+  return TABS[(idx + 1) % TABS.length];
+}
+
+function cycleTabBackward(current: TabType): TabType {
+  const idx = TABS.indexOf(current);
+  return TABS[(idx - 1 + TABS.length) % TABS.length];
+}
+
+export function App(props: AppProps) {
+  const renderer = useRenderer();
+  const terminalDimensions = useTerminalDimensions();
+  const columns = () => terminalDimensions().width;
+  const rows = () => terminalDimensions().height;
+
+  const settings = loadSettings();
+  const [activeTab, setActiveTab] = createSignal<TabType>(props.initialTab ?? "overview");
+  const [enabledSources, setEnabledSources] = createSignal<Set<SourceType>>(
+    new Set(props.enabledSources ?? ALL_SOURCES)
+  );
+  const [sortBy, setSortBy] = createSignal<SortType>(props.sortBy ?? "cost");
+  const [sortDesc, setSortDesc] = createSignal(props.sortDesc ?? true);
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [scrollOffset, setScrollOffset] = createSignal(0);
+  const [colorPalette, setColorPalette] = createSignal<ColorPaletteName>(
+    props.colorPalette ?? (settings.colorPalette as ColorPaletteName) ?? DEFAULT_PALETTE
+  );
+
+  const dateFilters: DateFilters = {
+    since: props.since,
+    until: props.until,
+    year: props.year,
+  };
+
+  const { data, loading, error, refresh, loadingPhase, isRefreshing } = useData(() => enabledSources(), dateFilters);
+  
+  const cacheTimestamp = () => !isRefreshing() && !loading() ? getCacheTimestamp() : null;
+  
+  const [selectedDate, setSelectedDate] = createSignal<string | null>(null);
+
+  const [statusMessage, setStatusMessage] = createSignal<string | null>(null);
+  let statusTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const showStatus = (msg: string, duration = 2000) => {
+    if (statusTimeout) clearTimeout(statusTimeout);
+    setStatusMessage(msg);
+    statusTimeout = setTimeout(() => setStatusMessage(null), duration);
+  };
+
+  onCleanup(() => {
+    if (statusTimeout) clearTimeout(statusTimeout);
+  });
+
+  const contentHeight = () => Math.max(rows() - 6, 12);
+  const overviewChartHeight = () => Math.max(5, Math.floor(contentHeight() * 0.35));
+  const overviewListHeight = () => Math.max(4, contentHeight() - overviewChartHeight() - 4);
+  const overviewItemsPerPage = () => Math.max(1, Math.floor(overviewListHeight() / 2));
+
+  const handleSourceToggle = (source: SourceType) => {
+    const newSources = new Set(enabledSources());
+    if (newSources.has(source)) {
+      if (newSources.size > 1) {
+        newSources.delete(source);
+      }
+    } else {
+      newSources.add(source);
+    }
+    setEnabledSources(newSources);
+  };
+
+  const handlePaletteChange = () => {
+    const currentIdx = PALETTE_NAMES.indexOf(colorPalette());
+    const nextIdx = (currentIdx + 1) % PALETTE_NAMES.length;
+    const newPalette = PALETTE_NAMES[nextIdx];
+    saveSettings({ colorPalette: newPalette });
+    setColorPalette(newPalette);
+  };
+
+  const handleSortChange = (sort: SortType) => {
+    setSortBy(sort);
+    setSortDesc(true);
+  };
+
+  useKeyboard((key) => {
+    if (key.name === "q") {
+      renderer.destroy();
+      return;
+    }
+
+    if (key.name === "r") {
+      refresh();
+      return;
+    }
+
+    if (key.name === "tab" || key.name === "d" || key.name === "right") {
+      setActiveTab(cycleTabForward(activeTab()));
+      setSelectedIndex(0);
+      setScrollOffset(0);
+      return;
+    }
+
+    if (key.name === "left") {
+      setActiveTab(cycleTabBackward(activeTab()));
+      setSelectedIndex(0);
+      setScrollOffset(0);
+      return;
+    }
+
+    if (key.name === "c" && !key.meta && !key.ctrl) {
+      setSortBy("cost");
+      setSortDesc(true);
+      return;
+    }
+
+    if (key.name === "y") {
+      const d = data();
+      if (!d) return;
+      
+      let textToCopy = "";
+      const tab = activeTab();
+      
+      if (tab === "model") {
+        const sorted = [...d.modelEntries].sort((a, b) => {
+          if (sortBy() === "cost") return sortDesc() ? b.cost - a.cost : a.cost - b.cost;
+          if (sortBy() === "tokens") return sortDesc() ? b.total - a.total : a.total - b.total;
+          return sortDesc() ? b.model.localeCompare(a.model) : a.model.localeCompare(b.model);
+        });
+        const entry = sorted[selectedIndex()];
+        if (entry) {
+          textToCopy = `${entry.source} ${entry.model}: ${entry.total.toLocaleString()} tokens, $${entry.cost.toFixed(2)}`;
+        }
+      } else if (tab === "daily") {
+        const sorted = [...d.dailyEntries].sort((a, b) => {
+          if (sortBy() === "cost") return sortDesc() ? b.cost - a.cost : a.cost - b.cost;
+          if (sortBy() === "tokens") return sortDesc() ? b.total - a.total : a.total - b.total;
+          return sortDesc() ? b.date.localeCompare(a.date) : a.date.localeCompare(b.date);
+        });
+        const entry = sorted[selectedIndex()];
+        if (entry) {
+          textToCopy = `${entry.date}: ${entry.total.toLocaleString()} tokens, $${entry.cost.toFixed(2)}`;
+        }
+      } else if (tab === "overview") {
+        const model = d.topModels[scrollOffset() + selectedIndex()];
+        if (model) {
+          textToCopy = `${model.modelId}: ${model.totalTokens.toLocaleString()} tokens, $${model.cost.toFixed(2)}`;
+        }
+      }
+      
+      if (textToCopy) {
+        clipboardy.write(textToCopy)
+          .then(() => showStatus("Copied to clipboard"))
+          .catch(() => showStatus("Failed to copy"));
+      }
+      return;
+    }
+    if (key.name === "t") {
+      setSortBy("tokens");
+      setSortDesc(true);
+      return;
+    }
+
+    if (key.name === "p") {
+      handlePaletteChange();
+      return;
+    }
+
+    if (key.name === "1") { handleSourceToggle("opencode"); return; }
+    if (key.name === "2") { handleSourceToggle("claude"); return; }
+    if (key.name === "3") { handleSourceToggle("codex"); return; }
+    if (key.name === "4") { handleSourceToggle("cursor"); return; }
+    if (key.name === "5") { handleSourceToggle("gemini"); return; }
+
+    if (key.name === "up") {
+      if (activeTab() === "overview") {
+        if (selectedIndex() > 0) {
+          setSelectedIndex(selectedIndex() - 1);
+        } else if (scrollOffset() > 0) {
+          setScrollOffset(scrollOffset() - 1);
+        }
+      } else {
+        setSelectedIndex(Math.max(0, selectedIndex() - 1));
+      }
+      return;
+    }
+
+    if (key.name === "down") {
+      if (activeTab() === "overview") {
+        const maxVisible = Math.min(overviewItemsPerPage(), (data()?.topModels.length ?? 0) - scrollOffset());
+        const maxOffset = Math.max(0, (data()?.topModels.length ?? 0) - overviewItemsPerPage());
+        if (selectedIndex() < maxVisible - 1) {
+          setSelectedIndex(selectedIndex() + 1);
+        } else if (scrollOffset() < maxOffset) {
+          setScrollOffset(scrollOffset() + 1);
+        }
+      } else {
+        const d = data();
+        const maxIndex = activeTab() === "model" 
+          ? (d?.modelEntries.length ?? 0)
+          : (d?.dailyEntries.length ?? 0);
+        if (maxIndex > 0) {
+          setSelectedIndex(Math.min(selectedIndex() + 1, maxIndex - 1));
+        }
+      }
+      return;
+    }
+
+    if (key.name === "e" && data()) {
+      const d = data()!;
+      const exportData = {
+        exportedAt: new Date().toISOString(),
+        totalCost: d.totalCost,
+        modelCount: d.modelCount,
+        models: d.modelEntries,
+        daily: d.dailyEntries,
+        stats: d.stats,
+      };
+      const filename = `tokscale-export-${new Date().toISOString().split("T")[0]}.json`;
+      import("node:fs")
+        .then((fs) => {
+          fs.writeFileSync(filename, JSON.stringify(exportData, null, 2));
+          showStatus(`Exported to ${filename}`);
+        })
+        .catch(() => showStatus("Export failed"));
+      return;
+    }
+  });
+
+  const handleTabClick = (tab: TabType) => {
+    setActiveTab(tab);
+    setSelectedIndex(0);
+    setScrollOffset(0);
+    setSelectedDate(null);
+  };
+
+  return (
+    <box flexDirection="column" width={columns()} height={rows()}>
+      <Header activeTab={activeTab()} onTabClick={handleTabClick} width={columns()} />
+
+      <box flexDirection="column" flexGrow={1} paddingX={1}>
+        <Switch>
+          <Match when={loading()}>
+            <LoadingSpinner phase={loadingPhase()} />
+          </Match>
+          <Match when={error()}>
+            <box justifyContent="center" alignItems="center" flexGrow={1}>
+              <text fg="red">{`Error: ${error()}`}</text>
+            </box>
+          </Match>
+          <Match when={data()}>
+            <Switch>
+              <Match when={activeTab() === "overview"}>
+                <OverviewView
+                  data={data()!}
+                  sortBy={sortBy()}
+                  sortDesc={sortDesc()}
+                  selectedIndex={selectedIndex}
+                  scrollOffset={scrollOffset}
+                  height={contentHeight()}
+                  width={columns()}
+                />
+              </Match>
+              <Match when={activeTab() === "model"}>
+                <ModelView
+                  data={data()!}
+                  sortBy={sortBy()}
+                  sortDesc={sortDesc()}
+                  selectedIndex={selectedIndex}
+                  height={contentHeight()}
+                  width={columns()}
+                />
+              </Match>
+              <Match when={activeTab() === "daily"}>
+                <DailyView
+                  data={data()!}
+                  sortBy={sortBy()}
+                  sortDesc={sortDesc()}
+                  selectedIndex={selectedIndex}
+                  height={contentHeight()}
+                  width={columns()}
+                />
+              </Match>
+              <Match when={activeTab() === "stats"}>
+                <StatsView
+                  data={data()!}
+                  height={contentHeight()}
+                  colorPalette={colorPalette()}
+                  width={columns()}
+                  selectedDate={selectedDate()}
+                />
+              </Match>
+            </Switch>
+          </Match>
+        </Switch>
+      </box>
+
+      <Footer
+        enabledSources={enabledSources()}
+        sortBy={sortBy()}
+        totals={data()?.totals}
+        modelCount={data()?.modelCount ?? 0}
+        activeTab={activeTab()}
+        scrollStart={scrollOffset()}
+        scrollEnd={Math.min(scrollOffset() + overviewItemsPerPage(), data()?.topModels.length ?? 0)}
+        totalItems={data()?.topModels.length}
+        colorPalette={colorPalette()}
+        statusMessage={statusMessage()}
+        isRefreshing={isRefreshing()}
+        loadingPhase={loadingPhase()}
+        cacheTimestamp={cacheTimestamp()}
+        width={columns()}
+        onSourceToggle={handleSourceToggle}
+        onSortChange={handleSortChange}
+        onPaletteChange={handlePaletteChange}
+        onRefresh={refresh}
+      />
+    </box>
+  );
+}

package/src/tui/components/BarChart.tsx

@@ -0,0 +1,198 @@
+import { For, Show, createMemo } from "solid-js";
+import { formatTokensCompact } from "../utils/format.js";
+import { isNarrow, isVeryNarrow } from "../utils/responsive.js";
+
+export interface ChartDataPoint {
+  date: string;
+  models: { modelId: string; tokens: number; color: string }[];
+  total: number;
+}
+
+interface BarChartProps {
+  data: ChartDataPoint[];
+  width: number;
+  height: number;
+}
+
+const BLOCKS = [" ", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
+const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const REPEAT_CACHE_MAX_SIZE = 256;
+
+const repeatCache = new Map<string, string>();
+function getRepeatedString(char: string, count: number): string {
+  const key = `${char}:${count}`;
+  let cached = repeatCache.get(key);
+  if (!cached) {
+    if (repeatCache.size >= REPEAT_CACHE_MAX_SIZE) {
+      const firstKey = repeatCache.keys().next().value;
+      if (firstKey) repeatCache.delete(firstKey);
+    }
+    cached = char.repeat(count);
+    repeatCache.set(key, cached);
+  }
+  return cached;
+}
+
+export function BarChart(props: BarChartProps) {
+  const data = () => props.data;
+  const width = () => props.width;
+  const height = () => props.height;
+
+  const isNarrowTerminal = () => isNarrow(width());
+  const isVeryNarrowTerminal = () => isVeryNarrow(width());
+
+  const safeHeight = () => Math.max(height(), 1);
+  
+  const maxTotal = createMemo(() => {
+    const arr = data();
+    if (arr.length === 0) return 1;
+    let max = arr[0].total;
+    for (let i = 1; i < arr.length; i++) {
+      if (arr[i].total > max) max = arr[i].total;
+    }
+    return Math.max(max, 1);
+  });
+
+  const chartWidth = () => Math.max(width() - 8, 20);
+  const barWidth = () => Math.max(1, Math.floor(chartWidth() / Math.min(data().length, 52)));
+  const visibleBars = () => Math.min(data().length, Math.floor(chartWidth() / barWidth()));
+  const visibleData = createMemo(() => data().slice(-visibleBars()));
+
+  const sortedModelsMap = createMemo(() => {
+    const vd = visibleData();
+    const map = new Map<string, { modelId: string; tokens: number; color: string }[]>();
+    for (const point of vd) {
+      const models = point.models ?? [];
+      const sorted = [...models].sort((a, b) => a.modelId.localeCompare(b.modelId));
+      map.set(point.date, sorted);
+    }
+    return map;
+  });
+
+  const rowIndices = createMemo(() => {
+    const sh = safeHeight();
+    const indices: number[] = new Array(sh);
+    for (let i = 0; i < sh; i++) {
+      indices[i] = sh - 1 - i;
+    }
+    return indices;
+  });
+
+  const dateLabels = createMemo(() => {
+    const vd = visibleData();
+    if (vd.length === 0) return [];
+    
+    const labelInterval = Math.max(1, Math.floor(vd.length / (isVeryNarrowTerminal() ? 2 : 3)));
+    const labels: string[] = [];
+    
+    for (let i = 0; i < vd.length; i += labelInterval) {
+      const dateStr = vd[i].date;
+      const parts = dateStr.split("-");
+      if (parts.length === 3) {
+        const month = parseInt(parts[1], 10);
+        const day = parseInt(parts[2], 10);
+        labels.push(isVeryNarrowTerminal() ? `${month}/${day}` : `${MONTH_NAMES[month - 1]} ${day}`);
+      } else {
+        labels.push(dateStr.slice(5));
+      }
+    }
+    return labels;
+  });
+
+  const axisWidth = () => Math.min(chartWidth(), visibleBars() * barWidth());
+  const labelPadding = () => {
+    const labels = dateLabels();
+    return labels.length > 0 ? Math.floor(axisWidth() / labels.length) : 0;
+  };
+
+  const chartTitle = () => isVeryNarrowTerminal() ? "Tokens" : "Tokens per Day";
+
+  const getBarContent = (point: ChartDataPoint, row: number): { char: string; color: string } => {
+    const mt = maxTotal();
+    const sh = safeHeight();
+    const rowThreshold = ((row + 1) / sh) * mt;
+    const prevThreshold = (row / sh) * mt;
+    const thresholdDiff = rowThreshold - prevThreshold;
+    const bw = barWidth();
+
+    if (point.total <= prevThreshold) {
+      return { char: getRepeatedString(" ", bw), color: "dim" };
+    }
+
+    const sortedModels = sortedModelsMap().get(point.date) ?? [];
+    if (sortedModels.length === 0) {
+      return { char: getRepeatedString(" ", bw), color: "dim" };
+    }
+
+    let currentHeight = 0;
+    let maxOverlap = 0;
+    let color = sortedModels[0].color;
+
+    const rowStart = prevThreshold;
+    const rowEnd = rowThreshold;
+
+    for (const m of sortedModels) {
+      const mStart = currentHeight;
+      const mEnd = currentHeight + m.tokens;
+      currentHeight += m.tokens;
+
+      const overlapStart = Math.max(mStart, rowStart);
+      const overlapEnd = Math.min(mEnd, rowEnd);
+      const overlap = Math.max(0, overlapEnd - overlapStart);
+
+      if (overlap > maxOverlap) {
+        maxOverlap = overlap;
+        color = m.color;
+      }
+    }
+
+    if (point.total >= rowThreshold) {
+      return { char: getRepeatedString("█", bw), color };
+    }
+
+    const ratio = thresholdDiff > 0 ? (point.total - prevThreshold) / thresholdDiff : 1;
+    const blockIndex = Math.min(8, Math.max(1, Math.floor(ratio * 8)));
+    return { char: getRepeatedString(BLOCKS[blockIndex], bw), color };
+  };
+
+  return (
+    <Show when={data().length > 0} fallback={<text dim>No chart data</text>}>
+      <box flexDirection="column">
+        <text bold>{chartTitle()}</text>
+        <For each={rowIndices()}>
+          {(row) => {
+            const yLabelWidth = isVeryNarrowTerminal() ? 5 : 6;
+            const yLabel = row === safeHeight() - 1 
+              ? formatTokensCompact(maxTotal()).padStart(yLabelWidth) 
+              : " ".repeat(yLabelWidth);
+            return (
+              <box flexDirection="row">
+                <text dim>{yLabel}│</text>
+                <For each={visibleData()}>
+                  {(point) => {
+                    const bar = getBarContent(point, row);
+                    return bar.color === "dim" 
+                      ? <text dim>{bar.char}</text>
+                      : <text fg={bar.color}>{bar.char}</text>;
+                  }}
+                </For>
+              </box>
+            );
+          }}
+        </For>
+        <box flexDirection="row">
+          <text dim>{isVeryNarrowTerminal() ? "    0│" : "     0│"}</text>
+          <text dim>{getRepeatedString("─", axisWidth())}</text>
+        </box>
+        <Show when={dateLabels().length > 0}>
+          <box flexDirection="row">
+            <text dim>{isVeryNarrowTerminal() ? "      " : "       "}</text>
+            <text dim>
+              {dateLabels().map((l) => l.padEnd(labelPadding())).join("")}
+            </text>
+          </box>
+        </Show>
+      </box>
+    </Show>
+  );
+}

package/src/tui/components/DailyView.tsx

@@ -0,0 +1,113 @@
+import { For, createMemo, type Accessor } from "solid-js";
+import type { TUIData, SortType } from "../hooks/useData.js";
+import { formatTokensCompact, formatCostFull } from "../utils/format.js";
+import { isNarrow } 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 = 0;
+const MIN_DATE_COLUMN = 14;
+
+interface DailyViewProps {
+  data: TUIData;
+  sortBy: SortType;
+  sortDesc: boolean;
+  selectedIndex: Accessor<number>;
+  height: number;
+  width?: number;
+}
+
+export function DailyView(props: DailyViewProps) {
+  const isNarrowTerminal = () => isNarrow(props.width);
+  const terminalWidth = () => props.width ?? process.stdout.columns ?? 80;
+  
+  const dateColumnWidths = createMemo(() => {
+    const metricWidth = isNarrowTerminal() ? METRIC_COLUMNS_WIDTH_NARROW : METRIC_COLUMNS_WIDTH_FULL;
+    const minDate = MIN_DATE_COLUMN;
+    const available = Math.max(terminalWidth() - SIDE_PADDING - metricWidth, minDate);
+    const dateColumn = Math.max(minDate, available);
+
+    return {
+      column: dateColumn,
+      text: dateColumn,
+    };
+  });
+  
+  const sortedEntries = createMemo(() => {
+    const entries = props.data.dailyEntries;
+    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.date.localeCompare(b.date);
+      return sortDesc ? -cmp : cmp;
+    });
+  });
+
+  const visibleEntries = createMemo(() => sortedEntries().slice(0, props.height - 3));
+
+  const sortArrow = () => (props.sortDesc ? "▼" : "▲");
+  const dateHeader = () => "Date";
+  const totalHeader = () => (props.sortBy === "tokens" ? `${sortArrow()} Total` : "Total");
+  const costHeader = () => (props.sortBy === "cost" ? `${sortArrow()} Cost` : "Cost");
+
+  const renderHeader = () => {
+    const dateColWidth = dateColumnWidths().column;
+    if (isNarrowTerminal()) {
+      return `${"Date".padEnd(dateColWidth)}${totalHeader().padStart(TOTAL_COL_WIDTH)}${costHeader().padStart(COST_COL_WIDTH)}`;
+    }
+    return `${("  " + dateHeader()).padEnd(dateColWidth)}${"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 renderRow = (entry: typeof visibleEntries extends () => (infer T)[] ? T : never) => {
+    const dateColWidth = dateColumnWidths().column;
+    if (isNarrowTerminal()) {
+      return `${entry.date.padEnd(dateColWidth)}${formatTokensCompact(entry.total).padStart(TOTAL_COL_WIDTH)}`;
+    }
+    return `${entry.date.padEnd(dateColWidth)}${formatTokensCompact(entry.input).padStart(INPUT_COL_WIDTH)}${formatTokensCompact(entry.output).padStart(OUTPUT_COL_WIDTH)}${formatTokensCompact(entry.cache).padStart(CACHE_COL_WIDTH)}${formatTokensCompact(entry.total).padStart(TOTAL_COL_WIDTH)}`;
+  };
+
+  return (
+    <box flexDirection="column">
+      <box flexDirection="row">
+        <text fg="cyan" bold>
+          {renderHeader()}
+        </text>
+      </box>
+
+      <For each={visibleEntries()}>
+        {(entry, i) => {
+          const isActive = createMemo(() => i() === props.selectedIndex());
+          const rowBg = createMemo(() => isActive() ? "blue" : (i() % 2 === 1 ? STRIPE_BG : undefined));
+          
+          return (
+            <box flexDirection="row">
+              <text
+                bg={rowBg()}
+                fg={isActive() ? "white" : undefined}
+              >
+                {renderRow(entry)}
+              </text>
+              <text
+                fg="green"
+                bg={rowBg()}
+              >
+                {formatCostFull(entry.cost).padStart(COST_COL_WIDTH)}
+              </text>
+            </box>
+          );
+        }}
+      </For>
+    </box>
+  );
+}