claude-mission-control 1.11.1 → 1.12.1

package/README.md

@@ -1,8 +1,12 @@
-# Claude Dashboard
+# Claude Mission Control
 
 One web page that shows you everything Claude Code is doing on your machine.
 
-Claude Code runs in a terminal. Once you have two or three sessions going, you lose track. Which one is waiting for an answer? What did that session change while you were away? How much has this week cost? Claude Dashboard answers those questions on one screen, updated live, from the files Claude Code already writes to `~/.claude`.
+**[Try the live demo →](https://jonimmswordpressdev.github.io/claude-dashboard/)** Click around with invented projects and sessions before you install anything.
+
+![A session flips to NEEDS YOU on the board, a notification names the command waiting for permission, and one click opens the transcript at that request](docs/screenshots/demo.gif)
+
+Claude Code runs in a terminal. Once you have two or three sessions going, you lose track. Which one is waiting for an answer? What did that session change while you were away? How much has this week cost? Claude Mission Control answers those questions on one screen, updated live, from the files Claude Code already writes to `~/.claude`.
 
 **What you get**
 
@@ -13,6 +17,7 @@ Claude Code runs in a terminal. Once you have two or three sessions going, you l
 - Cost per session, project, model, and week, estimated from the tokens in your transcripts, with a breakdown by model and cache use.
 - Per project, the plugins, agents, skills, and MCP servers Claude Code would actually use there, and the exact setting to switch each one on or off.
 - A macOS notification the moment a session needs you, and a reminder if you leave it waiting.
+- When you will hit your 5-hour or weekly limit at your current pace, before you hit it.
 
 **Why you would want it**
 
@@ -26,10 +31,17 @@ Claude Code runs in a terminal. Once you have two or three sessions going, you l
 
 **Requirements:** macOS or Linux (Windows experimental, see below), Node.js ≥ 18, Claude Code.
 
-![Claude Dashboard, dark mode: three live sessions with live cost, burn rate and context meters, two of them waiting with the question shown, plus the pinned strip, unpushed work, and today's digest](docs/screenshots/dashboard-dark.png)
+![Claude Mission Control, dark mode: three live sessions with live cost, burn rate and context meters, two of them waiting with the question shown, the limit forecast on the session meter, plus the pinned strip, unpushed work, and today's digest](docs/screenshots/dashboard-dark.png)
 
 *Every screenshot here is demo data (`CLAUDE_DASH_DEMO=1`). The projects are invented.*
 
+**New in 1.12.0**
+
+- A limit forecast on the session and week meters: an amber `→ 3:40 PM` when your current pace runs out before the reset, and one notification per window.
+- A share card for your week: a PNG with totals, daily bars, and what your usage was worth against your plan's price. Totals only, no project names.
+- A Claude Code plugin: `/plugin install mission-control --marketplace JonImmsWordpressDev/claude-dashboard`, then `/mission-control:open`.
+- A statusline, `claude-dashboard statusline`: model, context, limits and cost, plus sessions waiting on you and the forecast when the dashboard is up.
+
 **New in 1.11.0**
 
 - Live cost and a `$/h` burn rate on every running session, and a cost breakdown by model, cache use, and subagents in each transcript.
@@ -65,6 +77,33 @@ brew install claude-dashboard
 brew services start claude-dashboard   # always-on, starts at login
 ```
 
+## Claude Code plugin
+
+Install it from inside Claude Code:
+
+```
+/plugin install mission-control --marketplace JonImmsWordpressDev/claude-dashboard
+```
+
+On Claude Code older than 2.1.275, add the marketplace first: `/plugin marketplace add JonImmsWordpressDev/claude-dashboard`, then `/plugin install mission-control@jonimms`.
+
+- `/mission-control:open` starts the dashboard if it isn't running (your global install, or npx) and opens it.
+- `/mission-control:statusline` sets up the statusline below. It checks your installed version first and shows the setting to add.
+
+## Statusline
+
+`claude-dashboard statusline` prints one line for Claude Code's status bar:
+
+```
+❯ acme-storefront needs you · Opus 5.5 · ctx 41% · 5h 64% → 3:40 PM · $3.20
+```
+
+Model, context use, your 5-hour limit, and this session's cost come from Claude Code itself. When the dashboard is running, the line also names other sessions waiting on you and shows the limit forecast in amber. If the dashboard is down, you get the rest of the line and no delay. It needs a global install (npm or Homebrew), not npx. Add it to `~/.claude/settings.json`:
+
+```json
+{ "statusLine": { "type": "command", "command": "claude-dashboard statusline", "padding": 0 } }
+```
+
 ## Install (always-on)
 
 ```bash
@@ -129,7 +168,10 @@ If something looks off, the log is at `~/Library/Logs/claude-dashboard.log`. To
 - **Search** — the header box searches every prompt you've ever sent plus all session titles (Enter to run, 2+ characters). Narrow with `project:name` or `since:7d` / `since:2026-08-01`. Clicking a prompt result opens the transcript scrolled to the matching turn. If the answer isn't in a prompt, **search inside full transcripts** runs the same query across the conversation bodies — slower, so it's a second click rather than the default.
 - **Command palette** — `⌘K` from anywhere: fuzzy-jump to any project or session, watch a live session, start a new one, open settings or stats. Arrow keys + Enter.
 - **Stats** — click the weekly bar chart in the header: a 26-week activity heatmap, your busiest hours, a weekly-rhythm grid (prompts by day of week and hour), estimated cost per day for the last 90 days (list-price value on a subscription), and an all-time per-model token/cost breakdown. The daily cost history is computed from your existing transcripts, so it's full from the first run.
-- **Your week with Claude** — a 7-day report (`⌘K`, or the button at the top of stats): sessions, prompts, estimated cost (list-price value on a subscription) against your budget, busiest day and hour, models used, how long you typically take to answer a question, and your cache hit rate. Exports as markdown.
+- **Your week with Claude** — a 7-day report (`⌘K`, or the button at the top of stats): sessions, prompts, estimated cost (list-price value on a subscription) against your budget, busiest day and hour, models used, how long you typically take to answer a question, and your cache hit rate. Exports as markdown, or as a share card: a 1200×630 PNG with your week's totals, daily bars, and, on Pro or Max, how many times the plan's weekly price that usage was worth at list price. Download it or copy it straight to the clipboard. The card shows totals only, never project names or prompts.
+
+![Share card: a week's list-price value as a multiple of the Max 20x plan's weekly price, daily bars, sessions, prompts, cache hit rate and busiest hour](docs/screenshots/share-card.png)
+
 - **Day timeline** — `⌘K` → Day timeline: the last 24 hours as one lane per project, with amber ticks where a session needed you.
 - **Catch-up** — the `🔔` in the header keeps every notification the server has fired since it started, with an unread count. Useful after a morning away from the desk.
 - **Export** — any transcript downloads as clean markdown via the `export ⇩` button.
@@ -163,6 +205,7 @@ If something looks off, the log is at `~/Library/Logs/claude-dashboard.log`. To
 - **Session cost breakdown** — the `≈$ ▾` button in a transcript's header opens a table by model (input, output, cache read, cache write), the subagent share, and the session's cache hit rate.
 - **Context and tools** — each live session shows how full its context window was on the last turn (`412k / 1M`, amber from 70%, red from 90%), so you can see a compaction or a fresh session coming. Mission Control panes add the session's tool-call count with failures in amber, and the transcript's cost panel shows the same count in its footer. Read from the same incremental transcript scan as everything else; subagents are not included.
 - **Most expensive sessions** — in the stats view: the ten costliest sessions all time, click to open.
+- **Limit forecast** — the session and week meters project your current pace forward. When it runs out before the window resets, the meter shows an amber `→ 3:40 PM` (or `→ Thu 2:15 PM` for the week), and the tooltip says how early. Otherwise the tooltip shows where you will land by the reset. Pace is your last 30 minutes (5-hour window) or 24 hours (week) once the dashboard has watched that long, and the average since the window opened before that. One notification per window, once you are past 50% and on pace to run out.
 - **Stuck flag** — a session that's "busy" but has written nothing to its transcript for 10+ minutes gets an amber `quiet Nm` cell; at 20 minutes you get one notification. It's a hint, not a verdict — a session waiting on slow background work can look the same.
 - **Idle reminder** — a session left on **needs you** for an hour (configurable in settings, `0` to turn off) gets one more notification and a `still waiting` entry in the catch-up bell, and its elapsed cell turns amber with the wait time. Nothing repeats until you answer it.
 

package/bin/claude-dashboard.js

@@ -4,5 +4,11 @@
 // 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');
+// `claude-dashboard statusline` prints one line for Claude Code's statusLine
+// setting instead of starting anything.
+if (process.argv[2] === 'statusline') {
+  require('../lib/statusline').runStatusline();
+} else {
+  if (!process.argv.includes('--no-open')) process.env.CLAUDE_DASH_OPEN = '1';
+  require('../server.js');
+}

package/claude-dashboard.service

@@ -1,5 +1,5 @@
 [Unit]
-Description=Claude Dashboard — local dashboard for Claude Code sessions
+Description=Claude Mission Control — local dashboard for Claude Code sessions
 After=default.target
 
 [Service]

package/install.ps1

@@ -1,4 +1,4 @@
-# Install Claude Dashboard on Windows (EXPERIMENTAL — testers wanted).
+# Install Claude Mission Control on Windows (EXPERIMENTAL — testers wanted).
 # Registers a logon Scheduled Task that runs the server hidden.
 # Run from the repo folder in PowerShell:  .\install.ps1
 $ErrorActionPreference = 'Stop'

package/install.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-# Install the Claude Dashboard as an always-on service that starts at login:
+# Install the Claude Mission Control as an always-on service that starts at login:
 # a LaunchAgent on macOS, a systemd user unit on Linux.
 set -euo pipefail
 

package/lib/collector.js

@@ -14,9 +14,10 @@ const { isIgnored } = require('./ignore');
 const { worktreeRoot } = require('./paths');
 const { sendNotification, newlyWaiting, overdueWaits, isProjectMuted, trackWaits } = require('./notify');
 const { readConfig, readPricing } = require('./config');
-const { estimateCost, costReport, budgetLevel, typicalWait, burnRate, topByCost } = require('./pricing');
+const { estimateCost, planValue, costReport, budgetLevel, typicalWait, burnRate, topByCost } = require('./pricing');
 const { readPlan } = require('./plan');
 const { readTeams, agentStatus, resolveTeam } = require('./teams');
+const { WINDOWS, recordSample, forecastWindow, shouldAlert, clockLabel, durationLabel } = require('./forecast');
 
 // A busy session whose transcript hasn't grown for this long may be stalled.
 const QUIET_FLAG_MS = 10 * 60 * 1000;
@@ -42,6 +43,8 @@ class Collector {
     this.clientCount = 0;
     this.timers = [];
     this.fingerprint = '';
+    this.usageSamples = { session: [], week: [] };
+    this.forecastAlerted = { session: null, week: null }; // resetsAt last alerted on
   }
 
   onChange(fn) {
@@ -182,6 +185,40 @@ class Collector {
     // Live OAuth usage first (Keychain-authed, macOS); statusline cache as
     // the fallback for other platforms or when the toggle is off.
     this.raw.quota = (await fetchOauthUsage()) || (await readQuota());
+    const q = this.raw.quota;
+    if (q && !q.stale) {
+      const now = Date.now();
+      this.usageSamples.session = recordSample(this.usageSamples.session, q.utilization, q.resetsAt, now, WINDOWS.session.lookbackMs * 2);
+      this.usageSamples.week = recordSample(this.usageSamples.week, q.weeklyUtilization, q.weeklyResetsAt, now, WINDOWS.week.lookbackMs * 2);
+    }
+  }
+
+  // Forecast both usage windows, and notify once per window when the
+  // current pace runs out before the reset.
+  limitForecast() {
+    const q = this.raw.quota;
+    if (!q || q.stale) return null;
+    const now = Date.now();
+    const out = {};
+    const windows = [
+      ['session', q.utilization, q.resetsAt, '5-hour'],
+      ['week', q.weeklyUtilization, q.weeklyResetsAt, 'weekly'],
+    ];
+    for (const [key, utilization, resetsAt, label] of windows) {
+      const f = forecastWindow({ ...WINDOWS[key], utilization, resetsAt, samples: this.usageSamples[key], now });
+      out[key] = f;
+      if (!shouldAlert(f, this.forecastAlerted[key])) continue;
+      this.forecastAlerted[key] = f.resetsAt;
+      const when = clockLabel(f.hitAt, now);
+      const early = durationLabel(f.resetsAt - f.hitAt);
+      this.logEvent('forecast', `${label[0].toUpperCase()}${label.slice(1)} limit`, `At this pace you hit it ${when}, ${early} before it resets (${Math.round(f.utilization)}% now)`);
+      sendNotification({
+        title: `Claude ${label} limit`,
+        body: `At this pace you hit your ${label} limit ${when}, ${early} before it resets. ${Math.round(f.utilization)}% used.`,
+        sound: 'Basso',
+      });
+    }
+    return out;
   }
 
   projectPaths() {
@@ -442,7 +479,9 @@ class Collector {
     }
     const budget = budgetLimit ? { limit: budgetLimit, spent: weeklyCost[7], level } : null;
 
-    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 forecast = this.limitForecast();
+
+    const next = { quota: this.raw.quota, forecast, 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;
@@ -622,6 +661,7 @@ class Collector {
         waits: weekWaits,
         typicalWait: typicalWait(weekWaits),
         cacheHitRatio: weekCacheAll ? Math.round((weekCacheRead / weekCacheAll) * 100) / 100 : null,
+        planValue: planValue(readPlan(), weekCost),
       },
       byModel,
       perProject: perProject.slice(0, 15),

package/lib/demo.js

@@ -54,7 +54,11 @@ function demoState() {
   return {
     generatedAt: now,
     plan: { tier: 'Max 20x' },
-    quota: { utilization: 34, weeklyUtilization: 52, resetsAt: '2pm', weeklyResetsAt: 'Wed 9am' },
+    quota: { utilization: 64, weeklyUtilization: 52, resetsAt: '2pm', weeklyResetsAt: 'Wed 9am' },
+    forecast: {
+      session: { hitAt: now + 70 * MIN, projected: 128, resetsAt: now + 3 * HOUR, utilization: 64, basis: 'recent' },
+      week: { hitAt: null, projected: 81, resetsAt: now + 3 * 24 * HOUR, utilization: 52, basis: 'average' },
+    },
     weeklyCost: [31, 48, 22, 75, 61, 90, 84, 143],
     budget: { limit: 200, spent: 143, level: 75 },
     pinned: [
@@ -219,6 +223,7 @@ function demoStats() {
       busiestDay: 'Tuesday', busiestHour: 11,
       waits: [22, 31, 18, 4], typicalWait: 'under 2m',
       cacheHitRatio: 0.91,
+      planValue: { label: 'Max 20x', weeklyPrice: 46.15, multiple: 3.1 },
     },
     byModel: {
       'claude-opus-5': { tokens: 310e6, cost: 412.5 },

package/lib/forecast.js

@@ -0,0 +1,93 @@
+'use strict';
+// Limit forecast: project the 5-hour and weekly usage meters forward and
+// say when they will hit 100%, if that comes before the window resets.
+//
+// Pace comes from recent samples when we have enough history, otherwise
+// from the average since the window opened (resetsAt - window length) —
+// so a fresh server start still has a forecast.
+
+const WINDOWS = {
+  session: { windowMs: 5 * 3600_000, lookbackMs: 30 * 60_000, minElapsedMs: 15 * 60_000 },
+  week: { windowMs: 7 * 24 * 3600_000, lookbackMs: 24 * 3600_000, minElapsedMs: 6 * 3600_000 },
+};
+const SAMPLE_GAP_MS = 5 * 60_000; // the usage API is polled at most every 5 min
+const ROUND_MS = 5 * 60_000; // keep hitAt stable between polls
+const ALERT_MIN_PCT = 50; // don't alarm on early, noisy extrapolation
+
+function toMs(v) {
+  if (v == null || v === '') return null;
+  if (typeof v === 'number') return v > 1e12 ? v : v * 1000;
+  const n = Number(v);
+  if (Number.isFinite(n)) return n > 1e12 ? n : n * 1000;
+  const t = Date.parse(v);
+  return Number.isFinite(t) ? t : null;
+}
+
+// Returns a new samples array with this reading added. A changed resetsAt
+// or a drop in utilization means a new window: start over.
+function recordSample(samples, utilization, resetsAt, now, keepMs) {
+  if (utilization == null) return samples;
+  const reset = toMs(resetsAt);
+  let out = samples.filter((s) => s.resetsAt === reset && now - s.at <= keepMs);
+  const last = out[out.length - 1];
+  if (last && utilization < last.utilization) out = [];
+  else if (last && now - last.at < SAMPLE_GAP_MS) return out;
+  out.push({ at: now, utilization, resetsAt: reset });
+  return out;
+}
+
+// { hitAt, projected, resetsAt, utilization, basis } or null when there is
+// nothing sensible to say. hitAt is null when the window resets first.
+function forecastWindow({ utilization, resetsAt, windowMs, lookbackMs, minElapsedMs, samples = [], now = Date.now() }) {
+  const reset = toMs(resetsAt);
+  if (utilization == null || !reset || reset <= now) return null;
+
+  let rate = null; // percentage points per ms
+  let basis = 'recent';
+  const mine = samples.filter((s) => s.resetsAt === reset && s.at < now);
+  let anchor = null;
+  for (const s of mine) if (s.at <= now - lookbackMs) anchor = s;
+  if (!anchor && mine.length && now - mine[0].at >= lookbackMs / 2) anchor = mine[0];
+  if (anchor) rate = Math.max(0, (utilization - anchor.utilization) / (now - anchor.at));
+
+  if (rate == null) {
+    const elapsed = now - (reset - windowMs);
+    if (elapsed < minElapsedMs) return null;
+    rate = utilization / elapsed;
+    basis = 'average';
+  }
+
+  const projected = Math.min(999, Math.round(utilization + rate * (reset - now)));
+  let hitAt = null;
+  if (utilization >= 100) hitAt = Math.floor(now / ROUND_MS) * ROUND_MS;
+  else if (rate > 0) {
+    const t = now + (100 - utilization) / rate;
+    if (t < reset) hitAt = Math.floor(t / ROUND_MS) * ROUND_MS;
+  }
+  return { hitAt, projected, resetsAt: reset, utilization, basis };
+}
+
+// True when this forecast deserves a notification we haven't sent yet for
+// this window. alertedFor is the resetsAt we last alerted on.
+function shouldAlert(f, alertedFor) {
+  return !!(f && f.hitAt && f.utilization < 100 && f.utilization >= ALERT_MIN_PCT && f.resetsAt !== alertedFor);
+}
+
+// "around 3:40 PM" today, "Thu around 2:15 PM" on another day.
+function clockLabel(ms, now = Date.now()) {
+  const d = new Date(ms);
+  const time = d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+  if (d.toDateString() === new Date(now).toDateString()) return `around ${time}`;
+  return `${d.toLocaleDateString(undefined, { weekday: 'short' })} around ${time}`;
+}
+
+// "35m", "1h 10m", "2d 4h".
+function durationLabel(ms) {
+  const m = Math.max(0, Math.round(ms / 60_000));
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return m % 60 ? `${h}h ${m % 60}m` : `${h}h`;
+  return h % 24 ? `${Math.floor(h / 24)}d ${h % 24}h` : `${Math.floor(h / 24)}d`;
+}
+
+module.exports = { WINDOWS, toMs, recordSample, forecastWindow, shouldAlert, clockLabel, durationLabel };

package/lib/notify.js

@@ -31,7 +31,7 @@ $xml = [Windows.UI.Notifications.ToastNotificationManager]::GetTemplateContent([
 $t = $xml.GetElementsByTagName('text')
 $null = $t.Item(0).AppendChild($xml.CreateTextNode('${esc(title)}'))
 $null = $t.Item(1).AppendChild($xml.CreateTextNode('${esc(body)}'))
-[Windows.UI.Notifications.ToastNotificationManager]::CreateToastNotifier('Claude Dashboard').Show([Windows.UI.Notifications.ToastNotification]::new($xml))`;
+[Windows.UI.Notifications.ToastNotificationManager]::CreateToastNotifier('Claude Mission Control').Show([Windows.UI.Notifications.ToastNotification]::new($xml))`;
     execFile('powershell', ['-NoProfile', '-NonInteractive', '-Command', ps], { timeout: 8000 }, () => {});
   } else {
     execFile('notify-send', [title, body], { timeout: 5000 }, () => {});

package/lib/pricing.js

@@ -208,4 +208,22 @@ function contextWindow(model) {
   return MILLION_WINDOW.some((p) => id.startsWith(p)) ? 1_000_000 : 200_000;
 }
 
-module.exports = { estimateCost, costReport, totalTokens, rateFor, normalizeModel, loadPricing, overrideFor, budgetLevel, typicalWait, burnRate, cacheHitRatio, topByCost, contextWindow };
+// Subscription list prices (USD/month) for the share card's "worth N× your
+// plan" line. Team and Enterprise vary by contract, so they get no multiple.
+const PLAN_MONTHLY = { Pro: 20, 'Max 5x': 100, 'Max 20x': 200 };
+
+// { label, weeklyPrice, multiple } on a known subscription, label only on an
+// unknown one, null on API billing or no plan.
+function planValue(plan, weekCost) {
+  if (!plan || !plan.label || plan.billing === 'api' || plan.label === 'API') return null;
+  const monthly = PLAN_MONTHLY[plan.label];
+  if (!monthly) return { label: plan.label, weeklyPrice: null, multiple: null };
+  const weekly = (monthly * 12) / 52;
+  return {
+    label: plan.label,
+    weeklyPrice: Math.round(weekly * 100) / 100,
+    multiple: weekCost > 0 ? Math.round((weekCost / weekly) * 10) / 10 : null,
+  };
+}
+
+module.exports = { estimateCost, planValue, costReport, totalTokens, rateFor, normalizeModel, loadPricing, overrideFor, budgetLevel, typicalWait, burnRate, cacheHitRatio, topByCost, contextWindow };

package/lib/statusline.js

@@ -0,0 +1,82 @@
+'use strict';
+// `claude-dashboard statusline`: one line for Claude Code's statusLine
+// setting. Reads Claude Code's JSON on stdin and, when the dashboard is up,
+// adds what only it knows: other sessions waiting on you and the limit
+// forecast. Must stay fast, so the dashboard gets a short timeout and is
+// optional.
+const http = require('http');
+
+const AMBER = '\x1b[33m';
+const DIM = '\x1b[2m';
+const RESET = '\x1b[0m';
+const STATE_TIMEOUT_MS = 400;
+
+function clock(ms) {
+  return new Date(ms).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+}
+
+// input: Claude Code's statusline JSON. state: the dashboard's /api/state,
+// or null when it isn't running.
+function formatStatusline(input, state, { color = true } = {}) {
+  const amber = (s) => (color ? AMBER + s + RESET : s);
+  const dim = (s) => (color ? DIM + s + RESET : s);
+  const parts = [];
+
+  if (state) {
+    const waiting = (state.liveSessions || []).filter((s) => s.status === 'waiting' && s.sessionId !== input.session_id);
+    if (waiting.length) {
+      const first = waiting[0].projectName || 'a session';
+      parts.push(amber(`❯ ${waiting.length === 1 ? first : `${waiting.length} sessions`} need${waiting.length === 1 ? 's' : ''} you`));
+    }
+  }
+
+  if (input.model && input.model.display_name) parts.push(input.model.display_name);
+
+  const ctx = input.context_window && input.context_window.used_percentage;
+  if (typeof ctx === 'number') {
+    const s = `ctx ${Math.round(ctx)}%`;
+    parts.push(ctx >= 70 ? amber(s) : s);
+  }
+
+  const limits = input.rate_limits || {};
+  const forecast = (state && state.forecast) || {};
+  for (const [key, label, f] of [['five_hour', '5h', forecast.session], ['seven_day', 'week', forecast.week]]) {
+    const pct = limits[key] && limits[key].used_percentage;
+    if (typeof pct !== 'number') continue;
+    if (f && f.hitAt && pct < 100) parts.push(amber(`${label} ${Math.round(pct)}% → ${clock(f.hitAt)}`));
+    else if (key === 'five_hour' || pct >= 50) parts.push(`${label} ${Math.round(pct)}%`);
+  }
+
+  const cost = input.cost && input.cost.total_cost_usd;
+  if (typeof cost === 'number' && cost >= 0.01) parts.push(dim(`$${cost.toFixed(2)}`));
+
+  return parts.join(dim(' · '));
+}
+
+function fetchState(port) {
+  return new Promise((resolve) => {
+    const req = http.get({ host: '127.0.0.1', port, path: '/api/state', timeout: STATE_TIMEOUT_MS }, (res) => {
+      if (res.statusCode !== 200) { res.resume(); return resolve(null); }
+      let body = '';
+      res.setEncoding('utf8');
+      res.on('data', (d) => (body += d));
+      res.on('end', () => {
+        try { resolve(JSON.parse(body)); } catch { resolve(null); }
+      });
+    });
+    req.on('timeout', () => req.destroy());
+    req.on('error', () => resolve(null));
+  });
+}
+
+async function runStatusline() {
+  let raw = '';
+  process.stdin.setEncoding('utf8');
+  for await (const chunk of process.stdin) raw += chunk;
+  let input = {};
+  try { input = JSON.parse(raw); } catch { /* print what we can */ }
+  const state = await fetchState(Number(process.env.CLAUDE_DASH_PORT) || 4517);
+  process.stdout.write(formatStatusline(input, state) + '\n');
+}
+
+module.exports = { formatStatusline, runStatusline };

package/menubar/claude-dash.15s.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
-# SwiftBar plugin for the Claude Dashboard. Refreshes every 15s (filename).
-# <swiftbar.title>Claude Dashboard</swiftbar.title>
+# SwiftBar plugin for the Claude Mission Control. Refreshes every 15s (filename).
+# <swiftbar.title>Claude Mission Control</swiftbar.title>
 # <swiftbar.hideAbout>true</swiftbar.hideAbout>
 # <swiftbar.hideRunInTerminal>true</swiftbar.hideRunInTerminal>
 # <swiftbar.hideDisablePlugin>true</swiftbar.hideDisablePlugin>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-mission-control",
-  "version": "1.11.1",
+  "version": "1.12.1",
   "description": "Local dashboard for Claude Code: live sessions, transcripts, costs, git status — all your projects in one place.",
   "main": "server.js",
   "bin": {
@@ -24,7 +24,8 @@
   ],
   "scripts": {
     "start": "node server.js",
-    "test": "node --test test/pure-logic.test.js"
+    "test": "node --test test/pure-logic.test.js",
+    "demo:build": "node scripts/build-demo.js"
   },
   "engines": {
     "node": ">=18"

package/public/index.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Claude Dashboard</title>
+<title>Claude Mission Control</title>
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <link rel="manifest" href="/manifest.webmanifest">
@@ -209,6 +209,7 @@
   /* ---------- header: the station sign ---------- */
   header {
     display: flex; align-items: center; gap: 16px;
+    flex-wrap: wrap; row-gap: 10px;
     padding: 12px 20px;
     border-bottom: 2px solid var(--line);
     background: var(--surface);
@@ -241,6 +242,7 @@
   .meter .fill { height: 100%; border-radius: 3px; background: var(--accent); }
   .meter .fill.hot { background: var(--warn); }
   .meter .fill.crit { background: var(--bad); }
+  .meter .eta { color: var(--warn); white-space: nowrap; }
 
   /* ---------- live rail: the departures rows ---------- */
   #live {
@@ -393,6 +395,14 @@
   }
   #search:focus { outline: 2px solid var(--accent); outline-offset: 0; }
   #search::placeholder { color: var(--faint); }
+  /* A full set of meters needs ~1600px; tighten before the header wraps. */
+  @media (max-width: 1600px) {
+    header { gap: 12px; }
+    #search { width: 120px; }
+    #open-pref-wrap .open-label { display: none; }
+    #quota { gap: 12px; }
+    .meter .bar { width: 44px; }
+  }
   #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;
@@ -829,11 +839,11 @@
 <body>
 <header>
   <div id="conn" title="connection"></div>
-  <h1>Claude<span class="tilde"> · </span>Dashboard</h1>
-  <input id="search" type="search" placeholder="Search sessions…  ⏎" autocomplete="off">
+  <h1>Claude<span class="tilde"> · </span>Mission Control</h1>
+  <input id="search" type="search" placeholder="Search…  ⏎" autocomplete="off">
   <div class="spacer"></div>
-  <label id="open-pref-wrap">Open in
-    <select id="open-pref">
+  <label id="open-pref-wrap"><span class="open-label">Open in</span>
+    <select id="open-pref" aria-label="Open sessions in">
       <option value="terminal">Terminal</option>
     </select>
   </label>
@@ -986,15 +996,36 @@ function weeklyChart(weeks) {
     aria-label="${esc(costWording().noun)} per week, last 8 weeks">${bars}</svg>`;
 }
 
-function meter(label, pct, title) {
+function meter(label, pct, title, extra = '') {
   const cls = pct >= 90 ? 'crit' : pct >= 75 ? 'hot' : '';
   return `<div class="meter" title="${esc(title || '')}">
     <span>${esc(label)}</span>
     <span class="bar"><span class="fill ${cls}" style="width:${Math.min(100, pct)}%"></span></span>
-    <span>${Math.round(pct)}%</span>
+    <span>${Math.round(pct)}%</span>${extra}
   </div>`;
 }
 
+// Limit forecast for a usage meter: an amber "→ 3:40 PM" when the current
+// pace runs out before the reset, and the projection in the tooltip.
+function forecastMeter(label, pct, resetsRaw, f) {
+  const sameDay = (ms) => new Date(ms).toDateString() === new Date().toDateString();
+  const when = (ms) => (sameDay(ms) ? '' : new Date(ms).toLocaleDateString(undefined, { weekday: 'short' }) + ' ') + fmtWhen(ms);
+  const parsed = Date.parse(resetsRaw);
+  const resetAt = resetsRaw ? (Number.isFinite(parsed) ? when(parsed) : resetsRaw) : '';
+  const resets = resetAt ? 'resets ' + resetAt : '';
+  if (!f) return meter(label, pct, resets);
+  const pace = f.basis === 'recent' ? 'at your recent pace' : 'at your average pace this window';
+  if (!f.hitAt) {
+    return meter(label, pct, `${resets} · ${pace}, about ${f.projected}% by then`);
+  }
+  const early = Math.max(0, Math.round((f.resetsAt - f.hitAt) / 60000));
+  const earlyTxt = early >= 1440 ? `${Math.floor(early / 1440)}d ${Math.floor((early % 1440) / 60)}h` : early >= 60 ? `${Math.floor(early / 60)}h ${early % 60}m` : `${early}m`;
+  const title = f.utilization >= 100
+    ? `limit reached · ${resets}`
+    : `${pace}, you hit 100% around ${when(f.hitAt)}, ${earlyTxt} before the reset${resetAt ? ' at ' + resetAt : ''}`;
+  return meter(label, pct, title, `<span class="eta">→ ${esc(when(f.hitAt))}</span>`);
+}
+
 // One display line for what a waiting session needs: glyph + 80-char text,
 // plus the untruncated version for tooltips.
 function reasonLine(r) {
@@ -1335,8 +1366,8 @@ function render(state) {
   if (q) {
     qEl.className = q.stale ? 'stale' : '';
     patch(qEl, spendChip +
-      (q.utilization != null ? meter('session', q.utilization, q.resetsAt ? 'resets ' + q.resetsAt : '') : '') +
-      (q.weeklyUtilization != null ? meter('week', q.weeklyUtilization, q.weeklyResetsAt ? 'resets ' + q.weeklyResetsAt : '') : '') +
+      (q.utilization != null ? forecastMeter('session', q.utilization, q.resetsAt, state.forecast && state.forecast.session) : '') +
+      (q.weeklyUtilization != null ? forecastMeter('week', q.weeklyUtilization, q.weeklyResetsAt, state.forecast && state.forecast.week) : '') +
       (q.costUsed != null && q.costLimit ? `<span title="extra usage">$${q.costUsed.toFixed(0)}/$${q.costLimit.toFixed(0)}</span>` : ''));
   } else {
     qEl.className = '';
@@ -1367,7 +1398,7 @@ function render(state) {
   patch($('#grid'), active.length || dormant.length
     ? active.map(projectCard).join('')
     : `<div id="welcome">
-        <h2><span class="tilde">❯</span> Welcome to Claude Dashboard</h2>
+        <h2><span class="tilde">❯</span> Welcome to Claude Mission Control</h2>
         <p>No Claude Code projects found yet. Run <code>claude</code> in any folder and it appears here automatically — live status, transcripts, git state, costs, the lot.</p>
         <p>Tip: press <code>⌘K</code> to jump anywhere, <code>/</code> to search, and click ⚙ for settings.</p>
       </div>`);
@@ -1384,9 +1415,9 @@ function render(state) {
     : 'Settings';
 
   const waiting = live.filter((s) => s.status === 'waiting').length;
-  document.title = waiting ? `(${waiting} waiting) Claude Dashboard`
-    : live.length ? `(${live.length} running) Claude Dashboard`
-    : 'Claude Dashboard';
+  document.title = waiting ? `(${waiting} waiting) Claude Mission Control`
+    : live.length ? `(${live.length} running) Claude Mission Control`
+    : 'Claude Mission Control';
 }
 
 function toast(msg) {
@@ -2903,7 +2934,7 @@ async function openWeekReport() {
       ['Cache hit rate', w.cacheHitRatio != null ? `${Math.round(w.cacheHitRatio * 100)}% of input tokens served from cache` : 'not enough data yet'],
       ['Your typical reply time', w.typicalWait ? `${w.typicalWait} (${waitTotal} prompts measured)` : 'not enough data yet'],
     ];
-    weekReport = { w, b, rows };
+    weekReport = { w, b, rows, days: (s.costDays || []).slice(-7) };
     const table = `<table class="stat-table">${rows.map(([k, v]) =>
       `<tr><td>${esc(k)}</td><td style="text-align:right">${esc(v)}</td></tr>`).join('')}</table>`;
     const projRows = (w.projects || []).map((p) =>
@@ -2911,12 +2942,119 @@ async function openWeekReport() {
     $('#d-body').innerHTML =
       dSection('The week', table) +
       dSection('Where it went', projRows ? `<table class="stat-table">${projRows}</table>` : null, 'No spend recorded this week.') +
+      dSection('Share card', '<img id="share-card" alt="Your week with Claude as an image" style="width:100%;border-radius:6px;border:1px solid var(--line)">' +
+        '<div class="set-sub" style="margin-top:6px">Totals only. No project names or prompts.</div>' +
+        '<div style="margin-top:10px;display:flex;gap:8px"><button class="copy" data-card-download>download PNG ⇩</button><button class="copy" data-card-copy>copy image</button></div>') +
       '<div style="margin-top:16px"><button class="copy" data-week-export>download as markdown ⇩</button></div>';
+    renderShareCard().then((url) => { const img = $('#share-card'); if (img) img.src = url; }).catch(() => {});
   } catch {
     $('#d-body').innerHTML = '<div class="d-empty" style="padding:20px 0">Couldn\'t load the report.</div>';
   }
 }
 
+// ---------- share card: the week as a 1200×630 PNG ----------
+// Always drawn in the dark departures palette so shared cards look alike.
+const CARD = { w: 1200, h: 630, bg: '#0d1215', flap: '#151d22', flapHi: '#1c262c', split: 'rgba(0,0,0,0.45)', ink: '#e9e4d6', muted: '#93a09e', faint: '#5d6b6b', line: '#202b31', green: '#46c073', amber: '#ffb020' };
+let shareCanvas = null;
+
+async function renderShareCard() {
+  const { w, days } = weekReport;
+  await Promise.all(['700 140px Oswald', '500 20px "JetBrains Mono"'].map((f) => document.fonts.load(f).catch(() => {})));
+  const c = document.createElement('canvas');
+  c.width = CARD.w * 2;
+  c.height = CARD.h * 2;
+  const g = c.getContext('2d');
+  g.scale(2, 2);
+  const oswald = (px, wt = 600) => `${wt} ${px}px Oswald, "Arial Narrow", sans-serif`;
+  const mono = (px, wt = 500) => `${wt} ${px}px "JetBrains Mono", ui-monospace, monospace`;
+  const text = (s, x, y, font, color, align = 'left', spacing = 0) => {
+    g.font = font; g.fillStyle = color; g.textAlign = align;
+    if ('letterSpacing' in g) g.letterSpacing = `${spacing}px`;
+    g.fillText(s, x, y);
+    if ('letterSpacing' in g) g.letterSpacing = '0px';
+  };
+  const flap = (x, y, fw, fh) => {
+    g.fillStyle = CARD.flap; g.beginPath(); g.roundRect(x, y, fw, fh, 6); g.fill();
+    g.fillStyle = CARD.flapHi; g.beginPath(); g.roundRect(x, y, fw, fh / 2, [6, 6, 0, 0]); g.fill();
+    g.fillStyle = CARD.split; g.fillRect(x, y + fh / 2 - 0.5, fw, 1.5);
+  };
+
+  g.fillStyle = CARD.bg; g.fillRect(0, 0, CARD.w, CARD.h);
+
+  // header
+  const end = new Date();
+  const start = new Date(end.getTime() - 6 * 86400000);
+  const md = (d) => d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  text('❯ MY WEEK WITH CLAUDE CODE', 64, 92, oswald(30), CARD.amber, 'left', 2);
+  text(`${md(start)} – ${md(end)}, ${end.getFullYear()}`, CARD.w - 64, 90, mono(18), CARD.muted, 'right');
+  g.fillStyle = CARD.line; g.fillRect(64, 116, CARD.w - 128, 2);
+
+  // the number
+  const cost = w.cost || 0;
+  const money = cost >= 10 ? Math.round(cost).toLocaleString() : cost.toFixed(2);
+  const pv = w.planValue;
+  text(pv ? 'LIST-PRICE VALUE' : 'ESTIMATED COST', 64, 172, mono(16), CARD.muted, 'left', 2);
+  text(`≈$${money}`, 58, 312, oswald(150, 700), CARD.ink);
+  if (pv && pv.multiple >= 1.1) text(`${pv.multiple}× the ${pv.label} plan's weekly price`, 64, 358, mono(22), CARD.amber);
+  else if (pv) text(`on the ${pv.label} plan`, 64, 358, mono(22), CARD.muted);
+
+  // daily bars
+  const bx = 700, by = 150, bw = 436, bh = 200;
+  const max = Math.max(...days.map((d) => d.cost), 0.01);
+  const slot = bw / 7;
+  const busiest = days.reduce((i, d, j) => (d.cost > days[i].cost ? j : i), 0);
+  days.forEach((d, i) => {
+    const x = bx + i * slot + 8;
+    const colW = slot - 16;
+    flap(x, by, colW, bh);
+    const fh = d.cost > 0 ? Math.max(4, (d.cost / max) * (bh - 8)) : 0;
+    g.fillStyle = i === busiest && d.cost > 0 ? CARD.amber : CARD.green;
+    g.beginPath(); g.roundRect(x + 4, by + bh - 4 - fh, colW - 8, fh, 3); g.fill();
+    text(new Date(d.t).toLocaleDateString(undefined, { weekday: 'narrow' }), x + colW / 2, by + bh + 28, mono(16), CARD.muted, 'center');
+  });
+
+  // stat flaps
+  const stats = [
+    ['SESSIONS', String(w.sessions ?? 0)],
+    ['PROMPTS', String(w.prompts ?? 0)],
+    ['CACHE HITS', w.cacheHitRatio != null ? `${Math.round(w.cacheHitRatio * 100)}%` : '—'],
+    ['BUSIEST', w.busiestDay ? w.busiestDay.slice(0, 3) + (w.busiestHour != null ? ` ${w.busiestHour}:00` : '') : '—'],
+  ];
+  const sw = (CARD.w - 128 - 3 * 20) / 4;
+  stats.forEach(([label, value], i) => {
+    const x = 64 + i * (sw + 20);
+    flap(x, 410, sw, 110);
+    text(value, x + 22, 476, oswald(46, 600), CARD.ink);
+    text(label, x + 22, 506, mono(13), CARD.muted, 'left', 2);
+  });
+
+  // footer
+  text((w.models || []).map(modelShort).join(' · '), 64, 578, mono(16), CARD.faint);
+  text('npx claude-mission-control', CARD.w - 64, 578, mono(16), CARD.muted, 'right');
+
+  shareCanvas = c;
+  return c.toDataURL('image/png');
+}
+
+document.addEventListener('click', async (e) => {
+  if (!shareCanvas) return;
+  if (e.target.closest('[data-card-download]')) {
+    const a = document.createElement('a');
+    a.href = shareCanvas.toDataURL('image/png');
+    a.download = `week-with-claude-${new Date().toISOString().slice(0, 10)}.png`;
+    a.click();
+    toast('Card downloaded');
+  } else if (e.target.closest('[data-card-copy]')) {
+    try {
+      const blob = await new Promise((r) => shareCanvas.toBlob(r, 'image/png'));
+      await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
+      toast('Card copied, paste it anywhere');
+    } catch {
+      toast('Copy not supported here, use download');
+    }
+  }
+});
+
 document.addEventListener('click', (e) => {
   if (e.target.closest('[data-week]')) { openWeekReport(); return; }
   if (!e.target.closest('[data-week-export]') || !weekReport) return;
@@ -2942,7 +3080,7 @@ document.addEventListener('click', async (e) => {
   try {
     const r = await fetch(`/api/session?id=${encodeURIComponent(exportableSession.id)}`);
     const t = await r.json();
-    const lines = [`# ${t.title}`, '', `_${t.projectName} — exported from Claude Dashboard, ${new Date().toLocaleString()}_`, ''];
+    const lines = [`# ${t.title}`, '', `_${t.projectName} — exported from Claude Mission Control, ${new Date().toLocaleString()}_`, ''];
     for (const ev of t.events) {
       if (ev.kind === 'user') lines.push(`**You:** ${ev.text}`, '');
       else if (ev.kind === 'assistant') lines.push(ev.text, '');

package/public/manifest.webmanifest

@@ -1,6 +1,6 @@
 {
-  "name": "Claude Dashboard",
-  "short_name": "Claude Dash",
+  "name": "Claude Mission Control",
+  "short_name": "Mission Control",
   "description": "Local dashboard for Claude Code: live sessions, transcripts, costs, git status.",
   "start_url": "/",
   "display": "standalone",

package/uninstall.ps1

@@ -1,4 +1,4 @@
-# Remove the Claude Dashboard Scheduled Task (Windows).
+# Remove the Claude Mission Control Scheduled Task (Windows).
 schtasks /End /TN 'ClaudeDashboard' 2>$null | Out-Null
 schtasks /Delete /TN 'ClaudeDashboard' /F 2>$null | Out-Null
 Get-Process -Name node -ErrorAction SilentlyContinue |

package/uninstall.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-# Remove the Claude Dashboard service (LaunchAgent on macOS, systemd user unit on Linux).
+# Remove the Claude Mission Control service (LaunchAgent on macOS, systemd user unit on Linux).
 set -euo pipefail
 
 LABEL="com.claude-dashboard"