tokmon 0.5.3 → 0.6.0

package/dist/cli.js

@@ -168,6 +168,17 @@ function groupBy(entries, keyFn) {
       cacheRead += e.cacheRead;
       cost += e.cost;
     }
+    const byModel = /* @__PURE__ */ new Map();
+    for (const e of group) {
+      const name = shortModel(e.model);
+      const m = byModel.get(name) ?? { name, input: 0, output: 0, cacheCreate: 0, cacheRead: 0, cost: 0 };
+      m.input += e.input;
+      m.output += e.output;
+      m.cacheCreate += e.cacheCreate;
+      m.cacheRead += e.cacheRead;
+      m.cost += e.cost;
+      byModel.set(name, m);
+    }
     rows.push({
       label,
       models: models.sort(),
@@ -176,7 +187,8 @@ function groupBy(entries, keyFn) {
       cacheCreate,
       cacheRead,
       total: input + output + cacheCreate + cacheRead,
-      cost
+      cost,
+      breakdown: [...byModel.values()].sort((a, b) => b.cost - a.cost)
     });
   }
   return rows.sort((a, b) => a.label.localeCompare(b.label));
@@ -338,7 +350,8 @@ function App({ interval: cliInterval }) {
   const [updated, setUpdated] = useState(/* @__PURE__ */ new Date());
   const [tab, setTab] = useState(0);
   const [view, setView] = useState(0);
-  const [scroll, setScroll] = useState(0);
+  const [cursor, setCursor] = useState(0);
+  const [expanded, setExpanded] = useState(-1);
   const [showSettings, setShowSettings] = useState(false);
   const [config2, setConfig] = useState(null);
   const [settingsCursor, setSettingsCursor] = useState(0);
@@ -459,56 +472,85 @@ function App({ interval: cliInterval }) {
     }
     if (key.tab) {
       setTab((t) => (t + 1) % TABS.length);
-      setScroll(0);
+      setCursor(0);
+      setExpanded(-1);
       return;
     }
     if (input === "1") {
       setTab(0);
-      setScroll(0);
+      setCursor(0);
+      setExpanded(-1);
       return;
     }
     if (input === "2") {
       setTab(1);
-      setScroll(0);
+      setCursor(0);
+      setExpanded(-1);
       return;
     }
     if (tab === 1) {
       if (input === "d") {
         setView(0);
-        setScroll(0);
+        setCursor(0);
+        setExpanded(-1);
         return;
       }
       if (input === "w") {
         setView(1);
-        setScroll(0);
+        setCursor(0);
+        setExpanded(-1);
         return;
       }
       if (input === "m") {
         setView(2);
-        setScroll(0);
+        setCursor(0);
+        setExpanded(-1);
         return;
       }
       if (key.leftArrow) {
         setView((v) => (v - 1 + VIEWS.length) % VIEWS.length);
-        setScroll(0);
+        setCursor(0);
+        setExpanded(-1);
         return;
       }
       if (key.rightArrow) {
         setView((v) => (v + 1) % VIEWS.length);
-        setScroll(0);
+        setCursor(0);
+        setExpanded(-1);
+        return;
+      }
+      if (key.return) {
+        setExpanded((e) => e === cursor ? -1 : cursor);
+        return;
+      }
+      if (key.escape) {
+        setExpanded(-1);
         return;
       }
     } else {
       if (key.leftArrow || key.rightArrow) {
         setTab((t) => (t + 1) % TABS.length);
-        setScroll(0);
+        setCursor(0);
+        setExpanded(-1);
         return;
       }
     }
-    if (key.upArrow) setScroll((s) => Math.max(0, s - 1));
-    if (key.downArrow) setScroll((s) => s + 1);
-    if (key.pageDown) setScroll((s) => s + Math.max(1, rows - 12));
-    if (key.pageUp) setScroll((s) => Math.max(0, s - Math.max(1, rows - 12)));
+    if (key.upArrow) {
+      setCursor((c) => Math.max(0, c - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setCursor((c) => c + 1);
+      return;
+    }
+    if (key.pageDown) {
+      setCursor((c) => c + Math.max(1, rows - 12));
+      return;
+    }
+    if (key.pageUp) {
+      setCursor((c) => Math.max(0, c - Math.max(1, rows - 12)));
+      return;
+    }
   }, { isActive: isTTY });
   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..." }) });
@@ -538,7 +580,7 @@ function App({ interval: cliInterval }) {
       tab === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(ViewBar, { views: VIEWS, active: view }),
         /* @__PURE__ */ jsx(Box, { height: 1 }),
-        tableLoading && !table ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Loading 6 months of history..." }) : /* @__PURE__ */ jsx(TableView, { rows: tableData, scroll, maxRows: rows - 12, wide: cols > 90 })
+        tableLoading && !table ? /* @__PURE__ */ jsx(Spinner, { label: "Loading 6 months of history" }) : /* @__PURE__ */ jsx(TableView, { rows: tableData, cursor, expanded, maxRows: rows - 12, wide: cols > 90 })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
@@ -701,7 +743,7 @@ function SummaryRow({ label, summary }) {
     ] }) })
   ] });
 }
-function TableView({ rows: allRows, scroll, maxRows, wide }) {
+function TableView({ rows: allRows, cursor, expanded, maxRows, wide }) {
   const W = wide ? { label: 10, models: 18, input: 8, output: 8, cc: 8, cr: 9, total: 9, cost: 10 } : { label: 8, models: 14, input: 7, output: 7, cc: 7, cr: 8, total: 0, cost: 9 };
   const lineW = W.label + W.models + W.input + W.output + W.cc + W.cr + W.total + W.cost;
   const totals = { input: 0, output: 0, cacheCreate: 0, cacheRead: 0, cost: 0 };
@@ -712,12 +754,15 @@ function TableView({ rows: allRows, scroll, maxRows, wide }) {
     totals.cacheRead += r.cacheRead;
     totals.cost += r.cost;
   }
-  const clampedScroll = Math.min(scroll, Math.max(0, allRows.length - maxRows));
-  const visible = allRows.slice(clampedScroll, clampedScroll + maxRows);
-  const more = allRows.length - clampedScroll - maxRows;
+  const clampedCursor = Math.min(cursor, allRows.length - 1);
+  const scrollStart = Math.max(0, Math.min(clampedCursor - Math.floor(maxRows / 2), allRows.length - maxRows));
+  const visible = allRows.slice(scrollStart, scrollStart + maxRows);
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
     /* @__PURE__ */ jsxs(Text, { children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, children: col("Date", W.label, "left") }),
+      /* @__PURE__ */ jsxs(Text, { bold: true, children: [
+        "  ",
+        col("Date", W.label, "left")
+      ] }),
       /* @__PURE__ */ jsx(Text, { bold: true, children: col("Models", W.models, "left") }),
       /* @__PURE__ */ jsx(Text, { bold: true, children: col("Input", W.input) }),
       /* @__PURE__ */ jsx(Text, { bold: true, children: col("Output", W.output) }),
@@ -726,25 +771,34 @@ function TableView({ rows: allRows, scroll, maxRows, wide }) {
       W.total > 0 && /* @__PURE__ */ jsx(Text, { bold: true, children: col("Total", W.total) }),
       /* @__PURE__ */ jsx(Text, { bold: true, children: col("Cost", W.cost) })
     ] }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(lineW) }),
-    visible.map((r) => /* @__PURE__ */ jsxs(Text, { children: [
-      /* @__PURE__ */ jsx(Text, { color: "cyan", children: col(fmtLabel(r.label), W.label, "left") }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: col(r.models.join(", "), W.models, "left") }),
-      /* @__PURE__ */ jsx(Text, { children: col(tokens(r.input), W.input) }),
-      /* @__PURE__ */ jsx(Text, { children: col(tokens(r.output), W.output) }),
-      /* @__PURE__ */ jsx(Text, { children: col(tokens(r.cacheCreate), W.cc) }),
-      /* @__PURE__ */ jsx(Text, { children: col(tokens(r.cacheRead), W.cr) }),
-      W.total > 0 && /* @__PURE__ */ jsx(Text, { children: col(tokens(r.total), W.total) }),
-      /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: col(currency(r.cost), W.cost) })
-    ] }, r.label)),
-    more > 0 && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-      "  \u2193 ",
-      more,
-      " more"
-    ] }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(lineW) }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(lineW + 2) }),
+    visible.map((r, vi) => {
+      const idx = scrollStart + vi;
+      const selected = idx === clampedCursor;
+      const isExpanded = idx === expanded;
+      return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs(Text, { inverse: selected, children: [
+          /* @__PURE__ */ jsxs(Text, { color: selected ? void 0 : "cyan", children: [
+            selected ? "\u25B8 " : "  ",
+            col(fmtLabel(r.label), W.label, "left")
+          ] }),
+          /* @__PURE__ */ jsx(Text, { dimColor: !selected, children: col(r.models.join(", "), W.models, "left") }),
+          /* @__PURE__ */ jsx(Text, { children: col(tokens(r.input), W.input) }),
+          /* @__PURE__ */ jsx(Text, { children: col(tokens(r.output), W.output) }),
+          /* @__PURE__ */ jsx(Text, { children: col(tokens(r.cacheCreate), W.cc) }),
+          /* @__PURE__ */ jsx(Text, { children: col(tokens(r.cacheRead), W.cr) }),
+          W.total > 0 && /* @__PURE__ */ jsx(Text, { children: col(tokens(r.total), W.total) }),
+          /* @__PURE__ */ jsx(Text, { bold: true, color: selected ? void 0 : "yellow", children: col(currency(r.cost), W.cost) })
+        ] }),
+        isExpanded && /* @__PURE__ */ jsx(RowDetail, { row: r, indent: W.label + 2 })
+      ] }, r.label);
+    }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(lineW + 2) }),
     /* @__PURE__ */ jsxs(Text, { children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, color: "greenBright", children: col("Total", W.label, "left") }),
+      /* @__PURE__ */ jsxs(Text, { bold: true, color: "greenBright", children: [
+        "  ",
+        col("Total", W.label, "left")
+      ] }),
       /* @__PURE__ */ jsx(Text, { children: col("", W.models, "left") }),
       /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: col(tokens(totals.input), W.input) }),
       /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: col(tokens(totals.output), W.output) }),
@@ -754,15 +808,61 @@ function TableView({ rows: allRows, scroll, maxRows, wide }) {
       /* @__PURE__ */ jsx(Text, { bold: true, color: "yellowBright", children: col(currency(totals.cost), W.cost) })
     ] }),
     /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-      "\u2191\u2193 PgUp/Dn scroll  \xB7  ",
+      "\u2191\u2193 navigate  Enter=detail  Esc=close  \xB7  ",
       allRows.length,
       " rows  \xB7  ",
-      clampedScroll + 1,
-      "-",
-      Math.min(clampedScroll + maxRows, allRows.length)
+      clampedCursor + 1,
+      "/",
+      allRows.length
     ] }) })
   ] });
 }
+function RowDetail({ row, indent }) {
+  const pad = " ".repeat(indent);
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", paddingLeft: indent, marginY: 0, children: row.breakdown.map((m, i) => {
+    const last = i === row.breakdown.length - 1;
+    const prefix = last ? "\u2514\u2500" : "\u251C\u2500";
+    return /* @__PURE__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        prefix,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { bold: true, children: col(m.name, 16, "left") }),
+      /* @__PURE__ */ jsxs(Text, { children: [
+        col(tokens(m.input), 8),
+        " in  "
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { children: [
+        col(tokens(m.output), 8),
+        " out  "
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { children: [
+        col(tokens(m.cacheCreate), 8),
+        " cc  "
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { children: [
+        col(tokens(m.cacheRead), 9),
+        " cr  "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: currency(m.cost) })
+    ] }, m.name);
+  }) });
+}
+function Spinner({ label }) {
+  const frames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+  const [i, setI] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setI((n) => (n + 1) % frames.length), 80);
+    return () => clearInterval(id);
+  }, []);
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Text, { color: "green", children: [
+      frames[i],
+      " "
+    ] }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: label })
+  ] });
+}
 function fmtLabel(label) {
   if (label.length === 10 && label[4] === "-") return shortDate(label);
   if (label.length === 7 && label[4] === "-") {

package/package.json

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