@neuralmindlabs/tokn 0.1.0

package/src/lib/scanner.ts

@@ -0,0 +1,108 @@
+import { readDir, readTextFile, stat } from '@tauri-apps/plugin-fs';
+import { homeDir, join } from '@tauri-apps/api/path';
+import { parseClaudeSession } from 'tokn';
+import { parseCodexSession } from 'tokn';
+import { eventsToDays, type SourceContribution } from 'tokn';
+import type { FileScanState, Tool } from 'tokn';
+
+export interface ScanFileEntry extends FileScanState {
+  tool: Tool;
+  /** claude only: dedupe keys owned by this file, so a reparse can reclaim them */
+  keys?: string[];
+}
+
+export type ScanState = Record<string, ScanFileEntry>;
+
+async function listJsonl(dir: string): Promise<string[]> {
+  const out: string[] = [];
+  let entries;
+  try {
+    entries = await readDir(dir);
+  } catch {
+    return out;
+  }
+  for (const e of entries) {
+    const p = await join(dir, e.name);
+    if (e.isDirectory) out.push(...(await listJsonl(p)));
+    else if (e.name.endsWith('.jsonl')) out.push(p);
+  }
+  return out;
+}
+
+/**
+ * Incrementally scan Claude + Codex logs. Unchanged files (same size+mtime)
+ * are never re-read; changed files are reparsed and their day contributions
+ * replaced. Claude dedupe keys are owned per-file: before reparsing a file its
+ * keys are released so resumed sessions don't dedupe against themselves.
+ */
+export async function scan(state: ScanState): Promise<{ state: ScanState; sources: SourceContribution[] }> {
+  const home = await homeDir();
+  const roots: Array<{ tool: Tool; dir: string }> = [
+    { tool: 'claude', dir: await join(home, '.claude', 'projects') },
+    { tool: 'codex', dir: await join(home, '.codex', 'sessions') },
+  ];
+
+  const next: ScanState = {};
+  const globalKeys = new Set<string>();
+  for (const entry of Object.values(state)) {
+    for (const k of entry.keys ?? []) globalKeys.add(k);
+  }
+
+  for (const { tool, dir } of roots) {
+    const files = (await listJsonl(dir)).sort();
+    for (const path of files) {
+      let info;
+      try {
+        info = await stat(path);
+      } catch {
+        continue;
+      }
+      const mtimeMs = info.mtime ? new Date(info.mtime).getTime() : 0;
+      const prev = state[path];
+      if (prev && prev.size === info.size && prev.mtimeMs === mtimeMs) {
+        next[path] = prev;
+        continue;
+      }
+
+      // release this file's old dedupe keys before reparsing it
+      for (const k of prev?.keys ?? []) globalKeys.delete(k);
+
+      let content: string;
+      try {
+        content = await readTextFile(path);
+      } catch {
+        continue;
+      }
+
+      if (tool === 'claude') {
+        const before = new Set(globalKeys);
+        const parsed = parseClaudeSession(content, globalKeys);
+        const owned = [...globalKeys].filter((k) => !before.has(k));
+        next[path] = {
+          tool,
+          size: info.size,
+          mtimeMs,
+          project: parsed.project,
+          days: eventsToDays(parsed.events),
+          keys: owned,
+        };
+      } else {
+        const parsed = parseCodexSession(content);
+        next[path] = {
+          tool,
+          size: info.size,
+          mtimeMs,
+          project: parsed.project,
+          days: eventsToDays(parsed.events),
+        };
+      }
+    }
+  }
+
+  const sources: SourceContribution[] = Object.values(next).map((f) => ({
+    tool: f.tool,
+    project: f.project,
+    days: f.days,
+  }));
+  return { state: next, sources };
+}

package/src/main.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+// no StrictMode: the popover window runs the single refresh loop and
+// StrictMode's double-mount in dev would start it twice
+createRoot(document.getElementById('root')!).render(<App />)

package/src/ui/Dashboard.tsx

@@ -0,0 +1,203 @@
+import { useMemo, useState } from 'react';
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { fmtUSD } from '../lib/refresh.ts';
+import type { Tool, ToolDayTotals } from 'tokn';
+import { totalTokens } from 'tokn';
+import { TOOL_META, TOOLS, fmtTokens, lastNDays, useAppData } from './useAppData.ts';
+import Settings from './Settings.tsx';
+
+function sumInto(map: Map<string, ToolDayTotals>, key: string, t: ToolDayTotals) {
+  const cur = map.get(key);
+  if (!cur) {
+    map.set(key, { ...t });
+    return;
+  }
+  cur.inputTokens += t.inputTokens;
+  cur.outputTokens += t.outputTokens;
+  cur.cacheWriteTokens += t.cacheWriteTokens;
+  cur.cacheReadTokens += t.cacheReadTokens;
+  cur.costUSD += t.costUSD;
+  cur.unpricedEvents += t.unpricedEvents;
+}
+
+export default function Dashboard() {
+  const data = useAppData();
+  const [range, setRange] = useState(30);
+  const [enabled, setEnabled] = useState<Record<Tool, boolean>>({
+    claude: true,
+    codex: true,
+    cursor: true,
+  });
+
+  const days = useMemo(() => lastNDays(data?.rollups ?? [], range), [data, range]);
+
+  const chartData = days.map((d) => {
+    const row: any = { date: d.date.slice(5) };
+    for (const tool of TOOLS) {
+      row[tool] = enabled[tool] ? +(d.byTool[tool]?.costUSD ?? 0).toFixed(4) : 0;
+    }
+    return row;
+  });
+
+  const { byModel, byProject, total } = useMemo(() => {
+    const byModel = new Map<string, ToolDayTotals>();
+    const byProject = new Map<string, ToolDayTotals>();
+    let total = 0;
+    for (const d of days) {
+      for (const tool of TOOLS) {
+        if (!enabled[tool]) continue;
+        const t = d.byTool[tool];
+        if (t) total += t.costUSD;
+      }
+      for (const [m, t] of Object.entries(d.byModel)) sumInto(byModel, m, t);
+      for (const [p, t] of Object.entries(d.byProject)) sumInto(byProject, p, t);
+    }
+    return { byModel, byProject, total };
+  }, [days, enabled]);
+
+  const exportCSV = () => {
+    const rows = [['date', 'tool', 'input_tokens', 'output_tokens', 'cache_write_tokens', 'cache_read_tokens', 'cost_usd']];
+    for (const d of days) {
+      for (const tool of TOOLS) {
+        const t = d.byTool[tool];
+        if (!t) continue;
+        rows.push([d.date, tool, ...[t.inputTokens, t.outputTokens, t.cacheWriteTokens, t.cacheReadTokens].map(String), t.costUSD.toFixed(4)]);
+      }
+    }
+    const blob = new Blob([rows.map((r) => r.join(',')).join('\n')], { type: 'text/csv' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `token-usage-${days[0]?.date}-to-${days[days.length - 1]?.date}.csv`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  };
+
+  const sortedModels = [...byModel.entries()].sort((a, b) => b[1].costUSD - a[1].costUSD);
+  const sortedProjects = [...byProject.entries()].sort((a, b) => b[1].costUSD - a[1].costUSD).slice(0, 12);
+
+  return (
+    <div className="dashboard">
+      <header className="dash-header">
+        <div>
+          <h1>Token usage</h1>
+          <div className="muted">
+            Last {range} days · {fmtUSD(total)}
+            <span className="muted small"> · Claude/Codex are API-equivalent value; Cursor is billed</span>
+          </div>
+        </div>
+        <div className="controls">
+          {[30, 90].map((r) => (
+            <button key={r} className={range === r ? 'seg active' : 'seg'} onClick={() => setRange(r)}>
+              {r}d
+            </button>
+          ))}
+          <button className="seg" onClick={exportCSV}>Export CSV</button>
+        </div>
+      </header>
+
+      <div className="filters">
+        {TOOLS.map((tool) => (
+          <label key={tool} className="filter">
+            <input
+              type="checkbox"
+              checked={enabled[tool]}
+              onChange={(e) => setEnabled({ ...enabled, [tool]: e.target.checked })}
+            />
+            <span className="dot" style={{ background: TOOL_META[tool].color }} />
+            {TOOL_META[tool].label}
+          </label>
+        ))}
+      </div>
+
+      <div className="chart-box">
+        <ResponsiveContainer width="100%" height={260}>
+          <BarChart data={chartData} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+            <CartesianGrid stroke="var(--hairline)" vertical={false} />
+            <XAxis
+              dataKey="date"
+              tick={{ fontSize: 11, fill: 'var(--muted)' }}
+              stroke="var(--border)"
+              tickLine={false}
+              interval="preserveStartEnd"
+            />
+            <YAxis
+              tick={{ fontSize: 11, fill: 'var(--muted)' }}
+              stroke="transparent"
+              tickFormatter={(v: number) => `$${v}`}
+              width={48}
+            />
+            <Tooltip
+              formatter={(v, name) => [fmtUSD(Number(v ?? 0)), TOOL_META[name as Tool]?.label ?? String(name)]}
+              cursor={{ fill: 'var(--hover)' }}
+              contentStyle={{
+                background: 'var(--card)',
+                border: '0.5px solid var(--border)',
+                borderRadius: 8,
+                boxShadow: '0 4px 16px rgba(0, 0, 0, 0.25)',
+                fontSize: 12,
+              }}
+              labelStyle={{ color: 'var(--muted)', marginBottom: 4 }}
+              itemStyle={{ color: 'var(--text)', padding: '1px 0' }}
+            />
+            {TOOLS.map((tool) => (
+              <Bar key={tool} dataKey={tool} stackId="cost" fill={TOOL_META[tool].color} />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="tables">
+        <section>
+          <h2>By model</h2>
+          <table>
+            <thead>
+              <tr><th>Model</th><th>Tokens</th><th>Cost</th></tr>
+            </thead>
+            <tbody>
+              {sortedModels.map(([model, t]) => (
+                <tr key={model}>
+                  <td>{model}{t.unpricedEvents > 0 && <span className="warn" title="No pricing for this model; cost not counted"> ⚠︎</span>}</td>
+                  <td>{fmtTokens(totalTokens(t))}</td>
+                  <td>{fmtUSD(t.costUSD)}</td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot>
+              <tr>
+                <td>Total</td>
+                <td>{fmtTokens(sortedModels.reduce((s, [, t]) => s + totalTokens(t), 0))}</td>
+                <td>{fmtUSD(sortedModels.reduce((s, [, t]) => s + t.costUSD, 0))}</td>
+              </tr>
+            </tfoot>
+          </table>
+        </section>
+        <section>
+          <h2>By project</h2>
+          <table>
+            <thead>
+              <tr><th>Project</th><th>Tokens</th><th>Cost</th></tr>
+            </thead>
+            <tbody>
+              {sortedProjects.map(([proj, t]) => (
+                <tr key={proj}>
+                  <td title={proj}>{proj.split('/').slice(-2).join('/')}</td>
+                  <td>{fmtTokens(totalTokens(t))}</td>
+                  <td>{fmtUSD(t.costUSD)}</td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot>
+              <tr>
+                <td>Total</td>
+                <td>{fmtTokens(sortedProjects.reduce((s, [, t]) => s + totalTokens(t), 0))}</td>
+                <td>{fmtUSD(sortedProjects.reduce((s, [, t]) => s + t.costUSD, 0))}</td>
+              </tr>
+            </tfoot>
+          </table>
+        </section>
+      </div>
+
+      <Settings cursorStatus={data?.cursorStatus ?? 'disabled'} />
+    </div>
+  );
+}

package/src/ui/Popover.tsx

@@ -0,0 +1,91 @@
+import { useEffect } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { startRefreshLoop, fmtUSD } from '../lib/refresh.ts';
+import { TOOL_META, TOOLS, fmtTokens, lastNDays, monthTotal, todayStr, toolTokens, useAppData } from './useAppData.ts';
+
+export default function Popover() {
+  const data = useAppData();
+  useEffect(() => startRefreshLoop(), []);
+
+  const rollups = data?.rollups ?? [];
+  const today = rollups.find((r) => r.date === todayStr());
+  const days = lastNDays(rollups, 14);
+  const max = Math.max(1e-9, ...days.map((d) => d.totalCostUSD));
+  const refreshedMin = data ? Math.round((Date.now() - new Date(data.lastRefresh).getTime()) / 60000) : null;
+
+  return (
+    <div className="popover">
+      <div className="pop-card pop-hero">
+        <div className="pop-header">
+          <div>
+            <div className="muted small">Today · {new Date().toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</div>
+            <div className="big">{fmtUSD(today?.totalCostUSD ?? 0)}</div>
+          </div>
+          <div className="right">
+            <div className="muted small">This month</div>
+            <div className="mid">{fmtUSD(monthTotal(rollups))}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="pop-card pop-tools">
+        {TOOLS.map((tool) => {
+          const t = today?.byTool[tool];
+          const off = tool === 'cursor' && data?.cursorStatus !== 'ok';
+          return (
+            <div className="tool-row" key={tool}>
+              <span className="dot" style={{ background: TOOL_META[tool].color }} />
+              <span className="tool-name">{TOOL_META[tool].label}</span>
+              <span className="leader" />
+              {off ? (
+                <span className="muted small">{data?.cursorStatus === 'unauthorized' ? 'reconnect in settings' : 'not connected'}</span>
+              ) : (
+                <>
+                  <span className="muted small">{fmtTokens(toolTokens(t))} tok</span>
+                  <span className="tool-cost">{fmtUSD(t?.costUSD ?? 0)}</span>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="pop-card pop-chart">
+        <div className="muted small">Last 14 days</div>
+        <div className="bars">
+          {days.map((d) => (
+            <div className="bar-col" key={d.date} title={`${d.date}: ${fmtUSD(d.totalCostUSD)}`}>
+              {TOOLS.map((tool) => {
+                const cost = d.byTool[tool]?.costUSD ?? 0;
+                if (cost <= 0) return null;
+                return (
+                  <div
+                    key={tool}
+                    style={{
+                      background: TOOL_META[tool].color,
+                      height: `${Math.max(2, (cost / max) * 64)}px`,
+                      opacity: d.date === todayStr() ? 1 : 0.75,
+                    }}
+                  />
+                );
+              })}
+            </div>
+          ))}
+        </div>
+        <div className="bar-labels muted small">
+          <span>{days[0]?.date.slice(5)}</span>
+          <span>{days[days.length - 1]?.date.slice(5)}</span>
+        </div>
+      </div>
+
+      <div className="pop-footer">
+        <span className="muted small">
+          {data ? (refreshedMin === 0 ? 'Updated just now' : `Updated ${refreshedMin} min ago`) : 'Scanning…'}
+        </span>
+        <button className="linkish" onClick={() => invoke('show_dashboard')}>
+          Open dashboard ↗
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/ui/Settings.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+import { disable, enable, isEnabled } from '@tauri-apps/plugin-autostart';
+import { openUrl } from '@tauri-apps/plugin-opener';
+import { getSettings, setSetting, type Theme } from '../lib/refresh.ts';
+import type { CursorStatus } from 'tokn';
+
+const THEMES: { value: Theme; label: string }[] = [
+  { value: 'system', label: 'System' },
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+];
+
+export default function Settings({ cursorStatus }: { cursorStatus: CursorStatus | 'disabled' }) {
+  const [cookie, setCookie] = useState('');
+  const [saved, setSaved] = useState(false);
+  const [autostart, setAutostart] = useState(false);
+  const [theme, setTheme] = useState<Theme>('system');
+
+  useEffect(() => {
+    getSettings().then((s) => {
+      setCookie(s.cursorCookie);
+      setTheme(s.theme);
+    });
+    isEnabled().then(setAutostart).catch(() => {});
+  }, []);
+
+  const changeTheme = async (t: Theme) => {
+    setTheme(t);
+    await setSetting('theme', t);
+  };
+
+  const saveCookie = async () => {
+    await setSetting('cursorCookie', cookie.trim());
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  const toggleAutostart = async (on: boolean) => {
+    setAutostart(on);
+    try {
+      if (on) await enable();
+      else await disable();
+    } catch {
+      setAutostart(!on);
+    }
+  };
+
+  const statusLabel: Record<string, string> = {
+    ok: 'Connected — billed usage syncing',
+    unauthorized: 'Cookie expired or invalid — paste a fresh one',
+    error: "Couldn't reach cursor.com — will retry",
+    disabled: 'Not connected',
+  };
+
+  return (
+    <section className="settings">
+      <h2>Settings</h2>
+      <div className="setting-row">
+        <div>
+          <div className="setting-name">Cursor session cookie</div>
+          <div className="muted small">
+            {statusLabel[cursorStatus]} ·{' '}
+            <a
+              className="help-link"
+              onClick={(e) => {
+                e.preventDefault();
+                openUrl('https://cursor.com/dashboard');
+              }}
+              href="https://cursor.com/dashboard"
+            >
+              Open cursor.com/dashboard
+            </a>{' '}
+            logged in, then press ⌥⌘I → <b>Application</b> tab (behind the ≫ chevron if hidden) → left sidebar{' '}
+            <b>Storage → Cookies → https://cursor.com</b> → find <b>WorkosCursorSessionToken</b> (long value starting
+            with your user id) → double-click the Value cell and copy it
+          </div>
+        </div>
+        <div className="cookie-input">
+          <input
+            type="password"
+            placeholder="WorkosCursorSessionToken value"
+            value={cookie}
+            onChange={(e) => setCookie(e.target.value)}
+          />
+          <button onClick={saveCookie}>{saved ? 'Saved' : 'Save'}</button>
+        </div>
+      </div>
+      <div className="setting-row">
+        <div>
+          <div className="setting-name">Appearance</div>
+          <div className="muted small">System follows your macOS setting</div>
+        </div>
+        <div className="controls">
+          {THEMES.map((t) => (
+            <button
+              key={t.value}
+              className={`seg${theme === t.value ? ' active' : ''}`}
+              onClick={() => changeTheme(t.value)}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="setting-row">
+        <div>
+          <div className="setting-name">Launch at login</div>
+          <div className="muted small">Start Tokn automatically in the menu bar</div>
+        </div>
+        <input type="checkbox" checked={autostart} onChange={(e) => toggleAutostart(e.target.checked)} />
+      </div>
+    </section>
+  );
+}

package/src/ui/useAppData.ts

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { listen } from '@tauri-apps/api/event';
+import { getCachedData, ROLLUPS_EVENT, type AppData } from '../lib/refresh.ts';
+import { totalTokens } from 'tokn';
+import type { DayRollup, Tool, ToolDayTotals } from 'tokn';
+
+export function useAppData(): AppData | null {
+  const [data, setData] = useState<AppData | null>(null);
+  useEffect(() => {
+    let alive = true;
+    getCachedData().then((d) => {
+      if (alive && d) setData((cur) => cur ?? d);
+    });
+    const unlisten = listen<AppData>(ROLLUPS_EVENT, (e) => setData(e.payload));
+    return () => {
+      alive = false;
+      unlisten.then((f) => f());
+    };
+  }, []);
+  return data;
+}
+
+export const TOOL_META: Record<Tool, { label: string; color: string }> = {
+  claude: { label: 'Claude Code', color: '#D97757' },
+  codex: { label: 'Codex', color: '#10A37F' },
+  cursor: { label: 'Cursor', color: '#7F77DD' },
+};
+
+export const TOOLS: Tool[] = ['claude', 'codex', 'cursor'];
+
+export function fmtTokens(n: number): string {
+  if (n >= 1e9) return `${(n / 1e9).toFixed(1)}B`;
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
+  return String(n);
+}
+
+export function isoDaysAgo(n: number): string {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+export function todayStr(): string {
+  return isoDaysAgo(0);
+}
+
+/** rollups for the last n days including today, zero-filled */
+export function lastNDays(rollups: DayRollup[], n: number): DayRollup[] {
+  const byDate = new Map(rollups.map((r) => [r.date, r]));
+  const out: DayRollup[] = [];
+  for (let i = n - 1; i >= 0; i--) {
+    const date = isoDaysAgo(i);
+    out.push(
+      byDate.get(date) ?? { date, byTool: {}, byModel: {}, byProject: {}, totalCostUSD: 0, totalTokens: 0 },
+    );
+  }
+  return out;
+}
+
+export function toolTokens(t: ToolDayTotals | undefined): number {
+  return t ? totalTokens(t) : 0;
+}
+
+export function monthTotal(rollups: DayRollup[]): number {
+  const prefix = todayStr().slice(0, 7);
+  return rollups.filter((r) => r.date.startsWith(prefix)).reduce((s, r) => s + r.totalCostUSD, 0);
+}