tokmon 0.8.0 → 0.8.2

package/dist/cli.js

@@ -2,7 +2,7 @@
 
 // src/cli.tsx
 import { render } from "ink";
-import { MouseProvider as MouseProvider2 } from "@zenobius/ink-mouse";
+import { MouseProvider } from "@zenobius/ink-mouse";
 
 // src/config.ts
 import { readFile, writeFile, mkdir } from "fs/promises";
@@ -37,7 +37,7 @@ async function saveConfig(config2) {
 // src/app.tsx
 import { useState, useEffect, useCallback, useRef } from "react";
 import { Box, Text, useInput, useStdout, useApp } from "ink";
-import { useMouse } from "@zenobius/ink-mouse";
+import { useMouse, useOnMouseClick } from "@zenobius/ink-mouse";
 
 // src/data.ts
 import { readdir, stat as fsStat } from "fs/promises";
@@ -585,7 +585,7 @@ function App({ interval: cliInterval }) {
   if (!dashboard) return /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Loading..." }) });
   const rawTableData = table ? [table.daily, table.weekly, table.monthly][view] : [];
   const tableData = sortRows(rawTableData, sort);
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, minHeight: rows, children: [
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, height: rows, children: [
     /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsxs(Text, { bold: true, color: "greenBright", children: [
@@ -593,7 +593,7 @@ function App({ interval: cliInterval }) {
           " tokmon"
         ] }),
         /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-          "  \xB7  ",
+          "  \xB7  every ",
           cliInterval ? cliInterval / 1e3 : cfg.interval,
           "s"
         ] })
@@ -602,15 +602,34 @@ function App({ interval: cliInterval }) {
     ] }),
     showSettings ? /* @__PURE__ */ jsx(SettingsView, { config: cfg, cursor: settingsCursor }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
-        /* @__PURE__ */ jsx(TabBar, { tabs: TABS, active: tab }),
+        /* @__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, { data: dashboard, billing }),
       tab === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ViewBar, { views: VIEWS, active: view, sort: SORTS[sort] }),
+        /* @__PURE__ */ jsx(ViewBar, { views: VIEWS, active: view, sort: SORTS[sort], onSelect: (i) => {
+          setView(i);
+          resetView();
+        } }),
         /* @__PURE__ */ jsx(Box, { height: 1 }),
-        tableLoading && !table ? /* @__PURE__ */ jsx(Spinner, { label: "Loading 6 months of history" }) : /* @__PURE__ */ jsx(TableView, { rows: tableData, cursor, expanded, 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,
+            onRowClick: (idx) => {
+              if (idx === cursor) setExpanded((e) => e === idx ? -1 : idx);
+              else setCursor(idx);
+            }
+          }
+        )
       ] })
     ] }),
     (tab === 0 || showSettings) && /* @__PURE__ */ jsx(Footer, {})
@@ -625,8 +644,8 @@ function Footer() {
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: ")  \xB7  s=settings  q=quit" })
   ] });
 }
-function TabBar({ tabs, active }) {
-  return /* @__PURE__ */ jsx(Box, { children: tabs.map((t, i) => /* @__PURE__ */ jsx(Box, { marginRight: 1, children: i === active ? /* @__PURE__ */ jsxs(Text, { bold: true, inverse: true, children: [
+function TabBar({ tabs, active, onSelect }) {
+  return /* @__PURE__ */ jsx(Box, { children: tabs.map((t, i) => /* @__PURE__ */ jsx(ClickableBox, { onClick: () => onSelect(i), marginRight: 1, children: i === active ? /* @__PURE__ */ jsxs(Text, { bold: true, inverse: true, children: [
     " ",
     t,
     " "
@@ -636,14 +655,14 @@ function TabBar({ tabs, active }) {
     " "
   ] }) }, t)) });
 }
-function ViewBar({ views, active, sort }) {
+function ViewBar({ views, active, sort, onSelect }) {
   return /* @__PURE__ */ jsxs(Box, { children: [
-    views.map((v, i) => /* @__PURE__ */ jsx(Box, { marginRight: 2, children: i === active ? /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
+    views.map((v, i) => /* @__PURE__ */ jsx(ClickableBox, { onClick: () => onSelect(i), marginRight: 2, children: i === active ? /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
       "[",
       v,
       "]"
     ] }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: v }) }, v)),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  d/w/m  \xB7  sort: " }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  sort: " }),
     /* @__PURE__ */ jsx(Text, { bold: true, color: "magenta", children: sort }),
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  o=cycle" })
   ] });
@@ -794,7 +813,7 @@ function SummaryRow({ label, summary }) {
     ] }) })
   ] });
 }
-function TableView({ rows: allRows, cursor, expanded, maxRows, wide }) {
+function TableView({ rows: allRows, cursor, expanded, maxRows, wide, onRowClick }) {
   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 };
@@ -828,7 +847,7 @@ function TableView({ rows: allRows, cursor, expanded, maxRows, wide }) {
       const selected = idx === clampedCursor;
       const isExpanded = idx === expanded;
       return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsxs(Text, { inverse: selected, children: [
+        /* @__PURE__ */ jsx(ClickableBox, { onClick: () => onRowClick(idx), 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")
@@ -840,7 +859,7 @@ function TableView({ rows: allRows, cursor, expanded, maxRows, wide }) {
           /* @__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);
     }),
@@ -920,6 +939,13 @@ function fmtLabel(label) {
   }
   return shortDate(label);
 }
+function ClickableBox({ onClick, children, ...props }) {
+  const ref = useRef(null);
+  useOnMouseClick(ref, (clicked) => {
+    if (clicked) onClick();
+  });
+  return /* @__PURE__ */ jsx(Box, { ref, ...props, children });
+}
 
 // src/cli.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -949,5 +975,5 @@ var config = await loadConfig();
 if (config.clearScreen && process.stdout.isTTY) {
   process.stdout.write("\x1B[2J\x1B[H");
 }
-var { waitUntilExit } = render(/* @__PURE__ */ jsx2(MouseProvider2, { children: /* @__PURE__ */ jsx2(App, { interval }) }));
+var { waitUntilExit } = render(/* @__PURE__ */ jsx2(MouseProvider, { children: /* @__PURE__ */ jsx2(App, { interval }) }));
 await waitUntilExit();

package/package.json

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