claude-mission-control 1.5.0 → 1.7.0

package/README.md

@@ -14,7 +14,7 @@ Everything is read from local files under `~/.claude`, and it never writes to Cl
 npx claude-mission-control
 ```
 
-That downloads nothing permanent, starts the server, and prints the URL. Like it? Install it for real below.
+That downloads nothing permanent, starts the server, and opens the dashboard in your browser (add `--no-open` to skip that). Run it again while it's already up and it just opens the tab. Like it? Install it for real below.
 
 Homebrew works too:
 
@@ -87,6 +87,7 @@ If something looks off, the log is at `~/Library/Logs/claude-dashboard.log`. To
 - **New session** — the `⊕` button on a project card opens a fresh terminal window in that project running `claude`.
 - **Cost trend** — the small bar chart in the header is estimated cost per week for the last 8 weeks (hover for numbers). Costs include subagent tokens.
 - **Models everywhere** — every session shows which model ran it (live cards, digest, session lists), and the stats view breaks down usage per model and per project.
+- **Claude.ai chats** — import the official export from claude.ai (Settings → Privacy → Export data, then feed `conversations.json` to ⚙ settings here) and your chats become browsable (`⌘K` → Claude.ai chats) and full-text searchable next to your coding sessions. Stored slimmed in your local config dir, gitignored, never uploaded anywhere.
 
 ![Stats view: activity heatmap, busiest hours, weekly rhythm, 90-day spend, and per-model cost breakdowns](docs/screenshots/stats.png)
 - **Project details** — click any project's name for a slide-over with its full session list, rendered CLAUDE.md, per-project memory files, skills/agents/commands from `.claude/`, and settings (permissions, MCP servers, allowed tools). Read-only; also a quick audit of which projects are missing instructions or memory. Esc closes.
@@ -141,6 +142,8 @@ Edit `ignore.json` — an array of absolute path prefixes. A project is hidden i
 | `CLAUDE_DASH_DEV` | unset | `1` = re-read index.html on every request |
 | `CLAUDE_DASH_NOTIFY` | unset | `0` = disable macOS notifications |
 | `CLAUDE_DASH_HOST` | `127.0.0.1` | Bind address — see below before changing |
+| `CLAUDE_DASH_DEMO` | unset | `1` = serve believable fake data (screenshots, trying it without Claude history) |
+| `CLAUDE_DASH_CONFIG_DIR` | repo dir | Where config.json/names.json/ignore.json live (auto-falls back to `~/.config/claude-dashboard`) |
 
 The server binds to `127.0.0.1` only by default.
 

package/bin/claude-dashboard.js

@@ -1,5 +1,8 @@
 #!/usr/bin/env node
 'use strict';
-// npx claude-dashboard / global install entry point. The server starts on
-// require and prints its URL.
+// npx claude-mission-control / global install entry point.
+// Starts the server and opens the dashboard in the default browser.
+// Pass --no-open to skip the browser (services use `node server.js` directly
+// and never auto-open).
+if (!process.argv.includes('--no-open')) process.env.CLAUDE_DASH_OPEN = '1';
 require('../server.js');

package/lib/chats.js

@@ -0,0 +1,103 @@
+'use strict';
+// Claude.ai chats, imported from the official data export
+// (claude.ai → Settings → Privacy → Export data → conversations.json).
+// Stored normalized and slimmed in the config dir as chats.json —
+// read-only afterwards, refreshed by mtime like every other user file.
+const fs = require('fs');
+const path = require('path');
+const { configDir } = require('./config');
+
+const CHATS_FILE = path.join(configDir(), 'chats.json');
+
+// The export replaces artifacts/rich blocks with this placeholder — drop it.
+const PLACEHOLDER = /^This block is not supported on your current device yet\.?$/;
+
+function msgText(m) {
+  if (m.text && m.text.trim()) return m.text.trim();
+  const parts = (m.content || [])
+    .filter((p) => p && p.type === 'text' && p.text && p.text.trim() && !PLACEHOLDER.test(p.text.trim()))
+    .map((p) => p.text.trim());
+  return parts.join('\n\n');
+}
+
+// Raw export array -> slim [{id, name, createdAt, updatedAt, count, messages}]
+function normalizeChats(raw) {
+  const out = [];
+  for (const c of Array.isArray(raw) ? raw : []) {
+    const messages = (c.chat_messages || [])
+      .map((m) => ({
+        who: m.sender === 'human' ? 'you' : 'claude',
+        text: msgText(m),
+        ts: m.created_at ? Date.parse(m.created_at) || null : null,
+      }))
+      .filter((m) => m.text);
+    if (!messages.length) continue;
+    const name = (c.name || '').trim() || messages[0].text.slice(0, 80);
+    out.push({
+      id: c.uuid,
+      name,
+      createdAt: Date.parse(c.created_at) || null,
+      updatedAt: Date.parse(c.updated_at) || Date.parse(c.created_at) || 0,
+      count: messages.length,
+      messages,
+    });
+  }
+  out.sort((a, b) => b.updatedAt - a.updatedAt);
+  return out;
+}
+
+const MAX_RESULTS = 40;
+function searchChats(q, chats) {
+  const needle = q.toLowerCase();
+  if (!needle) return [];
+  const out = [];
+  for (const c of chats || []) {
+    if (out.length >= MAX_RESULTS) break;
+    if (c.name.toLowerCase().includes(needle)) {
+      out.push({ chatId: c.id, name: c.name, snippet: c.name, ts: c.updatedAt });
+      continue;
+    }
+    for (const m of c.messages || []) {
+      const i = m.text.toLowerCase().indexOf(needle);
+      if (i === -1) continue;
+      const start = Math.max(0, i - 60);
+      out.push({
+        chatId: c.id,
+        name: c.name,
+        snippet: (start > 0 ? '…' : '') + m.text.slice(start, i + needle.length + 140).replace(/\s+/g, ' '),
+        ts: m.ts || c.updatedAt,
+      });
+      break;
+    }
+  }
+  return out;
+}
+
+// Cached by mtime, like config.json.
+let cache = { mtimeMs: 0, chats: [] };
+function readChats() {
+  let st;
+  try {
+    st = fs.statSync(CHATS_FILE);
+  } catch {
+    return [];
+  }
+  if (st.mtimeMs !== cache.mtimeMs) {
+    try {
+      cache = { mtimeMs: st.mtimeMs, chats: JSON.parse(fs.readFileSync(CHATS_FILE, 'utf8')) };
+    } catch {
+      cache = { mtimeMs: st.mtimeMs, chats: [] };
+    }
+  }
+  return cache.chats;
+}
+
+// Normalize the raw export and persist. Returns the imported count.
+function saveChats(raw) {
+  const chats = normalizeChats(raw);
+  fs.writeFileSync(CHATS_FILE, JSON.stringify(chats));
+  cache = { mtimeMs: 0, chats: [] }; // next read picks up the new file
+  return chats.length;
+}
+
+module.exports = { normalizeChats, searchChats, readChats, saveChats };

package/lib/collector.js

@@ -35,6 +35,7 @@ class Collector {
     this.state = { generatedAt: 0, quota: null, liveSessions: [], projects: [], errors: [] };
     this.raw = { live: [], transcriptGroups: new Map(), history: new Map(), git: new Map(), quota: null };
     this.listeners = new Set();
+    this.events = []; // notification history for the catch-up bell, newest first
     this.clientCount = 0;
     this.timers = [];
     this.fingerprint = '';
@@ -100,12 +101,20 @@ class Collector {
     this.notifyTransitions(live);
   }
 
+  // Everything notification-worthy lands here too, muted or not — the bell
+  // is how you catch up on what the toasts said while you were away.
+  logEvent(kind, project, body) {
+    this.events.unshift({ at: Date.now(), kind, project, body: String(body).slice(0, 200) });
+    if (this.events.length > 50) this.events.length = 50;
+  }
+
   notifyTransitions(live) {
     const next = new Map(live.map((s) => [s.sessionId, s.status]));
     const prev = this.prevLiveStatus ?? null;
     for (const id of newlyWaiting(prev, next)) {
       const s = live.find((x) => x.sessionId === id);
       const root = worktreeRoot(s.cwd).root;
+      this.logEvent('needs you', friendlyName(root), s.waitingFor || 'Claude was waiting for your input');
       if (isProjectMuted(root, readConfig().mutedProjects)) continue;
       const project = friendlyName(root);
       sendNotification({
@@ -256,6 +265,7 @@ class Collector {
           if (q >= QUIET_FLAG_MS) quietMin = Math.floor(q / 60000);
           if (q >= QUIET_NOTIFY_MS && !this.stuckNotified.has(s.sessionId)) {
             this.stuckNotified.add(s.sessionId);
+            this.logEvent('stuck', friendlyName(root), `Busy with no output for ${quietMin} minutes`);
             if (!isProjectMuted(root, readConfig().mutedProjects)) sendNotification({
               title: `${friendlyName(root)} may be stuck`,
               body: `Busy with no output for ${quietMin} minutes — worth a look.`,
@@ -330,6 +340,7 @@ class Collector {
     const level = budgetLevel(weeklyCost[7], budgetLimit);
     if (level > (this.budgetAlerted || 0)) {
       this.budgetAlerted = level;
+      this.logEvent('budget', 'Weekly budget', `${level >= 100 ? 'Over' : `${level}% of`} your $${budgetLimit} budget (≈$${weeklyCost[7].toFixed(0)})`);
       sendNotification({
         title: 'Claude weekly budget',
         body: `7-day estimated spend ≈$${weeklyCost[7].toFixed(0)} — ${level >= 100 ? 'over' : `${level}% of`} your $${budgetLimit} budget.`,
@@ -340,7 +351,7 @@ class Collector {
     }
     const budget = budgetLimit ? { limit: budgetLimit, spent: weeklyCost[7], level } : null;
 
-    const next = { quota: this.raw.quota, plan: readPlan(), liveSessions, projects, weeklyCost, budget, pinned, errors: this.state.errors.slice(-5) };
+    const next = { quota: this.raw.quota, plan: readPlan(), theme: readConfig().theme || 'board', liveSessions, projects, weeklyCost, budget, pinned, events: this.events.slice(0, 50), errors: this.state.errors.slice(-5) };
     const fp = JSON.stringify(next);
     if (fp !== this.fingerprint) {
       this.fingerprint = fp;
@@ -411,6 +422,8 @@ class Collector {
     const sessionDays = [];
     let sessionTotal = 0;
     let costTotal = 0;
+    const dayCut = Date.now() - 24 * 3600000;
+    const timeline = [];
     const weekDayKey = dayKey(weekCut);
     let weekSessions = 0;
     let weekCost = 0;
@@ -424,6 +437,15 @@ class Collector {
       for (const m of g.sessions) {
         const mDays = combinedDays(m);
         sessionDays.push(mDays);
+        if (m.lastActivityAt >= dayCut) {
+          timeline.push({
+            project: friendlyName(g.path),
+            sessionId: m.sessionId,
+            title: sessionTitle(m).title,
+            start: Math.max(m.startedAt || m.lastActivityAt, dayCut),
+            end: m.lastActivityAt,
+          });
+        }
         if (m.lastActivityAt >= weekCut) {
           weekSessions++;
           if (m.waits) for (let i = 0; i < 4; i++) weekWaits[i] += m.waits[i];
@@ -458,6 +480,7 @@ class Collector {
       hours,
       heat: weekHourHeat(allTimestamps),
       costDays: dailyCostSeries(sessionDays, 90),
+      timeline,
       week: {
         sessions: weekSessions,
         prompts: weekPrompts,

package/lib/config.js

@@ -33,7 +33,7 @@ const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
 const NAMES_FILE = path.join(CONFIG_DIR, 'names.json');
 const IGNORE_FILE = path.join(CONFIG_DIR, 'ignore.json');
 
-const DEFAULTS = { terminal: 'ghostty', notifications: true, usageApi: true, mutedProjects: [], weeklyBudget: 0, pinnedSessions: [] };
+const DEFAULTS = { terminal: 'ghostty', notifications: true, usageApi: true, mutedProjects: [], weeklyBudget: 0, pinnedSessions: [], theme: 'board' };
 
 function readJson(file, fallback) {
   try {
@@ -59,6 +59,7 @@ function updateConfig(patch) {
   if (typeof patch.weeklyBudget === 'number' && patch.weeklyBudget >= 0 && Number.isFinite(patch.weeklyBudget)) {
     next.weeklyBudget = Math.round(patch.weeklyBudget);
   }
+  if (patch.theme === 'board' || patch.theme === 'phosphor') next.theme = patch.theme;
   writeJson(CONFIG_FILE, next);
   return next;
 }
@@ -188,6 +189,7 @@ function resolvedTerminal() {
 
 module.exports = {
   readConfig,
+  configDir: () => CONFIG_DIR,
   findOnPath,
   detectClaudeApp,
   resolvedTerminal,

package/lib/demo.js

@@ -0,0 +1,148 @@
+'use strict';
+// CLAUDE_DASH_DEMO=1: serve believable fake data instead of reading ~/.claude.
+// For screenshots, demos, and trying the dashboard without any Claude history.
+// Times are computed relative to now on every call so the board looks alive.
+
+const MIN = 60000;
+const HOUR = 3600000;
+const DAY = 24 * HOUR;
+
+const S1 = 'demo1111-1111-4111-8111-111111111111';
+const S2 = 'demo2222-2222-4222-8222-222222222222';
+const S3 = 'demo3333-3333-4333-8333-333333333333';
+
+function demoState() {
+  const now = Date.now();
+  const mk = (name, path, ago, git, spark, spend) => ({
+    path,
+    name,
+    lastActivityAt: now - ago,
+    isLive: ago < 5 * MIN,
+    git,
+    spend7d: spend,
+    activity: { counts: spark },
+    sessions: [],
+  });
+  return {
+    generatedAt: now,
+    plan: { tier: 'Max 20x' },
+    quota: { utilization: 34, weeklyUtilization: 52, resetsAt: '2pm', weeklyResetsAt: 'Wed 9am' },
+    weeklyCost: [31, 48, 22, 75, 61, 90, 84, 143],
+    budget: { limit: 200, spent: 143, level: 75 },
+    pinned: [
+      { sessionId: S3, title: 'Design the onboarding flow', projectName: 'Acme Storefront', model: 'claude-opus-5', lastActivityAt: now - 3 * HOUR },
+    ],
+    events: [
+      { at: now - 4 * MIN, kind: 'needs you', project: 'Acme Storefront', body: 'Which payment provider should checkout use?' },
+      { at: now - 38 * MIN, kind: 'stuck', project: 'Data Pipeline', body: 'Busy with no output for 20 minutes' },
+      { at: now - 2 * HOUR, kind: 'budget', project: 'Weekly budget', body: '75% of your $200 budget (≈$143)' },
+    ],
+    liveSessions: [
+      {
+        sessionId: S1, pid: 1111, cwd: '/demo/acme-storefront', projectPath: '/demo/acme-storefront',
+        projectName: 'Acme Storefront', isWorktree: false, model: 'claude-opus-5',
+        title: 'Wire Stripe checkout into the cart', status: 'waiting',
+        waitingFor: 'Which payment provider should checkout use?',
+        startedAt: now - 47 * MIN, statusUpdatedAt: now - 4 * MIN, quietMin: null,
+        currentTask: null, tasksSummary: null, subagents: null, resumeCommand: 'claude --resume demo',
+      },
+      {
+        sessionId: S2, pid: 2222, cwd: '/demo/blog-engine', projectPath: '/demo/blog-engine',
+        projectName: 'Blog Engine', isWorktree: false, model: 'claude-fable-5',
+        title: 'Migrate posts to the new block format', status: 'busy',
+        waitingFor: null, startedAt: now - 3 * HOUR - 12 * MIN, statusUpdatedAt: now - MIN, quietMin: null,
+        currentTask: { activeForm: 'Converting legacy shortcodes' },
+        tasksSummary: { completed: 7, inProgress: 1, pending: 3 },
+        subagents: { count: 4, mtok: 2.3 }, resumeCommand: 'claude --resume demo',
+      },
+    ],
+    projects: [
+      mk('Acme Storefront', '/demo/acme-storefront', 2 * MIN,
+        { isRepo: true, branch: 'feature/checkout', dirty: 4, untracked: 1, ahead: 2, behind: 0 },
+        [2, 5, 3, 8, 6, 9, 4, 7, 11, 6, 8, 12, 9, 14], 89.4),
+      mk('Blog Engine', '/demo/blog-engine', 1 * MIN,
+        { isRepo: true, branch: 'main', dirty: 0, untracked: 0, ahead: 0, behind: 0 },
+        [0, 3, 1, 4, 2, 6, 3, 5, 2, 7, 4, 6, 8, 5], 31.7),
+      mk('Data Pipeline', '/demo/data-pipeline', 5 * HOUR,
+        { isRepo: true, branch: 'main', dirty: 2, untracked: 0, ahead: 1, behind: 0 },
+        [1, 0, 2, 1, 3, 0, 2, 4, 1, 3, 2, 0, 5, 2], 18.2),
+      mk('Dotfiles', '/demo/dotfiles', 3 * DAY,
+        { isRepo: true, branch: 'main', dirty: 0, untracked: 0, ahead: 0, behind: 0 },
+        [0, 0, 1, 0, 0, 2, 0, 1, 0, 0, 1, 0, 0, 1], 2.1),
+    ],
+    errors: [],
+  };
+}
+
+function demoStats() {
+  const now = Date.now();
+  const days = [];
+  const costDays = [];
+  for (let i = 181; i >= 0; i--) {
+    const t = now - i * DAY;
+    const c = Math.max(0, Math.round(6 + 6 * Math.sin(i / 3) + (i % 7 === 0 ? -6 : 0)));
+    days.push({ t, c });
+  }
+  for (let i = 89; i >= 0; i--) {
+    const t = now - i * DAY;
+    const cost = Math.max(0, Math.round((12 + 10 * Math.sin(i / 4)) * 100) / 100);
+    costDays.push({ t, cost, tokens: Math.round(cost * 800000) });
+  }
+  const hours = [0, 0, 0, 0, 0, 0, 1, 3, 8, 14, 18, 22, 19, 16, 20, 17, 12, 9, 6, 4, 3, 2, 1, 0];
+  const heat = Array.from({ length: 7 }, (_, d) =>
+    hours.map((h) => Math.max(0, Math.round(h * (d === 0 || d === 6 ? 0.3 : 1) * (0.7 + (d % 3) * 0.2)))));
+  return {
+    days,
+    hours,
+    heat,
+    costDays,
+    timeline: [
+      { project: 'Acme Storefront', sessionId: S1, title: 'Wire Stripe checkout into the cart', start: now - 47 * MIN, end: now },
+      { project: 'Blog Engine', sessionId: S2, title: 'Migrate posts to the new block format', start: now - 3 * HOUR, end: now },
+      { project: 'Data Pipeline', sessionId: S3, title: 'Backfill the analytics warehouse', start: now - 9 * HOUR, end: now - 5 * HOUR },
+    ],
+    week: {
+      sessions: 18, prompts: 84, cost: 143.2,
+      projects: [
+        { name: 'Acme Storefront', cost: 89.4 },
+        { name: 'Blog Engine', cost: 31.7 },
+        { name: 'Data Pipeline', cost: 18.2 },
+      ],
+      models: ['claude-opus-5', 'claude-fable-5', 'claude-haiku-4-5'],
+      busiestDay: 'Tuesday', busiestHour: 11,
+      waits: [22, 31, 18, 4], typicalWait: 'under 2m',
+    },
+    byModel: {
+      'claude-opus-5': { tokens: 310e6, cost: 412.5 },
+      'claude-fable-5': { tokens: 120e6, cost: 388.1 },
+      'claude-haiku-4-5': { tokens: 42e6, cost: 9.8 },
+    },
+    perProject: [
+      { name: 'Acme Storefront', total: 501.3, models: { 'claude-opus-5': 402.2, 'claude-fable-5': 99.1 } },
+      { name: 'Blog Engine', total: 214.6, models: { 'claude-fable-5': 214.6 } },
+    ],
+    totals: { sessions: 212, prompts: 1841, cost: 810.4 },
+  };
+}
+
+function demoSession() {
+  const now = Date.now();
+  return {
+    sessionId: S1,
+    title: 'Wire Stripe checkout into the cart',
+    projectName: 'Acme Storefront',
+    truncatedTurns: 0,
+    nextOffset: 0,
+    events: [
+      { kind: 'user', ts: now - 47 * MIN, text: 'Add Stripe checkout to the cart page. Keep the guest flow working.' },
+      { kind: 'assistant', ts: now - 46 * MIN, text: "I'll start with the payment intent endpoint, then wire the cart button to it." },
+      { kind: 'tool', ts: now - 45 * MIN, name: 'Read', input: 'src/cart/CartPage.tsx' },
+      { kind: 'tool', ts: now - 44 * MIN, name: 'Edit', input: 'src/api/checkout.ts' },
+      { kind: 'assistant', ts: now - 40 * MIN, text: 'Endpoint is in with tests. The cart button now creates a payment intent and redirects.' },
+      { kind: 'user', ts: now - 12 * MIN, text: 'Nice. What about Apple Pay?' },
+      { kind: 'assistant', ts: now - 5 * MIN, text: 'Two options: Stripe Payment Request Button (fastest) or a native integration. Which payment provider should checkout use for the wallet flow?' },
+    ],
+  };
+}
+
+module.exports = { demoState, demoStats, demoSession };

package/lib/gitlog.js

@@ -0,0 +1,58 @@
+'use strict';
+// Recent commits for the project drawer — read-only `git log`, execFile
+// arg arrays only (paths contain spaces).
+const { execFile } = require('child_process');
+
+// %x1e opens each record, %x1f separates fields:
+// sha, committer epoch, subject, author, Co-Authored-By trailer values.
+const FMT = '%x1e%h%x1f%ct%x1f%s%x1f%an%x1f%(trailers:key=Co-Authored-By,valueonly,separator=%x20)';
+
+function parseGitLog(raw) {
+  const out = [];
+  for (const rec of String(raw).split('\x1e')) {
+    if (!rec.trim()) continue;
+    const nl = rec.indexOf('\n');
+    const head = nl === -1 ? rec : rec.slice(0, nl);
+    const rest = nl === -1 ? '' : rec.slice(nl + 1);
+    const [sha, ct, subject, author, coauthors] = head.split('\x1f');
+    if (!sha) continue;
+    const statLine = rest
+      .split('\n')
+      .map((l) => l.trim())
+      .find((l) => /files? changed/.test(l));
+    out.push({
+      sha,
+      ts: (Number(ct) || 0) * 1000,
+      subject: subject || '',
+      author: author || '',
+      claude: /claude/i.test(coauthors || ''),
+      stat: statLine || null,
+    });
+  }
+  return out;
+}
+
+// A Claude commit made while a session was active in the same repo probably
+// came from that session — honest heuristic, windows padded 5 minutes.
+const PAD = 5 * 60000;
+function linkCommitsToSessions(commits, sessions) {
+  return commits.map((c) => {
+    const s = (sessions || []).find(
+      (x) => c.ts >= ((x.startedAt || x.lastActivityAt) - PAD) && c.ts <= (x.lastActivityAt + PAD)
+    );
+    return s ? { ...c, sessionId: s.sessionId, sessionTitle: s.title } : c;
+  });
+}
+
+function recentCommits(projectPath, limit = 30) {
+  return new Promise((resolve) => {
+    execFile(
+      'git',
+      ['-C', projectPath, 'log', `--format=${FMT}`, '--shortstat', '-n', String(limit)],
+      { timeout: 8000, maxBuffer: 1024 * 1024 },
+      (err, stdout) => resolve(err ? [] : parseGitLog(stdout))
+    );
+  });
+}
+
+module.exports = { parseGitLog, linkCommitsToSessions, recentCommits };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-mission-control",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Local dashboard for Claude Code: live sessions, transcripts, costs, git status — all your projects in one place.",
   "main": "server.js",
   "bin": {

package/public/index.html

@@ -4,6 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Claude Dashboard</title>
+<meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <link rel="manifest" href="/manifest.webmanifest">
 <meta name="theme-color" content="#0d1215" media="(prefers-color-scheme: dark)">
@@ -35,6 +36,7 @@
      broken. Oswald condensed caps carry names; JetBrains Mono carries data.
      Light theme is the same timetable, printed on paper. */
   :root {
+    --disp-font: 'Oswald', 'Arial Narrow', sans-serif;
     --bg: #f5f4f0;
     --surface: #ecebe5;
     --surface2: #e0dfd8;
@@ -76,6 +78,29 @@
       --amber-ink: #0d1215;
     }
   }
+  /* Phosphor theme: green-on-black terminal — a deliberate single-look skin,
+     so it overrides both light and dark palettes. */
+  :root[data-theme="phosphor"] {
+    --disp-font: 'JetBrains Mono', ui-monospace, monospace;
+    --bg: #050a06;
+    --surface: #0a120c;
+    --surface2: #122015;
+    --ink: #8fdf9a;
+    --muted: #55a061;
+    --faint: #35603d;
+    --line: #16301c;
+    --accent: #46e07a;
+    --warn: #ffb020;
+    --bad: #ff5f45;
+    --chip-bg: #122015;
+    --warn-bg: rgba(255, 176, 32, 0.10);
+    --accent-bg: rgba(70, 224, 122, 0.08);
+    --glow: 0 0 8px;
+    --flap: #0a120c;
+    --flap-hi: #0e1810;
+    --flap-split: rgba(0, 0, 0, 0.5);
+    --amber-ink: #050a06;
+  }
   * { box-sizing: border-box; margin: 0; }
   html { -webkit-text-size-adjust: 100%; }
   body {
@@ -89,7 +114,7 @@
 
   /* Display face: condensed caps, the board's letter-painted voice. */
   .disp {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
   }
   /* Split-flap cell: gradient face with the horizontal split line. */
@@ -116,7 +141,7 @@
     background: var(--surface);
   }
   header h1 {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     font-size: 19px; font-weight: 600; letter-spacing: 0.10em;
     text-transform: uppercase; white-space: nowrap;
   }
@@ -152,7 +177,7 @@
     border-bottom: 2px solid var(--line);
   }
   #live .rail-label {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em;
     color: var(--faint); margin-bottom: 10px;
   }
@@ -217,7 +242,7 @@
   }
   .card .head { display: flex; align-items: center; gap: 8px; }
   .card .name {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     text-transform: uppercase; letter-spacing: 0.05em;
     font-weight: 500; font-size: 15px;
   }
@@ -267,11 +292,18 @@
   }
   #search:focus { outline: 2px solid var(--accent); outline-offset: 0; }
   #search::placeholder { color: var(--faint); }
-  #gear, #mc-btn {
+  #gear, #mc-btn, #bell-btn {
     border: none; background: none; color: var(--muted); cursor: pointer;
     font-size: 15px; padding: 2px 6px; border-radius: 2px; margin-left: 4px;
   }
-  #gear:hover, #mc-btn:hover { background: var(--surface2); color: var(--ink); }
+  #gear:hover, #mc-btn:hover, #bell-btn:hover { background: var(--surface2); color: var(--ink); }
+  #bell-btn { position: relative; }
+  #bell-badge {
+    position: absolute; top: -3px; right: -3px;
+    background: var(--warn); color: var(--amber-ink);
+    font: 700 9.5px 'JetBrains Mono', monospace;
+    border-radius: 8px; padding: 1px 4px; min-width: 10px; text-align: center;
+  }
 
   /* settings drawer */
   .set-row {
@@ -325,7 +357,7 @@
   /* ---------- pinned strip ---------- */
   #pinned { margin-bottom: 16px; }
   #pinned .pin-label {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.22em;
     color: var(--faint); margin-bottom: 6px;
   }
@@ -335,6 +367,23 @@
     padding: 7px 14px; margin-bottom: 4px;
   }
   #pinned .pin-row .star { color: var(--warn); flex: none; }
+
+  /* ---------- day timeline ---------- */
+  .tl-lane { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+  .tl-name {
+    flex: none; width: 110px; font-size: 12.5px;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .tl-track {
+    position: relative; flex: 1; height: 16px;
+    background: var(--surface); border-radius: 2px; overflow: hidden;
+  }
+  .tl-bar {
+    position: absolute; top: 3px; bottom: 3px; border-radius: 2px;
+    background: var(--accent); opacity: 0.8; cursor: pointer; min-width: 3px;
+  }
+  .tl-bar:hover { opacity: 1; }
+  .tl-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--warn); }
   .s-role { color: var(--faint); margin-right: 4px; }
 
   /* ---------- git attention strip ---------- */
@@ -357,7 +406,7 @@
   }
   #digest summary::-webkit-details-marker { display: none; }
   #digest-label {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em;
     color: var(--faint);
   }
@@ -375,7 +424,7 @@
   #digest-range button.sel { background: var(--surface2); color: var(--ink); }
   #digest-body { margin-top: 10px; }
   .digest-day {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     color: var(--faint); font-size: 11.5px; text-transform: uppercase;
     letter-spacing: 0.22em; margin: 16px 0 6px;
   }
@@ -385,7 +434,7 @@
   }
   .digest-item .di-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
   .digest-item .di-proj {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     text-transform: uppercase; letter-spacing: 0.05em;
     font-weight: 500; font-size: 14.5px;
   }
@@ -405,7 +454,7 @@
   /* ---------- dormant ---------- */
   #dormant { margin-top: 26px; }
   #dormant summary {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     cursor: pointer; color: var(--faint); font-size: 12px;
     text-transform: uppercase; letter-spacing: 0.22em; user-select: none;
   }
@@ -426,7 +475,7 @@
     background: var(--surface); flex: none;
   }
   .mc-title {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     font-size: 16px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
   }
   .mc-sub { color: var(--faint); font-size: 12px; }
@@ -449,7 +498,7 @@
     min-width: 0;
   }
   .mc-pane-head .mc-proj {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     text-transform: uppercase; letter-spacing: 0.05em;
     font-weight: 500; font-size: 15px; cursor: pointer;
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -485,7 +534,7 @@
     padding: 16px 22px 12px; border-bottom: 1px solid var(--line);
   }
   #drawer .d-head h2 {
-    font-family: 'Oswald', 'Arial Narrow', sans-serif;
+    font-family: var(--disp-font);
     font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
   }
   #drawer .d-head .d-path {
@@ -621,6 +670,7 @@
   <div id="quota"></div>
   <span id="clock" class="flap" title="board time"></span>
   <button id="mc-btn" title="Mission Control — every live session at once">▦</button>
+  <button id="bell-btn" title="Catch-up — what happened while you were away">🔔<span id="bell-badge" hidden></span></button>
   <button id="gear" title="Settings">⚙</button>
 </header>
 
@@ -995,6 +1045,8 @@ function renderDigest(state) {
 }
 
 function render(state) {
+  if (state.theme && state.theme !== 'board') document.documentElement.dataset.theme = state.theme;
+  else delete document.documentElement.dataset.theme;
   liveIds = new Set((state.liveSessions || []).map((s) => s.sessionId));
   // quota
   const q = state.quota;
@@ -1035,6 +1087,7 @@ function render(state) {
 
   renderGitAttention(state);
   renderPinned(state);
+  if (typeof renderBell === 'function') renderBell(state);
   if (typeof mcSync === 'function') mcSync();
   renderDigest(state);
 
@@ -1244,9 +1297,26 @@ function renderDetail(d, name) {
   }
   const muteBtn = `<div style="margin-bottom:10px"><button class="copy" data-mute="${esc(d.path)}" data-muted="${d.muted ? '1' : ''}" title="Per-project desktop notifications">${
     d.muted ? '🔕 muted — click to unmute' : '🔔 notifying — click to mute'}</button></div>`;
+  const statCompact = (stat) => {
+    const ins = /(\d+) insertion/.exec(stat || '');
+    const del = /(\d+) deletion/.exec(stat || '');
+    return [ins && `+${ins[1]}`, del && `−${del[1]}`].filter(Boolean).join(' ');
+  };
+  const commitRows = (d.commits || []).map((c) => `
+    <li>
+      <span class="s-title" title="${esc(c.stat || '')}">
+        <code class="mono" style="color:var(--faint)">${esc(c.sha)}</code>
+        ${c.claude ? '<span class="badge" title="Co-authored by Claude">✳ claude</span>' : ''}
+        ${esc(c.subject)}
+      </span>
+      ${c.sessionId ? `<button class="copy" data-session="${esc(c.sessionId)}" title="${esc(c.sessionTitle || '')}">session →</button>` : ''}
+      <span class="s-when">${esc(statCompact(c.stat))}</span>
+      <span class="s-when">${relTime(c.ts)}</span>
+    </li>`).join('');
   $('#d-body').innerHTML =
     muteBtn +
     dSection(`Sessions — ${d.sessions.length}`, sessions, 'No sessions recorded.') +
+    dSection(`What changed — last ${(d.commits || []).length} commits`, commitRows ? `<ul class="d-sessions">${commitRows}</ul>` : null, 'No git history here.') +
     dSection('CLAUDE.md', d.claudeMd.length ? dFiles(d.claudeMd, 'name') : null, 'No CLAUDE.md — sessions here start without project instructions.') +
     dSection(`Memory — ${d.memory.length} file${d.memory.length === 1 ? '' : 's'}`, d.memory.length ? dFiles(d.memory, 'name') : null, 'No memory yet.') +
     dSection(`Skills, agents & commands — ${caps.length}`, caps.length ? dFiles(caps, 'name') : null, 'None in .claude/skills, .claude/agents, or .claude/commands.') +
@@ -1565,10 +1635,17 @@ async function runSearch(q, deep) {
         <span class="s-when">${esc(p.projectName)}</span>
         <span class="s-when">${relTime(p.timestamp)}</span>
       </li>`).join('');
+    const chatRows = (d.chats || []).map((m) => `
+      <li>
+        <span class="s-title" data-chat="${esc(m.chatId)}" data-hl="${esc(hl)}" title="Click to open at this match">${esc(m.snippet)}</span>
+        <span class="s-when">${esc(m.name.slice(0, 40))}</span>
+        <span class="s-when">${m.ts ? relTime(m.ts) : ''}</span>
+      </li>`).join('');
     $('#d-body').innerHTML =
       dSection(`Session titles — ${d.titles.length}`, titleRows ? `<ul class="d-sessions">${titleRows}</ul>` : null, 'No title matches.') +
       dSection(`Prompts — ${d.prompts.length}`, promptRows ? `<ul class="d-sessions">${promptRows}</ul>` : null, 'No prompt matches.') +
-      deepSection;
+      deepSection +
+      (d.chats ? dSection(`Claude.ai chats — ${d.chats.length}`, chatRows ? `<ul class="d-sessions">${chatRows}</ul>` : null, 'No chat matches.') : '');
   } catch {
     $('#d-body').innerHTML = '<div class="d-empty" style="padding:20px 0">Search failed.</div>';
   }
@@ -1624,11 +1701,22 @@ async function openSettings() {
         <span class="set-label">Usage meters<span class="set-sub">fetches your own usage from Anthropic's API using your Claude Code sign-in (kept in memory) — the dashboard's only automatic network call</span></span>
         <input type="checkbox" id="set-usage" ${c.usageApi !== false ? 'checked' : ''}>
       </div>
+      <div class="set-row">
+        <span class="set-label">Theme<span class="set-sub">Departures board follows light/dark; Phosphor is always-dark green terminal</span></span>
+        <select id="set-theme">
+          <option value="board" ${c.theme !== 'phosphor' ? 'selected' : ''}>Departures board</option>
+          <option value="phosphor" ${c.theme === 'phosphor' ? 'selected' : ''}>Phosphor</option>
+        </select>
+      </div>
       <div class="set-row">
         <span class="set-label">Weekly budget<span class="set-sub">estimated $ per trailing 7 days — header meter plus alerts at 75/90/100%; 0 turns it off</span></span>
         <input type="text" id="set-budget" inputmode="numeric" style="width:70px;text-align:right"
           value="${c.weeklyBudget || 0}" placeholder="0">
       </div>
+      <div class="set-row">
+        <span class="set-label">Claude.ai chats<span class="set-sub">import conversations.json from your claude.ai export (Settings → Privacy → Export data)</span></span>
+        <input type="file" id="set-chats" accept=".json,application/json" style="max-width:210px;font-size:11px;color:var(--muted)">
+      </div>
       <div class="set-row">
         <span class="set-label">Version ${esc(c.version || '?')}<span class="set-sub">checks GitHub only when you click — never automatically</span></span>
         <span id="set-update-result" style="color:var(--faint);font-size:12px"></span>
@@ -1673,6 +1761,21 @@ async function openSettings() {
       saveSetting('/api/config', { notifications: e.target.checked }, e.target.checked ? 'Notifications on' : 'Notifications off'));
     $('#set-usage').addEventListener('change', (e) =>
       saveSetting('/api/config', { usageApi: e.target.checked }, e.target.checked ? 'Usage meters on' : 'Usage meters off — header falls back to the statusline cache'));
+    $('#set-chats').addEventListener('change', async (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+      toast('Importing chats…');
+      try {
+        const body = await file.text();
+        const r = await fetch('/api/chats-import', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body });
+        const out = await r.json();
+        toast(out.ok ? `Imported ${out.count} chats — find them in ⌘K` : `Import failed: ${out.error}`);
+      } catch {
+        toast("Couldn't import that file");
+      }
+    });
+    $('#set-theme').addEventListener('change', (e) =>
+      saveSetting('/api/config', { theme: e.target.value }, `Theme: ${e.target.selectedOptions[0].text}`));
     $('#set-budget').addEventListener('change', (e) => {
       const n = Math.max(0, Math.round(Number(e.target.value) || 0));
       e.target.value = n;
@@ -1853,6 +1956,129 @@ document.addEventListener('click', (e) => {
   if (ds) runSearch(ds.dataset.deepSearch, true);
 });
 
+// ---------- claude.ai chats (imported) ----------
+async function openChats() {
+  openDrawerShell('Claude.ai chats', '');
+  try {
+    const r = await fetch('/api/chats');
+    if (!r.ok) throw new Error();
+    const chats = await r.json();
+    $('#d-path').textContent = chats.length
+      ? `${chats.length} imported chats — update anytime from Settings`
+      : '';
+    const rows = chats.map((c) => `
+      <li>
+        <span class="s-title" data-chat="${esc(c.id)}" title="Click to read">${esc(c.name)}</span>
+        <span class="s-when">${c.count} msgs</span>
+        <span class="s-when">${relTime(c.updatedAt)}</span>
+      </li>`).join('');
+    $('#d-body').innerHTML = rows
+      ? `<ul class="d-sessions" style="margin-top:12px">${rows}</ul>`
+      : `<div class="d-empty" style="padding:20px 0">No chats imported yet. Export from claude.ai
+         (Settings → Privacy → Export data), then import <code class="mono">conversations.json</code>
+         from the ⚙ settings panel here.</div>`;
+  } catch {
+    $('#d-body').innerHTML = '<div class="d-empty" style="padding:20px 0">Couldn\'t load chats.</div>';
+  }
+}
+
+async function openChat(id, highlight) {
+  openDrawerShell('Chat', '');
+  try {
+    const r = await fetch(`/api/chat?id=${encodeURIComponent(id)}`);
+    if (!r.ok) throw new Error();
+    const c = await r.json();
+    $('#d-title').textContent = c.name;
+    $('#d-path').textContent = `claude.ai · ${c.count} messages · ${relTime(c.updatedAt)}`;
+    $('#d-actions').innerHTML = '<button class="copy" data-chats-back>← all chats</button>';
+    const st = { lastDay: '' };
+    $('#d-body').innerHTML = transcriptHtml(
+      c.messages.map((m) => ({ kind: m.who === 'you' ? 'user' : 'assistant', ts: m.ts, text: m.text })), st);
+    if (highlight) {
+      const needle = highlight.toLowerCase();
+      const hit = [...$('#d-body').querySelectorAll('.t-turn')]
+        .find((el) => el.textContent.toLowerCase().includes(needle));
+      if (hit) {
+        hit.scrollIntoView({ block: 'center' });
+        hit.classList.add('hl-flash');
+        setTimeout(() => hit.classList.remove('hl-flash'), 2400);
+      }
+    }
+  } catch {
+    $('#d-body').innerHTML = '<div class="d-empty" style="padding:20px 0">Couldn\'t load this chat.</div>';
+  }
+}
+
+document.addEventListener('click', (e) => {
+  const ch = e.target.closest('[data-chat]');
+  if (ch) { openChat(ch.dataset.chat, ch.dataset.hl); return; }
+  if (e.target.closest('[data-chats-back]')) openChats();
+});
+
+// ---------- day timeline ----------
+async function openTimeline() {
+  openDrawerShell('Last 24 hours', 'one lane per project · amber ticks = needed you');
+  try {
+    const r = await fetch('/api/stats');
+    if (!r.ok) throw new Error();
+    const s = await r.json();
+    const now = Date.now();
+    const t0 = now - 24 * 3600000;
+    const pct = (t) => Math.max(0, Math.min(100, ((t - t0) / (now - t0)) * 100));
+    const byProject = new Map();
+    for (const row of s.timeline || []) {
+      if (!byProject.has(row.project)) byProject.set(row.project, []);
+      byProject.get(row.project).push(row);
+    }
+    const ticks = (lastState?.events || [])
+      .filter((e) => e.kind === 'needs you' && e.at >= t0);
+    const lanes = [...byProject.entries()].map(([proj, rows]) => {
+      const bars = rows.map((row) => `<span class="tl-bar" data-session="${esc(row.sessionId)}"
+        title="${esc(`${row.title} — ${new Date(row.start).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })}–${new Date(row.end).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })}`)}"
+        style="left:${pct(row.start).toFixed(1)}%;width:${Math.max(0.8, pct(row.end) - pct(row.start)).toFixed(1)}%"></span>`).join('');
+      const marks = ticks.filter((e) => e.project === proj)
+        .map((e) => `<span class="tl-tick" title="${esc(`needed you — ${relTime(e.at)}`)}" style="left:${pct(e.at).toFixed(1)}%"></span>`).join('');
+      return `<div class="tl-lane"><span class="tl-name disp">${esc(proj)}</span><div class="tl-track">${bars}${marks}</div></div>`;
+    }).join('');
+    const hourMarks = [-24, -18, -12, -6, 0].map((h) =>
+      `<span>${new Date(now + h * 3600000).toLocaleTimeString(undefined, { hour: 'numeric' })}</span>`).join('');
+    $('#d-body').innerHTML = lanes
+      ? `<div style="margin-top:12px">${lanes}</div><div class="hours-labels" style="margin-left:120px">${hourMarks}</div>`
+      : '<div class="d-empty" style="padding:20px 0">No sessions in the last 24 hours.</div>';
+  } catch {
+    $('#d-body').innerHTML = '<div class="d-empty" style="padding:20px 0">Couldn\'t load the timeline.</div>';
+  }
+}
+
+// ---------- catch-up bell ----------
+function seenAt() { return Number(localStorage.getItem('claudeDashSeenAt') || 0); }
+
+function renderBell(state) {
+  const unseen = (state.events || []).filter((e) => e.at > seenAt()).length;
+  const b = $('#bell-badge');
+  b.hidden = !unseen;
+  if (unseen) b.textContent = unseen > 9 ? '9+' : String(unseen);
+}
+
+function openCatchUp() {
+  openDrawerShell('Catch-up', 'notification history since the server started');
+  const events = (lastState && lastState.events) || [];
+  const since = seenAt();
+  const rows = events.map((e) => `
+    <li ${e.at > since ? 'style="border-left:2px solid var(--warn);padding-left:8px"' : ''}>
+      <span class="flap disp st" style="flex:none">${esc(e.kind)}</span>
+      <span class="s-title">${esc(e.project)} — ${esc(e.body)}</span>
+      <span class="s-when">${relTime(e.at)}</span>
+    </li>`).join('');
+  $('#d-body').innerHTML = rows
+    ? `<ul class="d-sessions" style="margin-top:12px">${rows}</ul>`
+    : '<div class="d-empty" style="padding:20px 0">Nothing yet — waiting, stuck, and budget events will show up here.</div>';
+  localStorage.setItem('claudeDashSeenAt', String(Date.now()));
+  renderBell(lastState || {});
+}
+
+$('#bell-btn').addEventListener('click', openCatchUp);
+
 // ---------- weekly report ----------
 let weekReport = null;
 async function openWeekReport() {
@@ -1941,6 +2167,9 @@ function paletteItems(q) {
   items.push({ k: '▦', label: 'Mission Control', hint: 'every live session at once', run: openMissionControl });
   items.push({ k: '▲', label: 'Stats', hint: 'heatmap · models · hours', run: openStats });
   items.push({ k: '☰', label: 'Your week with Claude', hint: '7-day report · export', run: openWeekReport });
+  items.push({ k: '━', label: 'Day timeline', hint: 'last 24h, lane per project', run: openTimeline });
+  items.push({ k: '💬', label: 'Claude.ai chats', hint: 'imported from your export', run: openChats });
+  items.push({ k: '🔔', label: 'Catch-up', hint: 'notification history', run: openCatchUp });
   for (const l of st.liveSessions || []) {
     items.push({ k: '●', label: `Watch live: ${l.projectName} — ${l.title || ''}`, hint: l.status, run: () => openTranscript(l.sessionId) });
   }

package/server.js

@@ -9,11 +9,15 @@ const { Collector } = require('./lib/collector');
 const { openSession, openNewSession } = require('./lib/opener');
 const { projectDetail } = require('./lib/detail');
 const { sessionTranscript } = require('./lib/transcript-view');
-const { searchHistory, searchTitles, searchTranscripts } = require('./lib/search');
+const { searchHistory, searchTitles, searchTranscripts, parseSearchQuery } = require('./lib/search');
+const { readChats, saveChats, searchChats } = require('./lib/chats');
 const { sessionTitle } = require('./lib/transcripts');
 const { friendlyName } = require('./lib/names');
 const cfg = require('./lib/config');
 const { isProjectMuted } = require('./lib/notify');
+const { recentCommits, linkCommitsToSessions } = require('./lib/gitlog');
+const { demoState, demoStats, demoSession } = require('./lib/demo');
+const DEMO = process.env.CLAUDE_DASH_DEMO === '1';
 
 const PORT = Number(process.env.CLAUDE_DASH_PORT) || 4517;
 // Default loopback-only. For remote access prefer `tailscale serve` (keeps
@@ -75,7 +79,7 @@ const server = http.createServer((req, res) => {
   if (url === '/' || url === '/index.html') {
     res.writeHead(200, {
       'Content-Type': 'text/html; charset=utf-8',
-      'Content-Security-Policy': "default-src 'self'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:; connect-src 'self'",
+      'Content-Security-Policy': "default-src 'self'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: 'self'; connect-src 'self'",
     });
     res.end(indexHtml());
     return;
@@ -96,6 +100,33 @@ const server = http.createServer((req, res) => {
     return;
   }
 
+  // Demo mode: canned data for every API route, static assets as normal.
+  if (DEMO && url.startsWith('/api/')) {
+    if (url === '/api/state') return json(res, 200, demoState());
+    if (url === '/api/health') return json(res, 200, { ok: true, demo: true, version: VERSION });
+    if (url === '/api/stats') return json(res, 200, demoStats());
+    if (url === '/api/session') return json(res, 200, demoSession());
+    if (url === '/api/search') return json(res, 200, { q: '', prompts: [], titles: [], transcripts: null });
+    if (url === '/api/project') {
+      return json(res, 200, {
+        path: '/demo/acme-storefront', sessions: [], commits: [], muted: false,
+        claudeMd: [], memory: [], skills: [], agents: [], commands: [], settings: {},
+      });
+    }
+    if (url === '/api/config' && req.method === 'GET') {
+      return json(res, 200, { demo: true, notifications: true, usageApi: false, weeklyBudget: 200, terminals: [], resolvedTerminal: { id: 'terminal', label: 'Terminal' }, claudeApp: false, names: {}, ignores: [], version: VERSION, errors: [] });
+    }
+    if (url === '/api/events') {
+      res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive' });
+      const send = () => res.write(`data: ${JSON.stringify(demoState())}\n\n`);
+      send();
+      const t = setInterval(send, 5000);
+      req.on('close', () => clearInterval(t));
+      return;
+    }
+    return json(res, 200, { ok: false, error: 'not available in demo mode' });
+  }
+
   // Bundled font files only — no traversal, extension whitelisted.
   if (url.startsWith('/fonts/')) {
     const name = path.basename(url);
@@ -176,9 +207,10 @@ const server = http.createServer((req, res) => {
       res.end('{"error":"unknown project"}');
       return;
     }
-    projectDetail(known)
-      .then((detail) => {
+    Promise.all([projectDetail(known), recentCommits(known)])
+      .then(([detail, commits]) => {
         detail.sessions = collector.allSessions(known);
+        detail.commits = linkCommitsToSessions(commits, detail.sessions);
         detail.muted = isProjectMuted(known, cfg.readConfig().mutedProjects);
         res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
         res.end(JSON.stringify(detail));
@@ -257,6 +289,38 @@ const server = http.createServer((req, res) => {
     return;
   }
 
+  // Claude.ai chats: imported once from the official export, then read-only.
+  if (url === '/api/chats-import' && req.method === 'POST') {
+    if (!sameOrigin(req)) return json(res, 403, { ok: false, error: 'forbidden' });
+    let body = '';
+    req.on('data', (c) => {
+      body += c;
+      if (body.length > 100 * 1024 * 1024) req.destroy(); // exports are ~tens of MB
+    });
+    req.on('end', () => {
+      try {
+        const raw = JSON.parse(body);
+        if (!Array.isArray(raw)) return json(res, 400, { ok: false, error: 'expected the conversations.json array' });
+        const count = saveChats(raw);
+        json(res, 200, { ok: true, count });
+      } catch (e) {
+        json(res, 400, { ok: false, error: String(e.message).slice(0, 200) });
+      }
+    });
+    return;
+  }
+
+  if (url === '/api/chats') {
+    return json(res, 200, readChats().map(({ messages, ...meta }) => meta));
+  }
+
+  if (url === '/api/chat') {
+    const id = new URL(req.url, 'http://localhost').searchParams.get('id') || '';
+    const chat = readChats().find((c) => c.id === id);
+    if (!chat) return json(res, 404, { error: 'unknown chat' });
+    return json(res, 200, chat);
+  }
+
   if (url === '/api/session') {
     const params = new URL(req.url, 'http://localhost').searchParams;
     const id = params.get('id') || '';
@@ -296,8 +360,14 @@ const server = http.createServer((req, res) => {
         for (const r of prompts) r.projectName = friendlyName(r.project);
         for (const r of titles) r.projectName = friendlyName(r.project);
         if (transcripts) for (const r of transcripts.matches) r.projectName = friendlyName(r.project);
+        let chats = null;
+        if (deep) {
+          const { text, since } = parseSearchQuery(q);
+          const pool = since ? readChats().filter((c) => c.updatedAt >= since) : readChats();
+          chats = searchChats(text, pool);
+        }
         res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
-        res.end(JSON.stringify({ q, prompts, titles, transcripts }));
+        res.end(JSON.stringify({ q, prompts, titles, transcripts, chats }));
       })
       .catch((e) => {
         res.writeHead(500, { 'Content-Type': 'application/json' });
@@ -380,13 +450,52 @@ const pingTimer = setInterval(() => {
 }, 25_000);
 pingTimer.unref();
 
-collector.start().then(() => {
+// Set by bin/claude-dashboard.js (the npx / global-install path). Services
+// run this file directly and never auto-open a browser.
+const OPEN = process.env.CLAUDE_DASH_OPEN === '1';
+const DASH_URL = `http://127.0.0.1:${PORT}`;
+
+function openBrowser(url) {
+  const { execFile } = require('child_process');
+  if (process.platform === 'darwin') execFile('open', [url], () => {});
+  else if (process.platform === 'win32') execFile('cmd', ['/c', 'start', '', url], () => {});
+  else execFile('xdg-open', [url], () => {});
+}
+
+(DEMO ? Promise.resolve() : collector.start()).then(() => {
   server.listen(PORT, HOST, () => {
-    console.log(`claude-dashboard listening on http://${HOST}:${PORT}`);
+    console.log(`claude-dashboard listening on ${DASH_URL}${DEMO ? ' (demo mode)' : ''}`);
+    if (OPEN) {
+      console.log('opening it in your browser… (tip: the browser can install it as an app — Safari: File → Add to Dock; Chrome/Edge: the install icon in the address bar)');
+      openBrowser(DASH_URL);
+    }
   });
 });
 
 server.on('error', (err) => {
+  // Someone ran npx while the dashboard is already up: just take them there.
+  if (err.code === 'EADDRINUSE') {
+    http.get(`${DASH_URL}/api/health`, (r) => {
+      let body = '';
+      r.on('data', (c) => (body += c));
+      r.on('end', () => {
+        let ok = false;
+        try { ok = JSON.parse(body).ok === true; } catch { /* not ours */ }
+        if (ok) {
+          console.log(`claude-dashboard is already running at ${DASH_URL}`);
+          if (OPEN) openBrowser(DASH_URL);
+          process.exit(0);
+        } else {
+          console.error(`port ${PORT} is in use by something else — set CLAUDE_DASH_PORT to pick another`);
+          process.exit(1);
+        }
+      });
+    }).on('error', () => {
+      console.error(`port ${PORT} is in use by something else — set CLAUDE_DASH_PORT to pick another`);
+      process.exit(1);
+    });
+    return;
+  }
   console.error(`server error: ${err.message}`);
   process.exit(1);
 });