@tangle-network/sandbox-ui 0.137.2 → 0.138.1

package/dist/{WorkflowGraph-DXmu60At.js → WorkflowGraph-DXuWXMw9.js}

@@ -1276,6 +1276,7 @@ function WorkflowNode({ id, data, sourcePosition, targetPosition }) {
 							background: STATUS_COLOR[state.status],
 							borderColor: "hsl(var(--card))"
 						},
+						role: "img",
 						"aria-label": STATUS_LABEL[state.status]
 					})
 				]

package/dist/{chat-Cw13rqn9.js → chat-BYTVLZQW.js}

@@ -4,7 +4,7 @@ import * as React$1 from "react";
 import { createPortal } from "react-dom";
 import { Bot, Brain, Check, ChevronDown, Lock, Pencil, Plus, Send, Sparkles, Square, Trash2, X } from "lucide-react";
 import { focusField, focusRing } from "@tangle-network/ui/utils";
-import { AgentTimeline, ChatContainer as ChatContainer$1, ChatMessage, ChatMessage as ChatMessage$1, MessageAuthor, MessageList, TRANSCRIPT_TEXT, ThinkingIndicator, UserMessage, isViewerMessage } from "@tangle-network/ui/chat";
+import { AgentTimeline as AgentTimeline$1, ChatContainer as ChatContainer$1, ChatMessage, ChatMessage as ChatMessage$1, MessageAuthor, MessageList, TRANSCRIPT_TEXT, ThinkingIndicator, UserMessage, isViewerMessage } from "@tangle-network/ui/chat";
 import { modelProvider, reasoningLadder, snapHarnessToModel } from "@tangle-network/agent-interface";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 // src/chat/reasoning-level-picker.tsx
@@ -862,4 +862,4 @@ function ArtifactAgentDock({ scope, open, onOpenChange, transport, defaultPrompt
 		]
 	});
 }
-export { MessageList as a, UserMessage as c, modelProvider as d, snapHarnessToModel as f, ReasoningLevelPicker as g, HARNESS_REASONING_OPTIONS as h, MessageAuthor as i, isViewerMessage as l, DEFAULT_REASONING_LEVEL_OPTIONS as m, ChatContainer$1 as n, TRANSCRIPT_TEXT as o, AgentProfilePicker as p, ChatMessage$1 as r, ThinkingIndicator as s, AgentTimeline as t, ArtifactAgentDock as u };
+export { MessageList as a, UserMessage as c, modelProvider as d, snapHarnessToModel as f, ReasoningLevelPicker as g, HARNESS_REASONING_OPTIONS as h, MessageAuthor as i, isViewerMessage as l, DEFAULT_REASONING_LEVEL_OPTIONS as m, ChatContainer$1 as n, TRANSCRIPT_TEXT as o, AgentProfilePicker as p, ChatMessage$1 as r, ThinkingIndicator as s, AgentTimeline$1 as t, ArtifactAgentDock as u };

package/dist/chat.d.ts

@@ -1,2 +1,2 @@
-import { A as ArtifactDockMessage, B as AgentProfilePickerProps, C as ThinkingIndicatorProps, D as ArtifactAgentDock, E as isViewerMessage, F as snapHarnessToModel, G as ReasoningLevelPicker, H as HARNESS_REASONING_OPTIONS, I as AgentProfileCapability, K as ReasoningLevelPickerProps, L as AgentProfileDraft, M as ArtifactKind, N as ArtifactScope, O as ArtifactAgentDockProps, P as modelProvider, R as AgentProfileOption, S as ThinkingIndicator, T as UserMessageProps, U as ReasoningLevel, V as DEFAULT_REASONING_LEVEL_OPTIONS, W as ReasoningLevelOption, _ as MessageAuthorProps, a as AgentTimelineMessageItem, b as MessageRole, c as AgentTimelineTone, d as ChatAuthor, f as ChatContainer, g as MessageAuthor, h as ChatMessageProps, i as AgentTimelineItem, j as ArtifactDockStreamEvent, k as ArtifactAgentDockTransport, l as AgentTimelineToolGroupItem, m as ChatMessage, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatContainerProps, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, w as UserMessage, x as TRANSCRIPT_TEXT, y as MessageListProps, z as AgentProfilePicker } from "./index-4KFqFK1f.js";
+import { A as ArtifactDockMessage, B as AgentProfilePickerProps, C as ThinkingIndicatorProps, D as ArtifactAgentDock, E as isViewerMessage, F as snapHarnessToModel, G as ReasoningLevelPicker, H as HARNESS_REASONING_OPTIONS, I as AgentProfileCapability, K as ReasoningLevelPickerProps, L as AgentProfileDraft, M as ArtifactKind, N as ArtifactScope, O as ArtifactAgentDockProps, P as modelProvider, R as AgentProfileOption, S as ThinkingIndicator, T as UserMessageProps, U as ReasoningLevel, V as DEFAULT_REASONING_LEVEL_OPTIONS, W as ReasoningLevelOption, _ as MessageAuthorProps, a as AgentTimelineMessageItem, b as MessageRole, c as AgentTimelineTone, d as ChatAuthor, f as ChatContainer, g as MessageAuthor, h as ChatMessageProps, i as AgentTimelineItem, j as ArtifactDockStreamEvent, k as ArtifactAgentDockTransport, l as AgentTimelineToolGroupItem, m as ChatMessage, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatContainerProps, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, w as UserMessage, x as TRANSCRIPT_TEXT, y as MessageListProps, z as AgentProfilePicker } from "./index-ucJHuuVZ.js";
 export { type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, TRANSCRIPT_TEXT, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps, isViewerMessage, modelProvider, snapHarnessToModel };

package/dist/chat.js

@@ -1 +1 @@
-export { p as AgentProfilePicker, t as AgentTimeline, u as ArtifactAgentDock, n as ChatContainer, r as ChatMessage, m as DEFAULT_REASONING_LEVEL_OPTIONS, h as HARNESS_REASONING_OPTIONS, i as MessageAuthor, a as MessageList, g as ReasoningLevelPicker, o as TRANSCRIPT_TEXT, s as ThinkingIndicator, c as UserMessage, l as isViewerMessage, d as modelProvider, f as snapHarnessToModel } from "./chat-Cw13rqn9.js";
+export { p as AgentProfilePicker, t as AgentTimeline, u as ArtifactAgentDock, n as ChatContainer, r as ChatMessage, m as DEFAULT_REASONING_LEVEL_OPTIONS, h as HARNESS_REASONING_OPTIONS, i as MessageAuthor, a as MessageList, g as ReasoningLevelPicker, o as TRANSCRIPT_TEXT, s as ThinkingIndicator, c as UserMessage, l as isViewerMessage, d as modelProvider, f as snapHarnessToModel } from "./chat-BYTVLZQW.js";

package/dist/diff-view-A0O0Z_SR.js

@@ -0,0 +1,287 @@
+import { t as cn } from "./utils-BER_bdgE.js";
+import { Button } from "@tangle-network/ui/primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { File, FileDiff, getSingularPatch } from "@pierre/diffs";
+import { createTwoFilesPatch, diffLines } from "diff";
+// src/workbench/syntax.tsx
+/** The one code theme: CodeSurface and DiffView share @pierre/diffs' Shiki highlighter and these themes. */
+const CODE_THEME = {
+	dark: "github-dark",
+	light: "github-light"
+};
+const CODE_FONT_FAMILY = "var(--font-mono, \"Geist Mono\", \"JetBrains Mono\", ui-monospace, monospace)";
+const CONTAINER_TAG = "diffs-container";
+/** Follow the host's Brand theme (`data-theme` or the `light` class on <html>) unless the caller fixes one. */
+function useHostThemeType(explicit) {
+	const read = () => {
+		if (typeof document === "undefined") return "dark";
+		const root = document.documentElement;
+		return root.getAttribute("data-theme") === "light" || root.classList.contains("light") ? "light" : "dark";
+	};
+	const [host, setHost] = React$1.useState(read);
+	React$1.useEffect(() => {
+		if (explicit) return;
+		setHost(read());
+		const observer = new MutationObserver(() => setHost(read()));
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class", "data-theme"]
+		});
+		return () => observer.disconnect();
+	}, [explicit]);
+	return explicit ?? host;
+}
+/**
+* Read-only code renderer on @pierre/diffs' `File`, the same Shiki highlighter and theme as DiffView. A new
+* custom element per render survives StrictMode remounts; the surrounding element owns scrolling.
+*/
+function CodeSurface({ code, filename, language, showLineNumbers = true, wrap = false, line, themeType, className }) {
+	const theme = useHostThemeType(themeType);
+	const hostRef = React$1.useRef(null);
+	const instanceRef = React$1.useRef(null);
+	const containerRef = React$1.useRef(null);
+	const latestTheme = React$1.useRef(theme);
+	const appliedTheme = React$1.useRef(theme);
+	const pendingLine = React$1.useRef(line);
+	React$1.useLayoutEffect(() => {
+		latestTheme.current = theme;
+	}, [theme]);
+	const reveal = React$1.useCallback(() => {
+		const target = pendingLine.current;
+		const element = target ? containerRef.current?.shadowRoot?.querySelector(`[data-line="${target}"]`) : null;
+		if (!target || !element) return;
+		pendingLine.current = void 0;
+		instanceRef.current?.setSelectedLines({
+			start: target,
+			end: target
+		});
+		element.scrollIntoView({ block: "center" });
+	}, []);
+	React$1.useLayoutEffect(() => {
+		const host = hostRef.current;
+		if (host == null) return;
+		const container = document.createElement(CONTAINER_TAG);
+		container.style.setProperty("--diffs-font-family", CODE_FONT_FAMILY);
+		container.style.display = "block";
+		container.style.minWidth = "0";
+		container.style.maxWidth = "100%";
+		host.appendChild(container);
+		containerRef.current = container;
+		const instance = new File({
+			theme: CODE_THEME,
+			themeType: latestTheme.current,
+			overflow: wrap ? "wrap" : "scroll",
+			disableFileHeader: true,
+			disableLineNumbers: !showLineNumbers,
+			onPostRender: () => reveal()
+		});
+		instanceRef.current = instance;
+		appliedTheme.current = latestTheme.current;
+		instance.render({
+			file: {
+				name: filename,
+				contents: code,
+				...language ? { lang: language } : {}
+			},
+			fileContainer: container
+		});
+		return () => {
+			if (instanceRef.current === instance) instanceRef.current = null;
+			instance.cleanUp();
+			container.remove();
+		};
+	}, [
+		code,
+		filename,
+		language,
+		showLineNumbers,
+		wrap,
+		reveal
+	]);
+	React$1.useLayoutEffect(() => {
+		if (appliedTheme.current === theme) return;
+		instanceRef.current?.setThemeType(theme);
+		appliedTheme.current = theme;
+	}, [theme]);
+	React$1.useLayoutEffect(() => {
+		pendingLine.current = line;
+		reveal();
+	}, [line, reveal]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: hostRef,
+		"data-code-surface": "",
+		role: "region",
+		"aria-label": filename,
+		tabIndex: 0,
+		className,
+		style: {
+			height: "100%",
+			minWidth: 0,
+			overflow: "auto",
+			fontSize: "var(--code-font-size, 0.8125rem)"
+		}
+	});
+}
+// src/workbench/diff-utils.ts
+/**
+* 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.
+*/
+function computeDiffStats(original, current) {
+	if (original === current) return {
+		added: 0,
+		removed: 0
+	};
+	const a = original.replace(/\r\n/g, "\n");
+	const b = current.replace(/\r\n/g, "\n");
+	if (a === b) return {
+		added: 0,
+		removed: 0
+	};
+	const changes = diffLines(a, b, {
+		newlineIsToken: false,
+		ignoreWhitespace: true
+	});
+	let added = 0;
+	let removed = 0;
+	for (const part of changes) {
+		if (!part.added && !part.removed) continue;
+		const count = part.count ?? part.value.split("\n").length;
+		if (part.added) added += count;
+		else if (part.removed) removed += count;
+	}
+	return {
+		added,
+		removed
+	};
+}
+/**
+* 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".
+*/
+function buildUnifiedPatch(filename, baseline, current) {
+	if (baseline === current) return "";
+	return createTwoFilesPatch(filename, filename, baseline, current, "", "");
+}
+// src/workbench/diff-view.tsx
+const DIFF_OPTIONS = {
+	diffStyle: "unified",
+	diffIndicators: "classic",
+	lineDiffType: "word",
+	hunkSeparators: "simple",
+	expandUnchanged: false,
+	theme: CODE_THEME,
+	stickyHeader: true
+};
+const DIFF_CONTAINER_TAG = "diffs-container";
+/**
+* Keep the maintained renderer for hunking, word diffs and highlighting. A new
+* custom element per effect survives StrictMode remounts without hydrating stale
+* shadow content. Wrapping is a renderer option, not a CSS patch into its shadow
+* root; the plain patch disclosure is the accessible, engine-independent view.
+*/
+function DiffView({ filename, baseline, current, showFileHeader = true, defaultWrap = true, themeType = "dark", className }) {
+	const patch = React$1.useMemo(() => buildUnifiedPatch(filename, baseline, current), [
+		filename,
+		baseline,
+		current
+	]);
+	const [wrap, setWrap] = React$1.useState(defaultWrap);
+	const hostRef = React$1.useRef(null);
+	const instanceRef = React$1.useRef(null);
+	const latestThemeType = React$1.useRef(themeType);
+	const appliedThemeType = React$1.useRef(themeType);
+	React$1.useLayoutEffect(() => {
+		latestThemeType.current = themeType;
+	}, [themeType]);
+	React$1.useLayoutEffect(() => {
+		const host = hostRef.current;
+		if (host == null || !patch) return;
+		const container = document.createElement(DIFF_CONTAINER_TAG);
+		container.style.setProperty("--diffs-font-family", CODE_FONT_FAMILY);
+		container.style.display = "block";
+		container.style.minWidth = "0";
+		container.style.maxWidth = "100%";
+		host.appendChild(container);
+		const instance = new FileDiff({
+			...DIFF_OPTIONS,
+			themeType: latestThemeType.current,
+			overflow: wrap ? "wrap" : "scroll",
+			disableFileHeader: !showFileHeader
+		}, void 0);
+		instanceRef.current = instance;
+		appliedThemeType.current = latestThemeType.current;
+		instance.hydrate({
+			fileDiff: getSingularPatch(patch),
+			fileContainer: container
+		});
+		return () => {
+			if (instanceRef.current === instance) instanceRef.current = null;
+			instance.cleanUp();
+			container.remove();
+		};
+	}, [
+		patch,
+		showFileHeader,
+		wrap
+	]);
+	React$1.useLayoutEffect(() => {
+		if (appliedThemeType.current === themeType) return;
+		instanceRef.current?.setThemeType(themeType);
+		appliedThemeType.current = themeType;
+	}, [themeType]);
+	if (!patch) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-full min-w-0 items-center justify-center bg-surface-container", className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: "No changes — baseline and working copy are identical."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-full min-h-0 min-w-0 max-w-full flex-col overflow-hidden bg-surface-container", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 flex-wrap items-center gap-2 border-b border-border px-3 py-2",
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					"aria-pressed": wrap,
+					onClick: () => setWrap((value) => !value),
+					children: "Wrap lines"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: hostRef,
+				"data-testid": "diff-view",
+				role: "region",
+				"aria-label": `Diff for ${filename}`,
+				tabIndex: 0,
+				className: "min-h-0 min-w-0 max-w-full flex-1 overflow-auto text-[13px]"
+			}),
+			/* @__PURE__ */ jsxs("details", {
+				className: "max-h-[40%] shrink-0 overflow-auto border-t border-border",
+				children: [/* @__PURE__ */ jsx("summary", {
+					className: "cursor-pointer px-3 py-2 text-sm",
+					children: "Read plain-text diff"
+				}), /* @__PURE__ */ jsx("pre", {
+					role: "region",
+					tabIndex: 0,
+					"aria-label": `Plain-text diff for ${filename}`,
+					className: "m-0 whitespace-pre-wrap p-3 font-mono text-xs leading-relaxed",
+					style: { overflowWrap: "anywhere" },
+					children: patch
+				})]
+			})
+		]
+	});
+}
+export { CodeSurface as a, CODE_THEME as i, buildUnifiedPatch as n, computeDiffStats as r, DiffView as t };

package/dist/diff-view-DDHWtR6X.d.ts

@@ -0,0 +1,21 @@
+import * as React$1 from "react";
+interface DiffViewProps {
+  filename: string;
+  baseline: string;
+  current: string;
+  /** Hide when the surrounding PanelHeader already identifies the file. */
+  showFileHeader?: boolean;
+  /** Start wrapped so narrow review panes never conceal the end of a line. */
+  defaultWrap?: boolean;
+  /** Match the host app's selected theme. Defaults to dark for existing consumers. */
+  themeType?: "light" | "dark";
+  className?: string;
+}
+/**
+ * Keep the maintained renderer for hunking, word diffs and highlighting. A new
+ * custom element per effect survives StrictMode remounts without hydrating stale
+ * shadow content. Wrapping is a renderer option, not a CSS patch into its shadow
+ * root; the plain patch disclosure is the accessible, engine-independent view.
+ */
+declare function DiffView({ filename, baseline, current, showFileHeader, defaultWrap, themeType, className }: DiffViewProps): React$1.JSX.Element;
+export { DiffViewProps as n, DiffView as t };

package/dist/globals.css

@@ -397,6 +397,9 @@
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -958,6 +961,9 @@
   .h-\[36rem\] {
     height: 36rem;
   }
+  .h-\[70vh\] {
+    height: 70vh;
+  }
   .h-\[72\%\] {
     height: 72%;
   }
@@ -1171,6 +1177,9 @@
   .min-h-\[66px\] {
     min-height: 66px;
   }
+  .min-h-\[70vh\] {
+    min-height: 70vh;
+  }
   .min-h-\[72px\] {
     min-height: 72px;
   }
@@ -1465,6 +1474,9 @@
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
   .max-w-72 {
     max-width: calc(var(--spacing) * 72);
   }
@@ -2103,6 +2115,9 @@
   .self-start {
     align-self: flex-start;
   }
+  .self-stretch {
+    align-self: stretch;
+  }
   .justify-self-start {
     justify-self: flex-start;
   }
@@ -2274,6 +2289,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
   .border-b-2 {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
@@ -2709,6 +2728,9 @@
   .bg-\[var\(--status-running\)\] {
     background-color: var(--status-running);
   }
+  .bg-\[var\(--status-running\,\#34c48c\)\] {
+    background-color: var(--status-running,#34c48c);
+  }
   .bg-\[var\(--surface-danger-bg\)\] {
     background-color: var(--surface-danger-bg);
   }
@@ -2940,6 +2962,12 @@
       background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 40%, transparent);
     }
   }
+  .bg-muted-foreground\/50 {
+    background-color: hsl(var(--muted-foreground));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 50%, transparent);
+    }
+  }
   .bg-muted\/10 {
     background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
@@ -4432,6 +4460,9 @@
       --tw-translate-x: calc(var(--spacing) * 0.5);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
+    .group-hover\:bg-primary:is(:where(.group):hover *) {
+      background-color: hsl(var(--primary));
+    }
     .group-hover\:bg-primary\/20:is(:where(.group):hover *) {
       background-color: hsl(var(--primary));
     }
@@ -4467,6 +4498,9 @@
       opacity: 100%;
     }
   }
+  .group-focus-visible\:bg-primary:is(:where(.group):focus-visible *) {
+    background-color: hsl(var(--primary));
+  }
   .group-focus-visible\:bg-primary\/30:is(:where(.group):focus-visible *) {
     background-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
@@ -4600,6 +4634,9 @@
         border-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
       }
     }
+    .hover\:border-border:hover {
+      border-color: hsl(var(--border));
+    }
     .hover\:border-destructive\/30:hover {
       border-color: hsl(var(--destructive));
     }
@@ -5111,6 +5148,9 @@
   .focus-visible\:text-foreground:focus-visible {
     color: hsl(var(--foreground));
   }
+  .focus-visible\:underline:focus-visible {
+    text-decoration-line: underline;
+  }
   .focus-visible\:opacity-100:focus-visible {
     opacity: 100%;
   }
@@ -6149,6 +6189,9 @@
   .\[\&\:not\(\:first-child\)\]\:pt-3:not(:first-child) {
     padding-top: calc(var(--spacing) * 3);
   }
+  .\[\&\>\*\]\:min-h-full > * {
+    min-height: 100%;
+  }
   .\[\&\>\*\]\:max-w-full > * {
     max-width: 100%;
   }

package/dist/index-C5h5T0nb.d.ts

@@ -0,0 +1,91 @@
+import { ReactNode } from "react";
+import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep, ExpandedToolDetail, ExpandedToolDetailProps, FeedSegment, InlineThinkingItem as InlineThinkingItem$1, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunPhase, RunPhaseList, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot, TaskList, TaskListItem, TaskListProps, TaskStatus, ToolCallData, ToolCallData as ToolCallData$1, ToolCallFeed, ToolCallFeedProps, ToolCallStatus, ToolCallType, parseToolEvent, showsTaskPriority, taskProgress, taskStatus } from "@tangle-network/ui/run";
+import { FlowWaterfallProps } from "@tangle-network/charts/react";
+import { FlowMarker, FlowSpan, FlowTrace } from "@tangle-network/charts";
+/** Agent and model spans show their lab/host mark; tool spans show their provider's mark. Unknown keeps the kind glyph. */
+declare function traceSpanMark(span: FlowSpan): ReactNode;
+type TraceWaterfallProps = FlowWaterfallProps;
+/**
+ * The run inspector: the agent timeline (`defaultView="agents"`) and the span waterfall over one clock, from
+ * `@tangle-network/charts`, with Sandbox UI's brand marks. Feed it `otlpFlowTrace(spans)` from the
+ * `traces convert` contract. Import `@tangle-network/charts/react/flow-waterfall.css` once.
+ */
+declare function TraceWaterfall({ renderIcon, ...props }: TraceWaterfallProps): import("react").JSX.Element;
+/** A moment on the run's event track: a release, a check verdict, a spawn, a crash or a steer. */
+interface TraceEvent extends FlowMarker {}
+interface TraceWorkspaceProps extends Omit<TraceWaterfallProps, "trace" | "markers" | "onSelect" | "onTimeChange" | "selectedId" | "onDeselect"> {
+  trace: FlowTrace;
+  /** The selected agent's message stream (Server-Sent Events: rows, reset, end; reconnects with ?after=lastSeq). */
+  streamUrl?: (agentId: string) => string;
+  events?: TraceEvent[];
+  /** The time the reader moved to, in trace ms; null while following live or showing the whole run. */
+  onTimeChange?: (t: number | null) => void;
+  /**
+   * The code workspace as of the cursor and scoped to the selected agent, usually a WorkspaceFilesPane: the page answers
+   * the as-of query. It spans the full width and at least 70% of the viewport. Keep its key on the commit so a scrub
+   * keeps its state.
+   */
+  files?: ReactNode;
+  /** The scoreboard as of the cursor, under the code workspace; omitted when not given. */
+  scoreboard?: ReactNode;
+  selectedAgentId?: string;
+  /** Called with the agent the reader selected, or undefined when they close its drawer or press Escape. */
+  onSelectAgent?: (agentId: string | undefined) => void;
+  className?: string;
+}
+/**
+ * The run workspace: the agent timeline and span waterfall over one clock, the selected agent's conversation
+ * streaming in a right-hand drawer, and the page's code workspace and scoreboard following the time cursor. Scrubbing is time travel:
+ * every panel shows what was true at the cursor, and the conversation shows what had been said by then.
+ */
+declare function TraceWorkspace({ trace, streamUrl, events, onTimeChange, files, scoreboard, selectedAgentId, onSelectAgent, className, ...waterfall }: TraceWorkspaceProps): import("react").JSX.Element;
+/** One row of an agent's message stream (tangle-tools `/api/discovery/runs/<run>/agents/<agent>/stream`). */
+interface AgentStreamRow {
+  seq: number;
+  /** ISO time the event happened. */
+  at: string;
+  stream?: string;
+  attempt?: number;
+  event: {
+    kind: "text" | "reasoning" | "tool-call" | "tool-result" | "user" | (string & {});
+    text?: string;
+    toolCallId?: string;
+    toolName?: string;
+    args?: unknown;
+    result?: unknown;
+  };
+}
+/** A transcript entry with the time it began, so a time cursor can show the conversation as of any moment. */
+type AgentTranscriptEntry = {
+  id: string;
+  at: number;
+  kind: "message";
+  role: "assistant" | "user";
+  content: string;
+} | {
+  id: string;
+  at: number;
+  kind: "reasoning";
+  text: string;
+} | {
+  id: string;
+  at: number;
+  kind: "tool";
+  call: ToolCallData;
+};
+interface AgentStreamState {
+  generation?: string | number;
+  entries: AgentTranscriptEntry[];
+  lastSeq: number;
+  /** The agent is still producing output. */
+  alive: boolean;
+  error?: string;
+}
+/** Fold stream rows into transcript entries: text of one turn merges, a tool call becomes a row its result completes. */
+declare function foldAgentRows(entries: AgentTranscriptEntry[], rows: readonly AgentStreamRow[]): AgentTranscriptEntry[];
+/**
+ * Follow one agent's message stream over Server-Sent Events: `rows`, `reset` and `end` events, reconnecting with
+ * `?after=<lastSeq>` when the server closes the connection, so a long turn streams without gaps or repeats.
+ */
+declare function useAgentStream(url: string | undefined): AgentStreamState;
+export { ToolCallType as A, TraceEvent as B, TaskListItem as C, ToolCallFeed as D, ToolCallData$1 as E, AgentStreamRow as F, traceSpanMark as G, TraceWorkspaceProps as H, AgentStreamState as I, AgentTranscriptEntry as L, showsTaskPriority as M, taskProgress as N, ToolCallFeedProps as O, taskStatus as P, foldAgentRows as R, TaskList as S, TaskStatus as T, TraceWaterfall as U, TraceWorkspace as V, TraceWaterfallProps as W, RunPhaseList as _, ApprovalPlanStep as a, RunRowStatus as b, FeedSegment as c, InlineToolItem as d, InlineToolItemProps as f, RunPhase as g, RunGroupProps as h, ApprovalDiffSummary as i, parseToolEvent as j, ToolCallStatus as k, InlineThinkingItem$1 as l, RunGroup as m, ApprovalCardProps as n, ExpandedToolDetail as o, LiveDuration as p, ApprovalDiffFile as r, ExpandedToolDetailProps as s, ApprovalCard as t, InlineThinkingItemProps as u, RunRowShell as v, TaskListProps as w, RunRowStatusDot as x, RunRowShellProps as y, useAgentStream as z };

package/dist/{index-T4-5mWTq.d.ts → index-CvtEhIpk.d.ts}

@@ -1,5 +1,6 @@
 import { g as ExposedPort } from "./index-DRDtTgb0.js";
 import { D as RichFileTreeGitStatus, E as RichFileTreeGitEntry } from "./index-BoHOpP2_.js";
+import "./diff-view-DDHWtR6X.js";
 import { a as PreviewReadiness, i as PreviewAccess } from "./embedded-app-view-Ta5GI4hx.js";
 import * as React$1 from "react";
 import { CSSProperties } from "react";
@@ -230,6 +231,10 @@ interface CodeViewProps {
   onFileSelect?: (path: string) => void;
   /** Show the file-tree rail. Off for single-file embeds where the host owns navigation. */
   showTree?: boolean;
+  /** Start with long lines wrapped. */
+  defaultWrap?: boolean;
+  /** Defaults to the host's Brand theme. */
+  themeType?: "light" | "dark";
   className?: string;
 }
 /**
@@ -238,26 +243,7 @@ interface CodeViewProps {
  * 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$1.JSX.Element;
-interface DiffViewProps {
-  filename: string;
-  baseline: string;
-  current: string;
-  /** Hide when the surrounding PanelHeader already identifies the file. */
-  showFileHeader?: boolean;
-  /** Start wrapped so narrow review panes never conceal the end of a line. */
-  defaultWrap?: boolean;
-  /** Match the host app's selected theme. Defaults to dark for existing consumers. */
-  themeType?: "light" | "dark";
-  className?: string;
-}
-/**
- * Keep the maintained renderer for hunking, word diffs and highlighting. A new
- * custom element per effect survives StrictMode remounts without hydrating stale
- * shadow content. Wrapping is a renderer option, not a CSS patch into its shadow
- * root; the plain patch disclosure is the accessible, engine-independent view.
- */
-declare function DiffView({ filename, baseline, current, showFileHeader, defaultWrap, themeType, className }: DiffViewProps): React$1.JSX.Element;
+declare function CodeView({ path, filename, content, language, paths, gitStatus, onFileSelect, showTree, defaultWrap, themeType, className }: CodeViewProps): React$1.JSX.Element;
 interface PreviewViewProps {
   /** A product-authorized preview URL. Relative navigation stays on its origin. */
   url: string;
@@ -276,20 +262,29 @@ interface PreviewViewProps {
   className?: string;
 }
 declare function PreviewView({ url, allowedOrigins, access, readiness, onCheckReadiness, onNavigate, variant, title, toolbarActions, className }: PreviewViewProps): React$1.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>;
+/** The one code theme: CodeSurface and DiffView share @pierre/diffs' Shiki highlighter and these themes. */
+declare const CODE_THEME: {
+  readonly dark: "github-dark";
+  readonly light: "github-light";
+};
 interface CodeSurfaceProps {
   code: string;
+  /** Names the file and picks its grammar: every Shiki language, loaded on first use. */
   filename: string;
+  /** A Shiki language id that overrides the filename, such as `rust` for a file without an extension. */
   language?: string;
   showLineNumbers?: boolean;
+  /** Wrap long lines inside the pane instead of scrolling sideways. */
+  wrap?: boolean;
+  /** A 1-based line to select and scroll into view. */
+  line?: number;
+  /** Defaults to the host's Brand theme. */
+  themeType?: "light" | "dark";
   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.
+ * Read-only code renderer on @pierre/diffs' `File`, the same Shiki highlighter and theme as DiffView. A new
+ * custom element per render survives StrictMode remounts; the surrounding element owns scrolling.
  */
-declare function CodeSurface({ code, filename, language, showLineNumbers, className }: CodeSurfaceProps): React$1.JSX.Element;
-export { SandboxArtifactTerminal as A, ChangesPane as C, ChangesPaneProps as D, ChangedFile as E, SandboxArtifact as O, PillTabsProps as S, ArtifactView as T, DiffStats as _, PreviewView as a, PillTabItem as b, DiffViewProps as c, FileBreadcrumb as d, FileBreadcrumbProps as f, PanelHeaderProps as g, PanelHeader as h, resolveLanguage as i, SandboxArtifactPaneProps as k, CodeView as l, GitStatusBadge as m, CodeSurface as n, PreviewViewProps as o, DiffStatsBadge as p, CodeSurfaceProps as r, DiffView as s, BRAND_PRISM_THEME as t, CodeViewProps as u, buildUnifiedPatch as v, SandboxArtifactPane as w, PillTabs as x, computeDiffStats as y };
+declare function CodeSurface({ code, filename, language, showLineNumbers, wrap, line, themeType, className }: CodeSurfaceProps): React$1.JSX.Element;
+export { ChangedFile as C, SandboxArtifactTerminal as D, SandboxArtifactPaneProps as E, ArtifactView as S, SandboxArtifact as T, PillTabItem as _, PreviewViewProps as a, ChangesPane as b, FileBreadcrumb as c, GitStatusBadge as d, PanelHeader as f, computeDiffStats as g, buildUnifiedPatch as h, PreviewView as i, FileBreadcrumbProps as l, DiffStats as m, CodeSurface as n, CodeView as o, PanelHeaderProps as p, CodeSurfaceProps as r, CodeViewProps as s, CODE_THEME as t, DiffStatsBadge as u, PillTabs as v, ChangesPaneProps as w, SandboxArtifactPane as x, PillTabsProps as y };