tokmon 0.28.1 → 0.28.3

package/dist/{bootstrap-ink-L7QSJBMS.js → bootstrap-ink-WG4WG3R2.js}

@@ -1,13 +1,17 @@
 #!/usr/bin/env node
 import {
   createDaemonRpcClient
-} from "./chunk-3RTWFGGD.js";
+} from "./chunk-7CH6S7BR.js";
 import {
+  accountIdentityText,
   accountsByProvider,
   buildAccounts,
   fetchPeak,
-  modelColor
-} from "./chunk-FMP3P2WV.js";
+  modelColor,
+  resolveQuotaViews,
+  severity,
+  usageFromHeadroom
+} from "./chunk-TN6V7XSL.js";
 import {
   PROVIDERS,
   PROVIDER_ORDER,
@@ -24,23 +28,33 @@ import {
   time,
   tokens,
   withTimeout
-} from "./chunk-CVKCVHS7.js";
+} from "./chunk-CFKUZCMB.js";
+import "./chunk-JZSZEHVD.js";
 import {
   COLOR_PALETTE,
   DEFAULTS,
+  DESKTOP_GRAPH_RANGES,
+  THEME_PRESET_IDS,
   configLocation,
   generateAccountId,
   getTrackedAccountRows,
+  isDarkOnlyThemePreset,
   isValidTimezone,
   loadConfig,
   normalizeAllowedHost,
   normalizeConfig,
   pickAccentColor,
+  providerDetectionEnabled,
   redactEmail,
+  resolveTerminalTheme,
   sanitizeTyped,
   saveConfigSync,
-  snapshotCacheFile
-} from "./chunk-HP5UZCXP.js";
+  setDetectedAccountExcluded,
+  setProviderDetectionEnabled,
+  snapshotCacheFile,
+  themePresetOption,
+  toggleProviderSelection
+} from "./chunk-HNWEJ6MS.js";
 import {
   glyphs
 } from "./chunk-RF4GGQGM.js";
@@ -50,7 +64,7 @@ import { render } from "ink";
 import { MouseProvider } from "@zenobius/ink-mouse";
 
 // src/app.tsx
-import { useState as useState10, useEffect as useEffect9, useCallback as useCallback7, useRef as useRef8, useMemo as useMemo2 } from "react";
+import { useState as useState10, useEffect as useEffect9, useCallback as useCallback7, useRef as useRef8, useMemo as useMemo3 } from "react";
 import { Box as Box11, Text as Text12, useInput, useApp } from "ink";
 import { useMouse } from "@zenobius/ink-mouse";
 
@@ -59,7 +73,55 @@ import { appendFileSync } from "fs";
 import { memo, useEffect, useRef, useState } from "react";
 import { Box, Text } from "ink";
 import { useOnMouseClick } from "@zenobius/ink-mouse";
-import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/ui/theme.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var ANSI_THEME = {
+  accent: "greenBright",
+  cost: "yellow",
+  positive: "green",
+  ok: "green",
+  warn: "yellow",
+  crit: "red",
+  unknown: void 0
+};
+var NO_COLOR_THEME = {
+  accent: void 0,
+  cost: void 0,
+  positive: void 0,
+  ok: void 0,
+  warn: void 0,
+  crit: void 0,
+  unknown: void 0
+};
+var TuiThemeContext = createContext(ANSI_THEME);
+function fromTokens(tokens2) {
+  return {
+    accent: tokens2.accent,
+    cost: tokens2.cost,
+    positive: tokens2.positive,
+    ok: tokens2.ok,
+    warn: tokens2.warn,
+    crit: tokens2.crit,
+    unknown: tokens2.unknown
+  };
+}
+function resolveTuiTheme(appearance, noColor = process.env.NO_COLOR !== void 0) {
+  if (noColor || appearance.terminal === "off") return NO_COLOR_THEME;
+  const resolved = resolveTerminalTheme(appearance);
+  return resolved ? fromTokens(resolved.tokens) : ANSI_THEME;
+}
+function TuiThemeProvider({ appearance, children }) {
+  const value = useMemo(() => resolveTuiTheme(appearance), [appearance]);
+  return /* @__PURE__ */ jsx(TuiThemeContext.Provider, { value, children });
+}
+function useTuiTheme() {
+  return useContext(TuiThemeContext);
+}
+
+// src/ui/shared.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function truncateName(s, n) {
   const ell = glyphs().ellipsis;
   return s.length > n ? s.slice(0, n - ell.length) + ell : s;
@@ -69,7 +131,7 @@ function ClickableBox({ onClick, children, ...props }) {
   useOnMouseClick(ref, (clicked) => {
     if (clicked) onClick();
   });
-  return /* @__PURE__ */ jsx(Box, { ref, ...props, children });
+  return /* @__PURE__ */ jsx2(Box, { ref, ...props, children });
 }
 var SGR_PRESS = /\x1b\[<(\d+);(\d+);(\d+)M/g;
 var linkHits = /* @__PURE__ */ new Set();
@@ -137,9 +199,10 @@ function LinkBox({ onClick, children, ...props }) {
       linkHits.delete(hit);
     };
   }, []);
-  return /* @__PURE__ */ jsx(Box, { ref, ...props, children });
+  return /* @__PURE__ */ jsx2(Box, { ref, ...props, children });
 }
 function Spinner({ label }) {
+  const theme = useTuiTheme();
   const frames = glyphs().spinner;
   const [i, setI] = useState(0);
   useEffect(() => {
@@ -147,15 +210,15 @@ function Spinner({ label }) {
     return () => clearInterval(id);
   }, []);
   return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsxs(Text, { color: "green", children: [
+    /* @__PURE__ */ jsxs(Text, { color: theme.accent, children: [
       frames[i],
       " "
     ] }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: label })
+    /* @__PURE__ */ jsx2(Text, { dimColor: true, children: label })
   ] });
 }
 var TabBar = memo(function TabBar2({ tabs, active, onSelect }) {
-  return /* @__PURE__ */ jsx(Box, { children: tabs.map((t, i) => /* @__PURE__ */ jsx(ClickableBox, { onClick: () => onSelect(i), marginRight: 1, children: i === active ? /* @__PURE__ */ jsxs(Text, { bold: true, inverse: true, children: [
+  return /* @__PURE__ */ jsx2(Box, { children: tabs.map((t, i) => /* @__PURE__ */ jsx2(ClickableBox, { onClick: () => onSelect(i), marginRight: 1, children: i === active ? /* @__PURE__ */ jsxs(Text, { bold: true, inverse: true, children: [
     " ",
     t,
     " "
@@ -166,14 +229,15 @@ var TabBar = memo(function TabBar2({ tabs, active, onSelect }) {
   ] }) }, t)) });
 });
 var PeakBadge = memo(function PeakBadge2({ peak, resetDisplay = "relative", tz }) {
-  const color = peak.state === "peak" ? "red" : "green";
+  const theme = useTuiTheme();
+  const color = peak.state === "peak" ? theme.crit : theme.ok;
   const changesAt = peak.changesAt ?? (peak.minutesUntilChange !== null ? new Date(Date.now() + peak.minutesUntilChange * 6e4).toISOString() : null);
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsxs(Text, { color, children: [
       glyphs().dot,
       " "
     ] }),
-    /* @__PURE__ */ jsx(Text, { bold: true, color, children: peak.label }),
+    /* @__PURE__ */ jsx2(Text, { bold: true, color, children: peak.label }),
     changesAt && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
       " (",
       formatResetAt(changesAt, resetDisplay, Date.now(), tz),
@@ -198,8 +262,8 @@ function sparkline(values) {
 function Bar({ pct, color, width = 24 }) {
   const filled = Math.max(0, Math.min(width, Math.round(pct / 100 * width)));
   return /* @__PURE__ */ jsxs(Text, { children: [
-    /* @__PURE__ */ jsx(Text, { color, children: glyphs().barFull.repeat(filled) }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: glyphs().barEmpty.repeat(width - filled) })
+    /* @__PURE__ */ jsx2(Text, { color, children: glyphs().barFull.repeat(filled) }),
+    /* @__PURE__ */ jsx2(Text, { dimColor: true, children: glyphs().barEmpty.repeat(width - filled) })
   ] });
 }
 function metricValueText(m) {
@@ -215,6 +279,20 @@ function metricValueText(m) {
   }
   return `${Math.round(m.used)}%`;
 }
+function CaretText({ value, caret: caret2, color }) {
+  const c = Math.max(0, Math.min(caret2, value.length));
+  if (c >= value.length) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(Text, { bold: true, color, children: value }),
+      /* @__PURE__ */ jsx2(Text, { color, children: glyphs().vbar })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(Text, { bold: true, color, children: value.slice(0, c) }),
+    /* @__PURE__ */ jsx2(Text, { inverse: true, color, children: value[c] }),
+    /* @__PURE__ */ jsx2(Text, { bold: true, color, children: value.slice(c + 1) })
+  ] });
+}
 
 // src/ui/dashboard.tsx
 import { memo as memo2 } from "react";
@@ -243,8 +321,58 @@ function planDisplay(rawPlans) {
   return { mode: "perRow", count: plans.length };
 }
 
+// src/dashboard-data.ts
+var emptyUsageSummary = () => ({
+  cost: 0,
+  tokens: 0,
+  input: 0,
+  cacheRead: 0,
+  cacheSavings: 0
+});
+function addUsageSummary(target, source) {
+  target.cost += source.cost;
+  target.tokens += source.tokens;
+  target.input += source.input;
+  target.cacheRead += source.cacheRead;
+  target.cacheSavings += source.cacheSavings;
+}
+function aggregateDashboardData(snapshots) {
+  const dashboards = snapshots.filter((value) => value != null);
+  if (dashboards.length === 0) return null;
+  const result = {
+    today: emptyUsageSummary(),
+    week: emptyUsageSummary(),
+    month: emptyUsageSummary(),
+    burnRate: 0,
+    series: Array.from({ length: Math.max(...dashboards.map((value) => value.series.length)) }, () => 0),
+    lastActivityAt: null
+  };
+  for (const dashboard of dashboards) {
+    addUsageSummary(result.today, dashboard.today);
+    addUsageSummary(result.week, dashboard.week);
+    addUsageSummary(result.month, dashboard.month);
+    result.burnRate += dashboard.burnRate;
+    if (dashboard.lastActivityAt !== null && (result.lastActivityAt === null || dashboard.lastActivityAt > result.lastActivityAt)) {
+      result.lastActivityAt = dashboard.lastActivityAt;
+    }
+    const offset = result.series.length - dashboard.series.length;
+    dashboard.series.forEach((value, index) => {
+      result.series[offset + index] += value;
+    });
+  }
+  return result;
+}
+function cachedTokenPercentage(summary) {
+  if (!Number.isFinite(summary.tokens) || !Number.isFinite(summary.cacheRead) || summary.tokens <= 0) return 0;
+  return Math.round(Math.min(100, Math.max(0, summary.cacheRead / summary.tokens * 100)));
+}
+
 // src/ui/dashboard.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function severityColor(remaining, crit, warn, base) {
+  const level = severity(remaining);
+  return level === "crit" ? crit : level === "warn" ? warn : base;
+}
 var GAP = 2;
 var MIN_CARD = 56;
 var MIN_CARD_DENSE = 50;
@@ -262,8 +390,8 @@ function estimateCardHeights(groups, stats) {
       const multi = g.accounts.length > 1;
       g.accounts.forEach((a, i) => {
         const s = stats.get(a.id);
-        const staleRow = s?.billing && !s.billing.error && s.billing.metrics.length > 0 && billingStaleLabel(s.billing.asOfMs ?? s.billingUpdatedAt, Date.now()) ? 1 : 0;
-        const metricRows = (s?.billing?.metrics.length || 1) + staleRow;
+        const staleRow = s?.billing && !s.billing.error && quotaViews(s).length > 0 && billingStaleLabel(s.billing.asOfMs ?? s.billingUpdatedAt, Date.now()) ? 1 : 0;
+        const metricRows = (quotaViews(s).length || 1) + staleRow;
         h += metricRows + (multi ? 1 : 0) + (multi && i > 0 ? 1 : 0);
       });
     }
@@ -318,7 +446,7 @@ function computeDashLayout(groups, stats, cols, budget, focusId, layoutPref) {
   }
   return chooseLayout(content, budget, groups.length, single, cols, heights);
 }
-var DashboardView = memo2(function DashboardView2({ groups, stats, cols, budget, focusId, layout, page = 0, privacyMode = false, resetDisplay = "relative", tz }) {
+var DashboardView = memo2(function DashboardView2({ groups, stats, cols, budget, computed, page = 0, privacyMode = false, resetDisplay = "relative", tz }) {
   if (groups.length === 0) {
     return /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
       "No providers enabled ",
@@ -327,13 +455,13 @@ var DashboardView = memo2(function DashboardView2({ groups, stats, cols, budget,
     ] });
   }
   const content = Math.max(30, cols - 4);
-  const { ncols, variant, cardsPerPage, pageCount } = computeDashLayout(groups, stats, cols, budget, focusId, layout);
+  const { ncols, variant, cardsPerPage, pageCount } = computed;
   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 ? 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, 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, privacyMode, resetDisplay, tz }) }, g.provider)) }),
+    /* @__PURE__ */ jsx3(Box2, { width: content, flexWrap: "wrap", columnGap: GAP, rowGap: 1, alignItems: "flex-start", children: visible.map((g) => /* @__PURE__ */ jsx3(Box2, { flexShrink: 0, children: /* @__PURE__ */ jsx3(ProviderCard, { provider: g.provider, accounts: g.accounts, stats, width: cardW, variant, privacyMode, resetDisplay, tz }) }, g.provider)) }),
     pageCount > 1 && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
       "  ",
       glyphs().middot,
@@ -350,127 +478,143 @@ var DashboardView = memo2(function DashboardView2({ groups, stats, cols, budget,
   ] });
 });
 function ProviderCard({ provider, accounts, stats, width, variant, privacyMode = false, resetDisplay, tz }) {
+  const theme = useTuiTheme();
   const meta = PROVIDERS[provider];
   const items = accounts.map((a) => ({ account: a, s: stats.get(a.id) }));
-  const dashboards = items.map((i) => i.s?.dashboard).filter((d) => !!d);
-  const agg = meta.hasUsage && dashboards.length > 0 ? aggregate(dashboards) : null;
+  const agg = meta.hasUsage ? aggregateDashboardData(items.map((i) => i.s?.dashboard)) : null;
   const planView = planDisplay(items.map((i) => i.s?.billing?.plan));
   const activity = items.map((i) => i.s?.billing?.activity).find(Boolean) ?? null;
   const inner = width - 4;
   const hasSpark = !!agg && agg.series.some((v) => v > 0);
   const showBars = variant !== "mini";
   const showSpark = variant === "full";
+  const headroom = items.find((item) => item.s?.providerHeadroom)?.s?.providerHeadroom;
   return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", width, borderStyle: glyphs().border, borderColor: meta.color, paddingX: 1, children: [
     /* @__PURE__ */ jsxs2(Box2, { children: [
       /* @__PURE__ */ jsxs2(Text2, { color: meta.color, children: [
         glyphs().dot,
         " "
       ] }),
-      /* @__PURE__ */ jsx2(Text2, { bold: true, color: meta.color, children: meta.name }),
-      /* @__PURE__ */ jsx2(Box2, { flexGrow: 1 }),
-      planView.mode === "header" && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: planView.plan }),
+      /* @__PURE__ */ jsx3(Text2, { bold: true, color: meta.color, children: meta.name }),
+      /* @__PURE__ */ jsx3(Box2, { flexGrow: 1 }),
+      planView.mode === "header" && /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: planView.plan }),
       planView.mode === "perRow" && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
         planView.count,
         " accounts"
       ] })
     ] }),
-    meta.hasUsage && (agg ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2(Box2, { height: 1 }),
-      /* @__PURE__ */ jsx2(SummaryRow, { label: "Today", s: agg.today }),
-      /* @__PURE__ */ jsx2(SummaryRow, { label: "This Week", s: agg.week }),
-      /* @__PURE__ */ jsx2(SummaryRow, { label: "This Month", s: agg.month }),
-      /* @__PURE__ */ jsx2(KpiLine, { agg })
-    ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2(Box2, { height: 1 }),
+    headroom?.value != null && /* @__PURE__ */ jsxs2(Box2, { children: [
+      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "Usage " }),
+      /* @__PURE__ */ jsxs2(Text2, { bold: true, color: severityColor(headroom.value, theme.crit, theme.warn, meta.color), children: [
+        Math.round(usageFromHeadroom(headroom.value)),
+        "%"
+      ] })
+    ] }),
+    meta.hasUsage && (agg ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(Box2, { height: 1 }),
+      /* @__PURE__ */ jsx3(SummaryRow, { label: "Today", s: agg.today }),
+      /* @__PURE__ */ jsx3(SummaryRow, { label: "This Week", s: agg.week }),
+      /* @__PURE__ */ jsx3(SummaryRow, { label: "This Month", s: agg.month }),
+      /* @__PURE__ */ jsx3(KpiLine, { agg })
+    ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(Box2, { height: 1 }),
       /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
         "Fetching usage",
         glyphs().ellipsis
       ] })
     ] })),
-    meta.hasBilling && showBars && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      meta.hasUsage && /* @__PURE__ */ jsx2(Rule, { inner }),
-      /* @__PURE__ */ jsx2(LimitsBlock, { items, inner, showRowPlans: planView.mode === "perRow", privacyMode, resetDisplay, tz })
+    meta.hasBilling && showBars && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      meta.hasUsage && /* @__PURE__ */ jsx3(Rule, { inner }),
+      /* @__PURE__ */ jsx3(LimitsBlock, { items, inner, showRowPlans: planView.mode === "perRow", privacyMode, resetDisplay, tz, providerName: meta.name })
     ] }),
-    meta.hasBilling && !showBars && !meta.hasUsage && /* @__PURE__ */ jsx2(CompactBilling, { items, privacyMode }),
-    hasSpark && showSpark && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2(Rule, { inner }),
-      /* @__PURE__ */ jsx2(SparkFooter, { series: agg.series, month: agg.month.cost, color: meta.color })
+    meta.hasBilling && !showBars && !meta.hasUsage && /* @__PURE__ */ jsx3(CompactBilling, { items, privacyMode }),
+    hasSpark && showSpark && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(Rule, { inner }),
+      /* @__PURE__ */ jsx3(SparkFooter, { series: agg.series, month: agg.month.cost, color: meta.color })
     ] }),
-    !meta.hasUsage && activity && showSpark && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2(Rule, { inner }),
+    !meta.hasUsage && activity && showSpark && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(Rule, { inner }),
       /* @__PURE__ */ jsxs2(Box2, { children: [
-        /* @__PURE__ */ jsx2(Box2, { width: 4, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "14d" }) }),
-        /* @__PURE__ */ jsx2(Text2, { color: meta.color, children: sparkline(activity.series) }),
-        /* @__PURE__ */ jsx2(Box2, { flexGrow: 1, justifyContent: "flex-end", children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: activity.summary }) })
+        /* @__PURE__ */ jsx3(Box2, { width: 4, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "14d" }) }),
+        /* @__PURE__ */ jsx3(Text2, { color: meta.color, children: sparkline(activity.series.slice(-14)) }),
+        /* @__PURE__ */ jsx3(Box2, { flexGrow: 1, justifyContent: "flex-end", children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: activity.summary }) })
       ] })
     ] })
   ] });
 }
 function CompactBilling({ items, privacyMode }) {
-  const billing = items.map((i) => i.s?.billing).find(Boolean);
+  const theme = useTuiTheme();
+  const stats = items.map((item) => item.s).find((value) => value?.billing);
+  const billing = stats?.billing;
   if (!billing) return /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
     "Fetching",
     glyphs().ellipsis
   ] });
-  if (billing.error) return /* @__PURE__ */ jsx2(Text2, { color: "red", children: privacyMode ? redactEmail(billing.error) : billing.error });
-  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) });
+  if (billing.error) return /* @__PURE__ */ jsx3(Text2, { color: theme.crit, children: privacyMode ? redactEmail(billing.error) : billing.error });
+  const quotas = quotaViews(stats);
+  const quota = quotas.find((value) => value.primary) ?? quotas[0];
+  if (!quota) return /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "No data" });
+  return /* @__PURE__ */ jsx3(Text2, { bold: true, color: theme.cost, children: quota.valueText });
 }
 function Rule({ inner }) {
-  return /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: glyphs().rule.repeat(Math.max(0, inner)) });
+  return /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: glyphs().rule.repeat(Math.max(0, inner)) });
 }
 function SummaryRow({ label, s }) {
-  const cachedPct = s.tokens > 0 ? Math.round(s.cacheRead / s.tokens * 100) : 0;
+  const theme = useTuiTheme();
+  const cachedPct = cachedTokenPercentage(s);
   return /* @__PURE__ */ jsxs2(Box2, { children: [
-    /* @__PURE__ */ jsx2(Box2, { width: 11, flexShrink: 0, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, wrap: "truncate", children: label }) }),
-    /* @__PURE__ */ jsx2(Box2, { width: 11, flexShrink: 0, justifyContent: "flex-end", children: /* @__PURE__ */ jsx2(Text2, { bold: true, color: "yellow", wrap: "truncate", children: currency(s.cost) }) }),
-    /* @__PURE__ */ jsx2(Box2, { width: 13, flexShrink: 0, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs2(Text2, { dimColor: true, wrap: "truncate", children: [
+    /* @__PURE__ */ jsx3(Box2, { width: 11, flexShrink: 0, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, wrap: "truncate", children: label }) }),
+    /* @__PURE__ */ jsx3(Box2, { width: 11, flexShrink: 0, justifyContent: "flex-end", children: /* @__PURE__ */ jsx3(Text2, { bold: true, color: theme.cost, wrap: "truncate", children: currency(s.cost) }) }),
+    /* @__PURE__ */ jsx3(Box2, { width: 13, flexShrink: 0, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs2(Text2, { dimColor: true, wrap: "truncate", children: [
       tokens(s.tokens),
       " tok"
     ] }) }),
-    /* @__PURE__ */ jsx2(Box2, { flexGrow: 1, justifyContent: "flex-end", children: cachedPct > 0 ? /* @__PURE__ */ jsxs2(Text2, { dimColor: true, wrap: "truncate", children: [
+    /* @__PURE__ */ jsx3(Box2, { flexGrow: 1, justifyContent: "flex-end", children: cachedPct > 0 ? /* @__PURE__ */ jsxs2(Text2, { dimColor: true, wrap: "truncate", children: [
       cachedPct,
       "% cached"
-    ] }) : /* @__PURE__ */ jsx2(Text2, { children: " " }) })
+    ] }) : /* @__PURE__ */ jsx3(Text2, { children: " " }) })
   ] });
 }
 function KpiLine({ agg }) {
+  const theme = useTuiTheme();
   const hasBurn = agg.burnRate > 0;
   const hasSaved = agg.month.cacheSavings > 0;
   if (!hasBurn && !hasSaved) return null;
   return /* @__PURE__ */ jsxs2(Box2, { children: [
-    hasBurn && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Burn " }),
-      /* @__PURE__ */ jsxs2(Text2, { color: "red", children: [
+    hasBurn && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "Burn " }),
+      /* @__PURE__ */ jsxs2(Text2, { color: theme.crit, children: [
         currency(agg.burnRate),
         "/hr"
       ] })
     ] }),
-    /* @__PURE__ */ jsx2(Box2, { flexGrow: 1 }),
-    hasSaved && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Cache saved " }),
-      /* @__PURE__ */ jsxs2(Text2, { color: "green", children: [
+    /* @__PURE__ */ jsx3(Box2, { flexGrow: 1 }),
+    hasSaved && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "Cache saved " }),
+      /* @__PURE__ */ jsxs2(Text2, { color: theme.positive, children: [
         currency(agg.month.cacheSavings),
         "/mo"
       ] })
     ] })
   ] });
 }
-function accountTitle(account, billing, privacyMode = false) {
+function accountTitle(account, billing, privacyMode = false, identity, providerName = "") {
+  if (identity) return accountIdentityText({ identity, name: account.name }, providerName);
   const email = billing?.email;
   const title = email && !account.name.includes("@") ? `${account.name} ${email}` : account.name;
   return privacyMode ? redactEmail(title) : title;
 }
-function LimitsBlock({ items, inner, showRowPlans, privacyMode, resetDisplay, tz }) {
+function LimitsBlock({ items, inner, showRowPlans, privacyMode, resetDisplay, tz, providerName }) {
+  const theme = useTuiTheme();
   const showName = items.length > 1;
-  const labels = items.flatMap((i) => i.s?.billing?.metrics ?? []).map((m) => m.label.length);
+  const labels = items.flatMap((i) => quotaViews(i.s)).map((quota) => quota.label.length);
   const labelW = Math.min(Math.max(7, ...labels) + 1, 14);
   const resetW = resetDisplay === "absolute" ? 17 : 8;
   const barW = Math.max(10, Math.min(46, inner - labelW - resetW - 5));
-  return /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: items.map(({ account, s }, idx) => {
+  return /* @__PURE__ */ jsx3(Box2, { flexDirection: "column", children: items.map(({ account, s }, idx) => {
     const billing = s?.billing;
-    const staleLabel = billing && !billing.error && billing.metrics.length > 0 ? billingStaleLabel(billing.asOfMs ?? s?.billingUpdatedAt, Date.now()) : null;
+    const quotas = quotaViews(s);
+    const staleLabel = billing && !billing.error && quotas.length > 0 ? billingStaleLabel(billing.asOfMs ?? s?.billingUpdatedAt, Date.now()) : null;
     return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: showName && idx > 0 ? 1 : 0, children: [
       showName && (() => {
         const rowPlan = showRowPlans ? normalizePlan(billing?.plan) : null;
@@ -483,18 +627,18 @@ function LimitsBlock({ items, inner, showRowPlans, privacyMode, resetDisplay, tz
             glyphs().dot,
             " "
           ] }),
-          /* @__PURE__ */ jsx2(Text2, { bold: true, children: truncateName(accountTitle(account, billing, privacyMode), nameBudget) }),
-          shownPlan && /* @__PURE__ */ jsxs2(Fragment, { children: [
-            /* @__PURE__ */ jsx2(Box2, { flexGrow: 1 }),
-            /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: shownPlan })
+          /* @__PURE__ */ jsx3(Text2, { bold: true, children: truncateName(accountTitle(account, billing, privacyMode, s?.identity, providerName), nameBudget) }),
+          shownPlan && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            /* @__PURE__ */ jsx3(Box2, { flexGrow: 1 }),
+            /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: shownPlan })
           ] })
         ] });
       })(),
       !billing ? /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
         "Fetching",
         glyphs().ellipsis
-      ] }) : billing.error ? /* @__PURE__ */ jsx2(Text2, { color: "red", wrap: "truncate-end", children: privacyMode ? redactEmail(billing.error) : 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, resetW, resetDisplay, tz }, `${m.label}${i}`)),
-      staleLabel && /* @__PURE__ */ jsxs2(Text2, { color: "yellow", dimColor: true, children: [
+      ] }) : billing.error ? /* @__PURE__ */ jsx3(Text2, { color: theme.crit, wrap: "truncate-end", children: privacyMode ? redactEmail(billing.error) : billing.error }) : quotas.length === 0 ? /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "No data" }) : quotas.map((quota) => /* @__PURE__ */ jsx3(QuotaRow, { quota, color: account.color, barW, labelW, resetW, resetDisplay, tz }, quota.key)),
+      staleLabel && /* @__PURE__ */ jsxs2(Text2, { color: theme.warn, dimColor: true, children: [
         glyphs().warn,
         " ",
         staleLabel,
@@ -506,71 +650,45 @@ function LimitsBlock({ items, inner, showRowPlans, privacyMode, resetDisplay, tz
     ] }, account.id);
   }) });
 }
-function MetricRow({ m, color, barW, labelW, resetW, resetDisplay, tz }) {
-  if (m.format.kind === "percent") {
-    const barColor = m.used >= 90 ? "red" : m.used >= 75 ? "yellow" : color;
+function quotaViews(stats) {
+  return resolveQuotaViews({ quotas: stats?.quotas, metrics: stats?.billing?.metrics });
+}
+function QuotaRow({ quota, color, barW, labelW, resetW, resetDisplay, tz }) {
+  const theme = useTuiTheme();
+  if (quota.bounded && quota.usedPct !== null) {
+    const used = quota.usedPct;
+    const remaining = quota.remainingPct ?? 0;
+    const barColor = severityColor(remaining, theme.crit, theme.warn, color);
     return /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__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),
+      /* @__PURE__ */ jsx3(Box2, { width: labelW, flexShrink: 0, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, wrap: "truncate", children: quota.label }) }),
+      /* @__PURE__ */ jsx3(Bar, { pct: used, color: barColor, width: barW }),
+      /* @__PURE__ */ jsx3(Box2, { width: 5, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
+        Math.round(used),
         "%"
       ] }) }),
-      /* @__PURE__ */ jsx2(Box2, { width: resetW, justifyContent: "flex-end", children: m.resetsAt ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: resetAt(m.resetsAt, resetDisplay, Date.now(), tz) }) : /* @__PURE__ */ jsx2(Text2, { children: " " }) })
+      /* @__PURE__ */ jsx3(Box2, { width: resetW, justifyContent: "flex-end", children: quota.resetsAt ? /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: resetAt(new Date(quota.resetsAt).toISOString(), resetDisplay, Date.now(), tz) }) : /* @__PURE__ */ jsx3(Text2, { children: " " }) })
     ] });
   }
   return /* @__PURE__ */ jsxs2(Box2, { children: [
-    /* @__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) })
+    /* @__PURE__ */ jsx3(Box2, { width: labelW, flexShrink: 0, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, wrap: "truncate", children: quota.label }) }),
+    /* @__PURE__ */ jsx3(Text2, { bold: true, color: theme.cost, children: quota.valueText })
   ] });
 }
 function SparkFooter({ series, month, color }) {
   return /* @__PURE__ */ jsxs2(Box2, { children: [
-    /* @__PURE__ */ jsx2(Box2, { width: 4, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "14d" }) }),
-    /* @__PURE__ */ jsx2(Text2, { color, children: sparkline(series) }),
-    /* @__PURE__ */ jsx2(Box2, { flexGrow: 1, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    /* @__PURE__ */ jsx3(Box2, { width: 4, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "14d" }) }),
+    /* @__PURE__ */ jsx3(Text2, { color, children: sparkline(series.slice(-14)) }),
+    /* @__PURE__ */ jsx3(Box2, { flexGrow: 1, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
       currency(month),
       " mo"
     ] }) })
   ] });
 }
-function aggregate(list) {
-  const zero = () => ({ cost: 0, tokens: 0, input: 0, cacheRead: 0, cacheSavings: 0 });
-  const z = { today: zero(), week: zero(), month: zero(), burnRate: 0, series: [] };
-  for (const d of list) {
-    for (const k of ["today", "week", "month"]) {
-      z[k].cost += d[k].cost;
-      z[k].tokens += d[k].tokens;
-      z[k].input += d[k].input ?? 0;
-      z[k].cacheRead += d[k].cacheRead;
-      z[k].cacheSavings += d[k].cacheSavings;
-    }
-    z.burnRate += d.burnRate;
-    d.series.forEach((v, i) => {
-      z.series[i] = (z.series[i] ?? 0) + v;
-    });
-  }
-  return z;
-}
 var TotalsRow = memo2(function TotalsRow2({ groups, stats, cols }) {
-  const zero = () => ({ cost: 0, tokens: 0, input: 0, cacheRead: 0, cacheSavings: 0 });
-  const t = zero(), w = zero(), m = zero();
-  for (const g of groups) {
-    if (!PROVIDERS[g.provider].hasUsage) continue;
-    for (const a of g.accounts) {
-      const d = stats.get(a.id)?.dashboard;
-      if (!d) continue;
-      t.cost += d.today.cost;
-      t.tokens += d.today.tokens;
-      t.input += d.today.input ?? 0;
-      w.cost += d.week.cost;
-      w.tokens += d.week.tokens;
-      w.input += d.week.input ?? 0;
-      m.cost += d.month.cost;
-      m.tokens += d.month.tokens;
-      m.input += d.month.input ?? 0;
-    }
-  }
+  const aggregate = aggregateDashboardData(groups.flatMap((group) => PROVIDERS[group.provider].hasUsage ? group.accounts.map((account) => stats.get(account.id)?.dashboard) : []));
+  const t = aggregate?.today ?? { cost: 0, tokens: 0, input: 0, cacheRead: 0, cacheSavings: 0 };
+  const w = aggregate?.week ?? { cost: 0, tokens: 0, input: 0, cacheRead: 0, cacheSavings: 0 };
+  const m = aggregate?.month ?? { cost: 0, tokens: 0, input: 0, cacheRead: 0, cacheSavings: 0 };
   const inner = cols - 4;
   const dot = glyphs().middot;
   const monthNonCached = m.input > 0 ? `, ${tokens(m.input)} non-cached` : "";
@@ -579,920 +697,1219 @@ var TotalsRow = memo2(function TotalsRow2({ groups, stats, cols }) {
   const noTok = `${glyphs().dotAll}  Today ${currency(t.cost)}  ${dot}  Week ${currency(w.cost)}  ${dot}  Month ${currency(m.cost)}${m.input > 0 ? ` (${tokens(m.input)} non-cached)` : ""}`;
   const tight = `${glyphs().dotAll}  ${currency(t.cost)}  ${dot}  ${currency(w.cost)}  ${dot}  ${currency(m.cost)}`;
   const text = full.length <= inner ? full : monthOnly.length <= inner ? monthOnly : noTok.length <= inner ? noTok : tight;
-  return /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: text }) });
+  return /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: text }) });
 });
 
 // src/ui/table.tsx
-import { memo as memo4 } from "react";
-import { Box as Box4, Text as Text4 } from "ink";
-
-// src/ui/settings.tsx
 import { memo as memo3 } from "react";
 import { Box as Box3, Text as Text3 } from "ink";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var GENERAL_ROWS = 11;
-var SETTINGS_TABS = ["general", "providers", "accounts"];
-var SETTINGS_TAB_LABELS = {
-  general: "General",
-  providers: "Providers",
-  accounts: "Accounts"
-};
-var FORM_FIELDS = ["provider", "name", "homeDir", "color"];
-var SettingsView = memo3(function SettingsView2({
-  config,
-  cursor,
-  activeTab,
-  tzEdit,
-  tzCaret,
-  tzError,
-  allowedHostsEdit,
-  allowedHostsCaret,
-  allowedHostsError,
-  resolvedTz,
-  accountForm,
-  activeAccountId,
-  trackedAccounts,
-  accountIdentities
-}) {
-  if (accountForm) return /* @__PURE__ */ jsx3(AccountFormView, { form: accountForm, accounts: config.accounts });
-  const editingTz = tzEdit !== null;
-  const editingAllowedHosts = allowedHostsEdit !== null;
-  const tzDisplay = config.timezone === null ? `System (${resolvedTz})` : config.timezone;
-  const tabFocused = cursor < 0;
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginTop: 1, children: [
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Settings" }),
-    /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: configLocation() }),
-    /* @__PURE__ */ jsx3(Box3, { height: 1 }),
-    /* @__PURE__ */ jsx3(SettingsTabBar, { active: activeTab, focused: tabFocused }),
-    /* @__PURE__ */ jsx3(Box3, { height: 1 }),
-    activeTab === "general" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx3(Text3, { bold: true, dimColor: true, children: "General" }),
-      /* @__PURE__ */ jsxs3(Row, { cursor, idx: 0, label: "Refresh interval", children: [
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          glyphs().caretL,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs3(Text3, { bold: true, color: "yellow", children: [
-          config.interval,
-          "s"
-        ] }),
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          " ",
-          glyphs().caretR
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs3(Row, { cursor, idx: 1, label: "Billing poll", children: [
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          glyphs().caretL,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs3(Text3, { bold: true, color: "yellow", children: [
-          config.billingInterval,
-          "m"
-        ] }),
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          " ",
-          glyphs().caretR
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx3(Row, { cursor, idx: 2, label: "Clear screen", children: /* @__PURE__ */ jsx3(Text3, { bold: true, color: config.clearScreen ? "green" : "red", children: config.clearScreen ? "on" : "off" }) }),
-      /* @__PURE__ */ jsx3(Row, { cursor, idx: 3, label: "Privacy mode", children: /* @__PURE__ */ jsx3(Text3, { bold: true, color: config.privacyMode ? "green" : "red", children: config.privacyMode ? "on" : "off" }) }),
-      /* @__PURE__ */ jsx3(Row, { cursor, idx: 4, label: "Privacy key", children: /* @__PURE__ */ jsx3(Text3, { bold: true, color: "yellow", children: config.privacyToggleKey === " " ? "space" : config.privacyToggleKey }) }),
-      /* @__PURE__ */ jsx3(Row, { cursor, idx: 5, label: "Timezone", children: editingTz ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "[" }),
-        /* @__PURE__ */ jsx3(CaretText, { value: tzEdit ?? "", caret: tzCaret, color: "cyan" }),
-        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "]" })
-      ] }) : /* @__PURE__ */ jsx3(Text3, { bold: true, color: "yellow", children: tzDisplay }) }),
-      cursor === 5 && tzError && /* @__PURE__ */ jsxs3(Text3, { color: "red", children: [
-        "  ",
-        tzError
-      ] }),
-      /* @__PURE__ */ jsxs3(Row, { cursor, idx: 6, label: "Dashboard", children: [
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          glyphs().caretL,
-          " "
-        ] }),
-        /* @__PURE__ */ jsx3(Text3, { bold: true, color: "yellow", children: config.dashboardLayout === "grid" ? "grid (all)" : "single (cycle)" }),
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          " ",
-          glyphs().caretR
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs3(Row, { cursor, idx: 7, label: "Default focus", children: [
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          glyphs().caretL,
-          " "
-        ] }),
-        /* @__PURE__ */ jsx3(Text3, { bold: true, color: "yellow", children: config.defaultFocus === "all" ? "All" : "Last account" }),
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          " ",
-          glyphs().caretR
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx3(Row, { cursor, idx: 8, label: "Network access", children: /* @__PURE__ */ jsx3(Text3, { bold: true, color: config.allowNetworkAccess ? "red" : "green", children: config.allowNetworkAccess ? "LAN (unsafe)" : "local only" }) }),
-      /* @__PURE__ */ jsx3(Row, { cursor, idx: 9, label: "Allowed hosts", children: editingAllowedHosts ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "[" }),
-        /* @__PURE__ */ jsx3(CaretText, { value: allowedHostsEdit ?? "", caret: allowedHostsCaret, color: "cyan" }),
-        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "]" })
-      ] }) : /* @__PURE__ */ jsx3(Text3, { bold: true, color: "yellow", children: config.allowedHosts.join(", ") || "none" }) }),
-      cursor === 9 && allowedHostsError && /* @__PURE__ */ jsxs3(Text3, { color: "red", children: [
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var MONTHS = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var TableProviderBar = memo3(function TableProviderBar2({ providers, active, onSelect }) {
+  return /* @__PURE__ */ jsxs3(Box3, { children: [
+    /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "provider  " }),
+    providers.map((p) => {
+      const meta = PROVIDERS[p];
+      return /* @__PURE__ */ jsx4(ClickableBox, { onClick: () => onSelect(p), marginRight: 1, children: p === active ? /* @__PURE__ */ jsxs3(Text3, { bold: true, color: meta.color, inverse: true, children: [
+        " ",
+        meta.name,
+        " "
+      ] }) : /* @__PURE__ */ jsxs3(Text3, { color: meta.color, dimColor: true, children: [
+        " ",
+        meta.name,
+        " "
+      ] }) }, p);
+    }),
+    /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "  p/P switch" })
+  ] });
+});
+var ControlBar = memo3(function ControlBar2({ views, period, sort, model, search, searchCaret, searching, showPeriod, showModel }) {
+  const theme = useTuiTheme();
+  return /* @__PURE__ */ jsxs3(Box3, { children: [
+    showPeriod && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      views.map((v, i) => /* @__PURE__ */ jsx4(Box3, { marginRight: 2, children: i === period ? /* @__PURE__ */ jsxs3(Text3, { bold: true, color: theme.accent, children: [
+        "[",
+        v,
+        "]"
+      ] }) : /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: v }) }, v)),
+      /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "  " })
+    ] }),
+    /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "sort " }),
+    /* @__PURE__ */ jsx4(Text3, { bold: true, color: theme.accent, children: sort }),
+    /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      "  o cycle  ",
+      glyphs().middot,
+      "  "
+    ] }),
+    showModel && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "model " }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, color: model ? modelColor(model) : theme.accent, children: model ?? "all" }),
+      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+        "  m model  ",
+        glyphs().middot,
+        "  "
+      ] })
+    ] }),
+    searching ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "/" }),
+      /* @__PURE__ */ jsx4(CaretText, { value: search, caret: searchCaret, color: theme.accent })
+    ] }) : search ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "filter " }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, color: theme.positive, children: search }),
+      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+        " (/ edit ",
+        glyphs().middot,
+        " esc clear)"
+      ] })
+    ] }) : /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "/ filter" })
+  ] });
+});
+var TokenTable = memo3(function TokenTable2({ rows, cursor, expanded, maxRows, cols, onRowClick }) {
+  const theme = useTuiTheme();
+  if (rows.length === 0) return /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "No usage in this period (or filtered out)." });
+  const wide = cols > 90;
+  const base = wide ? { label: 12, input: 10, output: 10, cc: 14, cr: 12, total: 11, cost: 13 } : { label: 8, input: 7, output: 7, cc: 7, cr: 8, total: 0, cost: 11 };
+  const fixed = base.label + base.input + base.output + base.cc + base.cr + base.total + base.cost;
+  const available = cols - fixed - 6;
+  const W = { ...base, models: Math.max(wide ? 22 : 14, available) };
+  const lineW = W.label + W.models + W.input + W.output + W.cc + W.cr + W.total + W.cost;
+  const totals = { input: 0, output: 0, cacheCreate: 0, cacheRead: 0, cost: 0 };
+  for (const r of rows) {
+    totals.input += r.input;
+    totals.output += r.output;
+    totals.cacheCreate += r.cacheCreate;
+    totals.cacheRead += r.cacheRead;
+    totals.cost += r.cost;
+  }
+  const clampedCursor = Math.min(cursor, rows.length - 1);
+  const scrollStart = Math.max(0, Math.min(clampedCursor - Math.floor(maxRows / 2), rows.length - maxRows));
+  const visible = rows.slice(scrollStart, scrollStart + maxRows);
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      /* @__PURE__ */ jsxs3(Text3, { bold: true, children: [
         "  ",
-        allowedHostsError
+        col("Date", W.label, "left")
       ] }),
-      config.allowNetworkAccess && /* @__PURE__ */ jsx3(Text3, { color: "red", children: "  Warning: dashboard data and settings will be exposed to your local network after daemon restart." }),
-      /* @__PURE__ */ jsxs3(Row, { cursor, idx: 10, label: "Reset times", children: [
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          glyphs().caretL,
-          " "
-        ] }),
-        /* @__PURE__ */ jsx3(Text3, { bold: true, color: "yellow", children: config.resetDisplay === "relative" ? "time remaining" : "exact date/time" }),
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          " ",
-          glyphs().caretR
-        ] })
-      ] })
+      /* @__PURE__ */ jsx4(Text3, { bold: true, children: col("Models", W.models, "left") }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, children: col("Input", W.input) }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, children: col("Output", W.output) }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, children: col(wide ? "Cache Create" : "CchCrt", W.cc) }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, children: col(wide ? "Cache Read" : "CchRd", W.cr) }),
+      W.total > 0 && /* @__PURE__ */ jsx4(Text3, { bold: true, children: col("Total", W.total) }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, children: col("Cost", W.cost) })
     ] }),
-    activeTab === "providers" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx3(Text3, { bold: true, dimColor: true, children: "Providers" }),
-      PROVIDER_ORDER.map((pid, i) => {
-        const selected = cursor === i;
-        const enabled = !config.disabledProviders.includes(pid);
-        const p = PROVIDERS[pid];
-        return /* @__PURE__ */ jsxs3(Box3, { children: [
-          /* @__PURE__ */ jsxs3(Text3, { color: selected ? "green" : void 0, children: [
-            selected ? glyphs().caretR : " ",
-            " "
-          ] }),
-          /* @__PURE__ */ jsx3(Text3, { bold: enabled, color: enabled ? p.color : void 0, dimColor: !enabled, children: enabled ? `[${glyphs().check}]` : "[ ]" }),
-          /* @__PURE__ */ jsxs3(Text3, { color: p.color, children: [
-            " ",
-            glyphs().dot,
-            " "
+    /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: glyphs().rule.repeat(lineW + 2) }),
+    visible.map((r, vi) => {
+      const idx = scrollStart + vi;
+      const selected = idx === clampedCursor;
+      return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx4(ClickableBox, { onClick: () => onRowClick(idx), children: /* @__PURE__ */ jsxs3(Text3, { inverse: selected, children: [
+          /* @__PURE__ */ jsxs3(Text3, { color: selected ? void 0 : theme.accent, children: [
+            selected ? `${glyphs().caretR} ` : "  ",
+            col(fmtLabel(r.label), W.label, "left")
           ] }),
-          /* @__PURE__ */ jsx3(Box3, { width: 9, children: /* @__PURE__ */ jsx3(Text3, { bold: selected, children: p.name }) }),
-          /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: enabled ? "tracking" : "off" })
-        ] }, pid);
-      })
-    ] }),
-    activeTab === "accounts" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx3(Text3, { bold: true, dimColor: true, children: "Accounts" }),
-      trackedAccounts.length === 0 && /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-        "  none tracked ",
-        glyphs().emDash,
-        " enable a provider or add an account"
+          /* @__PURE__ */ jsx4(Text3, { dimColor: !selected, children: col(r.models.join(", "), W.models, "left") }),
+          /* @__PURE__ */ jsx4(Text3, { children: col(tokens(r.input), W.input) }),
+          /* @__PURE__ */ jsx4(Text3, { children: col(tokens(r.output), W.output) }),
+          /* @__PURE__ */ jsx4(Text3, { children: col(tokens(r.cacheCreate), W.cc) }),
+          /* @__PURE__ */ jsx4(Text3, { children: col(tokens(r.cacheRead), W.cr) }),
+          W.total > 0 && /* @__PURE__ */ jsx4(Text3, { children: col(tokens(r.total), W.total) }),
+          /* @__PURE__ */ jsx4(Text3, { bold: true, color: selected ? void 0 : theme.cost, children: col(currency(r.cost), W.cost) })
+        ] }) }),
+        idx === expanded && /* @__PURE__ */ jsx4(RowDetail, { row: r, indent: W.label + 2 })
+      ] }, r.label);
+    }),
+    /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: glyphs().rule.repeat(lineW + 2) }),
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      /* @__PURE__ */ jsxs3(Text3, { bold: true, color: theme.accent, children: [
+        "  ",
+        col("Total", W.label, "left")
       ] }),
-      trackedAccounts.map((acc, i) => {
-        const selected = cursor === i;
-        const isActive = acc.id === activeAccountId;
-        const provider = PROVIDERS[acc.providerId];
-        const identity = accountIdentities.get(acc.id);
-        const rawIdentityLabel = identity?.email || identity?.displayName || acc.name;
-        const identityLabel = config.privacyMode ? redactEmail(rawIdentityLabel) : rawIdentityLabel;
-        const plan = identity?.plan ?? null;
-        return /* @__PURE__ */ jsxs3(Box3, { children: [
-          /* @__PURE__ */ jsxs3(Text3, { color: selected ? "green" : void 0, children: [
-            selected ? glyphs().caretR : " ",
-            " "
-          ] }),
-          /* @__PURE__ */ jsxs3(Text3, { color: acc.color || provider.color, children: [
-            isActive ? glyphs().dot : glyphs().radioOff,
-            " "
-          ] }),
-          /* @__PURE__ */ jsx3(Box3, { width: 28, children: /* @__PURE__ */ jsx3(Text3, { bold: true, children: truncateName(identityLabel, 27) }) }),
-          /* @__PURE__ */ jsx3(Box3, { width: 9, children: /* @__PURE__ */ jsx3(Text3, { color: provider.color, children: provider.name }) }),
-          /* @__PURE__ */ jsx3(Box3, { width: 18, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: plan ? truncateName(plan, 17) : "" }) }),
-          /* @__PURE__ */ jsx3(Box3, { width: 12, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: acc.source === "auto" ? "auto tracking" : "configured" }) }),
-          /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: truncateName(acc.homeDir, 24) })
-        ] }, `${acc.source}:${acc.id}`);
-      }),
-      /* @__PURE__ */ jsxs3(Box3, { children: [
-        /* @__PURE__ */ jsxs3(Text3, { color: cursor === trackedAccounts.length ? "green" : void 0, children: [
-          cursor === trackedAccounts.length ? glyphs().caretR : " ",
-          " "
-        ] }),
-        /* @__PURE__ */ jsx3(Text3, { color: "greenBright", children: "+ " }),
-        /* @__PURE__ */ jsx3(Text3, { children: "Add account" })
-      ] })
+      /* @__PURE__ */ jsx4(Text3, { children: col("", W.models, "left") }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, color: theme.cost, children: col(tokens(totals.input), W.input) }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, color: theme.cost, children: col(tokens(totals.output), W.output) }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, color: theme.cost, children: col(tokens(totals.cacheCreate), W.cc) }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, color: theme.cost, children: col(tokens(totals.cacheRead), W.cr) }),
+      W.total > 0 && /* @__PURE__ */ jsx4(Text3, { bold: true, color: theme.cost, children: col(tokens(totals.input + totals.output + totals.cacheCreate + totals.cacheRead), W.total) }),
+      /* @__PURE__ */ jsx4(Text3, { bold: true, color: theme.cost, children: col(currency(totals.cost), W.cost) })
     ] }),
-    /* @__PURE__ */ jsx3(Box3, { height: 1 }),
-    tabFocused ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-      glyphs().arrowL,
-      glyphs().arrowR,
-      "/tab switch section  ",
-      glyphs().middot,
-      "  ",
-      glyphs().arrowD,
-      " rows  ",
-      glyphs().middot,
-      "  s/Esc close"
-    ] }) : editingTz ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-      "type IANA name (e.g. Europe/London) ",
-      glyphs().middot,
-      " empty = System ",
-      glyphs().middot,
-      " Enter save ",
-      glyphs().middot,
-      " Esc cancel"
-    ] }) : editingAllowedHosts ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-      "comma-separated exact DNS names ",
-      glyphs().middot,
-      " Enter save ",
-      glyphs().middot,
-      " Esc cancel"
-    ] }) : activeTab === "providers" ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+    /* @__PURE__ */ jsx4(Box3, { height: 1 }),
+    /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
       glyphs().arrowU,
       glyphs().arrowD,
-      " select  ",
-      glyphs().middot,
-      "  space toggle provider  ",
-      glyphs().middot,
-      "  s/Esc close"
-    ] }) : activeTab === "accounts" && cursor >= 0 && cursor < trackedAccounts.length ? trackedAccounts[cursor]?.source === "auto" ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-      glyphs().arrowU,
-      glyphs().arrowD,
-      " select  ",
+      " navigate  ",
       glyphs().middot,
-      "  Enter configure  ",
+      "  Enter detail  ",
       glyphs().middot,
-      "  space activate  ",
+      "  o sort  ",
       glyphs().middot,
-      "  s/Esc close"
-    ] }) : /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-      glyphs().arrowU,
-      glyphs().arrowD,
-      " select  ",
+      "  g/G top/bottom  ",
       glyphs().middot,
       "  ",
-      glyphs().shift,
-      glyphs().arrowU,
-      glyphs().arrowD,
-      " reorder  ",
-      glyphs().middot,
-      "  Enter edit  ",
-      glyphs().middot,
-      "  space activate  ",
-      glyphs().middot,
-      "  d delete  ",
-      glyphs().middot,
-      "  s/Esc close"
-    ] }) : activeTab === "accounts" && cursor === trackedAccounts.length ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-      glyphs().arrowU,
-      glyphs().arrowD,
-      " select  ",
-      glyphs().middot,
-      "  Enter add account  ",
-      glyphs().middot,
-      "  s/Esc close"
-    ] }) : /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-      glyphs().arrowU,
-      glyphs().arrowD,
-      " select  ",
-      glyphs().arrowL,
-      glyphs().arrowR,
-      " adjust  Enter edit  tab switch section  s/Esc close"
+      clampedCursor + 1,
+      "/",
+      rows.length
     ] })
   ] });
 });
-function SettingsTabBar({ active, focused }) {
-  return /* @__PURE__ */ jsxs3(Box3, { children: [
-    /* @__PURE__ */ jsxs3(Text3, { color: focused ? "green" : void 0, children: [
-      focused ? glyphs().caretR : " ",
+function RowDetail({ row, indent }) {
+  const theme = useTuiTheme();
+  return /* @__PURE__ */ jsx4(Box3, { flexDirection: "column", paddingLeft: indent, children: row.breakdown.map((m, i) => /* @__PURE__ */ jsxs3(Text3, { children: [
+    /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      i === row.breakdown.length - 1 ? glyphs().treeEnd : glyphs().treeMid,
       " "
     ] }),
-    SETTINGS_TABS.map((tab, i) => {
-      const selected = tab === active;
-      return /* @__PURE__ */ jsxs3(Box3, { marginRight: 1, children: [
-        selected ? /* @__PURE__ */ jsxs3(Text3, { bold: true, inverse: true, children: [
-          " ",
-          SETTINGS_TAB_LABELS[tab],
+    /* @__PURE__ */ jsx4(Text3, { bold: true, children: col(m.name, 16, "left") }),
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      col(tokens(m.input), 8),
+      " in  "
+    ] }),
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      col(tokens(m.output), 8),
+      " out  "
+    ] }),
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      col(tokens(m.cacheCreate), 8),
+      " cc  "
+    ] }),
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      col(tokens(m.cacheRead), 9),
+      " cr  "
+    ] }),
+    /* @__PURE__ */ jsx4(Text3, { bold: true, color: theme.cost, children: currency(m.cost) })
+  ] }, m.name)) });
+}
+function fmtLabel(label) {
+  if (label.length === 7 && label[4] === "-") {
+    return `${MONTHS[Number(label.slice(5, 7))]} '${label.slice(2, 4)}`;
+  }
+  return shortDate(label);
+}
+
+// src/ui/onboarding.tsx
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function Onboarding({ items, cursor, onToggle, onConfirm, heading = "Welcome to tokmon", subheading = "Pick the tools you want to track. You can change this anytime in settings." }) {
+  const theme = useTuiTheme();
+  const anyEnabled = items.some((it) => it.enabled);
+  const startIdx = items.length;
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: 1, children: [
+    /* @__PURE__ */ jsx5(Box4, { children: /* @__PURE__ */ jsx5(Text4, { bold: true, color: theme.accent, children: heading }) }),
+    /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: subheading }),
+    /* @__PURE__ */ jsx5(Box4, { height: 1 }),
+    items.map((it, i) => {
+      const selected = cursor === i;
+      const box = it.enabled ? `[${glyphs().check}]` : "[ ]";
+      return /* @__PURE__ */ jsxs4(ClickableBox, { onClick: () => onToggle(i), children: [
+        /* @__PURE__ */ jsxs4(Text4, { color: selected ? theme.accent : void 0, children: [
+          selected ? glyphs().caretR : " ",
           " "
-        ] }) : /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+        ] }),
+        /* @__PURE__ */ jsx5(Text4, { bold: it.enabled, color: it.enabled ? it.color : void 0, dimColor: !it.enabled, children: box }),
+        /* @__PURE__ */ jsxs4(Text4, { color: it.color, children: [
           " ",
-          SETTINGS_TAB_LABELS[tab],
+          glyphs().dot,
           " "
         ] }),
-        i < SETTINGS_TABS.length - 1 && /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: " " })
-      ] }, tab);
-    })
+        /* @__PURE__ */ jsx5(Box4, { width: 13, flexShrink: 0, children: /* @__PURE__ */ jsx5(Text4, { bold: selected, dimColor: !it.detected && !it.enabled, wrap: "truncate", children: it.name }) }),
+        it.detected ? /* @__PURE__ */ jsx5(Text4, { color: theme.ok, dimColor: true, children: "installed" }) : it.enabled ? /* @__PURE__ */ jsx5(Text4, { color: theme.warn, dimColor: true, children: "manual" }) : /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: "not found" })
+      ] }, it.id);
+    }),
+    /* @__PURE__ */ jsx5(Box4, { height: 1 }),
+    /* @__PURE__ */ jsxs4(ClickableBox, { onClick: onConfirm, children: [
+      /* @__PURE__ */ jsxs4(Text4, { color: cursor === startIdx ? theme.accent : void 0, children: [
+        cursor === startIdx ? glyphs().caretR : " ",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx5(Text4, { bold: true, color: anyEnabled ? theme.accent : void 0, dimColor: !anyEnabled, children: anyEnabled ? `${glyphs().play} Start tokmon` : `${glyphs().play} Start (nothing selected)` })
+    ] }),
+    /* @__PURE__ */ jsx5(Box4, { height: 1 }),
+    /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+      glyphs().arrowU,
+      glyphs().arrowD,
+      " move  ",
+      glyphs().middot,
+      "  space toggle  ",
+      glyphs().middot,
+      "  enter start  ",
+      glyphs().middot,
+      "  q quit"
+    ] })
   ] });
 }
-function CaretText({ value, caret, color }) {
-  const c = Math.max(0, Math.min(caret, value.length));
-  if (c >= value.length) {
-    return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx3(Text3, { bold: true, color, children: value }),
-      /* @__PURE__ */ jsx3(Text3, { color, children: glyphs().vbar })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(Text3, { bold: true, color, children: value.slice(0, c) }),
-    /* @__PURE__ */ jsx3(Text3, { inverse: true, color, children: value[c] }),
-    /* @__PURE__ */ jsx3(Text3, { bold: true, color, children: value.slice(c + 1) })
-  ] });
+
+// src/ui/loading.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+import { Box as Box5, Text as Text5 } from "ink";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function accountReady(s, providerId) {
+  if (!s) return false;
+  const p = PROVIDERS[providerId];
+  if (p.hasBilling && (s.billingState === "error" || s.billing?.error)) return true;
+  if (p.hasUsage && s.summaryState !== "ready" && s.summaryState !== "error") return false;
+  if (p.hasBilling && s.billingState !== "ready" && s.billingState !== "error") return false;
+  return true;
 }
-function Row({ cursor, idx, label, children }) {
-  return /* @__PURE__ */ jsxs3(Box3, { children: [
-    /* @__PURE__ */ jsxs3(Text3, { color: cursor === idx ? "green" : void 0, children: [
-      cursor === idx ? glyphs().caretR : " ",
-      " "
-    ] }),
-    /* @__PURE__ */ jsx3(Box3, { width: 20, children: /* @__PURE__ */ jsx3(Text3, { children: label }) }),
-    children
-  ] });
+function statsReadyInput(s) {
+  if (!s) return void 0;
+  return {
+    summaryState: s.dashboard ? "ready" : "pending",
+    billingState: s.billing?.error ? "error" : s.billing ? "ready" : "pending",
+    billing: s.billing
+  };
 }
-function AccountFormView({ form, accounts }) {
-  const previewId = form.mode === "add" ? generateAccountId(form.name || "account", accounts) : form.editingId ?? "";
-  const accent = form.color;
-  const stepIndex = { provider: 1, name: 2, homeDir: 3, color: 4 };
-  const step = stepIndex[form.field];
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginTop: 1, children: [
-    /* @__PURE__ */ jsxs3(Box3, { children: [
-      /* @__PURE__ */ jsx3(Text3, { color: accent, bold: true, children: glyphs().vbar }),
-      /* @__PURE__ */ jsxs3(Text3, { bold: true, children: [
-        " ",
-        form.mode === "add" ? "NEW ACCOUNT" : "EDIT ACCOUNT"
+function groupTodayCost(items) {
+  return items.reduce((sum, s) => {
+    const d = s?.dashboard;
+    return sum + (d?.today.cost ?? 0);
+  }, 0);
+}
+function headlineFor(group, items, privacyMode = false) {
+  const meta = PROVIDERS[group.provider];
+  if (meta.hasUsage) return `${currency(groupTodayCost(items))} today`;
+  const billing = items.map((s) => s?.billing).find(Boolean);
+  if (!billing) return "no data";
+  if (billing.error) return privacyMode ? redactEmail(billing.error) : billing.error;
+  const m = billing.metrics[0];
+  if (m) return metricValueText(m);
+  return billing.plan ?? "no data";
+}
+var STAGGER_FRAMES = 2;
+function LoadingView({ groups, stats, cols, rows, readyInput, privacyMode = false }) {
+  const theme = useTuiTheme();
+  const resolveReady = readyInput ?? ((id) => statsReadyInput(stats.get(id)));
+  const sp = glyphs().spinner;
+  const [frame, setFrame] = useState2(0);
+  useEffect2(() => {
+    const id = setInterval(() => setFrame((f) => f + 1), 80);
+    return () => clearInterval(id);
+  }, []);
+  const nameW = Math.min(13, groups.reduce((w, g) => Math.max(w, PROVIDERS[g.provider].name.length), 0));
+  const readyCount = groups.filter((g) => g.accounts.every((a) => accountReady(resolveReady(a.id), g.provider))).length;
+  const maxRows = Math.max(1, rows - 7);
+  const visible = groups.slice(0, maxRows);
+  const hidden = groups.length - visible.length;
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs5(Text5, { bold: true, color: theme.accent, children: [
+      glyphs().dotSel,
+      " tokmon"
+    ] }),
+    /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, children: [
+      /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+        "Detecting installed tools",
+        glyphs().ellipsis
       ] }),
-      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-        "   step ",
-        step,
-        " of 4"
+      /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+        "  ",
+        groups.length,
+        " found"
       ] })
     ] }),
-    /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx3(Stepper, { active: form.field, accent }) }),
-    /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", borderStyle: glyphs().border, borderColor: accent, paddingX: 2, paddingY: 1, children: [
-      /* @__PURE__ */ jsx3(ProviderField, { value: form.providerId, focused: form.field === "provider" }),
-      /* @__PURE__ */ jsx3(Box3, { height: 1 }),
-      /* @__PURE__ */ jsx3(
-        FormField,
-        {
-          label: "Name",
-          hint: "display name for this account",
-          value: form.name,
-          focused: form.field === "name",
-          caret: form.caret,
-          accent,
-          placeholder: "e.g. Work, Personal"
-        }
-      ),
-      /* @__PURE__ */ jsx3(Box3, { height: 1 }),
-      /* @__PURE__ */ jsx3(
-        FormField,
-        {
-          label: "Home directory",
-          hint: `path containing the tool's data dir  ${glyphs().middot}  ~ for default`,
-          value: form.homeDir,
-          focused: form.field === "homeDir",
-          caret: form.caret,
-          accent,
-          placeholder: "~/work",
-          mono: true
+    /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, flexDirection: "column", children: [
+      visible.map((g, i) => {
+        const meta = PROVIDERS[g.provider];
+        const items = g.accounts.map((a) => stats.get(a.id));
+        const ready = g.accounts.every((a) => accountReady(resolveReady(a.id), g.provider));
+        const errored = items.some((s) => !!s?.billing?.error);
+        const revealed = frame >= i * STAGGER_FRAMES;
+        const name = truncateName(meta.name, nameW);
+        const namePad = " ".repeat(Math.max(0, nameW - name.length));
+        if (!revealed) {
+          return /* @__PURE__ */ jsxs5(Box5, { children: [
+            /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+              glyphs().dot,
+              " "
+            ] }),
+            /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+              name,
+              namePad
+            ] })
+          ] }, g.provider);
         }
-      ),
-      /* @__PURE__ */ jsx3(Box3, { height: 1 }),
-      /* @__PURE__ */ jsx3(ColorField, { value: form.color, focused: form.field === "color" }),
-      /* @__PURE__ */ jsx3(Box3, { height: 1 }),
-      /* @__PURE__ */ jsxs3(Box3, { children: [
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          "id  ",
-          glyphs().boxMark,
-          " "
-        ] }),
-        /* @__PURE__ */ jsx3(Text3, { bold: true, color: accent, children: previewId || "account" }),
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          " ",
-          glyphs().boxMark,
-          "   auto-generated from name"
-        ] })
+        return /* @__PURE__ */ jsxs5(Box5, { children: [
+          /* @__PURE__ */ jsxs5(Text5, { color: meta.color, children: [
+            glyphs().dot,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx6(Text5, { bold: true, color: meta.color, children: name }),
+          /* @__PURE__ */ jsx6(Text5, { children: namePad }),
+          /* @__PURE__ */ jsx6(Text5, { children: "  " }),
+          errored ? /* @__PURE__ */ jsxs5(Text5, { color: theme.crit, children: [
+            glyphs().warn,
+            " "
+          ] }) : ready ? /* @__PURE__ */ jsxs5(Text5, { color: theme.ok, children: [
+            glyphs().check,
+            " "
+          ] }) : /* @__PURE__ */ jsxs5(Text5, { color: theme.accent, children: [
+            sp[frame % sp.length],
+            " "
+          ] }),
+          errored ? /* @__PURE__ */ jsx6(Text5, { color: theme.crit, children: headlineFor(g, items, privacyMode) }) : ready ? /* @__PURE__ */ jsx6(Text5, { children: headlineFor(g, items, privacyMode) }) : /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+            "loading",
+            glyphs().ellipsis
+          ] })
+        ] }, g.provider);
+      }),
+      hidden > 0 && /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+        "+",
+        hidden,
+        " more"
       ] })
     ] }),
-    form.error && /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsxs3(Text3, { color: "red", children: [
-      glyphs().warn,
-      " ",
-      form.error
-    ] }) }),
-    /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, children: [
-      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-        "tab/",
-        glyphs().arrowU,
-        glyphs().arrowD,
-        " "
-      ] }),
-      /* @__PURE__ */ jsx3(Text3, { children: "switch field" }),
-      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-        "  ",
-        glyphs().middot,
-        "  "
-      ] }),
-      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "enter " }),
-      /* @__PURE__ */ jsx3(Text3, { children: form.field === "color" ? "save" : "next" }),
-      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-        "  ",
-        glyphs().middot,
-        "  "
-      ] }),
-      form.field === "color" || form.field === "provider" ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          glyphs().arrowL,
-          glyphs().arrowR,
-          " "
-        ] }),
-        /* @__PURE__ */ jsx3(Text3, { children: form.field === "provider" ? "pick provider" : "pick color" }),
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          "  ",
-          glyphs().middot,
-          "  "
-        ] })
-      ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          glyphs().arrowL,
-          glyphs().arrowR,
-          " "
-        ] }),
-        /* @__PURE__ */ jsx3(Text3, { children: "move caret" }),
-        /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-          "  ",
-          glyphs().middot,
-          "  "
-        ] })
+    /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, children: [
+      /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+        "loading ",
+        readyCount,
+        " / ",
+        groups.length
       ] }),
-      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "ctrl+s " }),
-      /* @__PURE__ */ jsx3(Text3, { children: "save" }),
-      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
         "  ",
         glyphs().middot,
-        "  "
-      ] }),
-      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "esc " }),
-      /* @__PURE__ */ jsx3(Text3, { children: "cancel" })
+        "  W opens the web dashboard once loaded"
+      ] })
     ] })
   ] });
 }
-function Stepper({ active, accent }) {
-  const steps = [
-    { id: "provider", label: "Provider" },
-    { id: "name", label: "Name" },
-    { id: "homeDir", label: "Home" },
-    { id: "color", label: "Color" }
-  ];
-  const activeIdx = steps.findIndex((s) => s.id === active);
-  return /* @__PURE__ */ jsx3(Box3, { children: steps.map((s, i) => {
-    const done = i < activeIdx;
-    const cur = i === activeIdx;
-    const dot = done ? glyphs().dot : cur ? glyphs().dotSel : glyphs().radioOff;
-    return /* @__PURE__ */ jsxs3(Box3, { children: [
-      /* @__PURE__ */ jsxs3(Text3, { color: cur || done ? accent : void 0, dimColor: !cur && !done, children: [
-        dot,
-        " "
-      ] }),
-      /* @__PURE__ */ jsx3(Text3, { bold: cur, color: cur ? accent : void 0, dimColor: !cur, children: s.label }),
-      i < steps.length - 1 && /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-        "  ",
-        glyphs().rule,
-        "  "
-      ] })
-    ] }, s.id);
-  }) });
-}
-function ProviderField({ value, focused }) {
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsxs3(Text3, { color: focused ? PROVIDERS[value].color : void 0, bold: focused, dimColor: !focused, children: [
-      focused ? glyphs().caretR : " ",
-      " Provider"
-    ] }) }),
-    /* @__PURE__ */ jsxs3(Box3, { children: [
-      /* @__PURE__ */ jsxs3(Text3, { children: [
-        "  ",
-        focused ? glyphs().vbar : " ",
-        " "
-      ] }),
-      PROVIDER_ORDER.map((pid) => {
-        const selected = pid === value;
-        const p = PROVIDERS[pid];
-        return /* @__PURE__ */ jsx3(Box3, { marginRight: 2, children: selected ? /* @__PURE__ */ jsxs3(Text3, { bold: true, color: p.color, children: [
-          "[",
-          p.name,
-          "]"
-        ] }) : /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: p.name }) }, pid);
-      })
-    ] }),
-    /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "      which tool this account tracks" }) })
-  ] });
-}
-function FormField({ label, hint, value, focused, caret, accent, placeholder, mono }) {
-  const isPlaceholder = value === "";
-  const display = isPlaceholder ? placeholder : value;
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsxs3(Text3, { color: focused ? accent : void 0, bold: focused, dimColor: !focused, children: [
-      focused ? glyphs().caretR : " ",
-      " ",
-      label
-    ] }) }),
-    /* @__PURE__ */ jsxs3(Box3, { children: [
-      /* @__PURE__ */ jsxs3(Text3, { color: focused ? accent : void 0, children: [
-        "  ",
-        focused ? glyphs().vbar : " ",
-        " "
-      ] }),
-      focused ? isPlaceholder ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsx3(Text3, { color: accent, children: glyphs().vbar }),
-        /* @__PURE__ */ jsx3(Text3, { dimColor: true, italic: mono, children: placeholder })
-      ] }) : /* @__PURE__ */ jsx3(CaretText, { value, caret: caret ?? value.length, color: accent }) : /* @__PURE__ */ jsx3(Text3, { dimColor: isPlaceholder, italic: mono && isPlaceholder, children: display })
-    ] }),
-    /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-      "      ",
-      hint
-    ] }) })
-  ] });
+
+// src/ui/settings.tsx
+import { Fragment as Fragment4, memo as memo4 } from "react";
+import { Box as Box6, Text as Text6 } from "ink";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var caret = (value) => /* @__PURE__ */ jsxs6(Fragment5, { children: [
+  /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+    glyphs().caretL,
+    " "
+  ] }),
+  value,
+  /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+    " ",
+    glyphs().caretR
+  ] })
+] });
+var toggleText = (on, theme, onLabel, offLabel, offColor) => /* @__PURE__ */ jsx7(Text6, { bold: true, color: on ? theme.ok : offColor ?? theme.crit, children: on ? onLabel : offLabel });
+function cycleNumber(values, current, direction) {
+  const exact = values.indexOf(current);
+  const index = exact >= 0 ? exact : values.reduce((best, value, candidate) => Math.abs(value - current) < Math.abs(values[best] - current) ? candidate : best, 0);
+  return values[(index + direction + values.length) % values.length];
 }
-function ColorField({ value, focused }) {
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsxs3(Text3, { color: focused ? value : void 0, bold: focused, dimColor: !focused, children: [
-      focused ? glyphs().caretR : " ",
-      " Accent color"
-    ] }) }),
-    /* @__PURE__ */ jsxs3(Box3, { children: [
-      /* @__PURE__ */ jsxs3(Text3, { children: [
+var step = (key) => key.leftArrow ? -1 : 1;
+var isToggleKey = (key) => key.leftArrow || key.rightArrow || key.return;
+var isAdjustKey = (input, key) => input === " " || key.leftArrow || key.rightArrow || key.return;
+var GENERAL_SETTINGS = [
+  {
+    key: "refreshInterval",
+    label: "Refresh interval",
+    render: (rc) => caret(/* @__PURE__ */ jsxs6(Text6, { bold: true, color: rc.theme.cost, children: [
+      rc.config.interval,
+      "s"
+    ] })),
+    onAdjust: (_input, key, ctx) => {
+      if (key.leftArrow) ctx.global.updateConfig((c) => ({ ...c, interval: Math.max(1, c.interval - 1) }));
+      if (key.rightArrow) ctx.global.updateConfig((c) => ({ ...c, interval: c.interval + 1 }));
+    }
+  },
+  {
+    key: "billingPoll",
+    label: "Billing poll",
+    render: (rc) => caret(/* @__PURE__ */ jsxs6(Text6, { bold: true, color: rc.theme.cost, children: [
+      rc.config.billingInterval,
+      "m"
+    ] })),
+    onAdjust: (_input, key, ctx) => {
+      if (key.leftArrow) ctx.global.updateConfig((c) => ({ ...c, billingInterval: Math.max(1, c.billingInterval - 1) }));
+      if (key.rightArrow) ctx.global.updateConfig((c) => ({ ...c, billingInterval: c.billingInterval + 1 }));
+    }
+  },
+  {
+    key: "clearScreen",
+    label: "Clear screen",
+    render: (rc) => toggleText(rc.config.clearScreen, rc.theme, "on", "off"),
+    onAdjust: (_input, key, ctx) => {
+      if (isToggleKey(key)) ctx.global.updateConfig((c) => ({ ...c, clearScreen: !c.clearScreen }));
+    }
+  },
+  {
+    key: "privacyMode",
+    label: "Privacy mode",
+    render: (rc) => toggleText(rc.config.privacyMode, rc.theme, "on", "off"),
+    onAdjust: (_input, key, ctx) => {
+      if (isToggleKey(key)) ctx.global.updateConfig((c) => ({ ...c, privacyMode: !c.privacyMode }));
+    }
+  },
+  {
+    key: "privacyKey",
+    label: "Privacy key",
+    render: (rc) => /* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.theme.cost, children: rc.config.privacyToggleKey === " " ? "space" : rc.config.privacyToggleKey }),
+    onAdjust: (input, key, ctx) => {
+      if (ctx.textInput.isPrintable(input, key)) {
+        const clean = sanitizeTyped(input);
+        if (clean.length === 1) ctx.global.updateConfig((c) => ({ ...c, privacyToggleKey: clean }));
+      }
+      if (key.backspace || key.delete) ctx.global.updateConfig((c) => ({ ...c, privacyToggleKey: "p" }));
+    }
+  },
+  {
+    key: "timezone",
+    label: "Timezone",
+    render: (rc) => rc.tzEdit !== null ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "[" }),
+      /* @__PURE__ */ jsx7(CaretText, { value: rc.tzEdit ?? "", caret: rc.tzCaret, color: rc.theme.accent }),
+      /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "]" })
+    ] }) : /* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.theme.cost, children: rc.tzDisplay }),
+    below: (rc, focused) => focused && rc.tzError ? /* @__PURE__ */ jsxs6(Text6, { color: rc.theme.crit, children: [
+      "  ",
+      rc.tzError
+    ] }) : null,
+    onAdjust: (_input, key, ctx) => {
+      if (key.return) {
+        const initial = ctx.global.config.timezone ?? "";
+        ctx.timezoneEditor.setValue(initial);
+        ctx.timezoneEditor.setCaret(initial.length);
+        ctx.timezoneEditor.setError(null);
+      }
+      if (key.leftArrow || key.rightArrow) {
+        ctx.global.updateConfig((c) => ({ ...c, timezone: c.timezone === null ? systemTimezone() : null }));
+      }
+    }
+  },
+  {
+    key: "dashboard",
+    label: "Dashboard",
+    render: (rc) => caret(/* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.theme.cost, children: rc.config.dashboardLayout === "grid" ? "grid (all)" : "single (cycle)" })),
+    onAdjust: (_input, key, ctx) => {
+      if (isToggleKey(key)) ctx.global.updateConfig((c) => ({ ...c, dashboardLayout: c.dashboardLayout === "grid" ? "single" : "grid" }));
+    }
+  },
+  {
+    key: "defaultFocus",
+    label: "Default focus",
+    render: (rc) => caret(/* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.theme.cost, children: rc.config.defaultFocus === "all" ? "All" : "Last account" })),
+    onAdjust: (_input, key, ctx) => {
+      if (isToggleKey(key)) ctx.global.updateConfig((c) => ({ ...c, defaultFocus: c.defaultFocus === "all" ? "last" : "all" }));
+    }
+  },
+  {
+    key: "networkAccess",
+    label: "Network access",
+    render: (rc) => /* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.config.allowNetworkAccess ? rc.theme.crit : rc.theme.ok, children: rc.config.allowNetworkAccess ? "LAN (unsafe)" : "local only" }),
+    onAdjust: (_input, key, ctx) => {
+      if (isToggleKey(key)) ctx.global.updateConfig((c) => ({ ...c, allowNetworkAccess: !c.allowNetworkAccess }));
+    }
+  },
+  {
+    key: "allowedHosts",
+    label: "Allowed hosts",
+    render: (rc) => rc.allowedHostsEdit !== null ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "[" }),
+      /* @__PURE__ */ jsx7(CaretText, { value: rc.allowedHostsEdit ?? "", caret: rc.allowedHostsCaret, color: rc.theme.accent }),
+      /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "]" })
+    ] }) : /* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.theme.cost, children: rc.config.allowedHosts.join(", ") || "none" }),
+    below: (rc, focused) => /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      focused && rc.allowedHostsError ? /* @__PURE__ */ jsxs6(Text6, { color: rc.theme.crit, children: [
         "  ",
-        focused ? glyphs().vbar : " ",
-        " "
-      ] }),
-      COLOR_PALETTE.map((c) => /* @__PURE__ */ jsx3(Box3, { marginRight: 1, children: c === value ? /* @__PURE__ */ jsxs3(Text3, { bold: true, color: c, children: [
-        "[",
-        glyphs().dot,
-        "]"
-      ] }) : /* @__PURE__ */ jsxs3(Text3, { color: c, dimColor: !focused, children: [
-        " ",
-        glyphs().dot
-      ] }) }, c))
+        rc.allowedHostsError
+      ] }) : null,
+      rc.config.allowNetworkAccess ? /* @__PURE__ */ jsx7(Text6, { color: rc.theme.crit, children: "  Warning: dashboard data and settings will be exposed to your local network after daemon restart." }) : null
     ] }),
-    /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "      shows on dashboard, account strip, borders" }) })
-  ] });
-}
-
-// src/ui/table.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var MONTHS = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-var TableProviderBar = memo4(function TableProviderBar2({ providers, active, onSelect }) {
-  return /* @__PURE__ */ jsxs4(Box4, { children: [
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "provider  " }),
-    providers.map((p) => {
-      const meta = PROVIDERS[p];
-      return /* @__PURE__ */ jsx4(ClickableBox, { onClick: () => onSelect(p), marginRight: 1, children: p === active ? /* @__PURE__ */ jsxs4(Text4, { bold: true, color: meta.color, inverse: true, children: [
-        " ",
-        meta.name,
-        " "
-      ] }) : /* @__PURE__ */ jsxs4(Text4, { color: meta.color, dimColor: true, children: [
-        " ",
-        meta.name,
-        " "
-      ] }) }, p);
-    }),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "  p/P switch" })
-  ] });
-});
-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: [
-        "[",
-        v,
-        "]"
-      ] }) : /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: v }) }, v)),
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "  " })
-    ] }),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "sort " }),
-    /* @__PURE__ */ jsx4(Text4, { bold: true, color: "magenta", children: sort }),
-    /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
-      "  o cycle  ",
-      glyphs().middot,
-      "  "
+    onAdjust: (_input, key, ctx) => {
+      if (key.return) {
+        const initial = ctx.global.config.allowedHosts.join(", ");
+        ctx.allowedHostsEditor.setValue(initial);
+        ctx.allowedHostsEditor.setCaret(initial.length);
+        ctx.allowedHostsEditor.setError(null);
+      }
+    }
+  },
+  {
+    key: "resetTimes",
+    label: "Reset times",
+    render: (rc) => caret(/* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.theme.cost, children: rc.config.resetDisplay === "relative" ? "time remaining" : "exact date/time" })),
+    onAdjust: (_input, key, ctx) => {
+      if (isToggleKey(key)) ctx.global.updateConfig((c) => ({ ...c, resetDisplay: c.resetDisplay === "relative" ? "absolute" : "relative" }));
+    }
+  }
+];
+var THEME_SETTINGS = [
+  {
+    key: "preset",
+    label: "Preset",
+    render: (rc) => caret(/* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.theme.accent, children: themePresetLabel(rc.config.appearance.preset) })),
+    onAdjust: (_input, key, ctx) => {
+      if (!isToggleKey(key)) return;
+      const direction = step(key);
+      ctx.global.updateConfig((current) => {
+        const choices = THEME_PRESET_IDS.filter((preset2) => preset2 !== "custom" || current.appearance.custom);
+        const currentIndex = Math.max(0, choices.findIndex((v) => v === current.appearance.preset));
+        const preset = choices[(currentIndex + direction + choices.length) % choices.length];
+        return { ...current, appearance: { ...current.appearance, preset, ...isDarkOnlyThemePreset(preset) ? { mode: "dark" } : {} } };
+      });
+    }
+  },
+  {
+    key: "appAppearance",
+    label: "App appearance",
+    render: (rc) => caret(/* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.theme.cost, children: appearanceModeLabel(rc.config.appearance.mode) })),
+    onAdjust: (_input, key, ctx) => {
+      if (!isToggleKey(key)) return;
+      const direction = step(key);
+      ctx.global.updateConfig((current) => {
+        if (isDarkOnlyThemePreset(current.appearance.preset)) return current;
+        const choices = ["auto", "light", "dark"];
+        const currentIndex = choices.indexOf(current.appearance.mode);
+        return { ...current, appearance: { ...current.appearance, mode: choices[(currentIndex + direction + choices.length) % choices.length] } };
+      });
+    }
+  },
+  {
+    key: "terminalColors",
+    label: "Terminal colors",
+    render: (rc) => caret(/* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.theme.accent, children: terminalModeLabel(rc.config.appearance.terminal) })),
+    onAdjust: (_input, key, ctx) => {
+      if (!isToggleKey(key)) return;
+      const direction = step(key);
+      ctx.global.updateConfig((current) => {
+        const choices = ["ansi", "dark", "light", "off"];
+        const currentIndex = choices.indexOf(current.appearance.terminal);
+        return { ...current, appearance: { ...current.appearance, terminal: choices[(currentIndex + direction + choices.length) % choices.length] } };
+      });
+    }
+  }
+];
+var DESKTOP_FIXED_SETTINGS = [
+  {
+    key: "trayApp",
+    label: "Tray app",
+    render: (rc) => toggleText(rc.config.tray.enabled, rc.theme, "on", "off"),
+    onAdjust: (input, key, ctx) => {
+      if (isAdjustKey(input, key)) ctx.global.updateConfig((c) => ({ ...c, tray: { ...c.tray, enabled: !c.tray.enabled } }));
+    }
+  },
+  {
+    key: "menuBarValues",
+    label: "Menu bar values",
+    render: (rc) => toggleText(rc.config.tray.showMenuBarText, rc.theme, "shown", "icon only", rc.theme.unknown),
+    onAdjust: (input, key, ctx) => {
+      if (isAdjustKey(input, key)) ctx.global.updateConfig((c) => ({ ...c, tray: { ...c.tray, showMenuBarText: !c.tray.showMenuBarText } }));
+    }
+  },
+  {
+    key: "summary",
+    label: "Summary",
+    render: (rc) => caret(/* @__PURE__ */ jsx7(Text6, { bold: true, color: rc.theme.accent, children: rc.config.tray.displayMetric === "smartHeadroom" ? "smart usage" : "tightest quota" })),
+    onAdjust: (input, key, ctx) => {
+      if (isAdjustKey(input, key)) ctx.global.updateConfig((c) => ({ ...c, tray: { ...c.tray, displayMetric: c.tray.displayMetric === "smartHeadroom" ? "tightestRemaining" : "smartHeadroom" } }));
+    }
+  },
+  {
+    key: "trayRefresh",
+    label: "Tray refresh",
+    render: (rc) => caret(/* @__PURE__ */ jsxs6(Text6, { bold: true, color: rc.theme.cost, children: [
+      rc.config.tray.pollIntervalSec,
+      "s"
+    ] })),
+    onAdjust: (input, key, ctx) => {
+      if (isAdjustKey(input, key)) ctx.global.updateConfig((c) => ({ ...c, tray: { ...c.tray, pollIntervalSec: cycleNumber([15, 30, 60, 120], c.tray.pollIntervalSec, step(key)) } }));
+    }
+  },
+  {
+    key: "activeWindow",
+    label: "Active window",
+    render: (rc) => caret(/* @__PURE__ */ jsxs6(Text6, { bold: true, color: rc.theme.cost, children: [
+      rc.config.tray.activeTimeoutMin,
+      "m"
+    ] })),
+    onAdjust: (input, key, ctx) => {
+      if (isAdjustKey(input, key)) ctx.global.updateConfig((c) => ({ ...c, tray: { ...c.tray, activeTimeoutMin: cycleNumber([5, 10, 15, 30], c.tray.activeTimeoutMin, step(key)) } }));
+    }
+  },
+  {
+    key: "graphRange",
+    label: "Graph range",
+    render: (rc) => caret(/* @__PURE__ */ jsxs6(Text6, { bold: true, color: rc.theme.cost, children: [
+      rc.config.desktop.graphRangeDays,
+      " days"
+    ] })),
+    onAdjust: (input, key, ctx) => {
+      if (!isAdjustKey(input, key)) return;
+      ctx.global.updateConfig((c) => ({
+        ...c,
+        desktop: { ...c.desktop, graphRangeDays: cycleNumber(DESKTOP_GRAPH_RANGES, c.desktop.graphRangeDays, step(key)) }
+      }));
+    }
+  },
+  {
+    key: "launchAtLogin",
+    label: "Launch at login",
+    render: (rc) => toggleText(rc.config.tray.launchAtLogin, rc.theme, "on", "off", rc.theme.unknown),
+    onAdjust: (input, key, ctx) => {
+      if (isAdjustKey(input, key)) ctx.global.updateConfig((c) => ({ ...c, tray: { ...c.tray, launchAtLogin: !c.tray.launchAtLogin } }));
+    }
+  }
+];
+var GENERAL_ROWS = GENERAL_SETTINGS.length;
+var THEME_ROWS = THEME_SETTINGS.length;
+var DESKTOP_FIXED_ROWS = DESKTOP_FIXED_SETTINGS.length;
+var SETTINGS_TABS = ["general", "theme", "desktop", "providers", "accounts"];
+var SETTINGS_TAB_LABELS = {
+  general: "General",
+  theme: "Theme",
+  desktop: "Desktop App",
+  providers: "Providers",
+  accounts: "Accounts"
+};
+var FORM_FIELDS = ["provider", "name", "homeDir", "color"];
+var SettingsView = memo4(function SettingsView2({
+  config,
+  cursor,
+  activeTab,
+  tzEdit,
+  tzCaret,
+  tzError,
+  allowedHostsEdit,
+  allowedHostsCaret,
+  allowedHostsError,
+  resolvedTz,
+  accountForm,
+  activeAccountId,
+  trackedAccounts,
+  accountIdentities
+}) {
+  const theme = useTuiTheme();
+  if (accountForm) return /* @__PURE__ */ jsx7(AccountFormView, { form: accountForm, accounts: config.accounts });
+  const editingTz = tzEdit !== null;
+  const editingAllowedHosts = allowedHostsEdit !== null;
+  const tzDisplay = config.timezone === null ? `System (${resolvedTz})` : config.timezone;
+  const tabFocused = cursor < 0;
+  const rc = {
+    config,
+    theme,
+    tzEdit,
+    tzCaret,
+    tzError,
+    tzDisplay,
+    allowedHostsEdit,
+    allowedHostsCaret,
+    allowedHostsError
+  };
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", marginTop: 1, children: [
+    /* @__PURE__ */ jsx7(Text6, { bold: true, children: "Settings" }),
+    /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: configLocation() }),
+    /* @__PURE__ */ jsx7(Box6, { height: 1 }),
+    /* @__PURE__ */ jsx7(SettingsTabBar, { active: activeTab, focused: tabFocused }),
+    /* @__PURE__ */ jsx7(Box6, { height: 1 }),
+    activeTab === "general" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx7(Text6, { bold: true, dimColor: true, children: "General" }),
+      GENERAL_SETTINGS.map((row, i) => /* @__PURE__ */ jsxs6(Fragment4, { children: [
+        /* @__PURE__ */ jsx7(Row, { cursor, idx: i, label: row.label, children: row.render(rc) }),
+        row.below?.(rc, cursor === i)
+      ] }, row.key))
     ] }),
-    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,
-        "  "
+    activeTab === "theme" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx7(Text6, { bold: true, dimColor: true, children: "Theme" }),
+      THEME_SETTINGS.map((row, i) => /* @__PURE__ */ jsxs6(Fragment4, { children: [
+        /* @__PURE__ */ jsx7(Row, { cursor, idx: i, label: row.label, children: row.render(rc) }),
+        row.below?.(rc, cursor === i)
+      ] }, row.key)),
+      /* @__PURE__ */ jsxs6(Box6, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "  Auto follows the operating system in the web and desktop apps." }),
+        /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "  Terminal colors never repaint your terminal background." }),
+        config.appearance.preset === "custom" && /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "  Custom colors are edited in the web dashboard and shared here." })
       ] })
     ] }),
-    searching ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "/" }),
-      /* @__PURE__ */ jsx4(CaretText, { value: search, caret: searchCaret, color: "cyan" })
-    ] }) : search ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "filter " }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "green", children: search }),
-      /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
-        " (/ edit ",
-        glyphs().middot,
-        " esc clear)"
-      ] })
-    ] }) : /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "/ filter" })
-  ] });
-});
-var TokenTable = memo4(function TokenTable2({ rows, cursor, expanded, maxRows, cols, onRowClick }) {
-  if (rows.length === 0) return /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "No usage in this period (or filtered out)." });
-  const wide = cols > 90;
-  const base = wide ? { label: 12, input: 10, output: 10, cc: 14, cr: 12, total: 11, cost: 13 } : { label: 8, input: 7, output: 7, cc: 7, cr: 8, total: 0, cost: 11 };
-  const fixed = base.label + base.input + base.output + base.cc + base.cr + base.total + base.cost;
-  const available = cols - fixed - 6;
-  const W = { ...base, models: Math.max(wide ? 22 : 14, available) };
-  const lineW = W.label + W.models + W.input + W.output + W.cc + W.cr + W.total + W.cost;
-  const totals = { input: 0, output: 0, cacheCreate: 0, cacheRead: 0, cost: 0 };
-  for (const r of rows) {
-    totals.input += r.input;
-    totals.output += r.output;
-    totals.cacheCreate += r.cacheCreate;
-    totals.cacheRead += r.cacheRead;
-    totals.cost += r.cost;
-  }
-  const clampedCursor = Math.min(cursor, rows.length - 1);
-  const scrollStart = Math.max(0, Math.min(clampedCursor - Math.floor(maxRows / 2), rows.length - maxRows));
-  const visible = rows.slice(scrollStart, scrollStart + maxRows);
-  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs4(Text4, { children: [
-      /* @__PURE__ */ jsxs4(Text4, { bold: true, children: [
-        "  ",
-        col("Date", W.label, "left")
+    activeTab === "desktop" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx7(Text6, { bold: true, dimColor: true, children: "Desktop App" }),
+      DESKTOP_FIXED_SETTINGS.map((row, i) => /* @__PURE__ */ jsxs6(Fragment4, { children: [
+        /* @__PURE__ */ jsx7(Row, { cursor, idx: i, label: row.label, children: row.render(rc) }),
+        row.below?.(rc, cursor === i)
+      ] }, row.key)),
+      /* @__PURE__ */ jsxs6(Box6, { marginTop: 1, children: [
+        /* @__PURE__ */ jsx7(Text6, { bold: true, dimColor: true, children: "Menu bar pins" }),
+        /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "  up to 2 providers, in order" })
       ] }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, children: col("Models", W.models, "left") }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, children: col("Input", W.input) }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, children: col("Output", W.output) }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, children: col(wide ? "Cache Create" : "CchCrt", W.cc) }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, children: col(wide ? "Cache Read" : "CchRd", W.cr) }),
-      W.total > 0 && /* @__PURE__ */ jsx4(Text4, { bold: true, children: col("Total", W.total) }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, children: col("Cost", W.cost) })
+      PROVIDER_ORDER.map((pid, i) => {
+        const idx = DESKTOP_FIXED_ROWS + i;
+        const selected = cursor === idx;
+        const pinned = config.tray.pinnedProviders.includes(pid);
+        const position = config.tray.pinnedProviders.indexOf(pid);
+        const meta = PROVIDERS[pid];
+        return /* @__PURE__ */ jsxs6(Box6, { children: [
+          /* @__PURE__ */ jsxs6(Text6, { color: selected ? theme.accent : void 0, children: [
+            selected ? glyphs().caretR : " ",
+            " "
+          ] }),
+          /* @__PURE__ */ jsxs6(Box6, { width: 20, children: [
+            /* @__PURE__ */ jsxs6(Text6, { color: meta.color, children: [
+              glyphs().dot,
+              " "
+            ] }),
+            /* @__PURE__ */ jsx7(Text6, { bold: pinned, children: meta.name })
+          ] }),
+          /* @__PURE__ */ jsx7(Text6, { color: pinned ? theme.ok : void 0, dimColor: !pinned, children: pinned ? `[${position + 1}] pinned` : "[ ] not pinned" })
+        ] }, pid);
+      })
     ] }),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: glyphs().rule.repeat(lineW + 2) }),
-    visible.map((r, vi) => {
-      const idx = scrollStart + vi;
-      const selected = idx === clampedCursor;
-      return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsx4(ClickableBox, { onClick: () => onRowClick(idx), children: /* @__PURE__ */ jsxs4(Text4, { inverse: selected, children: [
-          /* @__PURE__ */ jsxs4(Text4, { color: selected ? void 0 : "cyan", children: [
-            selected ? `${glyphs().caretR} ` : "  ",
-            col(fmtLabel(r.label), W.label, "left")
+    activeTab === "providers" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx7(Text6, { bold: true, dimColor: true, children: "Providers" }),
+      /* @__PURE__ */ jsxs6(Box6, { children: [
+        /* @__PURE__ */ jsxs6(Text6, { color: cursor === 0 ? theme.accent : void 0, children: [
+          cursor === 0 ? glyphs().caretR : " ",
+          " "
+        ] }),
+        /* @__PURE__ */ jsx7(Box6, { width: 20, children: /* @__PURE__ */ jsx7(Text6, { bold: true, children: "Discover accounts" }) }),
+        toggleText(config.accountDetection.enabled, theme, "on", "off")
+      ] }),
+      PROVIDER_ORDER.map((pid, i) => {
+        const selected = cursor === i + 1;
+        const enabled = !config.disabledProviders.includes(pid);
+        const discovery = providerDetectionEnabled(config.accountDetection, pid);
+        const p = PROVIDERS[pid];
+        return /* @__PURE__ */ jsxs6(Box6, { children: [
+          /* @__PURE__ */ jsxs6(Text6, { color: selected ? theme.accent : void 0, children: [
+            selected ? glyphs().caretR : " ",
+            " "
           ] }),
-          /* @__PURE__ */ jsx4(Text4, { dimColor: !selected, children: col(r.models.join(", "), W.models, "left") }),
-          /* @__PURE__ */ jsx4(Text4, { children: col(tokens(r.input), W.input) }),
-          /* @__PURE__ */ jsx4(Text4, { children: col(tokens(r.output), W.output) }),
-          /* @__PURE__ */ jsx4(Text4, { children: col(tokens(r.cacheCreate), W.cc) }),
-          /* @__PURE__ */ jsx4(Text4, { children: col(tokens(r.cacheRead), W.cr) }),
-          W.total > 0 && /* @__PURE__ */ jsx4(Text4, { children: col(tokens(r.total), W.total) }),
-          /* @__PURE__ */ jsx4(Text4, { bold: true, color: selected ? void 0 : "yellow", children: col(currency(r.cost), W.cost) })
-        ] }) }),
-        idx === expanded && /* @__PURE__ */ jsx4(RowDetail, { row: r, indent: W.label + 2 })
-      ] }, r.label);
-    }),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: glyphs().rule.repeat(lineW + 2) }),
-    /* @__PURE__ */ jsxs4(Text4, { children: [
-      /* @__PURE__ */ jsxs4(Text4, { bold: true, color: "greenBright", children: [
-        "  ",
-        col("Total", W.label, "left")
+          /* @__PURE__ */ jsxs6(Text6, { color: p.color, children: [
+            " ",
+            glyphs().dot,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx7(Box6, { width: 16, children: /* @__PURE__ */ jsx7(Text6, { bold: selected, children: p.name }) }),
+          /* @__PURE__ */ jsx7(Box6, { width: 18, children: /* @__PURE__ */ jsx7(Text6, { color: enabled ? theme.ok : void 0, dimColor: !enabled, children: enabled ? `[${glyphs().check}] tracking` : "[ ] tracking" }) }),
+          /* @__PURE__ */ jsx7(Text6, { color: discovery ? theme.ok : void 0, dimColor: !discovery, children: discovery ? `[${glyphs().check}] auto-detect` : "[ ] auto-detect" })
+        ] }, pid);
+      })
+    ] }),
+    activeTab === "accounts" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx7(Text6, { bold: true, dimColor: true, children: "Accounts" }),
+      trackedAccounts.length === 0 && /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+        "  none tracked ",
+        glyphs().emDash,
+        " enable a provider or add an account"
       ] }),
-      /* @__PURE__ */ jsx4(Text4, { children: col("", W.models, "left") }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "yellow", children: col(tokens(totals.input), W.input) }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "yellow", children: col(tokens(totals.output), W.output) }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "yellow", children: col(tokens(totals.cacheCreate), W.cc) }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "yellow", children: col(tokens(totals.cacheRead), W.cr) }),
-      W.total > 0 && /* @__PURE__ */ jsx4(Text4, { bold: true, color: "yellow", children: col(tokens(totals.input + totals.output + totals.cacheCreate + totals.cacheRead), W.total) }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "yellowBright", children: col(currency(totals.cost), W.cost) })
+      trackedAccounts.map((acc, i) => {
+        const selected = cursor === i;
+        const isActive = acc.id === activeAccountId;
+        const provider = PROVIDERS[acc.providerId];
+        const identity = accountIdentities.get(acc.id);
+        const rawIdentityLabel = identity?.email || identity?.displayName || acc.name;
+        const identityLabel = config.privacyMode ? redactEmail(rawIdentityLabel) : rawIdentityLabel;
+        const plan = identity?.plan ?? null;
+        const ignored = acc.source === "ignored";
+        const sourceLabel = acc.source === "auto" ? "auto tracking" : ignored ? "ignored" : "configured";
+        return /* @__PURE__ */ jsxs6(Box6, { children: [
+          /* @__PURE__ */ jsxs6(Text6, { color: selected ? theme.accent : void 0, children: [
+            selected ? glyphs().caretR : " ",
+            " "
+          ] }),
+          /* @__PURE__ */ jsxs6(Text6, { color: ignored ? theme.unknown : acc.color || provider.color, children: [
+            ignored ? glyphs().warn : isActive ? glyphs().dot : glyphs().radioOff,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx7(Box6, { width: 28, children: /* @__PURE__ */ jsx7(Text6, { bold: !ignored, dimColor: ignored, children: truncateName(identityLabel, 27) }) }),
+          /* @__PURE__ */ jsx7(Box6, { width: 9, children: /* @__PURE__ */ jsx7(Text6, { color: provider.color, children: provider.name }) }),
+          /* @__PURE__ */ jsx7(Box6, { width: 18, children: /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: plan ? truncateName(plan, 17) : "" }) }),
+          /* @__PURE__ */ jsx7(Box6, { width: 14, children: /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: sourceLabel }) }),
+          /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: config.privacyMode ? "[path hidden]" : truncateName(acc.homeDir, 24) })
+        ] }, `${acc.source}:${acc.id}`);
+      }),
+      /* @__PURE__ */ jsxs6(Box6, { children: [
+        /* @__PURE__ */ jsxs6(Text6, { color: cursor === trackedAccounts.length ? theme.accent : void 0, children: [
+          cursor === trackedAccounts.length ? glyphs().caretR : " ",
+          " "
+        ] }),
+        /* @__PURE__ */ jsx7(Text6, { color: theme.accent, children: "+ " }),
+        /* @__PURE__ */ jsx7(Text6, { children: "Add account" })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx4(Box4, { height: 1 }),
-    /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+    /* @__PURE__ */ jsx7(Box6, { height: 1 }),
+    tabFocused ? /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      glyphs().arrowL,
+      glyphs().arrowR,
+      "/tab switch section  ",
+      glyphs().middot,
+      "  ",
+      glyphs().arrowD,
+      " rows  ",
+      glyphs().middot,
+      "  s/Esc close"
+    ] }) : editingTz ? /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      "type IANA name (e.g. Europe/London) ",
+      glyphs().middot,
+      " empty = System ",
+      glyphs().middot,
+      " Enter save ",
+      glyphs().middot,
+      " Esc cancel"
+    ] }) : editingAllowedHosts ? /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      "comma-separated exact DNS names ",
+      glyphs().middot,
+      " Enter save ",
+      glyphs().middot,
+      " Esc cancel"
+    ] }) : activeTab === "theme" ? /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
       glyphs().arrowU,
       glyphs().arrowD,
-      " navigate  ",
+      " select  ",
       glyphs().middot,
-      "  Enter detail  ",
+      "  ",
+      glyphs().arrowL,
+      glyphs().arrowR,
+      " adjust  ",
       glyphs().middot,
-      "  o sort  ",
+      "  s/Esc close"
+    ] }) : activeTab === "desktop" ? /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      glyphs().arrowU,
+      glyphs().arrowD,
+      " select  ",
       glyphs().middot,
-      "  g/G top/bottom  ",
+      "  ",
+      glyphs().arrowL,
+      glyphs().arrowR,
+      "/space adjust  ",
+      glyphs().middot,
+      "  pins are capped at 2  ",
+      glyphs().middot,
+      "  s/Esc close"
+    ] }) : activeTab === "providers" ? /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      glyphs().arrowU,
+      glyphs().arrowD,
+      " select  ",
+      glyphs().middot,
+      "  space tracking/global discovery  ",
+      glyphs().middot,
+      "  a per-provider auto-detect  ",
+      glyphs().middot,
+      "  s/Esc close"
+    ] }) : activeTab === "accounts" && cursor >= 0 && cursor < trackedAccounts.length ? trackedAccounts[cursor]?.source === "auto" ? /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      glyphs().arrowU,
+      glyphs().arrowD,
+      " select  ",
+      glyphs().middot,
+      "  Enter configure  ",
+      glyphs().middot,
+      "  space activate  ",
+      glyphs().middot,
+      "  x ignore  ",
+      glyphs().middot,
+      "  s/Esc close"
+    ] }) : trackedAccounts[cursor]?.source === "ignored" ? /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      glyphs().arrowU,
+      glyphs().arrowD,
+      " select  ",
+      glyphs().middot,
+      "  Enter/x turn on  ",
+      glyphs().middot,
+      "  s/Esc close"
+    ] }) : /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      glyphs().arrowU,
+      glyphs().arrowD,
+      " select  ",
       glyphs().middot,
       "  ",
-      clampedCursor + 1,
-      "/",
-      rows.length
-    ] })
-  ] });
-});
-function RowDetail({ row, indent }) {
-  return /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", paddingLeft: indent, children: row.breakdown.map((m, i) => /* @__PURE__ */ jsxs4(Text4, { children: [
-    /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
-      i === row.breakdown.length - 1 ? glyphs().treeEnd : glyphs().treeMid,
-      " "
-    ] }),
-    /* @__PURE__ */ jsx4(Text4, { bold: true, children: col(m.name, 16, "left") }),
-    /* @__PURE__ */ jsxs4(Text4, { children: [
-      col(tokens(m.input), 8),
-      " in  "
-    ] }),
-    /* @__PURE__ */ jsxs4(Text4, { children: [
-      col(tokens(m.output), 8),
-      " out  "
-    ] }),
-    /* @__PURE__ */ jsxs4(Text4, { children: [
-      col(tokens(m.cacheCreate), 8),
-      " cc  "
-    ] }),
-    /* @__PURE__ */ jsxs4(Text4, { children: [
-      col(tokens(m.cacheRead), 9),
-      " cr  "
-    ] }),
-    /* @__PURE__ */ jsx4(Text4, { bold: true, color: "yellow", children: currency(m.cost) })
-  ] }, m.name)) });
-}
-function fmtLabel(label) {
-  if (label.length === 7 && label[4] === "-") {
-    return `${MONTHS[Number(label.slice(5, 7))]} '${label.slice(2, 4)}`;
-  }
-  return shortDate(label);
-}
-
-// src/ui/onboarding.tsx
-import { Box as Box5, Text as Text5 } from "ink";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function Onboarding({ items, cursor, onToggle, onConfirm, heading = "Welcome to tokmon", subheading = "Pick the tools you want to track. You can change this anytime in settings." }) {
-  const anyEnabled = items.some((it) => it.enabled);
-  const startIdx = items.length;
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
-    /* @__PURE__ */ jsx5(Box5, { children: /* @__PURE__ */ jsx5(Text5, { bold: true, color: "greenBright", children: heading }) }),
-    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: subheading }),
-    /* @__PURE__ */ jsx5(Box5, { height: 1 }),
-    items.map((it, i) => {
-      const selected = cursor === i;
-      const box = it.enabled ? `[${glyphs().check}]` : "[ ]";
-      return /* @__PURE__ */ jsxs5(ClickableBox, { onClick: () => onToggle(i), children: [
-        /* @__PURE__ */ jsxs5(Text5, { color: selected ? "green" : void 0, children: [
-          selected ? glyphs().caretR : " ",
-          " "
-        ] }),
-        /* @__PURE__ */ jsx5(Text5, { bold: it.enabled, color: it.enabled ? it.color : void 0, dimColor: !it.enabled, children: box }),
-        /* @__PURE__ */ jsxs5(Text5, { color: it.color, children: [
-          " ",
-          glyphs().dot,
-          " "
-        ] }),
-        /* @__PURE__ */ jsx5(Box5, { width: 13, flexShrink: 0, children: /* @__PURE__ */ jsx5(Text5, { bold: selected, dimColor: !it.detected && !it.enabled, wrap: "truncate", children: it.name }) }),
-        it.detected ? /* @__PURE__ */ jsx5(Text5, { color: "green", dimColor: true, children: "installed" }) : it.enabled ? /* @__PURE__ */ jsx5(Text5, { color: "yellow", dimColor: true, children: "manual" }) : /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "not found" })
-      ] }, it.id);
-    }),
-    /* @__PURE__ */ jsx5(Box5, { height: 1 }),
-    /* @__PURE__ */ jsxs5(ClickableBox, { onClick: onConfirm, children: [
-      /* @__PURE__ */ jsxs5(Text5, { color: cursor === startIdx ? "green" : void 0, children: [
-        cursor === startIdx ? glyphs().caretR : " ",
-        " "
-      ] }),
-      /* @__PURE__ */ jsx5(Text5, { bold: true, color: anyEnabled ? "greenBright" : void 0, dimColor: !anyEnabled, children: anyEnabled ? `${glyphs().play} Start tokmon` : `${glyphs().play} Start (nothing selected)` })
-    ] }),
-    /* @__PURE__ */ jsx5(Box5, { height: 1 }),
-    /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+      glyphs().shift,
       glyphs().arrowU,
       glyphs().arrowD,
-      " move  ",
+      " reorder  ",
       glyphs().middot,
-      "  space toggle  ",
+      "  Enter edit  ",
       glyphs().middot,
-      "  enter start  ",
+      "  space activate  ",
       glyphs().middot,
-      "  q quit"
+      "  d delete  ",
+      glyphs().middot,
+      "  s/Esc close"
+    ] }) : activeTab === "accounts" && cursor === trackedAccounts.length ? /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      glyphs().arrowU,
+      glyphs().arrowD,
+      " select  ",
+      glyphs().middot,
+      "  Enter add account  ",
+      glyphs().middot,
+      "  s/Esc close"
+    ] }) : /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      glyphs().arrowU,
+      glyphs().arrowD,
+      " select  ",
+      glyphs().arrowL,
+      glyphs().arrowR,
+      " adjust  Enter edit  tab switch section  s/Esc close"
     ] })
   ] });
+});
+function themePresetLabel(preset) {
+  return themePresetOption(preset).name;
 }
-
-// src/ui/loading.tsx
-import { useState as useState2, useEffect as useEffect2 } from "react";
-import { Box as Box6, Text as Text6 } from "ink";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function accountReady(s, providerId) {
-  if (!s) return false;
-  const p = PROVIDERS[providerId];
-  if (p.hasBilling && (s.billingState === "error" || s.billing?.error)) return true;
-  if (p.hasUsage && s.summaryState !== "ready" && s.summaryState !== "error") return false;
-  if (p.hasBilling && s.billingState !== "ready" && s.billingState !== "error") return false;
-  return true;
+function appearanceModeLabel(mode) {
+  return mode === "auto" ? "Auto (system)" : mode === "light" ? "Light" : "Dark";
 }
-function statsReadyInput(s) {
-  if (!s) return void 0;
-  return {
-    summaryState: s.dashboard ? "ready" : "pending",
-    billingState: s.billing?.error ? "error" : s.billing ? "ready" : "pending",
-    billing: s.billing
-  };
+function terminalModeLabel(mode) {
+  return mode === "ansi" ? "Terminal managed" : mode === "off" ? "No color" : mode === "light" ? "Light terminal" : "Dark terminal";
 }
-function groupTodayCost(items) {
-  return items.reduce((sum, s) => {
-    const d = s?.dashboard;
-    return sum + (d?.today.cost ?? 0);
-  }, 0);
-}
-function headlineFor(group, items, privacyMode = false) {
-  const meta = PROVIDERS[group.provider];
-  if (meta.hasUsage) return `${currency(groupTodayCost(items))} today`;
-  const billing = items.map((s) => s?.billing).find(Boolean);
-  if (!billing) return "no data";
-  if (billing.error) return privacyMode ? redactEmail(billing.error) : billing.error;
-  const m = billing.metrics[0];
-  if (m) return metricValueText(m);
-  return billing.plan ?? "no data";
+function SettingsTabBar({ active, focused }) {
+  const theme = useTuiTheme();
+  return /* @__PURE__ */ jsxs6(Box6, { children: [
+    /* @__PURE__ */ jsxs6(Text6, { color: focused ? theme.accent : void 0, children: [
+      focused ? glyphs().caretR : " ",
+      " "
+    ] }),
+    SETTINGS_TABS.map((tab, i) => {
+      const selected = tab === active;
+      return /* @__PURE__ */ jsxs6(Box6, { marginRight: 1, children: [
+        selected ? /* @__PURE__ */ jsxs6(Text6, { bold: true, inverse: true, children: [
+          " ",
+          SETTINGS_TAB_LABELS[tab],
+          " "
+        ] }) : /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+          " ",
+          SETTINGS_TAB_LABELS[tab],
+          " "
+        ] }),
+        i < SETTINGS_TABS.length - 1 && /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: " " })
+      ] }, tab);
+    })
+  ] });
 }
-var STAGGER_FRAMES = 2;
-function LoadingView({ groups, stats, cols, rows, readyInput, privacyMode = false }) {
-  const resolveReady = readyInput ?? ((id) => statsReadyInput(stats.get(id)));
-  const sp = glyphs().spinner;
-  const [frame, setFrame] = useState2(0);
-  useEffect2(() => {
-    const id = setInterval(() => setFrame((f) => f + 1), 80);
-    return () => clearInterval(id);
-  }, []);
-  const nameW = Math.min(13, groups.reduce((w, g) => Math.max(w, PROVIDERS[g.provider].name.length), 0));
-  const readyCount = groups.filter((g) => g.accounts.every((a) => accountReady(resolveReady(a.id), g.provider))).length;
-  const maxRows = Math.max(1, rows - 7);
-  const visible = groups.slice(0, maxRows);
-  const hidden = groups.length - visible.length;
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs6(Text6, { bold: true, color: "greenBright", children: [
-      glyphs().dotSel,
-      " tokmon"
+function Row({ cursor, idx, label, children }) {
+  const theme = useTuiTheme();
+  return /* @__PURE__ */ jsxs6(Box6, { children: [
+    /* @__PURE__ */ jsxs6(Text6, { color: cursor === idx ? theme.accent : void 0, children: [
+      cursor === idx ? glyphs().caretR : " ",
+      " "
     ] }),
-    /* @__PURE__ */ jsxs6(Box6, { marginTop: 1, children: [
-      /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-        "Detecting installed tools",
-        glyphs().ellipsis
+    /* @__PURE__ */ jsx7(Box6, { width: 20, children: /* @__PURE__ */ jsx7(Text6, { children: label }) }),
+    children
+  ] });
+}
+function AccountFormView({ form, accounts }) {
+  const theme = useTuiTheme();
+  const previewId = form.mode === "add" ? generateAccountId(form.name || "account", accounts) : form.editingId ?? "";
+  const accent = form.color;
+  const stepIndex = { provider: 1, name: 2, homeDir: 3, color: 4 };
+  const step2 = stepIndex[form.field];
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", marginTop: 1, children: [
+    /* @__PURE__ */ jsxs6(Box6, { children: [
+      /* @__PURE__ */ jsx7(Text6, { color: accent, bold: true, children: glyphs().vbar }),
+      /* @__PURE__ */ jsxs6(Text6, { bold: true, children: [
+        " ",
+        form.mode === "add" ? "NEW ACCOUNT" : "EDIT ACCOUNT"
       ] }),
       /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-        "  ",
-        groups.length,
-        " found"
+        "   step ",
+        step2,
+        " of 4"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs6(Box6, { marginTop: 1, flexDirection: "column", children: [
-      visible.map((g, i) => {
-        const meta = PROVIDERS[g.provider];
-        const items = g.accounts.map((a) => stats.get(a.id));
-        const ready = g.accounts.every((a) => accountReady(resolveReady(a.id), g.provider));
-        const errored = items.some((s) => !!s?.billing?.error);
-        const revealed = frame >= i * STAGGER_FRAMES;
-        const name = truncateName(meta.name, nameW);
-        const namePad = " ".repeat(Math.max(0, nameW - name.length));
-        if (!revealed) {
-          return /* @__PURE__ */ jsxs6(Box6, { children: [
-            /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-              glyphs().dot,
-              " "
-            ] }),
-            /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-              name,
-              namePad
-            ] })
-          ] }, g.provider);
+    /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx7(Stepper, { active: form.field, accent }) }),
+    /* @__PURE__ */ jsxs6(Box6, { marginTop: 1, flexDirection: "column", borderStyle: glyphs().border, borderColor: accent, paddingX: 2, paddingY: 1, children: [
+      /* @__PURE__ */ jsx7(ProviderField, { value: form.providerId, focused: form.field === "provider" }),
+      /* @__PURE__ */ jsx7(Box6, { height: 1 }),
+      /* @__PURE__ */ jsx7(
+        FormField,
+        {
+          label: "Name",
+          hint: "display name for this account",
+          value: form.name,
+          focused: form.field === "name",
+          caret: form.caret,
+          accent,
+          placeholder: "e.g. Work, Personal"
         }
-        return /* @__PURE__ */ jsxs6(Box6, { children: [
-          /* @__PURE__ */ jsxs6(Text6, { color: meta.color, children: [
-            glyphs().dot,
-            " "
-          ] }),
-          /* @__PURE__ */ jsx6(Text6, { bold: true, color: meta.color, children: name }),
-          /* @__PURE__ */ jsx6(Text6, { children: namePad }),
-          /* @__PURE__ */ jsx6(Text6, { children: "  " }),
-          errored ? /* @__PURE__ */ jsxs6(Text6, { color: "red", children: [
-            glyphs().warn,
-            " "
-          ] }) : ready ? /* @__PURE__ */ jsxs6(Text6, { color: "green", children: [
-            glyphs().check,
-            " "
-          ] }) : /* @__PURE__ */ jsxs6(Text6, { color: "green", children: [
-            sp[frame % sp.length],
-            " "
-          ] }),
-          errored ? /* @__PURE__ */ jsx6(Text6, { color: "red", children: headlineFor(g, items, privacyMode) }) : ready ? /* @__PURE__ */ jsx6(Text6, { children: headlineFor(g, items, privacyMode) }) : /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-            "loading",
-            glyphs().ellipsis
-          ] })
-        ] }, g.provider);
-      }),
-      hidden > 0 && /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-        "+",
-        hidden,
-        " more"
+      ),
+      /* @__PURE__ */ jsx7(Box6, { height: 1 }),
+      /* @__PURE__ */ jsx7(
+        FormField,
+        {
+          label: "Home directory",
+          hint: `path containing the tool's data dir  ${glyphs().middot}  ~ for default`,
+          value: form.homeDir,
+          focused: form.field === "homeDir",
+          caret: form.caret,
+          accent,
+          placeholder: "~/work",
+          mono: true
+        }
+      ),
+      /* @__PURE__ */ jsx7(Box6, { height: 1 }),
+      /* @__PURE__ */ jsx7(ColorField, { value: form.color, focused: form.field === "color" }),
+      /* @__PURE__ */ jsx7(Box6, { height: 1 }),
+      /* @__PURE__ */ jsxs6(Box6, { children: [
+        /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+          "id  ",
+          glyphs().boxMark,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx7(Text6, { bold: true, color: accent, children: previewId || "account" }),
+        /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+          " ",
+          glyphs().boxMark,
+          "   auto-generated from name"
+        ] })
       ] })
     ] }),
+    form.error && /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsxs6(Text6, { color: theme.crit, children: [
+      glyphs().warn,
+      " ",
+      form.error
+    ] }) }),
     /* @__PURE__ */ jsxs6(Box6, { marginTop: 1, children: [
       /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-        "loading ",
-        readyCount,
-        " / ",
-        groups.length
+        "tab/",
+        glyphs().arrowU,
+        glyphs().arrowD,
+        " "
       ] }),
+      /* @__PURE__ */ jsx7(Text6, { children: "switch field" }),
       /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
         "  ",
         glyphs().middot,
-        "  W opens the web dashboard once loaded"
-      ] })
+        "  "
+      ] }),
+      /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "enter " }),
+      /* @__PURE__ */ jsx7(Text6, { children: form.field === "color" ? "save" : "next" }),
+      /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+        "  ",
+        glyphs().middot,
+        "  "
+      ] }),
+      form.field === "color" || form.field === "provider" ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
+        /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+          glyphs().arrowL,
+          glyphs().arrowR,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx7(Text6, { children: form.field === "provider" ? "pick provider" : "pick color" }),
+        /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+          "  ",
+          glyphs().middot,
+          "  "
+        ] })
+      ] }) : /* @__PURE__ */ jsxs6(Fragment5, { children: [
+        /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+          glyphs().arrowL,
+          glyphs().arrowR,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx7(Text6, { children: "move caret" }),
+        /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+          "  ",
+          glyphs().middot,
+          "  "
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "ctrl+s " }),
+      /* @__PURE__ */ jsx7(Text6, { children: "save" }),
+      /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+        "  ",
+        glyphs().middot,
+        "  "
+      ] }),
+      /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "esc " }),
+      /* @__PURE__ */ jsx7(Text6, { children: "cancel" })
     ] })
   ] });
 }
+function Stepper({ active, accent }) {
+  const steps = [
+    { id: "provider", label: "Provider" },
+    { id: "name", label: "Name" },
+    { id: "homeDir", label: "Home" },
+    { id: "color", label: "Color" }
+  ];
+  const activeIdx = steps.findIndex((s) => s.id === active);
+  return /* @__PURE__ */ jsx7(Box6, { children: steps.map((s, i) => {
+    const done = i < activeIdx;
+    const cur = i === activeIdx;
+    const dot = done ? glyphs().dot : cur ? glyphs().dotSel : glyphs().radioOff;
+    return /* @__PURE__ */ jsxs6(Box6, { children: [
+      /* @__PURE__ */ jsxs6(Text6, { color: cur || done ? accent : void 0, dimColor: !cur && !done, children: [
+        dot,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx7(Text6, { bold: cur, color: cur ? accent : void 0, dimColor: !cur, children: s.label }),
+      i < steps.length - 1 && /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+        "  ",
+        glyphs().rule,
+        "  "
+      ] })
+    ] }, s.id);
+  }) });
+}
+function ProviderField({ value, focused }) {
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsxs6(Text6, { color: focused ? PROVIDERS[value].color : void 0, bold: focused, dimColor: !focused, children: [
+      focused ? glyphs().caretR : " ",
+      " Provider"
+    ] }) }),
+    /* @__PURE__ */ jsxs6(Box6, { children: [
+      /* @__PURE__ */ jsxs6(Text6, { children: [
+        "  ",
+        focused ? glyphs().vbar : " ",
+        " "
+      ] }),
+      PROVIDER_ORDER.map((pid) => {
+        const selected = pid === value;
+        const p = PROVIDERS[pid];
+        return /* @__PURE__ */ jsx7(Box6, { marginRight: 2, children: selected ? /* @__PURE__ */ jsxs6(Text6, { bold: true, color: p.color, children: [
+          "[",
+          p.name,
+          "]"
+        ] }) : /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: p.name }) }, pid);
+      })
+    ] }),
+    /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "      which tool this account tracks" }) })
+  ] });
+}
+function FormField({ label, hint, value, focused, caret: caret2, accent, placeholder, mono }) {
+  const isPlaceholder = value === "";
+  const display = isPlaceholder ? placeholder : value;
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsxs6(Text6, { color: focused ? accent : void 0, bold: focused, dimColor: !focused, children: [
+      focused ? glyphs().caretR : " ",
+      " ",
+      label
+    ] }) }),
+    /* @__PURE__ */ jsxs6(Box6, { children: [
+      /* @__PURE__ */ jsxs6(Text6, { color: focused ? accent : void 0, children: [
+        "  ",
+        focused ? glyphs().vbar : " ",
+        " "
+      ] }),
+      focused ? isPlaceholder ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
+        /* @__PURE__ */ jsx7(Text6, { color: accent, children: glyphs().vbar }),
+        /* @__PURE__ */ jsx7(Text6, { dimColor: true, italic: mono, children: placeholder })
+      ] }) : /* @__PURE__ */ jsx7(CaretText, { value, caret: caret2 ?? value.length, color: accent }) : /* @__PURE__ */ jsx7(Text6, { dimColor: isPlaceholder, italic: mono && isPlaceholder, children: display })
+    ] }),
+    /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      "      ",
+      hint
+    ] }) })
+  ] });
+}
+function ColorField({ value, focused }) {
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsxs6(Text6, { color: focused ? value : void 0, bold: focused, dimColor: !focused, children: [
+      focused ? glyphs().caretR : " ",
+      " Accent color"
+    ] }) }),
+    /* @__PURE__ */ jsxs6(Box6, { children: [
+      /* @__PURE__ */ jsxs6(Text6, { children: [
+        "  ",
+        focused ? glyphs().vbar : " ",
+        " "
+      ] }),
+      COLOR_PALETTE.map((c) => /* @__PURE__ */ jsx7(Box6, { marginRight: 1, children: c === value ? /* @__PURE__ */ jsxs6(Text6, { bold: true, color: c, children: [
+        "[",
+        glyphs().dot,
+        "]"
+      ] }) : /* @__PURE__ */ jsxs6(Text6, { color: c, dimColor: !focused, children: [
+        " ",
+        glyphs().dot
+      ] }) }, c))
+    ] }),
+    /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "      shows on dashboard, account strip, borders" }) })
+  ] });
+}
 
 // src/ui/app-layout.logic.ts
 function deriveSlots(accounts, privacyMode = false) {
@@ -1518,32 +1935,33 @@ function computeChrome(slots, cols, rows) {
 
 // src/ui/resizing.tsx
 import { Box as Box7, Text as Text7 } from "ink";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function ResizingView({ cols, rows }) {
-  return /* @__PURE__ */ jsx7(Box7, { width: cols, height: rows, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
+  const theme = useTuiTheme();
+  return /* @__PURE__ */ jsx8(Box7, { width: cols, height: rows, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
     glyphs().dotSel,
     " resizing\u2026 ",
-    /* @__PURE__ */ jsx7(Text7, { color: "greenBright", children: cols }),
+    /* @__PURE__ */ jsx8(Text7, { color: theme.accent, children: cols }),
     "\xD7",
-    /* @__PURE__ */ jsx7(Text7, { color: "greenBright", children: rows })
+    /* @__PURE__ */ jsx8(Text7, { color: theme.accent, children: rows })
   ] }) });
 }
 
 // src/ui/account-strip.tsx
 import { memo as memo5 } from "react";
 import { Box as Box8, Text as Text8 } from "ink";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var AccountStrip = memo5(function AccountStrip2({ slots, activeIdx, onSelect }) {
-  return /* @__PURE__ */ jsx8(Box8, { flexWrap: "wrap", children: slots.map((s, i) => {
+  return /* @__PURE__ */ jsx9(Box8, { flexWrap: "wrap", children: slots.map((s, i) => {
     const active = i === activeIdx;
     const dot = s.id === null ? glyphs().dotAll : glyphs().dot;
     const label = truncateName(s.name, 16);
     return /* @__PURE__ */ jsxs8(ClickableBox, { onClick: () => onSelect(i), marginRight: 2, children: [
-      /* @__PURE__ */ jsx8(Text8, { dimColor: !active, children: i }),
-      /* @__PURE__ */ jsx8(Text8, { children: " " }),
-      /* @__PURE__ */ jsx8(Text8, { color: s.color, bold: active, dimColor: !active, children: dot }),
-      /* @__PURE__ */ jsx8(Text8, { children: " " }),
-      active ? /* @__PURE__ */ jsx8(Text8, { bold: true, color: s.color, children: label }) : /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: label })
+      /* @__PURE__ */ jsx9(Text8, { dimColor: !active, children: i }),
+      /* @__PURE__ */ jsx9(Text8, { children: " " }),
+      /* @__PURE__ */ jsx9(Text8, { color: s.color, bold: active, dimColor: !active, children: dot }),
+      /* @__PURE__ */ jsx9(Text8, { children: " " }),
+      active ? /* @__PURE__ */ jsx9(Text8, { bold: true, color: s.color, children: label }) : /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: label })
     ] }, s.id ?? "__all__");
   }) });
 });
@@ -1596,7 +2014,7 @@ function osc8(text, url) {
 }
 
 // src/ui/footer.tsx
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var Footer = memo6(function Footer2({ hasAccounts, paginated, cols }) {
   const inner = cols - 4;
   const BASE = "by David Ilie (davidilie.com)  \xB7  r/R=refresh  O=repo  W=web  s=settings  q=quit".length;
@@ -1608,22 +2026,22 @@ var Footer = memo6(function Footer2({ hasAccounts, paginated, cols }) {
   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: "r/R=refresh  O=repo  W=web  s=settings  q=quit" }) });
+    return /* @__PURE__ */ jsx10(Box9, { marginTop: 1, flexWrap: "nowrap", children: /* @__PURE__ */ jsx10(Text9, { dimColor: true, wrap: "truncate-end", children: "r/R=refresh  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" }) }) }),
-    /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: " (" }),
-    /* @__PURE__ */ jsx9(LinkBox, { onClick: () => openUrl(SITE_URL), children: /* @__PURE__ */ jsx9(Transform, { transform: (s) => osc8(s, SITE_URL), children: /* @__PURE__ */ jsx9(Text9, { color: "cyan", underline: true, children: "davidilie.com" }) }) }),
+    /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: "by " }),
+    /* @__PURE__ */ jsx10(LinkBox, { onClick: () => openUrl(REPO_URL), children: /* @__PURE__ */ jsx10(Transform, { transform: (s) => osc8(s, REPO_URL), children: /* @__PURE__ */ jsx10(Text9, { underline: true, children: "David Ilie" }) }) }),
+    /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: " (" }),
+    /* @__PURE__ */ jsx10(LinkBox, { onClick: () => openUrl(SITE_URL), children: /* @__PURE__ */ jsx10(Transform, { transform: (s) => osc8(s, SITE_URL), children: /* @__PURE__ */ jsx10(Text9, { color: "cyan", underline: true, children: "davidilie.com" }) }) }),
     /* @__PURE__ */ jsxs9(Text9, { dimColor: true, children: [
       ")  ",
       glyphs().middot,
       "  r/R=refresh  O=repo  W=web  s=settings  "
     ] }),
-    showOpt && /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: optHint }),
-    showJump && /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "0-9=jump  a/A=cycle  " }),
-    showPage && /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "scroll=page  " }),
-    /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "q=quit" })
+    showOpt && /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: optHint }),
+    showJump && /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: "0-9=jump  a/A=cycle  " }),
+    showPage && /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: "scroll=page  " }),
+    /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: "q=quit" })
   ] });
 });
 
@@ -1633,16 +2051,17 @@ import { Box as Box10, Text as Text11 } from "ink";
 // src/ui/refresh-status.tsx
 import { memo as memo7 } from "react";
 import { Text as Text10 } from "ink";
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var RefreshStatusLine = memo7(function RefreshStatusLine2({ status }) {
+  const theme = useTuiTheme();
   if (status.phase === "idle") return null;
-  if (status.phase === "refreshing") return /* @__PURE__ */ jsx10(Spinner, { label: `${status.message}${glyphs().ellipsis}` });
-  if (status.phase === "success") return /* @__PURE__ */ jsxs10(Text10, { color: "green", children: [
+  if (status.phase === "refreshing") return /* @__PURE__ */ jsx11(Spinner, { label: `${status.message}${glyphs().ellipsis}` });
+  if (status.phase === "success") return /* @__PURE__ */ jsxs10(Text10, { color: theme.ok, children: [
     glyphs().check,
     " ",
     status.message
   ] });
-  return /* @__PURE__ */ jsxs10(Text10, { color: "red", children: [
+  return /* @__PURE__ */ jsxs10(Text10, { color: theme.crit, children: [
     glyphs().warn,
     " ",
     status.message
@@ -1650,14 +2069,15 @@ var RefreshStatusLine = memo7(function RefreshStatusLine2({ status }) {
 });
 
 // src/ui/tiny-fallback.tsx
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function TinyFallback({ groups, stats, rows, cols, refreshStatus }) {
+  const theme = useTuiTheme();
   const maxLines = Math.max(1, rows - 4);
   const visible = groups.slice(0, maxLines);
   const hidden = groups.length - visible.length;
   const w = Math.max(8, cols - 2);
   return /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", paddingX: 1, height: rows, overflow: "hidden", children: [
-    /* @__PURE__ */ jsxs11(Text11, { bold: true, color: "greenBright", children: [
+    /* @__PURE__ */ jsxs11(Text11, { bold: true, color: theme.accent, children: [
       glyphs().dotSel,
       " tokmon"
     ] }),
@@ -1665,15 +2085,15 @@ function TinyFallback({ groups, stats, rows, cols, refreshStatus }) {
       "No providers ",
       glyphs().emDash,
       " s=settings"
-    ] }) : visible.map((g) => /* @__PURE__ */ jsx11(TinyRow, { provider: g.provider, accounts: g.accounts, stats, width: w }, g.provider)),
+    ] }) : visible.map((g) => /* @__PURE__ */ jsx12(TinyRow, { provider: g.provider, accounts: g.accounts, stats, width: w }, g.provider)),
     hidden > 0 && /* @__PURE__ */ jsxs11(Text11, { dimColor: true, children: [
       "+",
       hidden,
       " more (enlarge terminal)"
     ] }),
-    /* @__PURE__ */ jsx11(RefreshStatusLine, { status: refreshStatus }),
-    /* @__PURE__ */ jsx11(Box10, { flexGrow: 1 }),
-    /* @__PURE__ */ jsx11(Text11, { dimColor: true, children: "R=refresh  s=settings  q=quit" })
+    /* @__PURE__ */ jsx12(RefreshStatusLine, { status: refreshStatus }),
+    /* @__PURE__ */ jsx12(Box10, { flexGrow: 1 }),
+    /* @__PURE__ */ jsx12(Text11, { dimColor: true, children: "R=refresh  s=settings  q=quit" })
   ] });
 }
 function TinyRow({ provider, accounts, stats, width }) {
@@ -1689,19 +2109,19 @@ function TinyRow({ provider, accounts, stats, width }) {
       glyphs().dot,
       " "
     ] }),
-    /* @__PURE__ */ jsx11(Text11, { bold: true, color: meta.color, children: name }),
-    /* @__PURE__ */ jsx11(Box10, { flexGrow: 1 }),
-    /* @__PURE__ */ jsx11(Text11, { dimColor: true, children: detail })
+    /* @__PURE__ */ jsx12(Text11, { bold: true, color: meta.color, children: name }),
+    /* @__PURE__ */ jsx12(Box10, { flexGrow: 1 }),
+    /* @__PURE__ */ jsx12(Text11, { dimColor: true, children: detail })
   ] });
 }
 
 // src/client/use-daemon.ts
-import { useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 function useDaemon(baseUrl) {
   const [snapshot, setSnapshot] = useState3(null);
   const [conn, setConn] = useState3("connecting");
   const [config, setConfigState] = useState3(null);
-  const client = useMemo(() => {
+  const client = useMemo2(() => {
     if (!baseUrl) return null;
     return createDaemonRpcClient(baseUrl, {
       transport: "node",
@@ -1744,6 +2164,7 @@ function indexById(snapshot) {
 }
 function toStatsMap(snapshot, accounts) {
   const byId = indexById(snapshot);
+  const providerHeadroom = new Map(snapshot?.providers.map((provider) => [provider.id, provider.headroom]) ?? []);
   const out = /* @__PURE__ */ new Map();
   for (const account of accounts) {
     const wa = byId.get(account.id);
@@ -1751,7 +2172,11 @@ function toStatsMap(snapshot, accounts) {
       account,
       dashboard: wa?.dashboard ?? null,
       billing: wa?.billing ?? null,
-      billingUpdatedAt: wa?.billingUpdatedAt ?? null
+      billingUpdatedAt: wa?.billingUpdatedAt ?? null,
+      identity: wa?.identity,
+      quotas: wa?.quotas,
+      headroom: wa?.headroom,
+      providerHeadroom: providerHeadroom.get(account.providerId)
     });
   }
   return out;
@@ -1777,13 +2202,13 @@ var SORTS = [
   { label: "cost", dir: "down" }
 ];
 var acctKey = (a) => `${a.id}:${a.homeDir ?? ""}`;
-var clampCaret = (caret, len) => Math.max(0, Math.min(caret, len));
-function spliceInsert(value, caret, text) {
-  const c = clampCaret(caret, value.length);
+var clampCaret = (caret2, len) => Math.max(0, Math.min(caret2, len));
+function spliceInsert(value, caret2, text) {
+  const c = clampCaret(caret2, value.length);
   return { value: value.slice(0, c) + text + value.slice(c), caret: c + text.length };
 }
-function spliceBackspace(value, caret) {
-  const c = clampCaret(caret, value.length);
+function spliceBackspace(value, caret2) {
+  const c = clampCaret(caret2, value.length);
   if (c === 0) return { value, caret: 0 };
   return { value: value.slice(0, c - 1) + value.slice(c), caret: c - 1 };
 }
@@ -1983,11 +2408,11 @@ function handleTimezoneEditor(input, key, editor, text, updateConfig) {
     return;
   }
   if (key.leftArrow) {
-    setCaret((caret) => clampCaret(caret - 1, value.length));
+    setCaret((caret2) => clampCaret(caret2 - 1, value.length));
     return;
   }
   if (key.rightArrow) {
-    setCaret((caret) => clampCaret(caret + 1, value.length));
+    setCaret((caret2) => clampCaret(caret2 + 1, value.length));
     return;
   }
   if (key.ctrl && input === "a") {
@@ -2033,11 +2458,11 @@ function handleAllowedHostsEditor(input, key, editor, text, updateConfig) {
     return;
   }
   if (key.leftArrow) {
-    setCaret((caret) => clampCaret(caret - 1, value.length));
+    setCaret((caret2) => clampCaret(caret2 - 1, value.length));
     return;
   }
   if (key.rightArrow) {
-    setCaret((caret) => clampCaret(caret + 1, value.length));
+    setCaret((caret2) => clampCaret(caret2 + 1, value.length));
     return;
   }
   if (key.ctrl && input === "a") {
@@ -2073,11 +2498,11 @@ function handleSearchEditor(input, key, table, text) {
     return;
   }
   if (key.leftArrow) {
-    setSearchCaret((caret) => clampCaret(caret - 1, search.length));
+    setSearchCaret((caret2) => clampCaret(caret2 - 1, search.length));
     return;
   }
   if (key.rightArrow) {
-    setSearchCaret((caret) => clampCaret(caret + 1, search.length));
+    setSearchCaret((caret2) => clampCaret(caret2 + 1, search.length));
     return;
   }
   if (key.ctrl && input === "a") {
@@ -2137,7 +2562,7 @@ function handleSettings(input, key, ctx) {
     ctx.allowedHostsEditor.setValue(null);
     ctx.allowedHostsEditor.setError(null);
   };
-  const rowCount = tab === "general" ? GENERAL_ROWS : tab === "providers" ? PROVIDER_ORDER.length : trackedAccounts.length + 1;
+  const rowCount = tab === "general" ? GENERAL_ROWS : tab === "theme" ? THEME_ROWS : tab === "desktop" ? DESKTOP_FIXED_ROWS + PROVIDER_ORDER.length : tab === "providers" ? PROVIDER_ORDER.length + 1 : trackedAccounts.length + 1;
   if (key.tab) {
     switchTab(key.shift ? -1 : 1);
     return;
@@ -2183,17 +2608,64 @@ function handleSettings(input, key, ctx) {
     return;
   }
   if (tab === "general") {
-    handleGeneralSetting(input, key, ctx);
+    GENERAL_SETTINGS[cursor]?.onAdjust(input, key, ctx);
+    return;
+  }
+  if (tab === "theme") {
+    THEME_SETTINGS[cursor]?.onAdjust(input, key, ctx);
+    return;
+  }
+  if (tab === "desktop") {
+    if (cursor < DESKTOP_FIXED_ROWS) {
+      DESKTOP_FIXED_SETTINGS[cursor]?.onAdjust(input, key, ctx);
+      return;
+    }
+    const provider = PROVIDER_ORDER[cursor - DESKTOP_FIXED_ROWS];
+    if (provider && (input === " " || key.leftArrow || key.rightArrow || key.return)) {
+      updateConfig((current) => ({
+        ...current,
+        tray: {
+          ...current.tray,
+          pinnedProviders: toggleProviderSelection(current.tray.pinnedProviders, provider, new Set(PROVIDER_ORDER), 2)
+        }
+      }));
+    }
     return;
   }
   if (tab === "providers") {
-    if (cursor < PROVIDER_ORDER.length && (input === " " || key.return || key.leftArrow || key.rightArrow)) {
-      toggleProvider(PROVIDER_ORDER[cursor]);
+    if (cursor === 0 && (input === " " || key.return || key.leftArrow || key.rightArrow)) {
+      updateConfig((current) => ({
+        ...current,
+        accountDetection: { ...current.accountDetection, enabled: !current.accountDetection.enabled }
+      }));
+      return;
+    }
+    const provider = PROVIDER_ORDER[cursor - 1];
+    if (provider && input === "a") {
+      updateConfig((current) => ({
+        ...current,
+        accountDetection: setProviderDetectionEnabled(
+          current.accountDetection,
+          provider,
+          !providerDetectionEnabled(current.accountDetection, provider)
+        )
+      }));
+      return;
+    }
+    if (provider && (input === " " || key.return || key.leftArrow || key.rightArrow)) {
+      toggleProvider(provider);
     }
     return;
   }
   if (cursor < trackedAccounts.length) {
     const row = trackedAccounts[cursor];
+    if (row.source === "ignored" && (key.return || input === "x")) {
+      if (row.excludedRef) updateConfig((current) => ({
+        ...current,
+        accountDetection: setDetectedAccountExcluded(current.accountDetection, row.excludedRef, false)
+      }));
+      return;
+    }
     if (key.return) {
       if (row.source === "configured") {
         const account = config.accounts.find((candidate) => candidate.id === row.explicitId);
@@ -2207,6 +2679,17 @@ function handleSettings(input, key, ctx) {
       deleteAccount(row.explicitId);
       return;
     }
+    if (row.source === "auto" && input === "x") {
+      updateConfig((current) => ({
+        ...current,
+        activeAccountId: current.activeAccountId === row.id ? null : current.activeAccountId,
+        accountDetection: setDetectedAccountExcluded(current.accountDetection, {
+          providerId: row.providerId,
+          homeDir: row.homeDir
+        }, true)
+      }));
+      return;
+    }
     if (input === " ") {
       updateConfig((current) => ({ ...current, activeAccountId: row.id }));
       return;
@@ -2214,69 +2697,6 @@ function handleSettings(input, key, ctx) {
     return;
   }
   if (cursor === trackedAccounts.length && key.return) openAddAccount();
-  function handleGeneralSetting(value, inputKey, context) {
-    const index = context.settings.cursor;
-    if (index === 0) {
-      if (inputKey.leftArrow) updateConfig((current) => ({ ...current, interval: Math.max(1, current.interval - 1) }));
-      if (inputKey.rightArrow) updateConfig((current) => ({ ...current, interval: current.interval + 1 }));
-      return;
-    }
-    if (index === 1) {
-      if (inputKey.leftArrow) updateConfig((current) => ({ ...current, billingInterval: Math.max(1, current.billingInterval - 1) }));
-      if (inputKey.rightArrow) updateConfig((current) => ({ ...current, billingInterval: current.billingInterval + 1 }));
-      return;
-    }
-    if (index === 2 && (inputKey.leftArrow || inputKey.rightArrow || inputKey.return)) {
-      updateConfig((current) => ({ ...current, clearScreen: !current.clearScreen }));
-      return;
-    }
-    if (index === 3 && (inputKey.leftArrow || inputKey.rightArrow || inputKey.return)) {
-      updateConfig((current) => ({ ...current, privacyMode: !current.privacyMode }));
-      return;
-    }
-    if (index === 4) {
-      if (textInput.isPrintable(value, inputKey)) {
-        const clean = sanitizeTyped(value);
-        if (clean.length === 1) updateConfig((current) => ({ ...current, privacyToggleKey: clean }));
-      }
-      if (inputKey.backspace || inputKey.delete) updateConfig((current) => ({ ...current, privacyToggleKey: "p" }));
-      return;
-    }
-    if (index === 5) {
-      if (inputKey.return) {
-        const initial = config.timezone ?? "";
-        timezoneEditor.setValue(initial);
-        timezoneEditor.setCaret(initial.length);
-        timezoneEditor.setError(null);
-      }
-      if (inputKey.leftArrow || inputKey.rightArrow) {
-        updateConfig((current) => ({ ...current, timezone: current.timezone === null ? systemTimezone() : null }));
-      }
-      return;
-    }
-    if (index === 6 && (inputKey.leftArrow || inputKey.rightArrow || inputKey.return)) {
-      updateConfig((current) => ({ ...current, dashboardLayout: current.dashboardLayout === "grid" ? "single" : "grid" }));
-      return;
-    }
-    if (index === 7 && (inputKey.leftArrow || inputKey.rightArrow || inputKey.return)) {
-      updateConfig((current) => ({ ...current, defaultFocus: current.defaultFocus === "all" ? "last" : "all" }));
-      return;
-    }
-    if (index === 8 && (inputKey.leftArrow || inputKey.rightArrow || inputKey.return)) {
-      updateConfig((current) => ({ ...current, allowNetworkAccess: !current.allowNetworkAccess }));
-      return;
-    }
-    if (index === 9 && inputKey.return) {
-      const initial = config.allowedHosts.join(", ");
-      context.allowedHostsEditor.setValue(initial);
-      context.allowedHostsEditor.setCaret(initial.length);
-      context.allowedHostsEditor.setError(null);
-      return;
-    }
-    if (index === 10 && (inputKey.leftArrow || inputKey.rightArrow || inputKey.return)) {
-      updateConfig((current) => ({ ...current, resetDisplay: current.resetDisplay === "relative" ? "absolute" : "relative" }));
-    }
-  }
 }
 
 // src/ui/keybindings-navigation.ts
@@ -2345,7 +2765,8 @@ function handleNavigation(input, key, ctx) {
   }
   if (table.tab !== 1) {
     if (key.leftArrow || key.rightArrow) {
-      global.setTab((current) => (current + 1) % TABS.length);
+      const step2 = key.leftArrow ? -1 : 1;
+      global.setTab((current) => (current + step2 + TABS.length) % TABS.length);
       resetView();
     }
     return;
@@ -3148,8 +3569,8 @@ function useAccountForm({ cfg, detected, updateConfig, trackedAccountRows, setSe
       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 caret2 = next === "name" ? f.name.length : next === "homeDir" ? f.homeDir.length : f.caret;
+      return { ...f, field: next, caret: caret2 };
     });
   }, []);
   const cycleProvider = useCallback6((dir) => {
@@ -3200,7 +3621,7 @@ function useAccountForm({ cfg, detected, updateConfig, trackedAccountRows, setSe
 }
 
 // src/app.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "degraded" }) {
   const connected = mode === "connected" && baseUrl !== null;
   const degraded = !connected;
@@ -3246,9 +3667,24 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
   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 snapshot = daemon.snapshot;
+  const daemonDetected = useMemo3(
+    () => [...new Set((snapshot?.accounts ?? []).map((account) => account.providerId))],
+    [snapshot]
+  );
+  const detectedProviders = connected ? daemonDetected : detected;
+  const accounts = useMemo3(() => connected ? (snapshot?.accounts ?? []).map((account) => ({
+    id: account.id,
+    providerId: account.providerId,
+    name: account.name,
+    color: account.color,
+    homeDir: account.homeDir ?? void 0
+  })) : buildAccounts(cfg, detectedProviders), [cfg, connected, detectedProviders, snapshot]);
+  const trackedAccountRows = useMemo3(
+    () => getTrackedAccountRows(cfg, detectedProviders, accounts),
+    [cfg, detectedProviders, accounts]
+  );
+  const settingsRowCount = settingsTab === "general" ? GENERAL_ROWS : settingsTab === "theme" ? THEME_ROWS : settingsTab === "desktop" ? DESKTOP_FIXED_ROWS + PROVIDER_ORDER.length : settingsTab === "providers" ? PROVIDER_ORDER.length + 1 : trackedAccountRows.length + 1;
   const accountsRef = useRef8([]);
   accountsRef.current = accounts;
   const rowCountRef = useRef8(0);
@@ -3261,19 +3697,19 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
   const allowedHostsCaretRef = useRef8(0);
   const searchValueRef = useRef8("");
   const searchCaretRef = useRef8(0);
-  const accountsKey = useMemo2(() => accounts.map(acctKey).join("|"), [accounts]);
-  const allGroups = useMemo2(() => accountsByProvider(accounts), [accounts]);
-  const tableProvs = useMemo2(
+  const accountsKey = useMemo3(() => accounts.map(acctKey).join("|"), [accounts]);
+  const allGroups = useMemo3(() => accountsByProvider(accounts), [accounts]);
+  const tableProvs = useMemo3(
     () => allGroups.map((g) => g.provider).filter((pid) => PROVIDERS[pid].hasUsage),
     [allGroups]
   );
   const effTableProvider = tableProvider && tableProvs.includes(tableProvider) ? tableProvider : tableProvs[0] ?? null;
-  const tableAccounts = useMemo2(
+  const tableAccounts = useMemo3(
     () => effTableProvider ? accounts.filter((a) => a.providerId === effTableProvider) : [],
     [accounts, effTableProvider]
   );
   const needsOnboarding = configReady && !cfg.onboarded;
-  const newProviders = configReady && cfg.onboarded ? PROVIDER_ORDER.filter((p) => !cfg.knownProviders.includes(p) && detected.includes(p)) : [];
+  const newProviders = configReady && cfg.onboarded ? PROVIDER_ORDER.filter((p) => !cfg.knownProviders.includes(p) && detectedProviders.includes(p)) : [];
   const showPicker = needsOnboarding || newProviders.length > 0;
   const {
     statsLocal,
@@ -3294,7 +3730,6 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
     activeTableProvider: effTableProvider,
     tableVisible: tab === 1
   });
-  const snapshot = daemon.snapshot;
   const daemonRefreshRef = useRef8(daemon.refresh);
   const degradedRefreshRef = useRef8(refreshAllDegraded);
   daemonRefreshRef.current = daemon.refresh;
@@ -3306,11 +3741,11 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
     requestDaemonRefresh,
     requestDegradedRefresh
   });
-  const stats = useMemo2(
+  const stats = useMemo3(
     () => connected ? toStatsMap(snapshot, accounts) : statsLocal,
     [connected, snapshot, accounts, statsLocal]
   );
-  const accountIdentities = useMemo2(() => {
+  const accountIdentities = useMemo3(() => {
     const out = /* @__PURE__ */ new Map();
     for (const [id, stat] of stats) {
       const billing = stat.billing;
@@ -3325,7 +3760,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
   }, [stats]);
   const showPeak = accounts.some((a) => a.providerId === "claude");
   const peak = connected ? showPeak ? snapshot?.peak ?? null : null : peakLocal;
-  const updated = useMemo2(
+  const updated = useMemo3(
     () => connected ? new Date(snapshot?.generatedAt ?? Date.now()) : updatedLocal,
     [connected, snapshot, updatedLocal]
   );
@@ -3339,23 +3774,23 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
     }
     return statsReadyInput(statsLocal.get(id));
   }, [connected, snapshot, statsLocal]);
-  const slots = useMemo2(() => deriveSlots(accounts, cfg.privacyMode), [accounts, cfg.privacyMode]);
-  const { activeSlotIdx, focusId } = useMemo2(
+  const slots = useMemo3(() => deriveSlots(accounts, cfg.privacyMode), [accounts, cfg.privacyMode]);
+  const { activeSlotIdx, focusId } = useMemo3(
     () => findActiveSlot(slots, cfg.activeAccountId),
     [slots, cfg.activeAccountId]
   );
-  const visibleAccounts = useMemo2(
+  const visibleAccounts = useMemo3(
     () => focusId === null ? accounts : accounts.filter((a) => a.id === focusId),
     [accounts, focusId]
   );
-  const groups = useMemo2(
+  const groups = useMemo3(
     () => focusId === null ? allGroups : accountsByProvider(visibleAccounts),
     [allGroups, visibleAccounts, focusId]
   );
   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(
+  const { gridBudget } = useMemo3(() => computeChrome(slots, cols, rows), [slots, cols, rows]);
+  const dashLayout = useMemo3(
     () => computeDashLayout(groups, stats, cols, gridBudget, focusId, cfg.dashboardLayout),
     [groups, stats, cols, gridBudget, focusId, cfg.dashboardLayout]
   );
@@ -3400,8 +3835,8 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
   };
   const { handlePasteData, isPasteInput } = usePaste(insertText);
   const SORTS_FOR = SORTS;
-  const tableAccountIds = useMemo2(() => tableAccounts.map((a) => a.id), [tableAccounts]);
-  const table = useMemo2(
+  const tableAccountIds = useMemo3(() => tableAccounts.map((a) => a.id), [tableAccounts]);
+  const table = useMemo3(
     () => connected ? pickTable(snapshot, tableAccountIds) : tableLocal,
     [connected, snapshot, tableAccountIds, tableLocal]
   );
@@ -3415,18 +3850,19 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
     accountsCount: accounts.length
   });
   const pickerProviders = needsOnboarding ? PROVIDER_ORDER : newProviders;
-  const onboardEnabled = onboardSel ?? detected;
+  const onboardEnabled = onboardSel ?? detectedProviders;
   const onboardItems = pickerProviders.map((pid) => ({
     id: pid,
     name: PROVIDERS[pid].name,
     color: PROVIDERS[pid].color,
-    detected: detected.includes(pid),
+    detected: detectedProviders.includes(pid),
     enabled: onboardEnabled.includes(pid)
   }));
   useEffect9(() => {
+    if (connected) return;
     void detectProviders().then(setDetected);
-  }, []);
-  const tableKey = useMemo2(
+  }, [connected]);
+  const tableKey = useMemo3(
     () => `${effTableProvider}|${tableAccounts.map(acctKey).join(",")}|${tz}`,
     [effTableProvider, tableAccounts, tz]
   );
@@ -3484,7 +3920,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
     if (i < 0 || i >= pickerProviders.length) return;
     const pid = pickerProviders[i];
     setOnboardSel((prev) => {
-      const base = prev ?? detected;
+      const base = prev ?? detectedProviders;
       return base.includes(pid) ? base.filter((p) => p !== pid) : [...base, pid];
     });
   }
@@ -3547,7 +3983,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
     cycleColor,
     deleteAccount,
     moveAccount
-  } = useAccountForm({ cfg, detected, updateConfig, trackedAccountRows, setSettingsCursor });
+  } = useAccountForm({ cfg, detected: detectedProviders, updateConfig, trackedAccountRows, setSettingsCursor });
   async function toggleWeb() {
     if (connected) {
       if (baseUrl) openUrl(baseUrl);
@@ -3560,7 +3996,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
     if (webStartingRef.current) return;
     webStartingRef.current = true;
     try {
-      const { startWebServer } = await import("./server-EUO7CWYH.js");
+      const { startWebServer } = await import("./server-EPSH52DR.js");
       const ctrl = await startWebServer({ config: cfg, log: false });
       webRef.current = ctrl;
       openUrl(ctrl.url);
@@ -3590,11 +4026,11 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
     if (idx === cursor) setExpanded((e) => e === idx ? -1 : idx);
     else setCursor(idx);
   }, [cursor]);
-  const rawTokenRows = useMemo2(
+  const rawTokenRows = useMemo3(
     () => tab === 1 ? table ? [table.daily, table.weekly, table.monthly][view] : [] : [],
     [tab, table, view]
   );
-  const tokenModelOptions = useMemo2(() => tableModelOptions(rawTokenRows), [rawTokenRows]);
+  const tokenModelOptions = useMemo3(() => tableModelOptions(rawTokenRows), [rawTokenRows]);
   useEffect9(() => {
     if (tableModel && !tokenModelOptions.includes(tableModel)) setTableModel(null);
   }, [tableModel, tokenModelOptions]);
@@ -3603,7 +4039,7 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
     resetView();
   }, [tokenModelOptions, resetView]);
   const activeTableModel = tableModel && tokenModelOptions.includes(tableModel) ? tableModel : null;
-  const tokenRows = useMemo2(
+  const tokenRows = useMemo3(
     () => tab === 1 ? sortRows(filterTokenRows(filterRowsByModel(rawTokenRows, activeTableModel), search), sort) : [],
     [tab, rawTokenRows, activeTableModel, search, sort]
   );
@@ -3695,10 +4131,10 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
       }
     });
   }, { isActive: IS_TTY });
-  if (!config) return /* @__PURE__ */ jsx12(Box11, { padding: 1, children: /* @__PURE__ */ jsx12(Text12, { dimColor: true, children: "Loading..." }) });
-  if (resizing) return /* @__PURE__ */ jsx12(ResizingView, { cols: live.cols, rows: live.rows });
+  if (!config) return /* @__PURE__ */ jsx13(Box11, { padding: 1, children: /* @__PURE__ */ jsx13(Text12, { dimColor: true, children: "Loading..." }) });
+  if (resizing) return /* @__PURE__ */ jsx13(TuiThemeProvider, { appearance: cfg.appearance, children: /* @__PURE__ */ jsx13(ResizingView, { cols: live.cols, rows: live.rows }) });
   if (showPicker) {
-    return /* @__PURE__ */ jsx12(Box11, { flexDirection: "column", paddingX: 2, paddingY: 1, height: rows, children: /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(TuiThemeProvider, { appearance: cfg.appearance, children: /* @__PURE__ */ jsx13(Box11, { flexDirection: "column", paddingX: 2, paddingY: 1, height: rows, children: /* @__PURE__ */ jsx13(
       Onboarding,
       {
         items: onboardItems,
@@ -3708,22 +4144,19 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
         heading: needsOnboarding ? "Welcome to tokmon" : "New providers detected",
         subheading: needsOnboarding ? "Pick the tools you want to track. You can change this anytime in settings." : "tokmon found these installed since you last set up. Pick which to track."
       }
-    ) });
+    ) }) });
   }
   if (showLoader) {
-    return /* @__PURE__ */ jsx12(Box11, { flexDirection: "column", paddingX: 2, paddingY: 1, height: rows, overflow: "hidden", children: /* @__PURE__ */ jsx12(LoadingView, { groups: allGroups, stats, cols, rows, readyInput: readyInputFor, privacyMode: cfg.privacyMode }) });
+    return /* @__PURE__ */ jsx13(TuiThemeProvider, { appearance: cfg.appearance, children: /* @__PURE__ */ jsx13(Box11, { flexDirection: "column", paddingX: 2, paddingY: 1, height: rows, overflow: "hidden", children: /* @__PURE__ */ jsx13(LoadingView, { groups: allGroups, stats, cols, rows, readyInput: readyInputFor, privacyMode: cfg.privacyMode }) }) });
   }
   if (TOO_SMALL && !showSettings) {
-    return /* @__PURE__ */ jsx12(TinyFallback, { groups, stats, rows, cols, refreshStatus });
+    return /* @__PURE__ */ jsx13(TuiThemeProvider, { appearance: cfg.appearance, children: /* @__PURE__ */ jsx13(TinyFallback, { groups, stats, rows, cols, refreshStatus }) });
   }
   rowCountRef.current = tokenRows.length;
-  return /* @__PURE__ */ jsxs12(Box11, { flexDirection: "column", paddingX: 2, paddingY: 1, height: rows, overflow: "hidden", children: [
+  return /* @__PURE__ */ jsx13(TuiThemeProvider, { appearance: cfg.appearance, children: /* @__PURE__ */ jsxs12(Box11, { flexDirection: "column", paddingX: 2, paddingY: 1, height: rows, overflow: "hidden", children: [
     /* @__PURE__ */ jsxs12(Box11, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsxs12(Box11, { children: [
-        /* @__PURE__ */ jsxs12(Text12, { bold: true, color: "greenBright", children: [
-          glyphs().dotSel,
-          " tokmon"
-        ] }),
+        /* @__PURE__ */ jsx13(ThemedBrand, {}),
         /* @__PURE__ */ jsxs12(Text12, { dimColor: true, children: [
           "  ",
           glyphs().middot,
@@ -3737,15 +4170,15 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
         ] })
       ] }),
       /* @__PURE__ */ jsxs12(Box11, { children: [
-        peak && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-          /* @__PURE__ */ jsx12(PeakBadge, { peak, resetDisplay: cfg.resetDisplay, tz }),
+        peak && /* @__PURE__ */ jsxs12(Fragment6, { children: [
+          /* @__PURE__ */ jsx13(PeakBadge, { peak, resetDisplay: cfg.resetDisplay, tz }),
           /* @__PURE__ */ jsxs12(Text12, { dimColor: true, children: [
             "  ",
             glyphs().middot,
             "  "
           ] })
         ] }),
-        /* @__PURE__ */ jsx12(Text12, { dimColor: true, children: time(updated, tz) })
+        /* @__PURE__ */ jsx13(Text12, { dimColor: true, children: time(updated, tz) })
       ] })
     ] }),
     degraded && /* @__PURE__ */ jsxs12(Text12, { dimColor: true, children: [
@@ -3760,19 +4193,19 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
       glyphs().middot,
       " showing last known data"
     ] }),
-    cfg.allowNetworkAccess && /* @__PURE__ */ jsxs12(Text12, { color: "red", children: [
+    cfg.allowNetworkAccess && /* @__PURE__ */ jsxs12(ThemedError, { children: [
       glyphs().warn,
       " unsafe network access enabled ",
       glyphs().middot,
       " dashboard may be reachable from your LAN after daemon restart"
     ] }),
-    configSaveError && /* @__PURE__ */ jsxs12(Text12, { color: "red", children: [
+    configSaveError && /* @__PURE__ */ jsxs12(ThemedError, { children: [
       glyphs().warn,
       " ",
       configSaveError
     ] }),
-    /* @__PURE__ */ jsx12(RefreshStatusLine, { status: refreshStatus }),
-    showSettings ? /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(RefreshStatusLine, { status: refreshStatus }),
+    showSettings ? /* @__PURE__ */ jsx13(
       SettingsView,
       {
         config: cfg,
@@ -3790,20 +4223,20 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
         trackedAccounts: trackedAccountRows,
         accountIdentities
       }
-    ) : /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    ) : /* @__PURE__ */ jsxs12(Fragment6, { children: [
       /* @__PURE__ */ jsxs12(Box11, { marginTop: 1, marginBottom: 1, children: [
-        /* @__PURE__ */ jsx12(TabBar, { tabs: TABS, active: tab, onSelect: onTabSelect }),
+        /* @__PURE__ */ jsx13(TabBar, { tabs: TABS, active: tab, onSelect: onTabSelect }),
         /* @__PURE__ */ jsxs12(Text12, { dimColor: true, children: [
           "  Tab/",
           glyphs().arrowL,
           glyphs().arrowR
         ] })
       ] }),
-      tab === 0 && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-        /* @__PURE__ */ jsx12(DashboardView, { groups, stats, cols, budget: gridBudget, focusId, layout: cfg.dashboardLayout, page: dashPage, privacyMode: cfg.privacyMode, resetDisplay: cfg.resetDisplay, tz }),
+      tab === 0 && /* @__PURE__ */ jsxs12(Fragment6, { children: [
+        /* @__PURE__ */ jsx13(DashboardView, { groups, stats, cols, budget: gridBudget, computed: dashLayout, page: dashPage, privacyMode: cfg.privacyMode, resetDisplay: cfg.resetDisplay, tz }),
         slots.length > 1 && /* @__PURE__ */ jsxs12(Box11, { marginTop: 1, children: [
-          /* @__PURE__ */ jsx12(Text12, { dimColor: true, children: "focus  " }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(Text12, { dimColor: true, children: "focus  " }),
+          /* @__PURE__ */ jsx13(
             AccountStrip,
             {
               slots,
@@ -3812,12 +4245,12 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
             }
           )
         ] }),
-        /* @__PURE__ */ jsx12(TotalsRow, { groups, stats, cols })
+        /* @__PURE__ */ jsx13(TotalsRow, { groups, stats, cols })
       ] }),
-      tab === 1 && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-        tableProvs.length > 0 && /* @__PURE__ */ jsx12(TableProviderBar, { providers: tableProvs, active: effTableProvider, onSelect: onProviderSelect }),
-        /* @__PURE__ */ jsx12(Box11, { height: 1 }),
-        /* @__PURE__ */ jsx12(
+      tab === 1 && /* @__PURE__ */ jsxs12(Fragment6, { children: [
+        tableProvs.length > 0 && /* @__PURE__ */ jsx13(TableProviderBar, { providers: tableProvs, active: effTableProvider, onSelect: onProviderSelect }),
+        /* @__PURE__ */ jsx13(Box11, { height: 1 }),
+        /* @__PURE__ */ jsx13(
           ControlBar,
           {
             views: VIEWS,
@@ -3831,12 +4264,12 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
             showModel: true
           }
         ),
-        /* @__PURE__ */ jsx12(Box11, { height: 1 }),
+        /* @__PURE__ */ jsx13(Box11, { height: 1 }),
         !effTableProvider ? /* @__PURE__ */ jsxs12(Text12, { dimColor: true, children: [
           "No providers enabled ",
           glyphs().emDash,
           " press s to pick providers."
-        ] }) : tableLoading && !table ? /* @__PURE__ */ jsx12(Spinner, { label: "Loading history" }) : /* @__PURE__ */ jsx12(
+        ] }) : tableLoading && !table ? /* @__PURE__ */ jsx13(Spinner, { label: "Loading history" }) : /* @__PURE__ */ jsx13(
           TokenTable,
           {
             rows: tokenRows,
@@ -3849,12 +4282,23 @@ function App({ interval: cliInterval, initialConfig, baseUrl = null, mode = "deg
         )
       ] })
     ] }),
-    (tab === 0 || showSettings) && /* @__PURE__ */ jsx12(Footer, { hasAccounts: slots.length > 1, paginated: tab === 0 && dashPaginated, cols })
+    (tab === 0 || showSettings) && /* @__PURE__ */ jsx13(Footer, { hasAccounts: slots.length > 1, paginated: tab === 0 && dashPaginated, cols })
+  ] }) });
+}
+function ThemedBrand() {
+  const theme = useTuiTheme();
+  return /* @__PURE__ */ jsxs12(Text12, { bold: true, color: theme.accent, children: [
+    glyphs().dotSel,
+    " tokmon"
   ] });
 }
+function ThemedError({ children }) {
+  const theme = useTuiTheme();
+  return /* @__PURE__ */ jsx13(Text12, { color: theme.crit, children });
+}
 
 // src/bootstrap-ink.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function enterAltScreen() {
   process.stdout.write("\x1B[?1049h\x1B[H");
 }
@@ -3883,7 +4327,7 @@ async function bootstrapInk({ interval, config, daemon, mode }) {
     if (altScreen) leaveAltScreen();
   });
   const { waitUntilExit } = render(
-    /* @__PURE__ */ jsx13(MouseProvider, { children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(MouseProvider, { children: /* @__PURE__ */ jsx14(
       App,
       {
         interval,