@tangle-network/sandbox-ui 2.0.16 → 2.0.18

package/README.md

@@ -529,3 +529,5 @@ Retheming is absolutely supported, but the documentation was thinner than it sho
 ## License
 
 Apache-2.0
+
+The native Runtime viewer is `LiveRun` from `@tangle-network/sandbox-ui/run/live`. It composes the same trace workspace, selected-agent conversation, retained files and capture coverage. Hosts may supply the existing fetch/EventSource transport for their authenticated session; an API change resets the selected run, while frames on one API preserve selection and the camera. `@tangle-network/sandbox-ui/workspace-viewer.js` is the self-contained browser entry for Runtime's existing asset-directory contract, with `styles.css` beside it. Generic same-origin ETag document reads are shared as `useDocument` from the hooks entry; producers retain their format validation and accounting.

package/dist/agent-stream-CBZ2fXJ2.d.ts

@@ -0,0 +1,66 @@
+import { ToolCallData } from "@tangle-network/ui/run";
+/** Host-owned authenticated streams keep their own reconnect and session lifecycle. */
+interface AgentStreamSource {
+  addEventListener(type: string, listener: (event: MessageEvent<string>) => void): void;
+  close(): void;
+}
+type AgentStreamOpener = (url: string, onLiveChange?: (live: boolean) => void) => AgentStreamSource;
+/** 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" | "notice" | (string & {});
+    text?: string;
+    /** A notice's origin: the agent's `delegated-input`, its `recorded-result`, or a capture fact such as `capture-unavailable`. */
+    provenance?: 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;
+  sealed?: true;
+} | {
+  id: string;
+  at: number;
+  kind: "reasoning";
+  text: string;
+} | {
+  id: string;
+  at: number;
+  kind: "tool";
+  call: ToolCallData;
+} | {
+  id: string;
+  at: number;
+  kind: "notice";
+  text: string;
+};
+interface AgentStreamState {
+  generation?: string | number;
+  entries: AgentTranscriptEntry[];
+  lastSeq: number;
+  /** The agent is still producing output. */
+  alive: boolean;
+  /** Why the stream shows nothing new; a reconnect that delivers rows clears it. */
+  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, openEventSource?: AgentStreamOpener): AgentStreamState;
+export { AgentTranscriptEntry as a, AgentStreamState as i, AgentStreamRow as n, foldAgentRows as o, AgentStreamSource as r, useAgentStream as s, AgentStreamOpener as t };

package/dist/code-view-BlhCS1SD.js

@@ -0,0 +1,177 @@
+import { t as cn$1 } from "./utils-BER_bdgE.js";
+import { RichFileTree } from "./files.js";
+import { a as CodeSurface } from "./diff-view-B9mNeTLF.js";
+import { Button } from "@tangle-network/ui/primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Check, ChevronRight, Copy, FileCode2, WrapText } from "lucide-react";
+import { focusRing } from "@tangle-network/ui/utils";
+// src/workbench/file-breadcrumb.tsx
+/**
+* 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.
+*/
+function FileBreadcrumb({ path, className }) {
+	const segments = path.split("/").filter(Boolean);
+	const leaf = segments[segments.length - 1] ?? path;
+	const parents = segments.slice(0, -1);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("flex min-h-[30px] items-center gap-1 overflow-hidden border-b border-[var(--md3-outline-variant)] bg-surface-container-lowest px-3 text-xs text-muted-foreground", className),
+		children: [
+			/* @__PURE__ */ jsx(FileCode2, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+			parents.map((seg, i) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate font-mono",
+				children: seg
+			}), /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0 opacity-50" })] }, `${seg}-${i}`)),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate font-mono text-foreground",
+				children: leaf
+			})
+		]
+	});
+}
+// src/workbench/code-view.tsx
+/**
+* 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.
+*/
+function CodeView({ path, filename, content, language, paths, gitStatus, onFileSelect, showTree = true, defaultWrap = false, themeType, className }) {
+	const [narrowPane, setNarrowPane] = React$1.useState("code");
+	const [wrap, setWrap] = React$1.useState(defaultWrap);
+	const [copied, setCopied] = React$1.useState(false);
+	const [line, setLine] = React$1.useState();
+	const lineInput = React$1.useRef(null);
+	const lineCount = React$1.useMemo(() => content.split("\n").length, [content]);
+	React$1.useEffect(() => {
+		setLine(void 0);
+	}, [path]);
+	React$1.useEffect(() => {
+		if (!copied) return;
+		const timer = setTimeout(() => setCopied(false), 1500);
+		return () => clearTimeout(timer);
+	}, [copied]);
+	const copy = () => {
+		navigator.clipboard?.writeText(content).then(() => setCopied(true));
+	};
+	const goToLine = (event) => {
+		event.preventDefault();
+		const value = Math.round(Number(lineInput.current?.value));
+		if (Number.isFinite(value) && value >= 1) setLine(Math.min(value, lineCount));
+	};
+	const treePaths = React$1.useMemo(() => {
+		const list = paths && paths.length > 0 ? paths : [path];
+		return list.includes(path) ? list : [...list, path];
+	}, [paths, path]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1("sandbox-code-view h-full min-h-0 w-full", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "sandbox-code-view-layout flex h-full min-h-0 w-full",
+			children: [
+				showTree && /* @__PURE__ */ jsxs("div", {
+					className: "sandbox-code-view-mobile-toolbar",
+					role: "group",
+					"aria-label": "Code view pane",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": narrowPane === "files",
+						onClick: () => setNarrowPane("files"),
+						className: focusRing,
+						children: "Files"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": narrowPane === "code",
+						onClick: () => setNarrowPane("code"),
+						className: focusRing,
+						children: "Code"
+					})]
+				}),
+				showTree && /* @__PURE__ */ jsx("div", {
+					className: "sandbox-code-view-tree sandbox-tree-surface flex w-60 shrink-0 flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-lowest",
+					"data-mobile-open": narrowPane === "files",
+					children: /* @__PURE__ */ jsx(RichFileTree, {
+						paths: treePaths,
+						selectedPath: path,
+						onSelect: (next) => {
+							onFileSelect?.(next);
+							setNarrowPane("code");
+						},
+						gitStatus,
+						search: treePaths.length > 12,
+						height: "100%"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "sandbox-code-view-editor flex min-w-0 flex-1 flex-col bg-surface-container",
+					"data-mobile-hidden": showTree && narrowPane === "files",
+					onKeyDown: (event) => {
+						if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "g") {
+							event.preventDefault();
+							lineInput.current?.focus();
+							lineInput.current?.select();
+						}
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-lowest",
+						children: [/* @__PURE__ */ jsx(FileBreadcrumb, {
+							path,
+							className: "min-w-0 flex-1 border-b-0"
+						}), /* @__PURE__ */ jsxs("form", {
+							onSubmit: goToLine,
+							className: "flex shrink-0 items-center gap-0.5 pr-1",
+							children: [
+								/* @__PURE__ */ jsx("input", {
+									ref: lineInput,
+									type: "number",
+									min: 1,
+									max: lineCount,
+									inputMode: "numeric",
+									placeholder: "Line",
+									"aria-label": "Go to line",
+									"aria-keyshortcuts": "Control+g Meta+g",
+									className: cn$1("h-6 w-14 rounded border border-transparent bg-transparent px-1.5 font-mono text-xs text-foreground placeholder:text-muted-foreground hover:border-border", focusRing)
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									"aria-pressed": wrap,
+									"aria-label": "Wrap lines",
+									title: "Wrap lines",
+									onClick: () => setWrap((value) => !value),
+									className: cn$1("h-6 w-6 p-0", wrap && "text-foreground bg-surface-container-high"),
+									children: /* @__PURE__ */ jsx(WrapText, { className: "h-3.5 w-3.5" })
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									"aria-label": copied ? "Copied" : "Copy file",
+									title: copied ? "Copied" : "Copy file",
+									onClick: copy,
+									className: "h-6 w-6 p-0",
+									children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+								})
+							]
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "min-h-0 flex-1",
+						children: /* @__PURE__ */ jsx(CodeSurface, {
+							code: content,
+							filename,
+							language,
+							wrap,
+							line,
+							themeType
+						})
+					})]
+				})
+			]
+		})
+	});
+}
+export { FileBreadcrumb as n, CodeView as t };