@tangle-network/sandbox-ui 0.44.0 → 0.46.0

package/dist/terminal.js

@@ -1,213 +1,9 @@
 import {
-  usePtySession
-} from "./chunk-77WVVJA4.js";
-
-// src/terminal/terminal-view.tsx
-import "@xterm/xterm/css/xterm.css";
-import { useEffect, useRef, useCallback, useMemo } from "react";
-import { Terminal } from "@xterm/xterm";
-import { FitAddon } from "@xterm/addon-fit";
-import { WebLinksAddon } from "@xterm/addon-web-links";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_TERMINAL_THEME = {
-  background: "#0c0c0e",
-  foreground: "#d4d4d8",
-  cursor: "#34d399",
-  cursorAccent: "#0c0c0e",
-  selectionBackground: "#7c3aed33",
-  selectionForeground: "#d4d4d8",
-  black: "#18181b",
-  red: "#ef4444",
-  green: "#34d399",
-  yellow: "#fbbf24",
-  blue: "#60a5fa",
-  magenta: "#a78bfa",
-  cyan: "#22d3ee",
-  white: "#d4d4d8",
-  brightBlack: "#52525b",
-  brightRed: "#f87171",
-  brightGreen: "#6ee7b7",
-  brightYellow: "#fde68a",
-  brightBlue: "#93c5fd",
-  brightMagenta: "#c4b5fd",
-  brightCyan: "#67e8f9",
-  brightWhite: "#fafafa"
-};
-function TerminalView({
-  apiUrl,
-  token,
-  theme,
-  title = "Terminal",
-  subtitle = "Connected to PTY session",
-  isActive = true,
-  connectionId,
-  fontSize = 13
-}) {
-  const resolvedTheme = useMemo(
-    () => ({ ...DEFAULT_TERMINAL_THEME, ...theme }),
-    [theme]
-  );
-  const resolvedFontSize = Number.isFinite(fontSize) && fontSize > 0 ? fontSize : 13;
-  const fontSizeRef = useRef(resolvedFontSize);
-  fontSizeRef.current = resolvedFontSize;
-  const containerRef = useRef(null);
-  const termRef = useRef(null);
-  const fitAddonRef = useRef(null);
-  const pendingWritesRef = useRef([]);
-  const writeRafRef = useRef(null);
-  const onData = useCallback((data) => {
-    if (!data) return;
-    pendingWritesRef.current.push(data);
-    if (writeRafRef.current !== null) return;
-    writeRafRef.current = requestAnimationFrame(() => {
-      writeRafRef.current = null;
-      const chunks = pendingWritesRef.current;
-      if (chunks.length === 0) return;
-      pendingWritesRef.current = [];
-      termRef.current?.write(chunks.length === 1 ? chunks[0] : chunks.join(""));
-    });
-  }, []);
-  const { isConnected, error, sendCommand, resizeTerminal, reconnect } = usePtySession({
-    apiUrl,
-    token,
-    onData,
-    connectionId
-  });
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const term = new Terminal({
-      theme: resolvedTheme,
-      fontFamily: '"JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, monospace',
-      fontSize: fontSizeRef.current,
-      lineHeight: 1.4,
-      cursorBlink: true,
-      cursorStyle: "bar",
-      scrollback: 5e3,
-      convertEol: true,
-      allowProposedApi: true
-    });
-    const fitAddon = new FitAddon();
-    const webLinksAddon = new WebLinksAddon();
-    term.loadAddon(fitAddon);
-    term.loadAddon(webLinksAddon);
-    term.open(containerRef.current);
-    let webglAddon = null;
-    let webglCancelled = false;
-    void (async () => {
-      try {
-        const mod = await import("@xterm/addon-webgl");
-        if (webglCancelled) return;
-        try {
-          const addon = new mod.WebglAddon();
-          addon.onContextLoss(() => {
-            webglAddon?.dispose();
-            webglAddon = null;
-          });
-          webglAddon = addon;
-          term.loadAddon(addon);
-        } catch {
-        }
-      } catch {
-      }
-    })();
-    requestAnimationFrame(() => {
-      fitAddon.fit();
-    });
-    termRef.current = term;
-    fitAddonRef.current = fitAddon;
-    term.onData((data) => {
-      if (data === "\f") {
-        termRef.current?.clear();
-        sendCommand("\r").catch(console.error);
-        return;
-      }
-      sendCommand(data).catch((err) => {
-        termRef.current?.writeln(
-          `\r
-\x1B[31m${err instanceof Error ? err.message : "Send failed"}\x1B[0m`
-        );
-      });
-    });
-    term.onResize(({ cols, rows }) => {
-      resizeTerminal(cols, rows).catch(console.error);
-    });
-    const ro = new ResizeObserver(() => {
-      requestAnimationFrame(() => {
-        fitAddon.fit();
-      });
-    });
-    ro.observe(containerRef.current);
-    return () => {
-      webglCancelled = true;
-      ro.disconnect();
-      if (writeRafRef.current !== null) {
-        cancelAnimationFrame(writeRafRef.current);
-        writeRafRef.current = null;
-      }
-      pendingWritesRef.current = [];
-      webglAddon?.dispose();
-      term.dispose();
-      termRef.current = null;
-      fitAddonRef.current = null;
-    };
-  }, [sendCommand, resizeTerminal, title, subtitle]);
-  useEffect(() => {
-    if (termRef.current) {
-      termRef.current.options.theme = resolvedTheme;
-    }
-  }, [resolvedTheme]);
-  useEffect(() => {
-    const term = termRef.current;
-    if (!term || term.options.fontSize === resolvedFontSize) return;
-    term.options.fontSize = resolvedFontSize;
-    const rafId = requestAnimationFrame(() => fitAddonRef.current?.fit());
-    return () => cancelAnimationFrame(rafId);
-  }, [resolvedFontSize]);
-  useEffect(() => {
-    if (isConnected && termRef.current) {
-      resizeTerminal(termRef.current.cols, termRef.current.rows).catch(console.error);
-      if (isActive) {
-        termRef.current.focus();
-      }
-    }
-  }, [isConnected, resizeTerminal, isActive]);
-  useEffect(() => {
-    if (isActive && termRef.current && fitAddonRef.current) {
-      setTimeout(() => {
-        fitAddonRef.current?.fit();
-        termRef.current?.focus();
-      }, 50);
-    }
-  }, [isActive]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "relative h-full w-full group cursor-text",
-      onClick: () => termRef.current?.focus(),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: containerRef,
-            className: "h-full w-full overflow-hidden relative z-0",
-            style: { backgroundColor: resolvedTheme.background }
-          }
-        ),
-        (!isConnected || error) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--surface-danger-text)] mb-3", children: error }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: reconnect,
-              className: "text-sm text-[var(--surface-success-text)] hover:opacity-80 underline cursor-pointer",
-              children: "Retry connection"
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx("p", { className: "text-[13px] text-muted-foreground", children: "Connecting to terminal..." }) }) })
-      ]
-    }
-  );
-}
+  DEFAULT_TERMINAL_THEME,
+  TerminalView
+} from "./chunk-VIREDUBF.js";
+import "./chunk-77WVVJA4.js";
+import "./chunk-U67V476Y.js";
 export {
   DEFAULT_TERMINAL_THEME,
   TerminalView

package/dist/tokens.css

@@ -2,8 +2,13 @@
 /* Brand: warm purple palette, #5B4ED4 primary */
 
 /* MD3 surface hierarchy */
+/* Dark is the default theme (`:root`/`[data-sandbox-ui]`). It also responds to
+ * the standard `[data-theme="dark"]` / `.dark` switch so any consumer can pin or
+ * toggle a theme without inventing an ad-hoc `data-sandbox-theme` name. */
 :root,
-[data-sandbox-ui] {
+[data-sandbox-ui],
+[data-theme="dark"],
+.dark {
   --md3-surface: #0a0a14;
   --md3-surface-dim: #07070d;
   --md3-surface-bright: #1b1a2c;
@@ -304,7 +309,13 @@
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 
-[data-sandbox-theme="vault"] {
+/* Light theme — reachable via the named `vault` theme or the standard
+ * `[data-theme="light"]` / `.light` switch. Both blocks are single-attribute/
+ * class selectors, and this one is later in source order, so when an element
+ * carries both `data-sandbox-ui` (dark) and `data-theme="light"`, light wins. */
+[data-sandbox-theme="vault"],
+[data-theme="light"],
+.light {
   /* Light theme — clean professional, warm purple accents */
 
   /* MD3 surface hierarchy */

package/dist/utils.js

@@ -11,6 +11,7 @@ import {
   timeAgo,
   truncateText
 } from "./chunk-TK46XFLM.js";
+import "./chunk-U67V476Y.js";
 export {
   TOOL_CATEGORY_ICONS,
   cn,

package/dist/workbench.d.ts

@@ -0,0 +1,227 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { CSSProperties } from 'react';
+import { RichFileTreeGitEntry, RichFileTreeGitStatus } from '@tangle-network/ui/files';
+import { E as ExposedPort } from './ports-list-DfG0VfPt.js';
+
+/** Which surface the artifact pane is currently showing. */
+type ArtifactView = "code" | "diff" | "preview" | "ports" | "terminal";
+/**
+ * A single artifact rendered by the pane. `content` is the working copy;
+ * when `baselineContent` differs from it, the Diff view becomes available
+ * and renders a word-level unified diff of baseline → content.
+ */
+interface SandboxArtifact {
+    id: string;
+    /** Canonical path inside the sandbox, e.g. `src/lib/retry.ts`. */
+    path: string;
+    /** Display name for the active file (usually the last path segment). */
+    filename: string;
+    /** Working-copy contents of the file. */
+    content: string;
+    /** Prior contents the working copy is diffed against. */
+    baselineContent?: string;
+    /** Explicit syntax language id (overrides extension inference). */
+    language?: string;
+    mimeType?: string;
+}
+/**
+ * Live PTY terminal binding. Maps straight onto `TerminalView` — both
+ * `apiUrl` and `token` are required to open a session against the sidecar.
+ */
+interface SandboxArtifactTerminal {
+    apiUrl: string;
+    token: string;
+    /** Stable id so the same PTY is restored across remounts. */
+    connectionId?: string;
+    title?: string;
+    subtitle?: string;
+}
+interface SandboxArtifactPaneProps {
+    /** The active artifact shown in the Code / Diff surfaces. */
+    artifact: SandboxArtifact;
+    /**
+     * Flat list of canonical paths for the file-tree rail in the Code view.
+     * Defaults to `[artifact.path]` when omitted (single-file tree).
+     */
+    paths?: ReadonlyArray<string>;
+    /** Per-path git-status decorations for the file tree. */
+    gitStatus?: ReadonlyArray<RichFileTreeGitEntry>;
+    /** Show the Code view's file-tree rail. Off for single-file embeds where the host owns navigation/tabs. */
+    showTree?: boolean;
+    /** Exposed ports; presence enables the Ports tab. */
+    ports?: ExposedPort[];
+    /** Live preview origin; presence enables the Preview tab. */
+    previewUrl?: string;
+    /** Live terminal binding; presence enables the Terminal tab. */
+    terminal?: SandboxArtifactTerminal;
+    /** Controlled active view. Pair with `onViewChange`. */
+    activeView?: ArtifactView;
+    /** Initial view when uncontrolled. Defaults to the first available view. */
+    defaultView?: ArtifactView;
+    onViewChange?: (view: ArtifactView) => void;
+    /** Fired when a different file is chosen in the tree (host swaps artifact). */
+    onFileSelect?: (path: string) => void;
+    /** Forwarded to the Ports view. */
+    onExposePort?: (port: number) => void;
+    onRemovePort?: (port: number) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+
+/**
+ * Blueprint-grade artifact workbench. Composes the sandbox-ui substrate
+ * (`RichFileTree`, `PortsList`, `TerminalView`, `@pierre/diffs`) behind a
+ * single pill-tab view switcher: Code · Diff · Preview · Ports · Terminal.
+ * Tabs appear only when their data is present (Diff requires a differing
+ * baseline; Preview a url; Ports a port list; Terminal a live binding), so the
+ * chrome never shows a dead surface.
+ */
+declare function SandboxArtifactPane({ artifact, paths, gitStatus, showTree, ports, previewUrl, terminal, activeView, defaultView, onViewChange, onFileSelect, onExposePort, onRemovePort, className, style, }: SandboxArtifactPaneProps): react_jsx_runtime.JSX.Element;
+
+interface PillTabItem<T extends string> {
+    value: T;
+    label: string;
+    icon?: React.ReactNode;
+}
+interface PillTabsProps<T extends string> {
+    items: ReadonlyArray<PillTabItem<T>>;
+    value: T;
+    onChange: (value: T) => void;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * Sliding-pill segmented control. Reimplemented from blueprint-agent's
+ * framer-motion `PillTabs` with a measured CSS transform instead — no motion
+ * dependency. A `ResizeObserver` re-measures on container resize and font
+ * load so the indicator tracks the active tab exactly. Token-swapped onto the
+ * sandbox-ui surface ladder.
+ */
+declare function PillTabs<T extends string>({ items, value, onChange, className, "aria-label": ariaLabel, }: PillTabsProps<T>): react_jsx_runtime.JSX.Element;
+
+interface DiffStats {
+    added: number;
+    removed: number;
+}
+/**
+ * Count added / removed lines between two file revisions.
+ *
+ * Ported from blueprint-agent's `computeDiffStats`: normalize CRLF, short-
+ * circuit on equality, then `diffLines` with `ignoreWhitespace` so pure
+ * reindentation does not inflate the counts. `newlineIsToken:false` keeps a
+ * line (not its trailing newline) as the unit, matching the +/- a reader
+ * counts by eye.
+ */
+declare function computeDiffStats(original: string, current: string): DiffStats;
+/**
+ * Build a single-file unified patch (baseline → current) for `@pierre/diffs`'
+ * `PatchDiff`. `context: Infinity` would print the whole file; the default
+ * 4-line context keeps hunks compact while preserving locality. Equal inputs
+ * yield an empty string so callers can treat "" as "no diff".
+ */
+declare function buildUnifiedPatch(filename: string, baseline: string, current: string): string;
+
+declare function GitStatusBadge({ status }: {
+    status: RichFileTreeGitStatus;
+}): react_jsx_runtime.JSX.Element;
+interface PanelHeaderProps {
+    filename: string;
+    gitStatus?: RichFileTreeGitStatus;
+    /** Added/removed line counts; rendered only when provided (Diff view). */
+    stats?: DiffStats;
+    /** Enables the copy-to-clipboard action when set. */
+    copyText?: string;
+    /** Extra content rendered at the right edge, before the copy button. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Thin bordered chrome bar above the artifact body — filename, git-status
+ * badge, optional diff counts, and a copy action. Ported in spirit from
+ * blueprint-agent's `PanelHeader` (min-h, hairline bottom border, dense
+ * horizontal rhythm), retoned to the sandbox-ui surface ladder.
+ */
+declare function PanelHeader({ filename, gitStatus, stats, copyText, children, className }: PanelHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface FileBreadcrumbProps {
+    /** Canonical path, e.g. `src/lib/retry.ts`. */
+    path: string;
+    className?: string;
+}
+/**
+ * Slim path breadcrumb for the code panel. Reimplemented (not ported) from
+ * blueprint-agent's `FileBreadcrumb` — that one nests a `FileTree` dropdown per
+ * segment and couples to the workbench store + framer-motion. Here the rail
+ * already owns navigation, so this is a read-only trail: caret-separated parent
+ * segments with a file-icon leaf.
+ */
+declare function FileBreadcrumb({ path, className }: FileBreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+interface CodeViewProps {
+    path: string;
+    filename: string;
+    content: string;
+    language?: string;
+    /** Flat list of paths for the rail; defaults to `[path]`. */
+    paths?: ReadonlyArray<string>;
+    gitStatus?: ReadonlyArray<RichFileTreeGitEntry>;
+    onFileSelect?: (path: string) => void;
+    /** Show the file-tree rail. Off for single-file embeds where the host owns navigation. */
+    showTree?: boolean;
+    className?: string;
+}
+/**
+ * Code surface: a fixed-width `RichFileTree` rail (with git-status
+ * decorations) beside a breadcrumb-topped, syntax-highlighted read-only file
+ * view. The rail owns navigation; selecting a path fans out to `onFileSelect`
+ * so the host can swap the active artifact.
+ */
+declare function CodeView({ path, filename, content, language, paths, gitStatus, onFileSelect, showTree, className, }: CodeViewProps): react_jsx_runtime.JSX.Element;
+
+interface DiffViewProps {
+    filename: string;
+    baseline: string;
+    current: string;
+    className?: string;
+}
+/**
+ * Word-level unified diff via `@pierre/diffs`' `PatchDiff`. The patch is built
+ * with jsdiff's `createTwoFilesPatch` (baseline → current); the renderer owns
+ * hunking, intra-line word diffing, gutters, and syntax highlighting.
+ */
+declare function DiffView({ filename, baseline, current, className }: DiffViewProps): react_jsx_runtime.JSX.Element;
+
+interface PreviewViewProps {
+    /** Origin to load in the preview iframe. */
+    url: string;
+    className?: string;
+}
+/**
+ * Live preview: a slim address bar (reload + open-in-new-tab) over a sandboxed
+ * iframe. The iframe is force-remounted by bumping `iframeKey` on reload — the
+ * same remount trick blueprint-agent's `Preview` uses. The readiness probe is
+ * intentionally a stub here: the iframe shows optimistically and a loading
+ * veil clears on `onLoad` (or a short fallback timer), which is the right
+ * behavior for a static origin without a probe service wired in.
+ */
+declare function PreviewView({ url, className }: PreviewViewProps): react_jsx_runtime.JSX.Element;
+
+/** Resolve a Prism language id from an explicit hint or the filename. */
+declare function resolveLanguage(filename: string, explicit?: string): string;
+declare const BRAND_PRISM_THEME: Record<string, CSSProperties>;
+interface CodeSurfaceProps {
+    code: string;
+    filename: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    className?: string;
+}
+/**
+ * Read-only, brand-themed code renderer. Wrapped in a scroll container so the
+ * highlighter itself never grows the layout; line numbers sit in a muted,
+ * tabular column.
+ */
+declare function CodeSurface({ code, filename, language, showLineNumbers, className, }: CodeSurfaceProps): react_jsx_runtime.JSX.Element;
+
+export { type ArtifactView, BRAND_PRISM_THEME, CodeSurface, type CodeSurfaceProps, CodeView, type CodeViewProps, type DiffStats, DiffView, type DiffViewProps, FileBreadcrumb, type FileBreadcrumbProps, GitStatusBadge, PanelHeader, type PanelHeaderProps, type PillTabItem, PillTabs, type PillTabsProps, PreviewView, type PreviewViewProps, type SandboxArtifact, SandboxArtifactPane, type SandboxArtifactPaneProps, type SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage };

package/dist/workbench.js

@@ -0,0 +1,40 @@
+import {
+  BRAND_PRISM_THEME,
+  CodeSurface,
+  CodeView,
+  DiffView,
+  FileBreadcrumb,
+  GitStatusBadge,
+  PanelHeader,
+  PillTabs,
+  PreviewView,
+  SandboxArtifactPane,
+  buildUnifiedPatch,
+  computeDiffStats,
+  resolveLanguage
+} from "./chunk-NXUSLH7H.js";
+import "./chunk-3J6FG3FJ.js";
+import "./chunk-PZ62T5PM.js";
+import "./chunk-OMUIPJQZ.js";
+import "./chunk-VIREDUBF.js";
+import "./chunk-77WVVJA4.js";
+import "./chunk-4ZZUMXPX.js";
+import "./chunk-BR2LMUAE.js";
+import "./chunk-LQHTCM56.js";
+import "./chunk-EI44GEQ5.js";
+import "./chunk-U67V476Y.js";
+export {
+  BRAND_PRISM_THEME,
+  CodeSurface,
+  CodeView,
+  DiffView,
+  FileBreadcrumb,
+  GitStatusBadge,
+  PanelHeader,
+  PillTabs,
+  PreviewView,
+  SandboxArtifactPane,
+  buildUnifiedPatch,
+  computeDiffStats,
+  resolveLanguage
+};

package/dist/workflows.js

@@ -2,6 +2,7 @@ import {
   buildWorkflowGraph
 } from "./chunk-SUC6ZJZW.js";
 import "./chunk-7JLB7UZ3.js";
+import "./chunk-U67V476Y.js";
 
 // src/workflows/WorkflowGraphLazy.tsx
 import {
@@ -26,7 +27,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-7YYGIBNV.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-6IKZYPST.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/dist/workspace.d.ts

@@ -100,7 +100,8 @@ interface StatusBannerProps {
 declare function StatusBanner({ type, message, detail, onDismiss, className }: StatusBannerProps): react_jsx_runtime.JSX.Element;
 
 /**
- * StatusBar — bottom bar with model selector, context badges, credits.
+ * StatusBar — compact bottom bar: connection state, file/artifact context
+ * badges, credits. The active model lives in the input box, not here.
  */
 interface ContextBadge {
     id: string;
@@ -108,7 +109,10 @@ interface ContextBadge {
     count?: number;
 }
 interface StatusBarProps {
+    /** @deprecated The model now lives in the input box; the status bar no longer
+     *  renders it. Retained so existing callers keep type-checking. */
     modelLabel?: string;
+    /** @deprecated See `modelLabel`. */
     onModelClick?: () => void;
     credits?: number;
     contextBadges?: ContextBadge[];
@@ -116,7 +120,7 @@ interface StatusBarProps {
     status?: "connected" | "connecting" | "disconnected" | "provisioning";
     className?: string;
 }
-declare function StatusBar({ modelLabel, onModelClick, credits, contextBadges, onRemoveBadge, status, className, }: StatusBarProps): react_jsx_runtime.JSX.Element;
+declare function StatusBar({ credits, contextBadges, onRemoveBadge, status, className, }: StatusBarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Terminal — read-only terminal output panel.

package/dist/workspace.js

@@ -19,8 +19,9 @@ import {
   dispatchSessionCreated,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-6NDOA4SB.js";
+} from "./chunk-2ISY4R72.js";
 import "./chunk-EI44GEQ5.js";
+import "./chunk-U67V476Y.js";
 export {
   AgentWorkbench,
   ApprovalQueue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -42,6 +42,10 @@
       "import": "./dist/workspace.js",
       "types": "./dist/workspace.d.ts"
     },
+    "./workbench": {
+      "import": "./dist/workbench.js",
+      "types": "./dist/workbench.d.ts"
+    },
     "./openui": {
       "import": "./dist/openui.js",
       "types": "./dist/openui.d.ts"
@@ -122,12 +126,12 @@
     "test:bridge": "pnpm build && vitest run src/__tests__/re-export-identity.test.ts"
   },
   "peerDependencies": {
-    "@tangle-network/brand": "^0.5.0",
+    "@tangle-network/agent-interface": ">=0.10.0 <1.0.0",
+    "@tangle-network/brand": "^0.6.0",
     "@tangle-network/ui": "^4.0.0",
+    "@xyflow/react": "^12.0.0",
     "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
-    "@tangle-network/agent-interface": ">=0.10.0 <1.0.0",
-    "@xyflow/react": "^12.0.0"
+    "react-dom": "^18 || ^19"
   },
   "peerDependenciesMeta": {
     "@xyflow/react": {
@@ -154,8 +158,10 @@
   },
   "dependencies": {
     "@lobehub/icons-static-svg": "^1.90.0",
+    "@pierre/diffs": "^1.2.11",
     "@radix-ui/react-dropdown-menu": "^2.1.0",
     "@radix-ui/react-select": "^2.1.0",
+    "diff": "^5.2.0",
     "lucide-react": "^0.469.0",
     "nanostores": "^1.2.0",
     "yaml": "^2.5.0"
@@ -168,7 +174,6 @@
   "devDependencies": {
     "@hocuspocus/provider": "^3.4.4",
     "@nanostores/react": "^1.1.0",
-    "@xyflow/react": "^12.11.0",
     "@pierre/trees": "1.0.0-beta.3",
     "@storybook/addon-essentials": "^8",
     "@storybook/addon-mcp": "^0.4.2",
@@ -176,7 +181,8 @@
     "@storybook/react-vite": "^8.6.18",
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
-    "@tangle-network/brand": "^0.5.0",
+    "@tangle-network/agent-interface": ">=0.10.0 <1.0.0",
+    "@tangle-network/brand": "^0.6.0",
     "@tangle-network/ui": "^4.1.0",
     "@tanstack/react-query": "^5.91.0",
     "@testing-library/dom": "^10.4.1",
@@ -193,6 +199,7 @@
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
+    "@xyflow/react": "^12.11.0",
     "jsdom": "^29.0.2",
     "marked": "^17.0.5",
     "postcss": "^8.5.8",
@@ -212,7 +219,6 @@
     "typescript": "^5.8.3",
     "vite": "^8.0.5",
     "vitest": "^4.1.3",
-    "yjs": "^13.6.30",
-    "@tangle-network/agent-interface": ">=0.10.0 <1.0.0"
+    "yjs": "^13.6.30"
   }
 }