@tangle-network/ui 11.11.2 → 11.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.11.2",
+  "version": "11.11.4",
   "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",
@@ -134,7 +139,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.8.2",
+    "@tangle-network/brand": "^1.9.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",
@@ -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/user-message.test.tsx

@@ -3,13 +3,19 @@ import { describe, expect, it } from "vitest"
 import { UserMessage } from "./user-message"
 
 describe("UserMessage", () => {
-  it("renders the text in a borderless muted bubble", () => {
+  it("renders the text in a bordered card that wraps in narrow panes", () => {
     const { container } = render(<UserMessage content="Run the tests." />)
     expect(screen.getByText("Run the tests.")).toBeInTheDocument()
     const bubble = container.querySelector(".rounded-2xl")
     expect(bubble).not.toBeNull()
-    expect(bubble!.className).toContain("bg-muted/50")
-    expect(bubble!.className).not.toMatch(/(^|\s)border(\s|$)/)
+    expect(bubble!.className).toContain("bg-card")
+    expect(bubble!.className).toContain("border-border")
+    expect(container.querySelector(".group")?.className).toContain(
+      "min-w-0",
+    )
+    expect(screen.getByText("Run the tests.").className).toContain(
+      "break-words",
+    )
   })
 
   it("keeps the timestamp beside the bubble as a hover-revealed label", () => {

package/src/chat/user-message.tsx

@@ -17,8 +17,8 @@ function formatTime(date: Date): string {
 }
 
 /**
- * The single user message bubble — a quiet, right-aligned fill on the muted
- * surface (no border, no loud fill, no uppercase label). The timestamp sits
+ * The single user message bubble — a quiet, right-aligned card with a subtle
+ * semantic border (no loud fill, no uppercase label). The timestamp sits
  * beside the bubble and appears on hover, so it costs no height. Used by both
  * the run/message list (session-model `parts`) and AgentTimeline (direct
  * `content`/`timestamp`).
@@ -36,8 +36,10 @@ export const UserMessage = memo(
 
     return (
       <div className="flex justify-end">
-        <div className="group flex max-w-[78%] flex-col items-end gap-2">
-          <div className="relative w-full rounded-2xl bg-muted/50 px-4 py-3">
+        <div className="group flex min-w-0 max-w-[78%] flex-col items-end gap-2">
+          <div
+            className="relative w-full min-w-0 rounded-2xl border border-border bg-card px-4 py-3"
+          >
             {timestamp ? (
               <span
                 data-user-message-time=""
@@ -46,7 +48,7 @@ export const UserMessage = memo(
                 {formatTime(timestamp)}
               </span>
             ) : null}
-            <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground">
+            <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground">
               {text}
             </div>
           </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 (