tokmon 0.3.0 → 0.3.1

package/dist/cli.js

@@ -4,7 +4,7 @@
 import { render } from "ink";
 
 // src/app.tsx
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Box, Text, useInput, useStdout } from "ink";
 
 // src/data.ts
@@ -194,15 +194,14 @@ function isoWeekLabel(ts) {
 function monthLabel(ts) {
   return new Date(ts).toISOString().slice(0, 7);
 }
-async function fetchData() {
+async function fetchDashboard() {
   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(lookback);
+  const entries = await loadEntries(monthStart);
   const fiveHoursAgo = now - 5 * 36e5;
   const blockEntries = entries.filter((e) => e.ts >= fiveHoursAgo);
   let block = null;
@@ -215,17 +214,21 @@ 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.filter((e) => e.ts >= monthStart)),
-    block,
-    daily,
-    weekly,
-    monthly
+    block
+  };
+}
+async function fetchTable() {
+  const d = /* @__PURE__ */ new Date();
+  const lookback = new Date(d.getFullYear(), d.getMonth() - 6, 1).getTime();
+  const entries = await loadEntries(lookback);
+  return {
+    daily: groupBy(entries, (e) => new Date(e.ts).toISOString().slice(0, 10)),
+    weekly: groupBy(entries, (e) => isoWeekLabel(e.ts)),
+    monthly: groupBy(entries, (e) => monthLabel(e.ts))
   };
 }
 
@@ -267,7 +270,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var TABS = ["Dashboard", "Table"];
 var VIEWS = ["Daily", "Weekly", "Monthly"];
 function App({ interval: cliInterval }) {
-  const [data, setData] = useState(null);
+  const [dashboard, setDashboard] = useState(null);
+  const [table, setTable] = useState(null);
+  const [tableLoading, setTableLoading] = useState(false);
   const [error, setError] = useState(null);
   const [updated, setUpdated] = useState(/* @__PURE__ */ new Date());
   const [tab, setTab] = useState(0);
@@ -276,6 +281,7 @@ function App({ interval: cliInterval }) {
   const [showSettings, setShowSettings] = useState(false);
   const [config, setConfig] = useState(null);
   const [settingsCursor, setSettingsCursor] = useState(0);
+  const tableLoadedOnce = useRef(false);
   const { stdout } = useStdout();
   const rows = stdout?.rows ?? 24;
   const cols = stdout?.columns ?? 80;
@@ -287,6 +293,60 @@ function App({ interval: cliInterval }) {
       if (c.clearScreen && stdout) stdout.write("\x1B[2J\x1B[H");
     });
   }, []);
+  useEffect(() => {
+    let active = true;
+    const load = async () => {
+      try {
+        const result = await fetchDashboard();
+        if (active) {
+          setDashboard(result);
+          setError(null);
+          setUpdated(/* @__PURE__ */ new Date());
+        }
+      } catch (e) {
+        if (active) setError(e instanceof Error ? e.message : String(e));
+      }
+    };
+    load();
+    const id = setInterval(load, interval2);
+    return () => {
+      active = false;
+      clearInterval(id);
+    };
+  }, [interval2]);
+  useEffect(() => {
+    if (tab !== 1) return;
+    if (tableLoadedOnce.current && table) return;
+    let active = true;
+    setTableLoading(true);
+    fetchTable().then((result) => {
+      if (active) {
+        setTable(result);
+        setTableLoading(false);
+        tableLoadedOnce.current = true;
+      }
+    }).catch(() => {
+      if (active) setTableLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [tab]);
+  useEffect(() => {
+    if (tab !== 1 || !tableLoadedOnce.current) return;
+    let active = true;
+    const id = setInterval(async () => {
+      try {
+        const result = await fetchTable();
+        if (active) setTable(result);
+      } catch {
+      }
+    }, Math.max(interval2, 1e4));
+    return () => {
+      active = false;
+      clearInterval(id);
+    };
+  }, [tab, interval2]);
   const isTTY = process.stdin.isTTY === true;
   const settingsItems = 2;
   const cfg = config ?? { interval: 2, clearScreen: true };
@@ -377,30 +437,9 @@ function App({ interval: cliInterval }) {
     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 fetchData();
-        if (active) {
-          setData(result);
-          setError(null);
-          setUpdated(/* @__PURE__ */ new Date());
-        }
-      } catch (e) {
-        if (active) setError(e instanceof Error ? e.message : String(e));
-      }
-    };
-    load();
-    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];
+  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] : [];
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
     /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsxs(Box, { children: [
@@ -422,11 +461,11 @@ function App({ interval: cliInterval }) {
         /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  Tab  s=settings" })
       ] }),
       /* @__PURE__ */ jsx(Box, { height: 1 }),
-      tab === 0 && /* @__PURE__ */ jsx(DashboardView, { data }),
+      tab === 0 && /* @__PURE__ */ jsx(DashboardView, { data: dashboard }),
       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 })
+        tableLoading && !table ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Loading 6 months of history..." }) : /* @__PURE__ */ jsx(TableView, { rows: tableData, scroll, maxRows: rows - 12, wide: cols > 90 })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [

package/package.json

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