@ai-matrx/chat 0.5.3 → 0.5.5

package/dist/agents/components/shared/AgentHeaderMobile.js

@@ -8,7 +8,7 @@ import { selectAgentIsDirty } from "../../redux/agent-definition/selectors.js";
 import {
   TapTargetButtonForGroup,
   TapTargetButtonGroup
-} from "@ai-matrx/tap-target";
+} from "@ai-matrx/design-system/tap-target";
 import { AgentListDropdown } from "@ai-matrx/agents/catalog/react";
 import {
   AlertDialog,

package/dist/agents/components/shared/AgentNewRunButton.js

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { useRouter, usePathname, useSearchParams } from "../../../host/navigation.js";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks.js";
 import { startNewConversation } from "../../redux/execution-system/thunks/create-instance.thunk.js";
-import { PlusTapButton } from "@ai-matrx/tap-target/buttons";
+import { PlusTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 import { selectFocusedConversation } from "../../redux/execution-system/conversation-focus/conversation-focus.selectors.js";
 import { pushAddressWithoutNavigating } from "@ai-matrx/rich-content/utils/addressWithoutNavigating";
 function AgentNewRunButton({ surfaceKey }) {

package/dist/agents/components/shared/assistant-message-layout.d.ts

@@ -6,3 +6,24 @@
 export declare const ASSISTANT_MESSAGE_COLUMN_CLASS = "mx-auto w-full max-w-3xl";
 /** Chat's exact horizontal inset inside the canonical reading column. */
 export declare const ASSISTANT_MESSAGE_COLUMN_INSET_CLASS = "px-2";
+/**
+ * WIDE FIGURES — a figure (a rendered web page, a wide visual) is not prose.
+ * A transcript that opts in carries `WIDE_FIGURE_SCOPE_ATTRIBUTE` on its scroll
+ * area, which is a CSS size container; inside it an element with
+ * `WIDE_FIGURE_CLASS` breaks out of the reading column to the transcript's own
+ * width (`100cqi`), minus a 1rem gutter each side, centered on the column, and
+ * capped at `WIDE_FIGURE_MAX_WIDTH_PX`.
+ *
+ * 1100px: wide enough that the common 960–1080px layouts AI-written pages use
+ * (a 960px `main` plus its padding) render at full size; no wider, so a large
+ * monitor never stretches a figure into empty bands. `max(100%, …)` means a
+ * transcript no wider than the column (phones, split panes) leaves the figure
+ * exactly column-wide. Outside an opted-in transcript (notes, rich-document
+ * surfaces, a `width: "fill"` host, a start-aligned column) it does nothing.
+ *
+ * Classes are literal strings so the host's Tailwind scan of this package
+ * finds them; keep 1100px in sync with WIDE_FIGURE_MAX_WIDTH_PX.
+ */
+export declare const WIDE_FIGURE_MAX_WIDTH_PX = 1100;
+export declare const WIDE_FIGURE_SCOPE_ATTRIBUTE = "data-wide-figures";
+export declare const WIDE_FIGURE_CLASS = "[[data-wide-figures]_&]:w-[max(100%,min(1100px,100cqi_-_2rem))] [[data-wide-figures]_&]:ml-[calc((100%_-_max(100%,min(1100px,100cqi_-_2rem)))/2)]";

package/dist/agents/components/shared/assistant-message-layout.js

@@ -1,6 +1,12 @@
 const ASSISTANT_MESSAGE_COLUMN_CLASS = "mx-auto w-full max-w-3xl";
 const ASSISTANT_MESSAGE_COLUMN_INSET_CLASS = "px-2";
+const WIDE_FIGURE_MAX_WIDTH_PX = 1100;
+const WIDE_FIGURE_SCOPE_ATTRIBUTE = "data-wide-figures";
+const WIDE_FIGURE_CLASS = "[[data-wide-figures]_&]:w-[max(100%,min(1100px,100cqi_-_2rem))] [[data-wide-figures]_&]:ml-[calc((100%_-_max(100%,min(1100px,100cqi_-_2rem)))/2)]";
 export {
   ASSISTANT_MESSAGE_COLUMN_CLASS,
-  ASSISTANT_MESSAGE_COLUMN_INSET_CLASS
+  ASSISTANT_MESSAGE_COLUMN_INSET_CLASS,
+  WIDE_FIGURE_CLASS,
+  WIDE_FIGURE_MAX_WIDTH_PX,
+  WIDE_FIGURE_SCOPE_ATTRIBUTE
 };

package/dist/agents/components/working-document/WorkingDocumentVersionHistory.js

@@ -15,7 +15,7 @@ import { useWorkingDocumentVersions } from "./useWorkingDocumentVersions.js";
 import { useWorkingDocument } from "../../hooks/useWorkingDocument.js";
 import { setWorkingDocMainView } from "./workingDocumentViewStore.js";
 import { ErrorAlchemyMenu } from "../../../host/ui-slots.js";
-import { ChevronLeftTapButton, ChevronRightTapButton } from "@ai-matrx/tap-target/buttons";
+import { ChevronLeftTapButton, ChevronRightTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 function formatWhen(iso) {
   if (!iso) return "Now";
   try {

package/dist/agents/redux/execution-system/instance-resources/instance-resources.selectors.js

@@ -1,3 +1,4 @@
+import { renderedArtifactContextEntry } from "../../../utils/renderedArtifactContext.js";
 import { createSelector } from "@reduxjs/toolkit";
 import {
   isMessagePart,
@@ -445,6 +446,7 @@ function buildResourcePayload(resource) {
       };
     }
     case "processed_document":
+    case "rendered_artifact":
     case "source_ref":
     case "editor_error":
     case "editor_code_snippet":
@@ -522,6 +524,18 @@ const selectResourceContextPayload = (conversationId) => createSelector(
     if (!resources) return void 0;
     const payload = {};
     for (const resource of Object.values(resources)) {
+      if (resource.blockType === "rendered_artifact" && resource.status === "ready") {
+        const wire = renderedArtifactContextEntry(
+          resource.source,
+          resource.options.representation
+        );
+        if (!wire) {
+          if (resource.options.representation === "screenshot") continue;
+          invalidResource(resource, "rendered artifact reference is malformed");
+        }
+        payload[wire.key] = wire.reference;
+        continue;
+      }
       if (resource.blockType !== "processed_document" || resource.status !== "ready") {
         continue;
       }

package/dist/agents/types/instance.types.d.ts

@@ -354,21 +354,36 @@ export type ResourceStatus = "pending" | "resolving" | "ready" | "error";
  * code editor surfaces (errors, code snippets) where the persisted user
  * message must round-trip through the DB and re-render as chips on load.
  */
-export type ResourceBlockType = "text" | "image" | "audio" | "video" | "youtube_video" | "document" | "input_webpage" | "input_notes" | "input_task" | "input_table" | "input_list" | "input_data" | "input_agent" | "input_project" | "input_agent_app" | "input_transcript" | "input_transcript_session" | "input_workbook" | "input_document" | "processed_document" | "source_ref" | "editor_error" | "editor_code_snippet" | "input_remarks";
+export type ResourceBlockType = "text" | "image" | "audio" | "video" | "youtube_video" | "document" | "input_webpage" | "input_notes" | "input_task" | "input_table" | "input_list" | "input_data" | "input_agent" | "input_project" | "input_agent_app" | "input_transcript" | "input_transcript_session" | "input_workbook" | "input_document" | "processed_document" | "source_ref" | "editor_error" | "editor_code_snippet" | "input_remarks" | "rendered_artifact";
 /**
  * Which representation of a processed document is the PRIMARY one placed in the
  * agent's context. The agent reaches the other formats (raw text, per-page,
  * knowledge assets, PDF page images) on demand via the `document_content` tool.
  */
 export type DocumentRepresentation = "clean" | "raw" | "pdf";
+/**
+ * Representations of a rendered artifact (HTML page / canvas item). `code` is the
+ * document, `text` what a reader sees, `screenshot` the image as rendered (an
+ * explicit image part produced at attach time).
+ */
+export type RenderedArtifactRepresentation = "code" | "screenshot" | "text";
+/** The representation choices, per resource type — one union, keyed by type. */
+export interface RepresentationByResourceType {
+    processed_document: DocumentRepresentation;
+    rendered_artifact: RenderedArtifactRepresentation;
+}
+export type ResourceRepresentation = RepresentationByResourceType[keyof RepresentationByResourceType];
 export interface ResourceOptions {
     keepFresh: boolean;
     editable: boolean;
     convertToText: boolean;
     optionalContext: boolean;
     template?: "full" | "compact" | "minimal";
-    /** For `processed_document` resources: the chosen primary representation. */
-    representation?: DocumentRepresentation;
+    /**
+     * The chosen primary representation — its legal values depend on the
+     * resource type (`RepresentationByResourceType`).
+     */
+    representation?: ResourceRepresentation;
     /** Per-reference file-family promotion/suppression policy. */
     resourcePolicy?: VariableResourceContextConfig;
 }

package/dist/agents/utils/renderedArtifactContext.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Rendered-artifact context items (rendered-output standard, guarantee 3).
+ *
+ * An HTML page or HTML canvas item is attachable to a chat turn three ways:
+ *   - `code`       — the document, as a resource reference (canvas_item preferred),
+ *   - `text`       — what a reader sees, the server resolver's `text` representation,
+ *   - `screenshot` — the page as rendered, captured at ATTACH time by the host's
+ *                    capture port and attached as an explicit image part
+ *                    (`input_image`, the paste-image path). Never captured at send.
+ *
+ * `code` / `text` ride `request.context` as a resource reference
+ * (`selectResourceContextPayload`); they never become `user_input`.
+ */
+import { createResourceReference } from "../agent-context/resource-reference.js";
+import type { RenderedArtifactRepresentation, ResourceRepresentation } from "../types/instance.types.js";
+export declare const RENDERED_ARTIFACT_BLOCK_TYPE = "rendered_artifact";
+export type RenderedArtifactRecordType = "canvas_item" | "html_page";
+/** The `source` of a `rendered_artifact` resource. */
+export interface RenderedArtifactSource {
+    kind: "rendered_artifact";
+    record_type: RenderedArtifactRecordType;
+    record_id: string;
+    title: string;
+}
+export interface RenderedArtifactRepresentationOption {
+    value: RenderedArtifactRepresentation;
+    label: string;
+    hint: string;
+}
+/** The options a rendered artifact offers, data-driven so a new one is one entry. */
+export declare function availableRenderedArtifactRepresentations(): RenderedArtifactRepresentationOption[];
+export declare function isRenderedArtifactSource(source: unknown): source is RenderedArtifactSource;
+export declare function isRenderedArtifactRepresentation(value: unknown): value is RenderedArtifactRepresentation;
+/**
+ * The `request.context` entry for a code/text attachment, or null when the
+ * source is malformed or the choice is `screenshot` (an image part, not context).
+ */
+export declare function renderedArtifactContextEntry(source: unknown, representation: ResourceRepresentation | undefined): {
+    key: string;
+    reference: ReturnType<typeof createResourceReference>;
+} | null;

package/dist/agents/utils/renderedArtifactContext.js

@@ -0,0 +1,41 @@
+import { createResourceReference } from "../agent-context/resource-reference.js";
+const RENDERED_ARTIFACT_BLOCK_TYPE = "rendered_artifact";
+function availableRenderedArtifactRepresentations() {
+  return [
+    { value: "screenshot", label: "Screenshot", hint: "The page as you see it" },
+    { value: "code", label: "Code", hint: "The full HTML document" },
+    { value: "text", label: "Text", hint: "The words on the page" }
+  ];
+}
+function isRenderedArtifactSource(source) {
+  if (!source || typeof source !== "object") return false;
+  const s = source;
+  return s.kind === "rendered_artifact" && (s.record_type === "canvas_item" || s.record_type === "html_page") && typeof s.record_id === "string" && s.record_id.length > 0;
+}
+function isRenderedArtifactRepresentation(value) {
+  return value === "code" || value === "screenshot" || value === "text";
+}
+function serverRepresentation(recordType, representation) {
+  if (representation === "text") return "text";
+  return recordType === "html_page" ? "html" : "content";
+}
+function renderedArtifactContextEntry(source, representation) {
+  if (!isRenderedArtifactSource(source)) return null;
+  const rep = isRenderedArtifactRepresentation(
+    representation
+  ) ? representation : "code";
+  if (rep === "screenshot") return null;
+  return {
+    key: `resource_${source.record_type}_${source.record_id}_${rep}`,
+    reference: createResourceReference(source.record_type, source.record_id, {
+      representation: serverRepresentation(source.record_type, rep)
+    })
+  };
+}
+export {
+  RENDERED_ARTIFACT_BLOCK_TYPE,
+  availableRenderedArtifactRepresentations,
+  isRenderedArtifactRepresentation,
+  isRenderedArtifactSource,
+  renderedArtifactContextEntry
+};

package/dist/conversation/hooks/useDomCapturePrint.js

@@ -15,9 +15,12 @@ function useDomCapturePrint() {
     setProgress(0);
     setError(null);
     let releaseRenderAll = null;
+    let restoreFrames = null;
     try {
       const { renderAllDiagrams } = await import("@ai-matrx/rich-content/mermaid/lazy-draw");
       releaseRenderAll = (await renderAllDiagrams()).release;
+      const { framesToPictures } = await import("../utils/frame-print.js");
+      restoreFrames = (await framesToPictures(el)).restore;
       const [{ captureDocumentPdf }, { downloadFile }] = await Promise.all([
         import("@ai-matrx/alchemy/operate/capture"),
         import("@ai-matrx/kit/download")
@@ -36,6 +39,7 @@ function useDomCapturePrint() {
       const msg = err instanceof Error ? err.message : "PDF export failed";
       setError(msg);
     } finally {
+      restoreFrames?.();
       releaseRenderAll?.();
       setIsCapturing(false);
       setProgress(0);

package/dist/conversation/utils/frame-print.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Full Print's frame pre-pass (the `renderAllDiagrams` of live pages): every
+ * `<iframe>` inside the captured message is shown as its picture — from the
+ * host's frame capture port — or as an honest stand-in, for exactly as long
+ * as the capture runs. The frames are hidden, never removed (removing one
+ * reloads its page), and come back untouched when `restore` runs.
+ */
+export declare function framesToPictures(root: HTMLElement): Promise<{
+    restore: () => void;
+    frames: number;
+}>;

package/dist/conversation/utils/frame-print.js

@@ -0,0 +1,46 @@
+import { FRAME_PRINT_STAND_IN, getFramePrintCapture } from "../../host/frame-print.js";
+async function framesToPictures(root) {
+  const frames = [...root.querySelectorAll("iframe")];
+  if (frames.length === 0) return { restore: () => void 0, frames: 0 };
+  const capture = getFramePrintCapture();
+  const undo = [];
+  await Promise.all(
+    frames.map(async (frame) => {
+      let src = null;
+      if (capture) {
+        try {
+          src = await capture(frame);
+        } catch (error) {
+          console.error("[print] a page could not be captured for print", error);
+        }
+      }
+      const width = frame.clientWidth || frame.offsetWidth;
+      const height = frame.clientHeight || frame.offsetHeight;
+      let stand;
+      if (src) {
+        const img = document.createElement("img");
+        img.src = src;
+        img.alt = frame.title || "Web page";
+        img.style.cssText = `display:block;width:${width ? `${width}px` : "100%"};max-width:100%;height:auto`;
+        await img.decode().catch(() => void 0);
+        stand = img;
+      } else {
+        stand = document.createElement("div");
+        stand.textContent = FRAME_PRINT_STAND_IN;
+        stand.style.cssText = `display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:${width ? `${width}px` : "100%"};max-width:100%;min-height:${Math.min(Math.max(height, 96), 240)}px;padding:16px;border:1px dashed #94a3b8;border-radius:8px;color:#475569;font:italic 13px/1.4 system-ui,sans-serif;text-align:center;background:#f8fafc`;
+      }
+      stand.setAttribute("data-matrx-frame-print", "");
+      const display = frame.style.display;
+      frame.style.display = "none";
+      frame.after(stand);
+      undo.push(() => {
+        stand.remove();
+        frame.style.display = display;
+      });
+    })
+  );
+  return { restore: () => undo.forEach((fn) => fn()), frames: frames.length };
+}
+export {
+  framesToPictures
+};

package/dist/conversation/utils/markdown-print.d.ts

@@ -12,5 +12,13 @@
  *
  * Fix conversion or styling in the package (SAME-SESSION LAW), never here.
  */
-import type { PrintOutcome } from "@ai-matrx/print/core";
+import { type PrintOutcome } from "@ai-matrx/print/core";
+/**
+ * Prints a message: its prose through the article skin, and every embedded
+ * block through the SAME adapter its own print uses (`@ai-matrx/print`'s one
+ * block-printer registry, keyed by artifact type / `__kind`) — a quiz as its
+ * questions, a deck as its study sheet, a diagram as its drawing, an HTML page
+ * as its picture (a print window runs no author scripts; the page's own Print
+ * is the sharp one, and the person is told so).
+ */
 export declare function printMarkdownContent(markdown: string, title?: string): PrintOutcome | Promise<PrintOutcome>;

package/dist/conversation/utils/markdown-print.js

@@ -1,43 +1,72 @@
-import { printMarkdown, printMarkdownWhenReady } from "@ai-matrx/print/markdown";
+import { listPrintBlocks, printMarkdown, printMarkdownWhenReady } from "@ai-matrx/print/markdown";
+import { getBlockPrinter } from "@ai-matrx/print/core";
 import { notifyPrintOutcome } from "../../host/ui-slots.js";
-const HAS_MERMAID = /^\s*(?:`{3,}|~{3,})\s*mermaid\b/m;
+const FRAME_BLOCK_TYPES = /* @__PURE__ */ new Set(["html", "react", "iframe"]);
+function blockData(block) {
+  const text = block.body.trim();
+  if (text.startsWith("{") || text.startsWith("[")) {
+    try {
+      return JSON.parse(text);
+    } catch {
+      return block.body;
+    }
+  }
+  return block.body;
+}
+function adapterFor(block) {
+  const printer = getBlockPrinter(block.type);
+  return printer?.toPrintHtml ? printer : null;
+}
 function printMarkdownContent(markdown, title = "AI Response") {
-  if (!HAS_MERMAID.test(markdown)) {
+  const blocks = listPrintBlocks(markdown, "article");
+  const hasMermaid = blocks.some((block) => block.source === "fence" && block.type === "mermaid");
+  const adapted = blocks.filter((block) => adapterFor(block) !== null);
+  if (!hasMermaid && adapted.length === 0) {
     const outcome = printMarkdown(markdown, { skin: "article", title });
     notifyPrintOutcome(outcome);
     return outcome;
   }
-  return printMarkdownWhenReady(markdown, {
-    skin: "article",
-    title,
-    prepare: async () => {
-      let drawn;
-      try {
-        const { drawMermaidForPrint } = await import("@ai-matrx/rich-content/mermaid/print-render");
-        drawn = await drawMermaidForPrint(markdown);
-      } catch (error) {
-        console.error("[print] diagrams could not be drawn", error);
-        const { toast } = await import("../../host/notify.js");
-        toast.warning("Diagrams could not be drawn, so they print as source.");
-        return {};
-      }
-      const { pictures, failed } = drawn;
+  let drawing = null;
+  const drawAll = () => drawing ??= (async () => {
+    try {
+      const { drawMermaidForPrint } = await import("@ai-matrx/rich-content/mermaid/print-render");
+      const { pictures, failed } = await drawMermaidForPrint(markdown);
       if (failed > 0) {
         const { toast } = await import("../../host/notify.js");
         toast.warning(
           `${failed} diagram${failed === 1 ? "" : "s"} could not be drawn and print${failed === 1 ? "s" : ""} as source.`
         );
       }
-      return {
-        renderFence: (language, code) => {
-          if (language !== "mermaid") return null;
-          const svg = pictures.get(code);
-          return svg ? { svg, alt: "Diagram" } : null;
-        }
-      };
+      return pictures;
+    } catch (error) {
+      console.error("[print] diagrams could not be drawn", error);
+      const { toast } = await import("../../host/notify.js");
+      toast.warning("Diagrams could not be drawn, so they print as source.");
+      return null;
     }
-  }).then((outcome) => {
+  })();
+  return printMarkdownWhenReady(markdown, {
+    skin: "article",
+    title,
+    renderBlock: async (block) => {
+      if (block.source === "fence" && block.type === "mermaid") {
+        const svg = (await drawAll())?.get(block.body);
+        return svg ? { svg, alt: "Diagram" } : null;
+      }
+      const printer = adapterFor(block);
+      if (!printer?.toPrintHtml) return null;
+      return printer.toPrintHtml(blockData(block), {
+        type: block.type,
+        raw: block.body,
+        ...block.title ? { title: block.title } : {}
+      });
+    }
+  }).then(async (outcome) => {
     notifyPrintOutcome(outcome);
+    if (outcome === "opened" && adapted.some((block) => FRAME_BLOCK_TYPES.has(block.type))) {
+      const { toast } = await import("../../host/notify.js");
+      toast.info("Web pages print as a picture inside a message. For sharp text, print the page from its card.");
+    }
     return outcome;
   });
 }

package/dist/cx-chat/components/ChatMobileHeaderBar.js

@@ -3,7 +3,7 @@ import { AppLink } from "../../host/ui-slots.js";
 import {
   MenuTapButton,
   SquarePenTapButton
-} from "@ai-matrx/tap-target/buttons";
+} from "@ai-matrx/design-system/tap-target/buttons";
 import ChatMobileAgentName from "./ChatMobileAgentName.js";
 import ChatMobileAdminToggles from "./ChatMobileAdminToggles.js";
 function ChatMobileHeaderBar() {

package/dist/cx-chat/components/ChatPanelBackButton.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { ChevronLeftTapButton } from "@ai-matrx/tap-target/buttons";
+import { ChevronLeftTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 function ChatPanelBackButton() {
   function handleBack() {
     const panelCheckbox = document.getElementById(

package/dist/cx-chat/components/ChatSidebarClient.js

@@ -12,7 +12,7 @@ import {
   ChevronLeftTapButton,
   PanelLeftTapButton,
   PlusTapButton
-} from "@ai-matrx/tap-target/buttons";
+} from "@ai-matrx/design-system/tap-target/buttons";
 import { useAppDispatch, useAppSelector } from "../../store/hooks.js";
 import { selectAgentById } from "../../agents/redux/agent-definition/selectors.js";
 import { pushAppHref } from "../../host/ui-slots.js";

package/dist/cx-chat/components/user-input/ConversationInput.js

@@ -18,8 +18,8 @@ import {
   Layers
 } from "lucide-react";
 import { ResponseModeButtons, BackToStartButton } from "./InpuControlButtons.js";
-import { TapTargetButtonTransparent } from "@ai-matrx/tap-target";
-import { PlusTapButton } from "@ai-matrx/tap-target/buttons";
+import { TapTargetButtonTransparent } from "@ai-matrx/design-system/tap-target";
+import { PlusTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 import { InputActionButtons } from "./InputActionButtons.js";
 import { useAppSelector, useAppDispatch } from "../../../store/hooks.js";
 import { selectIsSuperAdminDebugger } from "../../../host/prefs.js";

package/dist/cx-chat/components/user-input/InputActionButtons.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2, Bug } from "lucide-react";
-import { TapTargetButtonSolid } from "@ai-matrx/tap-target";
-import { ArrowUpTapButton } from "@ai-matrx/tap-target/buttons";
+import { TapTargetButtonSolid } from "@ai-matrx/design-system/tap-target";
+import { ArrowUpTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 import { MicrophoneIconButton } from "../../../host/ui-slots.js";
 import { Button } from "@ai-matrx/design-system/controls";
 function InputActionButtons({

package/dist/host/frame-print.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The frame-capture port for message prints.
+ *
+ * A live page inside a message (an HTML page's `<iframe>`) cannot be copied
+ * by a DOM capture — html2canvas draws a cross-origin frame blank. Full Print
+ * asks this port for a picture of each frame before it rasterizes the
+ * message; the host plugs its capture engine in (the server's real browser
+ * for a published page). Without one, the frame prints an honest stand-in,
+ * never blank and never its code.
+ */
+/** A picture (data URL or image URL) of exactly what the frame shows, or null when none can be made. */
+export type FramePrintCapture = (frame: HTMLIFrameElement) => Promise<string | null>;
+/** What prints in a frame's place when no picture can be made. */
+export declare const FRAME_PRINT_STAND_IN = "Page image unavailable \u2014 print the page from its card.";
+/** Plugs (or, with null, removes) the host's frame capture engine. */
+export declare function setFramePrintCapture(capture: FramePrintCapture | null): void;
+export declare function getFramePrintCapture(): FramePrintCapture | null;

package/dist/host/frame-print.js

@@ -0,0 +1,13 @@
+const FRAME_PRINT_STAND_IN = "Page image unavailable \u2014 print the page from its card.";
+const PORT = /* @__PURE__ */ Symbol.for("ai-matrx.chat.frame-print-capture");
+function setFramePrintCapture(capture) {
+  globalThis[PORT] = capture;
+}
+function getFramePrintCapture() {
+  return globalThis[PORT] ?? null;
+}
+export {
+  FRAME_PRINT_STAND_IN,
+  getFramePrintCapture,
+  setFramePrintCapture
+};

package/dist/surfaces/components/chrome/SurfaceAgentsHeaderButton.js

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { SurfaceAgentsPanelImpl } from "../../../ui/lazy/SurfaceAgentsPanelImpl.js";
-import { TapTargetButtonTransparent } from "@ai-matrx/tap-target";
+import { TapTargetButtonTransparent } from "@ai-matrx/design-system/tap-target";
 import { INTELLIGENCE_ICON } from "@ai-matrx/icons/domain";
 import {
   Popover,

package/dist/tool-call-visualization/registry/registry.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { formatCount } from "@ai-matrx/kit/format";
+import { clientLazy } from "@ai-matrx/kit/client-lazy";
 import {
   CheckCircle,
   FileSearch,
@@ -37,39 +38,39 @@ import { withSurfaceWriteDiff } from "../surface-write/withSurfaceWriteDiff.js";
 import { DIFF_START_OPEN_KNOB, readSurfaceWrite } from "../surface-write/readSurfaceWrite.js";
 import { getSessionKnob } from "../../host/prefs.js";
 import { reportUnregisteredHostSlot } from "../../host/diagnostics.js";
-import { SearchInline } from "../renderers/search/SearchInline.js";
-import { SearchOverlay } from "../renderers/search/SearchOverlay.js";
-import { ScrapeInline } from "../renderers/scrape/ScrapeInline.js";
-import { ScrapeOverlay } from "../renderers/scrape/ScrapeOverlay.js";
+const SearchInline = clientLazy(() => import("../renderers/search/SearchInline.js").then((m) => ({ default: m.SearchInline })));
+const SearchOverlay = clientLazy(() => import("../renderers/search/SearchOverlay.js").then((m) => ({ default: m.SearchOverlay })));
+const ScrapeInline = clientLazy(() => import("../renderers/scrape/ScrapeInline.js").then((m) => ({ default: m.ScrapeInline })));
+const ScrapeOverlay = clientLazy(() => import("../renderers/scrape/ScrapeOverlay.js").then((m) => ({ default: m.ScrapeOverlay })));
 import { parseScrape } from "../renderers/scrape/parseScrape.js";
-import { WebInline } from "../renderers/web/WebInline.js";
-import { WebOverlay } from "../renderers/web/WebOverlay.js";
+const WebInline = clientLazy(() => import("../renderers/web/WebInline.js").then((m) => ({ default: m.WebInline })));
+const WebOverlay = clientLazy(() => import("../renderers/web/WebOverlay.js").then((m) => ({ default: m.WebOverlay })));
 import { resolveWebActionKind } from "../renderers/web/webAction.js";
-import { NewsInline } from "../renderers/news-api/NewsInline.js";
-import { NewsOverlay } from "../renderers/news-api/NewsOverlay.js";
-import { WorkbookInline } from "../renderers/workbook/WorkbookInline.js";
-import { WorkbookOverlay } from "../renderers/workbook/WorkbookOverlay.js";
-import { DictionaryInline } from "../renderers/dictionary/DictionaryInline.js";
-import { DictionaryOverlay } from "../renderers/dictionary/DictionaryOverlay.js";
-import { ResearchInline } from "../renderers/research/ResearchInline.js";
+const NewsInline = clientLazy(() => import("../renderers/news-api/NewsInline.js").then((m) => ({ default: m.NewsInline })));
+const NewsOverlay = clientLazy(() => import("../renderers/news-api/NewsOverlay.js").then((m) => ({ default: m.NewsOverlay })));
+const WorkbookInline = clientLazy(() => import("../renderers/workbook/WorkbookInline.js").then((m) => ({ default: m.WorkbookInline })));
+const WorkbookOverlay = clientLazy(() => import("../renderers/workbook/WorkbookOverlay.js").then((m) => ({ default: m.WorkbookOverlay })));
+const DictionaryInline = clientLazy(() => import("../renderers/dictionary/DictionaryInline.js").then((m) => ({ default: m.DictionaryInline })));
+const DictionaryOverlay = clientLazy(() => import("../renderers/dictionary/DictionaryOverlay.js").then((m) => ({ default: m.DictionaryOverlay })));
+const ResearchInline = clientLazy(() => import("../renderers/research/ResearchInline.js").then((m) => ({ default: m.ResearchInline })));
 import { researchOverlayTabs } from "../renderers/research/ResearchOverlay.js";
-import { RandomWheelInline } from "../renderers/random-wheel/RandomWheelInline.js";
-import { RecordsInline } from "../renderers/records/RecordsInline.js";
-import { CtxGetInline } from "../renderers/ctx/CtxGetInline.js";
-import { CtxBatchInline } from "../renderers/ctx/CtxBatchInline.js";
-import { CtxPatchInline } from "../renderers/ctx/CtxPatchInline.js";
-import { ContextActionInline } from "../renderers/ctx/ContextActionInline.js";
-import { SqlInline } from "../renderers/sql/SqlInline.js";
-import { FsInline } from "../renderers/fs/FsInline.js";
-import { ShellInline } from "../renderers/shell/ShellInline.js";
-import { SkillInline } from "../renderers/skill/SkillInline.js";
-import { AskInline } from "../renderers/ask/AskInline.js";
-import { AskPersonInline } from "../renderers/ask-person/AskPersonInline.js";
-import { CloudBrowserInline } from "../renderers/cloud-browser/CloudBrowserRunCard.js";
+const RandomWheelInline = clientLazy(() => import("../renderers/random-wheel/RandomWheelInline.js").then((m) => ({ default: m.RandomWheelInline })));
+const RecordsInline = clientLazy(() => import("../renderers/records/RecordsInline.js").then((m) => ({ default: m.RecordsInline })));
+const CtxGetInline = clientLazy(() => import("../renderers/ctx/CtxGetInline.js").then((m) => ({ default: m.CtxGetInline })));
+const CtxBatchInline = clientLazy(() => import("../renderers/ctx/CtxBatchInline.js").then((m) => ({ default: m.CtxBatchInline })));
+const CtxPatchInline = clientLazy(() => import("../renderers/ctx/CtxPatchInline.js").then((m) => ({ default: m.CtxPatchInline })));
+const ContextActionInline = clientLazy(() => import("../renderers/ctx/ContextActionInline.js").then((m) => ({ default: m.ContextActionInline })));
+const SqlInline = clientLazy(() => import("../renderers/sql/SqlInline.js").then((m) => ({ default: m.SqlInline })));
+const FsInline = clientLazy(() => import("../renderers/fs/FsInline.js").then((m) => ({ default: m.FsInline })));
+const ShellInline = clientLazy(() => import("../renderers/shell/ShellInline.js").then((m) => ({ default: m.ShellInline })));
+const SkillInline = clientLazy(() => import("../renderers/skill/SkillInline.js").then((m) => ({ default: m.SkillInline })));
+const AskInline = clientLazy(() => import("../renderers/ask/AskInline.js").then((m) => ({ default: m.AskInline })));
+const AskPersonInline = clientLazy(() => import("../renderers/ask-person/AskPersonInline.js").then((m) => ({ default: m.AskPersonInline })));
+const CloudBrowserInline = clientLazy(() => import("../renderers/cloud-browser/CloudBrowserRunCard.js").then((m) => ({ default: m.CloudBrowserInline })));
 import { cloudBrowserAction } from "../renderers/cloud-browser/cloudBrowserRun.js";
-import { DbSchemaInline } from "../renderers/sql/DbSchemaInline.js";
+const DbSchemaInline = clientLazy(() => import("../renderers/sql/DbSchemaInline.js").then((m) => ({ default: m.DbSchemaInline })));
 import { summarizeSql } from "../renderers/sql/summarizeSql.js";
-import { AgentCallInline } from "../renderers/agent-call/AgentCallInline.js";
+const AgentCallInline = clientLazy(() => import("../renderers/agent-call/AgentCallInline.js").then((m) => ({ default: m.AgentCallInline })));
 import { isImageGenerationAgentCall } from "../renderers/agent-call/agentCallKind.js";
 import { isCollaborationAgentCall } from "../renderers/agent-call/collab.js";
 import { collabHeaderSubtitle } from "../renderers/agent-call/collab-subtitle.js";

package/dist/voice-agent/components/VoiceAgentSurface.js

@@ -3,8 +3,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useRouter } from "../../host/navigation.js";
 import { Music2, Radio, Settings2 } from "lucide-react";
-import { TapTargetButton } from "@ai-matrx/tap-target";
-import { ChevronLeftTapButton } from "@ai-matrx/tap-target/buttons";
+import { TapTargetButton } from "@ai-matrx/design-system/tap-target";
+import { ChevronLeftTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 import { RouteHeader } from "../../host/chrome.js";
 import { toast } from "../../host/notify.js";
 import { useAppDispatch, useAppSelector } from "../../store/hooks.js";