@ai-matrx/chat 0.5.4 → 0.5.6

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/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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/chat",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "THE one AI Matrx person-to-agent chat system: the full chat (running agents, conversations, tool calls, streaming, context, surfaces, voice) as per-module subpaths @ai-matrx/chat/<domain>/<module> over a host contract (/host, /host/react) whose only required value is a db. One chat, one renderer: the old kernel entries (., /external-store, /matrx, /react, /tools, styles.css, tokens.css) are retired.",
   "type": "module",
   "license": "MIT",
@@ -166,26 +166,25 @@
     "server-only": "^0.0.1",
     "uuid": "^14.0.2",
     "zod": "^4.6.5",
-    "@ai-matrx/agents": "latest",
     "@ai-matrx/alchemy": "latest",
     "@ai-matrx/associations": "latest",
     "@ai-matrx/browser-audio": "latest",
+    "@ai-matrx/agents": "latest",
     "@ai-matrx/canvas": "latest",
     "@ai-matrx/content-ir": "latest",
     "@ai-matrx/content-ir-react": "latest",
     "@ai-matrx/data": "latest",
-    "@ai-matrx/design-system": "latest",
     "@ai-matrx/diff": "latest",
-    "@ai-matrx/kit": "latest",
+    "@ai-matrx/icons": "latest",
     "@ai-matrx/media": "latest",
     "@ai-matrx/print": "latest",
     "@ai-matrx/realtime": "latest",
     "@ai-matrx/records": "latest",
+    "@ai-matrx/records-ui": "latest",
     "@ai-matrx/rich-content": "latest",
     "@ai-matrx/rich-editor": "latest",
-    "@ai-matrx/tap-target": "latest",
-    "@ai-matrx/icons": "latest",
-    "@ai-matrx/records-ui": "latest"
+    "@ai-matrx/kit": "latest",
+    "@ai-matrx/design-system": "latest"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",