tokmon 0.11.3 → 0.12.1

package/dist/cli.js

@@ -8,7 +8,15 @@ import { MouseProvider } from "@zenobius/ink-mouse";
 import { readFile, writeFile, mkdir } from "fs/promises";
 import { join } from "path";
 import { homedir } from "os";
-var DEFAULTS = { interval: 2, billingInterval: 5, clearScreen: true, timezone: null };
+var DEFAULTS = {
+  interval: 2,
+  billingInterval: 5,
+  clearScreen: true,
+  timezone: null,
+  accounts: [],
+  activeAccountId: null
+};
+var ACCENT_COLORS = ["cyan", "magenta", "green", "yellow", "blue", "red"];
 function configDir() {
   if (process.platform === "win32") {
     return join(process.env.APPDATA ?? join(homedir(), "AppData", "Roaming"), "tokmon");
@@ -23,7 +31,12 @@ async function loadConfig() {
   try {
     const raw = await readFile(configLocation(), "utf-8");
     const parsed = JSON.parse(raw);
-    return { ...DEFAULTS, ...parsed };
+    return {
+      ...DEFAULTS,
+      ...parsed,
+      accounts: Array.isArray(parsed.accounts) ? parsed.accounts : [],
+      activeAccountId: typeof parsed.activeAccountId === "string" ? parsed.activeAccountId : null
+    };
   } catch {
     return { ...DEFAULTS };
   }
@@ -33,6 +46,32 @@ async function saveConfig(config2) {
   await mkdir(dir, { recursive: true });
   await writeFile(configLocation(), JSON.stringify(config2, null, 2) + "\n");
 }
+function slugify(value) {
+  return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").slice(0, 48);
+}
+function generateAccountId(name, existing) {
+  const base = slugify(name) || "account";
+  const taken = new Set(existing.map((a) => a.id));
+  if (!taken.has(base)) return base;
+  for (let i = 2; i < 1e3; i++) {
+    const candidate = `${base}_${i}`;
+    if (!taken.has(candidate)) return candidate;
+  }
+  return `${base}_${Date.now()}`;
+}
+function pickAccentColor(existing) {
+  const used = new Set(existing.map((a) => a.color).filter(Boolean));
+  for (const c of ACCENT_COLORS) {
+    if (!used.has(c)) return c;
+  }
+  return ACCENT_COLORS[existing.length % ACCENT_COLORS.length];
+}
+function expandHome(p) {
+  if (!p) return homedir();
+  if (p === "~" || p === "~/") return homedir();
+  if (p.startsWith("~/")) return join(homedir(), p.slice(2));
+  return p;
+}
 
 // src/app.tsx
 import { useState, useEffect, useCallback, useRef } from "react";
@@ -163,7 +202,13 @@ var PRICING = {
 };
 var FALLBACK = PRICING["claude-opus-4"];
 var fileCache = /* @__PURE__ */ new Map();
-function getClaudeDirs() {
+function getClaudeDirs(homeDir) {
+  if (homeDir) {
+    return [
+      join2(homeDir, ".claude", "projects"),
+      join2(homeDir, ".config", "claude", "projects")
+    ];
+  }
   const home = homedir2();
   const dirs = [join2(home, ".claude", "projects")];
   if (process.env.XDG_CONFIG_HOME) {
@@ -220,10 +265,10 @@ async function parseFile(path, since) {
   }
   return entries;
 }
-async function loadEntries(since) {
+async function loadEntries(since, homeDir) {
   const chunks = [];
   const seen = /* @__PURE__ */ new Set();
-  for (const dir of getClaudeDirs()) {
+  for (const dir of getClaudeDirs(homeDir)) {
     let listing;
     try {
       listing = await readdir(dir, { recursive: true });
@@ -318,12 +363,12 @@ function groupBy(entries, keyFn) {
   }
   return rows.sort((a, b) => a.label.localeCompare(b.label));
 }
-async function fetchDashboard(tz) {
+async function fetchDashboard(tz, homeDir) {
   const now = Date.now();
   const monthStart = startOfMonth(now, tz);
   const todayStart = startOfDay(now, tz);
   const weekStart = startOfWeek(now, tz);
-  const entries = await loadEntries(monthStart);
+  const entries = await loadEntries(monthStart, homeDir);
   const todayEntries = entries.filter((e) => e.ts >= todayStart);
   let burnRate = 0;
   if (todayEntries.length > 0) {
@@ -343,9 +388,9 @@ async function fetchDashboard(tz) {
     burnRate
   };
 }
-async function fetchTable(tz) {
+async function fetchTable(tz, homeDir) {
   const lookback = monthsAgoStart(Date.now(), 6, tz);
-  const entries = await loadEntries(lookback);
+  const entries = await loadEntries(lookback, homeDir);
   return {
     daily: groupBy(entries, (e) => dayKey(e.ts, tz)),
     weekly: groupBy(entries, (e) => weekKey(e.ts, tz)),
@@ -360,13 +405,14 @@ import { join as join3 } from "path";
 import { homedir as homedir3 } from "os";
 import { promisify } from "util";
 var execFile = promisify(execFileCb);
-function credentialsFilePath() {
+function credentialsFilePath(homeDir) {
+  if (homeDir) return join3(homeDir, ".claude", ".credentials.json");
   const base = process.env.CLAUDE_CONFIG_DIR ?? join3(homedir3(), ".claude");
   return join3(base, ".credentials.json");
 }
-async function readCredentialsFile() {
+async function readCredentialsFile(homeDir) {
   try {
-    const raw = await readFile2(credentialsFilePath(), "utf-8");
+    const raw = await readFile2(credentialsFilePath(homeDir), "utf-8");
     const creds = JSON.parse(raw);
     return creds?.claudeAiOauth?.accessToken ?? creds?.accessToken ?? null;
   } catch {
@@ -387,7 +433,12 @@ async function readMacKeychain() {
     return null;
   }
 }
-async function getAccessToken() {
+async function getAccessToken(homeDir) {
+  if (homeDir) {
+    const fromFile = await readCredentialsFile(homeDir);
+    if (fromFile) return fromFile;
+    return null;
+  }
   if (process.platform === "darwin") {
     const token = await readMacKeychain();
     if (token) return token;
@@ -395,8 +446,8 @@ async function getAccessToken() {
   return readCredentialsFile();
 }
 var EMPTY = { session: null, weekly: null, sonnet: null, extraUsage: null, peak: null, error: null };
-async function fetchBilling() {
-  const token = await getAccessToken();
+async function fetchBilling(homeDir) {
+  const token = await getAccessToken(homeDir);
   if (!token) return { ...EMPTY, error: "No OAuth token \u2014 run claude and log in" };
   const [usageRes, peak] = await Promise.all([
     fetchUsage(token),
@@ -519,12 +570,36 @@ var VIEWS = ["Daily", "Weekly", "Monthly"];
 var SORTS = ["date \u2191", "date \u2193", "cost \u2191", "cost \u2193"];
 var SPINNER_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
 var MONTHS = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-var DEFAULT_CONFIG = { interval: 2, billingInterval: 5, clearScreen: true, timezone: null };
-var SETTINGS_ROWS = 4;
+var DEFAULT_CONFIG = {
+  interval: 2,
+  billingInterval: 5,
+  clearScreen: true,
+  timezone: null,
+  accounts: [],
+  activeAccountId: null
+};
+var GENERAL_ROWS = 4;
 var IS_TTY = process.stdin.isTTY === true;
+function buildSlots(config2) {
+  const slots = [];
+  if (config2.accounts.length === 0) {
+    slots.push({ id: null, name: "Default", homeDir: void 0, color: "green" });
+    return slots;
+  }
+  slots.push({ id: null, name: "All", homeDir: void 0, color: "whiteBright" });
+  for (const a of config2.accounts) {
+    slots.push({
+      id: a.id,
+      name: a.name,
+      homeDir: expandHome(a.homeDir),
+      color: a.color || "cyan"
+    });
+  }
+  return slots;
+}
 function App({ interval: cliInterval }) {
-  const [dashboard, setDashboard] = useState(null);
-  const [billing, setBilling] = useState(null);
+  const [config2, setConfig] = useState(null);
+  const [stats, setStats] = useState(/* @__PURE__ */ new Map());
   const [table, setTable] = useState(null);
   const [tableLoading, setTableLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -535,18 +610,28 @@ function App({ interval: cliInterval }) {
   const [expanded, setExpanded] = useState(-1);
   const [sort, setSort] = useState(1);
   const [showSettings, setShowSettings] = useState(false);
-  const [config2, setConfig] = useState(null);
   const [settingsCursor, setSettingsCursor] = useState(0);
   const [tzEdit, setTzEdit] = useState(null);
   const [tzError, setTzError] = useState(null);
+  const [accountForm, setAccountForm] = useState(null);
   const tableLoadedOnce = useRef(false);
   const { stdout } = useStdout();
   const { exit } = useApp();
   const rows = stdout?.rows ?? 24;
   const cols = stdout?.columns ?? 80;
-  const interval2 = cliInterval ?? (config2?.interval ?? 2) * 1e3;
   const cfg = config2 ?? DEFAULT_CONFIG;
+  const interval2 = cliInterval ?? cfg.interval * 1e3;
   const tz = resolveTimezone(cfg.timezone);
+  const slots = buildSlots(cfg);
+  const activeSlotIdx = (() => {
+    if (cfg.accounts.length === 0) return 0;
+    if (cfg.activeAccountId === null) return 0;
+    const i = slots.findIndex((s) => s.id === cfg.activeAccountId);
+    return i < 0 ? 0 : i;
+  })();
+  const activeSlot = slots[activeSlotIdx];
+  const slotKey = (s) => s.id ?? "__default__";
+  const visibleSlots = activeSlot.id === null && cfg.accounts.length > 0 ? slots.slice(1) : [activeSlot];
   useEffect(() => {
     loadConfig().then((c) => {
       if (cliInterval) c = { ...c, interval: cliInterval / 1e3 };
@@ -554,12 +639,21 @@ function App({ interval: cliInterval }) {
     });
   }, []);
   useEffect(() => {
+    if (!config2) return;
     let active = true;
+    const slotsToLoad = activeSlot.id === null && cfg.accounts.length > 0 ? slots.slice(1) : [activeSlot];
     const load = async () => {
       try {
-        const result = await fetchDashboard(tz);
+        const next = /* @__PURE__ */ new Map();
+        await Promise.all(slotsToLoad.map(async (slot) => {
+          const [dashboard, billing] = await Promise.all([
+            fetchDashboard(tz, slot.homeDir),
+            fetchBilling(slot.homeDir)
+          ]);
+          next.set(slotKey(slot), { slot, dashboard, billing });
+        }));
         if (active) {
-          setDashboard(result);
+          setStats(next);
           setError(null);
           setUpdated(/* @__PURE__ */ new Date());
         }
@@ -573,31 +667,17 @@ function App({ interval: cliInterval }) {
       active = false;
       clearInterval(id);
     };
-  }, [interval2, tz]);
-  const billingMs = cfg.billingInterval * 6e4;
-  useEffect(() => {
-    let active = true;
-    const load = () => fetchBilling().then((b) => {
-      if (active) setBilling(b);
-    }).catch(() => {
-    });
-    load();
-    const id = setInterval(load, billingMs);
-    return () => {
-      active = false;
-      clearInterval(id);
-    };
-  }, [billingMs]);
+  }, [interval2, tz, config2, activeSlot.id]);
   useEffect(() => {
     tableLoadedOnce.current = false;
     setTable(null);
-  }, [tz]);
+  }, [tz, activeSlot.id]);
   useEffect(() => {
     if (tab !== 1) return;
     if (tableLoadedOnce.current && table) return;
     let active = true;
     setTableLoading(true);
-    fetchTable(tz).then((result) => {
+    fetchTable(tz, activeSlot.id === null ? void 0 : activeSlot.homeDir).then((result) => {
       if (active) {
         setTable(result);
         setTableLoading(false);
@@ -609,13 +689,13 @@ function App({ interval: cliInterval }) {
     return () => {
       active = false;
     };
-  }, [tab, tz]);
+  }, [tab, tz, activeSlot.id]);
   useEffect(() => {
     if (tab !== 1 || !tableLoadedOnce.current) return;
     let active = true;
     const id = setInterval(async () => {
       try {
-        const result = await fetchTable(tz);
+        const result = await fetchTable(tz, activeSlot.id === null ? void 0 : activeSlot.homeDir);
         if (active) setTable(result);
       } catch {
       }
@@ -624,7 +704,7 @@ function App({ interval: cliInterval }) {
       active = false;
       clearInterval(id);
     };
-  }, [tab, interval2, tz]);
+  }, [tab, interval2, tz, activeSlot.id]);
   const resetView = useCallback(() => {
     setCursor(0);
     setExpanded(-1);
@@ -643,7 +723,156 @@ function App({ interval: cliInterval }) {
       mouse.events.off("scroll", onScroll);
     };
   }, [tab]);
+  function updateConfig(fn) {
+    setConfig((prev) => {
+      const next = fn(prev ?? DEFAULT_CONFIG);
+      saveConfig(next);
+      return next;
+    });
+  }
+  function cycleAccount(dir) {
+    if (slots.length <= 1) return;
+    const next = (activeSlotIdx + dir + slots.length) % slots.length;
+    const targetId = slots[next].id;
+    updateConfig((c) => ({ ...c, activeAccountId: targetId }));
+    resetView();
+  }
+  function openAddAccount() {
+    setAccountForm({
+      mode: "add",
+      field: "name",
+      name: "",
+      homeDir: "~",
+      color: pickAccentColor(cfg.accounts),
+      editingId: null,
+      error: null
+    });
+  }
+  function openEditAccount(acc) {
+    setAccountForm({
+      mode: "edit",
+      field: "name",
+      name: acc.name,
+      homeDir: acc.homeDir,
+      color: acc.color || "cyan",
+      editingId: acc.id,
+      error: null
+    });
+  }
+  function commitAccountForm() {
+    if (!accountForm) return;
+    const name = accountForm.name.trim();
+    const homeDir = accountForm.homeDir.trim() || "~";
+    const color = accountForm.color;
+    if (!name) {
+      setAccountForm({ ...accountForm, error: "Name required", field: "name" });
+      return;
+    }
+    updateConfig((c) => {
+      if (accountForm.mode === "add") {
+        const id = generateAccountId(name, c.accounts);
+        const account = { id, name, homeDir, color };
+        return {
+          ...c,
+          accounts: [...c.accounts, account],
+          activeAccountId: c.accounts.length === 0 ? id : c.activeAccountId
+        };
+      } else {
+        return {
+          ...c,
+          accounts: c.accounts.map(
+            (a) => a.id === accountForm.editingId ? { ...a, name, homeDir, color } : a
+          )
+        };
+      }
+    });
+    setAccountForm(null);
+  }
+  function cycleFormField(dir) {
+    const order = ["name", "homeDir", "color"];
+    setAccountForm((f) => {
+      if (!f) return f;
+      const i = order.indexOf(f.field);
+      const next = order[(i + dir + order.length) % order.length];
+      return { ...f, field: next };
+    });
+  }
+  function cycleColor(dir) {
+    setAccountForm((f) => {
+      if (!f) return f;
+      const i = COLOR_PALETTE.indexOf(f.color);
+      const idx = i < 0 ? 0 : i;
+      const next = COLOR_PALETTE[(idx + dir + COLOR_PALETTE.length) % COLOR_PALETTE.length];
+      return { ...f, color: next };
+    });
+  }
+  function deleteAccount(id) {
+    updateConfig((c) => ({
+      ...c,
+      accounts: c.accounts.filter((a) => a.id !== id),
+      activeAccountId: c.activeAccountId === id ? null : c.activeAccountId
+    }));
+  }
+  const accountRowsStart = GENERAL_ROWS;
+  const totalSettingsRows = GENERAL_ROWS + cfg.accounts.length + 1;
   useInput((input, key) => {
+    if (showSettings && accountForm) {
+      if (key.escape) {
+        setAccountForm(null);
+        return;
+      }
+      if (key.tab) {
+        cycleFormField(key.shift ? -1 : 1);
+        return;
+      }
+      if (key.upArrow) {
+        cycleFormField(-1);
+        return;
+      }
+      if (key.downArrow) {
+        cycleFormField(1);
+        return;
+      }
+      if (accountForm.field === "color") {
+        if (key.leftArrow) {
+          cycleColor(-1);
+          return;
+        }
+        if (key.rightArrow) {
+          cycleColor(1);
+          return;
+        }
+        if (key.return) {
+          commitAccountForm();
+          return;
+        }
+        return;
+      }
+      if (key.return) {
+        if (accountForm.field === "name") {
+          setAccountForm((f) => f && { ...f, field: "homeDir" });
+        } else if (accountForm.field === "homeDir") {
+          setAccountForm((f) => f && { ...f, field: "color" });
+        }
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setAccountForm((f) => {
+          if (!f || f.field === "color") return f;
+          const cur = f[f.field];
+          return { ...f, [f.field]: cur.slice(0, -1), error: null };
+        });
+        return;
+      }
+      if (input && !key.ctrl && !key.meta) {
+        setAccountForm((f) => {
+          if (!f || f.field === "color") return f;
+          return { ...f, [f.field]: f[f.field] + input, error: null };
+        });
+        return;
+      }
+      return;
+    }
     if (showSettings && tzEdit !== null) {
       if (key.escape) {
         setTzEdit(null);
@@ -682,19 +911,31 @@ function App({ interval: cliInterval }) {
       return;
     }
     if (showSettings) {
-      if (key.escape || input === "s") setShowSettings(false);
-      if (key.upArrow) setSettingsCursor((c) => Math.max(0, c - 1));
-      if (key.downArrow) setSettingsCursor((c) => Math.min(SETTINGS_ROWS - 1, c + 1));
+      if (key.escape || input === "s") {
+        setShowSettings(false);
+        return;
+      }
+      if (key.upArrow) {
+        setSettingsCursor((c) => Math.max(0, c - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setSettingsCursor((c) => Math.min(totalSettingsRows - 1, c + 1));
+        return;
+      }
       if (settingsCursor === 0) {
         if (key.leftArrow) updateConfig((c) => ({ ...c, interval: Math.max(1, c.interval - 1) }));
         if (key.rightArrow) updateConfig((c) => ({ ...c, interval: c.interval + 1 }));
+        return;
       }
       if (settingsCursor === 1) {
         if (key.leftArrow) updateConfig((c) => ({ ...c, billingInterval: Math.max(1, c.billingInterval - 1) }));
         if (key.rightArrow) updateConfig((c) => ({ ...c, billingInterval: c.billingInterval + 1 }));
+        return;
       }
       if (settingsCursor === 2 && (key.leftArrow || key.rightArrow || key.return)) {
         updateConfig((c) => ({ ...c, clearScreen: !c.clearScreen }));
+        return;
       }
       if (settingsCursor === 3) {
         if (key.return) {
@@ -704,28 +945,57 @@ function App({ interval: cliInterval }) {
         if (key.leftArrow || key.rightArrow) {
           updateConfig((c) => ({ ...c, timezone: c.timezone === null ? systemTimezone() : null }));
         }
+        return;
+      }
+      const accIdx = settingsCursor - accountRowsStart;
+      if (accIdx >= 0 && accIdx < cfg.accounts.length) {
+        const acc = cfg.accounts[accIdx];
+        if (key.return) {
+          openEditAccount(acc);
+          return;
+        }
+        if (input === "d" || input === "x") {
+          deleteAccount(acc.id);
+          return;
+        }
+        if (input === " ") {
+          updateConfig((c) => ({ ...c, activeAccountId: acc.id }));
+          return;
+        }
+        return;
+      }
+      if (accIdx === cfg.accounts.length && key.return) {
+        openAddAccount();
+        return;
       }
       return;
     }
     if (input === "s") {
       setShowSettings(true);
+      setSettingsCursor(0);
       return;
     }
-    if (key.tab) {
-      setTab((t) => (t + 1) % TABS.length);
-      resetView();
+    if (input === "a") {
+      cycleAccount(1);
       return;
     }
-    if (input === "1") {
-      setTab(0);
-      resetView();
+    if (input === "A") {
+      cycleAccount(-1);
       return;
     }
-    if (input === "2") {
-      setTab(1);
+    if (key.tab) {
+      setTab((t) => (t + 1) % TABS.length);
       resetView();
       return;
     }
+    if (input && /^[0-9]$/.test(input) && slots.length > 1) {
+      const target = slots[parseInt(input, 10)];
+      if (target) {
+        updateConfig((c) => ({ ...c, activeAccountId: target.id }));
+        resetView();
+      }
+      return;
+    }
     if (tab === 1) {
       if (input === "d") {
         setView(0);
@@ -789,15 +1059,11 @@ function App({ interval: cliInterval }) {
       return;
     }
   }, { isActive: IS_TTY });
-  function updateConfig(fn) {
-    setConfig((prev) => {
-      const next = fn(prev ?? DEFAULT_CONFIG);
-      saveConfig(next);
-      return next;
-    });
-  }
   if (error) return /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Text, { color: "red", children: error }) });
-  if (!dashboard) return /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Loading..." }) });
+  if (!config2) return /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Loading..." }) });
+  const firstStats = stats.size > 0 ? [...stats.values()][0] : null;
+  if (!firstStats?.dashboard) return /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Loading..." }) });
+  const peakBilling = firstStats.billing;
   const rawTableData = table ? [table.daily, table.weekly, table.monthly][view] : [];
   const tableData = sortRows(rawTableData, sort);
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, height: rows, children: [
@@ -809,20 +1075,47 @@ function App({ interval: cliInterval }) {
         ] }),
         /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
           "  \xB7  every ",
-          cliInterval ? cliInterval / 1e3 : cfg.interval,
+          cfg.interval,
           "s"
         ] })
       ] }),
       /* @__PURE__ */ jsxs(Box, { children: [
-        billing?.peak && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(PeakBadge, { peak: billing.peak }),
+        peakBilling?.peak && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(PeakBadge, { peak: peakBilling.peak }),
           /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  \xB7  " })
         ] }),
         /* @__PURE__ */ jsx(Text, { dimColor: true, children: time(updated, tz) })
       ] })
     ] }),
-    showSettings ? /* @__PURE__ */ jsx(SettingsView, { config: cfg, cursor: settingsCursor, tzEdit, tzError, resolvedTz: tz }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
+    showSettings ? /* @__PURE__ */ jsx(
+      SettingsView,
+      {
+        config: cfg,
+        cursor: settingsCursor,
+        tzEdit,
+        tzError,
+        resolvedTz: tz,
+        accountForm,
+        onSettingsClick: (i) => setSettingsCursor(i),
+        onAddAccount: openAddAccount,
+        onEditAccount: openEditAccount,
+        onActivateAccount: (id) => updateConfig((c) => ({ ...c, activeAccountId: id })),
+        activeAccountId: cfg.activeAccountId
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      slots.length > 1 && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(
+        AccountStrip,
+        {
+          slots,
+          activeIdx: activeSlotIdx,
+          onSelect: (i) => {
+            const id = slots[i].id;
+            updateConfig((c) => ({ ...c, activeAccountId: id }));
+            resetView();
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Box, { marginTop: slots.length > 1 ? 0 : 1, children: [
         /* @__PURE__ */ jsx(TabBar, { tabs: TABS, active: tab, onSelect: (i) => {
           setTab(i);
           resetView();
@@ -830,7 +1123,14 @@ function App({ interval: cliInterval }) {
         /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  Tab/\u2190\u2192" })
       ] }),
       /* @__PURE__ */ jsx(Box, { height: 1 }),
-      tab === 0 && /* @__PURE__ */ jsx(DashboardView, { data: dashboard, billing }),
+      tab === 0 && /* @__PURE__ */ jsx(
+        DashboardView,
+        {
+          slots: visibleSlots,
+          stats,
+          compact: visibleSlots.length > 1
+        }
+      ),
       tab === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(ViewBar, { views: VIEWS, active: view, sort: SORTS[sort], onSelect: (i) => {
           setView(i);
@@ -843,7 +1143,7 @@ function App({ interval: cliInterval }) {
             rows: tableData,
             cursor,
             expanded,
-            maxRows: rows - 12,
+            maxRows: rows - 14,
             cols,
             onRowClick: (idx) => {
               if (idx === cursor) setExpanded((e) => e === idx ? -1 : idx);
@@ -853,16 +1153,18 @@ function App({ interval: cliInterval }) {
         )
       ] })
     ] }),
-    (tab === 0 || showSettings) && /* @__PURE__ */ jsx(Footer, {})
+    (tab === 0 || showSettings) && /* @__PURE__ */ jsx(Footer, { hasAccounts: slots.length > 1 })
   ] });
 }
-function Footer() {
+function Footer({ hasAccounts }) {
   return /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: "by " }),
     /* @__PURE__ */ jsx(Text, { children: "David Ilie" }),
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: " (" }),
     /* @__PURE__ */ jsx(Text, { color: "cyan", children: "davidilie.com" }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: ")  \xB7  s=settings  q=quit" })
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: ")  \xB7  s=settings  " }),
+    hasAccounts && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "0-9=jump  a/A=cycle  " }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "q=quit" })
   ] });
 }
 function TabBar({ tabs, active, onSelect }) {
@@ -876,6 +1178,19 @@ function TabBar({ tabs, active, onSelect }) {
     " "
   ] }) }, t)) });
 }
+function AccountStrip({ slots, activeIdx, onSelect }) {
+  return /* @__PURE__ */ jsx(Box, { flexWrap: "wrap", children: slots.map((s, i) => {
+    const active = i === activeIdx;
+    const dot = s.id === null ? "\u2726" : "\u25CF";
+    return /* @__PURE__ */ jsxs(ClickableBox, { onClick: () => onSelect(i), marginRight: 2, children: [
+      /* @__PURE__ */ jsx(Text, { dimColor: !active, children: i }),
+      /* @__PURE__ */ jsx(Text, { children: " " }),
+      /* @__PURE__ */ jsx(Text, { color: s.color, bold: active, dimColor: !active, children: dot }),
+      /* @__PURE__ */ jsx(Text, { children: " " }),
+      active ? /* @__PURE__ */ jsx(Text, { bold: true, color: s.color, children: s.name }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: s.name })
+    ] }, s.id ?? "__all__");
+  }) });
+}
 function ViewBar({ views, active, sort, onSelect }) {
   return /* @__PURE__ */ jsxs(Box, { children: [
     views.map((v, i) => /* @__PURE__ */ jsx(ClickableBox, { onClick: () => onSelect(i), marginRight: 2, children: i === active ? /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
@@ -904,13 +1219,40 @@ function sortRows(rows, sortIdx) {
       return sorted;
   }
 }
-function SettingsView({ config: config2, cursor, tzEdit, tzError, resolvedTz }) {
-  const editing = tzEdit !== null;
+var COLOR_PALETTE = [
+  "cyan",
+  "magenta",
+  "green",
+  "yellow",
+  "blue",
+  "red",
+  "cyanBright",
+  "magentaBright",
+  "greenBright"
+];
+function SettingsView({
+  config: config2,
+  cursor,
+  tzEdit,
+  tzError,
+  resolvedTz,
+  accountForm,
+  onAddAccount,
+  onEditAccount,
+  onActivateAccount,
+  activeAccountId
+}) {
+  const editingTz = tzEdit !== null;
   const tzDisplay = config2.timezone === null ? `System (${resolvedTz})` : config2.timezone;
+  const accountRowsStart = GENERAL_ROWS;
+  if (accountForm) {
+    return /* @__PURE__ */ jsx(AccountFormView, { form: accountForm, accounts: config2.accounts });
+  }
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
     /* @__PURE__ */ jsx(Text, { bold: true, children: "Settings" }),
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: configLocation() }),
     /* @__PURE__ */ jsx(Box, { height: 1 }),
+    /* @__PURE__ */ jsx(Text, { bold: true, dimColor: true, children: "General" }),
     /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsxs(Text, { color: cursor === 0 ? "green" : void 0, children: [
         cursor === 0 ? "\u25B8" : " ",
@@ -963,7 +1305,7 @@ function SettingsView({ config: config2, cursor, tzEdit, tzError, resolvedTz })
         " "
       ] }),
       /* @__PURE__ */ jsx(Text, { children: "Timezone            " }),
-      editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      editingTz ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text, { dimColor: true, children: "[" }),
         /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: tzEdit }),
         /* @__PURE__ */ jsx(Text, { color: "cyan", children: "_" }),
@@ -975,32 +1317,278 @@ function SettingsView({ config: config2, cursor, tzEdit, tzError, resolvedTz })
       tzError
     ] }),
     /* @__PURE__ */ jsx(Box, { height: 1 }),
-    editing ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "type IANA name (e.g. Europe/London) \xB7 empty = System \xB7 Enter save \xB7 Esc cancel" }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191\u2193 select  \u2190\u2192 adjust  Enter edit tz  s/Esc close" })
+    /* @__PURE__ */ jsx(Text, { bold: true, dimColor: true, children: "Claude accounts" }),
+    config2.accounts.length === 0 && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  none \u2014 using default Claude HOME" }),
+    config2.accounts.map((acc, i) => {
+      const idx = accountRowsStart + i;
+      const selected = cursor === idx;
+      const isActive = acc.id === activeAccountId;
+      return /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsxs(Text, { color: selected ? "green" : void 0, children: [
+          selected ? "\u25B8" : " ",
+          " "
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { color: acc.color || "cyan", children: [
+          isActive ? "\u25CF" : "\u25CB",
+          " "
+        ] }),
+        /* @__PURE__ */ jsx(Box, { width: 16, children: /* @__PURE__ */ jsx(Text, { bold: true, children: acc.name }) }),
+        /* @__PURE__ */ jsx(Box, { width: 14, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: acc.id }) }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: acc.homeDir })
+      ] }, acc.id);
+    }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Text, { color: cursor === accountRowsStart + config2.accounts.length ? "green" : void 0, children: [
+        cursor === accountRowsStart + config2.accounts.length ? "\u25B8" : " ",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { color: "greenBright", children: "+ " }),
+      /* @__PURE__ */ jsx(Text, { children: "Add account" })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { height: 1 }),
+    editingTz ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "type IANA name (e.g. Europe/London) \xB7 empty = System \xB7 Enter save \xB7 Esc cancel" }) : cursor >= accountRowsStart && cursor < accountRowsStart + config2.accounts.length ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191\u2193 select  \xB7  Enter edit  \xB7  space activate  \xB7  d delete  \xB7  s/Esc close" }) : cursor === accountRowsStart + config2.accounts.length ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191\u2193 select  \xB7  Enter add account  \xB7  s/Esc close" }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191\u2193 select  \u2190\u2192 adjust  Enter edit  s/Esc close" })
   ] });
 }
-function DashboardView({ data, billing }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+function AccountFormView({ form, accounts }) {
+  const previewId = form.mode === "add" ? generateAccountId(form.name || "account", accounts) : form.editingId ?? "";
+  const accent = form.color;
+  const stepIndex = { name: 1, homeDir: 2, color: 3 };
+  const step = stepIndex[form.field];
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Text, { color: accent, bold: true, children: "\u258D" }),
+      /* @__PURE__ */ jsxs(Text, { bold: true, children: [
+        " ",
+        form.mode === "add" ? "NEW ACCOUNT" : "EDIT ACCOUNT"
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "   step ",
+        step,
+        " of 3"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Stepper, { active: form.field, accent }) }),
     /* @__PURE__ */ jsxs(
       Box,
       {
+        marginTop: 1,
         flexDirection: "column",
+        borderStyle: "round",
+        borderColor: accent,
+        paddingX: 2,
+        paddingY: 1,
+        children: [
+          /* @__PURE__ */ jsx(
+            FormField,
+            {
+              label: "Name",
+              hint: "display name for this Claude account",
+              value: form.name,
+              focused: form.field === "name",
+              accent,
+              placeholder: "e.g. Work, Personal"
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { height: 1 }),
+          /* @__PURE__ */ jsx(
+            FormField,
+            {
+              label: "Home directory",
+              hint: "path containing .claude/  \xB7  ~ for default",
+              value: form.homeDir,
+              focused: form.field === "homeDir",
+              accent,
+              placeholder: "~/claude-work",
+              mono: true
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { height: 1 }),
+          /* @__PURE__ */ jsx(
+            ColorField,
+            {
+              value: form.color,
+              focused: form.field === "color"
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { height: 1 }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "id  " }),
+            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2524 " }),
+            /* @__PURE__ */ jsx(Text, { bold: true, color: accent, children: previewId || "account" }),
+            /* @__PURE__ */ jsx(Text, { dimColor: true, children: " \u251C" }),
+            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "   auto-generated from name" })
+          ] })
+        ]
+      }
+    ),
+    form.error && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsxs(Text, { color: "red", children: [
+      "\u26A0 ",
+      form.error
+    ] }) }),
+    /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "tab/\u2191\u2193 " }),
+      /* @__PURE__ */ jsx(Text, { children: "switch field" }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  \xB7  " }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "enter " }),
+      /* @__PURE__ */ jsx(Text, { children: form.field === "color" ? "save" : "next" }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  \xB7  " }),
+      form.field === "color" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2190\u2192 " }),
+        /* @__PURE__ */ jsx(Text, { children: "pick color" }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  \xB7  " })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "esc " }),
+      /* @__PURE__ */ jsx(Text, { children: "cancel" })
+    ] })
+  ] });
+}
+function Stepper({ active, accent }) {
+  const steps = [
+    { id: "name", label: "Name" },
+    { id: "homeDir", label: "Home" },
+    { id: "color", label: "Color" }
+  ];
+  const order = steps.map((s) => s.id);
+  const activeIdx = order.indexOf(active);
+  return /* @__PURE__ */ jsx(Box, { children: steps.map((s, i) => {
+    const done = i < activeIdx;
+    const cur = i === activeIdx;
+    const dot = done ? "\u25CF" : cur ? "\u25C9" : "\u25CB";
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Text, { color: cur ? accent : done ? accent : void 0, dimColor: !cur && !done, children: [
+        dot,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { bold: cur, color: cur ? accent : void 0, dimColor: !cur, children: s.label }),
+      i < steps.length - 1 && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  \u2500  " })
+    ] }, s.id);
+  }) });
+}
+function FormField({
+  label,
+  hint,
+  value,
+  focused,
+  accent,
+  placeholder,
+  mono
+}) {
+  const display = value === "" ? placeholder : value;
+  const isPlaceholder = value === "";
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: focused ? accent : void 0, bold: focused, dimColor: !focused, children: [
+      focused ? "\u25B8" : " ",
+      " ",
+      label
+    ] }) }),
+    /* @__PURE__ */ jsxs(Box, { marginTop: 0, children: [
+      /* @__PURE__ */ jsxs(Text, { color: focused ? accent : void 0, children: [
+        "  ",
+        focused ? "\u258C" : " ",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          bold: focused && !isPlaceholder,
+          color: focused && !isPlaceholder ? accent : void 0,
+          dimColor: isPlaceholder,
+          italic: mono && isPlaceholder,
+          children: display
+        }
+      ),
+      focused && /* @__PURE__ */ jsx(Text, { color: accent, children: "\u258F" })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+      "      ",
+      hint
+    ] }) })
+  ] });
+}
+function ColorField({ value, focused }) {
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: focused ? value : void 0, bold: focused, dimColor: !focused, children: [
+      focused ? "\u25B8" : " ",
+      " Accent color"
+    ] }) }),
+    /* @__PURE__ */ jsxs(Box, { marginTop: 0, children: [
+      /* @__PURE__ */ jsxs(Text, { children: [
+        "  ",
+        focused ? "\u258C" : " ",
+        " "
+      ] }),
+      COLOR_PALETTE.map((c, i) => {
+        const selected = c === value;
+        return /* @__PURE__ */ jsx(Box, { marginRight: 1, children: selected ? /* @__PURE__ */ jsx(Text, { bold: true, color: c, children: "[\u25CF]" }) : /* @__PURE__ */ jsx(Text, { color: c, dimColor: !focused, children: i === COLOR_PALETTE.length - 1 ? " \u25CF" : " \u25CF" }) }, c);
+      })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "      shows on dashboard, account strip, borders" }) })
+  ] });
+}
+function DashboardView({ slots, stats, compact }) {
+  const slotKey = (s2) => s2.id ?? "__default__";
+  if (compact) {
+    const accountStats = slots.map((slot2) => ({ slot: slot2, s: stats.get(slotKey(slot2)) })).filter((x) => !!x.s?.dashboard);
+    return /* @__PURE__ */ jsx(ComparisonView, { accountStats });
+  }
+  const slot = slots[0];
+  const s = stats.get(slotKey(slot));
+  if (!s?.dashboard) {
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Text, { color: slot.color, bold: true, children: [
+        "\u25CF ",
+        slot.name,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "loading..." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(SoloAccountCard, { slot, dashboard: s.dashboard, billing: s.billing });
+}
+function bar(value, max, width) {
+  if (max <= 0) return { filled: 0, empty: width };
+  const filled = Math.max(0, Math.min(width, Math.round(value / max * width)));
+  return { filled, empty: width - filled };
+}
+function SoloAccountCard({ slot, dashboard, billing }) {
+  const maxCost = Math.max(dashboard.today.cost, dashboard.week.cost, dashboard.month.cost, 0.01);
+  const maxTokens = Math.max(dashboard.today.tokens, dashboard.week.tokens, dashboard.month.tokens, 1);
+  const rows = [
+    { label: "Today", s: dashboard.today },
+    { label: "This Week", s: dashboard.week },
+    { label: "This Month", s: dashboard.month }
+  ];
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Text, { color: slot.color, bold: true, children: [
+        "\u25CF ",
+        slot.name
+      ] }),
+      slot.id && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "   ",
+        slot.id
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        marginTop: 1,
         paddingLeft: 1,
         borderStyle: "bold",
-        borderColor: "green",
+        borderColor: slot.color,
         borderRight: false,
         borderTop: false,
         borderBottom: false,
         children: [
-          /* @__PURE__ */ jsx(Text, { bold: true, children: "Claude" }),
+          /* @__PURE__ */ jsx(Text, { bold: true, children: "Usage" }),
           /* @__PURE__ */ jsx(Box, { height: 1 }),
-          /* @__PURE__ */ jsx(SummaryRow, { label: "Today", summary: data.today }),
-          /* @__PURE__ */ jsx(SummaryRow, { label: "This Week", summary: data.week }),
-          /* @__PURE__ */ jsx(SummaryRow, { label: "This Month", summary: data.month }),
-          data.burnRate > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          rows.map((r) => /* @__PURE__ */ jsx(DualBarRow, { label: r.label, cost: r.s.cost, tokens: r.s.tokens, maxCost, maxTokens, color: slot.color }, r.label)),
+          dashboard.burnRate > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Box, { height: 1 }),
             /* @__PURE__ */ jsxs(Box, { children: [
               /* @__PURE__ */ jsx(Box, { width: 14, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Burn rate" }) }),
-              /* @__PURE__ */ jsx(Box, { width: 12, justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Text, { color: "red", children: currency(data.burnRate) }) }),
+              /* @__PURE__ */ jsx(Box, { width: 12, justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Text, { color: "red", children: currency(dashboard.burnRate) }) }),
               /* @__PURE__ */ jsx(Text, { dimColor: true, children: "/hr" })
             ] })
           ] })
@@ -1043,6 +1631,133 @@ function DashboardView({ data, billing }) {
     )
   ] });
 }
+function DualBarRow({
+  label,
+  cost,
+  tokens: tokens2,
+  maxCost,
+  maxTokens,
+  color
+}) {
+  const W = 18;
+  const c = bar(cost, maxCost, W);
+  const t = bar(tokens2, maxTokens, W);
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Box, { width: 12, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: label }) }),
+      /* @__PURE__ */ jsx(Text, { color, children: "\u2588".repeat(c.filled) }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2591".repeat(c.empty) }),
+      /* @__PURE__ */ jsx(Text, { children: "  " }),
+      /* @__PURE__ */ jsx(Box, { width: 11, justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: currency(cost) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Box, { width: 12, children: /* @__PURE__ */ jsx(Text, { children: " " }) }),
+      /* @__PURE__ */ jsx(Text, { color, dimColor: true, children: "\u2593".repeat(t.filled) }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2591".repeat(t.empty) }),
+      /* @__PURE__ */ jsx(Text, { children: "  " }),
+      /* @__PURE__ */ jsx(Box, { width: 11, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        tokens(tokens2),
+        " tk"
+      ] }) })
+    ] })
+  ] });
+}
+function ComparisonView({ accountStats }) {
+  if (accountStats.length === 0) {
+    return /* @__PURE__ */ jsx(Text, { dimColor: true, children: "No accounts loaded yet..." });
+  }
+  const periods = [
+    { key: "Today", pick: (d) => d.today },
+    { key: "This Week", pick: (d) => d.week },
+    { key: "This Month", pick: (d) => d.month }
+  ];
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    periods.map((p, i) => {
+      const rows = accountStats.map(({ slot, s }) => ({
+        slot,
+        summary: p.pick(s.dashboard)
+      }));
+      const maxCost = Math.max(0.01, ...rows.map((r) => r.summary.cost));
+      const maxTokens = Math.max(1, ...rows.map((r) => r.summary.tokens));
+      return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: i < periods.length - 1 ? 1 : 0, children: [
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { bold: true, dimColor: true, children: p.key.toUpperCase() }) }),
+        rows.map(({ slot, summary }) => /* @__PURE__ */ jsx(
+          ComparisonRow,
+          {
+            slot,
+            cost: summary.cost,
+            tokens: summary.tokens,
+            maxCost,
+            maxTokens
+          },
+          slot.id ?? "__default__"
+        ))
+      ] }, p.key);
+    }),
+    /* @__PURE__ */ jsx(Box, { height: 1 }),
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx(Text, { bold: true, dimColor: true, children: "RATE LIMITS" }),
+      accountStats.map(({ slot, s }) => /* @__PURE__ */ jsx(CompactLimitsRow, { slot, billing: s.billing }, slot.id ?? "__default__"))
+    ] })
+  ] });
+}
+function ComparisonRow({
+  slot,
+  cost,
+  tokens: tokens2,
+  maxCost,
+  maxTokens
+}) {
+  const W = 22;
+  const c = bar(cost, maxCost, W);
+  const t = bar(tokens2, maxTokens, W);
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { width: 14, children: [
+      /* @__PURE__ */ jsx(Text, { color: slot.color, children: "\u25CF " }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: slot.name })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { color: slot.color, children: "\u2588".repeat(c.filled) }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2591".repeat(c.empty) }),
+    /* @__PURE__ */ jsx(Text, { children: "  " }),
+    /* @__PURE__ */ jsx(Box, { width: 10, justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: currency(cost) }) }),
+    /* @__PURE__ */ jsx(Text, { children: "  " }),
+    /* @__PURE__ */ jsx(Text, { color: slot.color, dimColor: true, children: "\u2593".repeat(t.filled) }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2591".repeat(t.empty) }),
+    /* @__PURE__ */ jsx(Text, { children: "  " }),
+    /* @__PURE__ */ jsx(Box, { width: 10, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+      tokens(tokens2),
+      " tk"
+    ] }) })
+  ] });
+}
+function CompactLimitsRow({ slot, billing }) {
+  if (billing?.error) {
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Box, { width: 14, children: [
+        /* @__PURE__ */ jsx(Text, { color: slot.color, children: "\u25CF " }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: slot.name })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { color: "red", children: billing.error })
+    ] });
+  }
+  const fmtPct = (p) => p ? `${Math.round(p.utilization)}%` : "\u2014";
+  const colorFor = (p) => {
+    if (!p) return void 0;
+    return p.utilization >= 80 ? "red" : p.utilization >= 50 ? "yellow" : "green";
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { width: 14, children: [
+      /* @__PURE__ */ jsx(Text, { color: slot.color, children: "\u25CF " }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: slot.name })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "S " }),
+    /* @__PURE__ */ jsx(Box, { width: 6, children: /* @__PURE__ */ jsx(Text, { bold: true, color: colorFor(billing?.session), children: fmtPct(billing?.session) }) }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "W " }),
+    /* @__PURE__ */ jsx(Box, { width: 6, children: /* @__PURE__ */ jsx(Text, { bold: true, color: colorFor(billing?.weekly), children: fmtPct(billing?.weekly) }) }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Sonnet " }),
+    /* @__PURE__ */ jsx(Box, { width: 6, children: /* @__PURE__ */ jsx(Text, { bold: true, color: colorFor(billing?.sonnet), children: fmtPct(billing?.sonnet) }) })
+  ] });
+}
 function PeakBadge({ peak }) {
   const color = peak.state === "peak" ? "red" : "green";
   return /* @__PURE__ */ jsxs(Box, { children: [
@@ -1080,16 +1795,6 @@ function LimitBar({ label, pct, resets }) {
     ] })
   ] });
 }
-function SummaryRow({ label, summary }) {
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Box, { width: 14, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: label }) }),
-    /* @__PURE__ */ jsx(Box, { width: 12, justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: currency(summary.cost) }) }),
-    /* @__PURE__ */ jsx(Box, { width: 18, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-      tokens(summary.tokens),
-      " tokens"
-    ] }) })
-  ] });
-}
 function TableView({ rows: allRows, cursor, expanded, maxRows, cols, onRowClick }) {
   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 };
@@ -1167,7 +1872,7 @@ function TableView({ rows: allRows, cursor, expanded, maxRows, cols, onRowClick
       allRows.length
     ] }),
     /* @__PURE__ */ jsx(Box, { height: 1 }),
-    /* @__PURE__ */ jsx(Footer, {})
+    /* @__PURE__ */ jsx(Footer, { hasAccounts: false })
   ] });
 }
 function RowDetail({ row, indent }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokmon",
-  "version": "0.11.3",
+  "version": "0.12.1",
   "description": "Terminal dashboard for Claude Code usage and costs",
   "type": "module",
   "bin": {