tokmon 0.12.0 → 0.12.1

package/dist/cli.js

@@ -988,14 +988,12 @@ function App({ interval: cliInterval }) {
       resetView();
       return;
     }
-    if (input === "1") {
-      setTab(0);
-      resetView();
-      return;
-    }
-    if (input === "2") {
-      setTab(1);
-      resetView();
+    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) {
@@ -1165,7 +1163,7 @@ function Footer({ hasAccounts }) {
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: " (" }),
     /* @__PURE__ */ jsx(Text, { color: "cyan", children: "davidilie.com" }),
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: ")  \xB7  s=settings  " }),
-    hasAccounts && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "a/A=cycle account  " }),
+    hasAccounts && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "0-9=jump  a/A=cycle  " }),
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: "q=quit" })
   ] });
 }
@@ -1181,28 +1179,17 @@ function TabBar({ tabs, active, onSelect }) {
   ] }) }, t)) });
 }
 function AccountStrip({ slots, activeIdx, onSelect }) {
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "account  " }),
-    slots.map((s, i) => {
-      const active = i === activeIdx;
-      const dot = s.id === null ? "\u2726" : "\u25CF";
-      return /* @__PURE__ */ jsx(ClickableBox, { onClick: () => onSelect(i), marginRight: 2, children: active ? /* @__PURE__ */ jsxs(Text, { bold: true, color: s.color, children: [
-        /* @__PURE__ */ jsxs(Text, { children: [
-          dot,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs(Text, { inverse: true, children: [
-          " ",
-          s.name,
-          " "
-        ] })
-      ] }) : /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-        dot,
-        " ",
-        s.name
-      ] }) }, s.id ?? "__all__");
-    })
-  ] });
+  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: [
@@ -1539,34 +1526,38 @@ function ColorField({ value, focused }) {
   ] });
 }
 function DashboardView({ slots, stats, compact }) {
-  const slotKey = (s) => s.id ?? "__default__";
-  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: slots.map((slot, i) => {
-    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..." })
-      ] }, slotKey(slot));
-    }
-    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx(
-        AccountCard,
-        {
-          slot,
-          dashboard: s.dashboard,
-          billing: s.billing,
-          compact
-        }
-      ),
-      i < slots.length - 1 && /* @__PURE__ */ jsx(Box, { height: 1 })
-    ] }, slotKey(slot));
-  }) });
-}
-function AccountCard({ slot, dashboard, billing, 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: [
@@ -1574,81 +1565,199 @@ function AccountCard({ slot, dashboard, billing, compact }) {
         slot.name
       ] }),
       slot.id && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-        "  ",
+        "   ",
         slot.id
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(Box, { flexDirection: compact ? "row" : "column", marginTop: compact ? 0 : 0, children: [
-      /* @__PURE__ */ jsxs(
-        Box,
-        {
-          flexDirection: "column",
-          paddingLeft: 1,
-          marginRight: compact ? 2 : 0,
-          borderStyle: "bold",
-          borderColor: slot.color,
-          borderRight: false,
-          borderTop: false,
-          borderBottom: false,
-          children: [
-            /* @__PURE__ */ jsx(Text, { bold: true, children: "Usage" }),
-            !compact && /* @__PURE__ */ jsx(Box, { height: 1 }),
-            /* @__PURE__ */ jsx(SummaryRow, { label: "Today", summary: dashboard.today, compact }),
-            /* @__PURE__ */ jsx(SummaryRow, { label: compact ? "Week" : "This Week", summary: dashboard.week, compact }),
-            /* @__PURE__ */ jsx(SummaryRow, { label: compact ? "Month" : "This Month", summary: dashboard.month, compact }),
-            dashboard.burnRate > 0 && !compact && /* @__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(Text, { dimColor: true, children: "/hr" })
-              ] })
-            ] }),
-            dashboard.burnRate > 0 && compact && /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Box, { width: 10, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Burn" }) }),
-              /* @__PURE__ */ jsx(Text, { color: "red", children: currency(dashboard.burnRate) }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        marginTop: 1,
+        paddingLeft: 1,
+        borderStyle: "bold",
+        borderColor: slot.color,
+        borderRight: false,
+        borderTop: false,
+        borderBottom: false,
+        children: [
+          /* @__PURE__ */ jsx(Text, { bold: true, children: "Usage" }),
+          /* @__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(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(Text, { dimColor: true, children: "/hr" })
             ] })
-          ]
-        }
-      ),
-      !compact && /* @__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" }),
-            !compact && /* @__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, compact }),
-              billing.weekly && /* @__PURE__ */ jsx(LimitBar, { label: "Weekly", pct: billing.weekly.utilization, resets: billing.weekly.resetsAt, compact }),
-              billing.sonnet && /* @__PURE__ */ jsx(LimitBar, { label: "Sonnet", pct: billing.sonnet.utilization, resets: billing.sonnet.resetsAt, compact }),
-              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(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(Text, { dimColor: true, children: "Fetching..." })
+        ]
+      }
+    )
+  ] });
+}
+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: [
@@ -1667,8 +1776,8 @@ function fmtMinutes(mins) {
   const m = mins % 60;
   return m === 0 ? `${h}h` : `${h}h ${m}m`;
 }
-function LimitBar({ label, pct, resets, compact }) {
-  const width = compact ? 16 : 30;
+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: [
@@ -1680,32 +1789,12 @@ function LimitBar({ label, pct, resets, compact }) {
       Math.round(pct),
       "%"
     ] }),
-    !compact && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+    /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
       "  resets ",
       resets
     ] })
   ] });
 }
-function SummaryRow({ label, summary, compact }) {
-  if (compact) {
-    return /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Box, { width: 10, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: label }) }),
-      /* @__PURE__ */ jsx(Box, { width: 10, justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: currency(summary.cost) }) }),
-      /* @__PURE__ */ jsx(Box, { width: 14, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-        tokens(summary.tokens),
-        " tk"
-      ] }) })
-    ] });
-  }
-  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 };

package/package.json

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