tokmon 0.2.0 → 0.3.0

package/dist/cli.js

@@ -97,11 +97,10 @@ async function parseFile(path, since) {
       const ts = new Date(obj.timestamp ?? 0).getTime();
       if (ts < since) continue;
       const u = obj.message.usage;
-      const model = obj.message.model ?? "unknown";
       entries.push({
         ts,
-        model,
-        cost: costOf(model, u),
+        model: obj.message.model ?? "unknown",
+        cost: costOf(obj.message.model ?? "", u),
         input: u.input_tokens ?? 0,
         output: u.output_tokens ?? 0,
         cacheCreate: u.cache_creation_input_tokens ?? 0,
@@ -152,19 +151,19 @@ function sum(entries) {
   }
   return { cost, tokens: tokens2 };
 }
-function buildDaily(entries) {
-  const byDate = /* @__PURE__ */ new Map();
+function groupBy(entries, keyFn) {
+  const groups = /* @__PURE__ */ new Map();
   for (const e of entries) {
-    const date = new Date(e.ts).toISOString().slice(0, 10);
-    const arr = byDate.get(date);
+    const key = keyFn(e);
+    const arr = groups.get(key);
     if (arr) arr.push(e);
-    else byDate.set(date, [e]);
+    else groups.set(key, [e]);
   }
   const rows = [];
-  for (const [date, dayEntries] of byDate) {
-    const models = [...new Set(dayEntries.map((e) => shortModel(e.model)))];
+  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 dayEntries) {
+    for (const e of group) {
       input += e.input;
       output += e.output;
       cacheCreate += e.cacheCreate;
@@ -172,7 +171,7 @@ function buildDaily(entries) {
       cost += e.cost;
     }
     rows.push({
-      date,
+      label,
       models: models.sort(),
       input,
       output,
@@ -182,16 +181,28 @@ function buildDaily(entries) {
       cost
     });
   }
-  return rows.sort((a, b) => a.date.localeCompare(b.date));
+  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;
@@ -204,12 +215,17 @@ async function fetchData() {
     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),
+    month: sum(entries.filter((e) => e.ts >= monthStart)),
     block,
-    daily: buildDaily(entries)
+    daily,
+    weekly,
+    monthly
   };
 }
 
@@ -217,7 +233,7 @@ async function fetchData() {
 import { readFile, writeFile, mkdir } from "fs/promises";
 import { join as join2 } from "path";
 import { homedir as homedir2 } from "os";
-var DEFAULTS = { interval: 2 };
+var DEFAULTS = { interval: 2, clearScreen: true };
 function configDir() {
   if (process.platform === "win32") {
     return join2(process.env.APPDATA ?? join2(homedir2(), "AppData", "Roaming"), "tokmon");
@@ -248,41 +264,56 @@ function configLocation() {
 
 // src/app.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var TABS = ["Dashboard", "Daily"];
-function App({ interval: initialInterval }) {
+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({ interval: (initialInterval ?? 2e3) / 1e3 });
+  const [config, setConfig] = useState(null);
   const [settingsCursor, setSettingsCursor] = useState(0);
   const { stdout } = useStdout();
   const rows = stdout?.rows ?? 24;
-  const interval2 = config.interval * 1e3;
+  const cols = stdout?.columns ?? 80;
+  const interval2 = cliInterval ?? (config?.interval ?? 2) * 1e3;
   useEffect(() => {
     loadConfig().then((c) => {
-      if (!initialInterval) setConfig(c);
-      else setConfig({ ...c, interval: initialInterval / 1e3 });
+      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(0, c + 1));
-      if (key.leftArrow && settingsCursor === 0) {
-        setConfig((c) => {
-          const next = { ...c, interval: Math.max(1, c.interval - 1) };
-          saveConfig(next);
-          return next;
-        });
+      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 (key.rightArrow && settingsCursor === 0) {
+      if (settingsCursor === 1 && (key.leftArrow || key.rightArrow || key.return)) {
         setConfig((c) => {
-          const next = { ...c, interval: c.interval + 1 };
+          const next = { ...c, clearScreen: !c.clearScreen };
           saveConfig(next);
           return next;
         });
@@ -293,24 +324,58 @@ function App({ interval: initialInterval }) {
       setShowSettings(true);
       return;
     }
-    if (key.tab || key.rightArrow) {
+    if (key.tab) {
       setTab((t) => (t + 1) % TABS.length);
       setScroll(0);
+      return;
     }
-    if (key.leftArrow) {
-      setTab((t) => (t - 1 + TABS.length) % TABS.length);
-      setScroll(0);
-    }
-    if (key.upArrow) setScroll((s) => Math.max(0, s - 1));
-    if (key.downArrow) setScroll((s) => s + 1);
     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;
@@ -335,6 +400,7 @@ function App({ interval: initialInterval }) {
   }, [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__ */ jsxs(Box, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsxs(Box, { children: [
@@ -344,20 +410,24 @@ function App({ interval: initialInterval }) {
         ] }),
         /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
           "  \xB7  ",
-          config.interval,
+          cliInterval ? cliInterval / 1e3 : cfg.interval,
           "s"
         ] })
       ] }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: time(updated) })
     ] }),
-    showSettings ? /* @__PURE__ */ jsx(SettingsView, { config, cursor: settingsCursor }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    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/\u2190\u2192  s=settings" })
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  Tab  s=settings" })
       ] }),
       /* @__PURE__ */ jsx(Box, { height: 1 }),
-      TABS[tab] === "Dashboard" && /* @__PURE__ */ jsx(DashboardView, { data }),
-      TABS[tab] === "Daily" && /* @__PURE__ */ jsx(DailyView, { daily: data.daily, scroll, maxRows: rows - 10 })
+      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__ */ jsxs(Box, { marginTop: 1, children: [
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "by " }),
@@ -379,19 +449,26 @@ function TabBar({ tabs, active }) {
     " "
   ] }) }, t)) });
 }
+function ViewBar({ views, active }) {
+  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" })
+  ] });
+}
 function SettingsView({ config, cursor }) {
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
     /* @__PURE__ */ jsx(Text, { bold: true, children: "Settings" }),
-    /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-      "Saved to ",
-      configLocation()
-    ] }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: configLocation() }),
     /* @__PURE__ */ jsx(Box, { height: 1 }),
     /* @__PURE__ */ jsxs(Box, { children: [
-      cursor === 0 ? /* @__PURE__ */ jsxs(Text, { color: "green", children: [
-        "\u25B8",
+      /* @__PURE__ */ jsxs(Text, { color: cursor === 0 ? "green" : void 0, children: [
+        cursor === 0 ? "\u25B8" : " ",
         " "
-      ] }) : /* @__PURE__ */ jsx(Text, { children: "  " }),
+      ] }),
       /* @__PURE__ */ jsx(Text, { children: "Refresh interval  " }),
       /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
         "\u25C2",
@@ -404,11 +481,18 @@ function SettingsView({ config, cursor }) {
       /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
         " ",
         "\u25B8"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Text, { color: cursor === 1 ? "green" : void 0, children: [
+        cursor === 1 ? "\u25B8" : " ",
+        " "
       ] }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  (\u2190\u2192 to adjust)" })
+      /* @__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: "Press s or Esc to close" })
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191\u2193 select  \u2190\u2192 adjust  s/Esc close" })
   ] });
 }
 function DashboardView({ data }) {
@@ -438,10 +522,10 @@ function DashboardView({ data }) {
     ] }),
     /* @__PURE__ */ jsx(Box, { height: 1 }),
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(50) }),
-    /* @__PURE__ */ jsx(Box, { justifyContent: "space-between", width: 50, children: /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__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 BlockView({ block }) {
@@ -502,39 +586,42 @@ function ProgressBar({ percent, width = 36 }) {
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(width - filled) })
   ] });
 }
-function DailyView({ daily, scroll, maxRows }) {
-  const W = { date: 7, models: 16, input: 8, output: 8, cc: 8, cr: 8, cost: 10 };
-  const lineW = W.date + W.models + W.input + W.output + W.cc + W.cr + W.cost;
+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 daily) {
+  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 visible = daily.slice(scroll, scroll + maxRows);
-  const more = daily.length - scroll - maxRows;
+  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.date, "left") }),
+      /* @__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__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(lineW) }),
     visible.map((r) => /* @__PURE__ */ jsxs(Text, { children: [
-      /* @__PURE__ */ jsx(Text, { color: "cyan", children: col(shortDate(r.date), W.date, "left") }),
+      /* @__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.date)),
+    ] }, r.label)),
     more > 0 && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
       "  \u2193 ",
       more,
@@ -542,24 +629,34 @@ function DailyView({ daily, scroll, maxRows }) {
     ] }),
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(lineW) }),
     /* @__PURE__ */ jsxs(Text, { children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, color: "greenBright", children: col("Total", W.date, "left") }),
+      /* @__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 scroll  \xB7  ",
-      daily.length,
-      " days  \xB7  ",
-      scroll + 1,
+      "\u2191\u2193 PgUp/Dn scroll  \xB7  ",
+      allRows.length,
+      " rows  \xB7  ",
+      clampedScroll + 1,
       "-",
-      Math.min(scroll + maxRows, daily.length)
+      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";

package/package.json

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