tokmon 0.12.3 → 0.12.5

package/dist/cli.js

@@ -484,8 +484,9 @@ async function fetchUsage(token) {
           resetsAt: formatReset(data.seven_day_sonnet.resets_at)
         } : null,
         extraUsage: data.extra_usage?.is_enabled ? {
-          limit: data.extra_usage.monthly_limit / 100,
-          used: data.extra_usage.used_credits / 100
+          limit: data.extra_usage.monthly_limit != null ? data.extra_usage.monthly_limit / 100 : null,
+          used: (data.extra_usage.used_credits ?? 0) / 100,
+          currency: data.extra_usage.currency ?? "USD"
         } : null
       }
     };
@@ -641,13 +642,15 @@ function App({ interval: cliInterval }) {
     });
   }, []);
   const billingMs = cfg.billingInterval * 6e4;
-  const slotIdsKey = (activeSlot.id === null && cfg.accounts.length > 0 ? slots.slice(1) : [activeSlot]).map((s) => s.id ?? "__default__").join(",");
+  const configReady = config2 !== null;
+  const accountsKey = cfg.accounts.map((a) => `${a.id}:${a.homeDir}`).join("|");
+  const dataSlotsRef = useRef([]);
+  dataSlotsRef.current = cfg.accounts.length > 0 ? slots.slice(1) : slots;
   useEffect(() => {
-    if (!config2) return;
+    if (!configReady) 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) => {
+      await Promise.all(dataSlotsRef.current.map(async (slot) => {
         try {
           const dashboard = await fetchDashboard(tz, slot.homeDir);
           if (!active) return;
@@ -672,13 +675,12 @@ function App({ interval: cliInterval }) {
       active = false;
       clearInterval(id);
     };
-  }, [interval2, tz, config2, slotIdsKey]);
+  }, [interval2, tz, configReady, accountsKey]);
   useEffect(() => {
-    if (!config2) return;
+    if (!configReady) 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) => {
+      await Promise.all(dataSlotsRef.current.map(async (slot) => {
         try {
           const billing = await fetchBilling(slot.homeDir);
           if (!active) return;
@@ -698,7 +700,7 @@ function App({ interval: cliInterval }) {
       active = false;
       clearInterval(id);
     };
-  }, [billingMs, config2, slotIdsKey]);
+  }, [billingMs, configReady, accountsKey]);
   useEffect(() => {
     tableLoadedOnce.current = false;
     setTable(null);
@@ -1155,34 +1157,38 @@ function App({ interval: cliInterval }) {
         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__ */ jsxs(Box, { marginTop: 1, marginBottom: 1, children: [
         /* @__PURE__ */ jsx(TabBar, { tabs: TABS, active: tab, onSelect: (i) => {
           setTab(i);
           resetView();
         } }),
         /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  Tab/\u2190\u2192" })
       ] }),
-      /* @__PURE__ */ jsx(Box, { height: 1 }),
-      tab === 0 && /* @__PURE__ */ jsx(
-        DashboardView,
-        {
-          slots: visibleSlots,
-          stats,
-          compact: visibleSlots.length > 1
-        }
-      ),
+      tab === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          DashboardView,
+          {
+            slots: visibleSlots,
+            stats,
+            compact: visibleSlots.length > 1
+          }
+        ),
+        slots.length > 1 && /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "focus  " }),
+          /* @__PURE__ */ jsx(
+            AccountStrip,
+            {
+              slots,
+              activeIdx: activeSlotIdx,
+              onSelect: (i) => {
+                const id = slots[i].id;
+                updateConfig((c) => ({ ...c, activeAccountId: id }));
+                resetView();
+              }
+            }
+          )
+        ] })
+      ] }),
       tab === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(ViewBar, { views: VIEWS, active: view, sort: SORTS[sort], onSelect: (i) => {
           setView(i);
@@ -1234,12 +1240,13 @@ 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";
+    const label = truncateName(s.name, 16);
     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 })
+      active ? /* @__PURE__ */ jsx(Text, { bold: true, color: s.color, children: label }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: label })
     ] }, s.id ?? "__all__");
   }) });
 }
@@ -1384,9 +1391,11 @@ function SettingsView({
           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 })
+        /* @__PURE__ */ jsx(Text, { bold: true, children: truncateName(acc.name, 24) }),
+        /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+          "  ",
+          truncateName(acc.homeDir, 28)
+        ] })
       ] }, acc.id);
     }),
     /* @__PURE__ */ jsxs(Box, { children: [
@@ -1595,35 +1604,18 @@ function DashboardView({ slots, stats, compact: _compact }) {
         borderTop: false,
         borderBottom: false,
         children: [
-          /* @__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 }),
+          /* @__PURE__ */ jsx(Text, { bold: true, children: "Claude" }),
           /* @__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(agg.burnRate) }) }),
-              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "/hr" })
-            ] })
+          agg.burnRate > 0 && /* @__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(agg.burnRate) }) }),
+            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "/hr" })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Box, { height: 1 }),
     /* @__PURE__ */ jsx(RateLimitsCard, { items })
   ] });
 }
@@ -1671,31 +1663,32 @@ function RateLimitsCard({ items }) {
       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" }),
+          /* @__PURE__ */ jsx(MetricBlock, { label: "5h", pick: (b) => b?.session, items, showResets: true }),
+          /* @__PURE__ */ jsx(MetricBlock, { label: "Week", pick: (b) => b?.weekly, items, showResets: true }),
+          /* @__PURE__ */ jsx(MetricBlock, { label: "Sonnet", pick: (b) => b?.sonnet, items }),
+          items.some((i) => i.s.billing?.extraUsage) && /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsx(Text, { bold: true, dimColor: true, children: "Extra" }),
             items.map(({ slot, s }) => {
               const e = s.billing?.extraUsage;
               if (!e) return null;
+              const sym = e.currency === "EUR" ? "\u20AC" : "$";
               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: [
-                  "$",
+                  sym,
                   e.used.toFixed(2)
                 ] }),
-                /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-                  " / $",
+                e.limit != null ? /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+                  " / ",
+                  sym,
                   e.limit.toFixed(2)
-                ] })
+                ] }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: " used" })
               ] }, slot.id ?? "__default__");
             })
           ] })
@@ -1706,31 +1699,37 @@ function RateLimitsCard({ items }) {
 }
 function MetricBlock({
   label,
-  sublabel,
   pick,
   items,
   showResets
 }) {
-  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(Text, { bold: true, children: label }),
-      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-        "  ",
-        sublabel
-      ] })
-    ] }),
-    rows.map(({ slot, lim }) => /* @__PURE__ */ jsx(
-      AccountLimitBar,
-      {
-        slot,
-        pct: lim.utilization,
-        resets: showResets ? lim.resetsAt : null,
-        showName: items.length > 1
-      },
-      slot.id ?? "__default__"
-    ))
+  const rows = items.map((i) => ({
+    slot: i.slot,
+    lim: pick(i.s.billing) ?? null,
+    error: i.s.billing?.error ?? null
+  }));
+  if (rows.every((r) => r.lim === null && !r.error)) return null;
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(Text, { bold: true, children: label }),
+    rows.map(({ slot, lim, error }) => {
+      if (lim) {
+        return /* @__PURE__ */ jsx(
+          AccountLimitBar,
+          {
+            slot,
+            pct: lim.utilization,
+            resets: showResets ? lim.resetsAt : null,
+            showName: items.length > 1
+          },
+          slot.id ?? "__default__"
+        );
+      }
+      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__ */ jsx(Text, { color: error ? "red" : void 0, dimColor: !error, children: error ?? "no data" })
+      ] }, slot.id ?? "__default__");
+    })
   ] });
 }
 function AccountLimitBar({

package/package.json

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