claude-mission-control 1.12.0 → 1.13.0

package/README.md

@@ -2,6 +2,10 @@
 
 One web page that shows you everything Claude Code is doing on your machine.
 
+**[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**
@@ -27,10 +31,15 @@ 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 Mission Control, 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.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.
@@ -151,6 +160,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.
@@ -165,6 +175,9 @@ If something looks off, the log is at `~/Library/Logs/claude-dashboard.log`. To
 - **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, 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.

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 },

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.0",
+  "version": "1.13.0",
   "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

@@ -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);
@@ -350,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; }
@@ -394,6 +396,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;
@@ -830,11 +840,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>
@@ -1090,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>`;
 }
@@ -1152,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)}
@@ -1237,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 ----------
@@ -1280,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)}
@@ -1292,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>` : ''}
@@ -1328,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);