claude-mission-control 1.14.0 → 1.15.0

package/README.md

@@ -35,6 +35,10 @@ 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.
@@ -228,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/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.14.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

@@ -2423,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 {
@@ -2457,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">
@@ -2555,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

@@ -16,6 +16,7 @@ const { friendlyName } = require('./lib/names');
 const cfg = require('./lib/config');
 const { isProjectMuted } = require('./lib/notify');
 const { recentCommits, linkCommitsToSessions, commitCosts } = require('./lib/gitlog');
+const { createRemoteServer } = require('./lib/remote');
 const { sessionChangeList, sessionFileDiff } = require('./lib/changes');
 const { demoState, demoStats, demoSession, demoChanges, demoInventory, demoProject } = require('./lib/demo');
 const { runSelfUpdate } = require('./lib/update');
@@ -292,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;
   }
@@ -325,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
@@ -589,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) {