@luckydraw/cumulus 1.0.0 → 1.0.1

package/dist/gateway/static/blex-render.js

@@ -0,0 +1,341 @@
+/**
+ * Cumulus shared blex renderer (task 131, item 3).
+ *
+ * ONE renderer, many surfaces. The standalone chat widget and any embedding app
+ * (the web-app-agent kit, kalendeer, …) drive this same file through an injected
+ * adapter, rather than each re-deriving a port of it. Copying the port is what
+ * guarantees drift in every consumer at once.
+ *
+ * Served by the gateway at /blex-render.js. It is plain ES5-compatible script —
+ * no modules, no build step — so a browser can load it directly, cross-origin.
+ *
+ * ── Adapter contract ────────────────────────────────────────────────────────
+ * Required:
+ *   allowType(type)            -> boolean. Which block types this surface renders.
+ *   getInput()                 -> the text input element, or null.
+ *   getSendButton()            -> the send button element, or null.
+ * Optional (default to no-ops, which is what makes a surface render-only):
+ *   addChip(interaction, handle, sourceId)
+ *   readPersisted(storeKey)    -> previously stored interaction value
+ *   persist(storeKey, value)
+ *   onRendered(container, storeKey)
+ *
+ * A surface that supplies only the three required members gets render-only
+ * behaviour for free: interactions that complete locally still work, and
+ * deferred ones land in a no-op instead of a dead button.
+ */
+(function (global) {
+  'use strict';
+
+  // ── Fenced-code spans ──────────────────────────────────────────────────────
+  //
+  // Held as a source string, not a shared RegExp object — a /g regex carries
+  // lastIndex state, and these call sites must not be able to affect each other.
+  var CODE_FENCE_SRC = '```([^\\n`]*)\\n([\\s\\S]*?)```';
+  var BLEX_FENCE_SRC = '~~~blex:(\\w[\\w-]*)\\n([\\s\\S]*?)\\n~~~';
+
+  function codeFenceRe() {
+    return new RegExp(CODE_FENCE_SRC, 'g');
+  }
+
+  function findCodeFenceSpans(text) {
+    var spans = [];
+    var re = codeFenceRe();
+    var m;
+    while ((m = re.exec(text)) !== null) {
+      spans.push([m.index, m.index + m[0].length]);
+    }
+    return spans;
+  }
+
+  /**
+   * Replace ~~~blex fences with \x00BLEX_n\x00 tokens.
+   *
+   * A fence INSIDE a code block is an example being displayed, not a block to
+   * render — extracting it would delete it from the code block that exists to
+   * show it. String.replace reports offsets into the original string, so one
+   * pass over precomputed spans is enough.
+   */
+  function extractBlocks(text) {
+    var blocks = [];
+    var protectedSpans = findCodeFenceSpans(text);
+    var replaced = text.replace(
+      new RegExp(BLEX_FENCE_SRC, 'g'),
+      function (match, type, json, offset) {
+        for (var i = 0; i < protectedSpans.length; i++) {
+          if (offset >= protectedSpans[i][0] && offset < protectedSpans[i][1]) return match;
+        }
+        var idx = blocks.length;
+        blocks.push({ type: type, json: json.trim(), idx: idx });
+        return '\x00BLEX_' + idx + '\x00';
+      }
+    );
+    return { text: replaced, blocks: blocks };
+  }
+
+  function escapeHtml(text) {
+    var div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  /** The original fence text, reconstructed for display. */
+  function fenceSource(block) {
+    return '~~~blex:' + block.type + '\n' + block.json + '\n~~~';
+  }
+
+  /**
+   * HTML for one placeholder container.
+   *
+   * The container carries the raw fence as its body. `render()` clears it before
+   * rendering, so a CLAIMED container is unchanged — but an unclaimed one shows
+   * what the author actually wrote instead of a blank rectangle. Containers go
+   * unclaimed on several real paths: user messages and changelog entries (which
+   * render markdown but never call render()), any page where blex.min.js failed
+   * to fetch, and — deliberately — any block type the adapter denies.
+   *
+   * opts.streaming suppresses the fallback: a completed-but-not-yet-rendered
+   * fence would otherwise flash its JSON before flipping to the rendered block.
+   */
+  function placeholderHtml(idx, block, opts) {
+    var streaming = !!(opts && opts.streaming);
+    var body =
+      streaming || !block
+        ? ''
+        : '<pre class="blex-fallback">' + escapeHtml(fenceSource(block)) + '</pre>';
+    return '<div class="blex-block-container" data-blex-idx="' + idx + '">' + body + '</div>';
+  }
+
+  /** Replace every \x00BLEX_n\x00 token in rendered HTML with its placeholder. */
+  function insertPlaceholders(html, blocks, opts) {
+    // The NUL is a deliberate in-band sentinel: it cannot occur in model output,
+    // so a token can never be forged by message content.
+    // eslint-disable-next-line no-control-regex
+    return html.replace(/\x00BLEX_(\d+)\x00/g, function (_, idx) {
+      return placeholderHtml(idx, blocks[parseInt(idx, 10)], opts);
+    });
+  }
+
+  // ── The render-only allow set ──────────────────────────────────────────────
+  //
+  // Derived, not argued. A type may render on a non-interactive surface iff every
+  // affordance it draws either completes locally or is purely visual:
+  //
+  //   table / code / file-tree / timeline / image — selection is a highlight.
+  //     Nothing is labelled with a verb; an emit landing in a no-op is invisible.
+  //   terminal / svg — labelled buttons, but clipboard write and the object-URL
+  //     download both run BEFORE the emit. The emit is a receipt, not the mechanism.
+  //   chart / status / metric / progress / gallery / kanban / calendar /
+  //     branch / layout — no clickable affordances at all.
+  //
+  // Excluded, and the reason each is excluded rather than merely unwired:
+  //   confirm / poll / form — interaction is the entire point.
+  //   diff — Apply/Reject have no local half. The emit IS the mechanism, so on a
+  //     render-only surface they are guaranteed dead buttons that read as
+  //     "click to apply" — worse than not rendering, because a dead button looks
+  //     alive in a way raw JSON does not.
+  //   mermaid — excluded on a DIFFERENT axis from the rest, and the distinction
+  //     matters: it draws no affordance at all, so the local-completion test
+  //     above would admit it. It cannot LOAD. Its renderer is the one real dynamic
+  //     import in the 340KB bundle — `await import("mermaid")`, a bare specifier
+  //     with no resolution in a classic script and no import map on any cumulus
+  //     page. Upstream catches the throw and paints the literal string
+  //     "Mermaid render error", so allowing it ships a guaranteed error box.
+  //     Upstream ships a companion global bundle for `chart` (whose loader
+  //     resolves in-bundle) and none for mermaid, so this is not a wiring
+  //     oversight on our side. Measured by @cdda, re-verified against our own
+  //     dist/gateway/static/blex.min.js.
+  var RENDER_ONLY_TYPES = [
+    'table',
+    'status',
+    'metric',
+    'progress',
+    'code',
+    'timeline',
+    'svg',
+    'image',
+    'gallery',
+    'file-tree',
+    'terminal',
+    'chart',
+    'kanban',
+    'calendar',
+    'branch',
+    'layout',
+  ];
+
+  var INTERACTIVE_TYPES = ['confirm', 'poll', 'form', 'diff'];
+
+  /**
+   * An adapter for a surface that has an input but no chip tray.
+   *
+   * Denied types are NOT routed to a library fallback renderer: the global blex
+   * bundle exports BaseRenderer, getPluginInfo, getRegisteredTypes, hasBlockType,
+   * registerBlockType, registerLazyBlockType, registerPlugin, renderBlock,
+   * renderPlaceholder, unregisterBlockType, unregisterPlugin — and no fallback
+   * renderer among them. Leaving the container unclaimed reuses the raw-fence
+   * body above, which is honest and costs nothing.
+   *
+   * Deny is a per-render gate on purpose. Do NOT implement it with
+   * unregisterBlockType: the registry is module-global, so unregistering
+   * `confirm` removes it for every surface sharing that module instance.
+   */
+  function renderOnlyAdapter(overrides) {
+    var base = {
+      allowType: function (type) {
+        return RENDER_ONLY_TYPES.indexOf(type) !== -1;
+      },
+      getInput: function () {
+        return null;
+      },
+      getSendButton: function () {
+        return null;
+      },
+    };
+    if (overrides) {
+      for (var k in overrides) {
+        if (Object.prototype.hasOwnProperty.call(overrides, k)) base[k] = overrides[k];
+      }
+    }
+    return base;
+  }
+
+  // ── Handle lifecycle ───────────────────────────────────────────────────────
+
+  var handleMap = typeof WeakMap !== 'undefined' ? new WeakMap() : null;
+
+  function trackHandle(el, handle) {
+    if (!handleMap) return;
+    var existing = handleMap.get(el) || [];
+    existing.push(handle);
+    handleMap.set(el, existing);
+  }
+
+  function destroy(el) {
+    if (!handleMap) return;
+    var handles = handleMap.get(el);
+    if (!handles) return;
+    handles.forEach(function (h) {
+      try {
+        h.destroy();
+      } catch {
+        /* a renderer that cannot tear down must not block the rest */
+      }
+    });
+    handleMap.delete(el);
+  }
+
+  function errorBox(message) {
+    return (
+      '<pre style="color:#f66;font-size:0.85em;padding:0.5em;">' + escapeHtml(message) + '</pre>'
+    );
+  }
+
+  function callOptional(adapter, name, args) {
+    if (adapter && typeof adapter[name] === 'function') {
+      return adapter[name].apply(adapter, args);
+    }
+    return undefined;
+  }
+
+  /**
+   * Render extracted blocks into the placeholder containers inside `el`.
+   *
+   * opts: { msgKey, streaming, keyPrefix }
+   */
+  function render(el, blocks, adapter, opts) {
+    if (!blocks || blocks.length === 0) return;
+    // Contract violation, checked before the library guard: an adapter without
+    // allowType is a programming error and must surface whether or not blex
+    // happened to load, otherwise it hides until the first page that has blex.
+    if (!adapter || typeof adapter.allowType !== 'function') {
+      throw new Error('[blex] render() requires an adapter with allowType()');
+    }
+    if (typeof global.Blex === 'undefined') {
+      // The raw-fence fallback is already in the DOM, so the reader sees the
+      // payload rather than a blank box. warn, not error: some embedders fail
+      // their build gate on any console error.
+      console.warn('[blex] library not loaded — leaving raw fences in place');
+      return;
+    }
+    var options = opts || {};
+    var streaming = !!options.streaming;
+    var msgKey = options.msgKey;
+
+    var containers = el.querySelectorAll('.blex-block-container');
+    Array.prototype.forEach.call(containers, function (container) {
+      var idx = parseInt(container.getAttribute('data-blex-idx'), 10);
+      if (isNaN(idx) || idx >= blocks.length) return;
+      var block = blocks[idx];
+      if (!adapter.allowType(block.type)) {
+        // Deliberately unclaimed — the raw fence stays visible.
+        console.warn('[blex] type not rendered on this surface: ' + block.type);
+        return;
+      }
+      var storeKey = msgKey ? msgKey + ':' + idx : null;
+
+      try {
+        var data = JSON.parse(block.json);
+        var blockObj = { type: block.type, id: block.type + '-' + idx, data: data };
+
+        // Claim the container: drop the raw-fence fallback. Bad JSON throws
+        // before this line and is reported by the catch below, which names the
+        // problem — better than either the fallback or a blank box.
+        container.innerHTML = '';
+
+        if (streaming) {
+          global.Blex.renderPlaceholder(block.type, container);
+          return;
+        }
+
+        var renderOpts = {};
+        var previous = callOptional(adapter, 'readPersisted', [storeKey]);
+        if (previous !== undefined) renderOpts.previousValue = previous;
+
+        global.Blex.renderBlock(blockObj, container, renderOpts)
+          .then(function (handle) {
+            trackHandle(el, handle);
+            callOptional(adapter, 'onRendered', [container, storeKey]);
+            if (!handle || !handle.onInteraction) return;
+            handle.onInteraction(function (interaction) {
+              if (storeKey && interaction.value !== undefined) {
+                callOptional(adapter, 'persist', [storeKey, interaction.value]);
+              }
+              if (!interaction.serialized) return;
+              var inputEl = adapter.getInput();
+              if (!inputEl) return;
+              if (interaction.immediate) {
+                var existingText = (inputEl.value || '').trim();
+                inputEl.value = existingText
+                  ? existingText + '\n\n' + interaction.serialized
+                  : interaction.serialized;
+                inputEl.dispatchEvent(new Event('input', { bubbles: true }));
+                var sendBtn = adapter.getSendButton();
+                if (sendBtn) sendBtn.click();
+              } else {
+                callOptional(adapter, 'addChip', [interaction, handle, block.type + '-' + idx]);
+              }
+            });
+          })
+          .catch(function (err) {
+            container.innerHTML = errorBox('Blex error: ' + (err.message || err));
+          });
+      } catch (e) {
+        container.innerHTML = errorBox('Invalid blex JSON: ' + e.message);
+      }
+    });
+  }
+
+  global.CumulusBlexRender = {
+    extractBlocks: extractBlocks,
+    placeholderHtml: placeholderHtml,
+    insertPlaceholders: insertPlaceholders,
+    fenceSource: fenceSource,
+    render: render,
+    destroy: destroy,
+    renderOnlyAdapter: renderOnlyAdapter,
+    RENDER_ONLY_TYPES: RENDER_ONLY_TYPES,
+    INTERACTIVE_TYPES: INTERACTIVE_TYPES,
+    CODE_FENCE_SRC: CODE_FENCE_SRC,
+  };
+})(typeof window !== 'undefined' ? window : globalThis);

package/dist/gateway/static/chat.html

@@ -24,6 +24,7 @@
 </head>
 <body>
   <script src="/blex.min.js" onload="console.log('[blex] blex.min.js loaded, Blex:', typeof Blex)" onerror="console.error('[blex] FAILED to load blex.min.js')"></script>
+  <script src="/blex-render.js"></script>
   <script src="/widget.js" data-standalone="true" data-api-key=""></script>
 </body>
 </html>

package/dist/gateway/static/widget.js

@@ -409,6 +409,19 @@
     '.blex-block-container[data-blex-ready="true"] {',
     '  min-height: auto;',
     '}',
+    /* Raw-fence fallback: shown when nothing claims the container (user message,
+       changelog, or blex.min.js failed to load). Better a visible fence than the
+       blank rectangle min-height used to produce. */
+    '.blex-fallback {',
+    '  margin: 0; padding: 0.6em 0.8em;',
+    '  background: rgba(255,255,255,0.04);',
+    '  border: 1px solid rgba(255,255,255,0.08);',
+    '  border-radius: 8px;',
+    '  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;',
+    '  font-size: 0.82em; line-height: 1.45;',
+    '  white-space: pre-wrap; word-break: break-word;',
+    '  opacity: 0.85;',
+    '}',
     /* Blex CSS isolation — revert widget resets inside blex blocks */
     '.blex-block-container * { margin: revert; padding: revert; line-height: revert; list-style: revert; border-spacing: revert; border: revert; }',
     '.blex-block-container { isolation: isolate; }',
@@ -2037,8 +2050,8 @@
 
   // ── Blex Integration ─────────────────────────────────────────────────────
 
-  // WeakMap: DOM element -> BlockHandle[] for lifecycle management
-  var blexHandles = typeof WeakMap !== 'undefined' ? new WeakMap() : null;
+  // Handle lifecycle (element -> BlockHandle[]) lives in blex-render.js — one
+  // owner, so destroy() cannot miss handles the other side created.
 
   // Per-thread store for blex interaction values (poll answers, confirm clicks, etc.)
   // Key: "threadName" → Map<"msgTimestamp:blockIdx", interactionValue>
@@ -2189,136 +2202,99 @@
     });
   }
 
-  // Extract ~~~blex:TYPE\n{json}\n~~~ fences from text
-  // Returns { text: string (with placeholders), blocks: Array<{type, json, idx}> }
+  // ── Shared renderer seam (task 131) ────────────────────────────────────────
+  //
+  // Extraction, placeholder markup, block rendering and handle lifecycle live in
+  // /blex-render.js — ONE implementation shared with the web-app-agent kit and
+  // any embedding app. chat.html loads it before this file.
+  //
+  // The EMBEDDED widget (a bare <script src="/widget.js"> on a third-party page)
+  // loads neither blex.min.js nor blex-render.js, and never has — blex has only
+  // ever worked on /chat. There, fences degrade to literal text, which is what
+  // an author who typed one would expect to see.
+  function blexCore() {
+    return typeof CumulusBlexRender !== 'undefined' ? CumulusBlexRender : null;
+  }
+
+  // Fenced-code regex, sourced from the shared module so the blex extractor and
+  // Phase 1 of renderMarkdown cannot disagree about where a code block starts —
+  // a fence falling through that gap is exactly the bug this seam closes.
+  function codeFenceRe() {
+    var core = blexCore();
+    return new RegExp(core ? core.CODE_FENCE_SRC : '```([^\\n`]*)\\n([\\s\\S]*?)```', 'g');
+  }
+
   function extractBlexBlocks(text) {
-    var blocks = [];
-    var BLEX_PREFIX = '\x00BLEX_';
-    var replaced = text.replace(/~~~blex:(\w[\w-]*)\n([\s\S]*?)\n~~~/g, function (_, type, json) {
-      var idx = blocks.length;
-      blocks.push({ type: type, json: json.trim(), idx: idx });
-      return BLEX_PREFIX + idx + '\x00';
-    });
-    return { text: replaced, blocks: blocks };
+    var core = blexCore();
+    return core ? core.extractBlocks(text) : { text: text, blocks: [] };
   }
 
-  // Render blex blocks into placeholder divs within a message element
-  function renderBlexBlocks(el, blexBlocks, isStreaming, msgKey, threadName) {
-    if (!blexBlocks || blexBlocks.length === 0) return;
-    if (typeof Blex === 'undefined') {
-      console.warn('[blex] Blex library not loaded — blex.min.js may have failed to fetch');
-      return;
-    }
-    var placeholders = el.querySelectorAll('.blex-block-container');
-    // Get the interaction store for this thread
+  // The widget's adapter over the shared renderer. It supplies all five members;
+  // a render-only surface (the web-app-agent kit's panel) supplies the three
+  // required ones and lets addChip/persist default to no-ops.
+  //
+  // `el` is captured because it may be DETACHED by the time an interaction fires
+  // — renderPanelMessages rebuilds the message list — which is why the panel
+  // lookup falls back to a document query.
+  function widgetBlexAdapter(el, threadName) {
     var store = threadName
       ? blexInteractionStore[threadName] || (blexInteractionStore[threadName] = {})
       : null;
 
-    placeholders.forEach(function (container) {
-      var idx = parseInt(container.getAttribute('data-blex-idx'), 10);
-      if (isNaN(idx) || idx >= blexBlocks.length) return;
-      var block = blexBlocks[idx];
-      var storeKey = msgKey ? msgKey + ':' + idx : null;
-
-      try {
-        var data = JSON.parse(block.json);
-        var blockObj = { type: block.type, id: block.type + '-' + idx, data: data };
-
-        if (isStreaming) {
-          // During streaming, show placeholder skeleton
-          Blex.renderPlaceholder(block.type, container);
-        } else {
-          // Check for previously stored interaction value
-          var renderOpts = {};
-          if (store && storeKey && store[storeKey]) {
-            renderOpts.previousValue = store[storeKey];
-          }
+    function panelFor() {
+      return (
+        el.closest('.cumulus-thread-panel') ||
+        el.closest('.cumulus-panel') ||
+        document.querySelector('.cumulus-thread-panel') ||
+        document.querySelector('.cumulus-panel')
+      );
+    }
 
-          // Final render — full interactive block
-          Blex.renderBlock(blockObj, container, renderOpts)
-            .then(function (handle) {
-              // Store handle immediately (inside async callback, not after sync loop)
-              if (blexHandles) {
-                var existing = blexHandles.get(el) || [];
-                existing.push(handle);
-                blexHandles.set(el, existing);
-              }
-              // Attach resize handle (drag to resize, double-click to reset)
-              attachBlexResize(container, threadName, storeKey);
-              if (handle && handle.onInteraction) {
-                // Wire interaction handler
-                handle.onInteraction(function (interaction) {
-                  // Store the interaction value for persistence across re-renders + refreshes
-                  if (store && storeKey && interaction.value !== undefined) {
-                    store[storeKey] = interaction.value;
-                    _flushBlexStore();
-                  }
+    return {
+      // The widget is the interactive surface: every type is allowed here.
+      allowType: function () {
+        return true;
+      },
+      getInput: function () {
+        var panel = panelFor();
+        return panel
+          ? panel.querySelector('[data-testid="webchat-input"]')
+          : document.querySelector('[data-testid="webchat-input"]');
+      },
+      getSendButton: function () {
+        var panel = panelFor();
+        return panel ? panel.querySelector('[data-testid*="send"]') : null;
+      },
+      addChip: function (interaction, handle, sourceId) {
+        addInteractionChip(panelFor(), interaction, handle, sourceId);
+      },
+      readPersisted: function (storeKey) {
+        if (!store || !storeKey) return undefined;
+        return store[storeKey] || undefined;
+      },
+      persist: function (storeKey, value) {
+        if (!store || !storeKey) return;
+        store[storeKey] = value;
+        _flushBlexStore();
+      },
+      onRendered: function (container, storeKey) {
+        attachBlexResize(container, threadName, storeKey);
+      },
+    };
+  }
 
-                  // Find the panel — try el.closest first, fall back to document query
-                  // (el may be detached from DOM if renderPanelMessages rebuilt the message list)
-                  var panel = el.closest('.cumulus-thread-panel') || el.closest('.cumulus-panel');
-                  if (!panel) {
-                    panel =
-                      document.querySelector('.cumulus-thread-panel') ||
-                      document.querySelector('.cumulus-panel');
-                  }
-                  var inputEl = panel
-                    ? panel.querySelector('[data-testid="webchat-input"]')
-                    : document.querySelector('[data-testid="webchat-input"]');
-
-                  if (inputEl && interaction.serialized) {
-                    if (interaction.immediate) {
-                      // Immediate: prepend any existing input text, then auto-send
-                      var existingText = inputEl.value.trim();
-                      inputEl.value = existingText
-                        ? existingText + '\n\n' + interaction.serialized
-                        : interaction.serialized;
-                      inputEl.dispatchEvent(new Event('input', { bubbles: true }));
-                      // Find and click the send button
-                      var sendBtn = panel ? panel.querySelector('[data-testid*="send"]') : null;
-                      if (sendBtn) {
-                        sendBtn.click();
-                      }
-                    } else {
-                      // Deferred: add to chip tray (sourceId deduplicates rapid-fire from same block)
-                      addInteractionChip(panel, interaction, handle, block.type + '-' + idx);
-                    }
-                  }
-                });
-              }
-            })
-            .catch(function (err) {
-              container.innerHTML =
-                '<pre style="color:#f66;font-size:0.85em;padding:0.5em;">Blex error: ' +
-                (err.message || err) +
-                '</pre>';
-            });
-        }
-      } catch (e) {
-        container.innerHTML =
-          '<pre style="color:#f66;font-size:0.85em;padding:0.5em;">Invalid blex JSON: ' +
-          e.message +
-          '</pre>';
-      }
+  function renderBlexBlocks(el, blexBlocks, isStreaming, msgKey, threadName) {
+    var core = blexCore();
+    if (!core) return;
+    core.render(el, blexBlocks, widgetBlexAdapter(el, threadName), {
+      msgKey: msgKey,
+      streaming: isStreaming,
     });
-
-    // Note: handles are stored inside the async .then() callback above,
-    // not here — by this point the promises haven't resolved yet.
   }
 
-  // Destroy blex block handles for a message element
   function destroyBlexBlocks(el) {
-    if (!blexHandles) return;
-    var handles = blexHandles.get(el);
-    if (handles) {
-      handles.forEach(function (h) {
-        try {
-          h.destroy();
-        } catch (e) {}
-      });
-      blexHandles.delete(el);
-    }
+    var core = blexCore();
+    if (core) core.destroy(el);
   }
 
   // Add a deferred interaction chip to the chip tray
@@ -2681,7 +2657,12 @@
     return out;
   }
 
-  function renderMarkdown(text) {
+  // opts.streaming — suppress the raw-fence fallback body while a turn is still
+  // streaming. A completed-but-not-yet-rendered fence would otherwise flash its
+  // JSON before flipping to the rendered block at `done`.
+  function renderMarkdown(text, opts) {
+    var streaming = !!(opts && opts.streaming);
+
     // Phase 0.5: Extract blex fences BEFORE code blocks
     var blexResult = extractBlexBlocks(text);
     text = blexResult.text;
@@ -2690,7 +2671,7 @@
     // Phase 1: Extract fenced code blocks — replace with unique tokens
     var codeBlocks = [];
     var TOKEN_PREFIX = '\x00CODEBLOCK_';
-    var processed = text.replace(/```([^\n`]*)\n([\s\S]*?)```/g, function (_, lang, code) {
+    var processed = text.replace(codeFenceRe(), function (_, lang, code) {
       var idx = codeBlocks.length;
       var langLabel = lang.trim() || 'text';
       var escapedCode = escapeHtml(code.replace(/\n$/, '')); // trim trailing newline
@@ -2767,10 +2748,14 @@
       return codeBlocks[parseInt(idx, 10)];
     });
 
-    // Phase 7.5: Reinsert blex block placeholders
-    html = html.replace(/\x00BLEX_(\d+)\x00/g, function (_, idx) {
-      return '<div class="blex-block-container" data-blex-idx="' + idx + '"></div>';
-    });
+    // Phase 7.5: Reinsert blex block placeholders — shared markup, so the widget
+    // and any embedding app produce byte-identical containers and one renderer
+    // can claim either. See blex-render.js for why the placeholder carries the
+    // raw fence as its body.
+    var core = blexCore();
+    if (core) {
+      html = core.insertPlaceholders(html, blexBlocks, { streaming: streaming });
+    }
 
     return { html: html, blexBlocks: blexBlocks };
   }
@@ -3760,7 +3745,7 @@
         el.className = 'cumulus-msg assistant';
         if (isStreaming) el.setAttribute('data-testid', 'webchat-streaming');
         if (content) {
-          var mdResult = renderMarkdown(content);
+          var mdResult = renderMarkdown(content, { streaming: isStreaming });
           el.innerHTML = mdResult.html;
           if (isStreaming) {
             el.innerHTML += '<span class="cumulus-cursor"></span>';
@@ -7461,7 +7446,7 @@
         el.className = 'cumulus-msg assistant';
         if (isStreaming) el.setAttribute('data-testid', 'webchat-streaming');
         if (content) {
-          var mdResult = renderMarkdown(content);
+          var mdResult = renderMarkdown(content, { streaming: isStreaming });
           el.innerHTML = mdResult.html;
           if (isStreaming) {
             el.innerHTML += '<span class="cumulus-cursor"></span>';