@khanglvm/relay 0.2.0 → 0.4.0

package/src/ui/app.js

@@ -6,6 +6,10 @@
   const QS = spec.questions || [];
   const app = document.getElementById('app');
   const banner = document.getElementById('banner');
+  // Live-update baseline: the server's rev at page-build time. The heartbeat
+  // compares /api/status.rev to this and reloads the board when it advances
+  // (an agent ran `rly update`).
+  const bootRev = typeof boot.rev === 'number' ? boot.rev : null;
 
   // ---------- helpers ----------
   function el(tag, attrs = {}, ...children) {
@@ -22,6 +26,14 @@
     return n;
   }
 
+  // Small, self-dismissing toast pinned to the top-center of the viewport.
+  // Used to flag a live `rly update` after the reload (accent-soft bg).
+  function showToast(message) {
+    const toast = el('div', { class: 'toast' }, message);
+    document.body.append(toast);
+    setTimeout(() => toast.remove(), 4000);
+  }
+
   // ---------- theme (auto -> light -> dark) ----------
   // Server-side pref wins: boards run on random ports, so localStorage alone
   // can't carry the choice across boards. The server persists it globally.
@@ -70,6 +82,10 @@
     notes: {},
     comment: '',
     annotations: (boot.prefill && boot.prefill.annotations) || [],
+    // Editable-mermaid edits: blockId -> edited source. Seeded from the live
+    // draft so a reload/reopen restores the user's edited diagram. Mutated via
+    // the blocks ctx.onBlockEdit callback below; returned in payload().
+    blockEdits: (boot.prefill && boot.prefill.blockEdits) || {},
   };
   let submitted = false;
 
@@ -135,7 +151,13 @@
       const n = typeof state.notes[q.id] === 'string' ? state.notes[q.id].trim() : '';
       if (n) notes[q.id] = n;
     }
-    return { answers, comment: (state.comment || '').trim(), notes, annotations: state.annotations };
+    return {
+      answers,
+      comment: (state.comment || '').trim(),
+      notes,
+      annotations: state.annotations,
+      blockEdits: state.blockEdits,
+    };
   }
 
   // ---------- real-time autosave ----------
@@ -162,6 +184,44 @@
     }
   }
 
+  // ---------- presence / awareness ----------
+  // Track the last time the user interacted with the page so the agent (via
+  // /api/presence) can tell whether someone is still actively viewing the board
+  // and keep waiting instead of timing out. Every existing 3s heartbeat tick
+  // also POSTs /api/ping {visible, focused, idleMs}; pinging stops after submit.
+  let lastInteractionAt = Date.now();
+  let lastMoveAt = 0;
+  function noteInteraction() {
+    lastInteractionAt = Date.now();
+  }
+  window.addEventListener('pointerdown', noteInteraction, { passive: true });
+  window.addEventListener('keydown', noteInteraction, { passive: true });
+  window.addEventListener('scroll', noteInteraction, { passive: true });
+  window.addEventListener('touchstart', noteInteraction, { passive: true });
+  // pointermove fires continuously — throttle to at most once per second.
+  window.addEventListener('pointermove', () => {
+    const now = Date.now();
+    if (now - lastMoveAt >= 1000) {
+      lastMoveAt = now;
+      lastInteractionAt = now;
+    }
+  }, { passive: true });
+
+  function pingPresence() {
+    if (submitted) return;
+    fetch('/api/ping', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        visible: !document.hidden,
+        focused: document.hasFocus(),
+        idleMs: Date.now() - lastInteractionAt,
+      }),
+    }).catch(() => {
+      // presence is best-effort — a failed ping must never surface to the user
+    });
+  }
+
   // ---------- annotations ----------
   // RelayAnnotate owns the live annotation list; mirror it into state on every
   // change so payload()/autosave/submit carry it exactly like answers.
@@ -176,13 +236,25 @@
     });
   }
 
-  // ctx for RelayBlocks.render — theme()/htmlSrc per the shared contract.
+  // Editable-mermaid: record (or clear) the user's edit for a block, then
+  // autosave. A null/empty code clears the entry (block matches the original
+  // again — e.g. after Reset), so payload()/draft carry only real divergences.
+  function onBlockEdit(blockId, codeOrNull) {
+    if (codeOrNull === null || codeOrNull === undefined) delete state.blockEdits[blockId];
+    else state.blockEdits[blockId] = codeOrNull;
+    scheduleSave();
+  }
+
+  // ctx for RelayBlocks.render — theme()/htmlSrc per the shared contract, plus
+  // the editable-mermaid plumbing (edits map + onBlockEdit callback).
   function blockCtx(questionId) {
     return {
       theme: effectiveTheme,
       htmlSrc: (blockId) => '/html/b/' + encodeURIComponent(blockId) + '?theme=' + effectiveTheme(),
       questionId: questionId == null ? null : questionId,
       annotate: Annotate,
+      edits: state.blockEdits,
+      onBlockEdit,
     };
   }
 
@@ -413,6 +485,16 @@
   });
   applyTheme();
 
+  // Just reloaded after a live `rly update`? Flag set before reload below.
+  try {
+    if (sessionStorage.getItem('relay-updated') === '1') {
+      sessionStorage.removeItem('relay-updated');
+      showToast('Board updated by the agent');
+    }
+  } catch {
+    // sessionStorage may be unavailable (privacy mode) — non-fatal
+  }
+
   app.append(el('header', { class: 'qb-header' }, el('h1', {}, spec.title), themeBtn));
   if (spec.intro) {
     const intro = el('p', { class: 'intro' }, spec.intro);
@@ -495,6 +577,15 @@
 
   function showDone(closing) {
     stopHeartbeat();
+    // Annotation pins/badges/popover float on <body> with elevated z-index —
+    // remove them so they don't leak over the submitted screen.
+    if (window.RelayAnnotate && typeof RelayAnnotate.teardown === 'function') {
+      try {
+        RelayAnnotate.teardown();
+      } catch {
+        // best effort
+      }
+    }
     app.replaceChildren(
       el('div', { class: 'done' },
         el('div', { class: 'mark' }, '✓'),
@@ -584,11 +675,35 @@
 
   // ---------- heartbeat ----------
   let misses = 0;
+  let reloading = false;
   let hb = setInterval(async () => {
+    // Piggyback presence on the heartbeat (best-effort; no-ops after submit).
+    pingPresence();
     try {
       const r = await fetch('/api/status', { cache: 'no-store' });
       if (!r.ok) throw new Error('bad status');
       misses = 0;
+      // Live update: the agent ran `rly update`, advancing the server rev.
+      // Flush whatever the user has typed so far (the reload re-prefills from
+      // the live draft — answers for now-removed question ids are ignored),
+      // then reload to render the new spec. Guarded so it fires once.
+      const body = await r.json().catch(() => null);
+      if (body && typeof body.rev === 'number' && bootRev !== null && body.rev !== bootRev && !submitted && !reloading) {
+        reloading = true;
+        stopHeartbeat();
+        clearTimeout(saveTimer);
+        try {
+          await saveDraft();
+        } catch {
+          // a failed final save shouldn't block the reload to the new spec
+        }
+        try {
+          sessionStorage.setItem('relay-updated', '1');
+        } catch {
+          // sessionStorage may be unavailable — the reload still applies the update
+        }
+        location.reload();
+      }
     } catch {
       if (++misses >= 2 && !submitted) {
         banner.textContent = 'This board is closed — the server has stopped. Answers up to your last edit were autosaved.';

package/src/ui/blocks.css

@@ -168,3 +168,100 @@
 }
 .blk-mermaid .node,
 .blk-mermaid .edgeLabel { cursor: default; }
+
+/* ---------- editable mermaid (diagram editor) ---------- */
+.blk-mermaid-edit { margin-top: 8px; }
+.blk-edit-btn {
+  appearance: none;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  color: var(--muted);
+  font-family: var(--sans);
+  font-size: 0.78rem;
+  padding: 4px 10px;
+  cursor: pointer;
+  transition: color 150ms var(--ease), border-color 150ms var(--ease);
+}
+.blk-edit-btn:hover,
+.blk-edit-btn.is-open { color: var(--accent); border-color: var(--accent); }
+.blk-editor { margin-top: 8px; }
+.blk-editor[hidden] { display: none; }
+.blk-editor-ta {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 120px;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--fg);
+  background: var(--bg-sunken);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+.blk-editor-ta:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.blk-editor-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+.blk-editor-reset {
+  appearance: none;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  color: var(--muted);
+  font-family: var(--sans);
+  font-size: 0.78rem;
+  padding: 4px 10px;
+  cursor: pointer;
+  transition: color 150ms var(--ease), border-color 150ms var(--ease);
+}
+.blk-editor-reset:hover { color: var(--accent); border-color: var(--accent); }
+.blk-editor-status {
+  font-family: var(--sans);
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+.blk-editor-status.has-error { color: var(--muted); }
+
+/* ---------- graphviz (offline, vendored Viz.js) ---------- */
+.blk-graphviz {
+  overflow: auto;
+  max-height: 1200px;
+  text-align: center;
+  /* graphviz draws on its own white canvas; frame it as a deliberate card so
+     it reads intentional in dark mode instead of a stray white rectangle */
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px;
+}
+.blk-graphviz svg {
+  max-width: 100%;
+  height: auto;
+}
+.blk-graphviz g.node,
+.blk-graphviz g.edge { cursor: default; }
+
+/* ---------- plantuml (server-rendered image) ---------- */
+.blk-plantuml {
+  overflow: auto;
+  max-height: 1200px;
+  text-align: center;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px;
+}
+.blk-plantuml .blk-plantuml-img {
+  max-width: 100%;
+  height: auto;
+}

package/src/ui/blocks.js

@@ -371,6 +371,20 @@
     return mermaidPromise;
   }
 
+  let vizPromise = null;
+  function loadViz() {
+    if (window.Viz) return Promise.resolve(window.Viz);
+    if (vizPromise) return vizPromise;
+    vizPromise = new Promise((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = '/vendor/viz-standalone.js';
+      s.onload = () => (window.Viz ? resolve(window.Viz) : reject(new Error('Graphviz failed to load')));
+      s.onerror = () => reject(new Error('Graphviz failed to load'));
+      document.head.appendChild(s);
+    });
+    return vizPromise;
+  }
+
   // ---------- chart ----------
   function clampHeight(h, def) {
     const n = Number(h);
@@ -540,16 +554,133 @@
   const mermaidRegistry = [];
   const chartRegistry = [];
 
+  // Effective code = the user's edit if present, else the authored block.code.
+  // Used by the initial render, the editor's live preview, and the theme
+  // re-render registry path so an edit survives a theme toggle.
+  function effectiveMermaidCode(entry) {
+    const { block, ctx, blockId } = entry;
+    const edited = ctx.edits ? ctx.edits[blockId] : undefined;
+    if (edited !== undefined && edited !== null) return edited;
+    // The live editor keeps entry.code as the source of truth; if the host's
+    // ctx.edits hasn't been updated yet but the user has diverged from the
+    // original, preserve that divergence (don't snap back to block.code).
+    if (entry.code !== undefined && entry.code !== (block.code || '')) return entry.code;
+    return block.code || '';
+  }
+
   function renderMermaid(block, ctx, blockId) {
     const container = el('div', { class: 'blk-mermaid' });
     const entry = { container, block, ctx, blockId };
+    entry.code = effectiveMermaidCode(entry);
     mermaidRegistry.push(entry);
+
+    if (!block.editable) {
+      drawMermaid(entry);
+      return container;
+    }
+
+    // Editable: wrap the diagram + an editor below it. The wrapper is what the
+    // dispatcher appends; the registry still tracks `container` (the diagram).
+    const wrap = el('div', { class: 'blk-mermaid-wrap' });
+    wrap.append(container);
+    wrap.append(buildMermaidEditor(entry));
     drawMermaid(entry);
-    return container;
+    return wrap;
+  }
+
+  // Editor: toggle button + collapsible panel (textarea + Reset + status line).
+  // Live re-render is debounced 600ms; errors show inline WITHOUT destroying the
+  // last good diagram. Each accepted change calls ctx.onBlockEdit(blockId, code)
+  // (null when the value matches the original block.code again).
+  function buildMermaidEditor(entry) {
+    const { block, ctx, blockId, container } = entry;
+    const original = block.code || '';
+
+    const toggleBtn = el('button', { type: 'button', class: 'blk-edit-btn' }, 'Edit diagram');
+    const panel = el('div', { class: 'blk-editor', hidden: '' });
+
+    const ta = el('textarea', { class: 'blk-editor-ta', spellcheck: 'false' });
+    ta.value = entry.code;
+
+    const status = el('div', { class: 'blk-editor-status' }, '');
+    const resetBtn = el('button', { type: 'button', class: 'blk-editor-reset' }, 'Reset');
+    const row = el('div', { class: 'blk-editor-row' }, resetBtn, status);
+    panel.append(ta, row);
+
+    let open = false;
+    toggleBtn.addEventListener('click', () => {
+      open = !open;
+      panel.hidden = !open;
+      toggleBtn.classList.toggle('is-open', open);
+      if (open) ta.focus();
+    });
+
+    let timer = null;
+    function reportEdit(code) {
+      // Only report a real divergence; equal-to-original clears the edit (null).
+      try {
+        if (code === original) ctx.onBlockEdit(blockId, null);
+        else ctx.onBlockEdit(blockId, code);
+      } catch {
+        // host callback failures must not break editing
+      }
+    }
+
+    // Try to render `code`; on success swap the diagram + re-register annotation
+    // targets (via drawMermaid) and report the edit; on failure keep the last
+    // good diagram and show the error inline.
+    function applyCode(code) {
+      previewMermaid(entry, code)
+        .then(() => {
+          status.textContent = '';
+          status.classList.remove('has-error');
+          entry.code = code;
+          reportEdit(code);
+        })
+        .catch((err) => {
+          status.textContent = 'diagram error: ' + (err && err.message ? err.message : String(err));
+          status.classList.add('has-error');
+        });
+    }
+
+    ta.addEventListener('input', () => {
+      if (timer) clearTimeout(timer);
+      const code = ta.value;
+      timer = setTimeout(() => applyCode(code), 600);
+    });
+
+    resetBtn.addEventListener('click', () => {
+      if (timer) { clearTimeout(timer); timer = null; }
+      ta.value = original;
+      applyCode(original);
+    });
+
+    return el('div', { class: 'blk-mermaid-edit' }, toggleBtn, panel);
+  }
+
+  // Render `code` for the editor preview WITHOUT mutating entry.code on failure.
+  // Resolves once the diagram is swapped into the container (annotation targets
+  // re-registered by drawMermaid); rejects with the render error so the caller
+  // can show it inline and keep the last good diagram.
+  function previewMermaid(entry, code) {
+    const prev = entry.code;
+    entry.code = code;
+    return new Promise((resolve, reject) => {
+      drawMermaid(entry, { onDone: resolve, onError: reject });
+    }).catch((err) => {
+      entry.code = prev;
+      throw err;
+    });
   }
 
-  function drawMermaid(entry) {
-    const { container, block, ctx, blockId } = entry;
+  function drawMermaid(entry, hooks) {
+    const { container, ctx, blockId } = entry;
+    const onError = hooks && hooks.onError ? hooks.onError : null;
+    const onDone = hooks && hooks.onDone ? hooks.onDone : null;
+    const fail = (err) => {
+      if (onError) onError(err);
+      else showMermaidErr(container, err);
+    };
     loadMermaid().then((mermaid) => {
       try {
         mermaid.initialize({
@@ -561,7 +692,7 @@
         // ignore re-init issues
       }
       const id = 'rly-mmd-' + (++mermaidSeq);
-      const code = block.code || '';
+      const code = entry.code !== undefined ? entry.code : effectiveMermaidCode(entry);
       const onSvg = (svg) => {
         container.innerHTML = svg;
         const svgEl = container.querySelector('svg');
@@ -579,24 +710,26 @@
             svgEl.style.maxWidth = '100%';
           }
         }
-        if (!ctx.annotate) return;
-        const nodes = container.querySelectorAll('.node, .edgeLabel');
-        nodes.forEach((g) => {
-          ctx.annotate.register(g, {
-            blockId,
-            questionId: ctx.questionId,
-            target: {
-              kind: 'mermaid-node',
-              nodeId: g.id || '',
-              text: (g.textContent || '').trim().slice(0, 120),
-            },
+        if (ctx.annotate) {
+          const nodes = container.querySelectorAll('.node, .edgeLabel');
+          nodes.forEach((g) => {
+            ctx.annotate.register(g, {
+              blockId,
+              questionId: ctx.questionId,
+              target: {
+                kind: 'mermaid-node',
+                nodeId: g.id || '',
+                text: (g.textContent || '').trim().slice(0, 120),
+              },
+            });
           });
-        });
+        }
+        if (onDone) onDone();
       };
       try {
         const ret = mermaid.render(id, code);
         if (ret && typeof ret.then === 'function') {
-          ret.then((r) => onSvg(r.svg)).catch((err) => showMermaidErr(container, err));
+          ret.then((r) => onSvg(r.svg)).catch((err) => fail(err));
         } else if (ret && ret.svg) {
           onSvg(ret.svg);
         } else if (typeof ret === 'string') {
@@ -606,9 +739,9 @@
           mermaid.render(id, code, (svg) => onSvg(svg));
         }
       } catch (err) {
-        showMermaidErr(container, err);
+        fail(err);
       }
-    }).catch((err) => showMermaidErr(container, err));
+    }).catch((err) => fail(err));
   }
 
   // Live theme toggle: re-render mermaid diagrams with the new mermaid theme
@@ -616,6 +749,8 @@
   function onThemeChange() {
     for (const entry of mermaidRegistry) {
       try {
+        // re-render with the effective code so an edit survives the toggle
+        entry.code = effectiveMermaidCode(entry);
         drawMermaid(entry);
       } catch {
         // keep the previous svg on failure
@@ -648,6 +783,120 @@
     );
   }
 
+  // ---------- graphviz (offline, vendored Viz.js -> SVG) ----------
+  // Same sizing rule as mermaid: never upscale past the diagram's natural
+  // width; shrink on narrow screens. Authors set their own colors so there is
+  // no theme re-render.
+  function sizeDiagramSvg(svgEl) {
+    if (!svgEl) return;
+    svgEl.removeAttribute('height');
+    svgEl.removeAttribute('width');
+    const vb = svgEl.viewBox && svgEl.viewBox.baseVal;
+    if (vb && vb.width > 0) {
+      svgEl.style.width = '100%';
+      svgEl.style.maxWidth = Math.ceil(vb.width) + 'px';
+      svgEl.style.height = 'auto';
+    } else {
+      svgEl.style.maxWidth = '100%';
+    }
+  }
+
+  function renderGraphviz(block, ctx, blockId) {
+    const container = el('div', { class: 'blk-graphviz' });
+    loadViz()
+      .then((Viz) => Viz.instance())
+      .then((viz) => {
+        const svgEl = viz.renderSVGElement(block.dot || '');
+        sizeDiagramSvg(svgEl);
+        container.replaceChildren(svgEl);
+        if (!ctx.annotate) return;
+        const parts = svgEl.querySelectorAll('g.node, g.edge');
+        parts.forEach((g) => {
+          const titleEl = g.querySelector('title');
+          const nodeId = (g.id || (titleEl && titleEl.textContent) || '').trim();
+          // Label text lives in <text> elements; g.textContent would also
+          // include the <title> child and duplicate the label.
+          const labels = Array.from(g.querySelectorAll('text')).map((t) => t.textContent.trim()).filter(Boolean);
+          const text = (labels.join(' ') || (titleEl && titleEl.textContent) || '').trim().slice(0, 120);
+          ctx.annotate.register(g, {
+            blockId,
+            questionId: ctx.questionId,
+            target: {
+              kind: 'graphviz-node',
+              nodeId,
+              text,
+            },
+          });
+        });
+      })
+      .catch((err) => {
+        container.replaceChildren(
+          el('div', { class: 'blk-error' }, 'Graphviz error: ' + (err && err.message ? err.message : String(err)))
+        );
+      });
+    return container;
+  }
+
+  // ---------- plantuml (server-rendered; client deflate-raw + base64 variant) ----------
+  const PLANTUML_ALPHABET = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_';
+
+  // PlantUML's base64 variant: 3 bytes -> 4 chars using PLANTUML_ALPHABET.
+  function encode64(bytes) {
+    let out = '';
+    for (let i = 0; i < bytes.length; i += 3) {
+      const b1 = bytes[i];
+      const b2 = i + 1 < bytes.length ? bytes[i + 1] : 0;
+      const b3 = i + 2 < bytes.length ? bytes[i + 2] : 0;
+      out += PLANTUML_ALPHABET[b1 >> 2];
+      out += PLANTUML_ALPHABET[((b1 & 0x3) << 4) | (b2 >> 4)];
+      if (i + 1 < bytes.length) out += PLANTUML_ALPHABET[((b2 & 0xf) << 2) | (b3 >> 6)];
+      if (i + 2 < bytes.length) out += PLANTUML_ALPHABET[b3 & 0x3f];
+    }
+    return out;
+  }
+
+  async function encodePlantUml(code) {
+    if (typeof CompressionStream === 'undefined') {
+      throw new Error('CompressionStream unavailable');
+    }
+    const bytes = new TextEncoder().encode(String(code));
+    const blob = new Blob([bytes]);
+    const compressed = await new Response(
+      blob.stream().pipeThrough(new CompressionStream('deflate-raw'))
+    ).arrayBuffer();
+    return encode64(new Uint8Array(compressed));
+  }
+
+  function renderPlantuml(block, ctx, blockId) {
+    const container = el('div', { class: 'blk-plantuml' });
+    const fail = () =>
+      container.replaceChildren(
+        el('div', { class: 'blk-error' }, 'PlantUML needs network access and a modern browser')
+      );
+    encodePlantUml(block.code || '')
+      .then((encoded) => {
+        const server = block.server || 'https://www.plantuml.com/plantuml';
+        const img = el('img', {
+          class: 'blk-plantuml-img',
+          src: server + '/svg/' + encoded,
+          alt: 'PlantUML diagram',
+          loading: 'lazy',
+        });
+        if (block.height) img.style.height = clampHeight(block.height, 360) + 'px';
+        img.addEventListener('error', fail);
+        container.replaceChildren(img);
+        if (ctx.annotate) {
+          ctx.annotate.register(img, {
+            blockId,
+            questionId: ctx.questionId,
+            target: { kind: 'image', label: 'PlantUML diagram' },
+          });
+        }
+      })
+      .catch(fail);
+    return container;
+  }
+
   // ---------- html (sandboxed iframe) ----------
   function renderHtml(block, ctx, blockId) {
     const height = clampHeight(block.height, 360);
@@ -690,6 +939,14 @@
         inner = renderMermaid(block, ctx, blockId);
         wrapper.append(inner);
         break;
+      case 'graphviz':
+        inner = renderGraphviz(block, ctx, blockId);
+        wrapper.append(inner);
+        break;
+      case 'plantuml':
+        inner = renderPlantuml(block, ctx, blockId);
+        wrapper.append(inner);
+        break;
       case 'html':
         inner = renderHtml(block, ctx, blockId);
         wrapper.append(inner);
@@ -708,6 +965,11 @@
       htmlSrc: ctx && ctx.htmlSrc ? ctx.htmlSrc : (id) => '/html/b/' + id,
       questionId: ctx && ctx.questionId !== undefined ? ctx.questionId : null,
       annotate: ctx && ctx.annotate ? ctx.annotate : null,
+      // editable-mermaid plumbing: edits maps blockId -> edited code; onBlockEdit
+      // reports an accepted change (or null to clear back to the original).
+      edits: ctx && ctx.edits ? ctx.edits : {},
+      onBlockEdit:
+        ctx && typeof ctx.onBlockEdit === 'function' ? ctx.onBlockEdit : () => {},
     };
     for (const block of list) {
       if (!block || !block.type) continue;

package/src/ui/style.css

@@ -206,6 +206,15 @@ textarea { min-height: 90px; resize: vertical; }
   z-index: 10; display: none;
 }
 
+/* Live-update toast: flagged after a `rly update` reload (see app.js).
+   Fixed top-center, accent-soft bg, accent text; JS auto-removes it. */
+.toast {
+  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
+  background: var(--accent-soft); color: var(--accent);
+  padding: 10px 18px; border-radius: 10px; font-size: 0.9rem;
+  box-shadow: var(--shadow-lift); z-index: 50;
+}
+
 .done { text-align: center; padding: 80px 18px; }
 .done .mark {
   width: 64px; height: 64px; border-radius: 50%;

package/vendor/VERSIONS.json

@@ -1,5 +1,6 @@
 {
   "chart.js": "4.5.1",
   "mermaid": "11.15.0",
-  "updatedAt": "2026-06-11T09:20:33.586Z"
+  "@viz-js/viz": "3.28.0",
+  "updatedAt": "2026-06-11T10:09:03.988Z"
 }