wisp-agents 0.6.0 → 0.8.0

package/web/js/blocks.js

@@ -121,6 +121,7 @@ R.stats = (b, ctx) => {
 };
 
 R.files = (b, ctx) => {
+  const canRevert = !!(ctx.revertFile && ctx.session?.agent && ctx.session.agent !== 'wisp');
   const node = el(`
     <div class="b-files card">
       <h3 class="b-title">${esc(b.title || 'Files')}<span class="count">${(b.items || []).length}</span></h3>
@@ -129,11 +130,13 @@ R.files = (b, ctx) => {
           const [ch, cls] = CHANGE[f.change] || CHANGE.modified;
           const c = findChange(ctx.turn, f.path);
           const n = c ? countChanges(c.edits) : null;
-          return `<li style="--k:${i}" data-path="${esc(f.path)}" class="${c ? 'has-diff' : ''}">
+          const rev = !!c?.reverted;
+          return `<li style="--k:${i}" data-path="${esc(f.path)}" class="${c ? 'has-diff' : ''} ${rev ? 'is-reverted' : ''}">
             <div class="row">
               <span class="badge ${cls}">${ch}</span>${pathHtml(f.path)}
+              ${rev ? '<span class="rev-tag">Reverted</span>' : ''}
               ${n ? `<span class="nums"><span class="plus">+${n.add}</span><span class="minus">−${n.del}</span></span>` : ''}
-              <span class="actions">${c ? `<button class="ghost xs toggle" title="Show diff">${icon('chevron')}</button>` : ''}<button class="ghost xs open" title="Open in editor">${icon('external')}</button></span>
+              <span class="actions">${c && canRevert ? `<button class="ghost xs revert" title="${rev ? 'Re-apply changes to this file' : 'Revert file to before this turn'}">${icon(rev ? 'rerun' : 'replay')}<span>${rev ? 'Re-apply' : 'Revert'}</span></button>` : ''}${c ? `<button class="ghost xs toggle" title="Show diff">${icon('chevron')}</button>` : ''}<button class="ghost xs open" title="Open in editor">${icon('external')}</button></span>
             </div>
             ${f.note ? `<p class="note">${inlineMd(f.note)}</p>` : ''}
           </li>`;
@@ -144,6 +147,11 @@ R.files = (b, ctx) => {
     const li = e.target.closest('li');
     if (!li) return;
     if (e.target.closest('.open')) return ctx.openFile(li.dataset.path);
+    const revBtn = e.target.closest('.revert');
+    if (revBtn) {
+      const c = findChange(ctx.turn, li.dataset.path);
+      return ctx.revertFile?.(c?.file || li.dataset.path, !!c?.reverted);
+    }
     if (!li.classList.contains('has-diff')) return;
     if (e.target.closest('a')) return;
     const existing = li.querySelector('.b-diff');
@@ -199,14 +207,12 @@ R.diff = (b, ctx) => {
   let edits;
   let op = 'edit';
   let file = b.file || b.path || '';
+  const c = findChange(ctx.turn, file);
   if (b.before !== undefined || b.after !== undefined) edits = [{ before: b.before || '', after: b.after || '' }];
-  else {
-    const c = findChange(ctx.turn, file);
-    if (c) {
-      edits = c.edits;
-      op = c.op;
-      file = c.file;
-    }
+  else if (c) {
+    edits = c.edits;
+    op = c.op;
+    file = c.file;
   }
   if (!edits) {
     return el(`<div class="b-diff card missing"><div class="diff-head">${icon('file')}${pathHtml(file)}</div><p class="muted">No captured edits for this file.</p></div>`);
@@ -214,6 +220,8 @@ R.diff = (b, ctx) => {
   const { add, del } = countChanges(edits);
   const numbered = op === 'create' || op === 'write';
   const lang = langOf(file);
+  const canRevert = !!(c && ctx.revertFile && ctx.session?.agent && ctx.session.agent !== 'wisp');
+  const reverted = !!c?.reverted;
   const body = edits
     .map((e, ei) => {
       const rows = hunks(diffLines(e.before, e.after), 3)
@@ -227,12 +235,13 @@ R.diff = (b, ctx) => {
     })
     .join('');
   const node = el(`
-    <div class="b-diff ${b.bare ? 'bare' : 'card'}">
-      ${b.bare ? '' : `<div class="diff-head">${icon('file')}${pathHtml(file)}<span class="nums"><span class="plus">+${add}</span><span class="minus">−${del}</span></span><button class="ghost xs open" title="Open in editor">${icon('external')}</button></div>`}
+    <div class="b-diff ${b.bare ? 'bare' : 'card'} ${reverted ? 'is-reverted' : ''}">
+      ${b.bare ? '' : `<div class="diff-head">${icon('file')}${pathHtml(file)}${reverted ? '<span class="rev-tag">Reverted</span>' : ''}<span class="nums"><span class="plus">+${add}</span><span class="minus">−${del}</span></span>${canRevert ? `<button class="ghost xs revert ${reverted ? 'reverted' : ''}" title="${reverted ? 'Re-apply changes to this file' : 'Revert this file to before this turn'}">${icon(reverted ? 'rerun' : 'replay')}<span>${reverted ? 'Re-apply' : 'Revert'}</span></button>` : ''}<button class="ghost xs open" title="Open in editor">${icon('external')}</button></div>`}
       <div class="diff-scroll"><table><tbody>${body}</tbody></table></div>
       ${b.caption ? `<p class="caption">${inlineMd(b.caption)}</p>` : ''}
     </div>`);
   node.querySelector('.open')?.addEventListener('click', () => ctx.openFile(file));
+  node.querySelector('.revert')?.addEventListener('click', () => ctx.revertFile?.(file, reverted));
   return node;
 };
 
@@ -265,6 +274,23 @@ R.compare = (b) => {
   return el(`<div class="b-compare">${side(b.before, 'before')}<div class="arrow">${icon('arrow')}</div>${side(b.after, 'after')}</div>`);
 };
 
+// Orthogonal polyline with rounded corners.
+const orthPath = (pts, r = 10) =>
+  pts
+    .map(([x, y], i) => {
+      if (i === 0) return `M${x},${y}`;
+      if (i === pts.length - 1) return `L${x},${y}`;
+      const [px, py] = pts[i - 1];
+      const [nx, ny] = pts[i + 1];
+      const k1 = Math.min(r, Math.hypot(x - px, y - py) / 2);
+      const k2 = Math.min(r, Math.hypot(nx - x, ny - y) / 2);
+      const ux = Math.sign(x - px), uy = Math.sign(y - py), vx = Math.sign(nx - x), vy = Math.sign(ny - y);
+      return `L${x - ux * k1},${y - uy * k1} Q${x},${y} ${x + vx * k2},${y + vy * k2}`;
+    })
+    .join(' ');
+const FLOW_MIN_COL = 150; // px a column needs before the row wraps
+const FLOW_GAP = 46;
+
 R.flow = (b) => {
   const nodes = (b.nodes || []).map((n, i) => (typeof n === 'string' ? { id: String(i), label: n } : { id: String(n.id ?? i), ...n }));
   const ids = nodes.map((n) => n.id);
@@ -305,8 +331,27 @@ R.flow = (b) => {
       const r = stage.querySelector(`.node[data-id="${CSS.escape(id)}"]`).getBoundingClientRect();
       return { l: r.left - box.left, t: r.top - box.top, r: r.right - box.left, b: r.bottom - box.top, cx: r.left - box.left + r.width / 2, cy: r.top - box.top + r.height / 2 };
     };
-    const vertical = getComputedStyle(stage.querySelector('.cols')).flexDirection === 'column';
+    const colsEl = stage.querySelector('.cols');
+    const vertical = getComputedStyle(colsEl).flexDirection === 'column';
+    // Too many columns for the width: wrap into rows that snake (L→R, then R→L, …).
+    const hasBack = edges.some((e) => order[e.to] <= order[e.from]);
+    const room = box.width - 4 - (hasBack ? 70 : 0); // leave the loop gutter either way so the row count is stable
+    const perRow = vertical ? cols.length : Math.max(1, Math.floor((room + FLOW_GAP) / (FLOW_MIN_COL + FLOW_GAP)));
+    const snake = !vertical && cols.length > perRow;
+    if (snake !== colsEl.classList.contains('snake') || (snake && colsEl.style.getPropertyValue('--per-row') !== String(perRow))) {
+      colsEl.classList.toggle('snake', snake);
+      colsEl.style.setProperty('--per-row', snake ? perRow : '');
+      [...colsEl.children].forEach((c, i) => {
+        const row = Math.floor(i / perRow);
+        const pos = i % perRow;
+        c.style.gridRow = snake ? row + 1 : '';
+        c.style.gridColumn = snake ? (row % 2 ? perRow - pos : pos + 1) : '';
+      });
+      return requestAnimationFrame(draw);
+    }
     let out = '';
+    let loopTop = false;
+    let loopBottom = false;
     edges.forEach((e, i) => {
       const a = rect(e.from);
       const z = rect(e.to);
@@ -315,13 +360,22 @@ R.flow = (b) => {
       let lx;
       let ly;
       if (back) {
-        if (vertical) {
+        if (snake && Math.abs(a.cy - z.cy) > 4) {
+          // Out to the right gutter, up, then over the top of the target so it never crosses a card.
+          const x = box.width - 44;
+          const y = z.t - 16;
+          d = orthPath([[a.r, a.cy], [x, a.cy], [x, y], [z.cx, y], [z.cx, z.t]]);
+          lx = x + 6;
+          ly = (a.cy + y) / 2;
+          loopTop ||= y < 0;
+        } else if (vertical) {
           const x = Math.max(a.r, z.r) + 26;
           d = `M${a.r},${a.cy} C${x},${a.cy} ${x},${z.cy} ${z.r},${z.cy}`;
           lx = x + 4;
           ly = (a.cy + z.cy) / 2;
         } else {
           const y = Math.max(a.b, z.b) + 34;
+          loopBottom = true;
           d = `M${a.cx},${a.b} C${a.cx},${y} ${z.cx},${y} ${z.cx},${z.b}`;
           lx = (a.cx + z.cx) / 2;
           ly = y - 4;
@@ -331,6 +385,18 @@ R.flow = (b) => {
         d = `M${a.cx},${a.b} C${a.cx},${m} ${z.cx},${m} ${z.cx},${z.t}`;
         lx = (a.cx + z.cx) / 2 + 8;
         ly = m;
+      } else if (snake && z.t >= a.b) {
+        // Row turn: drop from the end of one row into the start of the next.
+        const m = (a.b + z.t) / 2;
+        d = `M${a.cx},${a.b} C${a.cx},${m} ${z.cx},${m} ${z.cx},${z.t}`;
+        lx = (a.cx + z.cx) / 2 + 8;
+        ly = m;
+      } else if (z.cx < a.cx) {
+        // Right-to-left row.
+        const m = (a.l + z.r) / 2;
+        d = `M${a.l},${a.cy} C${m},${a.cy} ${m},${z.cy} ${z.r},${z.cy}`;
+        lx = m;
+        ly = (a.cy + z.cy) / 2 - 8;
       } else {
         const m = (a.r + z.l) / 2;
         d = `M${a.r},${a.cy} C${m},${a.cy} ${m},${z.cy} ${z.l},${z.cy}`;
@@ -339,11 +405,13 @@ R.flow = (b) => {
       }
       out += `<path class="wire ${back ? 'back' : ''}" d="${d}" pathLength="1" style="--k:${i}"/>`;
       if (!reduced()) out += `<circle r="3" class="spark ${back ? 'back' : ''}"><animateMotion dur="${back ? 3.2 : 2.2}s" begin="${0.8 + i * 0.35}s" repeatCount="indefinite" path="${d}"/></circle>`;
-      if (e.label) out += `<text x="${lx}" y="${ly}" class="wire-label" text-anchor="${vertical ? 'start' : 'middle'}">${esc(e.label)}</text>`;
+      const side = vertical || (snake && (back ? Math.abs(a.cy - z.cy) > 4 : z.t >= a.b));
+      if (e.label) out += `<text x="${lx}" y="${ly}" class="wire-label" text-anchor="${side ? 'start' : 'middle'}">${esc(e.label)}</text>`;
     });
     svg.innerHTML = out;
-    stage.style.paddingBottom = !vertical && edges.some((e) => order[e.to] <= order[e.from]) ? '46px' : '';
-    stage.style.paddingRight = vertical && edges.some((e) => order[e.to] <= order[e.from]) ? '70px' : '';
+    stage.style.paddingBottom = loopBottom ? '46px' : '';
+    stage.style.paddingRight = (vertical || snake) && hasBack ? '70px' : '';
+    stage.style.paddingTop = loopTop || (snake && stage.style.paddingTop && hasBack) ? '22px' : '';
   };
   new ResizeObserver(() => requestAnimationFrame(draw)).observe(node);
   return node;
@@ -370,17 +438,20 @@ R.chart = (b, ctx) => {
 };
 
 R.terminal = (b, ctx) => {
-  const ok = b.exitCode === undefined || Number(b.exitCode) === 0;
+  const cmd = String(b.command || '');
+  const key = `term:${cmd}`;
+  const prev = cmd && ctx.turn?.actionRuns?.[key];
+  const exitCode = prev ? prev.exitCode : b.exitCode;
+  const ok = exitCode === undefined || Number(exitCode) === 0;
   const node = el(`
     <div class="b-term">
-      <div class="term-head"><span class="lights"><i></i><i></i><i></i></span><span class="title">${esc(b.title || ctx.session?.cwd?.split('/').pop() || 'terminal')}</span>${b.exitCode !== undefined ? `<span class="exit ${ok ? 'ok' : 'bad'}">exit ${esc(b.exitCode)}</span>` : ''}</div>
+      <div class="term-head"><span class="lights"><i></i><i></i><i></i></span><span class="title">${esc(b.title || ctx.session?.cwd?.split('/').pop() || 'terminal')}</span>${exitCode !== undefined ? `<span class="exit ${ok ? 'ok' : 'bad'}">exit ${esc(exitCode)}</span>` : ''}${cmd && ctx.exec ? `<button class="term-run" title="Run command again">${icon('rerun')}<span>Run</span></button>` : ''}</div>
       <pre><span class="cmd"><span class="ps">$</span> <span class="typed"></span><span class="caret"></span></span>\n<span class="out"></span></pre>
     </div>`);
   const typed = node.querySelector('.typed');
   const out = node.querySelector('.out');
-  const cmd = String(b.command || '');
-  out.textContent = String(b.output || '').replace(/\s+$/, '');
-  if (reduced()) {
+  out.textContent = String(prev ? prev.output : b.output || '').replace(/\s+$/, '');
+  if (reduced() || prev) {
     typed.textContent = cmd;
     node.classList.add('ran');
   } else {
@@ -391,6 +462,31 @@ R.terminal = (b, ctx) => {
       else setTimeout(() => node.classList.add('ran'), 220);
     }, ctx.delay + 300);
   }
+  const runBtn = node.querySelector('.term-run');
+  if (runBtn) {
+    runBtn.addEventListener('click', async () => {
+      runBtn.disabled = true;
+      runBtn.querySelector('span').textContent = 'Running…';
+      try {
+        const res = await ctx.exec(cmd, key);
+        if (res) {
+          typed.textContent = cmd;
+          node.classList.add('ran');
+          out.textContent = String(res.output || '').replace(/\s+$/, '');
+          let badge = node.querySelector('.exit');
+          if (!badge) {
+            badge = el('<span class="exit"></span>');
+            runBtn.before(badge);
+          }
+          badge.className = `exit ${res.exitCode === 0 ? 'ok' : 'bad'}`;
+          badge.textContent = `exit ${res.exitCode}`;
+        }
+      } finally {
+        runBtn.disabled = false;
+        runBtn.querySelector('span').textContent = 'Run';
+      }
+    });
+  }
   return node;
 };
 
@@ -402,6 +498,9 @@ R.tests = (b, ctx) => {
   const C = 2 * Math.PI * 34;
   const seg = (n, off) => `stroke-dasharray="${(n / total) * C} ${C}" stroke-dashoffset="${-off}"`;
   const ok = failed === 0;
+  const cmd = String(b.command || '').trim();
+  const runKey = `tests:${cmd}`;
+  const prevRun = cmd && ctx.turn?.actionRuns?.[runKey];
   const node = el(`
     <div class="b-tests card ${ok ? 'ok' : 'bad'}">
       <div class="tests-main">
@@ -415,9 +514,10 @@ R.tests = (b, ctx) => {
         <div class="tests-text">
           <div class="verdict">${ok ? 'All green' : `${failed} failing`}</div>
           <div class="counts"><span class="pass"><b class="v" data-v="${passed}"></b> passed</span>${failed ? `<span class="fail"><b class="v" data-v="${failed}"></b> failed</span>` : ''}${skipped ? `<span class="skip"><b class="v" data-v="${skipped}"></b> skipped</span>` : ''}${b.durationMs ? `<span class="dur">${fmtDuration(b.durationMs)}</span>` : ''}</div>
-          ${b.command ? `<code class="cmdline">$ ${esc(b.command)}</code>` : ''}
+          ${cmd ? `<div class="tests-cmd"><code class="cmdline">$ ${esc(cmd)}</code>${ctx.exec ? `<button class="ghost xs run-tests" title="Re-run ${esc(cmd)}">${icon('rerun')}<span>Re-run</span></button>` : ''}</div>` : ''}
         </div>
       </div>
+      <div class="tests-rerun-out" ${prevRun ? '' : 'hidden'}></div>
       ${(b.failures || []).length ? `<ul class="failures">${b.failures
         .map((f) => `<li>${icon('x')}<div><b>${esc(f.name)}</b>${f.message ? `<pre>${esc(f.message)}</pre>` : ''}${f.file ? `<button class="link file" data-file="${esc(f.file)}">${esc(f.file)}</button>` : ''}</div></li>`)
         .join('')}</ul>` : ''}
@@ -429,6 +529,28 @@ R.tests = (b, ctx) => {
       ctx.openFile(p, line);
     }),
   );
+  const outSlot = node.querySelector('.tests-rerun-out');
+  const paintRun = (res) => {
+    if (!res || !outSlot) return;
+    outSlot.hidden = false;
+    const pass = res.exitCode === 0;
+    outSlot.innerHTML = `<div class="act-res ${pass ? 'ok' : 'bad'}"><div class="act-res-bar"><span class="exit ${pass ? 'ok' : 'bad'}">exit ${esc(res.exitCode)}</span><span class="muted xs">${fmtDuration(res.durationMs)}</span></div>${res.output ? `<pre class="act-out">${esc(res.output)}</pre>` : ''}</div>`;
+  };
+  if (prevRun) paintRun(prevRun);
+  const runBtn = node.querySelector('.run-tests');
+  if (runBtn) {
+    runBtn.addEventListener('click', async () => {
+      runBtn.disabled = true;
+      runBtn.querySelector('span').textContent = 'Running…';
+      try {
+        const res = await ctx.exec(cmd, runKey);
+        paintRun(res);
+      } finally {
+        runBtn.disabled = false;
+        runBtn.querySelector('span').textContent = 'Re-run';
+      }
+    });
+  }
   return node;
 };
 
@@ -443,6 +565,183 @@ R.commits = (b) =>
         .join('')}</ol>
     </div>`);
 
+// A branch graph for a PR or merge: lanes per branch, the merge target on top, commits that
+// conflict marked and numbered, and the conflicts themselves listed underneath.
+const GRAPH_ROW = 30;
+const GRAPH_LANE = 16;
+const GRAPH_STATE = {
+  conflict: { label: 'conflicts', icon: 'warn' },
+  ready: { label: 'ready', icon: 'check' },
+  merged: { label: 'merged', icon: 'branch' },
+  blocked: { label: 'blocked', icon: 'x' },
+  pending: { label: 'checking', icon: 'clock' },
+};
+const PR_STATE = { open: 'Open', draft: 'Draft', merged: 'Merged', closed: 'Closed' };
+
+export function layoutGraph(b) {
+  const commits = (Array.isArray(b.commits) ? b.commits : []).filter((c) => c && typeof c === 'object');
+  const into = b.into ? String(b.into) : '';
+  // Lane 0 is the base branch (what we merge into); the others in order of first appearance.
+  const lanes = [];
+  const laneOf = (name) => {
+    let i = lanes.indexOf(name);
+    if (i < 0) i = lanes.push(name) - 1;
+    return i;
+  };
+  const base = into || String(commits.find((c) => c.branch)?.branch || '');
+  laneOf(base);
+  const off = into ? 1 : 0; // the merge target takes row 0
+  const rows = commits.map((c, i) => ({ c, row: i + off, lane: laneOf(c.branch ? String(c.branch) : base) }));
+  const head = b.head ? laneOf(String(b.head)) : lanes.length > 1 ? 1 : 0;
+  const same = (a, z) => !!a && !!z && (a.startsWith(z) || z.startsWith(a));
+  const find = (h) => rows.find((r) => same(String(r.c.hash || ''), String(h)));
+  const edges = [];
+  const tails = [];
+  rows.forEach((r, i) => {
+    const below = rows.slice(i + 1);
+    let parents = Array.isArray(r.c.parents) ? r.c.parents.map(find).filter(Boolean) : [];
+    if (!parents.length) {
+      // Implied parent: the next older commit on this branch, else where the branch forked off base.
+      const p = below.find((o) => o.lane === r.lane) || (r.lane !== 0 && below.find((o) => o.lane === 0));
+      if (p) parents = [p];
+    }
+    parents.forEach((p, k) => edges.push({ from: r, to: p, lane: k === 0 ? r.lane : p.lane, bend: k === 0 ? 'late' : 'early' }));
+    if (!parents.length) tails.push(r);
+  });
+  const conflictNo = new Map();
+  rows.forEach((r) => {
+    if (r.c.conflict) conflictNo.set(r, conflictNo.size + 1);
+  });
+  const tips = new Set(lanes.map((_, l) => rows.find((r) => r.lane === l)).filter(Boolean));
+  return { rows, lanes, head, edges, tails, conflictNo, tips, into, off };
+}
+
+R.graph = (b, ctx) => {
+  const g = layoutGraph(b);
+  const conflicts = (Array.isArray(b.conflicts) ? b.conflicts : []).filter(Boolean).map((c) => (typeof c === 'string' ? { file: c } : c));
+  const nConflicts = conflicts.length || g.conflictNo.size;
+  const merge = GRAPH_STATE[b.merge] ? b.merge : nConflicts ? 'conflict' : g.into ? 'ready' : '';
+  const merged = merge === 'merged';
+  const laneColor = (l) => (l === 0 ? 'var(--g-base)' : merged && l === g.head ? 'var(--g-merged)' : `var(--g-${((l - 1) % 4) + 1})`);
+  const x = (l) => 9 + l * GRAPH_LANE;
+  const y = (row) => row * GRAPH_ROW + GRAPH_ROW / 2;
+  const nRows = g.rows.length + g.off;
+  const width = x(Math.max(0, g.lanes.length - 1)) + 10;
+  const height = nRows * GRAPH_ROW + 10;
+  const path = (x1, y1, x2, y2, bend) => {
+    if (x1 === x2) return `M${x1} ${y1}V${y2}`;
+    const r = GRAPH_ROW * 0.8;
+    // 'late' stays in the child's lane and curves into the parent near it (a fork); 'early'
+    // curves out right away (a merge pulling another branch in).
+    return bend === 'early' ? `M${x1} ${y1}C${x1} ${y1 + r} ${x2} ${y1 + r * 0.2} ${x2} ${y1 + r}V${y2}` : `M${x1} ${y1}V${y2 - r}C${x1} ${y2 - r * 0.2} ${x2} ${y2 - r} ${x2} ${y2}`;
+  };
+  const wires = [];
+  g.edges.forEach((e, k) => {
+    wires.push(`<path class="g-wire" style="--k:${k};stroke:${laneColor(e.lane)}" pathLength="1" d="${path(x(e.from.lane), y(e.from.row), x(e.to.lane), y(e.to.row), e.bend)}"/>`);
+  });
+  g.tails.forEach((r) => wires.push(`<path class="g-tail" style="stroke:${laneColor(r.lane)}" d="M${x(r.lane)} ${y(r.row)}V${height}"/>`));
+  if (g.into) {
+    const headTip = g.rows.find((r) => r.lane === g.head && g.head !== 0);
+    const baseTip = g.rows.find((r) => r.lane === 0);
+    if (baseTip) wires.push(`<path class="g-tail" style="stroke:var(--g-base)" d="M${x(0)} ${y(0)}V${y(baseTip.row)}"/>`);
+    if (headTip) wires.push(`<path class="g-wire ${merged ? '' : 'pending'} st-${merge}" style="--k:0" pathLength="1" d="${path(x(0), y(0), x(headTip.lane), y(headTip.row), 'early')}"/>`);
+  }
+  const dots = g.rows.map((r) => {
+    const cls = r.c.conflict ? 'conflict' : r.c.merge || (Array.isArray(r.c.parents) && r.c.parents.length > 1) ? 'merge' : '';
+    return `<circle class="g-dot ${cls}" style="--k:${r.row};--lc:${laneColor(r.lane)}" cx="${x(r.lane)}" cy="${y(r.row)}" r="${cls === 'merge' ? 4.5 : 4}"/>`;
+  });
+  const target = g.into ? `<g class="g-target st-${merge}" transform="translate(${x(0)} ${y(0)})"><circle r="7.5"/>${merge === 'conflict' ? '<path d="M0 -3.6V0.6M0 3V3.2"/>' : merge === 'ready' ? '<path d="M-3 0.2L-0.9 2.3L3.2 -2"/>' : merge === 'blocked' ? '<path d="M-2.6 -2.6L2.6 2.6M2.6 -2.6L-2.6 2.6"/>' : ''}</g>` : '';
+
+  const meta = (c) => [c.hash ? `<code>${esc(String(c.hash).slice(0, 7))}</code>` : '', [c.author, c.when].filter(Boolean).map((s) => esc(s)).join(' · ')].filter(Boolean).join(' ');
+  const rowHtml = (r) => {
+    const n = g.conflictNo.get(r);
+    const tag = g.tips.has(r) && g.lanes[r.lane] ? `<span class="g-tag" style="--lc:${laneColor(r.lane)}">${esc(g.lanes[r.lane])}</span>` : '';
+    const tone = r.c.conflict ? 'conflict' : r.lane === g.head ? 'head' : 'other';
+    return `<li class="g-row ${tone}" style="--k:${r.row}" ${n ? `data-n="${n}"` : ''} title="${esc(r.c.note || '')}"><span class="g-msg">${inlineMd(r.c.message || r.c.hash || '')}</span>${tag}${n ? `<span class="g-num">${n}</span>` : ''}<span class="g-meta">${meta(r.c)}</span></li>`;
+  };
+  const stateNote = b.note || (merge === 'conflict' ? `${nConflicts} conflict${nConflicts === 1 ? '' : 's'}` : GRAPH_STATE[merge]?.label || '');
+  const targetRow = g.into ? `<li class="g-row target st-${merge}" style="--k:0"><span class="g-msg">${merged ? 'Merged' : 'Merge'} into ${esc(g.into)}</span><span class="g-state">${esc(stateNote)}</span></li>` : '';
+
+  const checks = (Array.isArray(b.checks) ? b.checks : []).filter(Boolean).map((c) => (typeof c === 'string' ? { label: c, status: 'pass' } : c));
+  const checkIcon = { pass: 'check', fail: 'x', pending: 'clock', skip: 'skip' };
+  const checksHtml = checks.length
+    ? `<div class="g-checks">${checks.map((c, i) => `<span class="g-check st-${esc(c.status || 'pass')}" style="--k:${i}" ${c.detail ? `title="${esc(c.detail)}"` : ''}>${icon(checkIcon[c.status] || 'check')}<b>${esc(c.label || '')}</b>${c.value ? `<span>${esc(c.value)}</span>` : ''}</span>`).join('')}</div>`
+    : '';
+
+  const numFor = (c) => {
+    if (c.n) return Number(c.n);
+    const r = c.commit && g.rows.find((o) => o.c.hash && (String(o.c.hash).startsWith(String(c.commit)) || String(c.commit).startsWith(String(o.c.hash))));
+    return r ? g.conflictNo.get(r) : undefined;
+  };
+  const side = (label, text, cls) => (text ? `<div class="g-side ${cls}"><span class="g-who">${esc(label)}</span><code>${esc(text)}</code></div>` : '');
+  const headName = g.lanes[g.head] || 'ours';
+  const conflictsHtml = conflicts.length
+    ? `<ol class="g-conflicts" ${b.expanded === false ? 'hidden' : ''}>${conflicts
+        .map((c, i) => {
+          const n = numFor(c);
+          const loc = c.file ? `${c.file}${c.line || c.lines ? `:${c.line || c.lines}` : ''}` : '';
+          return `<li style="--k:${i}" ${n ? `data-n="${n}"` : ''}>
+            <div class="g-c-head"><span class="g-num ${n ? '' : 'plain'}">${n || i + 1}</span>${loc ? `<button class="link g-file" data-file="${esc(loc)}">${esc(loc)}</button>` : ''}${c.detail ? `<span class="g-c-detail">${inlineMd(c.detail)}</span>` : ''}</div>
+            ${c.ours || c.theirs ? `<div class="g-sides">${side(c.oursLabel || headName, c.ours, 'ours')}${side(c.theirsLabel || g.into || g.lanes[0] || 'theirs', c.theirs, 'theirs')}</div>` : ''}
+            ${c.resolution ? `<div class="g-res">${icon('check')}<span>${inlineMd(c.resolution)}</span></div>` : ''}
+          </li>`;
+        })
+        .join('')}</ol>`
+    : '';
+
+  const footText = b.summary
+    ? inlineMd(b.summary)
+    : merge === 'conflict'
+      ? `${conflicts.length ? `<button class="g-count">${nConflicts} conflict${nConflicts === 1 ? '' : 's'}</button>` : `<b>${nConflicts} conflict${nConflicts === 1 ? '' : 's'}</b>`} with ${esc(g.into || g.lanes[0] || 'base')}`
+      : merge === 'ready'
+        ? 'Ready to merge'
+        : merged
+          ? `Merged into ${esc(g.into || g.lanes[0])}`
+          : merge === 'blocked'
+            ? 'Blocked'
+            : merge === 'pending'
+              ? 'Checks running'
+              : '';
+  const action = b.action && (typeof b.action === 'string' ? { label: b.action } : b.action);
+  const live = ctx.isLatest !== false;
+  const foot = footText || action ? `<div class="g-foot st-${merge}">${merge ? icon(GRAPH_STATE[merge].icon) : ''}<span class="g-foot-text">${footText}</span>${action ? `<button class="g-action" ${live ? '' : 'disabled'}>${esc(action.label || 'Continue')}</button>` : ''}</div>` : '';
+  const pr = PR_STATE[b.state] ? b.state : merged ? 'merged' : '';
+
+  const node = el(`
+    <div class="b-graph card">
+      ${b.title || b.ref || pr ? `<div class="g-head"><h3>${inlineMd(b.title || '')}${b.ref ? ` <span class="g-ref">${esc(b.ref)}</span>` : ''}</h3>${pr ? `<span class="g-pr st-${pr}"><i></i>${PR_STATE[pr]}</span>` : ''}</div>` : ''}
+      <div class="g-body" style="--g-w:${width}px">
+        <svg class="g-svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" aria-hidden="true">${wires.join('')}${dots.join('')}${target}</svg>
+        <ol class="g-rows">${targetRow}${g.rows.map(rowHtml).join('')}</ol>
+      </div>
+      ${checksHtml}${conflictsHtml}${foot}
+    </div>`);
+
+  const list = node.querySelector('.g-conflicts');
+  node.querySelector('.g-count')?.addEventListener('click', () => {
+    list.hidden = !list.hidden;
+  });
+  // Hovering a numbered conflict lights up the commit it came from, and the other way round.
+  const light = (n, on) => node.querySelectorAll(`[data-n="${n}"]`).forEach((e) => e.classList.toggle('lit', on));
+  node.querySelectorAll('[data-n]').forEach((e) => {
+    e.addEventListener('mouseenter', () => light(e.dataset.n, true));
+    e.addEventListener('mouseleave', () => light(e.dataset.n, false));
+  });
+  node.querySelectorAll('.g-file').forEach((btn) =>
+    btn.addEventListener('click', () => {
+      const [p, line] = btn.dataset.file.split(':');
+      ctx.openFile?.(p, line);
+    }),
+  );
+  node.querySelector('.g-action')?.addEventListener('click', () => {
+    if (!live) return;
+    const text = action.reply || action.label;
+    if (action.draft) ctx.draft?.(text);
+    else ctx.reply?.(text);
+  });
+  return node;
+};
+
 R.checklist = (b) =>
   el(`
     <div class="b-check card">
@@ -489,6 +788,81 @@ R.question = (b, ctx) => {
   return node;
 };
 
+R.actions = (b, ctx) => {
+  const items = (b.items || []).map((it, i) => (typeof it === 'string' ? { label: it, command: it, _i: i } : { ...it, _i: i }));
+  const node = el(`
+    <div class="b-actions card">
+      ${b.title ? `<h3 class="b-title">${icon('terminal')}${esc(b.title)}</h3>` : ''}
+      <ul class="act-list">${items
+        .map((it, i) => {
+          const isCmd = !!it.command;
+          const key = `act:${i}:${it.command || it.reply || it.label}`;
+          const prev = isCmd && ctx.turn?.actionRuns?.[key];
+          return `<li class="act-row ${it.tone ? `tone-${esc(it.tone)}` : ''}" style="--k:${i}" data-i="${i}" data-key="${esc(key)}">
+            <div class="act-bar">
+              <div class="act-info">
+                <b>${esc(it.label || it.command || it.reply || 'Action')}</b>
+                ${isCmd ? `<code class="act-cmd">$ ${esc(it.command)}</code>` : ''}
+                ${it.detail || it.note ? `<span class="act-detail">${inlineMd(it.detail || it.note)}</span>` : ''}
+              </div>
+              <div class="act-side">
+                <span class="act-badge">${prev ? `<span class="exit ${prev.exitCode === 0 ? 'ok' : 'bad'}">exit ${esc(prev.exitCode)}</span>` : ''}</span>
+                <button class="ghost xs act-go">${icon(isCmd ? (prev ? 'rerun' : 'play') : 'send')}<span>${isCmd ? (prev ? 'Run again' : 'Run') : 'Send'}</span></button>
+              </div>
+            </div>
+            <div class="act-slot" ${prev ? '' : 'hidden'}></div>
+          </li>`;
+        })
+        .join('')}</ul>
+    </div>`);
+
+  const paintResult = (li, it, res) => {
+    if (!res) return;
+    const badge = li.querySelector('.act-badge');
+    const ok = res.exitCode === 0;
+    badge.innerHTML = `<span class="exit ${ok ? 'ok' : 'bad'}">exit ${esc(res.exitCode)}</span>${res.durationMs ? `<span class="muted xs">${fmtDuration(res.durationMs)}</span>` : ''}`;
+    const slot = li.querySelector('.act-slot');
+    slot.hidden = false;
+    slot.innerHTML = `
+      <div class="act-res ${ok ? 'ok' : 'bad'}">
+        <pre class="act-out">${esc(res.output || '(no output)')}</pre>
+        ${!ok && ctx.reply ? `<button class="link xs act-fix">${icon('send')}Send failure to agent</button>` : ''}
+      </div>`;
+    slot.querySelector('.act-fix')?.addEventListener('click', () => {
+      ctx.reply(`Command \`${it.command}\` failed (exit ${res.exitCode}):\n\`\`\`\n${(res.output || '').slice(0, 1600)}\n\`\`\``);
+    });
+  };
+
+  items.forEach((it, i) => {
+    const key = `act:${i}:${it.command || it.reply || it.label}`;
+    const prev = it.command && ctx.turn?.actionRuns?.[key];
+    if (prev) paintResult(node.querySelector(`li[data-i="${i}"]`), it, prev);
+  });
+
+  node.addEventListener('click', async (e) => {
+    const btn = e.target.closest('.act-go');
+    if (!btn) return;
+    const li = btn.closest('li.act-row');
+    const it = items[Number(li.dataset.i)];
+    if (!it) return;
+    if (!it.command) {
+      return ctx.reply?.(it.reply || it.label);
+    }
+    if (it.confirm && !confirm(`Run this command in ${ctx.session?.cwd || 'the project'}?\n\n$ ${it.command}`)) return;
+    if (!ctx.exec) return;
+    btn.disabled = true;
+    btn.querySelector('span').textContent = 'Running…';
+    try {
+      const res = await ctx.exec(it.command, li.dataset.key);
+      if (res) paintResult(li, it, res);
+    } finally {
+      btn.disabled = false;
+      btn.querySelector('span').textContent = 'Run again';
+    }
+  });
+  return node;
+};
+
 R.next = (b, ctx) => {
   const node = el(`
     <div class="b-next">