tokmon 0.12.4 → 0.12.5

package/dist/cli.js

@@ -642,13 +642,15 @@ function App({ interval: cliInterval }) {
     });
   }, []);
   const billingMs = cfg.billingInterval * 6e4;
-  const dataSlots = cfg.accounts.length > 0 ? slots.slice(1) : slots;
-  const dataSlotsKey = dataSlots.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 load = async () => {
-      await Promise.all(dataSlots.map(async (slot) => {
+      await Promise.all(dataSlotsRef.current.map(async (slot) => {
         try {
           const dashboard = await fetchDashboard(tz, slot.homeDir);
           if (!active) return;
@@ -673,12 +675,12 @@ function App({ interval: cliInterval }) {
       active = false;
       clearInterval(id);
     };
-  }, [interval2, tz, config2, dataSlotsKey]);
+  }, [interval2, tz, configReady, accountsKey]);
   useEffect(() => {
-    if (!config2) return;
+    if (!configReady) return;
     let active = true;
     const load = async () => {
-      await Promise.all(dataSlots.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, dataSlotsKey]);
+  }, [billingMs, configReady, accountsKey]);
   useEffect(() => {
     tableLoadedOnce.current = false;
     setTable(null);
@@ -1155,14 +1157,13 @@ function App({ interval: cliInterval }) {
         activeAccountId: cfg.activeAccountId
       }
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Box, { marginTop: 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__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           DashboardView,
@@ -1172,9 +1173,9 @@ function App({ interval: cliInterval }) {
             compact: visibleSlots.length > 1
           }
         ),
-        slots.length > 1 && /* @__PURE__ */ jsxs(Box, { marginTop: 1, flexDirection: "column", children: [
-          /* @__PURE__ */ jsx(Text, { bold: true, children: "Accounts" }),
-          /* @__PURE__ */ jsx(Box, { marginTop: 0, children: /* @__PURE__ */ jsx(
+        slots.length > 1 && /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "focus  " }),
+          /* @__PURE__ */ jsx(
             AccountStrip,
             {
               slots,
@@ -1185,7 +1186,7 @@ function App({ interval: cliInterval }) {
                 resetView();
               }
             }
-          ) })
+          )
         ] })
       ] }),
       tab === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1239,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__");
   }) });
 }
@@ -1389,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: [
@@ -1600,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 })
   ] });
 }
@@ -1676,17 +1663,16 @@ 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;
@@ -1713,7 +1699,6 @@ function RateLimitsCard({ items }) {
 }
 function MetricBlock({
   label,
-  sublabel,
   pick,
   items,
   showResets
@@ -1724,14 +1709,8 @@ function MetricBlock({
     error: i.s.billing?.error ?? null
   }));
   if (rows.every((r) => r.lim === null && !r.error)) 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
-      ] })
-    ] }),
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(Text, { bold: true, children: label }),
     rows.map(({ slot, lim, error }) => {
       if (lim) {
         return /* @__PURE__ */ jsx(

package/package.json

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