@crossworks/share-ui 0.230.43

package/src/backgrounds.test.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest';
+import {
+  BACKGROUND_AREAS,
+  BACKGROUND_AREA_IDS,
+  BACKGROUND_OFF,
+  DEFAULT_AREA_BACKGROUNDS,
+  decodeBackgrounds,
+  encodeBackgrounds,
+  isBackgroundChoice,
+  resolveAreaBackground,
+  resolveBackgrounds,
+} from './backgrounds';
+import { AVATAR_PICKER_STYLES, AVATAR_STYLES, BACKGROUND_STYLES } from './avatar';
+
+/**
+ * The value here travels DB → HTML attribute → provider → four surfaces, so
+ * these pin the two properties that chain depends on: a default is the absence
+ * of a pair (or a default change never reaches anyone), and `off` survives the
+ * whole round trip (or "I turned the header off" is indistinguishable from "I
+ * never set the header").
+ */
+
+describe('the catalogue split', () => {
+  it('puts every style in exactly one of the two galleries', () => {
+    expect(AVATAR_PICKER_STYLES.length + BACKGROUND_STYLES.length).toBe(AVATAR_STYLES.length);
+    const bg = new Set(BACKGROUND_STYLES.map((s) => s.id));
+    for (const s of AVATAR_PICKER_STYLES) expect(bg, s.id).not.toContain(s.id);
+  });
+
+  // These encode an identity, which is an avatar's job and meaningless spread
+  // across a sidebar, the reason they moved out of the old "minimalist" shelf.
+  it('keeps the identity styles on the avatar side', () => {
+    const ids = AVATAR_PICKER_STYLES.map((s) => s.id);
+    for (const id of ['initials', 'initial-face', 'glyphs', 'icons']) expect(ids).toContain(id);
+  });
+
+  it('keeps the scene styles on the background side', () => {
+    const ids = BACKGROUND_STYLES.map((s) => s.id);
+    for (const id of ['constellation', 'landscape', 'planets', 'waves']) expect(ids).toContain(id);
+  });
+});
+
+describe('choices', () => {
+  it('accepts off and any background style', () => {
+    expect(isBackgroundChoice(BACKGROUND_OFF)).toBe(true);
+    for (const s of BACKGROUND_STYLES) expect(isBackgroundChoice(s.id), s.id).toBe(true);
+  });
+
+  it('rejects avatar-only styles, unknowns and empties', () => {
+    for (const s of AVATAR_PICKER_STYLES) expect(isBackgroundChoice(s.id), s.id).toBe(false);
+    for (const v of ['', '  ', 'nope', null, undefined]) expect(isBackgroundChoice(v)).toBe(false);
+  });
+
+  it('gives every area a default that is itself a valid choice', () => {
+    for (const a of BACKGROUND_AREAS) {
+      expect(isBackgroundChoice(DEFAULT_AREA_BACKGROUNDS[a.id]), a.id).toBe(true);
+    }
+  });
+
+  it('falls back to the area default for anything invalid', () => {
+    expect(resolveAreaBackground('menu', 'thumbs')).toBe(DEFAULT_AREA_BACKGROUNDS.menu);
+    expect(resolveAreaBackground('header', 'nope')).toBe(DEFAULT_AREA_BACKGROUNDS.header);
+    expect(resolveAreaBackground('chat', null)).toBe(DEFAULT_AREA_BACKGROUNDS.chat);
+    expect(resolveAreaBackground('menu', 'waves')).toBe('waves');
+  });
+
+  it('fills in every area so consumers never see unset', () => {
+    const all = resolveBackgrounds({ menu: 'stripes' });
+    expect(Object.keys(all).sort()).toEqual([...BACKGROUND_AREA_IDS].sort());
+    expect(all.menu).toBe('stripes');
+  });
+});
+
+describe('the wire format', () => {
+  it('omits areas sitting on their default', () => {
+    expect(encodeBackgrounds(DEFAULT_AREA_BACKGROUNDS)).toBe('');
+    expect(encodeBackgrounds({ menu: DEFAULT_AREA_BACKGROUNDS.menu })).toBe('');
+  });
+
+  // The point of omitting defaults: turning an area OFF is a real, stored
+  // choice, so it must survive even when "off" is what most areas already are.
+  it('carries a non-default off', () => {
+    expect(encodeBackgrounds({ ...DEFAULT_AREA_BACKGROUNDS, menu: BACKGROUND_OFF })).toBe(
+      'menu=off',
+    );
+    expect(decodeBackgrounds('menu=off').menu).toBe(BACKGROUND_OFF);
+  });
+
+  it('round-trips a full set', () => {
+    const chosen = {
+      menu: 'stripes',
+      header: 'glass',
+      chat: BACKGROUND_OFF,
+      activity: 'landscape',
+    } as const;
+    expect(decodeBackgrounds(encodeBackgrounds(chosen))).toEqual(chosen);
+  });
+
+  it('emits areas in a stable order, so the stored string does not churn', () => {
+    const a = encodeBackgrounds({ activity: 'waves', menu: 'glass' });
+    const b = encodeBackgrounds({ menu: 'glass', activity: 'waves' });
+    expect(a).toBe(b);
+  });
+
+  it('drops unknown areas and unknown styles on the way in', () => {
+    const out = decodeBackgrounds('menu=waves,bogus=waves,header=thumbs,chat=nope');
+    expect(out.menu).toBe('waves');
+    expect(out.header).toBe(DEFAULT_AREA_BACKGROUNDS.header);
+    expect(out.chat).toBe(DEFAULT_AREA_BACKGROUNDS.chat);
+    expect(out).not.toHaveProperty('bogus');
+  });
+
+  it('survives garbage without throwing', () => {
+    for (const raw of ['', '   ', ',,,', 'menu', 'menu=', '=waves', null, undefined]) {
+      expect(() => decodeBackgrounds(raw)).not.toThrow();
+      expect(decodeBackgrounds(raw).menu).toBe(DEFAULT_AREA_BACKGROUNDS.menu);
+    }
+  });
+});

package/src/backgrounds.ts

@@ -0,0 +1,118 @@
+/**
+ * WHERE a generated background may be applied, and which one each area uses.
+ *
+ * The style catalogue lives in avatar.ts (category `backgrounds`) and the
+ * renderer in backdrop.ts; this module owns only the mapping from AREA to
+ * style, plus the wire format that carries it from the DB to the document.
+ *
+ * A brain-level choice, like the colour theme and the avatar style: it is the
+ * look of the product, not one login's taste.
+ *
+ * OFF IS A REAL CHOICE, not the absence of one. Every area can be bare, and a
+ * bare area has to be storable, otherwise "I turned the header off" is
+ * indistinguishable from "I never set the header", and the next default change
+ * would silently switch it back on.
+ */
+
+import { BACKGROUND_STYLES } from './avatar';
+
+/** The sentinel for "no background here". Not a style id, and deliberately not
+ *  a name any DiceBear style could ever take. */
+export const BACKGROUND_OFF = 'off';
+
+export type BackgroundAreaId = 'menu' | 'header' | 'chat' | 'activity';
+
+export type BackgroundArea = {
+  id: BackgroundAreaId;
+  label: string;
+  /** What the user is actually about to decorate. */
+  hint: string;
+};
+
+export const BACKGROUND_AREAS: BackgroundArea[] = [
+  { id: 'menu', label: 'Menu', hint: 'The left navigation column' },
+  { id: 'header', label: 'Brand', hint: 'Behind the logo and peer name' },
+  { id: 'chat', label: 'Chat', hint: 'Behind the conversation' },
+  { id: 'activity', label: 'Activity', hint: 'The right-hand live column' },
+];
+
+export const BACKGROUND_AREA_IDS: readonly BackgroundAreaId[] = BACKGROUND_AREAS.map((a) => a.id);
+
+/**
+ * What each area shows when the brain has never chosen.
+ *
+ * Only the menu is decorated out of the box. Turning on all four at once is a
+ * decorated app rather than a decorated panel, and the point of a background is
+ * that it is background, so the rest are opt-in.
+ */
+export const DEFAULT_AREA_BACKGROUNDS: Record<BackgroundAreaId, string> = {
+  menu: 'waves',
+  header: BACKGROUND_OFF,
+  chat: BACKGROUND_OFF,
+  activity: BACKGROUND_OFF,
+};
+
+export type AreaBackgrounds = Record<BackgroundAreaId, string>;
+
+const BACKGROUND_STYLE_IDS = new Set(BACKGROUND_STYLES.map((s) => s.id));
+
+function isArea(id: string): id is BackgroundAreaId {
+  return (BACKGROUND_AREA_IDS as readonly string[]).includes(id);
+}
+
+/** Whether a value may be stored as an area's background. `off` counts; a style
+ *  that is not in the `backgrounds` category does not, a portrait stretched
+ *  across the sidebar is a giant face, not a background. */
+export function isBackgroundChoice(v: string | null | undefined): boolean {
+  return !!v && (v === BACKGROUND_OFF || BACKGROUND_STYLE_IDS.has(v));
+}
+
+/** Resolve one area's stored value. Unknown, empty and avatar-only ids fall
+ *  back to the area's default rather than throwing or rendering nothing. */
+export function resolveAreaBackground(
+  area: BackgroundAreaId,
+  v: string | null | undefined,
+): string {
+  return isBackgroundChoice(v) ? v! : DEFAULT_AREA_BACKGROUNDS[area];
+}
+
+/** Fill in every area, so consumers never branch on "unset". */
+export function resolveBackgrounds(
+  stored: Partial<Record<string, string>> | null | undefined,
+): AreaBackgrounds {
+  const out = {} as AreaBackgrounds;
+  for (const a of BACKGROUND_AREAS) out[a.id] = resolveAreaBackground(a.id, stored?.[a.id]);
+  return out;
+}
+
+/**
+ * Wire format: `menu=waves,header=off`.
+ *
+ * Chosen over JSON because it rides in an HTML attribute; this needs no
+ * quoting, survives a glance in devtools, and cannot smuggle anything: both
+ * halves of every pair are validated on the way in AND on the way out.
+ *
+ * Areas already on their default are OMITTED, matching how every other
+ * appearance attribute works: a default is the ABSENCE of the value, so
+ * changing a default later actually reaches the brains that never chose.
+ */
+export function encodeBackgrounds(v: Partial<Record<string, string>> | null | undefined): string {
+  if (!v) return '';
+  const parts: string[] = [];
+  for (const a of BACKGROUND_AREAS) {
+    const choice = v[a.id];
+    if (!isBackgroundChoice(choice)) continue;
+    if (choice === DEFAULT_AREA_BACKGROUNDS[a.id]) continue;
+    parts.push(`${a.id}=${choice}`);
+  }
+  return parts.join(',');
+}
+
+export function decodeBackgrounds(raw: string | null | undefined): AreaBackgrounds {
+  const stored: Record<string, string> = {};
+  for (const pair of (raw ?? '').split(',')) {
+    const [area, choice] = pair.split('=');
+    if (area && choice && isArea(area) && isBackgroundChoice(choice)) stored[area] = choice;
+  }
+  return resolveBackgrounds(stored);
+}

package/src/draw-presenter.tsx

@@ -0,0 +1,39 @@
+/**
+ * Public draw render — the committed SVG snapshot, static, no JS.
+ *
+ * The snapshot is referenced as an IMAGE (`<img src>`), never injected into the
+ * page as markup. An SVG loaded as an image is a separate, script-disabled
+ * document: handlers don't fire, an inline `<style>` can't restyle the host
+ * page, and external references don't load. acceptSceneSvg still validates at
+ * commit, but this surface no longer depends on it being exhaustive.
+ *
+ * The white mat is deliberate — the snapshot is exported light-mode with its
+ * own background, so it reads as a framed artwork on either page theme rather
+ * than adapting (and mangling) its colours.
+ */
+export function DrawPresenter({
+  view,
+  src,
+}: {
+  view: { title: string; hasSvg: boolean };
+  /** URL of the snapshot image (`/s/<token>/draw`). */
+  src: string;
+}) {
+  return (
+    <article className="mx-auto max-w-5xl px-6 py-12 md:py-16">
+      <h1 className="mb-8 text-3xl font-bold tracking-tight text-balance">{view.title}</h1>
+      {view.hasSvg ? (
+        <div className="overflow-hidden rounded-lg border border-border bg-white p-3">
+          {/* eslint-disable-next-line @next/next/no-img-element -- a drawing
+              snapshot is not a next/image candidate: it's an owner-generated
+              SVG of unknown dimensions served from our own share route. */}
+          <img src={src} alt={view.title} className="h-auto w-full" />
+        </div>
+      ) : (
+        <p className="rounded-lg border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
+          Nothing committed here yet.
+        </p>
+      )}
+    </article>
+  );
+}

package/src/event-presenter.tsx

@@ -0,0 +1,62 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { CalendarDays, Clock, Download, MapPin } from 'lucide-react';
+import { formatDateTime } from '@mantle/client-types/lib/format-datetime';
+import { buildIcsHref } from '@mantle/client-types/lib/event-time';
+
+type EventView = {
+  title: string;
+  body: string;
+  startsAt: string | null;
+  endsAt: string | null;
+  location: string | null;
+};
+
+/** Public event render — a clean card with time, location, and an .ics link. */
+export function EventPresenter({ view }: { view: EventView }) {
+  const ics = buildIcsHref(view);
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-12 md:py-16">
+      <div className="rounded-xl border border-border bg-card p-6">
+        <div className="flex items-start gap-3">
+          <CalendarDays className="mt-1 size-6 shrink-0 text-primary-ink" aria-hidden />
+          <h1 className="text-2xl font-bold tracking-tight text-balance">{view.title}</h1>
+        </div>
+
+        <dl className="mt-5 space-y-2 text-sm">
+          {view.startsAt && (
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Clock className="size-4 shrink-0" aria-hidden />
+              <span>
+                {formatDateTime(view.startsAt)}
+                {view.endsAt ? ` – ${formatDateTime(view.endsAt)}` : ''}
+              </span>
+            </div>
+          )}
+          {view.location && (
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <MapPin className="size-4 shrink-0" aria-hidden />
+              <span>{view.location}</span>
+            </div>
+          )}
+        </dl>
+
+        {view.body && (
+          <div className="prose prose-sm dark:prose-invert mt-5 max-w-none border-t border-border pt-5">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{view.body}</ReactMarkdown>
+          </div>
+        )}
+
+        {ics && (
+          <a
+            href={ics}
+            download={`${view.title || 'event'}.ics`}
+            className="mt-6 inline-flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm font-medium hover:bg-accent/40"
+          >
+            <Download className="size-4" aria-hidden /> Add to calendar
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/file-presenter.tsx

@@ -0,0 +1,76 @@
+import { Download, FileText } from 'lucide-react';
+import { formatBytes } from '@mantle/client-types/lib/format-bytes';
+
+/**
+ * Public file render with a media-appropriate viewer: images, PDFs, video, and
+ * audio play inline (served from the scoped asset route); everything else gets
+ * a clean download card. Centered.
+ */
+export function FilePresenter({
+  view,
+  assetUrl,
+}: {
+  view: { fileId: string; filename: string; mimeType: string; size: number };
+  assetUrl: (fileId: string) => string;
+}) {
+  const src = assetUrl(view.fileId);
+  const mime = view.mimeType || '';
+  const isImage = mime.startsWith('image/');
+  const isPdf = mime === 'application/pdf';
+  const isVideo = mime.startsWith('video/');
+  const isAudio = mime.startsWith('audio/');
+
+  return (
+    <div className="mx-auto max-w-5xl px-6 py-12">
+      <header className="mb-6 text-center">
+        <h1 className="text-xl font-semibold tracking-tight">{view.filename}</h1>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {mime || 'file'} · {formatBytes(view.size)}
+        </p>
+      </header>
+
+      {isImage ? (
+        <a href={src} target="_blank" rel="noreferrer" className="block">
+          {/* A plain <img> on purpose: share assets are token-scoped bytes,
+              not next/image-optimizable public files. */}
+          <img
+            src={src}
+            alt={view.filename}
+            className="mx-auto max-h-[80vh] w-auto rounded-lg border border-border"
+          />
+        </a>
+      ) : isPdf ? (
+        <iframe
+          src={src}
+          title={view.filename}
+          className="h-[82vh] w-full rounded-lg border border-border"
+        />
+      ) : isVideo ? (
+        <video
+          src={src}
+          controls
+          className="mx-auto max-h-[80vh] w-full rounded-lg border border-border bg-black"
+        />
+      ) : isAudio ? (
+        <div className="mx-auto max-w-xl rounded-lg border border-border bg-card p-4">
+          <audio src={src} controls className="w-full" />
+        </div>
+      ) : (
+        <div className="mx-auto flex max-w-md items-center gap-3 rounded-xl border border-border bg-card p-4">
+          <FileText className="size-8 shrink-0 text-muted-foreground" aria-hidden />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium">{view.filename}</p>
+            <p className="text-xs text-muted-foreground">{formatBytes(view.size)}</p>
+          </div>
+          <a
+            href={src}
+            download={view.filename}
+            className="inline-flex items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+          >
+            <Download className="size-4" aria-hidden /> Download
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/formula-calculator.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { parseInputText } from '@mantle/content-core/formula-eval';
+import type { FormulaValue } from '@mantle/content-core/formula-spec';
+import type { TargetSignature } from '@mantle/content-core/formula-signature';
+import type { TraceStep } from '@mantle/content-core/formula-eval';
+
+/**
+ * The live calculator on a shared formula — a client island, because it is the
+ * one part of the page that has to talk back to the server.
+ *
+ * Its fields come from the Phase 1 signature, embedded in the page payload
+ * rather than re-derived here: which symbols a target needs, which are
+ * optional, and what the legal values of a rating are. A visitor on a public
+ * link has no way to read the resolution ladder, so anything this got wrong
+ * would surface as a bare "missing required input" they could not act on.
+ *
+ * It renders the DERIVATION, not just the number. A shared engineering result
+ * that cannot be checked is worth very little, and the trace is the difference
+ * between showing your work and asserting an answer.
+ */
+
+type EvalResponse =
+  | { ok: true; value: FormulaValue; trace: TraceStep[] }
+  | { ok: false; error: string; trace?: TraceStep[] };
+
+export function FormulaCalculator({
+  token,
+  signature,
+}: {
+  token: string;
+  signature: TargetSignature[];
+}) {
+  const [target, setTarget] = useState(signature[0]?.id ?? '');
+  const [inputs, setInputs] = useState<Record<string, string>>({});
+  const [result, setResult] = useState<EvalResponse | null>(null);
+  const [running, setRunning] = useState(false);
+
+  const active = useMemo(() => signature.find((s) => s.id === target), [signature, target]);
+  const fields = active?.inputs ?? [];
+
+  async function run() {
+    if (!target) return;
+    setRunning(true);
+    try {
+      const supplied: Record<string, FormulaValue> = {};
+      for (const [k, v] of Object.entries(inputs)) {
+        const parsed = parseInputText(v);
+        if (parsed !== undefined) supplied[k] = parsed;
+      }
+      const res = await fetch(`/s/${encodeURIComponent(token)}/evaluate`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ target, inputs: supplied }),
+      });
+      const body = (await res.json().catch(() => ({}))) as Partial<EvalResponse> & {
+        error?: string;
+      };
+      if (!res.ok) {
+        setResult({ ok: false, error: body.error ?? `${res.status} ${res.statusText}` });
+      } else {
+        setResult(body as EvalResponse);
+      }
+    } catch (err) {
+      setResult({ ok: false, error: err instanceof Error ? err.message : 'evaluation failed' });
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  if (signature.length === 0) return null;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-5">
+      <h2 className="text-lg font-semibold text-foreground">Calculate</h2>
+
+      <label className="mt-4 block text-xs font-medium text-muted-foreground" htmlFor="calc-target">
+        What to compute
+      </label>
+      <select
+        id="calc-target"
+        value={target}
+        onChange={(e) => {
+          setTarget(e.target.value);
+          setResult(null);
+        }}
+        className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+      >
+        {signature.map((s) => (
+          <option key={s.id} value={s.id}>
+            {s.id}
+            {s.produces ? ` → ${s.produces}${s.unit ? ` [${s.unit}]` : ''}` : ''}
+          </option>
+        ))}
+      </select>
+
+      {active && active.unverified.length > 0 ? (
+        <p className="mt-3 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-xs text-muted-foreground">
+          This result depends on {active.unverified.length} equation
+          {active.unverified.length === 1 ? '' : 's'} that{' '}
+          {active.unverified.length === 1 ? 'was' : 'were'} not read from the source.
+        </p>
+      ) : null}
+
+      <div className="mt-4 grid gap-3 sm:grid-cols-2">
+        {fields.map((f) => (
+          <div key={f.symbol}>
+            <label
+              className="block text-xs font-medium text-muted-foreground"
+              htmlFor={`calc-${f.symbol}`}
+            >
+              <span className="font-mono text-foreground">{f.symbol}</span>
+              {f.unit ? ` (${f.unit})` : ''}
+              {f.required ? '' : ' — optional'}
+            </label>
+            {f.name ? <p className="text-[11px] text-muted-foreground">{f.name}</p> : null}
+            {f.kind === 'enum' && f.domain?.length ? (
+              <select
+                id={`calc-${f.symbol}`}
+                value={inputs[f.symbol] ?? ''}
+                onChange={(e) => setInputs((p) => ({ ...p, [f.symbol]: e.target.value }))}
+                className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+              >
+                <option value="">Choose…</option>
+                {f.domain.map((v) => (
+                  <option key={String(v)} value={String(v)}>
+                    {String(v)}
+                    {f.criteria?.[String(v)] ? ` — ${f.criteria[String(v)]}` : ''}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <input
+                id={`calc-${f.symbol}`}
+                value={inputs[f.symbol] ?? ''}
+                placeholder={f.default !== undefined ? String(f.default) : ''}
+                onChange={(e) => setInputs((p) => ({ ...p, [f.symbol]: e.target.value }))}
+                className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+              />
+            )}
+          </div>
+        ))}
+      </div>
+
+      <button
+        onClick={run}
+        disabled={running || !target}
+        className="mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground disabled:opacity-60"
+      >
+        {running ? 'Calculating…' : 'Calculate'}
+      </button>
+
+      {result ? (
+        <div
+          className={`mt-4 rounded-md border p-4 ${
+            result.ok ? 'border-border bg-muted/40' : 'border-destructive/40 bg-destructive/5'
+          }`}
+        >
+          {result.ok ? (
+            <p className="font-mono text-2xl text-foreground">
+              {String(result.value)}
+              {active?.unit ? (
+                <span className="ml-2 text-sm text-muted-foreground">{active.unit}</span>
+              ) : null}
+            </p>
+          ) : (
+            <p className="text-sm text-destructive-ink">{result.error}</p>
+          )}
+          {result.trace && result.trace.length > 0 ? (
+            <details className="mt-3">
+              <summary className="cursor-pointer text-xs text-muted-foreground">
+                Derivation ({result.trace.length} steps)
+              </summary>
+              <ol className="mt-2 space-y-1 font-mono text-xs text-muted-foreground">
+                {result.trace.map((step, i) => (
+                  <li key={i}>
+                    {step.kind === 'symbol' ? (
+                      <>
+                        {step.symbol} = {String(step.value)}{' '}
+                        <span className="opacity-60">({step.from})</span>
+                      </>
+                    ) : step.kind === 'expression' ? (
+                      <>
+                        {step.id} → {String(step.value)}
+                      </>
+                    ) : step.kind === 'branch' ? (
+                      <>
+                        {step.id}: {step.label ?? step.chose} — {step.when}
+                      </>
+                    ) : (
+                      <>
+                        {step.id}[
+                        {Object.entries(step.key)
+                          .map(([k, v]) => `${k}=${String(v)}`)
+                          .join(', ')}
+                        ] → {String(step.value)}
+                      </>
+                    )}
+                  </li>
+                ))}
+              </ol>
+            </details>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}