claude-mission-control 1.13.0 → 1.15.0

package/README.md

@@ -35,6 +35,14 @@ Claude Code runs in a terminal. Once you have two or three sessions going, you l
 
 *Every screenshot here is demo data (`CLAUDE_DASH_DEMO=1`). The projects are invented.*
 
+**New in 1.15.0**
+
+- Phone view: see who needs you and your limits on your phone, over home Wi-Fi or Tailscale. Opt-in, read-only, locked to a pairing key in the link.
+
+**New in 1.14.0**
+
+- Cost per commit in each project's slide-over: every commit made during a Claude session shows its share of that session's cost, with a summary of cost per commit and spend in sessions that committed nothing.
+
 **New in 1.13.0**
 
 - Background sessions from `claude --bg` and Agent View carry a `BG` chip, the name Agent View gives them, and its one-line summary of what they did.
@@ -194,6 +202,7 @@ If something looks off, the log is at `~/Library/Logs/claude-dashboard.log`. To
 ![Stats view: activity heatmap, busiest hours, weekly rhythm, 90-day spend, per-model costs, the most expensive sessions, and models by project](docs/screenshots/stats.png)
 
 - **Project details** — click any project's name for a slide-over with its full session list, recent git commits, rendered CLAUDE.md, per-project memory files, skills/agents/commands from `.claude/`, and settings (permissions, MCP servers, allowed tools), plus the resolved **Toolset** below. Read-only; also a quick audit of which projects are missing instructions or memory. Esc closes.
+- **Cost per commit** — in each project's slide-over, every commit made during a Claude session carries a `≈$` figure: that session's cost split evenly over the commits it made (±5 minutes of its activity). Hover for which session it came from. The line above the list sums it up: cost per commit, how many of the recent commits came from a Claude session, and what was spent in sessions that committed nothing. It's an even split, so a one-line version bump counts the same as a feature.
 - **Toolset** — inside the project slide-over: what Claude Code would actually use in that project. Every installed plugin, every agent and skill from the project, your user dir, and enabled plugins, and every MCP server that applies, each marked on or off with where it came from and which settings scope decided it, resolved with Claude Code's own precedence (managed › local › project › user, deny beats allow, project agents shadow user agents shadow plugin agents). An amber list at the top flags things worth a look: a plugin enabled but not installed or gone stale, a deny rule naming an agent that no longer exists, a server that needs auth, a settings file that doesn't parse. The `⧉` on a row copies the exact snippet to flip it, aimed at `.claude/settings.local.json`; MCP toggles live in Claude's own registry, so that recipe tells you to run `/mcp` in a session instead (servers from a project's `.mcp.json` also honour the settings keys `enabledMcpjsonServers`, `disabledMcpjsonServers` and `enableAllProjectMcpServers`, and their recipes use those). Buttons at the foot reveal the project's settings files in Finder. Read-only — the dashboard never edits Claude configuration.
 
 ![Toolset in the project slide-over: plugins, agents, skills and MCP servers marked on or off with their source and deciding settings scope, an amber warning for a plugin enabled but not installed, and buttons for the project's settings files](docs/screenshots/toolset.png)
@@ -223,6 +232,16 @@ A SwiftBar plugin lives in `menubar/claude-dash.15s.sh`. The menu bar shows `❯
 
 Setup: `brew install --cask swiftbar`, then point SwiftBar's plugin folder at this repo's `menubar/` directory. The plugin refreshes every 15 seconds (rename the file to change the interval).
 
+## Phone view
+
+See who needs you from your phone. Settings → **Phone view** turns on a second, read-only listener on your home Wi-Fi or on Tailscale. It shows each running session, what it's waiting on, and your limit meters with the forecast.
+
+1. Turn on **Phone view** in settings. If macOS asks whether node may accept incoming connections, click Allow.
+2. Pick **Home Wi-Fi**, or **Tailscale** to reach it away from home (Tailscale on both devices, your devices only).
+3. Click **copy link**, then paste it into Safari on your phone (Universal Clipboard) or AirDrop it. Add it to your home screen if you like.
+
+The link carries a pairing key after `#`, which browsers never send to a server; the page sends it as a header instead. Without the key the listener answers nothing, and 20 wrong keys from one address lock that address out for ten minutes. **new link** replaces the key, so every old link stops working. The phone listener serves only that page and its feed: no transcripts, no file paths, nothing that runs a command. It stays off until you turn it on, never runs in demo mode, and follows your Mac's address when the network changes. The port is 4518 (`CLAUDE_DASH_REMOTE_PORT` changes it).
+
 ## Settings
 
 The ⚙ gear in the header opens settings — no JSON editing required:

package/lib/config.js

@@ -34,7 +34,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: [], sessionNames: {}, sessionNotes: {}, idleNagMinutes: 60, theme: 'board' };
+const DEFAULTS = { terminal: 'ghostty', notifications: true, usageApi: true, mutedProjects: [], weeklyBudget: 0, pinnedSessions: [], sessionNames: {}, sessionNotes: {}, idleNagMinutes: 60, theme: 'board', remoteEnabled: false, remoteMode: 'lan' };
 
 // The one theme list: updateConfig validates against it and GET /api/config
 // serves it, so the settings dropdown can never offer a value the server
@@ -83,6 +83,13 @@ function updateConfig(patch) {
     next.idleNagMinutes = Math.round(patch.idleNagMinutes);
   }
   if (THEMES.some((t) => t.id === patch.theme)) next.theme = patch.theme;
+  // Phone view: turning it on mints a pairing key; rotating replaces it, so
+  // every link handed out before stops working.
+  if (typeof patch.remoteEnabled === 'boolean') next.remoteEnabled = patch.remoteEnabled;
+  if (patch.remoteMode === 'lan' || patch.remoteMode === 'tailscale') next.remoteMode = patch.remoteMode;
+  if (patch.rotateRemoteKey === true || (next.remoteEnabled && !next.remoteKey)) {
+    next.remoteKey = require('crypto').randomBytes(24).toString('base64url');
+  }
   writeJson(CONFIG_FILE, next);
   return next;
 }

package/lib/demo.js

@@ -463,5 +463,29 @@ function demoToolset() {
   };
 }
 
-module.exports = { demoState, demoStats, demoSession, demoChanges, demoInventory, demoToolset };
+// Project slide-over for the demo: commits with their cost split from the
+// sessions that made them (see commitCosts in lib/gitlog.js).
+function demoProject() {
+  const now = Date.now();
+  const c = (sha, ago, subject, stat, cost, title, n) => ({
+    sha, ts: now - ago, subject, author: 'Demo', claude: cost != null, stat,
+    ...(cost != null ? { cost, costFrom: [{ sessionId: S1, title, commits: n }], sessionId: S1, sessionTitle: title } : {}),
+  });
+  return {
+    path: '/demo/acme-storefront', sessions: [], muted: false,
+    claudeMd: [], memory: [], skills: [], agents: [], commands: [], settings: {},
+    toolset: demoToolset(),
+    commits: [
+      c('9f3c2a1', 6 * MIN, 'Checkout: create the payment intent server-side', '3 files changed, 64 insertions(+), 9 deletions(-)', 8.2, 'Wire Stripe checkout into the cart', 3),
+      c('41be07d', 22 * MIN, 'Cart: call the checkout endpoint and redirect', '2 files changed, 31 insertions(+), 4 deletions(-)', 8.2, 'Wire Stripe checkout into the cart', 3),
+      c('c0d9e55', 41 * MIN, 'Remove the legacy checkout page', '1 file changed, 0 insertions(+), 212 deletions(-)', 8.2, 'Wire Stripe checkout into the cart', 3),
+      c('77a1f30', 3 * HOUR, 'Onboarding: account and store screens', '6 files changed, 240 insertions(+), 12 deletions(-)', 9.1, 'Design the onboarding flow', 2),
+      c('e52b8c4', 3 * HOUR + 40 * MIN, 'Onboarding: first-product screen', '3 files changed, 118 insertions(+), 3 deletions(-)', 9.1, 'Design the onboarding flow', 2),
+      c('1a6d9f2', 26 * HOUR, 'Bump dependencies', '2 files changed, 14 insertions(+), 14 deletions(-)', null),
+    ],
+    commitSummary: { total: 6, withSession: 5, perCommit: 8.56, noCommitSpend: 3.4 },
+  };
+}
+
+module.exports = { demoState, demoStats, demoSession, demoChanges, demoInventory, demoToolset, demoProject };
 

package/lib/gitlog.js

@@ -44,6 +44,47 @@ function linkCommitsToSessions(commits, sessions) {
   });
 }
 
+// Cost per commit: each session's cost is split evenly across the commits
+// made inside its activity window (same padded window as above). A commit
+// inside two overlapping sessions gets a share of both. Sessions that cost
+// something but committed nothing, since the oldest listed commit, are
+// reported separately rather than spread over unrelated commits.
+const round2 = (n) => Math.round(n * 100) / 100;
+function commitCosts(commits, sessions) {
+  const cost = new Map(); // sha -> usd
+  const from = new Map(); // sha -> [{ sessionId, title, commits }]
+  const oldest = commits.length ? Math.min(...commits.map((c) => c.ts)) : Infinity;
+  let attributed = 0;
+  let noCommit = 0;
+  for (const s of sessions || []) {
+    const usd = s.estCost || 0;
+    if (usd < 0.005 || !s.lastActivityAt) continue;
+    const start = (s.startedAt || s.lastActivityAt) - PAD;
+    const end = s.lastActivityAt + PAD;
+    const inside = commits.filter((c) => c.ts >= start && c.ts <= end);
+    if (!inside.length) {
+      if (s.lastActivityAt >= oldest) noCommit += usd;
+      continue;
+    }
+    attributed += usd;
+    for (const c of inside) {
+      cost.set(c.sha, (cost.get(c.sha) || 0) + usd / inside.length);
+      from.set(c.sha, [...(from.get(c.sha) || []), { sessionId: s.sessionId, title: s.title || null, commits: inside.length }]);
+    }
+  }
+  const out = commits.map((c) => (cost.has(c.sha) ? { ...c, cost: round2(cost.get(c.sha)), costFrom: from.get(c.sha) } : c));
+  const withSession = cost.size;
+  return {
+    commits: out,
+    summary: {
+      total: commits.length,
+      withSession,
+      perCommit: withSession ? round2(attributed / withSession) : null,
+      noCommitSpend: round2(noCommit),
+    },
+  };
+}
+
 function recentCommits(projectPath, limit = 30) {
   return new Promise((resolve) => {
     execFile(
@@ -55,4 +96,4 @@ function recentCommits(projectPath, limit = 30) {
   });
 }
 
-module.exports = { parseGitLog, linkCommitsToSessions, recentCommits };
+module.exports = { parseGitLog, linkCommitsToSessions, commitCosts, recentCommits };

package/lib/remote.js

@@ -0,0 +1,180 @@
+'use strict';
+// Phone view: an opt-in second listener on the home network or Tailscale.
+//
+// It serves exactly three things: the phone page, the bundled fonts, and a
+// small read-only JSON feed (who needs you, limits). No transcripts, no
+// paths, no /api/* routes, nothing that runs a command. The feed needs the
+// pairing key as a Bearer header; the key travels to the phone in the URL
+// fragment (#k=...), which browsers never send to a server.
+const http = require('http');
+const crypto = require('crypto');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const PORT = Number(process.env.CLAUDE_DASH_REMOTE_PORT) || 4518;
+const FAIL_LIMIT = 20; // bad keys per address per window before we stop answering
+const FAIL_WINDOW_MS = 10 * 60 * 1000;
+
+function newKey() {
+  return crypto.randomBytes(24).toString('base64url');
+}
+
+const isTailscale = (ip) => {
+  const [a, b] = ip.split('.').map(Number);
+  return a === 100 && b >= 64 && b <= 127; // 100.64.0.0/10, Tailscale's CGNAT range
+};
+const isPrivate = (ip) => {
+  const [a, b] = ip.split('.').map(Number);
+  return a === 10 || (a === 172 && b >= 16 && b <= 31) || (a === 192 && b === 168);
+};
+
+// The address to listen on for a mode, from os.networkInterfaces() output.
+function pickAddress(ifaces, mode) {
+  const v4 = [];
+  for (const [name, list] of Object.entries(ifaces || {})) {
+    for (const a of list || []) {
+      if ((a.family === 'IPv4' || a.family === 4) && !a.internal) v4.push({ name, ip: a.address });
+    }
+  }
+  if (mode === 'tailscale') return (v4.find((a) => isTailscale(a.ip)) || {}).ip || null;
+  const lan = v4.filter((a) => isPrivate(a.ip) && !isTailscale(a.ip));
+  // Prefer the usual Wi-Fi/Ethernet interfaces over VPN and bridge ones.
+  return (lan.find((a) => /^(en|eth|wl)/.test(a.name)) || lan[0] || {}).ip || null;
+}
+
+function checkKey(authHeader, key) {
+  if (!key || typeof authHeader !== 'string' || !authHeader.startsWith('Bearer ')) return false;
+  const a = Buffer.from(authHeader.slice(7));
+  const b = Buffer.from(key);
+  return a.length === b.length && crypto.timingSafeEqual(a, b);
+}
+
+// The phone feed: only what the phone page shows.
+function mobileState(state) {
+  const s = state || {};
+  const live = (s.liveSessions || []).map((l) => ({
+    projectName: l.projectName,
+    title: l.title || '',
+    status: l.status,
+    reason: l.waitingReason ? { kind: l.waitingReason.kind, text: String(l.waitingReason.text || '').slice(0, 200) } : null,
+    waitingMin: l.waitingMin ?? null,
+    quietMin: l.quietMin ?? null,
+    startedAt: l.startedAt || null,
+    estCost: l.estCost ?? null,
+    contextPct: l.context ? l.context.pct : null,
+    background: !!l.background,
+  }));
+  const q = s.quota;
+  const f = s.forecast || {};
+  return {
+    generatedAt: s.generatedAt || Date.now(),
+    waiting: live.filter((l) => l.status === 'waiting').length,
+    live,
+    limits: q && !q.stale ? {
+      session: q.utilization ?? null,
+      week: q.weeklyUtilization ?? null,
+      sessionHitAt: f.session ? f.session.hitAt : null,
+      weekHitAt: f.week ? f.week.hitAt : null,
+    } : null,
+  };
+}
+
+function createRemoteServer({ getState, readConfig, publicDir }) {
+  let server = null;
+  let current = null; // { host, mode }
+  let lastError = null;
+  const fails = new Map(); // ip -> { n, since }
+
+  function handle(req, res) {
+    const url = req.url.split('?')[0];
+    const ip = req.socket.remoteAddress || '';
+    const base = { 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff', 'Referrer-Policy': 'no-referrer' };
+    if (req.method !== 'GET') {
+      res.writeHead(405, base);
+      return res.end();
+    }
+    if (url === '/' || url === '/m') {
+      fs.readFile(path.join(publicDir, 'mobile.html'), (err, buf) => {
+        if (err) { res.writeHead(500, base); return res.end(); }
+        res.writeHead(200, {
+          ...base,
+          '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'",
+        });
+        res.end(buf);
+      });
+      return;
+    }
+    if (url.startsWith('/fonts/')) {
+      const name = path.basename(url);
+      if (!/^[\w-]+\.woff2$/.test(name)) { res.writeHead(404, base); return res.end(); }
+      fs.readFile(path.join(publicDir, 'fonts', name), (err, buf) => {
+        if (err) { res.writeHead(404, base); return res.end(); }
+        res.writeHead(200, { ...base, 'Content-Type': 'font/woff2', 'Cache-Control': 'max-age=86400' });
+        res.end(buf);
+      });
+      return;
+    }
+    if (url === '/m/state') {
+      const f = fails.get(ip);
+      if (f && Date.now() - f.since < FAIL_WINDOW_MS && f.n >= FAIL_LIMIT) {
+        res.writeHead(429, base);
+        return res.end();
+      }
+      if (!checkKey(req.headers.authorization, readConfig().remoteKey)) {
+        const fresh = !f || Date.now() - f.since >= FAIL_WINDOW_MS;
+        fails.set(ip, fresh ? { n: 1, since: Date.now() } : { n: f.n + 1, since: f.since });
+        res.writeHead(401, base);
+        return res.end();
+      }
+      fails.delete(ip);
+      res.writeHead(200, { ...base, 'Content-Type': 'application/json; charset=utf-8' });
+      return res.end(JSON.stringify(mobileState(getState())));
+    }
+    res.writeHead(404, base);
+    res.end();
+  }
+
+  function stop() {
+    if (server) server.close();
+    server = null;
+    current = null;
+  }
+
+  // Start, move, or stop the listener to match config. Safe to call often.
+  function apply(cfg) {
+    if (!cfg.remoteEnabled || !cfg.remoteKey) {
+      stop();
+      lastError = null;
+      return;
+    }
+    const mode = cfg.remoteMode === 'tailscale' ? 'tailscale' : 'lan';
+    const host = pickAddress(os.networkInterfaces(), mode);
+    if (!host) {
+      stop();
+      lastError = mode === 'tailscale' ? 'No Tailscale address on this Mac. Is Tailscale running?' : 'No home network address found. Is Wi-Fi connected?';
+      return;
+    }
+    if (current && current.host === host) return;
+    stop();
+    lastError = null;
+    const s = http.createServer(handle);
+    s.on('error', (err) => {
+      lastError = err.code === 'EADDRINUSE' ? `Port ${PORT} is in use. Set CLAUDE_DASH_REMOTE_PORT to pick another.` : err.message;
+      if (server === s) { server = null; current = null; }
+    });
+    s.listen(PORT, host);
+    server = s;
+    current = { host, mode };
+  }
+
+  function status(cfg) {
+    const url = current && cfg.remoteKey ? `http://${current.host}:${PORT}/#k=${cfg.remoteKey}` : null;
+    return { enabled: !!cfg.remoteEnabled, mode: cfg.remoteMode === 'tailscale' ? 'tailscale' : 'lan', running: !!current, url, error: lastError };
+  }
+
+  return { apply, status, stop };
+}
+
+module.exports = { createRemoteServer, pickAddress, mobileState, checkKey, newKey, REMOTE_PORT: PORT };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-mission-control",
-  "version": "1.13.0",
+  "version": "1.15.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

@@ -1607,6 +1607,18 @@ function renderMd(raw) {
   return `<div class="md">${out.join('')}</div>`;
 }
 
+// "≈$3.40 per commit · 18 of 30 made during a Claude session · ≈$12 in sessions with no commit"
+function commitSummaryLine(s) {
+  if (!s || !s.withSession) return '';
+  const w = costWording();
+  const parts = [
+    `${costChip(s.perCommit, { cls: '' })} per commit`,
+    `${s.withSession} of ${s.total} made during a Claude session`,
+    fmtCost(s.noCommitSpend) ? `${costChip(s.noCommitSpend, { cls: '' })} in sessions with no commit` : '',
+  ].filter(Boolean);
+  return `<div class="set-sub" style="margin:0 0 8px" title="${esc(`Each session's ${w.noun} is split evenly over the commits made while it was active (±5 minutes). Commits outside any session are left out.`)}">${parts.join(' · ')}</div>`;
+}
+
 function dSection(title, inner, empty) {
   return `<details class="d-section" open><summary>${esc(title)}</summary>${
     inner || `<div class="d-empty">${esc(empty)}</div>`}</details>`;
@@ -1697,6 +1709,8 @@ function renderDetail(d, name) {
         ${esc(c.subject)}
       </span>
       ${c.sessionId ? `<button class="copy" data-session="${esc(c.sessionId)}" title="${esc(c.sessionTitle || '')}">session →</button>` : ''}
+      ${c.cost != null ? `<span title="${esc((c.costFrom || []).map((f) =>
+        `${f.title || 'session'}: split over ${f.commits} commit${f.commits === 1 ? '' : 's'}`).join('\n'))}">${costChip(c.cost)}</span>` : ''}
       <span class="s-when">${esc(statCompact(c.stat))}</span>
       <span class="s-when">${relTime(c.ts)}</span>
     </li>`).join('');
@@ -1708,7 +1722,7 @@ function renderDetail(d, name) {
   $('#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(`What changed — last ${(d.commits || []).length} commits`, commitRows ? commitSummaryLine(d.commitSummary) + `<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.') +
@@ -2409,6 +2423,61 @@ async function saveSetting(endpoint, payload, note) {
   }
 }
 
+// Settings → Phone view: the opt-in listener for your phone (lib/remote.js).
+function phoneViewRows(r) {
+  if (!r) return '';
+  const status = !r.enabled ? 'off'
+    : r.error ? `<span style="color:var(--warn)">${esc(r.error)}</span>`
+    : r.running ? `<span style="color:var(--accent)">on</span>` : 'starting…';
+  return `
+      <div class="set-row">
+        <span class="set-label">Phone view<span class="set-sub">who needs you and your limits, on your phone; read-only, needs the pairing key in the link</span></span>
+        <input type="checkbox" id="set-remote" ${r.enabled ? 'checked' : ''}>
+      </div>
+      ${r.enabled ? `
+      <div class="set-row">
+        <span class="set-label">Reachable from<span class="set-sub">Tailscale works away from home, on your devices only; status: ${status}</span></span>
+        <select id="set-remote-mode">
+          <option value="lan" ${r.mode === 'lan' ? 'selected' : ''}>Home Wi-Fi</option>
+          <option value="tailscale" ${r.mode === 'tailscale' ? 'selected' : ''}>Tailscale</option>
+        </select>
+      </div>
+      ${r.url ? `
+      <div class="set-row">
+        <span class="set-label">Phone link<span class="set-sub">copy it, then paste on your phone (Universal Clipboard) or AirDrop it; new link turns the old one off</span></span>
+        <button class="copy" id="set-remote-copy">copy link</button>
+        <button class="copy" id="set-remote-rotate">new link</button>
+      </div>` : ''}` : ''}`;
+}
+
+function wirePhoneView(r) {
+  const toggle = $('#set-remote');
+  if (!toggle) return;
+  toggle.addEventListener('change', async (e) => {
+    await saveSetting('/api/config', { remoteEnabled: e.target.checked }, e.target.checked ? 'Phone view on' : 'Phone view off');
+    openSettings();
+  });
+  const mode = $('#set-remote-mode');
+  if (mode) mode.addEventListener('change', async (e) => {
+    await saveSetting('/api/config', { remoteMode: e.target.value }, e.target.value === 'tailscale' ? 'Phone view: Tailscale' : 'Phone view: home Wi-Fi');
+    openSettings();
+  });
+  const copy = $('#set-remote-copy');
+  if (copy) copy.addEventListener('click', async () => {
+    try {
+      await navigator.clipboard.writeText(r.url);
+      toast('Phone link copied. Paste it in Safari on your phone.');
+    } catch {
+      toast("Clipboard blocked. The link is in config.json's remoteKey.");
+    }
+  });
+  const rotate = $('#set-remote-rotate');
+  if (rotate) rotate.addEventListener('click', async () => {
+    await saveSetting('/api/config', { rotateRemoteKey: true }, 'New phone link made. The old one no longer works.');
+    openSettings();
+  });
+}
+
 async function openSettings() {
   openDrawerShell('Settings', 'changes save instantly');
   try {
@@ -2443,6 +2512,7 @@ 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>
+      ${phoneViewRows(c.remote)}
       <div class="set-row">
         <span class="set-label">Theme<span class="set-sub">Departures board follows light/dark; Newsprint is always-light; the rest are always-dark</span></span>
         <select id="set-theme">
@@ -2541,6 +2611,7 @@ 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'));
+    wirePhoneView(c.remote);
     $('#set-chats').addEventListener('change', async (e) => {
       const file = e.target.files[0];
       if (!file) return;

package/public/mobile.html

@@ -0,0 +1,180 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="Mission Control">
+<meta name="robots" content="noindex">
+<title>Mission Control</title>
+<style>
+  @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
+  @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
+  @font-face { font-family: 'Oswald'; src: url('/fonts/Oswald-Variable.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
+  :root {
+    --bg: #f5f4f0; --surface: #ffffff; --ink: #1d2326; --muted: #596264; --faint: #8a9394;
+    --line: #dedbd2; --accent: #1d7a44; --warn: #a66a00; --warn-bg: rgba(166, 106, 0, 0.10); --bad: #c0392b;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #0d1215; --surface: #151d22; --ink: #e9e4d6; --muted: #93a09e; --faint: #5d6b6b;
+      --line: #202b31; --accent: #46c073; --warn: #ffb020; --warn-bg: rgba(255, 176, 32, 0.12); --bad: #ff5f45;
+    }
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; background: var(--bg); color: var(--ink); }
+  body {
+    font: 14px/1.45 'JetBrains Mono', ui-monospace, monospace;
+    padding: max(14px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
+  }
+  .disp { font-family: Oswald, 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }
+  header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+  header h1 { margin: 0; font-size: 17px; font-weight: 600; flex: 1; }
+  header h1 .ch { color: var(--warn); }
+  #dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
+  #dot.on { background: var(--accent); }
+  #dot.err { background: var(--warn); }
+  #clock { font-weight: 700; font-variant-numeric: tabular-nums; }
+  #summary { padding: 16px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; }
+  #summary .big { font-size: 34px; font-weight: 600; line-height: 1.1; }
+  #summary.alert { background: var(--warn-bg); border-color: var(--warn); }
+  #summary.alert .big { color: var(--warn); }
+  #summary.clear .big { color: var(--accent); }
+  #summary .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
+  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
+  .card.waiting { border-color: var(--warn); border-left-width: 4px; }
+  .card .top { display: flex; align-items: center; gap: 8px; }
+  .card .proj { font-size: 18px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .st { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); }
+  .st.waiting { background: var(--warn); color: #0d1215; border-color: var(--warn); }
+  .st.busy { color: var(--accent); }
+  .badge { font-size: 11px; color: var(--accent); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
+  .title { color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
+  .reason { margin-top: 8px; color: var(--ink); overflow-wrap: anywhere; }
+  .reason .g { color: var(--warn); margin-right: 6px; }
+  .meta { margin-top: 8px; font-size: 12px; color: var(--faint); display: flex; gap: 12px; flex-wrap: wrap; }
+  .meta .warn { color: var(--warn); }
+  h2 { font-size: 12px; color: var(--muted); margin: 20px 0 8px; font-weight: 400; letter-spacing: 0.12em; }
+  .meter { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+  .meter .lbl { width: 60px; color: var(--muted); }
+  .meter .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
+  .meter .fill { display: block; height: 100%; background: var(--accent); }
+  .meter .fill.hot { background: var(--warn); }
+  .meter .fill.crit { background: var(--bad); }
+  .meter .pct { width: 44px; text-align: right; }
+  .eta { color: var(--warn); font-size: 12px; margin: -4px 0 10px 70px; }
+  #msg { color: var(--muted); padding: 24px 4px; }
+  #foot { color: var(--faint); font-size: 11px; margin-top: 18px; text-align: center; }
+</style>
+</head>
+<body>
+<header>
+  <span id="dot"></span>
+  <h1 class="disp"><span class="ch">❯</span> Mission Control</h1>
+  <span id="clock"></span>
+</header>
+<main id="app"><div id="msg">Connecting…</div></main>
+<div id="foot"></div>
+<script>
+'use strict';
+// Pairing key: from the link's #k=... (never sent to the server as part of
+// the URL), remembered so a home-screen bookmark keeps working.
+const KEY = (() => {
+  const m = location.hash.match(/(?:^#|&)k=([\w-]+)/);
+  if (m) { try { localStorage.setItem('mcKey', m[1]); } catch {} return m[1]; }
+  try { return localStorage.getItem('mcKey'); } catch { return null; }
+})();
+
+const $ = (s) => document.querySelector(s);
+const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+const clock = (ms) => new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+const sameDay = (ms) => new Date(ms).toDateString() === new Date().toDateString();
+const when = (ms) => (sameDay(ms) ? '' : new Date(ms).toLocaleDateString([], { weekday: 'short' }) + ' ') + clock(ms);
+const mins = (m) => (m >= 60 ? `${Math.floor(m / 60)}h ${m % 60}m` : `${m}m`);
+const since = (ms) => (ms ? mins(Math.max(0, Math.floor((Date.now() - ms) / 60000))) : '');
+let lastOk = 0;
+
+function message(text) {
+  $('#app').innerHTML = `<div id="msg">${esc(text)}</div>`;
+}
+
+function card(s) {
+  const glyph = s.reason ? (s.reason.kind === 'question' ? '?' : s.reason.kind === 'permission' ? '🔒' : '›') : '';
+  return `<div class="card ${s.status === 'waiting' ? 'waiting' : ''}">
+    <div class="top">
+      <span class="proj disp">${esc(s.projectName)}</span>
+      ${s.background ? '<span class="badge">BG</span>' : ''}
+      <span class="st ${esc(s.status)}">${s.status === 'waiting' ? 'NEEDS YOU' : esc(String(s.status || '').toUpperCase())}</span>
+    </div>
+    <div class="title">${esc(s.title)}</div>
+    ${s.reason ? `<div class="reason"><span class="g">${glyph}</span>${esc(s.reason.text)}</div>` : ''}
+    <div class="meta">
+      ${s.waitingMin != null ? `<span class="warn">waiting ${mins(s.waitingMin)}</span>` : s.startedAt ? `<span>${since(s.startedAt)}</span>` : ''}
+      ${s.quietMin != null ? `<span class="warn">quiet ${s.quietMin}m</span>` : ''}
+      ${s.estCost != null ? `<span>≈$${Number(s.estCost).toFixed(2)}</span>` : ''}
+      ${s.contextPct != null ? `<span class="${s.contextPct >= 70 ? 'warn' : ''}">ctx ${s.contextPct}%</span>` : ''}
+    </div>
+  </div>`;
+}
+
+function meter(label, pct, hitAt) {
+  if (pct == null) return '';
+  const cls = pct >= 90 ? 'crit' : pct >= 75 ? 'hot' : '';
+  return `<div class="meter"><span class="lbl">${label}</span><span class="bar"><span class="fill ${cls}" style="width:${Math.min(100, pct)}%"></span></span><span class="pct">${Math.round(pct)}%</span></div>` +
+    (hitAt && pct < 100 ? `<div class="eta">at this pace: 100% around ${esc(when(hitAt))}</div>` : '');
+}
+
+function render(d) {
+  const waiting = d.waiting || 0;
+  const live = d.live || [];
+  document.title = waiting ? `(${waiting}) Mission Control` : 'Mission Control';
+  const summary = waiting
+    ? `<div id="summary" class="alert"><div class="big disp">${waiting} need${waiting === 1 ? 's' : ''} you</div><div class="sub">${live.length} running</div></div>`
+    : live.length
+      ? `<div id="summary" class="clear"><div class="big disp">All clear</div><div class="sub">${live.length} running, none waiting on you</div></div>`
+      : `<div id="summary"><div class="big disp">Quiet</div><div class="sub">No Claude Code sessions running</div></div>`;
+  const l = d.limits;
+  const limits = l && (l.session != null || l.week != null)
+    ? `<h2 class="disp">Limits</h2>${meter('5-hour', l.session, l.sessionHitAt)}${meter('week', l.week, l.weekHitAt)}`
+    : '';
+  $('#app').innerHTML = summary + live.map(card).join('') + limits;
+}
+
+async function poll() {
+  if (!KEY) {
+    message('Open this page from the link in Settings → Phone view on your Mac.');
+    $('#dot').className = 'err';
+    return;
+  }
+  try {
+    const r = await fetch('/m/state', { headers: { Authorization: `Bearer ${KEY}` }, cache: 'no-store' });
+    if (r.status === 401) {
+      message('This link no longer works. Copy a fresh one from Settings → Phone view on your Mac.');
+      $('#dot').className = 'err';
+      return;
+    }
+    if (r.status === 429) {
+      message('Too many tries with a wrong key. Wait ten minutes, then use a fresh link.');
+      $('#dot').className = 'err';
+      return;
+    }
+    if (!r.ok) throw new Error(String(r.status));
+    render(await r.json());
+    lastOk = Date.now();
+    $('#dot').className = 'on';
+  } catch {
+    $('#dot').className = 'err';
+    if (!lastOk) message("Can't reach your Mac. Check that your phone is on the same network, and that the dashboard is running.");
+  }
+  $('#foot').textContent = lastOk ? `updated ${clock(lastOk)} · refreshes every 5 seconds` : '';
+}
+
+function tick() { $('#clock').textContent = clock(Date.now()); }
+tick();
+setInterval(tick, 15000);
+poll();
+setInterval(() => { if (!document.hidden) poll(); }, 5000);
+document.addEventListener('visibilitychange', () => { if (!document.hidden) poll(); });
+</script>
+</body>
+</html>

package/server.js

@@ -15,9 +15,10 @@ 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 { recentCommits, linkCommitsToSessions, commitCosts } = require('./lib/gitlog');
+const { createRemoteServer } = require('./lib/remote');
 const { sessionChangeList, sessionFileDiff } = require('./lib/changes');
-const { demoState, demoStats, demoSession, demoChanges, demoInventory, demoToolset } = require('./lib/demo');
+const { demoState, demoStats, demoSession, demoChanges, demoInventory, demoProject } = require('./lib/demo');
 const { runSelfUpdate } = require('./lib/update');
 const { readInventory } = require('./lib/inventory');
 const { readToolset } = require('./lib/toolset');
@@ -133,13 +134,7 @@ const server = http.createServer((req, res) => {
     }
     if (url === '/api/search') return json(res, 200, { q: '', prompts: [], titles: [], notes: [], transcripts: null });
     if (url === '/api/reveal-file') return json(res, 200, { ok: true });
-    if (url === '/api/project') {
-      return json(res, 200, {
-        path: '/demo/acme-storefront', sessions: [], commits: [], muted: false,
-        claudeMd: [], memory: [], skills: [], agents: [], commands: [], settings: {},
-        toolset: demoToolset(),
-      });
-    }
+    if (url === '/api/project') return json(res, 200, demoProject());
     if (url === '/api/config' && req.method === 'GET') {
       return json(res, 200, { demo: true, notifications: true, usageApi: false, weeklyBudget: 200, idleNagMinutes: 60, terminals: [], resolvedTerminal: { id: 'terminal', label: 'Terminal' }, claudeApp: false, names: {}, ignores: [], themes: cfg.THEMES, version: VERSION, errors: [], pricingSource: null, unpricedModels: [] });
     }
@@ -258,7 +253,9 @@ const server = http.createServer((req, res) => {
     Promise.all([projectDetail(known), recentCommits(known), readInventory(collector.projectPaths())])
       .then(async ([detail, commits, inventory]) => {
         detail.sessions = collector.allSessions(known);
-        detail.commits = linkCommitsToSessions(commits, detail.sessions);
+        const costed = commitCosts(linkCommitsToSessions(commits, detail.sessions), detail.sessions);
+        detail.commits = costed.commits;
+        detail.commitSummary = costed.summary;
         detail.muted = isProjectMuted(known, cfg.readConfig().mutedProjects);
         detail.toolset = await readToolset(known, inventory);
         res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
@@ -296,6 +293,7 @@ const server = http.createServer((req, res) => {
       ignores: cfg.readIgnores(),
       pricingSource: cfg.readPricing().source,
       unpricedModels: collector.unpricedModels(),
+      remote: remote.status(cfg.readConfig()),
     });
     return;
   }
@@ -329,7 +327,7 @@ const server = http.createServer((req, res) => {
             if (!known) return json(res, 404, { ok: false, error: 'unknown project' });
             cfg.setProjectMuted(known, payload.muted !== false);
           } else {
-            cfg.updateConfig(payload);
+            remote.apply(cfg.updateConfig(payload));
           }
         } else if (url === '/api/names') {
           const known = collector
@@ -593,7 +591,19 @@ function openBrowser(url) {
   else execFile('xdg-open', [url], () => {});
 }
 
+// Phone view: opt-in second listener; never in demo mode.
+const remote = createRemoteServer({
+  getState: () => collector.state,
+  readConfig: cfg.readConfig,
+  publicDir: path.join(__dirname, 'public'),
+});
+
 (DEMO ? Promise.resolve() : collector.start()).then(() => {
+  if (!DEMO) {
+    remote.apply(cfg.readConfig());
+    // Wi-Fi and Tailscale addresses change; follow them.
+    setInterval(() => remote.apply(cfg.readConfig()), 60_000).unref();
+  }
   server.listen(PORT, HOST, () => {
     console.log(`claude-dashboard listening on ${DASH_URL}${DEMO ? ' (demo mode)' : ''}`);
     if (OPEN) {