tokmon 0.1.0 → 0.3.0

package/README.md

@@ -1,52 +1,86 @@
 # tokmon
 
-Terminal dashboard for Claude Code usage and costs. Refreshes every 2 seconds like `watch`.
+Terminal dashboard for Claude Code usage and costs. Tabbed interface with auto-refresh.
 
 Built with [Ink](https://github.com/vadimdemedes/ink), TypeScript.
 
 ```
-  ◉ tokmon  ·  refreshing every 2s
+  ◉ tokmon  ·  2s                                              01:17:09 AM
+
+   Dashboard   Daily    ←→ or 1-2
 
   ┃ Claude
   ┃
-  ┃ Today              $122.78     179.9M tokens
-  ┃ This Week          $356.47     535.4M tokens
-  ┃ This Month        $1293.71       2.1B tokens
+  ┃ Today              $166.10     252.7M tokens
+  ┃ This Week          $399.79     608.2M tokens
+  ┃ This Month        $1337.03       2.2B tokens
 
-  ┃ Active Block  35m remaining
+  ┃ Active Block  12m remaining
   ┃
-  ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━──── 88%
+  ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─ 96%
   ┃
-  ┃ $271.05 spent  ·  ~$306.63 proj  ·  $61.33/hr
+  ┃ $314.37 spent  ·  ~$328.01 proj  ·  $65.60/hr
 
   ──────────────────────────────────────────────────
-  Total $1293.71                         12:54:49 AM
+  Total $1337.03
+
+  by David Ilie (davidilie.com)
+```
+
+## Quick Start
+
+```bash
+npx tokmon
+```
+
+Or with pnpm:
+
+```bash
+pnpm dlx tokmon
 ```
 
-## Install
+### Global Install
 
 ```bash
 npm install -g tokmon
 ```
 
-## Usage
+Then just run `tokmon`. Press `Ctrl+C` to exit.
+
+## Options
+
+```
+-i, --interval <seconds>  Refresh interval in seconds (default: 2)
+-h, --help                Show help
+```
 
 ```bash
-tokmon
+tokmon -i 5    # refresh every 5 seconds
 ```
 
-Press `Ctrl+C` to exit.
+## Views
 
-## What It Shows
+Navigate between views with `←` `→` arrow keys, `Tab`, or number keys `1` `2`.
 
-- **Today / This Week / This Month** — cost and token totals from Claude Code JSONL logs
-- **Active Block** — current 5-hour window with burn rate, projected cost, and time remaining
-- Auto-refreshes every 2 seconds with mtime-based file caching
+| 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 `↑` `↓`) |
 
 ## 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.
 
+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:
+
+```bash
+git tag v0.2.0 && git push --tags
+```
+
 ## Requirements
 
 - Node.js 20+

package/dist/cli.js

@@ -5,7 +5,7 @@ import { render } from "ink";
 
 // src/app.tsx
 import { useState, useEffect } from "react";
-import { Box, Text } from "ink";
+import { Box, Text, useInput, useStdout } from "ink";
 
 // src/data.ts
 import { readdir, stat as fsStat } from "fs/promises";
@@ -36,6 +36,16 @@ function minutes(mins) {
   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 = {
@@ -73,6 +83,9 @@ function costOf(model, u) {
   const p = priceFor(model);
   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", "");
+}
 async function parseFile(path, since) {
   const entries = [];
   const rl = createInterface({ input: createReadStream(path), crlfDelay: Infinity });
@@ -86,8 +99,12 @@ async function parseFile(path, since) {
       const u = obj.message.usage;
       entries.push({
         ts,
+        model: obj.message.model ?? "unknown",
         cost: costOf(obj.message.model ?? "", u),
-        tokens: (u.input_tokens ?? 0) + (u.output_tokens ?? 0) + (u.cache_creation_input_tokens ?? 0) + (u.cache_read_input_tokens ?? 0)
+        input: u.input_tokens ?? 0,
+        output: u.output_tokens ?? 0,
+        cacheCreate: u.cache_creation_input_tokens ?? 0,
+        cacheRead: u.cache_read_input_tokens ?? 0
       });
     } catch {
     }
@@ -130,18 +147,62 @@ function sum(entries) {
   let cost = 0, tokens2 = 0;
   for (const e of entries) {
     cost += e.cost;
-    tokens2 += e.tokens;
+    tokens2 += e.input + e.output + e.cacheCreate + e.cacheRead;
   }
   return { cost, tokens: tokens2 };
 }
-async function fetchUsage() {
+function groupBy(entries, keyFn) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const e of entries) {
+    const key = keyFn(e);
+    const arr = groups.get(key);
+    if (arr) arr.push(e);
+    else groups.set(key, [e]);
+  }
+  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;
+    for (const e of group) {
+      input += e.input;
+      output += e.output;
+      cacheCreate += e.cacheCreate;
+      cacheRead += e.cacheRead;
+      cost += e.cost;
+    }
+    rows.push({
+      label,
+      models: models.sort(),
+      input,
+      output,
+      cacheCreate,
+      cacheRead,
+      total: input + output + cacheCreate + cacheRead,
+      cost
+    });
+  }
+  return rows.sort((a, b) => a.label.localeCompare(b.label));
+}
+function isoWeekLabel(ts) {
+  const d = new Date(ts);
+  const day = d.getDay();
+  const mondayOffset = day === 0 ? 6 : day - 1;
+  const monday = new Date(d);
+  monday.setDate(d.getDate() - mondayOffset);
+  return monday.toISOString().slice(0, 10);
+}
+function monthLabel(ts) {
+  return new Date(ts).toISOString().slice(0, 7);
+}
+async function fetchData() {
   const now = Date.now();
   const d = /* @__PURE__ */ new Date();
+  const lookback = new Date(d.getFullYear(), d.getMonth() - 6, 1).getTime();
   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 entries = await loadEntries(monthStart);
+  const entries = await loadEntries(lookback);
   const fiveHoursAgo = now - 5 * 36e5;
   const blockEntries = entries.filter((e) => e.ts >= fiveHoursAgo);
   let block = null;
@@ -154,26 +215,173 @@ async function fetchUsage() {
     const percent = Math.min(100, (now - oldest) / (5 * 36e5) * 100);
     block = { spent, projected: burnRate * 5, burnRate, percent, remaining: minutes(remainMs / 6e4) };
   }
+  const daily = groupBy(entries, (e) => new Date(e.ts).toISOString().slice(0, 10));
+  const weekly = groupBy(entries, (e) => isoWeekLabel(e.ts));
+  const monthly = groupBy(entries, (e) => monthLabel(e.ts));
   return {
     today: sum(entries.filter((e) => e.ts >= todayStart)),
     week: sum(entries.filter((e) => e.ts >= weekStart)),
-    month: sum(entries),
-    block
+    month: sum(entries.filter((e) => e.ts >= monthStart)),
+    block,
+    daily,
+    weekly,
+    monthly
   };
 }
 
+// src/config.ts
+import { readFile, writeFile, mkdir } from "fs/promises";
+import { join as join2 } from "path";
+import { homedir as homedir2 } from "os";
+var DEFAULTS = { interval: 2, clearScreen: true };
+function configDir() {
+  if (process.platform === "win32") {
+    return join2(process.env.APPDATA ?? join2(homedir2(), "AppData", "Roaming"), "tokmon");
+  }
+  const xdg = process.env.XDG_CONFIG_HOME ?? join2(homedir2(), ".config");
+  return join2(xdg, "tokmon");
+}
+function configPath() {
+  return join2(configDir(), "config.json");
+}
+async function loadConfig() {
+  try {
+    const raw = await readFile(configPath(), "utf-8");
+    const parsed = JSON.parse(raw);
+    return { ...DEFAULTS, ...parsed };
+  } catch {
+    return { ...DEFAULTS };
+  }
+}
+async function saveConfig(config) {
+  const dir = configDir();
+  await mkdir(dir, { recursive: true });
+  await writeFile(configPath(), JSON.stringify(config, null, 2) + "\n");
+}
+function configLocation() {
+  return configPath();
+}
+
 // src/app.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var INTERVAL = 2e3;
-function App() {
+var TABS = ["Dashboard", "Table"];
+var VIEWS = ["Daily", "Weekly", "Monthly"];
+function App({ interval: cliInterval }) {
   const [data, setData] = useState(null);
   const [error, setError] = useState(null);
   const [updated, setUpdated] = useState(/* @__PURE__ */ new Date());
+  const [tab, setTab] = useState(0);
+  const [view, setView] = useState(0);
+  const [scroll, setScroll] = useState(0);
+  const [showSettings, setShowSettings] = useState(false);
+  const [config, setConfig] = useState(null);
+  const [settingsCursor, setSettingsCursor] = useState(0);
+  const { stdout } = useStdout();
+  const rows = stdout?.rows ?? 24;
+  const cols = stdout?.columns ?? 80;
+  const interval2 = cliInterval ?? (config?.interval ?? 2) * 1e3;
+  useEffect(() => {
+    loadConfig().then((c) => {
+      if (cliInterval) c = { ...c, interval: cliInterval / 1e3 };
+      setConfig(c);
+      if (c.clearScreen && stdout) stdout.write("\x1B[2J\x1B[H");
+    });
+  }, []);
+  const isTTY = process.stdin.isTTY === true;
+  const settingsItems = 2;
+  const cfg = config ?? { 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 (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 (settingsCursor === 1 && (key.leftArrow || key.rightArrow || key.return)) {
+        setConfig((c) => {
+          const next = { ...c, clearScreen: !c.clearScreen };
+          saveConfig(next);
+          return next;
+        });
+      }
+      return;
+    }
+    if (input === "s") {
+      setShowSettings(true);
+      return;
+    }
+    if (key.tab) {
+      setTab((t) => (t + 1) % TABS.length);
+      setScroll(0);
+      return;
+    }
+    if (input === "1") {
+      setTab(0);
+      setScroll(0);
+      return;
+    }
+    if (input === "2") {
+      setTab(1);
+      setScroll(0);
+      return;
+    }
+    if (tab === 1) {
+      if (input === "d") {
+        setView(0);
+        setScroll(0);
+        return;
+      }
+      if (input === "w") {
+        setView(1);
+        setScroll(0);
+        return;
+      }
+      if (input === "m") {
+        setView(2);
+        setScroll(0);
+        return;
+      }
+      if (key.leftArrow) {
+        setView((v) => (v - 1 + VIEWS.length) % VIEWS.length);
+        setScroll(0);
+        return;
+      }
+      if (key.rightArrow) {
+        setView((v) => (v + 1) % VIEWS.length);
+        setScroll(0);
+        return;
+      }
+    } else {
+      if (key.leftArrow || key.rightArrow) {
+        setTab((t) => (t + 1) % TABS.length);
+        setScroll(0);
+        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)));
+  }, { isActive: isTTY });
   useEffect(() => {
     let active = true;
     const load = async () => {
       try {
-        const result = await fetchUsage();
+        const result = await fetchData();
         if (active) {
           setData(result);
           setError(null);
@@ -184,62 +392,143 @@ function App() {
       }
     };
     load();
-    const id = setInterval(load, INTERVAL);
+    const id = setInterval(load, interval2);
     return () => {
       active = false;
       clearInterval(id);
     };
-  }, []);
+  }, [interval2]);
   if (error) return /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Text, { color: "red", children: error }) });
   if (!data) return /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Loading..." }) });
+  const tableData = [data.daily, data.weekly, data.monthly][view];
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx(Header, {}),
-    /* @__PURE__ */ jsx(Box, { height: 1 }),
-    /* @__PURE__ */ jsx(UsageSection, { color: "green", title: "Claude", data }),
-    data.block && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsxs(Text, { bold: true, color: "greenBright", children: [
+          "\u25C9",
+          " tokmon"
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+          "  \xB7  ",
+          cliInterval ? cliInterval / 1e3 : cfg.interval,
+          "s"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: time(updated) })
+    ] }),
+    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(Text, { dimColor: true, children: "  Tab  s=settings" })
+      ] }),
       /* @__PURE__ */ jsx(Box, { height: 1 }),
-      /* @__PURE__ */ jsx(BlockSection, { block: data.block })
+      tab === 0 && /* @__PURE__ */ jsx(DashboardView, { data }),
+      tab === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ViewBar, { views: VIEWS, active: view }),
+        /* @__PURE__ */ jsx(Box, { height: 1 }),
+        /* @__PURE__ */ jsx(TableView, { rows: tableData, scroll, maxRows: rows - 12, wide: cols > 90 })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx(Box, { height: 1 }),
-    /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(Footer, { cost: data.month.cost, updated })
+    /* @__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: ")" })
+    ] })
   ] });
 }
-function Header() {
+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: [
+    " ",
+    t,
+    " "
+  ] }) : /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+    " ",
+    t,
+    " "
+  ] }) }, t)) });
+}
+function ViewBar({ views, active }) {
   return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsxs(Text, { bold: true, color: "greenBright", children: [
-      "\u25C9",
-      " tokmon"
+    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" })
+  ] });
+}
+function SettingsView({ config, cursor }) {
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+    /* @__PURE__ */ jsx(Text, { bold: true, children: "Settings" }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: configLocation() }),
+    /* @__PURE__ */ jsx(Box, { height: 1 }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Text, { color: cursor === 0 ? "green" : void 0, children: [
+        cursor === 0 ? "\u25B8" : " ",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { children: "Refresh interval  " }),
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "\u25C2",
+        " "
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { bold: true, color: "yellow", children: [
+        config.interval,
+        "s"
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        " ",
+        "\u25B8"
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-      "  \xB7  refreshing every ",
-      INTERVAL / 1e3,
-      "s"
-    ] })
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Text, { color: cursor === 1 ? "green" : void 0, children: [
+        cursor === 1 ? "\u25B8" : " ",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { children: "Clear screen      " }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: config.clearScreen ? "green" : "red", children: config.clearScreen ? "on" : "off" })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { height: 1 }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191\u2193 select  \u2190\u2192 adjust  s/Esc close" })
   ] });
 }
-function UsageSection({ color, title, data }) {
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      flexDirection: "column",
-      paddingLeft: 1,
-      borderStyle: "bold",
-      borderColor: color,
-      borderRight: false,
-      borderTop: false,
-      borderBottom: false,
-      children: [
-        /* @__PURE__ */ jsx(Text, { bold: true, children: title }),
-        /* @__PURE__ */ jsx(Box, { height: 1 }),
-        /* @__PURE__ */ jsx(Row, { label: "Today", summary: data.today }),
-        /* @__PURE__ */ jsx(Row, { label: "This Week", summary: data.week }),
-        /* @__PURE__ */ jsx(Row, { label: "This Month", summary: data.month })
-      ]
-    }
-  );
+function DashboardView({ data }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        paddingLeft: 1,
+        borderStyle: "bold",
+        borderColor: "green",
+        borderRight: false,
+        borderTop: false,
+        borderBottom: false,
+        children: [
+          /* @__PURE__ */ jsx(Text, { bold: true, children: "Claude" }),
+          /* @__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 })
+        ]
+      }
+    ),
+    data.block && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { height: 1 }),
+      /* @__PURE__ */ jsx(BlockView, { block: data.block })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { height: 1 }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(50) }),
+    /* @__PURE__ */ jsxs(Box, { width: 50, children: [
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Total " }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "yellowBright", children: currency(data.month.cost) })
+    ] })
+  ] });
 }
-function BlockSection({ block }) {
+function BlockView({ block }) {
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -261,7 +550,7 @@ function BlockSection({ block }) {
         ] }),
         /* @__PURE__ */ jsx(Box, { height: 1 }),
         /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Bar, { percent: block.percent, width: 36 }),
+          /* @__PURE__ */ jsx(ProgressBar, { percent: block.percent, width: 36 }),
           /* @__PURE__ */ jsx(Text, { children: " " }),
           /* @__PURE__ */ jsxs(Text, { bold: true, children: [
             Math.round(block.percent),
@@ -270,12 +559,9 @@ function BlockSection({ block }) {
         ] }),
         /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
           /* @__PURE__ */ jsx(Text, { color: "yellow", children: currency(block.spent) }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " spent" }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  \xB7  " }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "~" }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " spent  \xB7  ~" }),
           /* @__PURE__ */ jsx(Text, { children: currency(block.projected) }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " proj" }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  \xB7  " }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " proj  \xB7  " }),
           /* @__PURE__ */ jsx(Text, { color: "red", children: currency(block.burnRate) }),
           /* @__PURE__ */ jsx(Text, { dimColor: true, children: "/hr" })
         ] })
@@ -283,7 +569,7 @@ function BlockSection({ block }) {
     }
   );
 }
-function Row({ label, summary }) {
+function SummaryRow({ label, summary }) {
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(Box, { width: 14, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: label }) }),
     /* @__PURE__ */ jsx(Box, { width: 12, justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: currency(summary.cost) }) }),
@@ -293,36 +579,108 @@ function Row({ label, summary }) {
     ] }) })
   ] });
 }
-function Bar({ percent, width = 36 }) {
+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 Divider() {
-  return /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(50) });
-}
-function Footer({ cost, updated }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", width: 50, children: [
-      /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Total " }),
-        /* @__PURE__ */ jsx(Text, { bold: true, color: "yellowBright", children: currency(cost) })
-      ] }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: time(updated) })
+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;
+  const totals = { input: 0, output: 0, cacheCreate: 0, cacheRead: 0, cost: 0 };
+  for (const r of allRows) {
+    totals.input += r.input;
+    totals.output += r.output;
+    totals.cacheCreate += r.cacheCreate;
+    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;
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsx(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) }),
+      /* @__PURE__ */ jsx(Text, { bold: true, children: col("CchCrt", W.cc) }),
+      /* @__PURE__ */ jsx(Text, { bold: true, children: col("CchRd", W.cr) }),
+      W.total > 0 && /* @__PURE__ */ jsx(Text, { bold: true, children: col("Total", W.total) }),
+      /* @__PURE__ */ jsx(Text, { bold: true, children: col("Cost", W.cost) })
     ] }),
-    /* @__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: ")" })
-    ] })
+    /* @__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__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsx(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) }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: col(tokens(totals.cacheCreate), W.cc) }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: col(tokens(totals.cacheRead), W.cr) }),
+      W.total > 0 && /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: col(tokens(totals.input + totals.output + totals.cacheCreate + totals.cacheRead), W.total) }),
+      /* @__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  ",
+      allRows.length,
+      " rows  \xB7  ",
+      clampedScroll + 1,
+      "-",
+      Math.min(clampedScroll + maxRows, allRows.length)
+    ] }) })
   ] });
 }
+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)}`;
+  }
+  return shortDate(label);
+}
 
 // src/cli.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var { waitUntilExit } = render(/* @__PURE__ */ jsx2(App, {}));
+var args = process.argv.slice(2);
+var interval;
+for (let i = 0; i < args.length; i++) {
+  if ((args[i] === "--interval" || args[i] === "-i") && args[i + 1]) {
+    interval = Math.max(500, Number(args[i + 1]) * 1e3);
+    i++;
+  }
+  if (args[i] === "--help" || args[i] === "-h") {
+    console.log("tokmon - Terminal dashboard for Claude Code usage\n");
+    console.log("Usage: tokmon [options]\n");
+    console.log("Options:");
+    console.log("  -i, --interval <seconds>  Refresh interval (default: from config or 2)");
+    console.log("  -h, --help                Show this help\n");
+    console.log("Keybindings:");
+    console.log("  Tab / \u2190\u2192    Switch views");
+    console.log("  \u2191\u2193          Scroll table");
+    console.log("  1-2         Jump to view");
+    console.log("  s           Settings");
+    console.log("  Ctrl+C      Quit");
+    process.exit(0);
+  }
+}
+var { waitUntilExit } = render(/* @__PURE__ */ jsx2(App, { interval }));
 await waitUntilExit();

package/package.json

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