tokmon 0.6.1 → 0.8.0

package/README.md

@@ -35,57 +35,86 @@ Then just run `tokmon`. Press `q` to quit.
 
 ## Keybindings
 
+### Global
+
 | Key | Action |
 |-----|--------|
-| `Tab` / `←→` | Switch between Dashboard and Table |
-| `1` `2` | Jump to view |
-| `d` `w` `m` | Daily / Weekly / Monthly (in Table view) |
-| `↑` `↓` | Scroll table |
-| `PgUp` `PgDn` | Scroll table fast |
-| `s` | Settings |
+| `Tab` | Cycle between Dashboard and Table |
+| `1` `2` | Jump to Dashboard / Table |
+| `s` | Open settings |
 | `q` | Quit |
 
+### Table View
+
+| Key | Action |
+|-----|--------|
+| `d` `w` `m` | Switch to Daily / Weekly / Monthly |
+| `←` `→` | Cycle sub-view |
+| `↑` `↓` | Move cursor / navigate rows |
+| `Enter` | Expand row — per-model cost breakdown |
+| `Esc` | Collapse expanded row |
+| `o` | Cycle sort: date ↑, date ↓, cost ↑, cost ↓ |
+| `g` | Jump to top |
+| `G` | Jump to bottom |
+| `PgUp` `PgDn` | Page scroll |
+
+### Settings
+
+| Key | Action |
+|-----|--------|
+| `↑` `↓` | Select option |
+| `←` `→` | Adjust value |
+| `s` / `Esc` | Close |
+
 ## Views
 
-| View | Description |
-|------|-------------|
-| **Dashboard** | Today / week / month cost summaries, burn rate ($/hr), real-time rate limits with reset countdowns |
-| **Table → Daily** | Per-day breakdown with models, tokens, and costs (6 months of history) |
-| **Table → Weekly** | Grouped by ISO week |
-| **Table → Monthly** | Grouped by month |
+### Dashboard
+
+- **Today / This Week / This Month** — cost and token summaries
+- **Burn rate** — current $/hr
+- **Rate Limits** — real-time session (5h), weekly (7d), and Sonnet utilization with reset countdowns, fetched from Anthropic's OAuth API
 
-## Rate Limits
+### Table
 
-Fetches real billing data from Anthropic's OAuth API (reads your token from macOS Keychain automatically). Shows:
+Interactive table with 3 sub-views:
 
-- **Session** — 5-hour utilization with reset countdown
-- **Weekly** — 7-day utilization with reset countdown
-- **Sonnet** — Sonnet-specific limits (if applicable)
-- **Extra usage** — spend vs monthly limit
+- **Daily** — per-day breakdown (6 months of history)
+- **Weekly** — grouped by ISO week
+- **Monthly** — grouped by month
 
-Polls every 2 minutes to stay within API rate limits.
+Each row shows models used, input/output/cache tokens, and cost. Press `Enter` on any row to expand a per-model breakdown:
+
+```
+▸ Apr  7  haiku-4-5, op~  7.6K 487.0K  10.1M    1.1B  $603.89
+          ├─ opus-4-6          7.5K    485.0K    10.0M      1.1B  $601.50
+          └─ haiku-4-5          100     2.0K     100K      5.0M    $2.39
+```
+
+Sort by date or cost with `o`.
 
 ## Settings
 
-Press `s` to open settings. Persisted to `~/.config/tokmon/config.json` (macOS/Linux) or `%APPDATA%\tokmon\config.json` (Windows).
+Press `s` to open. Persisted to `~/.config/tokmon/config.json` (macOS/Linux) or `%APPDATA%\tokmon\config.json` (Windows).
 
-- **Refresh interval** — adjust with `←→`
-- **Clear screen** — on/off toggle
+- **Refresh interval** — adjust with `←` `→`
+- **Clear screen** — clears terminal on launch (like `watch`)
 
 ## How It Works
 
-Reads Claude Code's JSONL session logs directly from `~/.claude/projects/`. Calculates costs using Claude model pricing (Opus, Sonnet, Haiku). Caches file reads by mtime so refreshes are near-instant.
-
-Dashboard loads current month only (fast). Table loads 6 months lazily on first switch.
+- Reads Claude Code's JSONL session logs from `~/.claude/projects/`
+- Calculates costs using Claude model pricing (Opus, Sonnet, Haiku)
+- Caches file reads by mtime — subsequent refreshes are near-instant
+- Dashboard loads current month only (fast). Table loads 6 months lazily.
+- Rate limits fetched from Anthropic OAuth API every 2 minutes (token from macOS Keychain)
 
-Cross-platform: supports macOS, Linux, and Windows (`%APPDATA%`, `XDG_CONFIG_HOME`, `CLAUDE_CONFIG_DIR`).
+Cross-platform: macOS, Linux, Windows.
 
 ## CI/CD
 
-Publishes to npm via GitHub Actions on version tags:
+Publishes to npm and GitHub Packages via GitHub Actions on version tags:
 
 ```bash
-git tag v0.5.0 && git push --tags
+git tag v0.7.0 && git push --tags
 ```
 
 ## Requirements

package/dist/cli.js

@@ -2,6 +2,7 @@
 
 // src/cli.tsx
 import { render } from "ink";
+import { MouseProvider as MouseProvider2 } from "@zenobius/ink-mouse";
 
 // src/config.ts
 import { readFile, writeFile, mkdir } from "fs/promises";
@@ -15,12 +16,12 @@ function configDir() {
   const xdg = process.env.XDG_CONFIG_HOME ?? join(homedir(), ".config");
   return join(xdg, "tokmon");
 }
-function configPath() {
+function configLocation() {
   return join(configDir(), "config.json");
 }
 async function loadConfig() {
   try {
-    const raw = await readFile(configPath(), "utf-8");
+    const raw = await readFile(configLocation(), "utf-8");
     const parsed = JSON.parse(raw);
     return { ...DEFAULTS, ...parsed };
   } catch {
@@ -30,15 +31,13 @@ async function loadConfig() {
 async function saveConfig(config2) {
   const dir = configDir();
   await mkdir(dir, { recursive: true });
-  await writeFile(configPath(), JSON.stringify(config2, null, 2) + "\n");
-}
-function configLocation() {
-  return configPath();
+  await writeFile(configLocation(), JSON.stringify(config2, null, 2) + "\n");
 }
 
 // src/app.tsx
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { Box, Text, useInput, useStdout, useApp } from "ink";
+import { useMouse } from "@zenobius/ink-mouse";
 
 // src/data.ts
 import { readdir, stat as fsStat } from "fs/promises";
@@ -82,7 +81,7 @@ function costOf(model, u) {
   return (u.input_tokens ?? 0) * p.i + (u.output_tokens ?? 0) * p.o + (u.cache_creation_input_tokens ?? 0) * p.cc + (u.cache_read_input_tokens ?? 0) * p.cr;
 }
 function shortModel(model) {
-  return model.replace("claude-", "").replace("-20251001", "").replace("-20250514", "").replace("-20251101", "").replace("-20250805", "");
+  return model.replace("claude-", "").replace(/-\d{8}$/, "");
 }
 async function parseFile(path, since) {
   const entries = [];
@@ -110,7 +109,7 @@ async function parseFile(path, since) {
   return entries;
 }
 async function loadEntries(since) {
-  const all = [];
+  const chunks = [];
   const seen = /* @__PURE__ */ new Set();
   for (const dir of getClaudeDirs()) {
     let listing;
@@ -129,17 +128,17 @@ async function loadEntries(since) {
         if (s.mtimeMs < since) return;
         const cached = fileCache.get(path);
         if (cached && cached.mtimeMs === s.mtimeMs) {
-          all.push(...cached.data);
+          chunks.push(cached.data);
           return;
         }
         const data = await parseFile(path, since);
         fileCache.set(path, { mtimeMs: s.mtimeMs, data });
-        all.push(...data);
+        chunks.push(data);
       } catch {
       }
     }));
   }
-  return all;
+  return chunks.flat();
 }
 function sum(entries) {
   let cost = 0, tokens2 = 0;
@@ -159,29 +158,36 @@ function groupBy(entries, keyFn) {
   }
   const rows = [];
   for (const [label, group] of groups) {
-    const models = [...new Set(group.map((e) => shortModel(e.model)))];
     let input = 0, output = 0, cacheCreate = 0, cacheRead = 0, cost = 0;
+    const byModel = /* @__PURE__ */ new Map();
     for (const e of group) {
       input += e.input;
       output += e.output;
       cacheCreate += e.cacheCreate;
       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);
+      const m = byModel.get(name);
+      if (m) {
+        m.input += e.input;
+        m.output += e.output;
+        m.cacheCreate += e.cacheCreate;
+        m.cacheRead += e.cacheRead;
+        m.cost += e.cost;
+      } else {
+        byModel.set(name, {
+          name,
+          input: e.input,
+          output: e.output,
+          cacheCreate: e.cacheCreate,
+          cacheRead: e.cacheRead,
+          cost: e.cost
+        });
+      }
     }
     rows.push({
       label,
-      models: models.sort(),
+      models: [...byModel.keys()].sort(),
       input,
       output,
       cacheCreate,
@@ -215,9 +221,14 @@ async function fetchDashboard() {
   const todayEntries = entries.filter((e) => e.ts >= todayStart);
   let burnRate = 0;
   if (todayEntries.length > 0) {
-    const oldest = Math.min(...todayEntries.map((e) => e.ts));
+    let oldest = todayEntries[0].ts;
+    let totalCost = 0;
+    for (const e of todayEntries) {
+      if (e.ts < oldest) oldest = e.ts;
+      totalCost += e.cost;
+    }
     const hrs = (now - oldest) / 36e5;
-    if (hrs > 0) burnRate = todayEntries.reduce((s, e) => s + e.cost, 0) / hrs;
+    if (hrs > 0) burnRate = totalCost / hrs;
   }
   return {
     today: sum(todayEntries),
@@ -258,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: {
@@ -270,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 ? {
@@ -288,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) {
@@ -326,10 +341,10 @@ function time(date) {
     second: "2-digit"
   });
 }
+var SHORT_MONTHS = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 function shortDate(iso) {
   const [, m, d] = iso.split("-");
-  const months = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-  return `${months[Number(m)]} ${Number(d).toString().padStart(2, " ")}`;
+  return `${SHORT_MONTHS[Number(m)]} ${Number(d).toString().padStart(2, " ")}`;
 }
 function col(s, w, align = "right") {
   if (s.length > w) return s.slice(0, w - 1) + "~";
@@ -341,6 +356,11 @@ function col(s, w, align = "right") {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var TABS = ["Dashboard", "Table"];
 var VIEWS = ["Daily", "Weekly", "Monthly"];
+var SORTS = ["date \u2191", "date \u2193", "cost \u2191", "cost \u2193"];
+var SPINNER_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+var MONTHS = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var DEFAULT_CONFIG = { interval: 2, clearScreen: true };
+var IS_TTY = process.stdin.isTTY === true;
 function App({ interval: cliInterval }) {
   const [dashboard, setDashboard] = useState(null);
   const [billing, setBilling] = useState(null);
@@ -352,6 +372,7 @@ function App({ interval: cliInterval }) {
   const [view, setView] = useState(0);
   const [cursor, setCursor] = useState(0);
   const [expanded, setExpanded] = useState(-1);
+  const [sort, setSort] = useState(0);
   const [showSettings, setShowSettings] = useState(false);
   const [config2, setConfig] = useState(null);
   const [settingsCursor, setSettingsCursor] = useState(0);
@@ -361,7 +382,7 @@ function App({ interval: cliInterval }) {
   const rows = stdout?.rows ?? 24;
   const cols = stdout?.columns ?? 80;
   const interval2 = cliInterval ?? (config2?.interval ?? 2) * 1e3;
-  const cfg = config2 ?? { interval: 2, clearScreen: true };
+  const cfg = config2 ?? DEFAULT_CONFIG;
   useEffect(() => {
     loadConfig().then((c) => {
       if (cliInterval) c = { ...c, interval: cliInterval / 1e3 };
@@ -392,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();
@@ -435,30 +456,35 @@ function App({ interval: cliInterval }) {
       clearInterval(id);
     };
   }, [tab, interval2]);
-  const isTTY = process.stdin.isTTY === true;
+  const resetView = useCallback(() => {
+    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);
       if (key.upArrow) setSettingsCursor((c) => Math.max(0, c - 1));
       if (key.downArrow) setSettingsCursor((c) => Math.min(1, c + 1));
       if (settingsCursor === 0) {
-        if (key.leftArrow) setConfig((c) => {
-          const n = { ...c, interval: Math.max(1, c.interval - 1) };
-          saveConfig(n);
-          return n;
-        });
-        if (key.rightArrow) setConfig((c) => {
-          const n = { ...c, interval: c.interval + 1 };
-          saveConfig(n);
-          return n;
-        });
+        if (key.leftArrow) updateConfig((c) => ({ ...c, interval: Math.max(1, c.interval - 1) }));
+        if (key.rightArrow) updateConfig((c) => ({ ...c, interval: c.interval + 1 }));
       }
       if (settingsCursor === 1 && (key.leftArrow || key.rightArrow || key.return)) {
-        setConfig((c) => {
-          const n = { ...c, clearScreen: !c.clearScreen };
-          saveConfig(n);
-          return n;
-        });
+        updateConfig((c) => ({ ...c, clearScreen: !c.clearScreen }));
       }
       return;
     }
@@ -472,51 +498,48 @@ function App({ interval: cliInterval }) {
     }
     if (key.tab) {
       setTab((t) => (t + 1) % TABS.length);
-      setCursor(0);
-      setExpanded(-1);
+      resetView();
       return;
     }
     if (input === "1") {
       setTab(0);
-      setCursor(0);
-      setExpanded(-1);
+      resetView();
       return;
     }
     if (input === "2") {
       setTab(1);
-      setCursor(0);
-      setExpanded(-1);
+      resetView();
       return;
     }
     if (tab === 1) {
       if (input === "d") {
         setView(0);
-        setCursor(0);
-        setExpanded(-1);
+        resetView();
         return;
       }
       if (input === "w") {
         setView(1);
-        setCursor(0);
-        setExpanded(-1);
+        resetView();
         return;
       }
       if (input === "m") {
         setView(2);
-        setCursor(0);
-        setExpanded(-1);
+        resetView();
         return;
       }
       if (key.leftArrow) {
         setView((v) => (v - 1 + VIEWS.length) % VIEWS.length);
-        setCursor(0);
-        setExpanded(-1);
+        resetView();
         return;
       }
       if (key.rightArrow) {
         setView((v) => (v + 1) % VIEWS.length);
-        setCursor(0);
-        setExpanded(-1);
+        resetView();
+        return;
+      }
+      if (input === "o") {
+        setSort((s) => (s + 1) % SORTS.length);
+        resetView();
         return;
       }
       if (key.return) {
@@ -530,8 +553,7 @@ function App({ interval: cliInterval }) {
     } else {
       if (key.leftArrow || key.rightArrow) {
         setTab((t) => (t + 1) % TABS.length);
-        setCursor(0);
-        setExpanded(-1);
+        resetView();
         return;
       }
     }
@@ -551,10 +573,18 @@ function App({ interval: cliInterval }) {
       setCursor((c) => input === "g" ? 0 : Math.max(0, c - Math.max(1, rows - 12)));
       return;
     }
-  }, { isActive: isTTY });
+  }, { isActive: IS_TTY });
+  function updateConfig(fn) {
+    setConfig((prev) => {
+      const next = fn(prev ?? DEFAULT_CONFIG);
+      saveConfig(next);
+      return next;
+    });
+  }
   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..." }) });
-  const tableData = table ? [table.daily, table.weekly, table.monthly][view] : [];
+  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: [
     /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsxs(Box, { children: [
@@ -578,18 +608,21 @@ function App({ interval: cliInterval }) {
       /* @__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 }),
+        /* @__PURE__ */ jsx(ViewBar, { views: VIEWS, active: view, sort: SORTS[sort] }),
         /* @__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 })
       ] })
     ] }),
-    (tab === 0 || showSettings) && /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "by " }),
-      /* @__PURE__ */ jsx(Text, { children: "David Ilie" }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: " (" }),
-      /* @__PURE__ */ jsx(Text, { color: "cyan", children: "davidilie.com" }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: ")  \xB7  s=settings  q=quit" })
-    ] })
+    (tab === 0 || showSettings) && /* @__PURE__ */ jsx(Footer, {})
+  ] });
+}
+function Footer() {
+  return /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "by " }),
+    /* @__PURE__ */ jsx(Text, { children: "David Ilie" }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: " (" }),
+    /* @__PURE__ */ jsx(Text, { color: "cyan", children: "davidilie.com" }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: ")  \xB7  s=settings  q=quit" })
   ] });
 }
 function TabBar({ tabs, active }) {
@@ -603,16 +636,34 @@ function TabBar({ tabs, active }) {
     " "
   ] }) }, t)) });
 }
-function ViewBar({ views, active }) {
+function ViewBar({ views, active, sort }) {
   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: [
       "[",
       v,
       "]"
     ] }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: v }) }, v)),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  d/w/m or \u2190\u2192" })
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  d/w/m  \xB7  sort: " }),
+    /* @__PURE__ */ jsx(Text, { bold: true, color: "magenta", children: sort }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  o=cycle" })
   ] });
 }
+function sortRows(rows, sortIdx) {
+  if (rows.length === 0) return rows;
+  const sorted = [...rows];
+  switch (sortIdx) {
+    case 0:
+      return sorted.sort((a, b) => a.label.localeCompare(b.label));
+    case 1:
+      return sorted.sort((a, b) => b.label.localeCompare(a.label));
+    case 2:
+      return sorted.sort((a, b) => a.cost - b.cost);
+    case 3:
+      return sorted.sort((a, b) => b.cost - a.cost);
+    default:
+      return sorted;
+  }
+}
 function SettingsView({ config: config2, cursor }) {
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
     /* @__PURE__ */ jsx(Text, { bold: true, children: "Settings" }),
@@ -678,21 +729,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 }),
@@ -708,10 +759,10 @@ function DashboardView({ data, billing }) {
                 " limit"
               ] })
             ] })
-          ]
-        }
-      )
-    ] })
+          ] }) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Fetching..." })
+        ]
+      }
+    )
   ] });
 }
 function LimitBar({ label, pct, resets }) {
@@ -809,26 +860,18 @@ function TableView({ rows: allRows, cursor, expanded, maxRows, wide }) {
     ] }),
     /* @__PURE__ */ jsx(Box, { height: 1 }),
     /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-      "\u2191\u2193 navigate  \xB7  Enter detail  \xB7  g top  G bottom  \xB7  ",
+      "\u2191\u2193 navigate  \xB7  Enter detail  \xB7  o sort  \xB7  g/G top/bottom  \xB7  ",
       clampedCursor + 1,
       "/",
       allRows.length
     ] }),
     /* @__PURE__ */ jsx(Box, { height: 1 }),
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "by " }),
-      /* @__PURE__ */ jsx(Text, { children: "David Ilie" }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: " (" }),
-      /* @__PURE__ */ jsx(Text, { color: "cyan", children: "davidilie.com" }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: ")  \xB7  s=settings  q=quit" })
-    ] })
+    /* @__PURE__ */ jsx(Footer, {})
   ] });
 }
 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";
+    const prefix = i === row.breakdown.length - 1 ? "\u2514\u2500" : "\u251C\u2500";
     return /* @__PURE__ */ jsxs(Text, { children: [
       /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
         prefix,
@@ -856,15 +899,14 @@ function RowDetail({ row, indent }) {
   }) });
 }
 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);
+    const id = setInterval(() => setI((n) => (n + 1) % SPINNER_FRAMES.length), 80);
     return () => clearInterval(id);
   }, []);
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsxs(Text, { color: "green", children: [
-      frames[i],
+      SPINNER_FRAMES[i],
       " "
     ] }),
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: label })
@@ -873,9 +915,8 @@ function Spinner({ label }) {
 function fmtLabel(label) {
   if (label.length === 10 && label[4] === "-") return shortDate(label);
   if (label.length === 7 && label[4] === "-") {
-    const [, m] = label.split("-");
-    const months = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-    return `${months[Number(m)]} '${label.slice(2, 4)}`;
+    const m = label.slice(5, 7);
+    return `${MONTHS[Number(m)]} '${label.slice(2, 4)}`;
   }
   return shortDate(label);
 }
@@ -908,5 +949,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(MouseProvider2, { children: /* @__PURE__ */ jsx2(App, { interval }) }));
 await waitUntilExit();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokmon",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Terminal dashboard for Claude Code usage and costs",
   "type": "module",
   "bin": {
@@ -14,10 +14,12 @@
     "dev": "tsx src/cli.tsx"
   },
   "dependencies": {
+    "@zenobius/ink-mouse": "^1.0.3",
     "ink": "^5.0.0",
     "react": "^18.0.0"
   },
   "devDependencies": {
+    "@types/node": "^25.5.2",
     "@types/react": "^18.0.0",
     "tsup": "^8.0.0",
     "tsx": "^4.0.0",