tokmon 0.4.0 → 0.5.1

package/README.md

@@ -1,30 +1,33 @@
 # tokmon
 
-Terminal dashboard for Claude Code usage and costs. Tabbed interface with auto-refresh.
+Terminal dashboard for Claude Code usage, costs, and rate limits.
 
 Built with [Ink](https://github.com/vadimdemedes/ink), TypeScript.
 
 ```
-  ◉ tokmon  ·  2s                                              01:17:09 AM
+  ◉ tokmon  ·  2s                                    02:48:39 AM
 
-   Dashboard   Daily    ←→ or 1-2
+   Dashboard   Table    Tab/←→
 
   ┃ Claude
   ┃
-  ┃ Today              $166.10     252.7M tokens
-  ┃ This Week          $399.79     608.2M tokens
-  ┃ This Month        $1337.03       2.2B tokens
-
-  ┃ Active Block  12m remaining
+  ┃ Today              $372.55     614.9M tokens
+  ┃ This Week          $606.23     970.5M tokens
+  ┃ This Month        $1543.48       2.5B tokens
   ┃
-  ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─ 96%
+  ┃ Burn rate          $132.65/hr
+
+  ┃ Rate Limits
   ┃
-  ┃ $314.37 spent  ·  ~$328.01 proj  ·  $65.60/hr
+  ┃ Session   ━━━━────────────────────────── 13%  resets 4h 11m
+  ┃ Weekly    ━━━━━━━━━━━━━───────────────── 44%  resets 17h 11m
+  ┃ Sonnet    ━───────────────────────────── 3%  resets 2d 20h
+  ┃ Extra     $0.00 / $42.50 limit
 
   ──────────────────────────────────────────────────
-  Total $1337.03
+  Total $1543.48
 
-  by David Ilie (davidilie.com)
+  by David Ilie (davidilie.com)  ·  s=settings  q=quit
 ```
 
 ## Quick Start
@@ -45,7 +48,7 @@ pnpm dlx tokmon
 npm install -g tokmon
 ```
 
-Then just run `tokmon`. Press `Ctrl+C` to exit.
+Then just run `tokmon`. Press `q` to quit.
 
 ## Options
 
@@ -54,45 +57,65 @@ Then just run `tokmon`. Press `Ctrl+C` to exit.
 -h, --help                Show help
 ```
 
-```bash
-tokmon -i 5    # refresh every 5 seconds
-```
+## Keybindings
 
-## Views
+| 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 |
+| `q` | Quit |
 
-Navigate between views with `←` `→` arrow keys, `Tab`, or number keys `1` `2`.
+## Views
 
 | View | Description |
 |------|-------------|
-| **Dashboard** | Today / week / month cost summaries, active 5-hour block with burn rate |
-| **Daily** | Per-day breakdown table with model, token, and cost columns (scrollable with `↑` `↓`) |
+| **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 |
+
+## Rate Limits
+
+Fetches real billing data from Anthropic's OAuth API (reads your token from macOS Keychain automatically). Shows:
+
+- **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
+
+Polls every 2 minutes to stay within API rate limits.
+
+## Settings
+
+Press `s` to open settings. Persisted to `~/.config/tokmon/config.json` (macOS/Linux) or `%APPDATA%\tokmon\config.json` (Windows).
+
+- **Refresh interval** — adjust with `←→`
+- **Clear screen** — on/off toggle
 
 ## 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 subsequent refreshes are near-instant.
+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.
 
 Cross-platform: supports macOS, Linux, and Windows (`%APPDATA%`, `XDG_CONFIG_HOME`, `CLAUDE_CONFIG_DIR`).
 
 ## CI/CD
 
-Publishes to npm automatically via GitHub Actions when a version tag is pushed:
+Publishes to npm via GitHub Actions on version tags:
 
 ```bash
-git tag v0.2.0 && git push --tags
+git tag v0.5.0 && git push --tags
 ```
 
 ## Requirements
 
 - Node.js 20+
-- [Claude Code](https://docs.anthropic.com/en/docs/claude-code) (generates usage data in `~/.claude/projects/`)
-
-## Tech Stack
-
-| Tool | Purpose |
-|------|---------|
-| Ink 5 | React terminal UI |
-| TypeScript 5.7+ | Strict mode |
-| tsup | Build |
+- [Claude Code](https://docs.anthropic.com/en/docs/claude-code)
 
 ## Author
 

package/dist/cli.js

@@ -46,41 +46,6 @@ import { createReadStream } from "fs";
 import { createInterface } from "readline";
 import { join as join2 } from "path";
 import { homedir as homedir2 } from "os";
-
-// src/format.ts
-function currency(value) {
-  return `$${value.toFixed(2)}`;
-}
-function tokens(value) {
-  if (value >= 1e9) return `${(value / 1e9).toFixed(1)}B`;
-  if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
-  if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
-  return String(value);
-}
-function time(date) {
-  return date.toLocaleTimeString(void 0, {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  });
-}
-function minutes(mins) {
-  const h = Math.floor(mins / 60);
-  const m = Math.round(mins % 60);
-  return h > 0 ? `${h}h ${m}m` : `${m}m`;
-}
-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, " ")}`;
-}
-function col(s, w, align = "right") {
-  if (s.length > w) return s.slice(0, w - 1) + "~";
-  const spaces = " ".repeat(w - s.length);
-  return align === "right" ? spaces + s : s + spaces;
-}
-
-// src/data.ts
 var PRICING = {
   "claude-opus-4": { i: 5e-6, o: 25e-6, cc: 625e-8, cr: 5e-7 },
   "claude-sonnet-4": { i: 3e-6, o: 15e-6, cc: 375e-8, cr: 3e-7 },
@@ -227,47 +192,26 @@ function isoWeekLabel(ts) {
 function monthLabel(ts) {
   return new Date(ts).toISOString().slice(0, 7);
 }
-function findBlockStart(entries, now) {
-  const recent = entries.filter((e) => e.ts <= now).sort((a, b) => a.ts - b.ts);
-  if (recent.length === 0) return 0;
-  const GAP = 30 * 6e4;
-  let blockStart = recent[0].ts;
-  for (let i = 1; i < recent.length; i++) {
-    if (recent[i].ts - recent[i - 1].ts > GAP) {
-      blockStart = recent[i].ts;
-    }
-  }
-  if (now - blockStart > 5 * 36e5) return 0;
-  return blockStart;
-}
 async function fetchDashboard() {
-  const now = Date.now();
   const d = /* @__PURE__ */ new Date();
   const monthStart = new Date(d.getFullYear(), d.getMonth(), 1).getTime();
   const todayStart = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
   const weekDay = d.getDay();
   const weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate() - (weekDay === 0 ? 6 : weekDay - 1)).getTime();
+  const now = Date.now();
   const entries = await loadEntries(monthStart);
-  let block = null;
-  const blockStart = findBlockStart(entries, now);
-  if (blockStart > 0) {
-    const blockEnd = blockStart + 5 * 36e5;
-    const blockEntries = entries.filter((e) => e.ts >= blockStart && e.ts < blockEnd);
-    if (blockEntries.length > 0) {
-      const spent = blockEntries.reduce((s, e) => s + e.cost, 0);
-      const elapsedMs = now - blockStart;
-      const elapsedHrs = elapsedMs / 36e5;
-      const burnRate = elapsedHrs > 0 ? spent / elapsedHrs : 0;
-      const remainMs = Math.max(0, blockEnd - now);
-      const percent = Math.min(100, elapsedMs / (5 * 36e5) * 100);
-      block = { spent, projected: burnRate * 5, burnRate, percent, remaining: minutes(remainMs / 6e4) };
-    }
+  const todayEntries = entries.filter((e) => e.ts >= todayStart);
+  let burnRate = 0;
+  if (todayEntries.length > 0) {
+    const oldest = Math.min(...todayEntries.map((e) => e.ts));
+    const hrs = (now - oldest) / 36e5;
+    if (hrs > 0) burnRate = todayEntries.reduce((s, e) => s + e.cost, 0) / hrs;
   }
   return {
-    today: sum(entries.filter((e) => e.ts >= todayStart)),
+    today: sum(todayEntries),
     week: sum(entries.filter((e) => e.ts >= weekStart)),
     month: sum(entries.filter((e) => e.ts >= monthStart)),
-    block
+    burnRate
   };
 }
 async function fetchTable() {
@@ -281,12 +225,113 @@ async function fetchTable() {
   };
 }
 
+// src/billing.ts
+import { execFile as execFileCb } from "child_process";
+import { promisify } from "util";
+var execFile = promisify(execFileCb);
+async function getAccessToken() {
+  if (process.platform === "darwin") {
+    try {
+      const { stdout } = await execFile("security", [
+        "find-generic-password",
+        "-s",
+        "Claude Code-credentials",
+        "-w"
+      ], { timeout: 5e3 });
+      const creds = JSON.parse(stdout.trim());
+      return creds?.claudeAiOauth?.accessToken ?? null;
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+async function fetchBilling() {
+  const token = await getAccessToken();
+  if (!token) return null;
+  try {
+    const res = await fetch("https://api.anthropic.com/api/oauth/usage", {
+      headers: {
+        "Authorization": `Bearer ${token}`,
+        "anthropic-beta": "oauth-2025-04-20",
+        "User-Agent": "tokmon"
+      },
+      signal: AbortSignal.timeout(1e4)
+    });
+    if (!res.ok) return null;
+    const data = await res.json();
+    return {
+      session: data.five_hour ? {
+        utilization: data.five_hour.utilization,
+        resetsAt: formatReset(data.five_hour.resets_at)
+      } : null,
+      weekly: data.seven_day ? {
+        utilization: data.seven_day.utilization,
+        resetsAt: formatReset(data.seven_day.resets_at)
+      } : null,
+      sonnet: data.seven_day_sonnet ? {
+        utilization: data.seven_day_sonnet.utilization,
+        resetsAt: formatReset(data.seven_day_sonnet.resets_at)
+      } : null,
+      extraUsage: data.extra_usage?.is_enabled ? {
+        limit: data.extra_usage.monthly_limit / 100,
+        used: data.extra_usage.used_credits / 100
+      } : null
+    };
+  } catch {
+    return null;
+  }
+}
+function formatReset(iso) {
+  const d = new Date(iso);
+  const now = /* @__PURE__ */ new Date();
+  const diff = d.getTime() - now.getTime();
+  if (diff <= 0) return "now";
+  const mins = Math.round(diff / 6e4);
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  const m = mins % 60;
+  if (hrs < 24) return `${hrs}h ${m}m`;
+  const days = Math.floor(hrs / 24);
+  const h = hrs % 24;
+  return `${days}d ${h}h`;
+}
+
+// src/format.ts
+function currency(value) {
+  return `$${value.toFixed(2)}`;
+}
+function tokens(value) {
+  if (value >= 1e9) return `${(value / 1e9).toFixed(1)}B`;
+  if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+  if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+  return String(value);
+}
+function time(date) {
+  return date.toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+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, " ")}`;
+}
+function col(s, w, align = "right") {
+  if (s.length > w) return s.slice(0, w - 1) + "~";
+  const spaces = " ".repeat(w - s.length);
+  return align === "right" ? spaces + s : s + spaces;
+}
+
 // src/app.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var TABS = ["Dashboard", "Table"];
 var VIEWS = ["Daily", "Weekly", "Monthly"];
 function App({ interval: cliInterval }) {
   const [dashboard, setDashboard] = useState(null);
+  const [billing, setBilling] = useState(null);
   const [table, setTable] = useState(null);
   const [tableLoading, setTableLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -299,9 +344,11 @@ function App({ interval: cliInterval }) {
   const [settingsCursor, setSettingsCursor] = useState(0);
   const tableLoadedOnce = useRef(false);
   const { stdout } = useStdout();
+  const { exit } = useApp();
   const rows = stdout?.rows ?? 24;
   const cols = stdout?.columns ?? 80;
   const interval2 = cliInterval ?? (config2?.interval ?? 2) * 1e3;
+  const cfg = config2 ?? { interval: 2, clearScreen: true };
   useEffect(() => {
     loadConfig().then((c) => {
       if (cliInterval) c = { ...c, interval: cliInterval / 1e3 };
@@ -329,6 +376,19 @@ function App({ interval: cliInterval }) {
       clearInterval(id);
     };
   }, [interval2]);
+  useEffect(() => {
+    let active = true;
+    const load = () => fetchBilling().then((b) => {
+      if (active && b) setBilling(b);
+    }).catch(() => {
+    });
+    load();
+    const id = setInterval(load, 12e4);
+    return () => {
+      active = false;
+      clearInterval(id);
+    };
+  }, []);
   useEffect(() => {
     if (tab !== 1) return;
     if (tableLoadedOnce.current && table) return;
@@ -362,36 +422,29 @@ function App({ interval: cliInterval }) {
       clearInterval(id);
     };
   }, [tab, interval2]);
-  const { exit } = useApp();
   const isTTY = process.stdin.isTTY === true;
-  const settingsItems = 2;
-  const cfg = config2 ?? { interval: 2, clearScreen: true };
   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(settingsItems - 1, c + 1));
+      if (key.downArrow) setSettingsCursor((c) => Math.min(1, c + 1));
       if (settingsCursor === 0) {
-        if (key.leftArrow) {
-          setConfig((c) => {
-            const next = { ...c, interval: Math.max(1, c.interval - 1) };
-            saveConfig(next);
-            return next;
-          });
-        }
-        if (key.rightArrow) {
-          setConfig((c) => {
-            const next = { ...c, interval: c.interval + 1 };
-            saveConfig(next);
-            return next;
-          });
-        }
+        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 (settingsCursor === 1 && (key.leftArrow || key.rightArrow || key.return)) {
         setConfig((c) => {
-          const next = { ...c, clearScreen: !c.clearScreen };
-          saveConfig(next);
-          return next;
+          const n = { ...c, clearScreen: !c.clearScreen };
+          saveConfig(n);
+          return n;
         });
       }
       return;
@@ -481,7 +534,7 @@ function App({ interval: cliInterval }) {
         /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  Tab/\u2190\u2192" })
       ] }),
       /* @__PURE__ */ jsx(Box, { height: 1 }),
-      tab === 0 && /* @__PURE__ */ jsx(DashboardView, { data: dashboard }),
+      tab === 0 && /* @__PURE__ */ jsx(DashboardView, { data: dashboard, billing }),
       tab === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(ViewBar, { views: VIEWS, active: view }),
         /* @__PURE__ */ jsx(Box, { height: 1 }),
@@ -493,8 +546,7 @@ function App({ interval: cliInterval }) {
       /* @__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  " }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "s=settings  q=quit" })
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: ")  \xB7  s=settings  q=quit" })
     ] })
   ] });
 }
@@ -555,7 +607,7 @@ function SettingsView({ config: config2, cursor }) {
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191\u2193 select  \u2190\u2192 adjust  s/Esc close" })
   ] });
 }
-function DashboardView({ data }) {
+function DashboardView({ data, billing }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       Box,
@@ -572,13 +624,51 @@ function DashboardView({ data }) {
           /* @__PURE__ */ jsx(Box, { height: 1 }),
           /* @__PURE__ */ jsx(SummaryRow, { label: "Today", summary: data.today }),
           /* @__PURE__ */ jsx(SummaryRow, { label: "This Week", summary: data.week }),
-          /* @__PURE__ */ jsx(SummaryRow, { label: "This Month", summary: data.month })
+          /* @__PURE__ */ jsx(SummaryRow, { label: "This Month", summary: data.month }),
+          data.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(data.burnRate) }) }),
+              /* @__PURE__ */ jsx(Text, { dimColor: true, children: "/hr" })
+            ] })
+          ] })
         ]
       }
     ),
-    data.block && /* @__PURE__ */ jsxs(Fragment, { children: [
+    billing && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Box, { height: 1 }),
-      /* @__PURE__ */ jsx(BlockView, { block: data.block })
+      /* @__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 }),
+            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(Box, { height: 1 }),
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(50) }),
@@ -588,46 +678,24 @@ function DashboardView({ data }) {
     ] })
   ] });
 }
-function BlockView({ block }) {
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      flexDirection: "column",
-      paddingLeft: 1,
-      borderStyle: "bold",
-      borderColor: "yellow",
-      borderRight: false,
-      borderTop: false,
-      borderBottom: false,
-      children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Text, { bold: true, children: "Active Block" }),
-          /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-            "  ",
-            block.remaining,
-            " remaining"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(Box, { height: 1 }),
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(ProgressBar, { percent: block.percent, width: 36 }),
-          /* @__PURE__ */ jsx(Text, { children: " " }),
-          /* @__PURE__ */ jsxs(Text, { bold: true, children: [
-            Math.round(block.percent),
-            "%"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
-          /* @__PURE__ */ jsx(Text, { color: "yellow", children: currency(block.spent) }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " spent  \xB7  ~" }),
-          /* @__PURE__ */ jsx(Text, { children: currency(block.projected) }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " proj  \xB7  " }),
-          /* @__PURE__ */ jsx(Text, { color: "red", children: currency(block.burnRate) }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "/hr" })
-        ] })
-      ]
-    }
-  );
+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: [
+    /* @__PURE__ */ jsx(Box, { width: 10, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: label }) }),
+    /* @__PURE__ */ jsx(Text, { color, children: "\u2501".repeat(filled) }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(width - filled) }),
+    /* @__PURE__ */ jsx(Text, { children: " " }),
+    /* @__PURE__ */ jsxs(Text, { bold: true, children: [
+      Math.round(pct),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+      "  resets ",
+      resets
+    ] })
+  ] });
 }
 function SummaryRow({ label, summary }) {
   return /* @__PURE__ */ jsxs(Box, { children: [
@@ -639,13 +707,6 @@ function SummaryRow({ label, summary }) {
     ] }) })
   ] });
 }
-function ProgressBar({ percent, width = 36 }) {
-  const filled = Math.round(percent / 100 * width);
-  return /* @__PURE__ */ jsxs(Text, { children: [
-    /* @__PURE__ */ jsx(Text, { color: "greenBright", children: "\u2501".repeat(filled) }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(width - filled) })
-  ] });
-}
 function TableView({ rows: allRows, scroll, 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;

package/package.json

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