dsh-generative-ui 0.0.2 → 0.0.3

package/src/client/runtime/inline-fence.ts

@@ -24,7 +24,8 @@ import { createRoot, type Root } from "react-dom/client";
 import { createElement } from "react";
 import { CodeBlock } from "@deepseek-ai/dsh-client-ui-primitives";
 import type { ReactElement } from "react";
-import type { Ui4aSegment } from "./segments.ts";
+import { FENCE_LANG } from "../../contract.ts";
+import { parseUi4aSegments, type Ui4aSegment } from "./segments.ts";
 import { observeTranscript } from "./observe.ts";
 
 const CLAIMED = "data-ui4a-claimed";
@@ -42,7 +43,8 @@ const dropPreview = (claim: { preview: { host: HTMLElement; root: Root } | null
   });
 };
 
-type Claim = { block: HTMLElement; mount: HTMLElement; root: Root; code: string; complete: boolean; rendered: string; painted: MutationObserver | null; preview: { host: HTMLElement; root: Root } | null };
+/** `reserved` is the segment code this claim owns, so no other block can be matched to it — see `sweep`. */
+type Claim = { block: HTMLElement; mount: HTMLElement; root: Root; code: string; reserved: string; complete: boolean; rendered: string; painted: MutationObserver | null; preview: { host: HTMLElement; root: Root } | null };
 
 /**
  * Whether the card has actually painted something a reader can see.
@@ -87,8 +89,17 @@ export const hasPainted = (mount: HTMLElement) => {
   return false;
 };
 
+/** A wider Markdown fence leaves the real ui4a opener as the first line of the rendered code. */
+const LEADING_UI4A_FENCE = new RegExp(String.raw`^\s*\x60{3,}${FENCE_LANG.replace("/", "\\/")}(?:[^\n]*)(?:\n|$)`);
+
 /** The block's source. `pre` when the grammar was unknown, the highlighted div otherwise. */
-const codeOf = (block: HTMLElement) => block.querySelector("pre")?.textContent ?? "";
+const codeOf = (block: HTMLElement) => {
+  const rendered = block.querySelector("pre")?.textContent ?? "";
+  if (!LEADING_UI4A_FENCE.test(rendered)) return rendered;
+  // The snapshot parser already owns every malformed-closer tolerance. Reusing it here keeps the
+  // DOM half on the same recovered body instead of growing a second fence grammar.
+  return parseUi4aSegments(rendered)[0]?.code ?? rendered;
+};
 
 /** CodeBlock trims one trailing newline for display, so compare on trimmed ends. */
 export const sameCode = (a: string, b: string) => a.trimEnd() === b.trimEnd();
@@ -103,14 +114,103 @@ export const matchSegment = (segments: readonly Ui4aSegment[], rendered: string)
 export type InlineFenceOptions = {
   /** Every ui4a segment currently in the transcript, in document order. */
   segments: () => readonly Ui4aSegment[];
-  render: (props: { code: string; streaming: boolean }) => ReactElement;
+  /** `last` answers whether this card is still the transcript's newest — asked at report time, not render time. */
+  render: (props: { code: string; streaming: boolean; last: () => boolean }) => ReactElement;
   scope?: HTMLElement;
 };
 
+/**
+ * Whether this card's code is the last ui4a segment in the transcript.
+ *
+ * **Only the last block's failure is worth telling the model about.** An earlier card that cannot
+ * render stays in the transcript and re-renders on every later frame, so it fails again, and
+ * again, for the rest of the session — measured on a real one where the model wrote a card
+ * importing `Github` from `lucide-react` (removed upstream), was told, fixed it to `GitBranch` in
+ * the very next reply, and the failure notice kept coming back from the reply it had already
+ * superseded. The model cannot act on it: editing a message it already sent is not a thing it
+ * can do.
+ *
+ * Evaluated when the report is about to be SENT, not when the error is raised. A card is the last
+ * one at the moment it breaks and stops being so as soon as the next card appears, which is
+ * exactly the second in between.
+ *
+ * **Segments, not mounts.** Comparing DOM nodes was wrong three separate ways, all of them
+ * silent: `release` calls `claim.mount.remove()` on every markdown re-render, so a broken card
+ * followed by any trailing prose compared a detached node and dropped its own report; `defer`
+ * parks a far-offscreen block without ever creating a mount, so a reader scrolled up while the fix
+ * streams left an older card holding the last mount and reporting as though it were newest; and an
+ * empty node list has to mean false, since a session switch inside the settle window empties it
+ * while `sendToModel` reads `currentSession()` at send time — session A's error into session B's
+ * store. The segment list is the transcript's own order and survives all three.
+ */
+export const isLastSegment = (segments: readonly Ui4aSegment[], code: string): boolean => {
+  const last = segments.at(-1);
+  return last !== undefined && (sameCode(last.code, code) || last.code.startsWith(code));
+};
+
+/**
+ * How far outside the viewport a card is still worth compiling.
+ *
+ * One viewport in each direction: the reader who scrolls towards a card finds it already
+ * rendered, because compiling starts a screen before it arrives. Smaller and a fast scroll
+ * outruns it; much larger and the whole transcript is "near" again, which is the state this
+ * exists to leave.
+ */
+const NEAR_VIEWPORT = "100% 0px";
+
 export function claimInlineFences({ segments, render, scope }: InlineFenceOptions): () => void {
   const claims = new Map<HTMLElement, Claim>();
   const root = scope ?? document.body;
 
+  // Blocks parked until they come near the viewport. Kept so the disposer can stop observing
+  // them, and so `sweep` does not re-observe one it is already watching.
+  const parked = new Set<HTMLElement>();
+  // Blocks the observer has woken. Kept separately because waking does NOT move the block: the
+  // observer fires on entering the margin, while `getBoundingClientRect` still reads whatever
+  // the layout says, so re-measuring in the sweep that the wake triggered parks it straight back
+  // and the card never renders. Membership here is the permission; the sweep clears it.
+  const woken = new Set<HTMLElement>();
+  const nearby: IntersectionObserver | null =
+    typeof IntersectionObserver === "undefined"
+      ? null
+      : new IntersectionObserver(
+          (entries) => {
+            let woke = false;
+            for (const entry of entries) {
+              if (!entry.isIntersecting) continue;
+              const block = entry.target as HTMLElement;
+              nearby?.unobserve(block);
+              parked.delete(block);
+              woken.add(block);
+              woke = true;
+            }
+            // One sweep for the batch, not one per block: a scroll can bring a dozen into range
+            // in the same frame, and `sweep` walks the whole transcript each time it runs.
+            if (woke) sweep();
+          },
+          { rootMargin: NEAR_VIEWPORT },
+        );
+
+  /** True when this block should wait. An incomplete (still streaming) segment never waits — it is what the reader is watching. */
+  const defer = (block: HTMLElement, segment: Ui4aSegment): boolean => {
+    if (nearby === null || !segment.complete) return false;
+    if (woken.delete(block)) return false;
+    if (parked.has(block)) return true;
+    // `getBoundingClientRect` rather than waiting for the observer's first callback: the observer
+    // reports asynchronously, so a block would be claimed before its first entry ever arrives and
+    // the deferral would never happen at all.
+    const box = block.getBoundingClientRect();
+    const limit = (globalThis.innerHeight || 0) || 0;
+    // A zero-height box means the block is not laid out yet (display:none, or an ancestor still
+    // hidden). That is not "far away", and treating it as such parks a card that is about to be
+    // visible, so measure it again next sweep instead of parking it.
+    if (limit === 0 || (box.height === 0 && box.width === 0)) return false;
+    if (box.bottom > -limit && box.top < limit * 2) return false;
+    parked.add(block);
+    nearby.observe(block);
+    return true;
+  };
+
   const release = (claim: Claim, restore: boolean) => {
     claim.painted?.disconnect();
     claim.root.unmount();
@@ -125,13 +225,71 @@ export function claimInlineFences({ segments, render, scope }: InlineFenceOption
 
   const sweep = () => {
     const current = segments();
+    // Dead claims first, because the reservation below is built from what claims hold. A block
+    // the host's markdown re-render replaced is gone but its claim is not, and releasing it in
+    // the loop *after* the claim loop let it reserve its segment for one more sweep — long
+    // enough for the replacement block to find nothing free and paint nothing. With the
+    // re-render happening every streamed frame that alternates, and the card flickers.
+    for (const claim of claims.values()) if (!claim.block.isConnected) release(claim, false);
+    // A segment backs at most one block. `matchSegment` matches by PREFIX and takes the first
+    // hit in document order, and every generated card opens with the same line — measured on a
+    // real transcript, all three cards started `import { useState } from "react"`, so the third
+    // card's opening 40 characters were still a prefix of the FIRST card's code. Its slot
+    // rendered card one in full, then blanked for 2.8s when the texts diverged and the partial
+    // buffer had no `export default` yet: content, then nothing, then finally the right card.
+    // Excluding what live claims already own leaves each new block only the segments still going
+    // spare, which in a growing transcript is the one still streaming.
+    const taken = new Set([...claims.values()].map((claim) => claim.reserved));
 
     for (const block of root.querySelectorAll<HTMLElement>(`.md-code-block:not([${CLAIMED}])`)) {
+      // OUR OWN nodes are not candidates. `CodeBlock` — the host component the source preview is
+      // rendered with — puts `md-code-block` on its own root, so every preview we mount is itself
+      // a match for this selector, and a card that renders a code block is another. Claiming one
+      // mounts a card inside it, whose preview is a third block, and so on.
+      //
+      // Measured in a live session: `blocks` climbed 1 → 2 → 3 while `mounts` and `prev` climbed
+      // with it, then the whole stack collapsed to 0 and rebuilt, several times a second — the
+      // flicker. The reservation below does NOT stop it: it holds `claim.reserved`, the code from
+      // the PREVIOUS frame, while the segment has already grown, so mid-stream the two never
+      // match and nothing is excluded.
+      if (block.closest(`[${PREVIEW}]`) !== null || block.closest(`[${MOUNT}]`) !== null) continue;
       const code = codeOf(block);
       if (code === "") continue;
       // A streaming block's rendered text is a prefix of its segment; a settled one equals it.
-      const segment = matchSegment(current, code);
+      const segment = matchSegment(
+        current.filter((candidate) => !taken.has(candidate.code)),
+        code,
+      );
       if (segment === undefined) continue;
+      // A DEFERRED block still owns its segment. Deferring means "do not mount this yet", not
+      // "this segment is free" — and the card that gets parked is by definition a settled one far
+      // off screen, which in a live transcript is the oldest card while the reader sits at the
+      // bottom watching a new one arrive. Reserving only on the claim path left that segment
+      // spare, and the new block — still showing nothing but the opening line every generated
+      // card shares — matched it by prefix and painted the OLD card where the new one belonged.
+      //
+      // Reserve BEFORE the deferral check, or the two earlier fixes to this class (the per-claim
+      // reservation, and pruning dead claims before building it) go on missing it: both hold only
+      // what a live claim owns, and a parked block has no claim. Reserving here also covers the
+      // within-one-sweep case a reload presents — every block unclaimed at once, all of them
+      // otherwise matching the same segment.
+      taken.add(segment.code);
+      // FAR OFFSCREEN AND NOT YET STREAMING: leave it for later. Claiming a block compiles it,
+      // mounts a React root, runs every effect it declares and pulls its third-party imports off
+      // esm.sh — a Monaco card costs megabytes and starts a language service. `isConnected` was
+      // the only liveness test here, and the host keeps a long transcript's messages in the DOM,
+      // so scrolling back through twenty cards paid all of that twenty times over for cards
+      // nobody was looking at.
+      //
+      // A STREAMING block is never deferred: it is what the reader is watching, and its segment
+      // is still growing. `defer` also answers false when there is no observer (no
+      // IntersectionObserver, or `scope` is detached in a test), so the behaviour without one is
+      // exactly what it was before.
+      //
+      // Called ONCE. It has side effects — it consumes the wake flag, parks the block and starts
+      // observing it — so asking twice in one sweep eats the wake and re-parks a block that had
+      // just come into view.
+      if (defer(block, segment)) continue;
       block.setAttribute(CLAIMED, "");
       const mount = document.createElement("div");
       mount.setAttribute(MOUNT, "");
@@ -148,7 +306,7 @@ export function claimInlineFences({ segments, render, scope }: InlineFenceOption
       previewHost.setAttribute(PREVIEW, "");
       block.parentElement?.insertBefore(previewHost, block);
       block.style.display = "none";
-      const claim: Claim = { block, mount, root: createRoot(mount), code: "", complete: false, rendered: "", painted: null, preview: { host: previewHost, root: createRoot(previewHost) } };
+      const claim: Claim = { block, mount, root: createRoot(mount), code: "", reserved: segment.code, complete: false, rendered: "", painted: null, preview: { host: previewHost, root: createRoot(previewHost) } };
       // The source stays visible until the card paints. Checked at most once per frame and
       // torn down the moment it fires: a streaming card mutates thousands of times, and
       // `textContent` walks the whole subtree, so a per-mutation check would be
@@ -169,6 +327,8 @@ export function claimInlineFences({ segments, render, scope }: InlineFenceOption
     }
 
     for (const claim of claims.values()) {
+      // Already pruned at the top of the sweep; a block can still go while the claim loop above
+      // runs, so this stays as the guard for the rest of this pass.
       if (!claim.block.isConnected) {
         release(claim, false);
         continue;
@@ -185,7 +345,13 @@ export function claimInlineFences({ segments, render, scope }: InlineFenceOption
       // is still streaming is being re-scanned every frame regardless.
       if (rendered === claim.rendered && claim.code !== "" && claim.complete) continue;
       claim.rendered = rendered;
-      const segment = matchSegment(current, rendered);
+      // Same reservation as the claim loop, minus this claim's own segment: a block whose text is
+      // still the shared opening line matches an older card here too, and the newest block would
+      // be handed the oldest card's code on the very sweep that claimed it.
+      const segment = matchSegment(
+        current.filter((candidate) => candidate.code === claim.reserved || !taken.has(candidate.code)),
+        rendered,
+      );
       // The snapshot is authoritative while it still describes this block: mid-stream its
       // code runs ahead of what markdown has painted. Once it stops describing it — an
       // older page dropped out of the loaded window — the last good frame stands, because
@@ -202,10 +368,16 @@ export function claimInlineFences({ segments, render, scope }: InlineFenceOption
         continue;
       }
       const { code, complete } = segment;
+      // Follow the segment as it grows, or the reservation still names the prefix it was claimed on.
+      taken.delete(claim.reserved);
+      taken.add(code);
+      claim.reserved = code;
       if (code === claim.code && complete === claim.complete) continue;
       claim.code = code;
       claim.complete = complete;
-      claim.root.render(render({ code, streaming: !complete }));
+      // `code` is captured, `segments()` is read at call time: that is exactly the report-time
+      // question, and it stays correct across the re-render that replaces this claim's own block.
+      claim.root.render(render({ code, streaming: !complete, last: () => isLastSegment(segments(), code) }));
       // The preview follows the SEGMENT, not the block: mid-stream the snapshot runs ahead of
       // what markdown has painted, so this is the newer text and the one the reader wants while
       // waiting. Dropped the moment the card paints.
@@ -217,6 +389,11 @@ export function claimInlineFences({ segments, render, scope }: InlineFenceOption
 
   return () => {
     stop();
+    // `disconnect` rather than unobserving each: the observer is going away with us, and a
+    // parked block that is never claimed would otherwise keep it alive through its target list.
+    nearby?.disconnect();
+    parked.clear();
+    woken.clear();
     for (const claim of claims.values()) release(claim, true);
   };
 }

package/src/client/runtime/register.ts

@@ -2,17 +2,28 @@
  * Everything generated code may import as a "local" module.
  *
  * The react family MUST be here: generated code shares the shell's single React
- * instance or hooks blow up with an invalid-hook-call. All five come from the
- * shell's platform table (see tsdown.config.ts), so registering them costs no
+ * instance or hooks blow up with an invalid-hook-call. Four of the five come from
+ * the shell's platform table (see platform.ts), so registering them costs no
  * bundle weight — it only republishes the instances we already received.
  *
- * We deliberately pre-register no component library. Anything else resolves
- * through the esm.sh fallback at compile time.
+ * `scheduler` is the fifth, and it is NOT a platform module (see platform.ts's own
+ * comment) — build.ts bundles a real copy of it into this file. It still has to be
+ * registered here, because `partial-react`'s `DEFAULT_ESM_SH_EXTERNALS` lists it
+ * alongside `react`/`react-dom` and asks esm.sh to leave it unbundled in every
+ * `@react-three/*`-shaped fallback fetch (`?...&external=react,react-dom,scheduler`).
+ * Those packages' compiled output therefore contains a literal `import ... from
+ * "scheduler"` that only resolves against the document import map this module
+ * installs — omitting the entry here is a silent `Failed to resolve module
+ * specifier "scheduler"` at the browser level, not a compile-time error.
+ *
+ * We otherwise pre-register no component library. Anything else resolves through
+ * the esm.sh fallback at compile time.
  */
 import * as React from "react";
 import * as ReactJsxRuntime from "react/jsx-runtime";
 import * as ReactDom from "react-dom";
 import * as ReactDomClient from "react-dom/client";
+import * as Scheduler from "scheduler";
 import { registerModules, registryImports } from "./registry.ts";
 
 let installed = false;
@@ -50,6 +61,7 @@ export function registerRuntimeModules(): void {
     "react/jsx-dev-runtime": ReactJsxRuntime,
     "react-dom": ReactDom,
     "react-dom/client": ReactDomClient,
+    scheduler: Scheduler,
   });
   installDocumentImportMap();
 }

package/src/client/runtime/report-error.ts

@@ -8,7 +8,7 @@
  * ends there: `MonacoEditor` appears 6 times in the records after that point and `no export named`
  * zero. The reader saw the answer on screen; the one party who could act on it did not.
  *
- * Three constraints, each of which this got wrong in an obvious first version:
+ * Four constraints, each of which this got wrong in an obvious first version:
  *
  * - **Only errors that survived.** `GenUISurface` already separates a mid-stream prefix failure
  *   and a retryable network blip from a real one — the `report` branch of its error action. That
@@ -22,34 +22,30 @@
  *   frame costs nothing; sending the model a message about a card that then worked costs it a
  *   turn spent fixing what is not broken. So the send is DEFERRED, and a paint cancels it.
  * - **Once per card, not once per frame.** A settled card that fails re-renders on every later
- *   frame of the transcript, and a message per render is a loop the user has to kill. Keyed on
- *   the message text.
- * - **Announced as automatic.** The model is about to read a user-role message it was not sent.
- *   Saying where it came from is what stops it replying "sorry about that" to a person who typed
- *   nothing.
+ *   frame of the transcript, and a turn per render is a loop the user has to kill. Deduplication
+ *   lives HOST-side now (`CardFailures.set`), because this half is thrown away by every
+ *   navigation and a dedup set that resets on reload wakes the model about a card it already
+ *   knows. What stays here is the settling, which is about frames, not about turns.
+ * - **Recovery is reported too.** The report is state, not an event: a card that starts working
+ *   sends `null`, and the host drops it out of the model's context. As a chat message that was
+ *   impossible, which is why the old body had to carry a paragraph explaining that nobody had
+ *   typed it.
+ * - **Only the newest card counts.** An earlier card that cannot render stays in the transcript
+ *   and re-renders on every later frame, so it goes on failing for the rest of the session.
+ *   Measured on a real one: the model wrote a card importing `Github` from `lucide-react`
+ *   (removed upstream), was told, fixed it to `GitBranch` in its very next reply — and the
+ *   failure notice kept coming back from the message it had already superseded. There is nothing
+ *   the model can do with that; it cannot edit a reply it has sent. `isLastSegment` is the gate, on both the report and the retraction.
  */
-const sent = new Set<string>();
 
 /** Exported for the test: a fresh card in a fresh session should be able to report again. */
 export const forgetReportedErrors = () => {
-  sent.clear();
-  cardRendered();
+  cancelPendingReport();
+  outstanding = null;
 };
 
-export type ErrorReporter = (text: string) => void;
-
-/**
- * The message body. Kept short and factual: it is spent from the user's context window, and the
- * one thing the model needs is what failed and that nobody typed it.
- *
- * English, like the prompt and the skill it sits beside. This message is the only text this
- * plugin puts into the conversation, and writing it in Chinese did two things: it read as a
- * different voice from everything else the plugin says, and — because a card must be written in
- * the language the USER wrote in — it pushed the model toward answering a Spanish or French
- * speaker in the wrong language for the rest of the turn.
- */
-export const reportBody = (message: string, phase: string) =>
-  `[automatic] The card you just wrote did not render. It failed at the ${phase} step:\n\n${message}\n\nThis was sent by the renderer, not by the user — nobody typed it, so do not apologise or address it as a request. If the error names the correct usage (the available exports, for instance), fix the card and send it again. If it does not, look it up before you change anything, and answer in the language the user has been writing in.`;
+/** `null` means the card recovered. */
+export type ErrorReporter = (report: { message: string; phase: string } | null) => void;
 
 /**
  * How long an error must stand before the model hears about it. A streaming card recompiles many
@@ -58,22 +54,81 @@ export const reportBody = (message: string, phase: string) =>
  */
 const SETTLE_MS = 1000;
 
-let pending: ReturnType<typeof setTimeout> | null = null;
+/**
+ * The one report waiting out its settle window, and the card it belongs to.
+ *
+ * One slot, not one per card, because only one report can be outstanding host-side. But the slot
+ * being shared is what made the gate below dangerous: a superseded card re-compiles on every later
+ * frame — that is the premise of this whole file — and evicting the newest card's armed timer to
+ * install its own meant the newest card's report died when the superseded one was gated off. So
+ * eviction is now conditional on the incoming card actually being reportable.
+ */
+let pending: { timer: ReturnType<typeof setTimeout>; message: string } | null = null;
+/**
+ * Whether the host currently holds a failure for this surface.
+ *
+ * The report is state, so recovery has to be reported too — otherwise a card that failed once
+ * stays in the model's context for the rest of the session. Kept here rather than derived from
+ * `pending`, which is only the not-yet-sent window.
+ */
+let outstanding: ErrorReporter | null = null;
 
-/** Called when a surface paints. Cancels a report the very next frame made untrue. */
-export function cardRendered(): void {
+/** Drop a report the page is going away before it can deliver. NOT a recovery — nothing is fixed. */
+export function cancelPendingReport(): void {
   if (pending === null) return;
-  clearTimeout(pending);
+  clearTimeout(pending.timer);
   pending = null;
 }
 
-export function reportCardError(send: ErrorReporter | undefined, message: string, phase: string): void {
+/**
+ * Called when a surface paints. Cancels a report the very next frame made untrue.
+ *
+ * **`restored` is not a detail.** partial-react answers a render throw by re-mounting the LAST
+ * GOOD component (`runtime.ts:416-419`, whenever `preserve` is on — which is every inline card),
+ * and that re-mount paints, and painting used to cancel the report that the very same throw had
+ * just armed. So the one case the reporting exists for — a card that worked, then broke on an
+ * edit — showed the reader stale content and told the model nothing. A paint only means the card
+ * is fine when it is the NEW code that painted.
+ */
+/**
+ * @param current whether the painting card is the one the gate would let report. Defaults to
+ *   permissive for the canvas path, which shows one card at a time.
+ */
+export function cardRendered(restored = false, current: () => boolean = () => true): void {
+  if (restored) return;
+  cancelPendingReport();
+  // **A card may only retract its OWN failure.** The error path is gated on `isLastSegment`; without
+  // the same gate here the asymmetry is that a superseded card cannot report a failure but can
+  // still clear someone else's. That is reachable by scrolling: an old card enters the
+  // IntersectionObserver margin, gets claimed, compiles and paints, and the model's context is
+  // told nothing is broken while the newest card is still a red panel — and it cannot re-report,
+  // because `reportStranded`'s `reportedFor` guard already fired for that code.
+  if (!current()) return;
+  // A card that is working again must be taken OUT of the model's context, or it reads about a
+  // failure that no longer exists on every step for the rest of the session.
+  const send = outstanding;
+  outstanding = null;
+  send?.(null);
+}
+
+export function reportCardError(send: ErrorReporter | undefined, message: string, phase: string, current: () => boolean = () => true): void {
   if (send === undefined) return;
-  if (sent.has(message)) return;
-  sent.add(message);
-  if (pending !== null) clearTimeout(pending);
-  pending = setTimeout(() => {
+  // **Asked twice, and the first time is not redundant.** A superseded card that will be gated off
+  // must not evict an armed report belonging to a card that will not be — otherwise the newest
+  // card, which IS broken, reports nothing: its timer is cleared, the evictor's own timer fires
+  // 1000ms later, `current()` is false, and the slot empties with nothing sent. The newest card
+  // cannot re-arm either, because `reportStranded`'s `reportedFor` guard suppresses a second
+  // report for the same code. Measured: with the old card re-failing every 300ms the newest
+  // card's reporter stayed empty indefinitely.
+  if (!current()) return;
+  if (pending !== null) clearTimeout(pending.timer);
+  // Asked AGAIN when the report is about to be SENT, because that is the question that matters:
+  // a card is the newest one in the transcript at the instant it throws and stops being so the
+  // moment the model's next reply lands — which is precisely the second this timer waits out.
+  pending = { timer: setTimeout(() => {
     pending = null;
-    send(reportBody(message, phase));
-  }, SETTLE_MS);
+    if (!current()) return;
+    outstanding = send;
+    send({ message, phase });
+  }, SETTLE_MS), message };
 }

package/src/client/runtime/state.ts

@@ -12,7 +12,19 @@
  */
 import * as React from "react";
 
-/** Namespaced so two cards picking the same obvious key ("todos") do not read each other's data. */
+/**
+ * Namespaced away from the host's own storage — and **not** from other cards, which this comment
+ * used to claim. Two cards that both pick `"todos"` share one entry, because the prefix is
+ * constant. The design note for this feature keys on the message id as well
+ * (`key + message id`), which would isolate them; we do not, and the measured consequence is
+ * small: across 36 uses in four waves, 35 keys were distinct — the model reaches for descriptive
+ * names (`plan-semanal:eaten`) rather than `todos`, and the one collision was the same question
+ * sampled twice, where sharing is arguably right.
+ *
+ * Adding the message id is not free either: it would make a card's state vanish when the card is
+ * re-delivered under a new id, which is the remount this hook exists to survive. Left as is
+ * deliberately, recorded so the next reader does not have to re-derive it.
+ */
 const scope = (key: string) => `dsh-genui:${key}`;
 
 function read<T>(key: string, initial: T | (() => T)): T {

package/src/client/runtime/uno-config.ts

@@ -39,8 +39,21 @@ export const unoConfig = (scope: string): UserConfig => ({
       // correct — a grid list has no use for UA markers — and dropping the reset put them back, so
       // a column of stray bullets sits OUTSIDE the card border at every width. Not something to
       // ask the model to write `list-none` for on every list.
+      //
+      // Headings and paragraphs are the same omission, found later and from the other end: a
+      // reader asking why there is ALWAYS a band of empty space above a card's title. Measured on
+      // the surface, the UA margins still standing were h1 21.4px, h2 19.9, h3 18.7, h4 21.3,
+      // p/blockquote/figure 16, pre 13 — while `ul` read 0, which is what proves the line above
+      // works and these tags were simply not in it. A card's first child is almost always a
+      // heading, so it pushes itself down by more than the card's own `p-3`, and `<p>` margins
+      // then fight whatever `gap-*` the layout uses. `important: scope` makes every utility
+      // `.ui4a-root :is(.mt-4)` at (0,2,0), which outranks these (0,1,1) rules — so a card that
+      // asks for a margin still gets one, and only the browser's uninvited ones go.
       getCSS: () => `${scope} *, ${scope} *::before, ${scope} *::after { box-sizing: border-box; }
       ${scope} ul, ${scope} ol { list-style: none; margin: 0; padding: 0; }
+      ${scope} h1, ${scope} h2, ${scope} h3, ${scope} h4, ${scope} h5, ${scope} h6,
+      ${scope} p, ${scope} blockquote, ${scope} figure, ${scope} figcaption,
+      ${scope} dl, ${scope} dd, ${scope} pre, ${scope} hr { margin: 0; }
       ${scope} button, ${scope} input, ${scope} select, ${scope} textarea {
         background: transparent; color: inherit; font: inherit; border: 0 solid; cursor: pointer;
       }

package/src/client/session.ts

@@ -9,13 +9,20 @@ import type { ClientContext } from "@deepseek-ai/dsh-client-runtime/client";
 
 export type ChatNodeView = { readonly kind: string; readonly data: unknown; readonly anchorSeq: number };
 
+type ChatSnapshotLike = { readonly nodes: { values(): Iterable<unknown> } };
+type UiConversationLike = { binding(source: unknown): { target(name: "chat"): { getSnapshot(): ChatSnapshotLike | undefined } } };
+
 /** The current session's chat nodes, or an empty list when no session is open. */
 export function chatNodes(ctx: ClientContext): readonly ChatNodeView[] {
   const sessionId = ctx.sessions.list.getSnapshot().current;
   if (sessionId === undefined) return [];
-  const snapshot = ctx.sessions.binding(sessionId)?.session.getSnapshot();
-  if (snapshot === undefined) return [];
-  return [...snapshot.chat.nodes.values()] as readonly ChatNodeView[];
+  const binding = ctx.sessions.binding(sessionId);
+  if (binding === undefined) return [];
+  // A static inject would disable older hosts, so feature-detect the 0.1.2 service per sweep.
+  const uiConversation = ctx.get("uiConversation") as UiConversationLike | undefined;
+  const chat = uiConversation === undefined ? (binding.session.getSnapshot() as unknown as { readonly chat?: ChatSnapshotLike } | undefined)?.chat : uiConversation.binding(binding).target("chat").getSnapshot();
+  if (chat === undefined) return [];
+  return [...chat.nodes.values()] as readonly ChatNodeView[];
 }
 
 /**

package/src/contract-assets.ts

@@ -44,3 +44,14 @@ export const EXEC_PATH = "/dsh-generative-ui/exec";
  * re-opening from here what the host closed for its own tools is not ours to do.
  */
 export const WEB_SEARCH_PATH = "/dsh-generative-ui/web-search";
+
+/**
+ * A card's surviving failure, reported by the browser half: `?session=<id>`, POST
+ * `{message, phase}` to set it and `{}` to clear it.
+ *
+ * The detail does NOT come back as a chat message. It becomes a runtime-context snapshot
+ * (`ui4a:card-failure`), which is re-evaluated per assembly and superseded by the next one, so a
+ * card that gets fixed stops being mentioned instead of leaving a stale complaint in history. The
+ * route only carries the state; `wakeAgent` is what asks the model to look at it.
+ */
+export const CARD_ERROR_PATH = "/dsh-generative-ui/card-error";