dsh-generative-ui 0.0.0 → 0.0.2

package/src/client/canvas/subpages.ts

@@ -0,0 +1,109 @@
+/**
+ * Rewrites a canvas's relative imports into blob URLs, before the source is compiled.
+ *
+ * `src/prompt.ts` tells the model that a canvas's sub-pages live in `<id>/` and are imported
+ * with relative paths, and the model does exactly that. But a card is imported as a blob URL,
+ * and `blob:` is not a hierarchical scheme — the browser rejects `./tarot/deck` with
+ * "Invalid relative url or base scheme isn't hierarchical" before any import map is consulted,
+ * so `setImportMap` cannot help. Measured: an import map keyed on the relative specifier fails
+ * identically, because resolution against the importer's URL happens first.
+ *
+ * Replacing the specifier with the child's own blob URL removes the question: an absolute URL
+ * has no base to resolve against. Children may import their siblings, which works for the same
+ * reason once they too have been rewritten.
+ */
+/**
+ * Matches the specifier of a static import or re-export; the second capture is the specifier.
+ *
+ * NOT global, and that is load-bearing. It was `/g`, shared by all three call sites, and `.test`
+ * on a global regex leaves `lastIndex` past the match it found — so `importsSibling` returning
+ * TRUE made the very next `matchAll` on the same string return ZERO. That is the order
+ * `CanvasPanel` calls them in: ask whether there are sibling imports, then go resolve them. The
+ * panel found none to resolve and the card rendered without its sub-pages.
+ *
+ * `matchAll` requires `/g`, so it gets its own copy; the shared one stays sticky-free and no
+ * caller has to remember to reset anything.
+ */
+const SPECIFIER = /(\bfrom\s*|\bimport\s*\(\s*)["'](\.[^"']*)["']/;
+const SPECIFIER_ALL = new RegExp(SPECIFIER, "g");
+
+/**
+ * Whether the card imports a sibling at all — the cheap question `CanvasPanel` asks before
+ * paying for a resolve pass. It had its own copy of the regex, identical but for the `g` flag;
+ * a widening applied to one and not the other means the panel never calls `inlineSubPages` and
+ * the card silently renders without its sub-pages. Sharing one pattern fixed that and introduced
+ * the `lastIndex` bug above — hence two derived regexes rather than two literals.
+ */
+export const importsSibling = (code: string) => SPECIFIER.test(code);
+
+/**
+ * @param read fetches one child by its specifier, returning its source and the real filename
+ * it was found under — the compiler picks its syntax from the extension, and a specifier is
+ * written without one, so passing the specifier makes a `.ts` file fail to parse.
+ * @param compile turns one child's TSX into JS. Children go through the same compiler as the
+ * card, so a sub-page may be TSX and may itself import a sibling.
+ * @param urls collects every blob created, so the caller can revoke them with the surface.
+ */
+export async function inlineSubPages(code: string, entry: string, read: (specifier: string, from: string) => Promise<{ source: string; filename: string } | null>, compile: (filename: string, source: string) => Promise<string>, urls: string[]): Promise<string> {
+  // Keyed by the RESOLVED filename, never by the specifier: `./types` written in two different
+  // child files is two different targets, and a specifier-keyed map silently serves the first
+  // one to both. Measured on a real split — the model gives every child a sibling import.
+  const sources = new Map<string, { source: string; filename: string; specifiers: Map<string, string> }>();
+  const missing = new Set<string>();
+
+  const specifiersIn = (source: string) => new Set([...source.matchAll(SPECIFIER_ALL)].map((match) => match[2]));
+
+  // Collected breadth-first, then compiled in one pass. Resolving a child's own imports
+  // *during* its fetch deadlocks on a cycle — a imports b imports a, and each awaits the
+  // other's URL forever. Measured: it hung. Reading every reachable child first, and only
+  // then handing out URLs, has no such wait.
+  let frontier: { specifier: string; from: string }[] = [...specifiersIn(code)].map((specifier) => ({ specifier, from: entry }));
+  const entryTargets = new Map<string, string>();
+  while (frontier.length > 0) {
+    const bodies = await Promise.all(frontier.map(async (want) => [want, await read(want.specifier, want.from)] as const));
+    const next: { specifier: string; from: string }[] = [];
+    for (const [want, found] of bodies) {
+      const targets = want.from === entry ? entryTargets : sources.get(want.from)?.specifiers;
+      if (found === null) {
+        missing.add(want.specifier);
+        continue;
+      }
+      targets?.set(want.specifier, found.filename);
+      if (sources.has(found.filename)) continue;
+      sources.set(found.filename, { ...found, specifiers: new Map() });
+      for (const specifier of specifiersIn(found.source)) next.push({ specifier, from: found.filename });
+    }
+    frontier = next;
+  }
+
+  // A blob's contents are fixed at creation, so a child can only be minted once every sibling
+  // it imports already has a URL. Repeat until nothing moves: a cycle never becomes mintable
+  // and keeps its original specifiers, failing exactly as it does today rather than hanging.
+  const urlFor = new Map<string, string>();
+  for (const filename of sources.keys()) urlFor.set(filename, "");
+
+  // Rewrites through `SPECIFIER_ALL`, not `replaceAll`, so only an actual import position moves.
+  // A bare `replaceAll("./board")` also rewrites the string in `const label = "./board"` — the
+  // card then renders a blob URL as its label, or passes one where a path was meant. No corpus
+  // card does this today; the regex that finds the imports already knows the difference, so
+  // there is no reason to throw that away when putting them back.
+  const rewrite = (source: string, specifiers: Map<string, string>) =>
+    source.replace(SPECIFIER_ALL, (whole, lead: string, specifier: string) => {
+      const url = urlFor.get(specifiers.get(specifier) ?? "");
+      return url === undefined || url === "" ? whole : `${lead}${JSON.stringify(url)}`;
+    });
+
+  for (let progress = true; progress;) {
+    progress = false;
+    const ready = [...sources].filter(([filename, found]) => urlFor.get(filename) === "" && [...found.specifiers.values()].every((dep) => urlFor.get(dep) !== ""));
+    const built = await Promise.all(ready.map(async ([filename, found]) => [filename, await compile(filename, rewrite(found.source, found.specifiers))] as const));
+    for (const [filename, compiled] of built) {
+      const url = URL.createObjectURL(new Blob([compiled], { type: "text/javascript" }));
+      urlFor.set(filename, url);
+      urls.push(url);
+      progress = true;
+    }
+  }
+
+  return rewrite(code, entryTargets);
+}

package/src/client/canvas/useDismissable.ts

@@ -0,0 +1,37 @@
+/**
+ * Open/close state for a menu, closed by a click anywhere else.
+ *
+ * `pointerdown` on the document rather than a click handler on a backdrop: a backdrop
+ * element would sit over the canvas and swallow the first click into it.
+ */
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Closes on a pointerdown anywhere but `anchor`, while `open`. Returns its own disposer.
+ *
+ * Split out of the hook so the four things that matter are testable without a renderer: that it
+ * does not listen while closed, that an outside press closes, that a press inside the anchor
+ * does **not**, and that it unsubscribes. A `pointerdown` listener on the document rather than a
+ * backdrop element, because a backdrop would sit over the canvas and swallow the first click
+ * into it.
+ */
+export function dismissOnOutsidePointer(open: boolean, anchor: HTMLElement | null, close: () => void): (() => void) | undefined {
+  if (!open) return undefined;
+  const onPointerDown = (event: Event) => {
+    // The toggle button lives inside the anchor, so ignoring the anchor is what keeps a click on
+    // it from closing here and reopening in the button's own handler.
+    if (anchor?.contains(event.target as Node) === true) return;
+    close();
+  };
+  document.addEventListener("pointerdown", onPointerDown);
+  return () => document.removeEventListener("pointerdown", onPointerDown);
+}
+
+export function useDismissable() {
+  const [open, setOpen] = useState(false);
+  const anchor = useRef<HTMLDivElement>(null);
+
+  useEffect(() => dismissOnOutsidePointer(open, anchor.current, () => setOpen(false)), [open]);
+
+  return { open, setOpen, anchor };
+}

package/src/client/index.ts

@@ -0,0 +1,217 @@
+/**
+ * Browser half: renders ui4a TSX the model writes, inline in the transcript and in a
+ * canvas panel beside it.
+ * @module dsh-generative-ui/client
+ */
+import { createElement } from "react";
+import type { ClientContext } from "@deepseek-ai/dsh-client-runtime/client";
+import type {} from "@deepseek-ai/dsh-client-ui-layout/client";
+import type {} from "@deepseek-ai/dsh-client-ui-conversation/client";
+import { GenUISurface } from "./runtime/GenUISurface.tsx";
+import { cardRendered, reportCardError } from "./runtime/report-error.ts";
+import { disposeCompiler } from "./runtime/compiler.ts";
+import { dropSharedCompiler } from "./runtime/GenUISurface.tsx";
+import { disposeRegistry } from "./runtime/registry.ts";
+import { registerUi4aHost, releaseBindings, localImports } from "./runtime/bindings.ts";
+import { claimInlineFences } from "./runtime/inline-fence.ts";
+import { parseUi4aSegments, type Ui4aSegment } from "./runtime/segments.ts";
+import { warmCompiler } from "./runtime/compiler.ts";
+import { chatNodes, perNode, type ChatNodeView } from "./session.ts";
+import { mountCanvasHost } from "./canvas/index.ts";
+import { toolCallsOf, type CallBlock, type ToolCallView } from "./canvas/collect.ts";
+import { canvasIdOf } from "../contract.ts";
+
+export const inject = ["sessions"];
+
+/** Re-exported so `bun run smoke` can build the synthesized blob modules and parse them. */
+export { localImports };
+
+/** Assistant text blocks, whose fences are the inline sources. */
+type AssistantNodeData = { blocks?: readonly { kind: string; text?: string }[] };
+
+export function apply(ctx: ClientContext): void {
+  // Compiling anything pays a ~400 ms wasm init. Doing it now means the first fence the
+  // user actually sees does not, and an idle tab is the cheapest possible moment for it.
+  void warmCompiler();
+
+  /**
+   * Every ui4a fence in the current session's assistant prose, straight from the log.
+   *
+   * The host's markdown renderer withholds a fence's info string until the closing fence
+   * arrives, so the DOM cannot identify a half-written ui4a block. The raw text has the
+   * opening fence from its first token, which is what makes inline rendering streamable.
+   */
+  const segmentsOf = perNode(
+    (node) => `${node.anchorSeq}:${textOf(node).length}`,
+    (node) => parseUi4aSegments(textOf(node)),
+  );
+  const segments = (): readonly Ui4aSegment[] => segmentsOf(chatNodes(ctx)).flat();
+
+  /**
+   * Every tool call in the current session, in log order — the canvas source.
+   *
+   * `tool-call` nodes carry a lifecycle `root` (not the assistant's block list), and the
+   * root's `call.argsRaw` grows while the call streams, which is what makes a canvas
+   * render as it is written.
+   */
+  const callsOf = perNode(
+    (node) => `${node.anchorSeq}:${callsKeyOf(node)}`,
+    (node) => (node.kind === "tool-call" ? toolCallsOf(node.data) : []),
+  );
+  const calls = (): readonly ToolCallView[] => {
+    const nodes = chatNodes(ctx);
+    // Node iteration order is unspecified; log order decides which write wins.
+    return callsOf(nodes)
+      .map((calls, index) => ({ calls, seq: nodes[index]?.anchorSeq ?? 0 }))
+      .toSorted((a, b) => a.seq - b.seq)
+      .flatMap((entry) => entry.calls);
+  };
+
+  /** The current session's workspace, which canvas file reads resolve against. */
+  const cwd = (): string | undefined => {
+    const list = ctx.sessions.list.getSnapshot();
+    return list.current === undefined ? undefined : list.byId[list.current]?.cwd;
+  };
+
+  /**
+   * Identity of the open session, so a dismissed canvas stays dismissed only there.
+   * Returns the branded `SessionId` rather than a plain string: `sessions.scope()` needs it.
+   */
+  const currentSession = () => ctx.sessions.list.getSnapshot().current;
+  const sessionId = (): string => currentSession() ?? "";
+
+  // Revoking on teardown is safe: a blob module that was already imported keeps working after
+  // its URL is revoked (the module graph holds it), so this only reclaims URLs nothing can
+  // reach any more. Without it every HMR round leaks one per registered specifier.
+  ctx.effect(() => disposeRegistry, "dsh-generative-ui: blob module URLs");
+  // The wasm half of the same problem: ~16MB per instance, one per HMR round, and upstream
+  // offers no dispose — dropping the reference is all there is (see `disposeCompiler`).
+  ctx.effect(
+    () => () => {
+      disposeCompiler();
+      dropSharedCompiler();
+    },
+    "dsh-generative-ui: tsx wasm instance",
+  );
+  // What `$dsh/chat` calls into. A nested fiber, not a static inject: every name in
+  // `inject` is a hard dependency, and a profile without `conversation` would otherwise
+  // take the whole plugin down rather than just this one capability.
+  ctx.inject(["conversation"], (scoped) => {
+    scoped.effect(() => {
+      // `conversation` is scope-addressed: reading it off the plugin's own context sends
+      // into no session and rejects. The scope has to come from `sessions.scope(id)`, and
+      // resolved per call rather than once — the reader switches sessions under us.
+      //
+      // `send` rejects on business failures and the caller is a generated card that cannot
+      // handle it, so surface it rather than dropping it: a click that goes nowhere looks
+      // exactly like a click that was never wired up.
+      const release = registerUi4aHost({
+        cwd,
+        sessionId,
+        send: (text) => {
+          const id = currentSession();
+          const session = id === undefined ? undefined : scoped.sessions.scope(id);
+          if (session === undefined) return void console.error("[dsh-generative-ui] $dsh/chat: no session to send into");
+          // The scoped context is minted by the host and carries its own inject set, so our
+          // outer declaration does not reach it — reading `conversation` off it directly
+          // throws `cannot get property "conversation" without inject`. One more inject on
+          // that context is what makes the property readable.
+          session.inject(["conversation"], (addressed) => {
+            void addressed.conversation.send(text).catch((error: unknown) => console.error("[dsh-generative-ui] $dsh/chat send failed", error));
+          });
+        },
+      });
+      return () => {
+        release();
+        releaseBindings();
+      };
+    }, "dsh-generative-ui: $dsh host");
+  });
+  // A card that fails to compile used to be a red panel the reader saw and the model never did.
+  // `onError` fires only for a failure that survived settling and retries, so this is the real
+  // ones — see `report-error.ts` for why it is once per message and why it says it is automatic.
+  const sendToModel = (text: string) => {
+    const id = currentSession();
+    const session = id === undefined ? undefined : ctx.sessions.scope(id);
+    if (session === undefined) return;
+    session.inject(["conversation"], (addressed) => {
+      void addressed.conversation.send(text).catch((error: unknown) => console.error("[dsh-generative-ui] card error report failed", error));
+    });
+  };
+
+  // Mounted inside the effect, not beside it: `mountCanvasHost` reaches for MutationObserver
+  // straight away, and doing that during registration is exactly what smoke rejects.
+  let showCanvas: ((id: string) => void) | null = null;
+  ctx.effect(() => {
+    const host = mountCanvasHost({ calls, cwd, sessionId, onCardError: (message, phase) => reportCardError(sendToModel, message, phase), onCardRendered: cardRendered });
+    showCanvas = host.show;
+    return () => {
+      showCanvas = null;
+      host.dispose();
+    };
+  }, "dsh-generative-ui: canvas column");
+
+  // The transcript's file links and the "产物" chips call `workspaces.openPath`, which hands
+  // the path to the OS — so clicking a canvas the model just wrote opened it in an editor
+  // rather than in the panel three inches to the right. Wrapping the method routes canvases
+  // to the panel and forwards everything else untouched.
+  ctx.inject(["workspaces"], (scoped) => {
+    scoped.effect(() => {
+      const workspaces = scoped.workspaces as { openPath?: (path: string) => Promise<void> };
+      // Wrapping someone else's method is a bet on its shape. Losing that bet here would
+      // throw during registration and take the whole plugin down, so a host without it
+      // simply keeps its own behaviour.
+      if (typeof workspaces.openPath !== "function") return () => {};
+      const original = workspaces.openPath.bind(workspaces);
+      workspaces.openPath = async (path: string) => {
+        const id = canvasIdOf(path);
+        // No panel mounted (headless, or torn down): the OS opener is still the right answer.
+        if (id === null || showCanvas === null) return original(path);
+        showCanvas(id);
+      };
+      // Restore rather than delete: another plugin may have wrapped it after us, and
+      // deleting the own-property would expose theirs — or the prototype's — instead.
+      return () => {
+        workspaces.openPath = original;
+      };
+    }, "dsh-generative-ui: canvas links open the panel");
+  });
+  ctx.effect(
+    () =>
+      claimInlineFences({
+        segments,
+        render: ({ code, streaming }) => createElement(GenUISurface, { code, streaming, onError: (error, phase) => reportCardError(sendToModel, error.message, phase), onRendered: cardRendered }),
+      }),
+    "dsh-generative-ui: inline fences",
+  );
+}
+
+/** All assistant prose in one node, concatenated; empty for every other node kind. */
+export function textOf(node: ChatNodeView): string {
+  const blocks = (node.data as AssistantNodeData | undefined)?.blocks;
+  if (blocks === undefined) return "";
+  let text = "";
+  for (const block of blocks) if (block.kind === "text" && block.text !== undefined) text += block.text;
+  return text;
+}
+
+/**
+ * Cache key for a `tool-call` node: how far its arguments have streamed, plus which calls
+ * have settled. Read straight off the node rather than through `toolCallsOf`, so computing
+ * the key does not repeat the work the cache exists to avoid.
+ *
+ * The settled flags are part of the key, not a detail: a call's `argsRaw` is already
+ * complete when `tool-result` arrives, so a length-only key would never invalidate and the
+ * cached view would claim `streaming` forever — a canvas that never stops pulsing and an
+ * `edit` that never marks it stale.
+ */
+export function callsKeyOf(node: ChatNodeView): string {
+  const parts: string[] = [];
+  const walk = (block: CallBlock | undefined): void => {
+    if (block === undefined) return;
+    parts.push(`${(block.call?.argsRaw ?? block.argsRaw)?.length ?? 0}${block.kind === "tool-result" ? "!" : ""}`);
+    for (const child of block.subCalls ?? []) walk(child);
+  };
+  walk((node.data as { root?: CallBlock } | undefined)?.root);
+  return parts.join(",");
+}