tokmon 0.12.1 → 0.12.3

package/dist/cli.js

@@ -434,16 +434,15 @@ async function readMacKeychain() {
   }
 }
 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;
+  const isDefault = !homeDir || homeDir === homedir3();
+  if (isDefault) {
+    if (process.platform === "darwin") {
+      const token = await readMacKeychain();
+      if (token) return token;
+    }
+    return readCredentialsFile(homeDir);
   }
-  return readCredentialsFile();
+  return readCredentialsFile(homeDir);
 }
 var EMPTY = { session: null, weekly: null, sonnet: null, extraUsage: null, peak: null, error: null };
 async function fetchBilling(homeDir) {
@@ -580,6 +579,9 @@ var DEFAULT_CONFIG = {
 };
 var GENERAL_ROWS = 4;
 var IS_TTY = process.stdin.isTTY === true;
+function truncateName(s, n) {
+  return s.length > n ? s.slice(0, n - 1) + "\u2026" : s;
+}
 function buildSlots(config2) {
   const slots = [];
   if (config2.accounts.length === 0) {
@@ -638,27 +640,30 @@ function App({ interval: cliInterval }) {
       setConfig(c);
     });
   }, []);
+  const billingMs = cfg.billingInterval * 6e4;
+  const slotIdsKey = (activeSlot.id === null && cfg.accounts.length > 0 ? slots.slice(1) : [activeSlot]).map((s) => s.id ?? "__default__").join(",");
   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 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) {
-          setStats(next);
-          setError(null);
-          setUpdated(/* @__PURE__ */ new Date());
+      await Promise.all(slotsToLoad.map(async (slot) => {
+        try {
+          const dashboard = await fetchDashboard(tz, slot.homeDir);
+          if (!active) return;
+          setStats((prev) => {
+            const next = new Map(prev);
+            const cur = next.get(slotKey(slot)) ?? { slot, dashboard: null, billing: null };
+            next.set(slotKey(slot), { ...cur, slot, dashboard });
+            return next;
+          });
+        } catch (e) {
+          if (active) setError(e instanceof Error ? e.message : String(e));
         }
-      } catch (e) {
-        if (active) setError(e instanceof Error ? e.message : String(e));
+      }));
+      if (active) {
+        setError(null);
+        setUpdated(/* @__PURE__ */ new Date());
       }
     };
     load();
@@ -667,7 +672,33 @@ function App({ interval: cliInterval }) {
       active = false;
       clearInterval(id);
     };
-  }, [interval2, tz, config2, activeSlot.id]);
+  }, [interval2, tz, config2, slotIdsKey]);
+  useEffect(() => {
+    if (!config2) return;
+    let active = true;
+    const slotsToLoad = activeSlot.id === null && cfg.accounts.length > 0 ? slots.slice(1) : [activeSlot];
+    const load = async () => {
+      await Promise.all(slotsToLoad.map(async (slot) => {
+        try {
+          const billing = await fetchBilling(slot.homeDir);
+          if (!active) return;
+          setStats((prev) => {
+            const next = new Map(prev);
+            const cur = next.get(slotKey(slot)) ?? { slot, dashboard: null, billing: null };
+            next.set(slotKey(slot), { ...cur, slot, billing });
+            return next;
+          });
+        } catch {
+        }
+      }));
+    };
+    load();
+    const id = setInterval(load, billingMs);
+    return () => {
+      active = false;
+      clearInterval(id);
+    };
+  }, [billingMs, config2, slotIdsKey]);
   useEffect(() => {
     tableLoadedOnce.current = false;
     setTable(null);
@@ -813,6 +844,21 @@ function App({ interval: cliInterval }) {
       activeAccountId: c.activeAccountId === id ? null : c.activeAccountId
     }));
   }
+  function moveAccount(idx, dir) {
+    updateConfig((c) => {
+      const next = [...c.accounts];
+      const target = idx + dir;
+      if (target < 0 || target >= next.length) return c;
+      [next[idx], next[target]] = [next[target], next[idx]];
+      return { ...c, accounts: next };
+    });
+    setSettingsCursor((c) => {
+      const target = c + dir;
+      const min = accountRowsStart;
+      const max = accountRowsStart + cfg.accounts.length - 1;
+      return Math.max(min, Math.min(max, target));
+    });
+  }
   const accountRowsStart = GENERAL_ROWS;
   const totalSettingsRows = GENERAL_ROWS + cfg.accounts.length + 1;
   useInput((input, key) => {
@@ -915,6 +961,12 @@ function App({ interval: cliInterval }) {
         setShowSettings(false);
         return;
       }
+      const accIdxNav = settingsCursor - accountRowsStart;
+      const onAccountRow = accIdxNav >= 0 && accIdxNav < cfg.accounts.length;
+      if (onAccountRow && key.shift && (key.upArrow || key.downArrow)) {
+        moveAccount(accIdxNav, key.upArrow ? -1 : 1);
+        return;
+      }
       if (key.upArrow) {
         setSettingsCursor((c) => Math.max(0, c - 1));
         return;
@@ -1346,7 +1398,7 @@ function SettingsView({
       /* @__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" })
+    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  \u21E7\u2191\u2193 reorder  \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 AccountFormView({ form, accounts }) {
@@ -1525,70 +1577,46 @@ function ColorField({ value, focused }) {
     /* @__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 }
-  ];
+function DashboardView({ slots, stats, compact: _compact }) {
+  const slotKey = (s) => s.id ?? "__default__";
+  const items = slots.map((slot) => ({ slot, s: stats.get(slotKey(slot)) })).filter((x) => !!x.s?.dashboard);
+  if (items.length === 0) return /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Loading..." });
+  const agg = aggregateUsage(items.map((i) => i.s.dashboard));
+  const isMulti = items.length > 1;
   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: slot.color,
+        borderColor: isMulti ? "green" : items[0].slot.color,
         borderRight: false,
         borderTop: false,
         borderBottom: false,
         children: [
-          /* @__PURE__ */ jsx(Text, { bold: true, children: "Usage" }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { bold: true, children: "Claude" }),
+            isMulti && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+              "   all accounts (",
+              items.length,
+              ")"
+            ] }),
+            !isMulti && items[0].slot.id && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "   " }),
+              /* @__PURE__ */ jsx(Text, { color: items[0].slot.color, children: "\u25CF " }),
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: items[0].slot.name })
+            ] })
+          ] }),
           /* @__PURE__ */ jsx(Box, { height: 1 }),
-          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(SummaryRow, { label: "Today", summary: agg.today }),
+          /* @__PURE__ */ jsx(SummaryRow, { label: "This Week", summary: agg.week }),
+          /* @__PURE__ */ jsx(SummaryRow, { label: "This Month", summary: agg.month }),
+          agg.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(dashboard.burnRate) }) }),
+              /* @__PURE__ */ jsx(Box, { width: 12, justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Text, { color: "red", children: currency(agg.burnRate) }) }),
               /* @__PURE__ */ jsx(Text, { dimColor: true, children: "/hr" })
             ] })
           ] })
@@ -1596,166 +1624,137 @@ function SoloAccountCard({ slot, dashboard, billing }) {
       }
     ),
     /* @__PURE__ */ jsx(Box, { height: 1 }),
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        flexDirection: "column",
-        paddingLeft: 1,
-        borderStyle: "bold",
-        borderColor: billing?.error ? "red" : "yellow",
-        borderRight: false,
-        borderTop: false,
-        borderBottom: false,
-        children: [
-          /* @__PURE__ */ jsx(Text, { bold: true, children: "Rate Limits" }),
-          /* @__PURE__ */ jsx(Box, { height: 1 }),
-          billing?.error ? /* @__PURE__ */ jsx(Text, { color: "red", children: billing.error }) : billing?.session || billing?.weekly ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            billing.session && /* @__PURE__ */ jsx(LimitBar, { label: "Session", pct: billing.session.utilization, resets: billing.session.resetsAt }),
-            billing.weekly && /* @__PURE__ */ jsx(LimitBar, { label: "Weekly", pct: billing.weekly.utilization, resets: billing.weekly.resetsAt }),
-            billing.sonnet && /* @__PURE__ */ jsx(LimitBar, { label: "Sonnet", pct: billing.sonnet.utilization, resets: billing.sonnet.resetsAt }),
-            billing.extraUsage && /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Box, { width: 10, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Extra" }) }),
-              /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
-                "$",
-                billing.extraUsage.used.toFixed(2)
-              ] }),
-              /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-                " / $",
-                billing.extraUsage.limit.toFixed(2),
-                " limit"
-              ] })
-            ] })
-          ] }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Fetching..." })
-        ]
-      }
-    )
+    /* @__PURE__ */ jsx(RateLimitsCard, { items })
   ] });
 }
-function DualBarRow({
+function aggregateUsage(list) {
+  const z = {
+    today: { cost: 0, tokens: 0 },
+    week: { cost: 0, tokens: 0 },
+    month: { cost: 0, tokens: 0 },
+    burnRate: 0
+  };
+  for (const d of list) {
+    z.today.cost += d.today.cost;
+    z.today.tokens += d.today.tokens;
+    z.week.cost += d.week.cost;
+    z.week.tokens += d.week.tokens;
+    z.month.cost += d.month.cost;
+    z.month.tokens += d.month.tokens;
+    z.burnRate += d.burnRate;
+  }
+  return z;
+}
+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 RateLimitsCard({ items }) {
+  const anyData = items.some((i) => i.s.billing?.session || i.s.billing?.weekly || i.s.billing?.sonnet);
+  const anyError = items.some((i) => i.s.billing?.error);
+  const borderColor = !anyData && anyError ? "red" : "yellow";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "column",
+      paddingLeft: 1,
+      borderStyle: "bold",
+      borderColor,
+      borderRight: false,
+      borderTop: false,
+      borderBottom: false,
+      children: [
+        /* @__PURE__ */ jsx(Text, { bold: true, children: "Rate Limits" }),
+        /* @__PURE__ */ jsx(Box, { height: 1 }),
+        !anyData ? anyError ? /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: items.map(({ slot, s }) => s.billing?.error && /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Text, { color: slot.color, children: "\u25CF " }),
+          /* @__PURE__ */ jsx(Box, { width: 22, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: truncateName(slot.name, 20) }) }),
+          /* @__PURE__ */ jsx(Text, { color: "red", children: s.billing.error })
+        ] }, slot.id ?? "__default__")) }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Fetching..." }) : /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsx(MetricBlock, { label: "Total Usage", sublabel: "5h session", pick: (b) => b?.session, items, showResets: true }),
+          /* @__PURE__ */ jsx(MetricBlock, { label: "This Week", sublabel: "7-day", pick: (b) => b?.weekly, items, showResets: true }),
+          /* @__PURE__ */ jsx(MetricBlock, { label: "Sonnet", sublabel: "7-day sonnet", pick: (b) => b?.sonnet, items }),
+          items.some((i) => i.s.billing?.extraUsage) && /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+            /* @__PURE__ */ jsx(Text, { bold: true, dimColor: true, children: "Extra Usage" }),
+            items.map(({ slot, s }) => {
+              const e = s.billing?.extraUsage;
+              if (!e) return null;
+              return /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Text, { color: slot.color, children: "\u25CF " }),
+                /* @__PURE__ */ jsx(Box, { width: 22, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: truncateName(slot.name, 20) }) }),
+                /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
+                  "$",
+                  e.used.toFixed(2)
+                ] }),
+                /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+                  " / $",
+                  e.limit.toFixed(2)
+                ] })
+              ] }, slot.id ?? "__default__");
+            })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function MetricBlock({
   label,
-  cost,
-  tokens: tokens2,
-  maxCost,
-  maxTokens,
-  color
+  sublabel,
+  pick,
+  items,
+  showResets
 }) {
-  const W = 18;
-  const c = bar(cost, maxCost, W);
-  const t = bar(tokens2, maxTokens, W);
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [
+  const rows = items.map((i) => ({ slot: i.slot, lim: pick(i.s.billing) ?? null })).filter((r) => r.lim !== null);
+  if (rows.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, 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__ */ jsx(Text, { bold: true, children: label }),
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "  ",
+        sublabel
+      ] })
     ] }),
-    /* @__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 }) => ({
+    rows.map(({ slot, lim }) => /* @__PURE__ */ jsx(
+      AccountLimitBar,
+      {
         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__"))
-    ] })
+        pct: lim.utilization,
+        resets: showResets ? lim.resetsAt : null,
+        showName: items.length > 1
+      },
+      slot.id ?? "__default__"
+    ))
   ] });
 }
-function ComparisonRow({
+function AccountLimitBar({
   slot,
-  cost,
-  tokens: tokens2,
-  maxCost,
-  maxTokens
+  pct,
+  resets,
+  showName
 }) {
-  const W = 22;
-  const c = bar(cost, maxCost, W);
-  const t = bar(tokens2, maxTokens, W);
+  const width = 28;
+  const filled = Math.max(0, Math.min(width, Math.round(pct / 100 * width)));
   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) }) })
+    /* @__PURE__ */ jsx(Text, { color: slot.color, children: "\u25CF " }),
+    showName ? /* @__PURE__ */ jsx(Box, { width: 22, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: truncateName(slot.name, 20) }) }) : /* @__PURE__ */ jsx(Box, { width: 2, children: /* @__PURE__ */ jsx(Text, { children: " " }) }),
+    /* @__PURE__ */ jsx(Text, { color: slot.color, children: "\u2501".repeat(filled) }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(width - filled) }),
+    /* @__PURE__ */ jsx(Text, { children: " " }),
+    /* @__PURE__ */ jsx(Box, { width: 5, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Text, { bold: true, children: [
+      Math.round(pct),
+      "%"
+    ] }) }),
+    resets && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+      "  resets ",
+      resets
+    ] })
   ] });
 }
 function PeakBadge({ peak }) {
@@ -1776,25 +1775,6 @@ function fmtMinutes(mins) {
   const m = mins % 60;
   return m === 0 ? `${h}h` : `${h}h ${m}m`;
 }
-function LimitBar({ label, pct, resets }) {
-  const width = 30;
-  const filled = Math.round(pct / 100 * width);
-  const color = pct >= 80 ? "red" : pct >= 50 ? "yellow" : "green";
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Box, { width: 10, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: label }) }),
-    /* @__PURE__ */ jsx(Text, { color, children: "\u2501".repeat(filled) }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(width - filled) }),
-    /* @__PURE__ */ jsx(Text, { children: " " }),
-    /* @__PURE__ */ jsxs(Text, { bold: true, children: [
-      Math.round(pct),
-      "%"
-    ] }),
-    /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-      "  resets ",
-      resets
-    ] })
-  ] });
-}
 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 };

package/package.json

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