tokmon 0.20.6 → 0.22.0

package/dist/{bootstrap-ink-WWSVQO6D.js → bootstrap-ink-P3PH2EV4.js}

@@ -13,12 +13,13 @@ import {
   cursorModelSpend,
   detectProviders,
   fetchPeak,
+  modelColor,
   resolveTimezone,
   shortDate,
   systemTimezone,
   time,
   tokens
-} from "./chunk-YWJT3OG4.js";
+} from "./chunk-2PIYMU6W.js";
 import {
   COLOR_PALETTE,
   DEFAULTS,
@@ -32,7 +33,7 @@ import {
   sanitizeTyped,
   saveConfigSync,
   snapshotCacheFile
-} from "./chunk-XQEJ4WQ5.js";
+} from "./chunk-7MFZMI5C.js";
 import {
   glyphs
 } from "./chunk-RF4GGQGM.js";
@@ -42,8 +43,8 @@ import { render } from "ink";
 import { MouseProvider } from "@zenobius/ink-mouse";
 
 // src/app.tsx
-import { useState as useState4, useEffect as useEffect4, useCallback, useRef as useRef3, useMemo as useMemo2 } from "react";
-import { Box as Box11, Text as Text11, useInput, useStdout, useApp } from "ink";
+import { useState as useState8, useEffect as useEffect7, useCallback as useCallback4, useRef as useRef6, useMemo as useMemo2 } from "react";
+import { Box as Box11, Text as Text11, useInput, useApp } from "ink";
 import { useMouse } from "@zenobius/ink-mouse";
 
 // src/config-sync.ts
@@ -80,22 +81,6 @@ function reconcileDaemonConfig(previous, daemonConfig, pendingLocalConfig) {
   return { config: daemonConfig, pendingLocalConfig: null };
 }
 
-// src/client/seed-cache.ts
-import { readFile } from "fs/promises";
-async function loadSeedSnapshot() {
-  try {
-    const parsed = JSON.parse(await readFile(snapshotCacheFile(), "utf-8"));
-    if (!parsed || !Array.isArray(parsed.accounts)) return {};
-    const out = {};
-    for (const a of parsed.accounts) {
-      if (a.dashboard || a.billing) out[a.id] = { dashboard: a.dashboard ?? null, billing: a.billing ?? null };
-    }
-    return out;
-  } catch {
-    return {};
-  }
-}
-
 // src/ui/shared.tsx
 import { appendFileSync } from "fs";
 import { memo, useEffect, useRef, useState } from "react";
@@ -274,18 +259,42 @@ var CARD_H = { full: 14, compact: 12, mini: 8 };
 var VARIANT_ORDER = ["full", "compact", "mini"];
 var INDICATOR_ROWS = 1;
 var MAX_SINGLE_CARD = Math.round(MIN_CARD * 1.6);
-function chooseLayout(content, budget, n, single, cols) {
+function estimateCardHeights(groups, stats) {
+  return groups.map((g) => {
+    const meta = PROVIDERS[g.provider];
+    let h = 3;
+    if (meta.hasUsage) h += 5;
+    if (meta.hasBilling) {
+      if (meta.hasUsage) h += 1;
+      const multi = g.accounts.length > 1;
+      g.accounts.forEach((a, i) => {
+        const metricRows = stats.get(a.id)?.billing?.metrics.length || 1;
+        h += metricRows + (multi ? 1 : 0) + (multi && i > 0 ? 1 : 0);
+      });
+    }
+    h += 2;
+    return Math.max(h, CARD_H.mini);
+  });
+}
+function chooseLayout(content, budget, n, single, cols, heights) {
   if (n <= 0) return { ncols: 1, variant: "mini", cardsPerPage: 1, pageCount: 1 };
+  const heightFor = (variant) => {
+    if (!heights || heights.length === 0) return CARD_H[variant];
+    if (variant === "mini") return CARD_H.mini;
+    const hs = heights.map((h) => variant === "full" ? h : Math.max(h - 2, CARD_H.mini - 2));
+    return Math.max(...hs);
+  };
   const gridHeight = (rows, H2) => rows * H2 + Math.max(0, rows - 1);
   const colCap = single ? 1 : cols >= 3 * MIN_CARD_DENSE + 2 * GAP ? 3 : cols >= 2 * MIN_CARD + GAP ? 2 : 1;
   const maxCols = Math.max(1, Math.min(colCap, n));
   const cardWidthAt = (nc) => nc <= 1 ? content : Math.floor((content - GAP * (nc - 1)) / nc);
   const minWidthAt = (nc) => nc >= 3 ? MIN_CARD_DENSE : MIN_CARD;
   for (const variant of VARIANT_ORDER) {
+    const H2 = heightFor(variant);
     for (let nc = maxCols; nc >= 1; nc--) {
       if (nc > 1 && cardWidthAt(nc) < minWidthAt(nc)) continue;
       const rows = Math.ceil(n / nc);
-      if (gridHeight(rows, CARD_H[variant]) <= budget) {
+      if (gridHeight(rows, H2) <= budget) {
         return { ncols: nc, variant, cardsPerPage: n, pageCount: 1 };
       }
     }
@@ -304,6 +313,16 @@ function chooseLayout(content, budget, n, single, cols) {
   const pageCount = Math.max(1, Math.ceil(n / cardsPerPage));
   return { ncols, variant: "mini", cardsPerPage, pageCount };
 }
+function computeDashLayout(groups, stats, cols, budget, focusId, layoutPref) {
+  const content = Math.max(30, cols - 4);
+  const heights = estimateCardHeights(groups, stats);
+  const single = focusId !== null || layoutPref === "single";
+  if (layoutPref === "single" && focusId === null && groups.length > 1) {
+    const one = chooseLayout(content, budget, 1, true, cols, [Math.max(...heights)]);
+    return { ...one, cardsPerPage: 1, pageCount: groups.length };
+  }
+  return chooseLayout(content, budget, groups.length, single, cols, heights);
+}
 var DashboardView = memo2(function DashboardView2({ groups, stats, cols, budget, focusId, layout, page = 0 }) {
   if (groups.length === 0) {
     return /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
@@ -312,17 +331,14 @@ var DashboardView = memo2(function DashboardView2({ groups, stats, cols, budget,
       " press s to pick providers."
     ] });
   }
-  let shown = groups;
-  if (layout === "single" && focusId === null) shown = groups.slice(0, 1);
-  const single = focusId !== null || layout === "single";
-  const content = Math.max(MIN_CARD, cols - 4);
-  const { ncols, variant, cardsPerPage, pageCount } = chooseLayout(content, budget, shown.length, single, cols);
+  const content = Math.max(30, cols - 4);
+  const { ncols, variant, cardsPerPage, pageCount } = computeDashLayout(groups, stats, cols, budget, focusId, layout);
   let cardW = ncols <= 1 ? content : Math.floor((content - GAP * (ncols - 1)) / ncols);
   if (ncols === 1 && cardW > MAX_SINGLE_CARD) cardW = MAX_SINGLE_CARD;
   const pg = pageCount > 1 ? (page % pageCount + pageCount) % pageCount : 0;
-  const visible = pageCount > 1 ? shown.slice(pg * cardsPerPage, pg * cardsPerPage + cardsPerPage) : shown;
+  const visible = pageCount > 1 ? groups.slice(pg * cardsPerPage, pg * cardsPerPage + cardsPerPage) : groups;
   return /* @__PURE__ */ jsxs2(Box2, { height: budget, flexDirection: "column", overflow: "hidden", children: [
-    /* @__PURE__ */ jsx2(Box2, { width: content, flexWrap: "wrap", columnGap: GAP, rowGap: 1, children: visible.map((g) => /* @__PURE__ */ jsx2(Box2, { flexShrink: 0, children: /* @__PURE__ */ jsx2(ProviderCard, { provider: g.provider, accounts: g.accounts, stats, width: cardW, variant }) }, g.provider)) }),
+    /* @__PURE__ */ jsx2(Box2, { width: content, flexWrap: "wrap", columnGap: GAP, rowGap: 1, alignItems: "flex-start", children: visible.map((g) => /* @__PURE__ */ jsx2(Box2, { flexShrink: 0, children: /* @__PURE__ */ jsx2(ProviderCard, { provider: g.provider, accounts: g.accounts, stats, width: cardW, variant }) }, g.provider)) }),
     pageCount > 1 && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
       "  ",
       glyphs().middot,
@@ -346,7 +362,6 @@ function ProviderCard({ provider, accounts, stats, width, variant }) {
   const plan = items.map((i) => i.s?.billing?.plan).find(Boolean) ?? null;
   const activity = items.map((i) => i.s?.billing?.activity).find(Boolean) ?? null;
   const inner = width - 4;
-  const barW = Math.max(10, Math.min(46, inner - 20));
   const hasSpark = !!agg && agg.series.some((v) => v > 0);
   const showBars = variant !== "mini";
   const showSpark = variant === "full";
@@ -375,7 +390,7 @@ function ProviderCard({ provider, accounts, stats, width, variant }) {
     ] })),
     meta.hasBilling && showBars && /* @__PURE__ */ jsxs2(Fragment, { children: [
       meta.hasUsage && /* @__PURE__ */ jsx2(Rule, { inner }),
-      /* @__PURE__ */ jsx2(LimitsBlock, { items, barW })
+      /* @__PURE__ */ jsx2(LimitsBlock, { items, inner })
     ] }),
     meta.hasBilling && !showBars && !meta.hasUsage && /* @__PURE__ */ jsx2(CompactBilling, { items }),
     hasSpark && showSpark && /* @__PURE__ */ jsxs2(Fragment, { children: [
@@ -399,7 +414,7 @@ function CompactBilling({ items }) {
     glyphs().ellipsis
   ] });
   if (billing.error) return /* @__PURE__ */ jsx2(Text2, { color: "red", children: billing.error });
-  const m = billing.metrics[0];
+  const m = billing.metrics.find((x) => x.primary) ?? billing.metrics[0];
   if (!m) return /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "No data" });
   return /* @__PURE__ */ jsx2(Text2, { bold: true, color: "yellow", children: metricValueText(m) });
 }
@@ -443,8 +458,15 @@ function KpiLine({ agg }) {
     ] })
   ] });
 }
-function LimitsBlock({ items, barW }) {
+function accountTitle(account, billing) {
+  const email = billing?.email;
+  return email && !account.name.includes("@") ? `${account.name} ${email}` : account.name;
+}
+function LimitsBlock({ items, inner }) {
   const showName = items.length > 1;
+  const labels = items.flatMap((i) => i.s?.billing?.metrics ?? []).map((m) => m.label.length);
+  const labelW = Math.min(Math.max(7, ...labels) + 1, 14);
+  const barW = Math.max(10, Math.min(46, inner - labelW - 13));
   return /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: items.map(({ account, s }, idx) => {
     const billing = s?.billing;
     return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: showName && idx > 0 ? 1 : 0, children: [
@@ -453,20 +475,20 @@ function LimitsBlock({ items, barW }) {
           glyphs().dot,
           " "
         ] }),
-        /* @__PURE__ */ jsx2(Text2, { bold: true, children: truncateName(account.name, 22) })
+        /* @__PURE__ */ jsx2(Text2, { bold: true, children: truncateName(accountTitle(account, billing), Math.max(22, inner - 2)) })
       ] }),
       !billing ? /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
         "Fetching",
         glyphs().ellipsis
-      ] }) : billing.error ? /* @__PURE__ */ jsx2(Text2, { color: "red", children: billing.error }) : billing.metrics.length === 0 ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "No data" }) : billing.metrics.map((m, i) => /* @__PURE__ */ jsx2(MetricRow, { m, color: account.color, barW }, `${m.label}${i}`))
+      ] }) : billing.error ? /* @__PURE__ */ jsx2(Text2, { color: "red", wrap: "truncate-end", children: billing.error }) : billing.metrics.length === 0 ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "No data" }) : billing.metrics.map((m, i) => /* @__PURE__ */ jsx2(MetricRow, { m, color: account.color, barW, labelW }, `${m.label}${i}`))
     ] }, account.id);
   }) });
 }
-function MetricRow({ m, color, barW }) {
+function MetricRow({ m, color, barW, labelW }) {
   if (m.format.kind === "percent") {
     const barColor = m.used >= 90 ? "red" : m.used >= 75 ? "yellow" : color;
     return /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsx2(Box2, { width: 7, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, wrap: "truncate", children: m.label }) }),
+      /* @__PURE__ */ jsx2(Box2, { width: labelW, flexShrink: 0, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, wrap: "truncate", children: m.label }) }),
       /* @__PURE__ */ jsx2(Bar, { pct: m.used, color: barColor, width: barW }),
       /* @__PURE__ */ jsx2(Box2, { width: 5, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
         Math.round(m.used),
@@ -476,7 +498,7 @@ function MetricRow({ m, color, barW }) {
     ] });
   }
   return /* @__PURE__ */ jsxs2(Box2, { children: [
-    /* @__PURE__ */ jsx2(Box2, { width: 7, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, wrap: "truncate", children: m.label }) }),
+    /* @__PURE__ */ jsx2(Box2, { width: labelW, flexShrink: 0, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, wrap: "truncate", children: m.label }) }),
     /* @__PURE__ */ jsx2(Text2, { bold: true, color: "yellow", children: metricValueText(m) })
   ] });
 }
@@ -1065,7 +1087,7 @@ var TableProviderBar = memo4(function TableProviderBar2({ providers, active, onS
     /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "  p/P switch" })
   ] });
 });
-var ControlBar = memo4(function ControlBar2({ views, period, sort, search, searchCaret, searching, showPeriod }) {
+var ControlBar = memo4(function ControlBar2({ views, period, sort, model, search, searchCaret, searching, showPeriod, showModel }) {
   return /* @__PURE__ */ jsxs4(Box4, { children: [
     showPeriod && /* @__PURE__ */ jsxs4(Fragment3, { children: [
       views.map((v, i) => /* @__PURE__ */ jsx4(Box4, { marginRight: 2, children: i === period ? /* @__PURE__ */ jsxs4(Text4, { bold: true, color: "cyan", children: [
@@ -1082,6 +1104,15 @@ var ControlBar = memo4(function ControlBar2({ views, period, sort, search, searc
       glyphs().middot,
       "  "
     ] }),
+    showModel && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "model " }),
+      /* @__PURE__ */ jsx4(Text4, { bold: true, color: model ? modelColor(model) : "cyan", children: model ?? "all" }),
+      /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+        "  m model  ",
+        glyphs().middot,
+        "  "
+      ] })
+    ] }),
     searching ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
       /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "/" }),
       /* @__PURE__ */ jsx4(CaretText, { value: search, caret: searchCaret, color: "cyan" })
@@ -1568,6 +1599,9 @@ var Footer = memo6(function Footer2({ hasAccounts, paginated, cols }) {
   const showOpt = IS_APPLE_TERMINAL && inner >= BASE + OPT;
   const showJump = hasAccounts && inner >= BASE + (showOpt ? OPT : 0) + JUMP + (paginated ? PAGE : 0);
   const showPage = paginated && inner >= BASE + (showOpt ? OPT : 0) + (showJump ? JUMP : 0) + PAGE;
+  if (inner < BASE) {
+    return /* @__PURE__ */ jsx9(Box9, { marginTop: 1, flexWrap: "nowrap", children: /* @__PURE__ */ jsx9(Text9, { dimColor: true, wrap: "truncate-end", children: "O=repo  W=web  s=settings  q=quit" }) });
+  }
   return /* @__PURE__ */ jsxs9(Box9, { marginTop: 1, flexWrap: "nowrap", children: [
     /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "by " }),
     /* @__PURE__ */ jsx9(LinkBox, { onClick: () => openUrl(REPO_URL), children: /* @__PURE__ */ jsx9(Transform, { transform: (s) => osc8(s, REPO_URL), children: /* @__PURE__ */ jsx9(Text9, { underline: true, children: "David Ilie" }) }) }),
@@ -2014,6 +2048,45 @@ function sortRows(rows, sortIdx) {
       return sorted;
   }
 }
+function tableModelOptions(rows) {
+  const models = /* @__PURE__ */ new Set();
+  for (const row of rows) for (const model of row.breakdown) models.add(model.name);
+  return [...models].sort();
+}
+function cycleTableModel(current, models, dir) {
+  if (models.length === 0) return null;
+  const idx = current ? models.indexOf(current) : -1;
+  if (dir === 1) {
+    if (idx < 0) return models[0];
+    return idx === models.length - 1 ? null : models[idx + 1];
+  }
+  if (idx < 0) return models[models.length - 1];
+  return idx === 0 ? null : models[idx - 1];
+}
+function filterRowsByModel(rows, model) {
+  if (!model) return rows;
+  return rows.flatMap((row) => {
+    const detail = row.breakdown.find((m) => m.name === model);
+    if (!detail) return [];
+    const input = detail.input;
+    const output = detail.output;
+    const cacheCreate = detail.cacheCreate;
+    const cacheRead = detail.cacheRead;
+    return [{
+      label: row.label,
+      models: [model],
+      input,
+      output,
+      cacheCreate,
+      cacheRead,
+      cacheSavings: detail.cacheSavings,
+      total: input + output + cacheCreate + cacheRead,
+      cost: detail.cost,
+      count: detail.count,
+      breakdown: [{ ...detail }]
+    }];
+  });
+}
 function filterTokenRows(rows, q) {
   if (!q) return rows;
   const s = q.toLowerCase();
@@ -2098,6 +2171,7 @@ function handleKey(input, key, ctx) {
     setSort,
     SORTS_FOR,
     tableIsCursor,
+    cycleTableModel: cycleTableModel2,
     setView,
     cursor,
     rowCountRef,
@@ -2526,8 +2600,11 @@ function handleKey(input, key, ctx) {
         return;
       }
       if (input === "m") {
-        setView(2);
-        resetView();
+        cycleTableModel2(1);
+        return;
+      }
+      if (input === "M") {
+        cycleTableModel2(-1);
         return;
       }
       if (key.leftArrow) {
@@ -2572,12 +2649,9 @@ function handleKey(input, key, ctx) {
   }
 }
 
-// src/app.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEBOUNCE_MS = 300;
-var LOADER_GRACE_MS = 600;
-var LOADER_MAX_MS = 8e3;
-var LOADER_MIN_VISIBLE_MS = 700;
+// src/ui/hooks/use-terminal-size.ts
+import { useState as useState4, useEffect as useEffect4 } from "react";
+import { useStdout } from "ink";
 function useTerminalSize(settleMs = 90) {
   const { stdout } = useStdout();
   const read = () => ({ cols: stdout?.columns || 80, rows: stdout?.rows || 24 });
@@ -2606,234 +2680,98 @@ function useTerminalSize(settleMs = 90) {
   }, [stdout, settleMs]);
   return { cols: size.cols, rows: size.rows, resizing, live };
 }
-function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = null, mode = "degraded" }) {
-  const connected = mode === "connected" && baseUrl !== null && wsToken !== null;
-  const degraded = !connected;
-  const daemon = useDaemon(connected ? baseUrl : null, connected ? wsToken : null);
-  const [config, setConfig] = useState4(() => initialConfig ? applyStartup(initialConfig, cliInterval) : null);
-  const [detected, setDetected] = useState4([]);
-  const [statsLocal, setStats] = useState4(/* @__PURE__ */ new Map());
-  const [peakLocal, setPeak] = useState4(null);
-  const [tableLocal, setTable] = useState4(null);
-  const [tableLoading, setTableLoading] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [updatedLocal, setUpdated] = useState4(/* @__PURE__ */ new Date());
-  const [tab, setTab] = useState4(0);
-  const [view, setView] = useState4(0);
-  const [cursor, setCursor] = useState4(0);
-  const [expanded, setExpanded] = useState4(-1);
-  const [sort, setSort] = useState4(1);
-  const [tableProvider, setTableProvider] = useState4(null);
-  const [search, setSearch] = useState4("");
-  const [searchMode, setSearchMode] = useState4(false);
-  const [cursorRowsLocal, setCursorRows] = useState4(null);
-  const [showSettings, setShowSettings] = useState4(false);
-  const [settingsTab, setSettingsTab] = useState4("general");
-  const [settingsCursor, setSettingsCursor] = useState4(0);
-  const [tzEdit, setTzEdit] = useState4(null);
-  const [tzError, setTzError] = useState4(null);
-  const [tzCaret, setTzCaret] = useState4(0);
-  const [searchCaret, setSearchCaret] = useState4(0);
-  const [accountForm, setAccountForm] = useState4(null);
-  const [onboardSel, setOnboardSel] = useState4(null);
-  const [onboardCursor, setOnboardCursor] = useState4(0);
-  const [dashPage, setDashPage] = useState4(0);
-  const [debouncePassed, setDebouncePassed] = useState4(false);
-  const [graceHold, setGraceHold] = useState4(false);
-  const [loaderShownAt, setLoaderShownAt] = useState4(null);
-  const loaderDone = useRef3(false);
-  const [loaderDoneState, setLoaderDoneFlag] = useState4(false);
-  const setLoaderDone = useCallback((v) => {
-    loaderDone.current = v;
-    setLoaderDoneFlag(v);
-  }, []);
-  const prevShowPicker = useRef3(false);
-  const { exit } = useApp();
-  const { cols, rows, resizing, live } = useTerminalSize();
-  const webRef = useRef3(null);
-  const webStartingRef = useRef3(false);
-  useEffect4(() => () => {
-    void webRef.current?.stop();
-  }, []);
-  const cfg = config ?? DEFAULTS;
-  const interval = cliInterval ?? cfg.interval * 1e3;
-  const billingMs = cfg.billingInterval * 6e4;
-  const tz = resolveTimezone(cfg.timezone);
-  const configReady = config !== null;
-  const accounts = useMemo2(() => buildAccounts(cfg, detected), [cfg, detected]);
-  const trackedAccountRows = useMemo2(() => getTrackedAccountRows(cfg, detected, accounts), [cfg, detected, accounts]);
-  const settingsRowCount = settingsTab === "general" ? GENERAL_ROWS : settingsTab === "providers" ? PROVIDER_ORDER.length : trackedAccountRows.length + 1;
-  const accountsRef = useRef3([]);
-  accountsRef.current = accounts;
-  const rowCountRef = useRef3(0);
-  const tabRef = useRef3(0);
-  tabRef.current = tab;
-  const dashPageCountRef = useRef3(1);
-  const seededRef = useRef3(false);
+
+// src/ui/hooks/use-paste.ts
+import { useCallback, useRef as useRef3 } from "react";
+var PASTE_START = "\x1B[200~";
+var PASTE_END = "\x1B[201~";
+var PASTE_MAX = 1 << 20;
+function usePaste(onInsert) {
   const pasteBufRef = useRef3(null);
   const pasteCarryRef = useRef3("");
-  const pendingLocalConfigRef = useRef3(null);
   const insertPasteRef = useRef3(() => {
   });
-  const tzValueRef = useRef3("");
-  const tzCaretRef = useRef3(0);
-  const searchValueRef = useRef3("");
-  const searchCaretRef = useRef3(0);
-  const accountsKey = useMemo2(() => accounts.map(acctKey).join("|"), [accounts]);
-  const snapshot = daemon.snapshot;
-  const stats = useMemo2(
-    () => connected ? toStatsMap(snapshot, accounts) : statsLocal,
-    [connected, snapshot, accounts, statsLocal]
-  );
-  const accountIdentities = useMemo2(() => {
-    const out = /* @__PURE__ */ new Map();
-    for (const [id, stat] of stats) {
-      const billing = stat.billing;
-      if (!billing) continue;
-      out.set(id, {
-        email: billing.email ?? null,
-        displayName: billing.displayName ?? null,
-        plan: billing.plan ?? null
-      });
+  insertPasteRef.current = onInsert;
+  const handlePasteData = useCallback((chunk) => {
+    const s = typeof chunk === "string" ? chunk : chunk.toString("utf8");
+    if (pasteBufRef.current !== null) {
+      const combined2 = pasteBufRef.current + s;
+      const end2 = combined2.indexOf(PASTE_END);
+      if (end2 === -1) {
+        if (combined2.length >= PASTE_MAX) {
+          const clean3 = sanitizeTyped(combined2);
+          pasteBufRef.current = null;
+          if (clean3) insertPasteRef.current(clean3);
+          return true;
+        }
+        pasteBufRef.current = combined2;
+        return true;
+      }
+      const clean2 = sanitizeTyped(combined2.slice(0, end2));
+      pasteBufRef.current = null;
+      if (clean2) insertPasteRef.current(clean2);
+      return end2 + PASTE_END.length >= combined2.length;
     }
-    return out;
-  }, [stats]);
-  const showPeak = accounts.some((a) => a.providerId === "claude");
-  const peak = connected ? showPeak ? snapshot?.peak ?? null : null : peakLocal;
-  const updated = useMemo2(
-    () => connected ? new Date(snapshot?.generatedAt ?? Date.now()) : updatedLocal,
-    [connected, snapshot, updatedLocal]
-  );
-  const intervalLabel = connected && snapshot?.intervalMs ? Math.round(snapshot.intervalMs / 1e3) : cfg.interval;
-  const readyInputFor = useCallback((id) => {
-    if (connected) {
-      const wa = snapshot?.accounts.find((a) => a.id === id);
-      if (!wa) return void 0;
-      return { summaryState: wa.summaryState, billingState: wa.billingState, billing: wa.billing };
+    const combined = pasteCarryRef.current + s;
+    const start = combined.indexOf(PASTE_START);
+    if (start === -1) {
+      const keep = Math.min(combined.length, PASTE_START.length - 1);
+      pasteCarryRef.current = combined.slice(combined.length - keep);
+      return false;
     }
-    return statsReadyInput(statsLocal.get(id));
-  }, [connected, snapshot, statsLocal]);
-  const slots = useMemo2(() => deriveSlots(accounts), [accounts]);
-  const { activeSlotIdx, focusId } = useMemo2(
-    () => findActiveSlot(slots, cfg.activeAccountId),
-    [slots, cfg.activeAccountId]
-  );
-  const visibleAccounts = useMemo2(
-    () => focusId === null ? accounts : accounts.filter((a) => a.id === focusId),
-    [accounts, focusId]
-  );
-  const allGroups = useMemo2(() => accountsByProvider(accounts), [accounts]);
-  const groups = useMemo2(
-    () => focusId === null ? allGroups : accountsByProvider(visibleAccounts),
-    [allGroups, visibleAccounts, focusId]
-  );
-  const tableProvs = useMemo2(() => allGroups.map((g) => g.provider), [allGroups]);
-  const TOO_SMALL = cols < 40 || rows < 12;
-  const allReady = accounts.length > 0 && accounts.every((a) => accountReady(readyInputFor(a.id), a.providerId));
-  const { gridBudget } = useMemo2(() => computeChrome(slots, cols, rows), [slots, cols, rows]);
-  const dashLayout = useMemo2(() => chooseLayout(
-    Math.max(56, cols - 4),
-    gridBudget,
-    groups.length,
-    focusId !== null || cfg.dashboardLayout === "single",
-    cols
-  ), [cols, gridBudget, groups.length, focusId, cfg.dashboardLayout]);
-  const dashPageCount = dashLayout.pageCount;
-  const dashPaginated = dashPageCount > 1;
-  dashPageCountRef.current = dashPageCount;
-  tzValueRef.current = tzEdit ?? "";
-  tzCaretRef.current = clampCaret(tzCaret, (tzEdit ?? "").length);
-  searchValueRef.current = search;
-  searchCaretRef.current = clampCaret(searchCaret, search.length);
-  const isPrintable = (input, key) => !!input && !key.ctrl && !key.meta && !isPasteInput(input);
-  const insertText = (text) => {
-    if (showSettings && accountForm && (accountForm.field === "name" || accountForm.field === "homeDir")) {
-      setAccountForm((f) => {
-        if (!f || f.field !== "name" && f.field !== "homeDir") return f;
-        const r = spliceInsert(f[f.field], f.caret, text);
-        return { ...f, [f.field]: r.value, caret: r.caret, error: null };
-      });
-    } else if (showSettings && tzEdit !== null) {
-      const r = spliceInsert(tzValueRef.current, tzCaretRef.current, text);
-      tzValueRef.current = r.value;
-      tzCaretRef.current = r.caret;
-      setTzEdit(r.value);
-      setTzCaret(r.caret);
-      setTzError(null);
-    } else if (tab === 1 && searchMode) {
-      const r = spliceInsert(searchValueRef.current, searchCaretRef.current, text);
-      searchValueRef.current = r.value;
-      searchCaretRef.current = r.caret;
-      setSearch(r.value);
-      setSearchCaret(r.caret);
+    pasteCarryRef.current = "";
+    const rest = combined.slice(start + PASTE_START.length);
+    const end = rest.indexOf(PASTE_END);
+    if (end === -1) {
+      pasteBufRef.current = rest;
+      return true;
     }
-  };
-  insertPasteRef.current = insertText;
-  const effTableProvider = tableProvider && tableProvs.includes(tableProvider) ? tableProvider : tableProvs[0] ?? null;
-  const tableIsCursor = !!effTableProvider && !PROVIDERS[effTableProvider].hasUsage;
-  const tableAccounts = useMemo2(
-    () => effTableProvider ? accounts.filter((a) => a.providerId === effTableProvider) : [],
-    [accounts, effTableProvider]
-  );
-  const SORTS_FOR = tableIsCursor ? CURSOR_SORTS : SORTS;
-  const tableAccountIds = useMemo2(() => tableAccounts.map((a) => a.id), [tableAccounts]);
-  const table = useMemo2(
-    () => connected ? pickTable(snapshot, tableAccountIds) : tableLocal,
-    [connected, snapshot, tableAccountIds, tableLocal]
-  );
-  const cursorRows = useMemo2(
-    () => connected ? toCursorRows(snapshot, tableAccounts[0]?.id) : cursorRowsLocal,
-    [connected, snapshot, tableAccounts, cursorRowsLocal]
-  );
-  const needsOnboarding = configReady && !cfg.onboarded;
-  const newProviders = configReady && cfg.onboarded ? PROVIDER_ORDER.filter((p) => !cfg.knownProviders.includes(p) && detected.includes(p)) : [];
-  const showPicker = needsOnboarding || newProviders.length > 0;
+    const clean = sanitizeTyped(rest.slice(0, end));
+    if (clean) insertPasteRef.current(clean);
+    return true;
+  }, []);
+  const isPasteInput = useCallback((input) => {
+    if (pasteBufRef.current !== null) return true;
+    return input.includes("[200~") || input.includes("[201~");
+  }, []);
+  return { handlePasteData, isPasteInput };
+}
+
+// src/ui/hooks/use-loader.ts
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback2, useRef as useRef4 } from "react";
+var DEBOUNCE_MS = 300;
+var LOADER_GRACE_MS = 600;
+var LOADER_MAX_MS = 8e3;
+var LOADER_MIN_VISIBLE_MS = 700;
+function useLoader({ configReady, showPicker, accountsKey, allReady, tooSmall, showSettings, accountsCount }) {
+  const [debouncePassed, setDebouncePassed] = useState5(false);
+  const [graceHold, setGraceHold] = useState5(false);
+  const [loaderShownAt, setLoaderShownAt] = useState5(null);
+  const loaderDone = useRef4(false);
+  const [loaderDoneState, setLoaderDoneFlag] = useState5(false);
+  const setLoaderDone = useCallback2((v) => {
+    loaderDone.current = v;
+    setLoaderDoneFlag(v);
+  }, []);
+  const prevShowPicker = useRef4(false);
+  const resetLoader = useCallback2(() => {
+    setLoaderDone(false);
+    setDebouncePassed(false);
+    setGraceHold(false);
+    setLoaderShownAt(null);
+  }, [setLoaderDone]);
   const minVisibleHold = loaderShownAt !== null && Date.now() - loaderShownAt < LOADER_MIN_VISIBLE_MS;
-  const showLoader = configReady && !showPicker && !showSettings && !TOO_SMALL && accounts.length > 0 && (!allReady || graceHold || minVisibleHold) && (debouncePassed || loaderShownAt !== null) && !loaderDoneState;
-  const pickerProviders = needsOnboarding ? PROVIDER_ORDER : newProviders;
-  const onboardEnabled = onboardSel ?? detected;
-  const onboardItems = pickerProviders.map((pid) => ({
-    id: pid,
-    name: PROVIDERS[pid].name,
-    color: PROVIDERS[pid].color,
-    detected: detected.includes(pid),
-    enabled: onboardEnabled.includes(pid)
-  }));
-  useEffect4(() => {
+  const showLoader = configReady && !showPicker && !showSettings && !tooSmall && accountsCount > 0 && (!allReady || graceHold || minVisibleHold) && (debouncePassed || loaderShownAt !== null) && !loaderDoneState;
+  useEffect5(() => {
     const wasPicker = prevShowPicker.current;
     prevShowPicker.current = showPicker;
-    if (wasPicker && !showPicker) {
-      setLoaderDone(false);
-      setDebouncePassed(false);
-      setGraceHold(false);
-      setLoaderShownAt(null);
-    }
+    if (wasPicker && !showPicker) resetLoader();
   }, [showPicker]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (showLoader && loaderShownAt === null) setLoaderShownAt(Date.now());
   }, [showLoader, loaderShownAt]);
-  useEffect4(() => {
-    if (!initialConfig) loadConfig().then((c) => setConfig(applyStartup(c, cliInterval)));
-    detectProviders().then(setDetected);
-  }, []);
-  useEffect4(() => {
-    if (!degraded) return;
-    if (seededRef.current || !configReady || showPicker || accounts.length === 0) return;
-    seededRef.current = true;
-    loadSeedSnapshot().then((snap) => {
-      setStats((prev) => {
-        if (prev.size > 0) return prev;
-        const next = new Map(prev);
-        for (const acc of accountsRef.current) {
-          const s = snap[acc.id];
-          if (s && (s.dashboard || s.billing)) next.set(acc.id, { account: acc, dashboard: s.dashboard ?? null, billing: s.billing ?? null });
-        }
-        return next;
-      });
-    });
-  }, [degraded, configReady, showPicker, accountsKey]);
-  useEffect4(() => {
-    if (!configReady || showPicker || accounts.length === 0) return;
+  useEffect5(() => {
+    if (!configReady || showPicker || accountsCount === 0) return;
     if (allReady || loaderDone.current) return;
     const debounce = setTimeout(() => setDebouncePassed(true), DEBOUNCE_MS);
     const deadline = setTimeout(() => {
@@ -2845,7 +2783,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
       clearTimeout(deadline);
     };
   }, [configReady, showPicker, accountsKey]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!allReady || loaderDone.current) return;
     if (loaderShownAt === null) {
       setLoaderDone(true);
@@ -2860,17 +2798,62 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
     }, hold);
     return () => clearTimeout(t);
   }, [allReady, loaderShownAt]);
-  useEffect4(() => {
-    if (!degraded || !configReady || showPicker) return;
-    let active = true;
-    let timer;
-    const load = async () => {
-      try {
-        await Promise.all(accountsRef.current.map(async (acc) => {
-          const provider = PROVIDERS[acc.providerId];
-          if (!provider.hasUsage || !provider.fetchSummary) return;
-          try {
-            const dashboard = await provider.fetchSummary(acc, tz);
+  return { showLoader, resetLoader };
+}
+
+// src/ui/hooks/use-degraded-polling.ts
+import { useState as useState6, useEffect as useEffect6, useRef as useRef5 } from "react";
+
+// src/client/seed-cache.ts
+import { readFile } from "fs/promises";
+async function loadSeedSnapshot() {
+  try {
+    const parsed = JSON.parse(await readFile(snapshotCacheFile(), "utf-8"));
+    if (!parsed || !Array.isArray(parsed.accounts)) return {};
+    const out = {};
+    for (const a of parsed.accounts) {
+      if (a.dashboard || a.billing) out[a.id] = { dashboard: a.dashboard ?? null, billing: a.billing ?? null };
+    }
+    return out;
+  } catch {
+    return {};
+  }
+}
+
+// src/ui/hooks/use-degraded-polling.ts
+function useDegradedPolling({ degraded, configReady, showPicker, accountsKey, accountsRef, interval, billingMs, tz }) {
+  const [statsLocal, setStats] = useState6(/* @__PURE__ */ new Map());
+  const [peakLocal, setPeak] = useState6(null);
+  const [error, setError] = useState6(null);
+  const [updatedLocal, setUpdated] = useState6(/* @__PURE__ */ new Date());
+  const seededRef = useRef5(false);
+  useEffect6(() => {
+    if (!degraded) return;
+    if (seededRef.current || !configReady || showPicker || accountsRef.current.length === 0) return;
+    seededRef.current = true;
+    loadSeedSnapshot().then((snap) => {
+      setStats((prev) => {
+        if (prev.size > 0) return prev;
+        const next = new Map(prev);
+        for (const acc of accountsRef.current) {
+          const s = snap[acc.id];
+          if (s && (s.dashboard || s.billing)) next.set(acc.id, { account: acc, dashboard: s.dashboard ?? null, billing: s.billing ?? null });
+        }
+        return next;
+      });
+    });
+  }, [degraded, configReady, showPicker, accountsKey]);
+  useEffect6(() => {
+    if (!degraded || !configReady || showPicker) return;
+    let active = true;
+    let timer;
+    const load = async () => {
+      try {
+        await Promise.all(accountsRef.current.map(async (acc) => {
+          const provider = PROVIDERS[acc.providerId];
+          if (!provider.hasUsage || !provider.fetchSummary) return;
+          try {
+            const dashboard = await provider.fetchSummary(acc, tz);
             if (active) setStats((prev) => upsert(prev, acc, { dashboard }));
           } catch {
           }
@@ -2889,7 +2872,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
       clearTimeout(timer);
     };
   }, [degraded, interval, tz, configReady, showPicker, accountsKey]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!degraded || !configReady || showPicker) return;
     let active = true;
     let timer;
@@ -2900,7 +2883,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
           const provider = PROVIDERS[acc.providerId];
           if (!provider.hasBilling || !provider.fetchBilling) return;
           try {
-            const billing = await provider.fetchBilling(acc);
+            const billing = await provider.fetchBilling(acc, tz);
             if (active) setStats((prev) => upsert(prev, acc, { billing }));
           } catch {
           }
@@ -2916,20 +2899,329 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
       active = false;
       clearTimeout(timer);
     };
-  }, [degraded, billingMs, configReady, showPicker, accountsKey]);
+  }, [degraded, billingMs, tz, configReady, showPicker, accountsKey]);
+  return { statsLocal, peakLocal, updatedLocal, error };
+}
+
+// src/ui/hooks/use-account-form.ts
+import { useState as useState7, useCallback as useCallback3 } from "react";
+function useAccountForm({ cfg, detected, updateConfig, trackedAccountRows, setSettingsCursor }) {
+  const [accountForm, setAccountForm] = useState7(null);
+  function openAddAccount(defaults) {
+    const providerId = defaults?.providerId ?? (detected[0] ?? "claude");
+    setAccountForm({
+      mode: "add",
+      field: "provider",
+      providerId,
+      name: defaults?.name ?? "",
+      homeDir: defaults?.homeDir ?? "~",
+      color: defaults?.color ?? pickAccentColor(cfg.accounts),
+      caret: defaults?.name?.length ?? 0,
+      editingId: null,
+      error: null
+    });
+  }
+  function openConfigureAccount(row) {
+    openAddAccount(row);
+  }
+  function openEditAccount(acc) {
+    setAccountForm({
+      mode: "edit",
+      field: "provider",
+      providerId: acc.providerId,
+      name: acc.name,
+      homeDir: acc.homeDir,
+      color: acc.color || PROVIDERS[acc.providerId].color,
+      caret: acc.name.length,
+      editingId: acc.id,
+      error: null
+    });
+  }
+  function commitAccountForm() {
+    if (!accountForm) return;
+    const name = accountForm.name.trim();
+    const homeDir = accountForm.homeDir.trim() || "~";
+    if (!name) {
+      setAccountForm({ ...accountForm, error: "Name required", field: "name", caret: accountForm.name.length });
+      return;
+    }
+    updateConfig((c) => {
+      if (accountForm.mode === "add") {
+        const id = generateAccountId(name, c.accounts);
+        const account = { id, providerId: accountForm.providerId, name, homeDir, color: accountForm.color };
+        return { ...c, accounts: [...c.accounts, account] };
+      }
+      return {
+        ...c,
+        accounts: c.accounts.map((a) => a.id === accountForm.editingId ? { ...a, providerId: accountForm.providerId, name, homeDir, color: accountForm.color } : a)
+      };
+    });
+    setAccountForm(null);
+  }
+  const cycleFormField = useCallback3((dir) => {
+    setAccountForm((f) => {
+      if (!f) return f;
+      const i = FORM_FIELDS.indexOf(f.field);
+      const next = FORM_FIELDS[(i + dir + FORM_FIELDS.length) % FORM_FIELDS.length];
+      const caret = next === "name" ? f.name.length : next === "homeDir" ? f.homeDir.length : f.caret;
+      return { ...f, field: next, caret };
+    });
+  }, []);
+  const cycleProvider = useCallback3((dir) => {
+    setAccountForm((f) => {
+      if (!f) return f;
+      const i = PROVIDER_ORDER.indexOf(f.providerId);
+      return { ...f, providerId: PROVIDER_ORDER[(i + dir + PROVIDER_ORDER.length) % PROVIDER_ORDER.length] };
+    });
+  }, []);
+  const cycleColor = useCallback3((dir) => {
+    setAccountForm((f) => {
+      if (!f) return f;
+      const i = COLOR_PALETTE.indexOf(f.color);
+      const idx = i < 0 ? 0 : i;
+      return { ...f, color: COLOR_PALETTE[(idx + dir + COLOR_PALETTE.length) % COLOR_PALETTE.length] };
+    });
+  }, []);
+  function deleteAccount(id) {
+    updateConfig((c) => ({
+      ...c,
+      accounts: c.accounts.filter((a) => a.id !== id),
+      activeAccountId: c.activeAccountId === id ? null : c.activeAccountId
+    }));
+  }
+  function moveAccount(idx, dir) {
+    updateConfig((c) => {
+      const next = [...c.accounts];
+      const target = idx + dir;
+      if (target < 0 || target >= next.length) return c;
+      [next[idx], next[target]] = [next[target], next[idx]];
+      return { ...c, accounts: next };
+    });
+    setSettingsCursor((c) => Math.max(0, Math.min(trackedAccountRows.length - 1, c + dir)));
+  }
+  return {
+    accountForm,
+    setAccountForm,
+    openAddAccount,
+    openConfigureAccount,
+    openEditAccount,
+    commitAccountForm,
+    cycleFormField,
+    cycleProvider,
+    cycleColor,
+    deleteAccount,
+    moveAccount
+  };
+}
+
+// src/app.tsx
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = null, mode = "degraded" }) {
+  const connected = mode === "connected" && baseUrl !== null && wsToken !== null;
+  const degraded = !connected;
+  const daemon = useDaemon(connected ? baseUrl : null, connected ? wsToken : null);
+  const [config, setConfig] = useState8(() => initialConfig ? applyStartup(initialConfig, cliInterval) : null);
+  const [detected, setDetected] = useState8([]);
+  const [tableLocal, setTable] = useState8(null);
+  const [tableLoading, setTableLoading] = useState8(false);
+  const [tab, setTab] = useState8(0);
+  const [view, setView] = useState8(0);
+  const [cursor, setCursor] = useState8(0);
+  const [expanded, setExpanded] = useState8(-1);
+  const [sort, setSort] = useState8(1);
+  const [tableProvider, setTableProvider] = useState8(null);
+  const [tableModel, setTableModel] = useState8(null);
+  const [search, setSearch] = useState8("");
+  const [searchMode, setSearchMode] = useState8(false);
+  const [cursorRowsLocal, setCursorRows] = useState8(null);
+  const [showSettings, setShowSettings] = useState8(false);
+  const [settingsTab, setSettingsTab] = useState8("general");
+  const [settingsCursor, setSettingsCursor] = useState8(0);
+  const [tzEdit, setTzEdit] = useState8(null);
+  const [tzError, setTzError] = useState8(null);
+  const [tzCaret, setTzCaret] = useState8(0);
+  const [searchCaret, setSearchCaret] = useState8(0);
+  const [onboardSel, setOnboardSel] = useState8(null);
+  const [onboardCursor, setOnboardCursor] = useState8(0);
+  const [dashPage, setDashPage] = useState8(0);
+  const { exit } = useApp();
+  const { cols, rows, resizing, live } = useTerminalSize();
+  const webRef = useRef6(null);
+  const webStartingRef = useRef6(false);
+  useEffect7(() => () => {
+    void webRef.current?.stop();
+  }, []);
+  const cfg = config ?? DEFAULTS;
+  const interval = cliInterval ?? cfg.interval * 1e3;
+  const billingMs = cfg.billingInterval * 6e4;
+  const tz = resolveTimezone(cfg.timezone);
+  const configReady = config !== null;
+  const accounts = useMemo2(() => buildAccounts(cfg, detected), [cfg, detected]);
+  const trackedAccountRows = useMemo2(() => getTrackedAccountRows(cfg, detected, accounts), [cfg, detected, accounts]);
+  const settingsRowCount = settingsTab === "general" ? GENERAL_ROWS : settingsTab === "providers" ? PROVIDER_ORDER.length : trackedAccountRows.length + 1;
+  const accountsRef = useRef6([]);
+  accountsRef.current = accounts;
+  const rowCountRef = useRef6(0);
+  const tabRef = useRef6(0);
+  tabRef.current = tab;
+  const dashPageCountRef = useRef6(1);
+  const pendingLocalConfigRef = useRef6(null);
+  const tzValueRef = useRef6("");
+  const tzCaretRef = useRef6(0);
+  const searchValueRef = useRef6("");
+  const searchCaretRef = useRef6(0);
+  const accountsKey = useMemo2(() => accounts.map(acctKey).join("|"), [accounts]);
+  const needsOnboarding = configReady && !cfg.onboarded;
+  const newProviders = configReady && cfg.onboarded ? PROVIDER_ORDER.filter((p) => !cfg.knownProviders.includes(p) && detected.includes(p)) : [];
+  const showPicker = needsOnboarding || newProviders.length > 0;
+  const { statsLocal, peakLocal, updatedLocal, error } = useDegradedPolling({
+    degraded,
+    configReady,
+    showPicker,
+    accountsKey,
+    accountsRef,
+    interval,
+    billingMs,
+    tz
+  });
+  const snapshot = daemon.snapshot;
+  const stats = useMemo2(
+    () => connected ? toStatsMap(snapshot, accounts) : statsLocal,
+    [connected, snapshot, accounts, statsLocal]
+  );
+  const accountIdentities = useMemo2(() => {
+    const out = /* @__PURE__ */ new Map();
+    for (const [id, stat] of stats) {
+      const billing = stat.billing;
+      if (!billing) continue;
+      out.set(id, {
+        email: billing.email ?? null,
+        displayName: billing.displayName ?? null,
+        plan: billing.plan ?? null
+      });
+    }
+    return out;
+  }, [stats]);
+  const showPeak = accounts.some((a) => a.providerId === "claude");
+  const peak = connected ? showPeak ? snapshot?.peak ?? null : null : peakLocal;
+  const updated = useMemo2(
+    () => connected ? new Date(snapshot?.generatedAt ?? Date.now()) : updatedLocal,
+    [connected, snapshot, updatedLocal]
+  );
+  const intervalLabel = connected && snapshot?.intervalMs ? Math.round(snapshot.intervalMs / 1e3) : cfg.interval;
+  const readyInputFor = useCallback4((id) => {
+    if (connected) {
+      const wa = snapshot?.accounts.find((a) => a.id === id);
+      if (!wa) return void 0;
+      return { summaryState: wa.summaryState, billingState: wa.billingState, billing: wa.billing };
+    }
+    return statsReadyInput(statsLocal.get(id));
+  }, [connected, snapshot, statsLocal]);
+  const slots = useMemo2(() => deriveSlots(accounts), [accounts]);
+  const { activeSlotIdx, focusId } = useMemo2(
+    () => findActiveSlot(slots, cfg.activeAccountId),
+    [slots, cfg.activeAccountId]
+  );
+  const visibleAccounts = useMemo2(
+    () => focusId === null ? accounts : accounts.filter((a) => a.id === focusId),
+    [accounts, focusId]
+  );
+  const allGroups = useMemo2(() => accountsByProvider(accounts), [accounts]);
+  const groups = useMemo2(
+    () => focusId === null ? allGroups : accountsByProvider(visibleAccounts),
+    [allGroups, visibleAccounts, focusId]
+  );
+  const tableProvs = useMemo2(() => allGroups.map((g) => g.provider), [allGroups]);
+  const TOO_SMALL = cols < 40 || rows < 12;
+  const allReady = accounts.length > 0 && accounts.every((a) => accountReady(readyInputFor(a.id), a.providerId));
+  const { gridBudget } = useMemo2(() => computeChrome(slots, cols, rows), [slots, cols, rows]);
+  const dashLayout = useMemo2(
+    () => computeDashLayout(groups, stats, cols, gridBudget, focusId, cfg.dashboardLayout),
+    [groups, stats, cols, gridBudget, focusId, cfg.dashboardLayout]
+  );
+  const dashPageCount = dashLayout.pageCount;
+  const dashPaginated = dashPageCount > 1;
+  dashPageCountRef.current = dashPageCount;
+  tzValueRef.current = tzEdit ?? "";
+  tzCaretRef.current = clampCaret(tzCaret, (tzEdit ?? "").length);
+  searchValueRef.current = search;
+  searchCaretRef.current = clampCaret(searchCaret, search.length);
+  const isPrintable = (input, key) => !!input && !key.ctrl && !key.meta && !isPasteInput(input);
+  const insertText = (text) => {
+    if (showSettings && accountForm && (accountForm.field === "name" || accountForm.field === "homeDir")) {
+      setAccountForm((f) => {
+        if (!f || f.field !== "name" && f.field !== "homeDir") return f;
+        const r = spliceInsert(f[f.field], f.caret, text);
+        return { ...f, [f.field]: r.value, caret: r.caret, error: null };
+      });
+    } else if (showSettings && tzEdit !== null) {
+      const r = spliceInsert(tzValueRef.current, tzCaretRef.current, text);
+      tzValueRef.current = r.value;
+      tzCaretRef.current = r.caret;
+      setTzEdit(r.value);
+      setTzCaret(r.caret);
+      setTzError(null);
+    } else if (tab === 1 && searchMode) {
+      const r = spliceInsert(searchValueRef.current, searchCaretRef.current, text);
+      searchValueRef.current = r.value;
+      searchCaretRef.current = r.caret;
+      setSearch(r.value);
+      setSearchCaret(r.caret);
+    }
+  };
+  const { handlePasteData, isPasteInput } = usePaste(insertText);
+  const effTableProvider = tableProvider && tableProvs.includes(tableProvider) ? tableProvider : tableProvs[0] ?? null;
+  const tableIsCursor = !!effTableProvider && !PROVIDERS[effTableProvider].hasUsage;
+  const tableAccounts = useMemo2(
+    () => effTableProvider ? accounts.filter((a) => a.providerId === effTableProvider) : [],
+    [accounts, effTableProvider]
+  );
+  const SORTS_FOR = tableIsCursor ? CURSOR_SORTS : SORTS;
+  const tableAccountIds = useMemo2(() => tableAccounts.map((a) => a.id), [tableAccounts]);
+  const table = useMemo2(
+    () => connected ? pickTable(snapshot, tableAccountIds) : tableLocal,
+    [connected, snapshot, tableAccountIds, tableLocal]
+  );
+  const cursorRows = useMemo2(
+    () => connected ? toCursorRows(snapshot, tableAccounts[0]?.id) : cursorRowsLocal,
+    [connected, snapshot, tableAccounts, cursorRowsLocal]
+  );
+  const { showLoader } = useLoader({
+    configReady,
+    showPicker,
+    accountsKey,
+    allReady,
+    tooSmall: TOO_SMALL,
+    showSettings,
+    accountsCount: accounts.length
+  });
+  const pickerProviders = needsOnboarding ? PROVIDER_ORDER : newProviders;
+  const onboardEnabled = onboardSel ?? detected;
+  const onboardItems = pickerProviders.map((pid) => ({
+    id: pid,
+    name: PROVIDERS[pid].name,
+    color: PROVIDERS[pid].color,
+    detected: detected.includes(pid),
+    enabled: onboardEnabled.includes(pid)
+  }));
+  useEffect7(() => {
+    if (!initialConfig) loadConfig().then((c) => setConfig(applyStartup(c, cliInterval)));
+    detectProviders().then(setDetected);
+  }, []);
   const tableKey = useMemo2(
     () => `${effTableProvider}|${tableAccounts.map(acctKey).join(",")}|${tz}`,
     [effTableProvider, tableAccounts, tz]
   );
-  useEffect4(() => {
+  useEffect7(() => {
     setTable(null);
     setCursorRows(null);
     setCursor(0);
     setExpanded(-1);
+    setTableModel(null);
     setSort(tableIsCursor ? 0 : 1);
     setTableLoading(false);
   }, [tableKey]);
-  useEffect4(() => {
+  useEffect7(() => {
     if (!degraded || tab !== 1 || !effTableProvider) return;
     let active = true;
     let timer;
@@ -2962,68 +3254,23 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
       clearTimeout(timer);
     };
   }, [degraded, tab, tableKey, interval]);
-  useEffect4(() => {
+  useEffect7(() => {
     setCursor(0);
     setExpanded(-1);
-  }, [search]);
-  useEffect4(() => {
+  }, [search, tableModel]);
+  useEffect7(() => {
     setDashPage((p) => Math.min(p, dashPageCount - 1));
   }, [dashPageCount]);
-  useEffect4(() => {
+  useEffect7(() => {
     setSettingsCursor((c) => Math.max(-1, Math.min(c, settingsRowCount - 1)));
   }, [settingsRowCount]);
-  const resetView = useCallback(() => {
+  const resetView = useCallback4(() => {
     setCursor(0);
     setExpanded(-1);
   }, []);
   const clampRow = (n) => Math.max(0, Math.min(rowCountRef.current - 1, n));
-  const PASTE_START = "\x1B[200~";
-  const PASTE_END = "\x1B[201~";
-  const PASTE_MAX = 1 << 20;
-  const handlePasteData = useCallback((chunk) => {
-    const s = typeof chunk === "string" ? chunk : chunk.toString("utf8");
-    if (pasteBufRef.current !== null) {
-      const combined2 = pasteBufRef.current + s;
-      const end2 = combined2.indexOf(PASTE_END);
-      if (end2 === -1) {
-        if (combined2.length >= PASTE_MAX) {
-          const clean3 = sanitizeTyped(combined2);
-          pasteBufRef.current = null;
-          if (clean3) insertPasteRef.current(clean3);
-          return true;
-        }
-        pasteBufRef.current = combined2;
-        return true;
-      }
-      const clean2 = sanitizeTyped(combined2.slice(0, end2));
-      pasteBufRef.current = null;
-      if (clean2) insertPasteRef.current(clean2);
-      return end2 + PASTE_END.length >= combined2.length;
-    }
-    const combined = pasteCarryRef.current + s;
-    const start = combined.indexOf(PASTE_START);
-    if (start === -1) {
-      const keep = Math.min(combined.length, PASTE_START.length - 1);
-      pasteCarryRef.current = combined.slice(combined.length - keep);
-      return false;
-    }
-    pasteCarryRef.current = "";
-    const rest = combined.slice(start + PASTE_START.length);
-    const end = rest.indexOf(PASTE_END);
-    if (end === -1) {
-      pasteBufRef.current = rest;
-      return true;
-    }
-    const clean = sanitizeTyped(rest.slice(0, end));
-    if (clean) insertPasteRef.current(clean);
-    return true;
-  }, []);
-  const isPasteInput = useCallback((input) => {
-    if (pasteBufRef.current !== null) return true;
-    return input.includes("[200~") || input.includes("[201~");
-  }, []);
   const mouse = useMouse();
-  useEffect4(() => {
+  useEffect7(() => {
     if (!IS_TTY) return;
     mouse.enable();
     if (process.stdout.isTTY) {
@@ -3051,7 +3298,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
       process.stdin.off("data", onData);
     };
   }, []);
-  const updateConfig = useCallback((fn) => {
+  const updateConfig = useCallback4((fn) => {
     setConfig((prev) => {
       const next = normalizeConfig(fn(prev ?? DEFAULTS));
       pendingLocalConfigRef.current = connected ? next : null;
@@ -3068,7 +3315,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
     });
   }, [connected, daemon]);
   const daemonConfig = daemon.config;
-  useEffect4(() => {
+  useEffect7(() => {
     if (!connected || !daemonConfig) return;
     setConfig((prev) => {
       const reconciled = reconcileDaemonConfig(prev, daemonConfig, pendingLocalConfigRef.current);
@@ -3112,13 +3359,13 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
     setOnboardSel(null);
     setOnboardCursor(0);
   }
-  const cycleAccount = useCallback((dir) => {
+  const cycleAccount = useCallback4((dir) => {
     if (slots.length <= 1) return;
     const next = (activeSlotIdx + dir + slots.length) % slots.length;
     updateConfig((c) => ({ ...c, activeAccountId: slots[next].id }));
     resetView();
   }, [slots, activeSlotIdx, updateConfig, resetView]);
-  const cycleTableProvider = useCallback((dir) => {
+  const cycleTableProvider = useCallback4((dir) => {
     if (tableProvs.length <= 1) return;
     const cur = effTableProvider ? tableProvs.indexOf(effTableProvider) : 0;
     const nextProv = tableProvs[(cur + dir + tableProvs.length) % tableProvs.length];
@@ -3127,102 +3374,24 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
     setSort(nextIsCursor ? 0 : 1);
     setCursor(0);
     setExpanded(-1);
+    setTableModel(null);
     setSearch("");
     setSearchCaret(0);
     setSearchMode(false);
   }, [tableProvs, effTableProvider]);
-  function openAddAccount(defaults) {
-    const providerId = defaults?.providerId ?? (detected[0] ?? "claude");
-    setAccountForm({
-      mode: "add",
-      field: "provider",
-      providerId,
-      name: defaults?.name ?? "",
-      homeDir: defaults?.homeDir ?? "~",
-      color: defaults?.color ?? pickAccentColor(cfg.accounts),
-      caret: defaults?.name?.length ?? 0,
-      editingId: null,
-      error: null
-    });
-  }
-  function openConfigureAccount(row) {
-    openAddAccount(row);
-  }
-  function openEditAccount(acc) {
-    setAccountForm({
-      mode: "edit",
-      field: "provider",
-      providerId: acc.providerId,
-      name: acc.name,
-      homeDir: acc.homeDir,
-      color: acc.color || PROVIDERS[acc.providerId].color,
-      caret: acc.name.length,
-      editingId: acc.id,
-      error: null
-    });
-  }
-  function commitAccountForm() {
-    if (!accountForm) return;
-    const name = accountForm.name.trim();
-    const homeDir = accountForm.homeDir.trim() || "~";
-    if (!name) {
-      setAccountForm({ ...accountForm, error: "Name required", field: "name", caret: accountForm.name.length });
-      return;
-    }
-    updateConfig((c) => {
-      if (accountForm.mode === "add") {
-        const id = generateAccountId(name, c.accounts);
-        const account = { id, providerId: accountForm.providerId, name, homeDir, color: accountForm.color };
-        return { ...c, accounts: [...c.accounts, account] };
-      }
-      return {
-        ...c,
-        accounts: c.accounts.map((a) => a.id === accountForm.editingId ? { ...a, providerId: accountForm.providerId, name, homeDir, color: accountForm.color } : a)
-      };
-    });
-    setAccountForm(null);
-  }
-  const cycleFormField = useCallback((dir) => {
-    setAccountForm((f) => {
-      if (!f) return f;
-      const i = FORM_FIELDS.indexOf(f.field);
-      const next = FORM_FIELDS[(i + dir + FORM_FIELDS.length) % FORM_FIELDS.length];
-      const caret = next === "name" ? f.name.length : next === "homeDir" ? f.homeDir.length : f.caret;
-      return { ...f, field: next, caret };
-    });
-  }, []);
-  const cycleProvider = useCallback((dir) => {
-    setAccountForm((f) => {
-      if (!f) return f;
-      const i = PROVIDER_ORDER.indexOf(f.providerId);
-      return { ...f, providerId: PROVIDER_ORDER[(i + dir + PROVIDER_ORDER.length) % PROVIDER_ORDER.length] };
-    });
-  }, []);
-  const cycleColor = useCallback((dir) => {
-    setAccountForm((f) => {
-      if (!f) return f;
-      const i = COLOR_PALETTE.indexOf(f.color);
-      const idx = i < 0 ? 0 : i;
-      return { ...f, color: COLOR_PALETTE[(idx + dir + COLOR_PALETTE.length) % COLOR_PALETTE.length] };
-    });
-  }, []);
-  function deleteAccount(id) {
-    updateConfig((c) => ({
-      ...c,
-      accounts: c.accounts.filter((a) => a.id !== id),
-      activeAccountId: c.activeAccountId === id ? null : c.activeAccountId
-    }));
-  }
-  function moveAccount(idx, dir) {
-    updateConfig((c) => {
-      const next = [...c.accounts];
-      const target = idx + dir;
-      if (target < 0 || target >= next.length) return c;
-      [next[idx], next[target]] = [next[target], next[idx]];
-      return { ...c, accounts: next };
-    });
-    setSettingsCursor((c) => Math.max(0, Math.min(trackedAccountRows.length - 1, c + dir)));
-  }
+  const {
+    accountForm,
+    setAccountForm,
+    openAddAccount,
+    openConfigureAccount,
+    openEditAccount,
+    commitAccountForm,
+    cycleFormField,
+    cycleProvider,
+    cycleColor,
+    deleteAccount,
+    moveAccount
+  } = useAccountForm({ cfg, detected, updateConfig, trackedAccountRows, setSettingsCursor });
   async function toggleWeb() {
     if (connected) {
       if (baseUrl) openUrl(baseUrl);
@@ -3235,7 +3404,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
     if (webStartingRef.current) return;
     webStartingRef.current = true;
     try {
-      const { startWebServer } = await import("./server-TSTBMVTJ.js");
+      const { startWebServer } = await import("./server-GEGTLRUW.js");
       const ctrl = await startWebServer({ config: cfg, log: false });
       webRef.current = ctrl;
       openUrl(ctrl.url);
@@ -3244,30 +3413,44 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
       webStartingRef.current = false;
     }
   }
-  const onTabSelect = useCallback((i) => {
+  const onTabSelect = useCallback4((i) => {
     setTab(i);
     resetView();
   }, [resetView]);
-  const onStripSelect = useCallback((i) => {
+  const onStripSelect = useCallback4((i) => {
     updateConfig((c) => ({ ...c, activeAccountId: slots[i].id }));
     resetView();
   }, [slots, updateConfig, resetView]);
-  const onProviderSelect = useCallback((p) => {
+  const onProviderSelect = useCallback4((p) => {
     setTableProvider(p);
     setCursor(0);
     setExpanded(-1);
+    setTableModel(null);
     setSearch("");
     setSearchCaret(0);
     setSearchMode(false);
   }, []);
-  const onRowClickToken = useCallback((idx) => {
+  const onRowClickToken = useCallback4((idx) => {
     if (idx === cursor) setExpanded((e) => e === idx ? -1 : idx);
     else setCursor(idx);
   }, [cursor]);
-  const onRowClickCursor = useCallback((idx) => setCursor(idx), []);
+  const onRowClickCursor = useCallback4((idx) => setCursor(idx), []);
+  const rawTokenRows = useMemo2(
+    () => tab === 1 && !tableIsCursor ? table ? [table.daily, table.weekly, table.monthly][view] : [] : [],
+    [tab, tableIsCursor, table, view]
+  );
+  const tokenModelOptions = useMemo2(() => tableModelOptions(rawTokenRows), [rawTokenRows]);
+  useEffect7(() => {
+    if (tableModel && !tokenModelOptions.includes(tableModel)) setTableModel(null);
+  }, [tableModel, tokenModelOptions]);
+  const cycleTableModelFilter = useCallback4((dir) => {
+    setTableModel((cur) => cycleTableModel(cur, tokenModelOptions, dir));
+    resetView();
+  }, [tokenModelOptions, resetView]);
+  const activeTableModel = tableModel && tokenModelOptions.includes(tableModel) ? tableModel : null;
   const tokenRows = useMemo2(
-    () => tab === 1 && !tableIsCursor ? sortRows(filterTokenRows(table ? [table.daily, table.weekly, table.monthly][view] : [], search), sort) : [],
-    [tab, tableIsCursor, table, view, search, sort]
+    () => tab === 1 && !tableIsCursor ? sortRows(filterTokenRows(filterRowsByModel(rawTokenRows, activeTableModel), search), sort) : [],
+    [tab, tableIsCursor, rawTokenRows, activeTableModel, search, sort]
   );
   const cursorTableRows = useMemo2(
     () => tab === 1 && tableIsCursor ? sortCursorRows(filterCursorRows(cursorRows ?? [], search), sort) : [],
@@ -3333,6 +3516,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
     setSort,
     SORTS_FOR,
     tableIsCursor,
+    cycleTableModel: cycleTableModelFilter,
     setView,
     cursor,
     rowCountRef,
@@ -3450,10 +3634,12 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, wsToken = n
             views: VIEWS,
             period: view,
             sort: sortLabel(SORTS_FOR[sort % SORTS_FOR.length]),
+            model: activeTableModel,
             search,
             searchCaret,
             searching: searchMode,
-            showPeriod: !tableIsCursor
+            showPeriod: !tableIsCursor,
+            showModel: !tableIsCursor
           }
         ),
         /* @__PURE__ */ jsx11(Box11, { height: 1 }),