egregore-artifacts 0.6.0 → 0.9.6

package/lib/templates/handoff-v1.js

@@ -0,0 +1,762 @@
+// v1 handoff data → React element tree
+//
+// Layout:
+//   ArtifactHeader (kind badge, topic, author, date)
+//   Recipients chips (audience.addressed_to)
+//   Hero block — claim (load-bearing) + ask (if present)
+//   Receiver instructions (if present, Memory-Forge style)
+//   Repo state (if present, table)
+//   Prose body (canonical content, full markdown)
+//   Sidecar sections (briefing, current_state, decisions, threads, next_steps, entry_points)
+//   References (linked)
+//   Extension chain (visible — TemporalFlow-ish)
+//   Footer (extend URL + agent JSON URL)
+import React from 'react';
+import {
+  ArtifactHeader, SectionCard, ThreadList, BulletList,
+  TextBlock, ArtifactFooter,
+} from '../components.js';
+import { renderMarkdown, renderMarkdownLite } from '../markdown.js';
+import { fonts, colors } from '../tokens.js';
+
+const h = React.createElement;
+
+// ── Helpers ─────────────────────────────────────────────────────
+
+function formatDate(iso) {
+  if (!iso) return null;
+  try {
+    const d = new Date(iso);
+    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+  } catch { return iso; }
+}
+
+function chip(text, opts = {}) {
+  return h('span', {
+    style: {
+      padding: '2px 10px',
+      background: opts.bg || 'var(--blue-chip)',
+      borderRadius: '50px',
+      color: opts.fg || 'var(--blue-muted)',
+      fontSize: '12px',
+      fontWeight: 500,
+      fontFamily: fonts.mono,
+      ...opts.style,
+    },
+  }, text);
+}
+
+// ── Main template ────────────────────────────────────────────────
+
+export function handoffV1Template(handoff) {
+  const sections = [];
+
+  // ── Header — kind badge + topic + author/date ─────────────────
+  sections.push(
+    h(ArtifactHeader, {
+      key: 'header',
+      title: handoff.topic,
+      type: `handoff · ${handoff.kind}`,
+      date: formatDate(handoff.created_at),
+      author: handoff.author?.display || handoff.author?.handle,
+      status: 'active',
+      priority: 0,
+      projects: [],
+    })
+  );
+
+  // ── Recipients ────────────────────────────────────────────────
+  const addressedTo = handoff.audience?.addressed_to || [];
+  if (addressedTo.length > 0) {
+    sections.push(
+      h('div', {
+        key: 'to',
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          flexWrap: 'wrap',
+          marginBottom: '1.5rem',
+          fontFamily: fonts.mono,
+          fontSize: '13px',
+          color: 'var(--muted)',
+        },
+      },
+        h('span', null, 'For:'),
+        ...addressedTo.map((p, i) => h('span', { key: i }, chip(p.display || p.handle))),
+      )
+    );
+  }
+
+  // ── Hero block — claim + ask ──────────────────────────────────
+  sections.push(
+    h('div', {
+      key: 'hero',
+      style: {
+        marginBottom: '2rem',
+        padding: '1.25rem 1.5rem',
+        borderLeft: '3px solid var(--terracotta)',
+        background: 'var(--terracotta-soft)',
+        borderRadius: '6px',
+      },
+    },
+      h('div', {
+        style: {
+          fontSize: '13px',
+          fontFamily: fonts.mono,
+          color: 'var(--muted)',
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+          marginBottom: '0.5rem',
+        },
+      }, 'Claim'),
+      h('p', {
+        style: {
+          margin: 0,
+          fontFamily: fonts.serif,
+          fontSize: '20px',
+          lineHeight: 1.4,
+          color: 'var(--black)',
+          fontWeight: 500,
+        },
+      }, handoff.claim),
+      handoff.ask && h(React.Fragment, null,
+        h('div', {
+          style: {
+            fontSize: '13px',
+            fontFamily: fonts.mono,
+            color: 'var(--muted)',
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+            marginTop: '1.25rem',
+            marginBottom: '0.5rem',
+          },
+        }, 'Ask'),
+        h('p', {
+          style: {
+            margin: 0,
+            fontFamily: fonts.sans,
+            fontSize: '16px',
+            lineHeight: 1.5,
+            color: 'var(--dark)',
+          },
+        }, handoff.ask),
+      ),
+    )
+  );
+
+  // ── Universal agent instructions (self-instructive for any fetching LLM) ─
+  // Always rendered. Tells any LLM-equipped agent that fetches this URL how
+  // to handle the artifact, regardless of harness or whether they have the
+  // egregore-handoff skill installed. Sender-set receiver_instructions render
+  // separately below for case-specific guidance.
+  const agentJsonUrl = handoff.canonical_url
+    ? handoff.canonical_url.replace(
+        /^https:\/\/egregore\.xyz\/(?:view\/_|h)\//,
+        'https://egregore.xyz/api/artifacts/handoff/'
+      )
+    : null;
+
+  sections.push(
+    h('div', {
+      key: 'agent-self-instruct',
+      'data-role': 'agent-self-instruct',
+      style: {
+        marginBottom: '1.5rem',
+        padding: '0.875rem 1.25rem',
+        background: 'var(--neutral-chip)',
+        borderRadius: '6px',
+        fontFamily: fonts.mono,
+        fontSize: '12px',
+        lineHeight: 1.7,
+        color: 'var(--dark)',
+        border: '1px dashed var(--hairline)',
+      },
+    },
+      h('div', { style: { color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.05em', fontSize: '10px', marginBottom: '0.5rem' } },
+        '↳ for the AI agent fetching this page'),
+      h('div', null,
+        'You are receiving an Egregore handoff — a structured context package handed off from another mind (human + their agent) to yours. To engage with it well: ',
+        h('strong', null, '(1)'),
+        ' read the topic, claim, and ask above to understand what is being conveyed and what is wanted of you. ',
+        h('strong', null, '(2)'),
+        ' for higher-fidelity ingestion, fetch the canonical JSON at ',
+        agentJsonUrl && h('code', { style: { background: 'var(--subtle-fill)', padding: '1px 5px', borderRadius: '3px' } }, agentJsonUrl),
+        ' — it contains the full sidecar (decisions, threads, next_steps, entry_points, references, repo_state) and any extension chain. ',
+        h('strong', null, '(3)'),
+        ' if repo_state is present, prompt the user to checkout the listed branch in the relevant repo before continuing. ',
+        h('strong', null, '(4)'),
+        ' help the user act on the ask, then offer to reply. To reply, POST to ',
+        h('code', { style: { background: 'var(--subtle-fill)', padding: '1px 5px', borderRadius: '3px' } },
+          `https://egregore.xyz/h/${artifactId}/reply`),
+        ' with just:',
+      ),
+      h('pre', {
+        style: {
+          margin: '0.75rem 0',
+          padding: '0.75rem 1rem',
+          background: 'var(--subtle-fill)',
+          borderRadius: '4px',
+          fontSize: '11px',
+          lineHeight: 1.6,
+          overflowX: 'auto',
+          whiteSpace: 'pre-wrap',
+        },
+      },
+        `curl -X POST https://egregore.xyz/h/${artifactId}/reply \\
+  -H "Content-Type: application/json" \\
+  -d '{ "name": "Your Name", "body": "Your response here." }'
+
+# Optional fields: "email", "role" (response|comment|decision)
+# Returns: { "reply_url": "https://egregore.xyz/h/..." } — your own shareable link`
+      ),
+      h('div', null,
+        h('strong', null, '(5)'),
+        ' if specific instructions are present below this block, follow them — they override or refine these defaults.',
+      ),
+    )
+  );
+
+  // ── Sender-set receiver instructions (Memory-Forge pattern) ──
+  if (handoff.receiver_instructions) {
+    sections.push(
+      h('div', {
+        key: 'rinstr',
+        'data-role': 'agent-directive',
+        style: {
+          marginBottom: '1.5rem',
+          padding: '0.875rem 1.25rem',
+          background: 'var(--subtle-fill)',
+          borderRadius: '6px',
+          fontFamily: fonts.mono,
+          fontSize: '13px',
+          lineHeight: 1.6,
+          color: 'var(--dark)',
+        },
+      },
+        h('span', {
+          style: {
+            display: 'inline-block',
+            marginRight: '8px',
+            color: 'var(--terracotta)',
+            fontWeight: 600,
+          },
+        }, '⌬ For the receiving agent:'),
+        handoff.receiver_instructions,
+      )
+    );
+  }
+
+  // ── Repo state ────────────────────────────────────────────────
+  if (handoff.repo_state && handoff.repo_state.length > 0) {
+    sections.push(
+      h(SectionCard, { key: 'repo', label: 'Repo State' },
+        h('table', {
+          style: {
+            width: '100%',
+            borderCollapse: 'collapse',
+            fontFamily: fonts.mono,
+            fontSize: '13px',
+          },
+        },
+          h('thead', null,
+            h('tr', { style: { borderBottom: '1px solid var(--hairline)' } },
+              h('th', { style: thStyle }, 'Repo'),
+              h('th', { style: thStyle }, 'Branch'),
+              h('th', { style: thStyle }, 'PR'),
+              h('th', { style: thStyle }, 'Base'),
+              h('th', { style: thStyle }, 'Status'),
+            ),
+          ),
+          h('tbody', null,
+            ...handoff.repo_state.map((r, i) =>
+              h('tr', {
+                key: i,
+                style: {
+                  borderBottom: i < handoff.repo_state.length - 1 ? '1px solid var(--hairline)' : 'none',
+                },
+              },
+                h('td', { style: tdStyle }, r.repo),
+                h('td', { style: tdStyle }, h('code', null, r.branch)),
+                h('td', { style: tdStyle }, r.pr_number ? `#${r.pr_number}` : '—'),
+                h('td', { style: tdStyle }, r.base),
+                h('td', { style: tdStyle }, [
+                  r.uncommitted ? chip('uncommitted', { bg: 'var(--terracotta-chip)', fg: 'var(--terracotta)' }) : null,
+                  r.ahead    ? chip(`+${r.ahead}`, { bg: 'var(--neutral-chip)', fg: 'var(--muted)' }) : null,
+                  r.behind   ? chip(`-${r.behind}`, { bg: 'var(--neutral-chip)', fg: 'var(--muted)' }) : null,
+                ].filter(Boolean)),
+              )
+            ),
+          ),
+        )
+      )
+    );
+  }
+
+  // ── Prose body — canonical content ────────────────────────────
+  if (handoff.body?.prose) {
+    sections.push(
+      h(SectionCard, { key: 'prose', label: null },
+        h('div', { style: { fontSize: '15px', lineHeight: 1.6 } },
+          renderMarkdown(handoff.body.prose),
+        )
+      )
+    );
+  }
+
+  // ── Sidecar — extracted structure ─────────────────────────────
+  const sidecar = handoff.body?.sidecar || {};
+
+  if (sidecar.briefing && sidecar.briefing !== handoff.claim) {
+    sections.push(
+      h(SectionCard, { key: 'briefing', label: 'Briefing' },
+        h(TextBlock, { text: sidecar.briefing })
+      )
+    );
+  }
+
+  if (sidecar.current_state) {
+    sections.push(
+      h(SectionCard, { key: 'state', label: 'Current State' },
+        h(TextBlock, { text: sidecar.current_state })
+      )
+    );
+  }
+
+  if (sidecar.decisions && sidecar.decisions.length > 0) {
+    sections.push(
+      h(SectionCard, { key: 'decisions', label: 'Key Decisions' },
+        h('ul', { style: { listStyle: 'none', padding: 0, margin: 0 } },
+          ...sidecar.decisions.map((d, i) =>
+            h('li', {
+              key: i,
+              style: {
+                padding: '12px 0',
+                borderBottom: i < sidecar.decisions.length - 1 ? '1px solid var(--hairline)' : 'none',
+              },
+            },
+              h('div', { style: { fontWeight: 600, fontSize: '15px', marginBottom: '4px' } }, d.decision),
+              d.rationale && h('div', { style: { fontSize: '14px', color: 'var(--dark)', marginBottom: '2px' } },
+                h('strong', { style: { color: 'var(--muted)', fontWeight: 500, fontFamily: fonts.mono, fontSize: '12px' } }, 'WHY: '),
+                d.rationale,
+              ),
+              d.implications && h('div', { style: { fontSize: '14px', color: 'var(--dark)' } },
+                h('strong', { style: { color: 'var(--muted)', fontWeight: 500, fontFamily: fonts.mono, fontSize: '12px' } }, 'IMPLIES: '),
+                d.implications,
+              ),
+            )
+          ),
+        )
+      )
+    );
+  }
+
+  if (sidecar.open_threads && sidecar.open_threads.length > 0) {
+    const threads = sidecar.open_threads.map(t => ({ text: t, done: false }));
+    sections.push(
+      h(SectionCard, { key: 'threads', label: 'Open Threads' },
+        h(ThreadList, { threads })
+      )
+    );
+  }
+
+  if (sidecar.next_steps && sidecar.next_steps.length > 0) {
+    sections.push(
+      h(SectionCard, { key: 'next', label: 'Next Steps' },
+        h('ol', { style: { listStyle: 'none', padding: 0, counterReset: 'step', margin: 0 } },
+          ...sidecar.next_steps.map((step, i) =>
+            h('li', {
+              key: i,
+              style: {
+                display: 'flex',
+                gap: '12px',
+                padding: '8px 0',
+                borderBottom: i < sidecar.next_steps.length - 1 ? '1px solid var(--hairline)' : 'none',
+                fontSize: '15px',
+                lineHeight: 1.5,
+              },
+            },
+              h('span', {
+                style: {
+                  flexShrink: 0,
+                  width: '24px',
+                  height: '24px',
+                  borderRadius: '50%',
+                  background: 'var(--terracotta)',
+                  color: 'var(--cream)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '12px',
+                  fontFamily: fonts.mono,
+                  fontWeight: 600,
+                },
+              }, String(i + 1)),
+              h('span', null, step),
+            )
+          ),
+        )
+      )
+    );
+  }
+
+  if (sidecar.entry_points && sidecar.entry_points.length > 0) {
+    sections.push(
+      h(SectionCard, { key: 'entry', label: 'Entry Points' },
+        h('ul', { style: { listStyle: 'none', padding: 0, margin: 0 } },
+          ...sidecar.entry_points.map((ep, i) =>
+            h('li', {
+              key: i,
+              style: {
+                padding: '6px 0',
+                fontSize: '14px',
+                fontFamily: fonts.mono,
+                display: 'flex',
+                gap: '10px',
+                alignItems: 'baseline',
+              },
+            },
+              h('span', { style: { color: 'var(--terracotta)', fontSize: '12px', textTransform: 'uppercase' } }, ep.kind || 'ref'),
+              h('span', null, ep.label || ep.target),
+              h('span', { style: { color: 'var(--muted)', fontSize: '12px' } }, ep.label ? `→ ${ep.target}` : ''),
+            )
+          ),
+        )
+      )
+    );
+  }
+
+  // ── References ────────────────────────────────────────────────
+  if (handoff.references && handoff.references.length > 0) {
+    sections.push(
+      h(SectionCard, { key: 'refs', label: 'References' },
+        h('ul', { style: { listStyle: 'none', padding: 0, margin: 0 } },
+          ...handoff.references.map((r, i) =>
+            h('li', {
+              key: i,
+              style: {
+                padding: '8px 0',
+                borderBottom: i < handoff.references.length - 1 ? '1px solid var(--hairline)' : 'none',
+                fontSize: '14px',
+              },
+            },
+              h('div', { style: { display: 'flex', gap: '10px', alignItems: 'baseline', fontFamily: fonts.mono } },
+                chip(r.type, { bg: 'var(--neutral-chip)', fg: 'var(--muted)' }),
+                r.kind && chip(r.kind, { bg: 'var(--blue-chip)', fg: 'var(--blue-muted)' }),
+                h('span', { style: { fontWeight: 500 } }, r.label),
+              ),
+              h('div', { style: { fontFamily: fonts.mono, fontSize: '12px', color: 'var(--muted)', marginTop: '4px' } },
+                r.target,
+                r.anchor && h('span', null, ` ${r.anchor}`),
+              ),
+              r.snippet && h('div', { style: { fontSize: '13px', color: 'var(--dark)', marginTop: '6px', fontStyle: 'italic' } }, r.snippet),
+            )
+          ),
+        )
+      )
+    );
+  }
+
+  // ── Extension chain ───────────────────────────────────────────
+  if (handoff.extensions && handoff.extensions.length > 0) {
+    sections.push(
+      h(SectionCard, { key: 'chain', label: `Chain (${handoff.extensions.length})` },
+        h('div', { style: { position: 'relative', paddingLeft: '20px', borderLeft: '2px solid var(--terracotta-hair)' } },
+          ...handoff.extensions.map((ext, i) => renderExtension(ext, i, handoff.extensions.length)),
+        )
+      )
+    );
+  }
+
+  // ── Web form — reply from browser ──────────────────────────────
+  const replyEndpoint = artifactId ? `https://egregore.xyz/h/${artifactId}/reply` : null;
+
+  if (replyEndpoint) {
+    sections.push(
+      h(SectionCard, { key: 'reply-form', label: 'Reply to this handoff' },
+        h('form', {
+          id: 'reply-form',
+          'data-endpoint': replyEndpoint,
+          'data-artifact-id': artifactId,
+          style: { display: 'flex', flexDirection: 'column', gap: '12px' },
+        },
+          h('div', { style: { display: 'flex', gap: '12px', flexWrap: 'wrap' } },
+            h('input', {
+              name: 'name',
+              type: 'text',
+              placeholder: 'Your name',
+              required: true,
+              style: inputStyle,
+            }),
+            h('input', {
+              name: 'email',
+              type: 'email',
+              placeholder: 'you@example.com (optional)',
+              style: inputStyle,
+            }),
+          ),
+          h('div', { style: { display: 'flex', gap: '12px', alignItems: 'center' } },
+            h('label', { style: { fontFamily: fonts.mono, fontSize: '12px', color: 'var(--muted)' } }, 'Role:'),
+            h('select', { name: 'role', style: { ...inputStyle, flex: 'none', width: 'auto' } },
+              h('option', { value: 'response' }, 'Response'),
+              h('option', { value: 'comment' }, 'Comment'),
+              h('option', { value: 'decision' }, 'Decision'),
+            ),
+          ),
+          h('textarea', {
+            name: 'body',
+            placeholder: 'Your response...',
+            required: true,
+            rows: 4,
+            style: { ...inputStyle, resize: 'vertical', minHeight: '80px' },
+          }),
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
+            h('button', {
+              type: 'submit',
+              style: {
+                padding: '8px 20px',
+                background: 'var(--terracotta)',
+                color: 'var(--cream)',
+                border: 'none',
+                borderRadius: '4px',
+                fontFamily: fonts.mono,
+                fontSize: '13px',
+                fontWeight: 500,
+                cursor: 'pointer',
+              },
+            }, 'Reply'),
+            h('span', {
+              id: 'extend-status',
+              style: { fontFamily: fonts.mono, fontSize: '12px', color: 'var(--muted)' },
+            }),
+          ),
+        ),
+        h('script', {
+          dangerouslySetInnerHTML: { __html: `
+(function(){
+  var form = document.getElementById('reply-form');
+  if (!form) return;
+  form.addEventListener('submit', function(e) {
+    e.preventDefault();
+    var status = document.getElementById('extend-status');
+    var btn = form.querySelector('button[type=submit]');
+    var endpoint = form.dataset.endpoint;
+    var name = form.elements.name.value.trim();
+    var email = form.elements.email.value.trim();
+    var role = form.elements.role.value;
+    var body = form.elements.body.value.trim();
+    if (!name || !body) { status.textContent = 'Name and response required.'; return; }
+    btn.disabled = true;
+    status.textContent = 'Sending...';
+    var payload = { name: name, body: body, role: role };
+    if (email) payload.email = email;
+    fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    }).then(function(r) {
+      if (!r.ok) return r.json().then(function(d) { throw new Error(d.detail || r.statusText); });
+      return r.json();
+    }).then(function(data) {
+      status.innerHTML = 'Replied! Your link: <a href="' + data.reply_url + '" style="color:var(--terracotta)">' + data.reply_url + '</a>';
+      status.style.color = 'var(--terracotta)';
+      form.elements.body.value = '';
+      btn.disabled = false;
+    }).catch(function(err) {
+      status.textContent = 'Failed: ' + err.message;
+      status.style.color = '#c44';
+      btn.disabled = false;
+    });
+  });
+})();
+          ` },
+        }),
+      )
+    );
+  }
+
+  // ── Install recipes ────────────────────────────────────────────
+  if (artifactId) {
+    const recipeStyle = { marginBottom: '12px' };
+    const platformLabel = { fontWeight: 600, fontSize: '13px', color: 'var(--black)', marginBottom: '4px' };
+    const codeBlock = { fontFamily: fonts.mono, fontSize: '12px', background: 'var(--subtle-fill)', padding: '4px 8px', borderRadius: '3px', display: 'inline-block', marginTop: '2px' };
+
+    sections.push(
+      h(SectionCard, { key: 'install-recipes', label: null },
+        h('details', {
+          style: { fontFamily: fonts.sans, fontSize: '14px', color: 'var(--dark)' },
+        },
+          h('summary', {
+            style: { cursor: 'pointer', fontFamily: fonts.mono, fontSize: '13px', color: 'var(--muted)', padding: '4px 0' },
+          }, 'Set up your platform for full handoff support'),
+          h('div', { style: { padding: '1rem 0 0', display: 'flex', flexDirection: 'column', gap: '16px' } },
+            h('div', { style: recipeStyle },
+              h('div', { style: platformLabel }, 'Claude Code'),
+              h('code', { style: codeBlock }, 'npx egregore-handoff install'),
+              h('div', { style: { fontSize: '12px', color: 'var(--muted)', marginTop: '4px' } }, 'Installs sender + receiver skills and auto-detection hook.'),
+            ),
+            h('div', { style: recipeStyle },
+              h('div', { style: platformLabel }, 'Codex'),
+              h('code', { style: codeBlock }, 'npx egregore-handoff install --harness codex'),
+            ),
+            h('div', { style: recipeStyle },
+              h('div', { style: platformLabel }, 'Cursor'),
+              h('code', { style: codeBlock }, 'npx egregore-handoff install --harness cursor'),
+              h('div', { style: { fontSize: '12px', color: 'var(--muted)', marginTop: '4px' } }, 'Adds handoff detection to your Cursor rules.'),
+            ),
+            h('div', { style: recipeStyle },
+              h('div', { style: platformLabel }, 'Goose'),
+              h('code', { style: codeBlock }, 'npx egregore-handoff install --harness goose'),
+              h('div', { style: { fontSize: '12px', color: 'var(--muted)', marginTop: '4px' } }, 'Installs toolkit with receive + reply tools.'),
+            ),
+            h('div', { style: recipeStyle },
+              h('div', { style: platformLabel }, 'ChatGPT / Gemini / Others'),
+              h('div', { style: { fontSize: '13px', color: 'var(--dark)' } }, 'No install needed. Paste the URL — your agent reads it directly. Use the form above to reply.'),
+            ),
+          ),
+        ),
+      )
+    );
+  }
+
+  // ── Footer ────────────────────────────────────────────────────
+  // Reuses agentJsonUrl computed at the top (above the self-instruct block).
+  sections.push(
+    h(SectionCard, { key: 'agent-footer', label: null },
+      h('div', { style: { fontFamily: fonts.mono, fontSize: '12px', color: 'var(--muted)', lineHeight: 1.8 } },
+        replyEndpoint && h('div', null,
+          'Reply: ',
+          h('code', { style: { background: 'var(--subtle-fill)', padding: '2px 6px', borderRadius: '3px' } },
+            `POST ${replyEndpoint}`
+          ),
+          ' with ',
+          h('code', { style: { background: 'var(--subtle-fill)', padding: '2px 6px', borderRadius: '3px' } },
+            '{"name":"...","body":"..."}'
+          ),
+        ),
+        agentJsonUrl && h('div', null,
+          'Full JSON: ',
+          h('code', { style: { background: 'var(--subtle-fill)', padding: '2px 6px', borderRadius: '3px' } },
+            `GET ${agentJsonUrl}`
+          ),
+        ),
+        handoff.extension_endpoint && h('div', null,
+          'Advanced extend: ',
+          h('code', { style: { background: 'var(--subtle-fill)', padding: '2px 6px', borderRadius: '3px', fontSize: '11px' } },
+            `POST ${handoff.extension_endpoint}`
+          ),
+        ),
+      )
+    )
+  );
+
+  sections.push(
+    h(ArtifactFooter, {
+      key: 'footer',
+      generatedAt: handoff.updated_at || handoff.created_at || new Date().toISOString(),
+      source: null,
+    })
+  );
+
+  return h('div', null, ...sections);
+}
+
+// ── Extension renderer ───────────────────────────────────────────
+
+function renderExtension(ext, i, total) {
+  const author = ext.author?.display || ext.author?.handle || 'someone';
+  const date = formatDate(ext.created_at);
+  const role = ext.role || 'response';
+  const isLast = i === total - 1;
+
+  return h('div', {
+    key: i,
+    style: {
+      position: 'relative',
+      paddingBottom: isLast ? 0 : '1.5rem',
+      paddingLeft: '14px',
+      marginBottom: isLast ? 0 : '0.25rem',
+    },
+  },
+    // Bullet on the timeline
+    h('div', {
+      style: {
+        position: 'absolute',
+        left: '-26px',
+        top: '4px',
+        width: '12px',
+        height: '12px',
+        borderRadius: '50%',
+        background: 'var(--terracotta)',
+        border: '2px solid var(--cream)',
+      },
+    }),
+    // Role + author + date
+    h('div', {
+      style: {
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: '10px',
+        marginBottom: '6px',
+        fontFamily: fonts.mono,
+        fontSize: '12px',
+      },
+    },
+      chip(role, { bg: 'var(--terracotta-chip)', fg: 'var(--terracotta)' }),
+      h('strong', { style: { fontFamily: fonts.sans, fontSize: '14px', color: 'var(--black)' } }, author),
+      date && h('span', { style: { color: 'var(--muted)' } }, date),
+    ),
+    // Body — free-form: string OR { prose, sidecar }
+    renderExtensionBody(ext.body),
+  );
+}
+
+function renderExtensionBody(body) {
+  if (typeof body === 'string') {
+    return h('div', { style: { fontSize: '14px', lineHeight: 1.6 } }, renderMarkdownLite(body));
+  }
+  if (body && typeof body === 'object') {
+    const parts = [];
+    if (body.prose) {
+      parts.push(h('div', { key: 'prose', style: { fontSize: '14px', lineHeight: 1.6, marginBottom: body.sidecar ? '0.75rem' : 0 } },
+        renderMarkdown(body.prose)));
+    }
+    if (body.sidecar?.next_steps?.length) {
+      parts.push(h('div', { key: 'next', style: { fontSize: '13px', fontFamily: fonts.mono, color: 'var(--dark)' } },
+        h('strong', { style: { color: 'var(--muted)' } }, 'Next: '),
+        body.sidecar.next_steps.join(' · '),
+      ));
+    }
+    return h('div', null, ...parts);
+  }
+  return null;
+}
+
+// ── Inline styles (table) ─────────────────────────────────────────
+
+const inputStyle = {
+  flex: 1,
+  padding: '8px 12px',
+  border: '1px solid var(--border)',
+  borderRadius: '4px',
+  fontFamily: fonts.sans,
+  fontSize: '14px',
+  background: 'var(--cream)',
+  color: 'var(--black)',
+  outline: 'none',
+};
+
+const thStyle = {
+  textAlign: 'left',
+  padding: '8px 12px',
+  fontWeight: 500,
+  fontSize: '11px',
+  textTransform: 'uppercase',
+  letterSpacing: '0.05em',
+  color: 'var(--muted)',
+};
+const tdStyle = {
+  padding: '10px 12px',
+  fontSize: '13px',
+  verticalAlign: 'middle',
+};