claude-mission-control 1.12.1 → 1.14.0

package/README.md

@@ -35,6 +35,15 @@ 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.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.
+- The unpushed strip warns when a background job's worktree holds uncommitted files or commits on no other branch. Deleting that session from Agent View's list would discard them.
+
 **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.
@@ -155,6 +164,7 @@ If something looks off, the log is at `~/Library/Logs/claude-dashboard.log`. To
 - **Departures** — every live `claude` CLI session as a row on the board: start time, project, current task, model, cost so far with a `$/h` burn rate, a context-window meter, elapsed time, and a split-flap status cell. The cell flips to an amber **needs you** when a session is waiting on your input — readable from across the room. A second line under the title says what it needs: `?` for a question Claude asked (with its options), `🔒` for a tool call awaiting permission (with the command or file), or the last question in Claude's reply, or failing that the first line of its final paragraph.
 - **Mission Control** — the `▦` button in the header (or `⌘K` → Mission Control) tiles every live session side by side, each pane following its own transcript. Each pane head shows the model, cost and burn rate, the context meter, and how many tool calls the session has made (failures in amber). One screen for "what is everything doing right now".
 - **Agents** — a session running subagents or an agent team shows them under its Mission Control pane: name, type, model, and a pulsing `●` while an agent has written in the last two minutes, `○` once it has gone quiet (idle teammates stay alive, so quiet is not finished), with the team name when there is one. Finished sessions list them at the top of the transcript.
+- **Background sessions** — sessions started with `claude --bg` or from Agent View (`claude agents`) carry a `BG` chip on the board and in the digest, go by the name Agent View gives them, and show Agent View's one-line summary of what they did. When a background job's worktree still holds work, the unpushed strip lists it: `●n` uncommitted files and `⑂n` commits on that branch and no other branch or remote. Deleting the session from Agent View's list (ctrl+x twice) discards that work, while `claude rm` refuses until it is committed and pushed, so merge or push first. Read from `~/.claude/jobs/`, which keeps finished jobs too.
 - **Pinned** — `☆ pin` on any transcript sticks that session to a strip under the departures board, so the thing you care about stays in view whether it's running or not.
 - **Digest** — what happened across every project, grouped by day. Each entry shows the session's recap (Claude's own "away summary" where one exists — click to expand), how many tasks it completed, and an open button. Switch the window between day / 3 days / week; collapses out of the way and remembers your choice.
 - **Project cards** — sorted by last activity. Branch chip, `●n` uncommitted changes, `↑n` unpushed commits. The sparkline is prompts per day for the last two weeks. Each session row has an `open ⬈` button that resumes the session in your terminal (new window, right directory) or imports it into the Claude desktop app when it's installed — the **Open in** selector in the header names whichever terminal you've configured (auto-detected on first run). The `⧉` button copies the `claude --resume` command instead.
@@ -188,6 +198,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)

package/lib/collector.js

@@ -18,6 +18,7 @@ const { estimateCost, planValue, costReport, budgetLevel, typicalWait, burnRate,
 const { readPlan } = require('./plan');
 const { readTeams, agentStatus, resolveTeam } = require('./teams');
 const { WINDOWS, recordSample, forecastWindow, shouldAlert, clockLabel, durationLabel } = require('./forecast');
+const { readJobs, worktreeStatus, jobAttention } = require('./jobs');
 
 // A busy session whose transcript hasn't grown for this long may be stalled.
 const QUIET_FLAG_MS = 10 * 60 * 1000;
@@ -179,6 +180,12 @@ class Collector {
   async refreshGit() {
     const paths = this.projectPaths().filter((p) => existsDir(p));
     this.raw.git = await collectGitStatus(paths);
+    // Background jobs' worktrees: work that removing the session would delete.
+    const jobWt = new Map();
+    for (const job of readJobs()) {
+      if (job.worktreePath) jobWt.set(job.jobId, await worktreeStatus(job));
+    }
+    this.raw.jobWt = jobWt;
   }
 
   async refreshQuota() {
@@ -357,9 +364,13 @@ class Collector {
     }
     this.stuckNotified = this.stuckNotified || new Set();
 
+    const jobs = readJobs();
+    const jobBySession = new Map(jobs.map((j) => [j.sessionId, j]));
+
     const nagMs = (cfg.idleNagMinutes || 0) * 60000;
     const liveSessions = this.raw.live.map((s) => {
       const { root, worktree } = worktreeRoot(s.cwd);
+      const job = jobBySession.get(s.sessionId) || null;
       // "Quiet" = busy but the transcript hasn't grown. Long quiet spells
       // usually mean the session is stalled (weak signal: it may just be
       // waiting on slow background work).
@@ -409,7 +420,11 @@ class Collector {
         assumed: report.assumedModels.length > 0,
         context: contextBySession.get(s.sessionId) || null,
         tools: toolsBySession.get(s.sessionId) || null,
-        title: titleBySession.get(s.sessionId) || s.name,
+        // Background sessions go by the name Agent View shows.
+        title: (job && job.name) || titleBySession.get(s.sessionId) || s.name,
+        background: s.kind === 'bg' || job
+          ? { jobId: job ? job.jobId : null, detail: job ? job.detail : null, state: job ? job.state : null }
+          : null,
         status: s.status,
         waitingFor: s.waitingFor,
         waitingReason: s.status === 'waiting' ? this.reasonFor(s) : null,
@@ -481,7 +496,22 @@ class Collector {
 
     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) };
+    // Background jobs, live or finished, with any worktree work at risk.
+    const liveIds = new Set(this.raw.live.map((s) => s.sessionId));
+    const jobWt = this.raw.jobWt || new Map();
+    const jobsOut = jobs.map((j) => ({
+      jobId: j.jobId,
+      sessionId: j.sessionId,
+      name: j.name || j.intent || j.jobId,
+      state: j.state,
+      detail: j.detail,
+      projectName: j.cwd ? friendlyName(worktreeRoot(j.cwd).root) : null,
+      updatedAt: j.updatedAt,
+      live: liveIds.has(j.sessionId),
+      atRisk: jobAttention(j, jobWt.get(j.jobId)),
+    }));
+
+    const next = { quota: this.raw.quota, forecast, jobs: jobsOut, 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;

package/lib/demo.js

@@ -55,6 +55,11 @@ function demoState() {
     generatedAt: now,
     plan: { tier: 'Max 20x' },
     quota: { utilization: 64, weeklyUtilization: 52, resetsAt: '2pm', weeklyResetsAt: 'Wed 9am' },
+    jobs: [
+      { jobId: 'b7e2c901', sessionId: S2, name: 'Migrate posts to the new block format', state: 'working', detail: 'converting shortcodes post by post; 41 of 120 done', projectName: 'Blog Engine', updatedAt: now - MIN, live: true, atRisk: null },
+      { jobId: 'a41f0d3e', sessionId: 'demo5555-5555-4555-8555-555555555555', name: 'Fix the flaky checkout test', state: 'done', detail: 'race in the cart fixture; fixed and committed on the branch, not merged', projectName: 'Acme Storefront', updatedAt: now - 2 * HOUR, live: false,
+        atRisk: { jobId: 'a41f0d3e', sessionId: 'demo5555-5555-4555-8555-555555555555', name: 'Fix the flaky checkout test', worktree: 'fix-flaky-checkout', branch: 'worktree-fix-flaky-checkout', changes: 1, onlyHere: 2 } },
+    ],
     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' },
@@ -87,6 +92,7 @@ function demoState() {
         projectName: 'Blog Engine', isWorktree: false, model: 'claude-fable-5',
         estCost: 61.2, burnRate: 19, assumed: false, context: { tokens: 731000, window: 1000000, pct: 73 }, tools: { total: 388, errors: 0 },
         title: 'Migrate posts to the new block format', status: 'busy',
+        background: { jobId: 'b7e2c901', detail: 'converting shortcodes post by post; 41 of 120 done', state: 'working' },
         waitingFor: null, waitingReason: null, startedAt: now - 3 * HOUR - 12 * MIN, statusUpdatedAt: now - MIN, quietMin: null, waitingMin: null,
         currentTask: { activeForm: 'Converting legacy shortcodes' },
         tasksSummary: { completed: 7, inProgress: 1, pending: 3 },
@@ -457,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/jobs.js

@@ -0,0 +1,117 @@
+'use strict';
+// Background sessions (`claude --bg`, Agent View) from ~/.claude/jobs/<id>/
+// state.json: Agent View's name and one-line summary, the job's state, and
+// its worktree. The files outlive the session, so finished jobs show too.
+//
+// For a job whose worktree still exists we also count work that would be
+// lost if the session were deleted from Agent View's list, which discards
+// the worktree: uncommitted files, and commits on no other branch or remote.
+const fs = require('fs');
+const path = require('path');
+const { execFile } = require('child_process');
+const { CLAUDE_DIR } = require('./paths');
+const { parsePorcelainV2 } = require('./gitstatus');
+
+const JOBS_DIR = path.join(CLAUDE_DIR, 'jobs');
+const KEEP_MS = 7 * 24 * 60 * 60 * 1000; // finished jobs older than this drop off
+const MAX_JOBS = 30;
+
+const cache = new Map(); // jobId -> { mtimeMs, job }
+
+function ms(v) {
+  if (typeof v === 'number') return v;
+  const t = Date.parse(v);
+  return Number.isFinite(t) ? t : null;
+}
+
+function normalizeJob(jobId, raw) {
+  if (!raw || !raw.sessionId) return null;
+  return {
+    jobId,
+    sessionId: raw.sessionId,
+    name: raw.name || null,
+    state: raw.state || null,
+    detail: raw.detail ? String(raw.detail).slice(0, 200) : null,
+    intent: raw.intent ? String(raw.intent).slice(0, 200) : null,
+    cwd: raw.cwd || null,
+    worktreePath: raw.worktreePath || null,
+    worktreeBranch: raw.worktreeBranch || null,
+    createdAt: ms(raw.createdAt),
+    updatedAt: ms(raw.updatedAt),
+    tokens: typeof raw.tokens === 'number' ? raw.tokens : null,
+  };
+}
+
+// Recent jobs, newest first. Cached per file by mtime.
+function readJobs(now = Date.now()) {
+  let ids;
+  try {
+    ids = fs.readdirSync(JOBS_DIR, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => d.name);
+  } catch {
+    return [];
+  }
+  const out = [];
+  for (const id of ids) {
+    const file = path.join(JOBS_DIR, id, 'state.json');
+    let st;
+    try {
+      st = fs.statSync(file);
+    } catch {
+      continue;
+    }
+    let hit = cache.get(id);
+    if (!hit || hit.mtimeMs !== st.mtimeMs) {
+      let job = null;
+      try {
+        job = normalizeJob(id, JSON.parse(fs.readFileSync(file, 'utf8')));
+      } catch { /* partial write: try again next poll */ }
+      hit = { mtimeMs: st.mtimeMs, job };
+      cache.set(id, hit);
+    }
+    if (hit.job && now - (hit.job.updatedAt || st.mtimeMs) <= KEEP_MS) out.push(hit.job);
+  }
+  out.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
+  return out.slice(0, MAX_JOBS);
+}
+
+function git(args) {
+  return new Promise((resolve) => {
+    execFile('git', args, { timeout: 4000, maxBuffer: 4 * 1024 * 1024 }, (err, stdout) => resolve(err ? null : stdout));
+  });
+}
+
+// Args for "commits reachable from HEAD but from no other branch or remote".
+// --exclude patterns for --branches must leave off the refs/heads/ prefix.
+function onlyHereArgs(worktreePath, branch) {
+  return ['-C', worktreePath, 'rev-list', '--count', 'HEAD', '--not',
+    ...(branch ? [`--exclude=${branch}`] : []), '--branches', '--remotes'];
+}
+
+async function worktreeStatus(job) {
+  if (!job.worktreePath || !fs.existsSync(path.join(job.worktreePath, '.git'))) return { exists: false };
+  const [status, count] = await Promise.all([
+    git(['-C', job.worktreePath, 'status', '--porcelain=v2', '--branch']),
+    git(onlyHereArgs(job.worktreePath, job.worktreeBranch)),
+  ]);
+  if (status == null) return { exists: true, error: true };
+  const s = parsePorcelainV2(status);
+  const n = Number.parseInt(count, 10);
+  return { exists: true, changes: s.dirty + s.untracked, onlyHere: Number.isFinite(n) ? n : 0 };
+}
+
+// What the unpushed strip should say about a job's worktree, or null.
+function jobAttention(job, wt) {
+  if (!wt || !wt.exists || wt.error) return null;
+  if (!wt.changes && !wt.onlyHere) return null;
+  return {
+    jobId: job.jobId,
+    sessionId: job.sessionId,
+    name: job.name || job.jobId,
+    worktree: path.basename(job.worktreePath),
+    branch: job.worktreeBranch,
+    changes: wt.changes,
+    onlyHere: wt.onlyHere,
+  };
+}
+
+module.exports = { readJobs, normalizeJob, worktreeStatus, jobAttention, onlyHereArgs };

package/package.json

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

@@ -351,6 +351,7 @@
   .badge.dirty { color: var(--warn); }
   .badge.ahead { color: var(--accent); }
   .badge.err { color: var(--bad); }
+  .badge.bg { color: var(--accent); letter-spacing: 0.06em; }
   .badge.missing { color: var(--bad); }
   .note-mark { color: var(--warn); cursor: default; font-size: 12px; flex: none; }
   #note-editor { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 6px; }
@@ -1099,6 +1100,8 @@ function copyBtn(cmd) {
 
 // Live sessions are already open somewhere; only offer open on idle ones.
 let liveIds = new Set();
+let jobBySession = new Map(); // background jobs (Agent View), by session id
+const BG_TIP = 'Background session (claude --bg or Agent View)';
 function renameBtn(sessionId, title) {
   return `<button class="copy rename-btn" data-rename-session="${esc(sessionId)}" data-title="${esc(title || '')}" title="Rename this session">✎</button>`;
 }
@@ -1161,13 +1164,21 @@ function liveCard(s) {
   const reason = rl
     ? `<div class="dep-reason" title="${esc(rl.full)}">${rl.glyph ? `<span class="glyph">${rl.glyph}</span>` : ''}${esc(rl.short)}</div>`
     : '';
+  // Agent View's one-line summary of a background session, when nothing more specific shows.
+  const bgDetail = s.background && s.background.detail && !rl && !task
+    ? `<div class="dep-task mono" title="Agent View's summary"><span class="prompt-ch">↳</span>${esc(s.background.detail)}</div>`
+    : '';
+  const kindBadge = s.background
+    ? ` <span class="badge bg" title="${BG_TIP}">BG</span>`
+    : s.isWorktree ? ' <span class="badge">worktree</span>' : '';
   return `<div class="dep-row ${s.status === 'waiting' ? 'waiting' : ''}">
     <span class="dep-time" title="session started">${esc(dep)}</span>
-    <span class="dep-proj disp">${esc(s.projectName)}${s.isWorktree ? ' <span class="badge">worktree</span>' : ''}</span>
+    <span class="dep-proj disp">${esc(s.projectName)}${kindBadge}</span>
     <div class="dep-mid">
       <div class="dep-title" data-session="${esc(s.sessionId)}" title="Click to watch the transcript live">${esc(s.title || '')}</div>
       ${task}
       ${reason}
+      ${bgDetail}
     </div>
     <div class="dep-right">
       ${modelChip(s.model)}
@@ -1246,17 +1257,27 @@ function renderGitAttention(state) {
     if (!changes && !ahead) continue;
     items.push({ name: p.name, changes, ahead, when: p.lastActivityAt });
   }
-  if (!items.length) {
+  // Background jobs' worktrees: Agent View deletes the worktree with the session.
+  const atRisk = (state.jobs || []).filter((j) => j.atRisk).map((j) => ({ ...j.atRisk, projectName: j.projectName, when: j.updatedAt }));
+  if (!items.length && !atRisk.length) {
     el.hidden = true;
     return;
   }
   items.sort((a, b) => (b.when || 0) - (a.when || 0));
+  const plural = (n, w) => `${n} ${w}${n === 1 ? '' : 's'}`;
   el.hidden = false;
   patch(el,
-    `<span class="ga-label">Unpushed work — ${items.length} repo${items.length === 1 ? '' : 's'}</span>` +
+    `<span class="ga-label">Unpushed work — ${[items.length && plural(items.length, 'repo'), atRisk.length && plural(atRisk.length, 'worktree')].filter(Boolean).join(', ')}</span>` +
     items.map((it) => `<span class="ga-item">${esc(it.name)}${
       it.changes ? `<span class="badge dirty" title="${it.changes} uncommitted/untracked files">●${it.changes}</span>` : ''}${
-      it.ahead ? `<span class="badge ahead" title="${it.ahead} commits not pushed">↑${it.ahead}</span>` : ''}</span>`).join(''));
+      it.ahead ? `<span class="badge ahead" title="${it.ahead} commits not pushed">↑${it.ahead}</span>` : ''}</span>`).join('') +
+    atRisk.map((w) => {
+      const parts = [w.onlyHere && `${plural(w.onlyHere, 'commit')} on ${w.branch || 'this branch'} and no other branch`, w.changes && plural(w.changes, 'uncommitted file')].filter(Boolean);
+      const tip = `Background job "${w.name}": ${parts.join(', ')}. Deleting the session from Agent View's list (ctrl+x twice) discards this; claude rm refuses until it is committed and pushed. Merge or push first.`;
+      return `<span class="ga-item" title="${esc(tip)}">${esc(w.projectName || '')} <span class="wt mono">⎇ ${esc(w.worktree)}</span><span class="badge bg" title="${BG_TIP}">BG</span>${
+        w.changes ? `<span class="badge dirty">●${w.changes}</span>` : ''}${
+        w.onlyHere ? `<span class="badge dirty">⑂${w.onlyHere}</span>` : ''}</span>`;
+    }).join(''));
 }
 
 // ---------- digest: what happened recently, across every project ----------
@@ -1289,11 +1310,14 @@ function digestItem(it) {
   const t = it.tasksSummary;
   const total = t ? t.completed + t.inProgress + t.pending : 0;
   const running = liveIds.has(it.sessionId);
+  const job = jobBySession.get(it.sessionId);
+  const summary = it.awaySummary || (job && job.detail);
   const time = new Date(it.lastActivityAt).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
   return `<div class="digest-item">
     <div class="di-top">
       <span class="di-proj">${esc(it.project)}</span>
       <span class="di-title" data-session="${esc(it.sessionId)}" title="Click to read the transcript">${it.worktree ? `<span class="wt mono">⎇</span> ` : ''}${esc(it.title)}</span>${noteMark(it)}
+      ${job ? `<span class="badge bg" title="${BG_TIP}">BG</span>` : ''}
       ${running ? '<span class="flap disp st st-busy">running</span>' : ''}
       ${modelChip(it.model)}
       ${changesChip(it)}
@@ -1301,7 +1325,7 @@ function digestItem(it) {
       <span class="di-when">${time}</span>
       ${openBtn(it.sessionId)}
     </div>
-    ${it.awaySummary ? `<div class="di-summary" title="Click to expand">${esc(it.awaySummary)}</div>` : ''}
+    ${summary ? `<div class="di-summary" title="Click to expand">${esc(summary)}</div>` : ''}
     ${total ? `<div class="di-tasks"><span class="done">${t.completed}</span>/${total} tasks done${
       t.inProgress ? `, ${t.inProgress} in progress` : ''}${
       t.pending ? `, ${t.pending} left` : ''}</div>` : ''}
@@ -1337,6 +1361,7 @@ function render(state) {
   if (state.theme && state.theme !== 'board') document.documentElement.dataset.theme = state.theme;
   else delete document.documentElement.dataset.theme;
   liveIds = new Set((state.liveSessions || []).map((s) => s.sessionId));
+  jobBySession = new Map((state.jobs || []).map((j) => [j.sessionId, j]));
   // A transcript being followed live keeps its header cost in step with the board.
   if (follow.id && exportableSession?.id === follow.id && exportableSession.usage) {
     const live = (state.liveSessions || []).find((s) => s.sessionId === follow.id);
@@ -1582,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>`;
@@ -1672,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('');
@@ -1683,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.') +

package/server.js

@@ -15,9 +15,9 @@ 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 { 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 +133,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 +252,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' });