@tangle-network/sandbox-ui 0.134.11 → 0.135.0

package/dist/terminal.js

@@ -1,2 +1,2 @@
-import { n as TerminalView, t as DEFAULT_TERMINAL_THEME } from "./terminal-DmSUfGha.js";
+import { n as TerminalView, t as DEFAULT_TERMINAL_THEME } from "./terminal-X6r5pjgv.js";
 export { DEFAULT_TERMINAL_THEME, TerminalView };

package/dist/{use-pty-session-Bf4hBLXJ.js → use-pty-session-B5Q_i9RI.js}

@@ -17,13 +17,18 @@ function createEmptyBatch() {
 */
 const WS_READY_TIMEOUT_MS = 1e4;
 /** Convert an http(s) base URL into the matching ws(s) URL. */
-function toWsUrl(apiUrl, sessionId) {
+function toWsUrl(apiUrl, sessionId, defaultShell) {
 	try {
 		const base = typeof window !== "undefined" ? window.location.href : void 0;
 		const url = new URL(`${apiUrl}/terminals/${sessionId}/ws`, base);
 		if (url.protocol === "https:") url.protocol = "wss:";
 		else if (url.protocol === "http:") url.protocol = "ws:";
 		else return null;
+		if (defaultShell) {
+			url.searchParams.set("cols", String(defaultShell.cols));
+			url.searchParams.set("rows", String(defaultShell.rows));
+			url.searchParams.set("defaultShell", "1");
+		}
 		return url.toString();
 	} catch {
 		return null;
@@ -215,7 +220,10 @@ function usePtySession({ enabled = true, apiUrl, token, onData, connectionId: pr
 				resolve(false);
 				return;
 			}
-			const wsUrl = toWsUrl(apiUrl, sessionId);
+			const wsUrl = toWsUrl(apiUrl, sessionId, options.initOnOpen && !exactAttachRequiredRef.current ? {
+				cols: colsRef.current,
+				rows: rowsRef.current
+			} : void 0);
 			if (!wsUrl) {
 				resolve(false);
 				return;

package/dist/{workbench-QHNLHsoL.js → workbench-BzXAYUId.js}

@@ -1,6 +1,6 @@
 import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { a as PortsList } from "./dashboard-C1ALa6lw.js";
-import { n as TerminalView } from "./terminal-DmSUfGha.js";
+import { n as TerminalView } from "./terminal-X6r5pjgv.js";
 import { RichFileTree } from "./files.js";
 import { n as PreviewView } from "./embedded-app-view-CYb9hevq.js";
 import { Button, Skeleton, Textarea } from "@tangle-network/ui/primitives";

package/dist/workbench.js

@@ -1,3 +1,3 @@
-import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-QHNLHsoL.js";
+import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-BzXAYUId.js";
 import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-CYb9hevq.js";
 export { BRAND_PRISM_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats, resolveLanguage };

package/dist/workflows.d.ts

@@ -24,7 +24,11 @@ type WfNodeTone = "trigger" | "structural" | "action";
  * working when in fact it is blocked on THEM — so it gets its own colour, its own
  * label, and a progress bar that does not move.
  */
-type WfNodeStatus = "queued" | "running" | "waiting" | "succeeded" | "failed";
+type WfNodeStatus = "queued" | "running" | "waiting" | "succeeded" | "failed" |
+/** The run went another way: a guard or `when` left this step out. Drawn
+ *  dimmed and dashed, so the path the run took stands out from the one it
+ *  did not, and never confused with a step that is still to come. */
+"skipped";
 /**
  * Live RUN state for one node, supplied by the host (keyed by node id) and
  * merged onto {@link WfNodeData.state} at render time. Absent ⇒ the graph shows
@@ -256,6 +260,15 @@ interface WfGraph {
   edges: WfEdge[];
   /** Set when the YAML couldn't be parsed into a renderable graph. */
   error: string | null;
+  /** The separators this layout pitched its layers and lanes at, so a second
+   *  layouter (see `elk-layout.ts`) keeps the same density. Absent on an error. */
+  spacing?: WfSpacing;
+}
+/** Gaps between layers (`rank`, along the flow) and between nodes stacked in
+ *  one layer (`cross`). */
+interface WfSpacing {
+  rank: number;
+  cross: number;
 }
 /** Main-axis flow direction: "LR" (left-to-right, default) suits the wide/short
  *  run-detail panel; "TB" (top-to-bottom) suits a narrow column. */
@@ -322,8 +335,9 @@ interface WorkflowGraphProps {
   yaml: string;
   /** "full" = interactive (pan/zoom/drag + controls); "preview" = static fit. */
   variant?: "full" | "preview";
-  /** Flow direction: "LR" (default) reads left-to-right — best for the wide/short
-   *  run-detail panel; "TB" is a vertical column. */
+  /** Flow direction: "LR" reads left-to-right — best for the wide/short
+   *  run-detail panel; "TB" is a vertical column. Unset, it follows the
+   *  canvas: "LR" in a panel, "TB" in a portrait canvas such as a phone's. */
   direction?: WfDirection;
   /**
    * Start collapsed (compact icon tiles) rather than expanded.

package/dist/workflows.js

@@ -1,5 +1,5 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-BSr9on8C.js";
-import { A as triggerNodeIndex, D as buildWorkflowGraph, E as branchNodeId, F as parseActionPath, I as shortModel, N as actionPathLabel, P as humanizeIdentifier, T as actionNodeId, a as NodeMark, d as STATUS_LABEL, f as STATUS_PILL, h as StatusPill, i as KIND_ICON, k as triggerNodeId, n as classifyOutput, p as STATUS_TONE, r as condenseText, t as NodeOutputBody, u as STATUS_COLOR, w as TRIGGER_NODE_ID } from "./node-output-CHlf3tni.js";
+import { A as triggerNodeIndex, D as buildWorkflowGraph, E as branchNodeId, F as parseActionPath, I as shortModel, N as actionPathLabel, P as humanizeIdentifier, T as actionNodeId, a as NodeMark, d as STATUS_LABEL, f as STATUS_PILL, h as StatusPill, i as KIND_ICON, k as triggerNodeId, n as classifyOutput, p as STATUS_TONE, r as condenseText, t as NodeOutputBody, u as STATUS_COLOR, w as TRIGGER_NODE_ID } from "./node-output-Bs51H68g.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Component, Suspense, lazy, useMemo, useState } from "react";
 //#region src/workflows/WorkflowGraphLazy.tsx
@@ -30,7 +30,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-Dz6aA2Mp.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-WgonmxDh.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.134.11",
+  "version": "0.135.0",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
@@ -146,6 +146,7 @@
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "@xyflow/react": "^12.0.0",
+    "elkjs": "^0.12.0",
     "pdfjs-dist": ">=6.0.0 <7.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
@@ -191,6 +192,9 @@
     "@xyflow/react": {
       "optional": true
     },
+    "elkjs": {
+      "optional": true
+    },
     "pdfjs-dist": {
       "optional": true
     },
@@ -239,10 +243,12 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-unicode-graphemes": "^0.4.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "@xyflow/react": "^12.12.0",
+    "elkjs": "0.12.0",
     "jsdom": "^30.1.1",
     "pdfjs-dist": "^6.4.299",
     "playwright": "^1.63.0",

package/dist/terminal-DmSUfGha.js

@@ -1,203 +0,0 @@
-import { t as usePtySession } from "./use-pty-session-Bf4hBLXJ.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import "@xterm/xterm/css/xterm.css";
-import { Terminal } from "@xterm/xterm";
-import { FitAddon } from "@xterm/addon-fit";
-import { WebLinksAddon } from "@xterm/addon-web-links";
-//#region src/terminal/terminal-view.tsx
-const 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({ session, apiUrl, token, theme, title = "Terminal", subtitle = "Connected to PTY session", isActive = true, connectionId, incarnationId, control, 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 usesCallerSession = session !== void 0;
-	const shellSession = usePtySession({
-		enabled: !usesCallerSession,
-		apiUrl,
-		token,
-		onData,
-		connectionId,
-		incarnationId,
-		control
-	});
-	const { isConnected, error, sendCommand, resizeTerminal, reconnect } = session ?? shellSession;
-	const subscribeData = session?.subscribeData;
-	useEffect(() => subscribeData?.(onData), [subscribeData, onData]);
-	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;
-		(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 (!usesCallerSession && data === "\f") {
-				termRef.current?.clear();
-				sendCommand("\r").catch(console.error);
-				return;
-			}
-			sendCommand(data).catch((err) => {
-				termRef.current?.writeln(`\r\n\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,
-		usesCallerSession
-	]);
-	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-surface-container-lowest",
-			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..."
-				})
-			})
-		})]
-	});
-}
-//#endregion
-export { TerminalView as n, DEFAULT_TERMINAL_THEME as t };