@cordfuse/crosstalk 7.0.0-alpha.9 → 7.0.0-beta.1

package/src/web/workflows.ts

@@ -0,0 +1,490 @@
+// workflows.ts — workflow inspector pages.
+//
+// /w           — list of workflows (open + completed) inferred from messages
+// /w/<child>   — workflow detail: marker body, PLAN.json, fanout dispatches
+//                + reply status, synthesis status
+//
+// Workflow state isn't stored as a discrete record — it's reconstructed
+// each request by walking channels for `type: workflow` markers and
+// inspecting the child channel's PLAN.json + dispatched messages.
+
+import { page, escapeHtml, relativeTime, TOAST_HELPER } from './layout.js';
+
+export interface WorkflowSummary {
+  /** The child-channel UUID — the natural identifier for a workflow. */
+  childChannelUuid: string;
+  /** Parent channel where the marker lives. */
+  parentChannelUuid: string;
+  parentChannelName: string | null;
+  markerFrom: string;
+  markerTimestamp: string;
+  /** 'pending_compile' before PLAN.json exists; 'fanout' once plan is parsed;
+   *  'synthesize' once all fanout replies are in; 'complete' once COMPLETE exists. */
+  phase: 'pending_compile' | 'fanout' | 'synthesize' | 'complete' | 'failed';
+  fanoutTotal: number;
+  fanoutReplied: number;
+  dispatchHost: string | null;
+}
+
+export interface WorkflowsListData {
+  host: string;
+  alias: string;
+  workflows: WorkflowSummary[];
+  /** Claimed model names (qualified `<provider>/<model>`) — compiler agent picker. */
+  claimedModels: string[];
+  /** Available parent channels for the workflow to live in. */
+  channels: { uuid: string; name: string | null }[];
+}
+
+function phaseBadge(p: WorkflowSummary['phase']): string {
+  const styles = {
+    pending_compile: { color: '#d29922', bg: '#574122', label: 'COMPILING' },
+    fanout: { color: '#7cc4ff', bg: '#2d4a66', label: 'FANOUT' },
+    synthesize: { color: '#a371f7', bg: '#3c2a59', label: 'SYNTHESIZE' },
+    complete: { color: '#7ee787', bg: '#1f4528', label: 'COMPLETE' },
+    failed: { color: '#f85149', bg: '#4a2329', label: 'FAILED' },
+  };
+  const s = styles[p];
+  return `<span style="display:inline-block;color:${s.color};background:${s.bg}33;border:1px solid ${s.bg};border-radius:10px;padding:2px 9px;font-size:10px;font-weight:600;letter-spacing:.05em">${s.label}</span>`;
+}
+
+export function workflowsListPage(d: WorkflowsListData): string {
+  const open = d.workflows.filter((w) => w.phase !== 'complete' && w.phase !== 'failed');
+  const closed = d.workflows.filter((w) => w.phase === 'complete' || w.phase === 'failed');
+
+  function renderRow(w: WorkflowSummary): string {
+    const parentLabel = w.parentChannelName ?? w.parentChannelUuid.slice(0, 8) + '…';
+    const fanout = w.phase === 'pending_compile'
+      ? '—'
+      : `${w.fanoutReplied}/${w.fanoutTotal}`;
+    return `<a href="/w/${encodeURIComponent(w.childChannelUuid)}" style="display:block;padding:12px 4px;border-bottom:1px solid #1f2329">
+      <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap">
+        <span><span class="chip brand" style="font-size:11px">${escapeHtml(w.childChannelUuid.slice(0,8))}…</span> in <span style="color:#a371f7">${escapeHtml(parentLabel)}</span></span>
+        ${phaseBadge(w.phase)}
+      </div>
+      <div style="margin-top:6px;font-size:11px;color:#7a7f87">
+        from <span style="color:#7cc4ff">${escapeHtml(w.markerFrom)}</span> · ${escapeHtml(relativeTime(w.markerTimestamp))}
+        · fanout ${fanout}${w.dispatchHost ? ` · host <span style="color:#a371f7">${escapeHtml(w.dispatchHost)}</span>` : ''}
+      </div>
+    </a>`;
+  }
+
+  const canCompose = d.claimedModels.length > 0 && d.channels.length > 0;
+  const channelOptions = d.channels.length === 0
+    ? '<option value="" disabled>(no channels — create one first)</option>'
+    : d.channels.map((c) => {
+        const label = c.name ?? c.uuid.slice(0, 8) + '…';
+        return `<option value="${escapeHtml(c.name ?? c.uuid)}">${escapeHtml(label)}</option>`;
+      }).join('');
+  const compilerOptions = d.claimedModels.length === 0
+    ? '<option value="" disabled>(no claimed models — claim one first)</option>'
+    : d.claimedModels.map((m) => `<option value="${escapeHtml(m)}">${escapeHtml(m)}</option>`).join('');
+
+  const warnings: string[] = [];
+  if (d.claimedModels.length === 0) {
+    warnings.push('No models are claimed by this engine — the compiler can\'t run. Add real models (e.g. <code>claude</code>, <code>codex</code>) under <code>providers:</code> in <code>data/crosstalk.yaml</code>, then restart. Current installed CLIs are listed in <a href="/agents">/agents</a>.');
+  }
+  if (d.channels.length === 0) {
+    warnings.push('No channels exist yet — create one in <a href="/c">Channels</a> first.');
+  }
+  const warningBlock = warnings.length === 0 ? '' : warnings.map((w) =>
+    `<p style="background:#3c2a10;color:#d29922;border:1px solid #574122;border-radius:6px;padding:8px 10px;margin:0 0 12px;font-size:11px">⚠ ${w}</p>`,
+  ).join('');
+
+  const composeCard = `
+<section class="card" id="compose-card">
+  <h3>Compose new workflow</h3>
+  <p class="sub">Describe what you want in plain English; the compiler agent turns it into a fanout/synthesize plan you can review and edit before submitting. The dispatcher then runs the plan deterministically.</p>
+  ${warningBlock}
+
+  <div id="compose-step-prompt">
+    <div class="field">
+      <label for="cw-prompt">prompt</label>
+      <textarea id="cw-prompt" rows="4" placeholder="e.g. compare how claude, codex, and gemini would refactor src/auth/users.ts to use bun's built-in crypto instead of node:crypto"></textarea>
+    </div>
+    <div class="field">
+      <label for="cw-compiler">compiler agent</label>
+      <select id="cw-compiler"${d.claimedModels.length === 0 ? ' disabled' : ''}>${compilerOptions}</select>
+    </div>
+    <div class="field">
+      <label for="cw-channel">target channel</label>
+      <select id="cw-channel"${d.channels.length === 0 ? ' disabled' : ''}>${channelOptions}</select>
+    </div>
+    <div class="actions">
+      <button type="button" class="primary" id="cw-compile"${!canCompose ? ' disabled title="resolve the warnings above first"' : ''}>Compile preview</button>
+    </div>
+  </div>
+
+  <div id="compose-step-preview" style="display:none">
+    <p class="sub">Review the compiled plan. Edit the YAML if anything looks off — common fixes: the <code>to:</code> model identity, the <code>count:</code> integer, or the <code>body:</code> instructions. On submit, the engine writes <code>PLAN.json</code> verbatim and dispatches without re-compiling.</p>
+    <div id="cw-summary" style="background:#0b0c10;border:1px solid #1f2329;border-radius:6px;padding:10px;margin-bottom:10px;font-size:12px"></div>
+    <div class="field">
+      <label for="cw-prompt-readback">your prompt (committed as the workflow marker body)</label>
+      <textarea id="cw-prompt-readback" rows="3" readonly style="font:12px ui-monospace,monospace;background:#0b0c10;color:#c9d1d9;opacity:.85;cursor:default"></textarea>
+    </div>
+    <div class="field">
+      <label for="cw-yaml">plan (yaml)</label>
+      <textarea id="cw-yaml" rows="12" spellcheck="false" style="font:12px ui-monospace,monospace"></textarea>
+    </div>
+    <div class="actions" style="justify-content:space-between">
+      <button type="button" id="cw-cancel">← Cancel</button>
+      <button type="button" class="primary" id="cw-submit">Submit workflow →</button>
+    </div>
+  </div>
+
+  <div id="compose-status" style="margin-top:10px;font-size:12px;color:#7a7f87;min-height:18px"></div>
+</section>`;
+
+  const body = `${composeCard}
+<section class="card">
+  <h3>Open workflows (${open.length})</h3>
+  <p class="sub">Compile → fanout → synthesize is in flight. The runtime advances these deterministically per dispatcher tick (no LLM orchestrator).</p>
+  ${open.length === 0
+    ? '<p class="empty">No open workflows yet.</p>'
+    : open.map(renderRow).join('')}
+</section>
+
+<section class="card">
+  <h3>Recent (${closed.length})</h3>
+  <p class="sub">Completed (synthesis replied successfully) or failed (compile error, dispatcher crash, etc.).</p>
+  ${closed.length === 0
+    ? '<p class="empty">No completed workflows yet.</p>'
+    : closed.slice(0, 20).map(renderRow).join('')}
+</section>
+`;
+  return page({
+    title: `crosstalk on ${d.host} · Workflows`,
+    host: d.host,
+    alias: d.alias,
+    activeNav: 'workflows',
+    pageTitle: 'Workflows',
+    body,
+    inlineScript: `
+const promptStep = document.getElementById('compose-step-prompt');
+const previewStep = document.getElementById('compose-step-preview');
+const statusEl = document.getElementById('compose-status');
+const yamlInput = document.getElementById('cw-yaml');
+const summaryEl = document.getElementById('cw-summary');
+let lastPrompt = '';
+let lastChannel = '';
+
+function setStatus(msg, isErr){
+  statusEl.textContent = msg || '';
+  statusEl.style.color = isErr ? '#f85149' : '#7a7f87';
+}
+function escapeHtml(s){ return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
+function renderSummary(plan){
+  summaryEl.innerHTML =
+    '<div><span style="color:#9aa0a6">fanout:</span> <span style="color:#7cc4ff">' + escapeHtml(plan.fanout.to) + '</span> &times; <strong>' + plan.fanout.count + '</strong></div>' +
+    '<div style="margin-top:4px"><span style="color:#9aa0a6">synthesize:</span> <span style="color:#a371f7">' + escapeHtml(plan.synthesize.to) + '</span></div>';
+}
+
+const compileBtn = document.getElementById('cw-compile');
+let compileInFlight = false;
+compileBtn.addEventListener('click', async () => {
+  // Guard against double-fire — claude's compile output is
+  // non-deterministic across retries, so a second click during an
+  // in-flight request would let the slower (failing) response
+  // overwrite the faster (succeeding) one. Caught 2026-06-22.
+  if (compileInFlight) return;
+  const prompt = document.getElementById('cw-prompt').value.trim();
+  const compiler = document.getElementById('cw-compiler').value;
+  const channel = document.getElementById('cw-channel').value;
+  if (!prompt){ setStatus('prompt required', true); return; }
+  lastPrompt = prompt;
+  lastChannel = channel;
+  compileInFlight = true;
+  compileBtn.disabled = true;
+  const originalLabel = compileBtn.textContent;
+  compileBtn.textContent = 'Compiling…';
+  setStatus('compiling — this may take a moment…');
+  try {
+    const r = await fetch('/api/workflows/compose', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ prompt, compilerAgent: compiler }),
+    });
+    const body = await r.json().catch(() => ({}));
+    if (!r.ok){
+      setStatus(body.error || 'compile failed', true);
+      if (body.rawOutput) console.log('compiler raw output:', body.rawOutput);
+      return;
+    }
+    yamlInput.value = body.yaml;
+    document.getElementById('cw-prompt-readback').value = lastPrompt;
+    renderSummary(body.plan);
+    promptStep.style.display = 'none';
+    previewStep.style.display = 'block';
+    setStatus('compiled by ' + body.compiler + ' — review and edit before submitting');
+  } catch (e){ setStatus('error: ' + e.message, true); }
+  finally {
+    compileInFlight = false;
+    compileBtn.disabled = false;
+    compileBtn.textContent = originalLabel;
+  }
+});
+
+document.getElementById('cw-cancel').addEventListener('click', () => {
+  previewStep.style.display = 'none';
+  promptStep.style.display = 'block';
+  setStatus('');
+});
+
+const submitBtn = document.getElementById('cw-submit');
+const cancelBtn = document.getElementById('cw-cancel');
+let submitInFlight = false;
+submitBtn.addEventListener('click', async () => {
+  // Guard against double-fire — workflow submit triggers a git commit
+  // + remote push retry chain (~10s on a misconfigured remote). Two
+  // clicks would create duplicate workflow markers + duplicate child
+  // channels.
+  if (submitInFlight) return;
+  const yaml = yamlInput.value;
+  if (!yaml.trim()){ setStatus('yaml is empty', true); return; }
+  submitInFlight = true;
+  submitBtn.disabled = true;
+  cancelBtn.disabled = true;
+  yamlInput.readOnly = true;
+  const originalLabel = submitBtn.textContent;
+  submitBtn.textContent = 'Submitting…';
+  setStatus('submitting — committing workflow marker + PLAN.json…');
+  try {
+    const r = await fetch('/api/workflows/submit', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ yaml, channel: lastChannel, prompt: lastPrompt }),
+    });
+    const body = await r.json().catch(() => ({}));
+    if (!r.ok){
+      setStatus(body.error || 'submit failed', true);
+      submitInFlight = false;
+      submitBtn.disabled = false;
+      cancelBtn.disabled = false;
+      yamlInput.readOnly = false;
+      submitBtn.textContent = originalLabel;
+      return;
+    }
+    // Success — navigate to the new workflow detail page. We do NOT
+    // re-enable the button here; the page is about to unload.
+    location.href = '/w/' + encodeURIComponent(body.childUuid);
+  } catch (e){
+    setStatus('error: ' + e.message, true);
+    submitInFlight = false;
+    submitBtn.disabled = false;
+    cancelBtn.disabled = false;
+    yamlInput.readOnly = false;
+    submitBtn.textContent = originalLabel;
+  }
+});
+`,
+  });
+}
+
+export interface WorkflowDetailData {
+  host: string;
+  alias: string;
+  childUuid: string;
+  parentChannelUuid: string;
+  parentChannelName: string | null;
+  markerFrom: string;
+  markerTimestamp: string;
+  markerBody: string;
+  plan: unknown | null;            // PLAN.json contents (any shape; renders pretty)
+  phase: WorkflowSummary['phase'];
+  fanoutDispatches: { relPath: string; to: string; body: string }[];
+  fanoutReplies: { relPath: string; from: string; re: string | string[]; body: string; failed: boolean }[];
+  synthesisDispatch: { relPath: string; to: string; body: string } | null;
+  synthesisReply: { relPath: string; from: string; body: string; failed: boolean } | null;
+  dispatchHost: string | null;
+}
+
+export function workflowDetailPage(d: WorkflowDetailData): string {
+  const parentLabel = d.parentChannelName ?? d.parentChannelUuid.slice(0, 8) + '…';
+  const planJson = d.plan ? JSON.stringify(d.plan, null, 2) : null;
+
+  const fanoutRows = d.fanoutDispatches.map((dispatch) => {
+    const reply = d.fanoutReplies.find((r) => {
+      const re = Array.isArray(r.re) ? r.re : [r.re];
+      return re.includes(dispatch.relPath);
+    });
+    const status = reply
+      ? (reply.failed ? '<span style="color:#f85149">FAILED</span>' : '<span style="color:#7ee787">REPLIED</span>')
+      : '<span style="color:#d29922">PENDING</span>';
+    const replyFrom = reply ? `· from <span style="color:#7cc4ff">${escapeHtml(reply.from)}</span>` : '';
+    return `<div class="msg" style="margin-bottom:8px">
+      <div class="msg-head">
+        <span class="msg-route"><span class="msg-from">workflow</span><span class="msg-arrow">→</span><span class="msg-to">${escapeHtml(dispatch.to)}</span></span>
+        <span class="msg-id">${escapeHtml(dispatch.relPath.split('/').pop() || '')}</span>
+      </div>
+      <div style="margin-bottom:6px;font-size:11px">${status} ${replyFrom}</div>
+      <div class="msg-body">${escapeHtml(dispatch.body)}</div>
+      ${reply ? `<div style="margin-top:8px;padding-top:8px;border-top:1px solid #1f2329"><div style="font-size:10px;color:#7a7f87;margin-bottom:4px;text-transform:uppercase">REPLY</div><div class="msg-body">${escapeHtml(reply.body)}</div></div>` : ''}
+    </div>`;
+  }).join('');
+
+  const isDone = d.phase === 'complete' || d.phase === 'failed';
+  const completionBanner = d.phase === 'complete'
+    ? `<section style="background:#0f2a17;color:#7ee787;border:1px solid #1f4528;border-radius:8px;padding:14px 16px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
+        <div>
+          <strong style="font-size:14px">✓ Workflow complete</strong>
+          <div style="font-size:11px;color:#9aa0a6;margin-top:2px">Synthesis reply is ready below.</div>
+        </div>
+        <button type="button" id="scroll-to-synthesis" class="primary" style="color:#7ee787;border-color:#1f4528">Jump to synthesis ↓</button>
+      </section>`
+    : d.phase === 'failed'
+    ? `<section style="background:#2a1717;color:#f85149;border:1px solid #4a2329;border-radius:8px;padding:14px 16px;margin-bottom:14px">
+        <strong style="font-size:14px">✗ Workflow failed</strong>
+        <div style="font-size:11px;color:#9aa0a6;margin-top:2px">Check the fanout or synthesis sections below for the failed reply.</div>
+      </section>`
+    : '';
+
+  const refreshIndicator = isDone
+    ? '<span style="color:#7a7f87">live · stopped</span>'
+    : '<span style="color:#7a7f87">refresh in <span id="refresh-countdown">8</span>s · <button type="button" id="refresh-now" style="background:transparent;border:none;color:#7cc4ff;cursor:pointer;font:11px ui-monospace,monospace;padding:0;text-decoration:underline">refresh now</button></span>';
+
+  const body = `
+${completionBanner}
+<section class="card">
+  <h3 style="display:flex;align-items:center;justify-content:space-between">
+    <span>Workflow ${escapeHtml(d.childUuid.slice(0,8))}…</span>
+    ${phaseBadge(d.phase)}
+  </h3>
+  <div class="kv"><span class="key">parent channel</span><span class="val brand"><a href="/c/${encodeURIComponent(d.parentChannelName ?? d.parentChannelUuid)}">${escapeHtml(parentLabel)}</a></span></div>
+  <div class="kv"><span class="key">child channel</span><span class="val dim">${escapeHtml(d.childUuid)}</span></div>
+  <div class="kv"><span class="key">from</span><span class="val">${escapeHtml(d.markerFrom)}</span></div>
+  <div class="kv"><span class="key">dispatched</span><span class="val">${escapeHtml(relativeTime(d.markerTimestamp))}</span></div>
+  ${d.dispatchHost ? `<div class="kv"><span class="key">dispatch host</span><span class="val">${escapeHtml(d.dispatchHost)}</span></div>` : ''}
+  <div class="kv"><span class="key">progress</span><span class="val">${refreshIndicator}${isDone ? '' : ' · <button type="button" id="enable-notifs" style="background:transparent;border:none;color:#7cc4ff;cursor:pointer;font:11px ui-monospace,monospace;padding:0;text-decoration:underline">notify when done</button>'}</span></div>
+</section>
+
+<section class="card">
+  <h3>Marker body</h3>
+  <p class="sub">The prose description the operator submitted. The compile phase reads this + a system prompt to produce the JSON plan.</p>
+  <div class="msg-body">${escapeHtml(d.markerBody)}</div>
+</section>
+
+<section class="card">
+  <h3>Plan${planJson ? '' : ' (not yet compiled)'}</h3>
+  ${planJson
+    ? `<div class="msg-body" style="max-height:none">${escapeHtml(planJson)}</div>`
+    : '<p class="empty">Compile phase has not completed. Once an LLM produces a valid JSON plan, it lands at <code>data/channels/' + escapeHtml(d.childUuid.slice(0,8)) + '…/PLAN.json</code>.</p>'}
+</section>
+
+<section class="card">
+  <h3>Fanout (${d.fanoutDispatches.length} dispatches · ${d.fanoutReplies.length} replies)</h3>
+  ${d.fanoutDispatches.length === 0
+    ? '<p class="empty">No fanout sub-primitives yet. Will fire once the plan is parsed.</p>'
+    : fanoutRows}
+</section>
+
+<section class="card">
+  <h3>Synthesis</h3>
+  ${!d.synthesisDispatch
+    ? '<p class="empty">Synthesis dispatch will fire once all fanout replies are in.</p>'
+    : `<div class="msg">
+        <div class="msg-head">
+          <span class="msg-route"><span class="msg-from">workflow</span><span class="msg-arrow">→</span><span class="msg-to">${escapeHtml(d.synthesisDispatch.to)}</span></span>
+        </div>
+        <div class="msg-body">${escapeHtml(d.synthesisDispatch.body)}</div>
+        ${d.synthesisReply
+          ? `<div style="margin-top:8px;padding-top:8px;border-top:1px solid #1f2329"><div style="font-size:10px;color:${d.synthesisReply.failed ? '#f85149' : '#7ee787'};margin-bottom:4px;text-transform:uppercase">${d.synthesisReply.failed ? 'FAILED REPLY' : 'SYNTHESIS REPLY'} · ${escapeHtml(d.synthesisReply.from)}</div><div class="msg-body">${escapeHtml(d.synthesisReply.body)}</div></div>`
+          : '<div style="margin-top:8px;color:#d29922;font-size:11px">awaiting synthesis reply</div>'}
+      </div>`}
+</section>
+`;
+  return page({
+    title: `crosstalk · workflow ${d.childUuid.slice(0,8)}`,
+    host: d.host,
+    alias: d.alias,
+    activeNav: 'workflows',
+    pageTitle: `Workflow ${d.childUuid.slice(0,8)}…`,
+    body,
+    inlineScript: `${TOAST_HELPER}
+const PHASE = ${JSON.stringify(d.phase)};
+const CHILD_UUID = ${JSON.stringify(d.childUuid)};
+const SYNTHESIS_BODY = ${JSON.stringify(d.synthesisReply?.body ?? '')};
+
+// 1. Tab title carries the phase so it's visible in the tab list /
+//    desktop notification area even when you're not on this tab.
+const phaseLabel = {
+  pending_compile: 'COMPILING',
+  fanout: 'FANOUT',
+  synthesize: 'SYNTHESIZE',
+  complete: '✓ COMPLETE',
+  failed: '✗ FAILED',
+}[PHASE] || PHASE;
+document.title = '[' + phaseLabel + '] workflow ' + CHILD_UUID.slice(0, 8);
+
+// 2. Browser notification when phase lands on complete/failed.
+//    Stored across reloads via sessionStorage so we notify exactly
+//    once per page-visit-that-saw-the-transition.
+function maybeNotifyComplete(){
+  if (PHASE !== 'complete' && PHASE !== 'failed') return;
+  const key = 'crosstalk_notified_' + CHILD_UUID;
+  if (sessionStorage.getItem(key)) return;
+  if (!('Notification' in window)) return;
+  if (Notification.permission !== 'granted') return;
+  sessionStorage.setItem(key, '1');
+  const title = PHASE === 'complete' ? 'Workflow complete' : 'Workflow failed';
+  const body = PHASE === 'complete' && SYNTHESIS_BODY
+    ? SYNTHESIS_BODY.slice(0, 140) + (SYNTHESIS_BODY.length > 140 ? '…' : '')
+    : 'Workflow ' + CHILD_UUID.slice(0, 8) + ' · tap to open';
+  try {
+    const n = new Notification(title, { body, tag: 'crosstalk-' + CHILD_UUID });
+    n.onclick = () => { window.focus(); n.close(); };
+  } catch (e) { /* notification spawn failed; harmless */ }
+}
+maybeNotifyComplete();
+
+// 3. "Enable notifications" button. One-time permission grant.
+const enableBtn = document.getElementById('enable-notifs');
+if (enableBtn){
+  if (!('Notification' in window)){ enableBtn.style.display = 'none'; }
+  else if (Notification.permission === 'granted'){ enableBtn.textContent = 'notifications on ✓'; enableBtn.disabled = true; }
+  else if (Notification.permission === 'denied'){ enableBtn.textContent = 'notifications blocked'; enableBtn.disabled = true; }
+  else {
+    enableBtn.addEventListener('click', async () => {
+      try {
+        const p = await Notification.requestPermission();
+        if (p === 'granted'){ enableBtn.textContent = 'notifications on ✓'; enableBtn.disabled = true; }
+        else { enableBtn.textContent = 'notifications denied'; enableBtn.disabled = true; }
+      } catch(_) {}
+    });
+  }
+}
+
+// 4. Auto-refresh countdown (1s tick) — replaces the silent setTimeout
+//    so the operator knows the page is live + how long until next poll.
+//    Includes "refresh now" button for impatient operators.
+if (PHASE !== 'complete' && PHASE !== 'failed') {
+  let secondsLeft = 8;
+  const cd = document.getElementById('refresh-countdown');
+  const tick = setInterval(() => {
+    secondsLeft -= 1;
+    if (cd) cd.textContent = String(Math.max(0, secondsLeft));
+    if (secondsLeft <= 0){
+      clearInterval(tick);
+      location.reload();
+    }
+  }, 1000);
+  const refreshBtn = document.getElementById('refresh-now');
+  if (refreshBtn) refreshBtn.addEventListener('click', () => { clearInterval(tick); location.reload(); });
+}
+
+// 5. Completion banner button: jump to synthesis card.
+const scrollBtn = document.getElementById('scroll-to-synthesis');
+if (scrollBtn){
+  scrollBtn.addEventListener('click', () => {
+    const cards = document.querySelectorAll('.card h3');
+    for (const h of cards){
+      if (h.textContent && h.textContent.trim().toLowerCase() === 'synthesis'){
+        h.closest('.card').scrollIntoView({ behavior: 'smooth', block: 'start' });
+        return;
+      }
+    }
+  });
+  // Auto-scroll on first paint so the synthesis reply is immediately
+  // visible without the operator hunting for it.
+  requestAnimationFrame(() => scrollBtn.click());
+}
+`,
+  });
+}