@alyibrahim/claude-statusline 1.3.1 → 1.4.1

package/README.md

@@ -4,7 +4,7 @@
 [![npm](https://img.shields.io/npm/v/@alyibrahim/claude-statusline)](https://www.npmjs.com/package/@alyibrahim/claude-statusline)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 
-**A rich, fast statusline for [Claude Code](https://claude.ai/code)** — shows model, git branch, context usage, rate limits, session cost, and real-time token consumption after every response.
+**A rich, fast statusline for [Claude Code](https://claude.ai/code)** — shows model, git branch, context usage, rate limits, session cost, and split input/output token counts after every response.
 
 Runs as a **compiled Rust binary** (~5ms startup vs ~100ms for Node.js). Zero shell dependencies. One install command.
 
@@ -28,14 +28,14 @@ Done. The statusline configures itself automatically. Restart Claude Code to see
 
 **Line 1** — Model name · Effort level · Active subagents · Current task · Directory `(branch +commits)` · Context bar
 
-**Line 2** — Weekly token usage · 5h usage · Reset countdown *(Pro/Max)* — or — Session cost *(API key)* · Session token count
+**Line 2** — Weekly token usage · 5h usage · Reset countdown *(Pro/Max)* — or — Session cost *(API key)* · Session tokens `X↓ Y↑`
 
 | Feature | Details |
 |---|---|
 | Context bar | Normalized to usable % — accounts for the auto-compact buffer |
 | Rate limits | Shows 5h and weekly usage with color-coded thresholds |
 | Session cost | Displayed only for API key users, hidden for subscribers |
-| Session tokens | Real-time token consumption via JSONL offset caching — updates between turns, not just at turn start |
+| Session tokens | Real-time via JSONL offset caching — split input/output display (`X↓ Y↑`), formatted as `k` or `M` for large counts |
 | Active agents | Counts running subagents from your `~/.claude/todos/` directory |
 | Effort level | Reads `CLAUDE_CODE_EFFORT_LEVEL` env var or `settings.json` |
 | Git branch | Detected automatically, silently absent if not a git repo |
@@ -70,7 +70,7 @@ npm picks the right one automatically. If your platform isn't listed, the JS fal
 | Subscription-aware | Shows usage/resets for Pro/Max, cost for API | Treat everyone as API user |
 | Context bar | Usable % after auto-compact buffer | Raw remaining % |
 | Subagent counter | Counts active agents from todos dir | — |
-| Session tokens | Real-time via JSONL offset cache | Stale stdin snapshot or none |
+| Session tokens | Real-time via JSONL offset cache, split I/O (`X↓ Y↑`) | Stale stdin snapshot or none |
 | Session commits | Tracks git commits made this session | — |
 
 ---

package/bin/cli.js

@@ -1,15 +1,21 @@
 #!/usr/bin/env node
 'use strict';
-const { setup } = require('../scripts/setup');
+const { setup, toggleHistory } = require('../scripts/setup');
 const { uninstall } = require('../scripts/uninstall');
-const { getSettingsPath } = require('../scripts/config');
+const config = require('../scripts/config');
+const { getSettingsPath } = config;
+const { spawnSync } = require('child_process');
+const path = require('path');
 
 const USAGE = `
 claude-statusline <command>
 
 Commands:
-  setup      Configure ~/.claude/settings.json to use this statusline
-  uninstall  Remove this statusline from ~/.claude/settings.json
+  setup            Configure ~/.claude/settings.json to use this statusline
+  uninstall        Remove this statusline from ~/.claude/settings.json
+  enable-history   Enable tracking session analytics to SQLite (default on setup)
+  disable-history  Remove history tracking hooks from Claude settings
+  history          Open the session analytics dashboard
 `.trim();
 
 const cmd = process.argv[2];
@@ -30,6 +36,36 @@ if (cmd === 'setup') {
   }
   console.log(`✓ Removed statusline from ${getSettingsPath()}`);
 
+} else if (cmd === 'enable-history') {
+  const result = toggleHistory(true);
+  if (!result.ok) {
+    console.error('Error:', result.error);
+    process.exit(1);
+  }
+  console.log(`✓ History tracking enabled in ${result.settingsPath}`);
+
+} else if (cmd === 'disable-history') {
+  const result = toggleHistory(false);
+  if (!result.ok) {
+    console.error('Error:', result.error);
+    process.exit(1);
+  }
+  console.log(`✓ History tracking disabled from ${result.settingsPath}`);
+
+} else if (cmd === 'hook' || cmd === 'history') {
+  const binaryPath = config.resolveBinary();
+  const scriptPath = path.resolve(__dirname, '../statusline.js');
+  
+  if (binaryPath) {
+    // Run Rust binary
+    const child = spawnSync(binaryPath, process.argv.slice(2), { stdio: 'inherit' });
+    process.exit(child.status || 0);
+  } else {
+    // Run JS fallback
+    const child = spawnSync(process.execPath, [scriptPath, ...process.argv.slice(2)], { stdio: 'inherit' });
+    process.exit(child.status || 0);
+  }
+
 } else if (cmd === undefined) {
   console.log(USAGE);
   process.exit(0);

package/package.json

@@ -1,59 +1,69 @@
-{
-  "name": "@alyibrahim/claude-statusline",
-  "version": "1.3.1",
-  "description": "Rich statusline for Claude Code — model, context bar, real-time token tracking, git branch, rate limits, and session stats. Rust binary, ~5ms startup.",
-  "keywords": [
-    "claude",
-    "claude-code",
-    "anthropic",
-    "statusline",
-    "status-bar",
-    "terminal",
-    "cli",
-    "ai",
-    "llm",
-    "token-tracking",
-    "context-window",
-    "rate-limit",
-    "git",
-    "developer-tools",
-    "productivity",
-    "rust"
-  ],
-  "homepage": "https://github.com/AlyIbrahim1/claude-statusline#readme",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/AlyIbrahim1/claude-statusline.git"
-  },
-  "bugs": {
-    "url": "https://github.com/AlyIbrahim1/claude-statusline/issues"
-  },
-  "engines": {
-    "node": ">=16"
-  },
-  "bin": {
-    "claude-statusline": "bin/cli.js"
-  },
-  "scripts": {
-    "postinstall": "node scripts/postinstall.js",
-    "preuninstall": "node scripts/preuninstall.js",
-    "test": "jest"
-  },
-  "files": [
-    "statusline.js",
-    "bin/",
-    "scripts/",
-    "README.md"
-  ],
-  "license": "MIT",
-  "optionalDependencies": {
-    "@alyibrahim/claude-statusline-linux-x64": "1.3.1",
-    "@alyibrahim/claude-statusline-linux-arm64": "1.3.1",
-    "@alyibrahim/claude-statusline-darwin-x64": "1.3.1",
-    "@alyibrahim/claude-statusline-darwin-arm64": "1.3.1",
-    "@alyibrahim/claude-statusline-win32-x64": "1.3.1"
-  },
-  "devDependencies": {
-    "jest": "^29.0.0"
-  }
-}
+{
+  "name": "@alyibrahim/claude-statusline",
+  "version": "1.4.1",
+  "description": "Rich statusline for Claude Code — model, context bar, real-time token tracking, git branch, rate limits, and session stats. Rust binary, ~5ms startup.",
+  "keywords": [
+    "claude",
+    "claude-code",
+    "anthropic",
+    "statusline",
+    "status-bar",
+    "terminal",
+    "cli",
+    "ai",
+    "llm",
+    "token-tracking",
+    "context-window",
+    "rate-limit",
+    "git",
+    "developer-tools",
+    "productivity",
+    "rust"
+  ],
+  "homepage": "https://github.com/AlyIbrahim1/claude-statusline#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AlyIbrahim1/claude-statusline.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AlyIbrahim1/claude-statusline/issues"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "bin": {
+    "claude-statusline": "bin/cli.js"
+  },
+  "scripts": {
+    "postinstall": "node scripts/postinstall.js",
+    "preuninstall": "node scripts/preuninstall.js",
+    "test": "jest"
+  },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/.worktrees/"
+    ]
+  },
+  "files": [
+    "statusline.js",
+    "bin/",
+    "scripts/",
+    "README.md"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "open": "^10.1.0"
+  },
+  "optionalDependencies": {
+    "better-sqlite3": "^11.3.0",
+    "@alyibrahim/claude-statusline-linux-x64": "1.4.0",
+    "@alyibrahim/claude-statusline-linux-arm64": "1.4.0",
+    "@alyibrahim/claude-statusline-darwin-x64": "1.4.0",
+    "@alyibrahim/claude-statusline-darwin-arm64": "1.4.0",
+    "@alyibrahim/claude-statusline-win32-x64": "1.4.0"
+  },
+  "devDependencies": {
+    "jest": "^29.0.0"
+  }
+}

package/scripts/history.js

@@ -0,0 +1,599 @@
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+const open = require('open');
+
+// Returns undefined if better-sqlite3 is not available
+function getDb() {
+  try {
+    const Database = require('better-sqlite3');
+    const home = process.env.HOME || process.env.USERPROFILE || '.';
+    const dbDir = path.join(home, '.claude');
+    fs.mkdirSync(dbDir, { recursive: true });
+    
+    const db = new Database(path.join(dbDir, 'statusline-history.db'));
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS sessions (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        session_id TEXT UNIQUE NOT NULL,
+        project_dir TEXT NOT NULL,
+        project_name TEXT NOT NULL,
+        model TEXT NOT NULL,
+        start_time DATETIME DEFAULT CURRENT_TIMESTAMP,
+        end_time DATETIME DEFAULT CURRENT_TIMESTAMP,
+        tokens_in INTEGER DEFAULT 0,
+        tokens_out INTEGER DEFAULT 0,
+        cost_usd REAL DEFAULT 0.0,
+        duration_seconds INTEGER DEFAULT 0,
+        exit_reason TEXT 
+      )
+    `);
+    return db;
+  } catch (e) {
+    return null;
+  }
+}
+
+function handleHookStart() {
+  const db = getDb();
+  if (!db) return; // Silent fallback
+
+  const projectDir = process.env.CLAUDE_PROJECT_DIR || process.cwd();
+  const projectName = path.basename(projectDir);
+  const tempSessionId = `pending-${projectName}-${Date.now()}`;
+
+  try {
+    const stmt = db.prepare('INSERT INTO sessions (session_id, project_dir, project_name, model, exit_reason) VALUES (?, ?, ?, ?, ?)');
+    stmt.run(tempSessionId, projectDir, projectName, 'pending', 'pending');
+  } catch (e) {}
+}
+
+function handleHookEnd() {
+  let input = '';
+  process.stdin.setEncoding('utf8');
+  process.stdin.on('data', chunk => input += chunk);
+  process.stdin.on('end', () => {
+    const db = getDb();
+    if (!db) return process.exit(0);
+
+    let reason = 'unknown';
+    try {
+      const data = JSON.parse(input);
+      reason = data.reason || 'unknown';
+    } catch(e) {}
+
+    const projectDir = process.env.CLAUDE_PROJECT_DIR || process.cwd();
+    const home = process.env.HOME || process.env.USERPROFILE || '.';
+    const slug = projectDir.replace(/[\/\\]/g, '-');
+    const projectsDir = path.join(home, '.claude', 'projects', slug);
+
+    let newestFile = null;
+    let newestTime = 0;
+
+    if (fs.existsSync(projectsDir)) {
+      try {
+        const files = fs.readdirSync(projectsDir);
+        for (const file of files) {
+          if (file.endsWith('.jsonl')) {
+            const p = path.join(projectsDir, file);
+            const mtime = fs.statSync(p).mtimeMs;
+            if (mtime > newestTime) {
+              newestTime = mtime;
+              newestFile = p;
+            }
+          }
+        }
+      } catch(e) {}
+    }
+
+    if (newestFile) {
+      const sessionId = path.basename(newestFile, '.jsonl');
+      let totalIn = 0;
+      let totalOut = 0;
+      let cost = 0.0;
+      let model = '';
+
+      try {
+        const content = fs.readFileSync(newestFile, 'utf8');
+        const lines = content.split('\n');
+        for (const line of lines) {
+          if (!line.trim()) continue;
+          try {
+            const entry = JSON.parse(line);
+            if (entry.type === 'assistant' && entry.message?.usage) {
+              const u = entry.message.usage;
+              totalIn += (u.input_tokens || 0) + Math.round((u.cache_read_input_tokens || 0) * 0.1) + (u.cache_creation_input_tokens || 0);
+              totalOut += (u.output_tokens || 0);
+              if (!model) model = entry.message.model || 'Claude';
+            } else if (entry.type === 'cost') {
+              cost += (entry.cost_usd || 0.0);
+            } else if (entry.type === 'message_start' && !model) {
+              model = entry.message?.model || 'Claude';
+            }
+          } catch(e) {}
+        }
+      } catch(e) {}
+
+      if (!model) model = 'Claude';
+
+      try {
+        const stmt = db.prepare(`
+          UPDATE sessions 
+          SET session_id = ?, model = ?, end_time = CURRENT_TIMESTAMP, 
+              tokens_in = ?, tokens_out = ?, cost_usd = ?, exit_reason = ?,
+              duration_seconds = CAST((julianday('now') - julianday(start_time)) * 86400 as integer)
+          WHERE id = (SELECT id FROM sessions WHERE project_dir = ? AND exit_reason = 'pending' ORDER BY start_time DESC LIMIT 1)
+        `);
+        stmt.run(sessionId, model, totalIn, totalOut, cost, reason, projectDir);
+      } catch (e) {}
+    }
+    process.exit(0);
+  });
+}
+
+async function handleHistory() {
+  const db = getDb();
+  if (!db) {
+    console.error('SQLite is not available. Please install @alyibrahim/claude-statusline with native modules, or ensure better-sqlite3 is successfully installed.');
+    process.exit(1);
+  }
+
+  function fmt(n) {
+    n = Number(n) || 0;
+    if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+    if (n >= 1_000)     return (n / 1_000).toFixed(1) + 'k';
+    return String(n);
+  }
+
+  function dur(s) {
+    s = Number(s) || 0;
+    if (s >= 3600) {
+      const h = Math.floor(s / 3600);
+      const m = Math.floor((s % 3600) / 60);
+      return m > 0 ? `${h}h ${m}m` : `${h}h`;
+    }
+    if (s >= 60) return `${Math.floor(s / 60)}m`;
+    return `${s}s`;
+  }
+
+  try {
+    const rows = db.prepare('SELECT project_name, model, start_time, duration_seconds, tokens_in, tokens_out, cost_usd, exit_reason FROM sessions ORDER BY start_time DESC LIMIT 100').all();
+    const projects = db.prepare('SELECT DISTINCT project_name FROM sessions ORDER BY project_name').all();
+
+    const projectOptions = projects
+      .map(p => `<option value="${p.project_name}">${p.project_name}</option>`)
+      .join('\n          ');
+
+    let totalCost = 0.0, totalIn = 0, totalOut = 0, sessionCount = 0;
+    let rowsHtml = '';
+
+    for (const s of rows) {
+      if (s.exit_reason !== 'pending') {
+        totalCost += (s.cost_usd || 0);
+        totalIn   += (s.tokens_in  || 0);
+        totalOut  += (s.tokens_out || 0);
+        sessionCount++;
+      }
+      const isPending = s.exit_reason === 'pending';
+      const badgeClass = { normal: 'reason-badge normal', interrupt: 'reason-badge interrupt', pending: 'reason-badge pending' }[s.exit_reason] ?? 'reason-badge unknown';
+      const durCell    = isPending ? '\u2014' : dur(s.duration_seconds);
+      const tokInCell  = isPending ? '\u2014' : fmt(s.tokens_in);
+      const tokOutCell = isPending ? '\u2014' : fmt(s.tokens_out);
+      const costCell   = isPending ? '\u2014' : `$${Number(s.cost_usd).toFixed(4)}`;
+
+      rowsHtml += `
+            <tr data-project="${s.project_name}" data-tok-in="${isPending ? 0 : s.tokens_in}" data-tok-out="${isPending ? 0 : s.tokens_out}" data-cost="${isPending ? 0 : s.cost_usd}" data-pending="${isPending ? 1 : 0}">
+              <td><span class="tag">${s.project_name}</span></td>
+              <td class="col-model">${s.model}</td>
+              <td class="col-ts">${s.start_time}</td>
+              <td class="col-dur">${durCell}</td>
+              <td class="col-tok">${tokInCell}</td>
+              <td class="col-tok">${tokOutCell}</td>
+              <td class="col-cost">${costCell}</td>
+              <td><span class="${badgeClass}">${s.exit_reason}</span></td>
+            </tr>`;
+    }
+
+    const rowCount = rows.length;
+    const emptyRow = rowsHtml ? '' : '<tr><td colspan="8" style="text-align:center;padding:48px 20px;color:var(--text-3);font-size:13px;">No sessions recorded yet</td></tr>';
+
+    const html = `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Claude Statusline \u2014 Session History</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Calistoga&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+[data-theme="dark"] {
+  --bg:             #1a1916;
+  --bg-header:      rgba(26,25,22,0.88);
+  --surface:        #242220;
+  --surface-hover:  #2a2825;
+  --surface-thead:  #1e1c1a;
+  --border:         #3a3733;
+  --border-subtle:  #302e2b;
+  --accent:         #D4673C;
+  --accent-mid:     rgba(212,103,60,0.14);
+  --text:           #E8E2DA;
+  --text-2:         #A09890;
+  --text-3:         #6B6460;
+  --green:          #4CAF84;
+  --green-bg:       rgba(76,175,132,0.15);
+  --amber:          #D4893A;
+  --amber-bg:       rgba(212,137,58,0.15);
+  --pending:        #A99ED4;
+  --pending-bg:     rgba(169,158,212,0.15);
+  --shadow-card:    0 1px 4px rgba(0,0,0,0.3), 0 0 0 1px var(--border);
+  --shadow-md:      0 4px 16px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
+  --toggle-bg:      #3a3733;
+  --toggle-knob:    #E8E2DA;
+}
+[data-theme="light"] {
+  --bg:             #FAF9F6;
+  --bg-header:      rgba(250,249,246,0.88);
+  --surface:        #FFFFFF;
+  --surface-hover:  #FDFCFA;
+  --surface-thead:  #F4F2EE;
+  --border:         #EAE4DD;
+  --border-subtle:  #F0EBE5;
+  --accent:         #C85A2E;
+  --accent-mid:     rgba(200,90,46,0.10);
+  --text:           #1C1410;
+  --text-2:         #6B5D57;
+  --text-3:         #9E8E87;
+  --green:          #1F7A50;
+  --green-bg:       rgba(31,122,80,0.10);
+  --amber:          #925010;
+  --amber-bg:       rgba(146,80,16,0.10);
+  --pending:        #6B5FA8;
+  --pending-bg:     rgba(107,95,168,0.10);
+  --shadow-card:    0 1px 3px rgba(28,20,16,0.07), 0 0 0 1px var(--border);
+  --shadow-md:      0 4px 16px rgba(28,20,16,0.10), 0 2px 4px rgba(28,20,16,0.06);
+  --toggle-bg:      #EAE4DD;
+  --toggle-knob:    #1C1410;
+}
+:root {
+  --radius:      12px;
+  --radius-sm:   8px;
+  --radius-tag:  6px;
+  --font-display:'Calistoga', Georgia, serif;
+  --font-body:   'Plus Jakarta Sans', system-ui, sans-serif;
+  --font-mono:   'JetBrains Mono', 'Courier New', monospace;
+  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --header-h:    56px;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: var(--font-body);
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  font-size: 14px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  transition: background 0.25s var(--ease), color 0.25s var(--ease);
+}
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  height: var(--header-h);
+  background: var(--bg-header);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  display: flex;
+  align-items: center;
+}
+.header-inner {
+  width: 100%;
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+.brand-icon {
+  width: 30px; height: 30px; border-radius: 7px; background: var(--accent);
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  transition: background 0.25s var(--ease);
+}
+.brand-icon svg { width: 16px; height: 16px; fill: #fff; }
+.brand-name {
+  font-family: var(--font-display); font-size: 17px; color: var(--text);
+  letter-spacing: -0.01em; line-height: 1; transition: color 0.25s var(--ease);
+}
+.brand-name span { color: var(--accent); transition: color 0.25s var(--ease); }
+.header-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+.filter-wrap { position: relative; }
+.filter-select {
+  appearance: none; -webkit-appearance: none;
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
+  color: var(--text-2); font-family: var(--font-body); font-size: 12px; font-weight: 500;
+  padding: 6px 28px 6px 10px; cursor: pointer; outline: none;
+  transition: border-color 0.15s, color 0.15s, background 0.25s var(--ease); min-width: 140px;
+}
+.filter-select:hover { border-color: var(--accent); color: var(--text); }
+.filter-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-mid); }
+.filter-chevron {
+  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
+  pointer-events: none; color: var(--text-3);
+}
+.gh-link {
+  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
+  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface);
+  color: var(--text-2); font-size: 12px; font-weight: 500; text-decoration: none;
+  transition: border-color 0.15s, color 0.15s, background 0.25s var(--ease); white-space: nowrap;
+}
+.gh-link:hover { border-color: var(--accent); color: var(--text); }
+.gh-link svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
+.theme-toggle {
+  width: 40px; height: 22px; border-radius: 11px; background: var(--toggle-bg);
+  border: none; cursor: pointer; position: relative; transition: background 0.25s var(--ease); flex-shrink: 0;
+}
+.theme-toggle::after {
+  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
+  border-radius: 50%; background: var(--toggle-knob);
+  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
+}
+[data-theme="light"] .theme-toggle::after { transform: translateX(18px); }
+.wrap { max-width: 1160px; margin: 0 auto; padding: 36px 28px 64px; }
+.page-title { text-align: center; margin-bottom: 36px; }
+.page-title h1 {
+  font-family: var(--font-display); font-size: 28px; color: var(--text);
+  letter-spacing: -0.02em; line-height: 1.1; transition: color 0.25s var(--ease);
+}
+.page-title p {
+  font-size: 13px; color: var(--text-3); margin-top: 6px; font-weight: 400;
+  transition: color 0.25s var(--ease);
+}
+.section-label {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
+  color: var(--text-3); margin-bottom: 12px; transition: color 0.25s var(--ease);
+}
+.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 36px; }
+.card {
+  background: var(--surface); box-shadow: var(--shadow-card); border-radius: var(--radius);
+  padding: 22px 22px 18px;
+  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), background 0.25s var(--ease);
+  animation: fadeUp 0.4s var(--ease) both;
+}
+.card:nth-child(1) { animation-delay: 0.05s; }
+.card:nth-child(2) { animation-delay: 0.10s; }
+.card:nth-child(3) { animation-delay: 0.15s; }
+.card:nth-child(4) { animation-delay: 0.20s; }
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
+.card-label {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
+  color: var(--text-3); margin-bottom: 10px; transition: color 0.25s var(--ease);
+}
+.card-value { font-family: var(--font-mono); font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
+.card-value.coral { color: var(--accent); }
+.card-value.amber { color: var(--amber); }
+.card-value.green { color: var(--green); }
+.card-sub { font-size: 12px; color: var(--text-3); margin-top: 8px; font-weight: 400; transition: color 0.25s var(--ease); }
+.table-section { animation: fadeUp 0.4s var(--ease) 0.25s both; }
+.table-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.table-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; transition: color 0.25s var(--ease); }
+.table-count {
+  font-size: 12px; color: var(--text-3); background: var(--border-subtle);
+  padding: 3px 10px; border-radius: 20px; font-weight: 500;
+  transition: background 0.25s var(--ease), color 0.25s var(--ease);
+}
+.table-wrap {
+  background: var(--surface); box-shadow: var(--shadow-card); border-radius: var(--radius);
+  overflow: hidden; transition: background 0.25s var(--ease);
+}
+.table-scroll { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; min-width: 860px; }
+thead tr { background: var(--surface-thead); border-bottom: 2px solid var(--border); }
+thead th {
+  padding: 12px 16px; text-align: left; font-size: 10px; font-weight: 600;
+  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); white-space: nowrap;
+  transition: background 0.25s var(--ease), color 0.25s var(--ease);
+}
+thead th:first-child { color: var(--accent); opacity: 0.8; }
+tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background 0.12s var(--ease); }
+tbody tr:last-child { border-bottom: none; }
+tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
+[data-theme="light"] tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
+tbody tr:hover { background: var(--accent-mid); }
+tbody td { padding: 11px 16px; font-size: 13px; white-space: nowrap; }
+.tag {
+  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
+  border-radius: var(--radius-tag); background: var(--accent-mid); color: var(--accent);
+  font-size: 12px; font-weight: 600; letter-spacing: -0.01em; max-width: 160px;
+  overflow: hidden; text-overflow: ellipsis;
+  transition: background 0.25s var(--ease), color 0.25s var(--ease);
+}
+.tag::before {
+  content: ''; width: 5px; height: 5px; border-radius: 50%;
+  background: currentColor; opacity: 0.6; flex-shrink: 0;
+}
+.col-model { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
+.col-ts    { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
+.col-dur   { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 500; }
+.col-tok   { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--amber); }
+.col-cost  { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--green); }
+.reason-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
+.reason-badge.normal    { background: var(--green-bg);      color: var(--green); }
+.reason-badge.interrupt { background: var(--amber-bg);      color: var(--amber); }
+.reason-badge.pending   { background: var(--pending-bg);    color: var(--pending); font-style: italic; }
+.reason-badge.unknown   { background: var(--border-subtle); color: var(--text-3); }
+@media (max-width: 840px) {
+  .cards { grid-template-columns: repeat(2, 1fr); }
+  .wrap  { padding: 24px 16px 48px; }
+  .header-inner { padding: 0 16px; }
+  .gh-link span { display: none; }
+}
+@media (max-width: 600px) {
+  .filter-select { min-width: 110px; }
+  .brand-name { font-size: 15px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .card, .table-section { animation: none; }
+  .card:hover { transform: none; }
+  * { transition-duration: 0ms !important; }
+}
+tbody tr.hidden { display: none; }
+</style>
+</head>
+<body>
+
+<header class="header">
+  <div class="header-inner">
+    <div class="brand">
+      <div class="brand-icon">
+        <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9 1.5C4.86 1.5 1.5 4.86 1.5 9s3.36 7.5 7.5 7.5 7.5-3.36 7.5-7.5S13.14 1.5 9 1.5zm0 2.5a5 5 0 110 10A5 5 0 019 4zm0 2a3 3 0 100 6 3 3 0 000-6z"/>
+        </svg>
+      </div>
+      <div class="brand-name">claude<span>.</span>statusline</div>
+    </div>
+    <div class="header-controls">
+      <div class="filter-wrap">
+        <select class="filter-select" id="projectFilter" aria-label="Filter by project">
+          <option value="">All projects</option>
+          ${projectOptions}
+        </select>
+        <svg class="filter-chevron" width="10" height="10" viewBox="0 0 10 10" fill="none">
+          <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <a class="gh-link" href="https://github.com/alyibrahim/claude-statusline" target="_blank" rel="noopener" aria-label="GitHub repository">
+        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+        </svg>
+        <span>GitHub</span>
+      </a>
+      <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode" title="Toggle theme"></button>
+    </div>
+  </div>
+</header>
+
+<main class="wrap">
+  <div class="page-title">
+    <h1>Session History</h1>
+    <p>Claude Code usage across all projects</p>
+  </div>
+  <div class="section-label">Overview</div>
+  <div class="cards">
+    <div class="card">
+      <div class="card-label">Sessions</div>
+      <div class="card-value coral" id="statSessions">${sessionCount}</div>
+      <div class="card-sub">recorded</div>
+    </div>
+    <div class="card">
+      <div class="card-label">Tokens In</div>
+      <div class="card-value amber" id="statTokIn">${fmt(totalIn)}</div>
+      <div class="card-sub">input tokens</div>
+    </div>
+    <div class="card">
+      <div class="card-label">Tokens Out</div>
+      <div class="card-value amber" id="statTokOut">${fmt(totalOut)}</div>
+      <div class="card-sub">output tokens</div>
+    </div>
+    <div class="card">
+      <div class="card-label">Total Spend</div>
+      <div class="card-value green" id="statCost">$${totalCost.toFixed(2)}</div>
+      <div class="card-sub">USD</div>
+    </div>
+  </div>
+  <div class="table-section">
+    <div class="table-header">
+      <div class="table-title">Session Log</div>
+      <div class="table-count" id="rowCount">${rowCount} entr${rowCount === 1 ? 'y' : 'ies'}</div>
+    </div>
+    <div class="table-wrap">
+      <div class="table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th>Project</th>
+              <th>Model</th>
+              <th>Start Time</th>
+              <th>Duration</th>
+              <th>Tokens In</th>
+              <th>Tokens Out</th>
+              <th>Cost</th>
+              <th>Reason</th>
+            </tr>
+          </thead>
+          <tbody id="tableBody">${rowsHtml}${emptyRow}</tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</main>
+
+<script>
+const toggle = document.getElementById('themeToggle');
+const html = document.documentElement;
+html.setAttribute('data-theme', localStorage.getItem('theme') || 'dark');
+toggle.addEventListener('click', () => {
+  const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+  html.setAttribute('data-theme', next);
+  localStorage.setItem('theme', next);
+});
+
+function fmtTokens(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+  if (n >= 1000)    return (n / 1000).toFixed(1) + 'k';
+  return String(n);
+}
+
+const filter   = document.getElementById('projectFilter');
+const rows     = document.querySelectorAll('#tableBody tr');
+const countEl  = document.getElementById('rowCount');
+const statSessions = document.getElementById('statSessions');
+const statTokIn    = document.getElementById('statTokIn');
+const statTokOut   = document.getElementById('statTokOut');
+const statCost     = document.getElementById('statCost');
+
+function applyFilter() {
+  const val = filter.value;
+  let sessions = 0, tokIn = 0, tokOut = 0, cost = 0, visible = 0;
+  rows.forEach(row => {
+    const match = !val || row.dataset.project === val;
+    row.classList.toggle('hidden', !match);
+    if (match) {
+      visible++;
+      if (row.dataset.pending !== '1') {
+        sessions++;
+        tokIn  += Number(row.dataset.tokIn)  || 0;
+        tokOut += Number(row.dataset.tokOut) || 0;
+        cost   += Number(row.dataset.cost)   || 0;
+      }
+    }
+  });
+  countEl.textContent      = visible + ' entr' + (visible === 1 ? 'y' : 'ies');
+  statSessions.textContent = sessions;
+  statTokIn.textContent    = fmtTokens(tokIn);
+  statTokOut.textContent   = fmtTokens(tokOut);
+  statCost.textContent     = '$' + cost.toFixed(2);
+}
+
+filter.addEventListener('change', applyFilter);
+</script>
+</body>
+</html>`;
+
+    const tempPath = path.join(os.tmpdir(), 'claude-statusline-dashboard.html');
+    fs.writeFileSync(tempPath, html);
+
+    console.log(`Opened dashboard at ${tempPath}`);
+    await open.default(tempPath);
+  } catch (e) {
+    console.error(`Failed to load database: ${e.message}`);
+  }
+}
+
+module.exports = { handleHookStart, handleHookEnd, handleHistory };

package/scripts/setup.js

@@ -38,6 +38,8 @@ function setup({ force = false } = {}) {
     : `"${process.execPath}" "${scriptPath}"`;
   settings.statusLine = { type: 'command', command };
 
+  updateHooks(settings, command, true);
+
   fs.mkdirSync(path.dirname(settingsPath), { recursive: true });
 
   try {
@@ -49,4 +51,62 @@ function setup({ force = false } = {}) {
   return { ok: true, settingsPath };
 }
 
-module.exports = { setup };
+function updateHooks(settings, command, enable) {
+  if (!settings.hooks) settings.hooks = {};
+  
+  const startCmd = `${command} hook start`;
+  const endCmd = `${command} hook end`;
+
+  function toggleHook(hookName, cmdString) {
+    if (!settings.hooks[hookName]) settings.hooks[hookName] = [];
+    // Remove any existing statusline hook entries (both old and new format)
+    settings.hooks[hookName] = settings.hooks[hookName].filter(h => {
+      if (h.hooks) {
+        return !h.hooks.some(inner => inner.command && (inner.command.includes('hook start') || inner.command.includes('hook end')));
+      }
+      return !(h.command && (h.command.includes('hook start') || h.command.includes('hook end')));
+    });
+    if (enable) {
+      settings.hooks[hookName].push({ matcher: '', hooks: [{ type: 'command', command: cmdString }] });
+    }
+    if (settings.hooks[hookName].length === 0) {
+      delete settings.hooks[hookName];
+    }
+  }
+
+  toggleHook('SessionStart', startCmd);
+  toggleHook('SessionEnd', endCmd);
+
+  if (Object.keys(settings.hooks).length === 0) {
+    delete settings.hooks;
+  }
+}
+
+function toggleHistory(enable) {
+  const scriptPath = path.resolve(__dirname, '../statusline.js');
+  const binaryPath = config.resolveBinary();
+  const safeBinary = binaryPath && !UNSAFE_CHARS.test(binaryPath) ? binaryPath : null;
+  const command = safeBinary ? `"${safeBinary}"` : `"${process.execPath}" "${scriptPath}"`;
+
+  const settingsPath = getSettingsPath();
+  let settings = {};
+  if (fs.existsSync(settingsPath)) {
+    try {
+      settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8'));
+    } catch (e) {
+      return { ok: false, error: 'settings.json contains invalid JSON — fix manually then re-run.' };
+    }
+  }
+
+  updateHooks(settings, command, enable);
+
+  try {
+    atomicWrite(settingsPath, settings);
+  } catch (err) {
+    return { ok: false, error: err.message };
+  }
+
+  return { ok: true, settingsPath };
+}
+
+module.exports = { setup, toggleHistory, updateHooks };

package/scripts/uninstall.js

@@ -13,8 +13,13 @@ function uninstall() {
     return { ok: false, error: 'settings.json contains invalid JSON — cannot safely modify.' };
   }
 
-  if (!settings.statusLine) return { ok: true };
-  delete settings.statusLine;
+  if (settings.statusLine) {
+    delete settings.statusLine;
+  }
+
+  // Also strip our hooks if they exist
+  const { updateHooks } = require('./setup');
+  updateHooks(settings, '', false);
 
   try {
     atomicWrite(settingsPath, settings);

package/statusline.js

@@ -7,6 +7,21 @@ const path = require('path');
 const os = require('os');
 const { execSync, execFileSync } = require('child_process');
 
+const cmd = process.argv[2];
+if (cmd === 'history') {
+  require('./scripts/history').handleHistory();
+  return;
+} else if (cmd === 'hook') {
+  const hookcmd = process.argv[3];
+  if (hookcmd === 'start') {
+    require('./scripts/history').handleHookStart();
+    return;
+  } else if (hookcmd === 'end') {
+    require('./scripts/history').handleHookEnd();
+    return;
+  }
+}
+
 // Reads cumulative token totals from the session JSONL file, using a byte-offset
 // cache so only new bytes are parsed on each invocation (O(new bytes) not O(file)).
 // Returns { totalIn, totalOut } or null on any error.