tokmon 0.7.0 → 0.8.1

package/dist/cli.js

@@ -2,6 +2,7 @@
 
 // src/cli.tsx
 import { render } from "ink";
+import { MouseProvider } from "@zenobius/ink-mouse";
 
 // src/config.ts
 import { readFile, writeFile, mkdir } from "fs/promises";
@@ -36,6 +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, useOnMouseClick } from "@zenobius/ink-mouse";
 
 // src/data.ts
 import { readdir, stat as fsStat } from "fs/promises";
@@ -267,9 +269,10 @@ async function getAccessToken() {
   }
   return null;
 }
+var EMPTY = { session: null, weekly: null, sonnet: null, extraUsage: null, error: null };
 async function fetchBilling() {
   const token = await getAccessToken();
-  if (!token) return null;
+  if (!token) return { ...EMPTY, error: "No OAuth token found (macOS Keychain)" };
   try {
     const res = await fetch("https://api.anthropic.com/api/oauth/usage", {
       headers: {
@@ -279,7 +282,9 @@ async function fetchBilling() {
       },
       signal: AbortSignal.timeout(1e4)
     });
-    if (!res.ok) return null;
+    if (res.status === 429) return { ...EMPTY, error: "Rate limited \u2014 retrying in 2m" };
+    if (res.status === 401) return { ...EMPTY, error: "Token expired \u2014 restart Claude Code" };
+    if (!res.ok) return { ...EMPTY, error: `API ${res.status}` };
     const data = await res.json();
     return {
       session: data.five_hour ? {
@@ -297,10 +302,11 @@ async function fetchBilling() {
       extraUsage: data.extra_usage?.is_enabled ? {
         limit: data.extra_usage.monthly_limit / 100,
         used: data.extra_usage.used_credits / 100
-      } : null
+      } : null,
+      error: null
     };
   } catch {
-    return null;
+    return { ...EMPTY, error: "Network error" };
   }
 }
 function formatReset(iso) {
@@ -407,7 +413,7 @@ function App({ interval: cliInterval }) {
   useEffect(() => {
     let active = true;
     const load = () => fetchBilling().then((b) => {
-      if (active && b) setBilling(b);
+      if (active) setBilling(b);
     }).catch(() => {
     });
     load();
@@ -454,6 +460,20 @@ function App({ interval: cliInterval }) {
     setCursor(0);
     setExpanded(-1);
   }, []);
+  const mouse = useMouse();
+  useEffect(() => {
+    if (!IS_TTY) return;
+    mouse.enable();
+    const onScroll = (_pos, dir) => {
+      if (tab === 1) {
+        setCursor((c) => dir === "scrollup" ? Math.max(0, c - 3) : c + 3);
+      }
+    };
+    mouse.events.on("scroll", onScroll);
+    return () => {
+      mouse.events.off("scroll", onScroll);
+    };
+  }, [tab]);
   useInput((input, key) => {
     if (showSettings) {
       if (key.escape || input === "s") setShowSettings(false);
@@ -582,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, {})
@@ -605,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,
     " "
@@ -616,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" })
   ] });
@@ -709,21 +748,21 @@ function DashboardView({ data, billing }) {
         ]
       }
     ),
-    billing && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { height: 1 }),
-      /* @__PURE__ */ jsxs(
-        Box,
-        {
-          flexDirection: "column",
-          paddingLeft: 1,
-          borderStyle: "bold",
-          borderColor: "yellow",
-          borderRight: false,
-          borderTop: false,
-          borderBottom: false,
-          children: [
-            /* @__PURE__ */ jsx(Text, { bold: true, children: "Rate Limits" }),
-            /* @__PURE__ */ jsx(Box, { height: 1 }),
+    /* @__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 }),
@@ -739,10 +778,10 @@ function DashboardView({ data, billing }) {
                 " limit"
               ] })
             ] })
-          ]
-        }
-      )
-    ] })
+          ] }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Fetching..." })
+        ]
+      }
+    )
   ] });
 }
 function LimitBar({ label, pct, resets }) {
@@ -774,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 };
@@ -808,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")
@@ -820,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);
     }),
@@ -900,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";
@@ -929,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(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.7.0",
+  "version": "0.8.1",
   "description": "Terminal dashboard for Claude Code usage and costs",
   "type": "module",
   "bin": {
@@ -14,6 +14,7 @@
     "dev": "tsx src/cli.tsx"
   },
   "dependencies": {
+    "@zenobius/ink-mouse": "^1.0.3",
     "ink": "^5.0.0",
     "react": "^18.0.0"
   },