@tangle-network/ui 11.11.1 → 11.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.11.1",
+  "version": "11.11.3",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -47,6 +47,11 @@
       "import": "./dist/openui.js",
       "default": "./dist/openui.js"
     },
+    "./openui-schema": {
+      "types": "./dist/openui-schema.d.ts",
+      "import": "./dist/openui-schema.js",
+      "default": "./dist/openui-schema.js"
+    },
     "./files": {
       "types": "./dist/files.d.ts",
       "import": "./dist/files.js",
@@ -191,6 +196,7 @@
     "@types/react": "^19.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/turndown": "^5.0.6",
+    "ajv": "8.17.1",
     "nanostores": "^1.5.4",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
@@ -207,7 +213,8 @@
     "design-system"
   ],
   "scripts": {
-    "build": "tsdown && node ../../scripts/validate-dist.mjs",
+    "build": "node scripts/generate-openui-validators.mjs --check && tsdown && node ../../scripts/validate-dist.mjs && node scripts/probe-openui-worker.mjs",
+    "gen:openui-schema": "node scripts/generate-openui-validators.mjs",
     "dev": "tsdown --watch"
   }
 }

package/src/chat/agent-timeline.stories.tsx

@@ -450,6 +450,21 @@ export const StatusTones: Story = {
   },
 }
 
+export const ErrorArtifact: Story = {
+  args: {
+    items: [
+      {
+        id: 'artifact-error',
+        kind: 'artifact',
+        title: 'Build output',
+        description: 'The compiler stopped before writing the bundle.',
+        meta: 'Exit code 1',
+        tone: 'error',
+      },
+    ],
+  },
+}
+
 // ---------------------------------------------------------------------------
 // Full transcript through ChatContainer — the real consumer path. Tool titles
 // and descriptions come from `getToolDisplayMetadata`, so this story shows the

package/src/chat/agent-timeline.tsx

@@ -101,30 +101,35 @@ export interface AgentTimelineProps {
   collapseAfter?: number;
 }
 
-const TONE_STYLES: Record<AgentTimelineTone, { card: string; text: string; icon: typeof Info }> = {
+const TONE_STYLES: Record<AgentTimelineTone, { card: string; text: string; supportingText: string; icon: typeof Info }> = {
   default: {
     card: "border-border bg-card",
     text: "text-foreground",
+    supportingText: "text-muted-foreground",
     icon: CircleDot,
   },
   info: {
     card: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]",
     text: "text-[var(--surface-info-text)]",
+    supportingText: "text-[var(--surface-info-text)]",
     icon: Info,
   },
   success: {
     card: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]",
     text: "text-[var(--surface-success-text)]",
+    supportingText: "text-[var(--surface-success-text)]",
     icon: CheckCircle2,
   },
   warning: {
     card: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]",
     text: "text-[var(--surface-warning-text)]",
+    supportingText: "text-[var(--surface-warning-text)]",
     icon: AlertTriangle,
   },
   error: {
     card: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]",
     text: "text-[var(--surface-danger-text)]",
+    supportingText: "text-[var(--surface-danger-text)]",
     icon: AlertTriangle,
   },
 };
@@ -191,7 +196,7 @@ function StatusCard({ item }: { item: AgentTimelineStatusItem }) {
         <div className="min-w-0">
           <div className={cn("text-sm font-medium", tone.text)}>{item.label}</div>
           {item.detail && (
-            <div className="mt-0.5 text-sm text-muted-foreground">{item.detail}</div>
+            <div className={cn("mt-0.5 text-sm", tone.supportingText)}>{item.detail}</div>
           )}
         </div>
       </div>
@@ -208,12 +213,12 @@ function ArtifactCard({ item }: { item: AgentTimelineArtifactItem }) {
           {item.icon ?? <FileText className="h-4 w-4" />}
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-sm font-medium text-foreground">{item.title}</div>
+          <div className={cn("text-sm font-medium", tone.text)}>{item.title}</div>
           {item.description && (
-            <div className="mt-1 text-sm text-muted-foreground">{item.description}</div>
+            <div className={cn("mt-1 text-sm", tone.supportingText)}>{item.description}</div>
           )}
           {item.meta && (
-            <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+            <div className={cn("mt-2 flex flex-wrap items-center gap-2 text-xs", tone.supportingText)}>
               {item.meta}
             </div>
           )}

package/src/editor/document-editor-pane.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { type ReactNode, useEffect, useMemo, useState } from "react";
+import type { UrlTransform } from "react-markdown";
 import { PencilLine, Save, Users, Wifi, WifiOff } from "lucide-react";
 import { Markdown } from "../markdown/markdown";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/tabs";
@@ -36,6 +37,8 @@ export interface DocumentEditorPaneProps
   tabs?: ArtifactPaneProps["tabs"];
   toolbar?: ReactNode;
   markdown?: string;
+  /** Transform Markdown links and images through the shared URL policy. */
+  urlTransform?: UrlTransform;
   mode?: DocumentEditorMode;
   defaultMode?: DocumentEditorMode;
   onModeChange?: (mode: DocumentEditorMode) => void;
@@ -188,6 +191,7 @@ export function DocumentEditorPane({
   tabs,
   toolbar,
   markdown = "",
+  urlTransform,
   mode,
   defaultMode = "preview",
   onModeChange,
@@ -300,7 +304,7 @@ export function DocumentEditorPane({
         previewClassName,
       )}
     >
-      <Markdown>{draft}</Markdown>
+      <Markdown urlTransform={urlTransform}>{draft}</Markdown>
     </div>
   );
 

package/src/files/file-artifact-pane.test.tsx

@@ -113,6 +113,47 @@ describe("FileArtifactPane previews", () => {
     expect(container.querySelector("strong")).toHaveTextContent("bold");
   });
 
+  it("forwards Markdown URL transforms to file and rich editor previews", async () => {
+    const urlTransform = vi.fn((url: string, key: string) => (
+      key === "href" && url === "sibling.md"
+        ? "/app/ws-1/vault?file=docs%2Fsibling.md"
+        : url
+    ));
+    const readOnly = render(
+      <FileArtifactPane
+        filename="README.md"
+        content={"[Sibling](sibling.md)"}
+        urlTransform={urlTransform}
+      />,
+    );
+
+    expect(screen.getByRole("link", { name: "Sibling" })).toHaveAttribute(
+      "href",
+      "/app/ws-1/vault?file=docs%2Fsibling.md",
+    );
+    readOnly.unmount();
+
+    render(
+      <FileArtifactPane
+        path="docs/README.md"
+        filename="README.md"
+        content={"[Sibling](sibling.md)"}
+        urlTransform={urlTransform}
+        editor={{ enabled: true, defaultMode: "preview" }}
+      />,
+    );
+
+    expect(await screen.findByRole("link", { name: "Sibling" })).toHaveAttribute(
+      "href",
+      "/app/ws-1/vault?file=docs%2Fsibling.md",
+    );
+    expect(urlTransform).toHaveBeenCalledWith(
+      "sibling.md",
+      "href",
+      expect.objectContaining({ tagName: "a" }),
+    );
+  });
+
   it("renders a binary file with no download link as one muted sentence", () => {
     const onDownload = vi.fn();
     const withDownload = render(

package/src/files/file-artifact-pane.tsx

@@ -64,6 +64,7 @@ export function FileArtifactPane({
   size,
   onClose,
   onDownload,
+  urlTransform,
   path,
   tabs = [],
   activeTabId,
@@ -154,6 +155,7 @@ export function FileArtifactPane({
           headerClassName={headerClassName}
           hideTitleBlock={hideTitleBlock}
           markdown={content ?? ""}
+          urlTransform={urlTransform}
           mode={editor.mode}
           defaultMode={editor.defaultMode}
           onModeChange={editor.onModeChange}
@@ -193,6 +195,7 @@ export function FileArtifactPane({
         blobUrl={blobUrl}
         mimeType={mimeType}
         size={size}
+        urlTransform={urlTransform}
         onDownload={onDownload}
         hideHeader={true}
       />

package/src/files/file-preview.tsx

@@ -22,6 +22,7 @@ import {
   X,
   type LucideIcon,
 } from "lucide-react";
+import type { UrlTransform } from "react-markdown";
 import { focusRingInset } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { Button } from "../primitives/button";
@@ -44,6 +45,8 @@ export interface FilePreviewProps {
   mimeType?: string;
   /** Size in bytes; download cards show it when known. */
   size?: number;
+  /** Transform Markdown links and images through the shared URL policy. */
+  urlTransform?: UrlTransform;
   onClose?: () => void;
   onDownload?: () => void;
   hideHeader?: boolean;
@@ -301,10 +304,16 @@ function TextPreview({ content }: { content: string }) {
   );
 }
 
-function MarkdownPreview({ content }: { content: string }) {
+function MarkdownPreview({
+  content,
+  urlTransform,
+}: {
+  content: string;
+  urlTransform?: UrlTransform;
+}) {
   return (
     <div className="rounded-[var(--radius-md)] border border-border bg-background p-5">
-      <Markdown>{content}</Markdown>
+      <Markdown urlTransform={urlTransform}>{content}</Markdown>
     </div>
   );
 }
@@ -358,6 +367,7 @@ function PreviewBody({
   content,
   blobUrl,
   size,
+  urlTransform,
   onDownload,
 }: {
   kind: FilePreviewKind;
@@ -365,6 +375,7 @@ function PreviewBody({
   content?: string;
   blobUrl?: string;
   size?: number;
+  urlTransform?: UrlTransform;
   onDownload?: () => void;
 }) {
   const hasText = typeof content === "string";
@@ -404,7 +415,7 @@ function PreviewBody({
       if (hasText) return <CodePreview content={content} filename={filename} kind={kind} />;
       return card(NO_INLINE_CONTENT);
     case "markdown":
-      if (hasText) return <MarkdownPreview content={content} />;
+      if (hasText) return <MarkdownPreview content={content} urlTransform={urlTransform} />;
       return card(NO_INLINE_CONTENT);
     case "text":
       if (hasText) return <TextPreview content={content} />;
@@ -423,6 +434,7 @@ export function FilePreview({
   blobUrl,
   mimeType,
   size,
+  urlTransform,
   onClose,
   onDownload,
   hideHeader = false,
@@ -473,6 +485,7 @@ export function FilePreview({
           content={content}
           blobUrl={blobUrl}
           size={size}
+          urlTransform={urlTransform}
           onDownload={onDownload}
         />
       </div>

package/src/openui/index.ts

@@ -18,3 +18,13 @@ export {
   type OpenUIGridNode,
   type OpenUICardNode,
 } from "./openui-artifact-renderer";
+
+export {
+  OPENUI_NODE_TYPES,
+  OPENUI_NODE_JSON_SCHEMA,
+  findUnsupportedOpenUINode,
+  validateOpenUIJsonNode,
+  validateOpenUIJsonArtifact,
+  type OpenUISchemaIssue,
+  type OpenUISchemaValidation,
+} from "./schema";

package/src/openui/openui-artifact-renderer.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { OpenUIArtifactRenderer } from "./openui-artifact-renderer";
+
+const meta: Meta<typeof OpenUIArtifactRenderer> = {
+  title: "OpenUI/ArtifactRenderer",
+  component: OpenUIArtifactRenderer,
+  decorators: [(Story) => <div className="mx-auto max-w-2xl p-6"><Story /></div>],
+};
+
+export default meta;
+type Story = StoryObj<typeof OpenUIArtifactRenderer>;
+
+export const NestedCard: Story = {
+  args: {
+    schema: {
+      type: "card",
+      title: "Release proof",
+      children: [
+        { type: "heading", text: "Result" },
+        { type: "stack", children: [
+          { type: "stat", label: "Checks", value: "3" },
+          { type: "text", text: "The saved result remains visible after reload." },
+        ] },
+      ],
+    },
+  },
+};
+
+export const UnsupportedSavedNode: Story = {
+  args: {
+    schema: {
+      type: "card",
+      children: [{ type: "section", children: [{ type: "text", text: "This content must not disappear silently." }] }],
+    } as never,
+  },
+};

package/src/openui/openui-artifact-renderer.tsx

@@ -13,6 +13,7 @@ import {
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table";
 import { CodeBlock } from "../primitives/code-block";
 import { Markdown } from "../markdown/markdown";
+import { findUnsupportedOpenUINode, type OPENUI_NODE_TYPES } from "./schema";
 
 export type OpenUIPrimitive = string | number | boolean | null | undefined;
 
@@ -148,21 +149,14 @@ export interface OpenUIArtifactRendererProps {
   className?: string;
 }
 
-const NODE_TYPES = new Set([
-  "heading",
-  "text",
-  "badge",
-  "stat",
-  "key_value",
-  "code",
-  "markdown",
-  "table",
-  "actions",
-  "separator",
-  "stack",
-  "grid",
-  "card",
-]);
+type RendererNodeTypesMatchSchema =
+  Exclude<OpenUIComponentNode["type"], (typeof OPENUI_NODE_TYPES)[number]> extends never
+    ? Exclude<(typeof OPENUI_NODE_TYPES)[number], OpenUIComponentNode["type"]> extends never
+      ? true
+      : never
+    : never;
+const rendererNodeTypesMatchSchema: RendererNodeTypesMatchSchema = true;
+void rendererNodeTypesMatchSchema;
 
 const GAP_STYLES = {
   sm: "gap-2",
@@ -200,16 +194,6 @@ function asArray<T>(value: unknown): T[] {
   return Array.isArray(value) ? (value as T[]) : [];
 }
 
-function isOpenUIComponentNode(value: unknown): value is OpenUIComponentNode {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    "type" in value &&
-    typeof (value as { type?: unknown }).type === "string" &&
-    NODE_TYPES.has((value as { type: string }).type)
-  );
-}
-
 function renderActions(actions: OpenUIAction[], onAction?: (action: OpenUIAction) => void) {
   if (actions.length === 0) return null;
 
@@ -394,7 +378,7 @@ function renderNode(node: OpenUIComponentNode, onAction?: (action: OpenUIAction)
                         column.align === "right" && "text-right tabular-nums",
                       )}
                     >
-                      {formatValue(row[column.key])}
+                      {formatValue(Object.prototype.hasOwnProperty.call(row, column.key) ? row[column.key] : undefined)}
                     </TableCell>
                   ))}
                 </TableRow>
@@ -510,7 +494,15 @@ export function OpenUIArtifactRenderer({
   onAction,
   className,
 }: OpenUIArtifactRendererProps) {
-  const nodes = (Array.isArray(schema) ? schema : [schema]).filter(isOpenUIComponentNode);
+  const issue = findUnsupportedOpenUINode(schema);
+  if (issue) {
+    return (
+      <div role="alert" className={cn("rounded-[var(--radius-xl)] border border-border bg-card p-5 text-sm text-foreground", className)}>
+        Cannot display this saved view. {issue.message} Path: {issue.path}.
+      </div>
+    );
+  }
+  const nodes = Array.isArray(schema) ? schema : [schema];
 
   if (nodes.length === 0) {
     return (