@khanglvm/relay 0.9.0 → 0.10.0

package/src/ui/app.js

@@ -88,6 +88,68 @@
   }
   let themeBtn = null;
 
+  // ---------- localStorage draft mirror ----------
+  // Every autosave is ALSO written to localStorage, keyed by board id. This is
+  // the durability layer the server file alone can't provide: if the connection
+  // drops and the user keeps typing, the in-memory state is mirrored locally, so
+  // even a tab reload / browser restart / a freshly opened tab on the same board
+  // prefills the LATEST input instead of a blank board or a stale server save.
+  // Guards (per design): newest-of-(local,server) wins; the mirror is discarded
+  // if the board's spec rev changed (agent edited it); cleared on submit.
+  const LOCAL_DRAFT_KEY = 'relay-draft-' + (boot.boardId || 'unknown');
+  function writeLocalDraft(p, updatedAt) {
+    try {
+      localStorage.setItem(LOCAL_DRAFT_KEY, JSON.stringify({
+        v: 1,
+        boardId: boot.boardId,
+        rev: bootRev,
+        updatedAt: updatedAt || new Date().toISOString(),
+        payload: p,
+      }));
+    } catch {
+      // localStorage may be full or unavailable (privacy mode) — non-fatal; the
+      // server file remains the primary persistence path.
+    }
+  }
+  function clearLocalDraft() {
+    try { localStorage.removeItem(LOCAL_DRAFT_KEY); } catch { /* non-fatal */ }
+  }
+  // Returns the saved local mirror only if it's valid for THIS board+rev,
+  // otherwise null (and clears a now-stale entry). rev mismatch ⇒ the agent
+  // re-published the board, so old local answers may not map — discard them.
+  function loadLocalDraft() {
+    let raw;
+    try { raw = localStorage.getItem(LOCAL_DRAFT_KEY); } catch { return null; }
+    if (!raw) return null;
+    let obj;
+    try { obj = JSON.parse(raw); } catch { clearLocalDraft(); return null; }
+    if (!obj || obj.boardId !== boot.boardId || !obj.payload || typeof obj.payload !== 'object') {
+      clearLocalDraft();
+      return null;
+    }
+    // rev-guard: a changed spec rev means the local answers may reference a
+    // different question set — don't resurrect them.
+    if (bootRev !== null && obj.rev !== undefined && obj.rev !== null && obj.rev !== bootRev) {
+      clearLocalDraft();
+      return null;
+    }
+    return obj;
+  }
+
+  // Choose the prefill source: the NEWER of the server draft (boot.prefill) and
+  // the local mirror. The server draft shape mirrors a payload() plus updatedAt.
+  function chooseInitialPrefill() {
+    const server = boot.prefill || null;
+    const local = loadLocalDraft();
+    if (!local) return server;
+    if (!server) return { ...local.payload, __from: 'local' };
+    const sT = Date.parse(server.updatedAt || '') || 0;
+    const lT = Date.parse(local.updatedAt || '') || 0;
+    // Newest wins; ties favor local (the tab that was last typing into).
+    return lT >= sT ? { ...local.payload, __from: 'local' } : server;
+  }
+  const initialPrefill = chooseInitialPrefill();
+
   // ---------- state ----------
   // state.answers holds raw control state; state.other holds the "Other"
   // free-text per question; getValue() derives the final answer value.
@@ -97,11 +159,11 @@
     other: {},
     notes: {},
     comment: '',
-    annotations: (boot.prefill && boot.prefill.annotations) || [],
+    annotations: (initialPrefill && initialPrefill.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) || {},
+    blockEdits: (initialPrefill && initialPrefill.blockEdits) || {},
   };
   let submitted = false;
 
@@ -125,8 +187,11 @@
       }
     }
   }
-  if (boot.prefill) seedFromPrefill(boot.prefill);
+  if (initialPrefill) seedFromPrefill(initialPrefill);
   else for (const q of QS) if (q.default !== undefined) state.answers[q.id] = q.default;
+  // If the local mirror was newer than the server (or the server had nothing),
+  // the in-memory state now holds input the server hasn't seen — flush it once
+  // the rest of the app is wired (see the post-init flush near the heartbeat).
 
   function getValue(q) {
     const v = state.answers[q.id];
@@ -176,27 +241,149 @@
     };
   }
 
+  // ---------- persistence-lost block ----------
+  // The dead-end this guards against: the client can lose its connection to the
+  // board's local HTTP server (server gone, port taken over, socket dropped,
+  // machine slept). Autosaves then fail silently and the user keeps typing
+  // answers/comments that are never persisted, then Submit fails too — all of it
+  // thrown away. When persistence is CONFIRMED lost we hard-block: disable every
+  // control and overlay an unmissable scrim with a Retry. Local `state` is never
+  // touched, so the moment the connection recovers we flush it and unblock —
+  // nothing the user typed during the outage is lost.
+  let persistenceLost = false;
+  let probing = false;
+  let lostOverlay = null;
+  let lostRetryBtn = null;
+
+  // A direct, side-effect-free reachability probe. Resolves true when the local
+  // server answers /api/status, false on any network/HTTP failure. Used to
+  // CONFIRM loss before blocking (so a single dropped request never blocks) and
+  // to detect recovery from the Retry button / heartbeat.
+  async function probeServer() {
+    try {
+      const r = await fetch('/api/status', { cache: 'no-store' });
+      return r.ok;
+    } catch {
+      return false;
+    }
+  }
+
+  function buildLostOverlay() {
+    if (lostOverlay) return lostOverlay;
+    lostRetryBtn = el('button', { class: 'lost-retry', type: 'button' }, 'Retry connection');
+    lostRetryBtn.addEventListener('click', retryConnection);
+    lostOverlay = el('div', { class: 'lost-overlay', role: 'alertdialog', 'aria-modal': 'true', 'aria-label': 'Connection lost' },
+      el('div', { class: 'lost-card' },
+        el('div', { class: 'lost-mark' }, '⚠'),
+        el('h2', {}, 'Connection lost — input isn’t being saved'),
+        el('p', {}, 'This board can no longer reach your agent’s session, so anything you type now won’t be saved. Editing is paused to keep you from losing work.'),
+        el('p', { class: 'lost-sub' }, 'Your input up to this point is kept in this tab. Click Retry once the agent’s session is back, or prompt the agent to reopen this board — your draft and unsaved edits will be restored.'),
+        lostRetryBtn
+      )
+    );
+    return lostOverlay;
+  }
+
+  // Enter the blocked state: disable controls, mount the overlay. Idempotent.
+  function blockForLostPersistence() {
+    if (persistenceLost || submitted) return;
+    persistenceLost = true;
+    document.documentElement.classList.add('relay-blocked');
+    // Disable every interactive control inside the form (inputs the user could
+    // otherwise keep typing into) plus Submit.
+    for (const node of app.querySelectorAll('input, textarea, button, select')) {
+      node.disabled = true;
+    }
+    document.body.append(buildLostOverlay());
+    if (saveEl) saveEl.textContent = 'connection lost — not saving';
+  }
+
+  // Leave the blocked state: re-enable controls, remove the overlay, and flush
+  // whatever the user typed during the outage so it's persisted right away.
+  function unblockAfterRecovery() {
+    if (!persistenceLost) return;
+    persistenceLost = false;
+    document.documentElement.classList.remove('relay-blocked');
+    for (const node of app.querySelectorAll('input, textarea, button, select')) {
+      node.disabled = false;
+    }
+    if (lostOverlay) lostOverlay.remove();
+    // Re-arm the heartbeat (it stops itself when it confirms loss) and persist
+    // everything typed during the outage. saveDraft() updates the save label.
+    startHeartbeat();
+    misses = 0;
+    saveFailures = 0;
+    saveDraft();
+  }
+
+  // Retry button: probe once; recover on success, otherwise tell the user it's
+  // still down (without un-blocking).
+  async function retryConnection() {
+    if (probing) return;
+    probing = true;
+    if (lostRetryBtn) { lostRetryBtn.disabled = true; lostRetryBtn.textContent = 'Checking…'; }
+    const ok = await probeServer();
+    probing = false;
+    if (lostRetryBtn) { lostRetryBtn.disabled = false; lostRetryBtn.textContent = 'Retry connection'; }
+    if (ok) unblockAfterRecovery();
+    else if (lostRetryBtn) {
+      lostRetryBtn.textContent = 'Still unreachable — try again';
+      setTimeout(() => { if (lostRetryBtn && persistenceLost) lostRetryBtn.textContent = 'Retry connection'; }, 2500);
+    }
+  }
+
+  // Called when a save/heartbeat fails. Confirms loss with a probe (so one
+  // dropped request never blocks) before hard-blocking. `force` skips the probe
+  // for callers (the heartbeat) that already represent repeated failures.
+  async function considerPersistenceLost(force) {
+    if (persistenceLost || submitted || probing) return;
+    if (!force) {
+      probing = true;
+      const ok = await probeServer();
+      probing = false;
+      if (ok || persistenceLost || submitted) return; // recovered or already handled
+    }
+    blockForLostPersistence();
+  }
+
   // ---------- real-time autosave ----------
   let saveTimer = null;
   let saveSeq = 0;
   let saveEl = null;
+  // Consecutive failed /api/draft saves. Two in a row triggers a confirming
+  // probe → block. Any success resets it.
+  let saveFailures = 0;
   function scheduleSave() {
     if (submitted) return;
+    // Mirror to localStorage SYNCHRONOUSLY on every edit, before (and regardless
+    // of) the network save. This is what survives a tab reload / crash / a new
+    // tab during a connection outage — it must happen even while blocked.
+    writeLocalDraft(payload());
+    if (persistenceLost) return; // network save is futile while disconnected
     if (saveEl) saveEl.textContent = 'saving…';
     clearTimeout(saveTimer);
     saveTimer = setTimeout(saveDraft, 450);
   }
   async function saveDraft() {
     const seq = ++saveSeq;
+    // Keep the local mirror current on every flush too (covers programmatic
+    // saveDraft() calls that don't go through scheduleSave, e.g. recovery flush).
+    writeLocalDraft(payload());
     try {
-      await fetch('/api/draft', {
+      const r = await fetch('/api/draft', {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify(payload()),
       });
-      if (seq === saveSeq && saveEl && !submitted) saveEl.textContent = 'draft saved ✓';
+      if (!r.ok) throw new Error('draft rejected');
+      saveFailures = 0;
+      if (seq === saveSeq && saveEl && !submitted && !persistenceLost) saveEl.textContent = 'draft saved ✓';
     } catch {
-      if (seq === saveSeq && saveEl && !submitted) saveEl.textContent = 'draft save failed';
+      if (seq === saveSeq && saveEl && !submitted && !persistenceLost) saveEl.textContent = 'draft save failed';
+      // A save couldn't be persisted to the SERVER — the core data-loss signal.
+      // (The local mirror above still captured it.) After two in a row, confirm
+      // with a probe and block so the user stops typing into the void.
+      if (++saveFailures >= 2) considerPersistenceLost(false);
     }
   }
 
@@ -543,7 +730,13 @@
     Annotate?.register(titleEl, { blockId: null, questionId: null, target: { kind: 'html-element', label: spec.title } });
   }
   if (spec.intro) {
-    const intro = el('p', { class: 'intro' }, spec.intro);
+    // Render the intro as markdown (bold/italic/code/links/lists) — agents write
+    // markdown here by default. Falls back to plain text if blocks.js is absent.
+    // The .blk-markdown class scopes the shared markdown typography to it.
+    const md = typeof window.RelayBlocks !== 'undefined' && window.RelayBlocks.renderMarkdown;
+    const intro = md
+      ? el('div', { class: 'intro blk-markdown' }, window.RelayBlocks.renderMarkdown(spec.intro))
+      : el('p', { class: 'intro' }, spec.intro);
     app.append(intro);
     Annotate?.enableTextSelection(intro, { blockId: null, questionId: null });
   }
@@ -650,14 +843,26 @@
     submitBtn.disabled = true;
     submitBtn.textContent = 'Submitting…';
     clearTimeout(saveTimer);
+    let reached = true;
     try {
-      const res = await fetch('/api/submit', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify(payload()),
-      });
+      let res;
+      try {
+        res = await fetch('/api/submit', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(payload()),
+        });
+      } catch (netErr) {
+        // A thrown fetch (vs. an HTTP error response) means we never reached the
+        // server — the connection is gone, so this submit was never delivered.
+        reached = false;
+        throw netErr;
+      }
       if (!res.ok) throw new Error('submit rejected');
       submitted = true;
+      // Submitted successfully → the local mirror is no longer needed and would
+      // otherwise resurrect stale answers on a future reopen. Clear it.
+      clearLocalDraft();
       // Don't auto-close when the agent had stopped waiting — the user needs to
       // read the "send your agent a message" note and act on it.
       const autoClose = spec.autoClose && !handedBack;
@@ -674,22 +879,33 @@
         }, 700);
       }
     } catch {
-      // The server is gone, so this submit couldn't be delivered. Keep the
-      // button live and tell the user how to get their input to the agent —
-      // their draft was autosaved up to the last edit.
+      // Restore the button so the user can retry.
       submitBtn.disabled = false;
       submitBtn.textContent = spec.submitLabel;
-      showNotice(
-        'Couldn’t reach the agent to submit just now — your draft is saved. Prompt the agent to reopen this board so your input isn’t lost.',
-        'warn'
-      );
+      if (!reached) {
+        // The connection is gone — the submit (and any further input) can't be
+        // persisted. Block hard so the user stops adding feedback that would be
+        // lost; the block's probe loop / heartbeat lifts it on recovery, and the
+        // user can then submit. force=true: the failed submit already confirms
+        // the server is unreachable.
+        stopHeartbeat();
+        considerPersistenceLost(true);
+        startBlockedProbeLoop();
+      } else {
+        // The server answered with an error (e.g. 409 board already finished) —
+        // it's reachable, so don't show the scary block; just guide the user.
+        showNotice(
+          'Couldn’t submit — the board may have already closed. Prompt the agent to reopen this board so your input isn’t lost.',
+          'warn'
+        );
+      }
     }
   });
 
   // ---------- prefilled load: jump past what's already answered ----------
   // On reload/reopen with saved answers, scroll to the first unanswered
   // question so the user doesn't re-scan questions they already did.
-  if (boot.prefill && QS.length) {
+  if (initialPrefill && QS.length) {
     const answered = QS.filter((q) => getValue(q) !== undefined).length;
     const firstOpen = QS.find((q) => getValue(q) === undefined);
     if (answered > 0 && firstOpen) {
@@ -699,6 +915,14 @@
     }
   }
 
+  // If the chosen prefill came from the local mirror (newer than the server, or
+  // the server had nothing — e.g. a freshly reopened board the user had typed
+  // into in another tab during an outage), the server doesn't yet have this
+  // input. Flush it once so a brand-new tab's view is also the server's truth.
+  if (initialPrefill && initialPrefill.__from === 'local' && !submitted) {
+    saveDraft();
+  }
+
   // ---------- iframe annotate bridge ----------
   // Custom-HTML iframes (via /kit.js relayKit.annotate, auto-injected by the
   // server) talk to the parent over postMessage:
@@ -766,13 +990,20 @@
   // ---------- heartbeat ----------
   let misses = 0;
   let reloading = false;
-  let hb = setInterval(async () => {
+  let hb = null;
+  async function heartbeatTick() {
     // 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;
+      // The heartbeat reaching the server is itself proof persistence is back —
+      // if we were blocked (saves had been failing), recover now and flush.
+      if (persistenceLost) {
+        unblockAfterRecovery();
+        return;
+      }
       // 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),
@@ -806,22 +1037,55 @@
         location.reload();
       }
     } catch {
-      // Lost the live connection (the session ended, or the machine slept).
-      // Keep the board usable — do NOT disable Submit — and show a calm note
-      // rather than the old red "closed" banner. A submit attempt that can't
-      // reach the server falls back to the same guidance below.
-      if (++misses >= 2 && !submitted) {
+      // Lost the live connection (the session ended, or the machine slept). Two
+      // consecutive misses means the local server is unreachable — so input can
+      // no longer be persisted. Hard-block: disable editing and overlay the
+      // unmissable "connection lost" scrim, so the user can't keep typing
+      // feedback that would be silently discarded. The block re-arms its own
+      // probe loop and the heartbeat recovers it once the server answers again.
+      if (++misses >= 2 && !submitted && !persistenceLost) {
         handedBack = true;
-        showNotice(
-          'Lost the live connection to your agent’s session — your latest edits were saved. You can still try Submit; if it doesn’t go through, prompt the agent to reopen this board.',
-          'warn'
-        );
         stopHeartbeat();
+        // force=true: two heartbeat misses already confirm the server is gone,
+        // so block immediately without a redundant probe.
+        considerPersistenceLost(true);
+        // While blocked, keep probing so an automatic recovery (server back,
+        // machine woke) lifts the block even if the user never clicks Retry.
+        startBlockedProbeLoop();
       }
     }
-  }, 3000);
+  }
+  function startHeartbeat() {
+    if (hb || submitted) return;
+    hb = setInterval(heartbeatTick, 3000);
+  }
   function stopHeartbeat() {
     if (hb) clearInterval(hb);
     hb = null;
   }
+
+  // While blocked, the heartbeat is stopped — so run a lightweight probe loop
+  // that lifts the block automatically the moment the server is reachable again
+  // (no Retry click needed). Stops itself on recovery or after submit.
+  let blockedProbe = null;
+  function startBlockedProbeLoop() {
+    if (blockedProbe) return;
+    blockedProbe = setInterval(async () => {
+      if (!persistenceLost || submitted) {
+        clearInterval(blockedProbe);
+        blockedProbe = null;
+        return;
+      }
+      if (probing) return;
+      probing = true;
+      const ok = await probeServer();
+      probing = false;
+      if (ok) {
+        clearInterval(blockedProbe);
+        blockedProbe = null;
+        unblockAfterRecovery();
+      }
+    }, 3000);
+  }
+  startHeartbeat();
 })();

package/src/ui/blocks.css

@@ -79,6 +79,42 @@
 .blk-markdown .md .md-tablewrap { overflow-x: auto; margin: 12px 0; }
 .blk-markdown .md .md-table { margin: 0; }
 
+/* Click-to-open local file links. Rendered wherever markdown runs (intro, md
+   blocks, table cells). A small file glyph + accent text signals "openable",
+   distinct from a plain web link. The whole chip is the click target. */
+.rly-filelink {
+  display: inline-flex; align-items: baseline; gap: 0.3em;
+  color: var(--accent); cursor: pointer; text-decoration: none;
+  border-bottom: 1px solid transparent;
+  border-radius: 4px;
+  transition: border-color 150ms var(--ease), background 150ms var(--ease);
+}
+.rly-filelink:hover { border-bottom-color: var(--accent); }
+.rly-filelink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.rly-filelink .rly-filelink-ico {
+  flex: none; align-self: center;
+  width: 0.92em; height: 0.92em;
+  background: currentColor;
+  /* a document glyph drawn via mask, so it inherits the accent color */
+  -webkit-mask: var(--rly-file-mask) center / contain no-repeat;
+  mask: var(--rly-file-mask) center / contain no-repeat;
+  opacity: 0.85;
+}
+:root {
+  --rly-file-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5L14 3.5z'/%3E%3C/svg%3E");
+}
+.rly-filelink.rly-filelink-code .rly-filelink-txt {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.86em;
+  background: var(--bg-sunken);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 1px 5px;
+}
+.rly-filelink.is-opening { opacity: 0.55; pointer-events: none; }
+/* Error-tone toast for a failed open (success reuses the plain .toast). */
+.toast.toast-err { background: var(--danger); color: var(--danger-fg); }
+
 /* ---------- code block ---------- */
 .blk-pre {
   background: var(--bg-sunken);
@@ -87,24 +123,130 @@
   padding: 14px 16px;
   overflow-x: auto;
   margin: 0;
-}
-.blk-pre code {
+  /* Pin font metrics on the <pre> itself: its line-box strut uses the pre's
+     own font-size, so leaving it inherited (≈16px) makes lines taller than the
+     0.85rem gutter and the numbers drift. Match them exactly. */
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 0.85rem;
   line-height: 1.55;
+}
+.blk-pre code {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
   color: var(--fg);
   white-space: pre;
 }
 /* subtle tinter colors via theme vars only */
 .blk-pre .tok-kw,
+.blk-difftable .tok-kw,
 .blk-markdown .md .tok-kw { color: var(--accent); }
 .blk-pre .tok-str,
+.blk-difftable .tok-str,
 .blk-markdown .md .tok-str { color: var(--ok); }
 .blk-pre .tok-com,
+.blk-difftable .tok-com,
 .blk-markdown .md .tok-com { color: var(--muted); font-style: italic; }
 .blk-pre .tok-num,
+.blk-difftable .tok-num,
 .blk-markdown .md .tok-num { color: var(--fg-2); }
 
+/* code block: file-name / language header above the card */
+.blk-codehead {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 6px 12px; margin-bottom: -1px;
+  background: var(--bg-sunken);
+  border: 1px solid var(--border); border-bottom: 0;
+  border-radius: 10px 10px 0 0;
+  font-size: 0.74rem; color: var(--muted);
+}
+.blk-codehead .blk-codename {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.blk-codehead .blk-codelang { text-transform: uppercase; letter-spacing: 0.05em; flex: none; }
+.blk-codehead:empty,
+.blk-codehead .blk-codename:empty,
+.blk-codehead .blk-codelang:empty { display: none; }
+.blk-codehead:has(.blk-codename:empty) { justify-content: flex-end; }
+
+/* code block: line-number gutter + code column share one bordered card */
+.blk-coderow {
+  display: flex; align-items: stretch;
+  background: var(--bg-sunken);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.blk-codehead + .blk-coderow { border-radius: 0 0 10px 10px; }
+.blk-gutter {
+  flex: none; user-select: none; -webkit-user-select: none;
+  padding: 14px 10px 14px 14px; text-align: right;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85rem; line-height: 1.55;
+  color: var(--muted); white-space: pre;
+  border-right: 1px solid var(--border);
+}
+.blk-coderow .blk-pre {
+  flex: 1 1 auto; border: 0; border-radius: 0; background: none;
+}
+
+/* ---------- diff (unified / git diff) ---------- */
+.blk-diffscroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-sunken); }
+.blk-codehead + .blk-diffscroll { border-radius: 0 0 10px 10px; }
+.blk-difftable {
+  border-collapse: collapse; width: 100%;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.84rem; line-height: 1.5;
+}
+.blk-difftable td { padding: 0 8px; vertical-align: top; }
+.blk-difftable .diff-no {
+  width: 1%; white-space: nowrap; text-align: right;
+  color: var(--muted); user-select: none; -webkit-user-select: none;
+  padding: 0 6px; border-right: 1px solid var(--border);
+}
+.blk-difftable .diff-sign {
+  width: 1ch; text-align: center; color: var(--muted);
+  user-select: none; -webkit-user-select: none; padding: 0 4px;
+}
+.blk-difftable .diff-code { width: 100%; white-space: pre; }
+.blk-difftable .diff-code code { font: inherit; color: var(--fg); background: none; }
+.blk-difftable .diff-add { background: rgba(77, 138, 102, 0.16); }
+.blk-difftable .diff-add .diff-sign { color: var(--ok); }
+.blk-difftable .diff-del { background: rgba(188, 68, 52, 0.15); }
+.blk-difftable .diff-del .diff-sign { color: var(--danger); }
+.blk-difftable .diff-hunk td { color: var(--accent); background: var(--accent-soft); padding-top: 2px; padding-bottom: 2px; }
+.blk-difftable .diff-meta td { color: var(--muted); font-style: italic; }
+.blk-difftable .diff-hunk .diff-code code,
+.blk-difftable .diff-meta .diff-code code { color: inherit; }
+
+/* diff: side-by-side (split) view — old | new. Long lines grow the table and
+   the wrapper scrolls horizontally; short code splits ~50/50. */
+.blk-difftable-split .diff-code { width: 50%; }
+.blk-difftable-split .diff-newside { border-left: 2px solid var(--border-strong); }
+.blk-difftable .diff-fill {
+  background-color: var(--bg-sunken);
+  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(128, 128, 128, 0.07) 6px, rgba(128, 128, 128, 0.07) 12px);
+}
+/* Unified/Split view toggle in the diff header */
+.blk-difftoggle {
+  flex: none; cursor: pointer; font: inherit; font-size: 0.72rem;
+  color: var(--fg-2); background: var(--card);
+  border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px;
+  transition: color 150ms var(--ease), border-color 150ms var(--ease);
+}
+.blk-difftoggle:hover { color: var(--accent); border-color: var(--accent); }
+
+/* ---------- video (iframe embed / local stream / direct URL) ---------- */
+.blk-videowrap { margin: 0; }
+.blk-video, .blk-video-embed {
+  display: block; width: 100%; border: 0;
+  border-radius: 10px; background: #000;
+}
+.blk-video { max-height: 70vh; }
+.blk-video-embed { aspect-ratio: 16 / 9; height: auto; }
+.blk-videocap { margin-top: 8px; font-size: 0.84rem; color: var(--muted); text-align: center; }
+
 /* ---------- table ---------- */
 .blk-table {
   width: 100%;