@tangle-network/sandbox-ui 0.115.7 → 0.116.1

package/dist/styles.css

@@ -839,8 +839,8 @@
   .h-\[1em\] {
     height: 1em;
   }
-  .h-\[3px\] {
-    height: 3px;
+  .h-\[9px\] {
+    height: 9px;
   }
   .h-\[17px\] {
     height: 17px;
@@ -1190,12 +1190,12 @@
   .w-\[1\.375rem\] {
     width: 1.375rem;
   }
-  .w-\[3px\] {
-    width: 3px;
-  }
   .w-\[5\.5rem\] {
     width: 5.5rem;
   }
+  .w-\[9px\] {
+    width: 9px;
+  }
   .w-\[17px\] {
     width: 17px;
   }
@@ -1319,6 +1319,9 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
+  .max-w-\[35\%\] {
+    max-width: 35%;
+  }
   .max-w-\[45\%\] {
     max-width: 45%;
   }
@@ -1906,6 +1909,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-visible {
+    overflow: visible;
+  }
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -2097,12 +2103,6 @@
       border-color: color-mix(in oklab, var(--brand-emerald) 50%, transparent);
     }
   }
-  .border-\[var\(--code-error\)\]\/20 {
-    border-color: var(--code-error);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--code-error) 20%, transparent);
-    }
-  }
   .border-\[var\(--code-number\)\]\/20 {
     border-color: var(--code-number);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2373,12 +2373,6 @@
   .bg-\[var\(--code-error\)\] {
     background-color: var(--code-error);
   }
-  .bg-\[var\(--code-error\)\]\/5 {
-    background-color: var(--code-error);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--code-error) 5%, transparent);
-    }
-  }
   .bg-\[var\(--code-number\)\] {
     background-color: var(--code-number);
   }
@@ -2921,9 +2915,6 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
-  .py-3\.5 {
-    padding-block: calc(var(--spacing) * 3.5);
-  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -3155,9 +3146,6 @@
   .text-\[15px\] {
     font-size: 15px;
   }
-  .text-\[17px\] {
-    font-size: 17px;
-  }
   .text-\[calc\(var\(--font-size-xs\)-1px\)\] {
     font-size: calc(var(--font-size-xs) - 1px);
   }
@@ -3274,10 +3262,6 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-\[0\.01em\] {
-    --tw-tracking: 0.01em;
-    letter-spacing: 0.01em;
-  }
   .tracking-\[0\.1em\] {
     --tw-tracking: 0.1em;
     letter-spacing: 0.1em;
@@ -3306,10 +3290,6 @@
     --tw-tracking: 0.16em;
     letter-spacing: 0.16em;
   }
-  .tracking-\[0\.18em\] {
-    --tw-tracking: 0.18em;
-    letter-spacing: 0.18em;
-  }
   .tracking-\[var\(--tracking-snug\,-0\.01em\)\] {
     --tw-tracking: var(--tracking-snug,-0.01em);
     letter-spacing: var(--tracking-snug,-0.01em);
@@ -3718,6 +3698,10 @@
     --tw-shadow: 0 6px 16px var(--tw-shadow-color, rgba(15,23,42,0.08));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.18\)\] {
+    --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(0,0,0,0.18));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.45\)\] {
     --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(0,0,0,0.45));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3989,6 +3973,14 @@
         border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
       }
     }
+    .group-hover\:bg-primary\/20:is(:where(.group):hover *) {
+      background-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:bg-primary\/20:is(:where(.group):hover *) {
+        background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+      }
+    }
     .group-hover\:text-foreground:is(:where(.group):hover *) {
       color: var(--color-foreground);
     }
@@ -4016,6 +4008,12 @@
       opacity: 100%;
     }
   }
+  .group-focus-visible\:bg-primary\/30:is(:where(.group):focus-visible *) {
+    background-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+    }
+  }
   .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
     cursor: not-allowed;
   }
@@ -4348,14 +4346,6 @@
         background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
       }
     }
-    .hover\:bg-primary\/30:hover {
-      background-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-primary\/30:hover {
-        background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
-      }
-    }
     .hover\:bg-primary\/90:hover {
       background-color: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
     }
@@ -4554,12 +4544,6 @@
   .focus-visible\:bg-background:focus-visible {
     background-color: var(--color-background);
   }
-  .focus-visible\:bg-primary\/40:focus-visible {
-    background-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-    }
-  }
   .focus-visible\:bg-surface-container:focus-visible {
     background-color: var(--color-surface-container);
   }
@@ -5004,9 +4988,6 @@
     .lg\:p-0 {
       padding: 0px;
     }
-    .lg\:p-4 {
-      padding: calc(var(--spacing) * 4);
-    }
     .lg\:px-8 {
       padding-inline: calc(var(--spacing) * 8);
     }

package/dist/{terminal-CN9ZgHRt.js → terminal-DmSUfGha.js}

@@ -1,4 +1,4 @@
-import { t as usePtySession } from "./use-pty-session-C8cE0adT.js";
+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";
@@ -30,7 +30,7 @@ const DEFAULT_TERMINAL_THEME = {
 	brightCyan: "#67e8f9",
 	brightWhite: "#fafafa"
 };
-function TerminalView({ apiUrl, token, theme, title = "Terminal", subtitle = "Connected to PTY session", isActive = true, connectionId, incarnationId, control, fontSize = 13 }) {
+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
@@ -55,7 +55,9 @@ function TerminalView({ apiUrl, token, theme, title = "Terminal", subtitle = "Co
 			termRef.current?.write(chunks.length === 1 ? chunks[0] : chunks.join(""));
 		});
 	}, []);
-	const { isConnected, error, sendCommand, resizeTerminal, reconnect } = usePtySession({
+	const usesCallerSession = session !== void 0;
+	const shellSession = usePtySession({
+		enabled: !usesCallerSession,
 		apiUrl,
 		token,
 		onData,
@@ -63,6 +65,9 @@ function TerminalView({ apiUrl, token, theme, title = "Terminal", subtitle = "Co
 		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({
@@ -104,7 +109,7 @@ function TerminalView({ apiUrl, token, theme, title = "Terminal", subtitle = "Co
 		termRef.current = term;
 		fitAddonRef.current = fitAddon;
 		term.onData((data) => {
-			if (data === "\f") {
+			if (!usesCallerSession && data === "\f") {
 				termRef.current?.clear();
 				sendCommand("\r").catch(console.error);
 				return;
@@ -139,7 +144,8 @@ function TerminalView({ apiUrl, token, theme, title = "Terminal", subtitle = "Co
 		sendCommand,
 		resizeTerminal,
 		title,
-		subtitle
+		subtitle,
+		usesCallerSession
 	]);
 	useEffect(() => {
 		if (termRef.current) termRef.current.options.theme = resolvedTheme;

package/dist/terminal.d.ts

@@ -1,3 +1,4 @@
+import { n as UsePtySessionReturn } from "./use-pty-session-DbAYO5uH.js";
 import "@xterm/xterm/css/xterm.css";
 import { AgentInteractiveSessionControlClaim } from "@tangle-network/agent-interface";
 //#region src/terminal/terminal-view.d.ts
@@ -25,7 +26,13 @@ interface TerminalTheme {
   brightCyan: string;
   brightWhite: string;
 }
+/** A caller-owned terminal connection, rendered without opening a shell. */
+interface TerminalSession extends UsePtySessionReturn {
+  subscribeData(listener: (data: string) => void): () => void;
+}
 interface TerminalViewProps {
+  /** Native session transport. The built-in shell transport stays disabled. */
+  session?: TerminalSession;
   /** Base URL of the sidecar. */
   apiUrl: string;
   /** Bearer token for authentication. */
@@ -59,6 +66,6 @@ interface TerminalViewProps {
   control?: AgentInteractiveSessionControlClaim;
 }
 export declare const DEFAULT_TERMINAL_THEME: TerminalTheme;
-declare function TerminalView({ apiUrl, token, theme, title, subtitle, isActive, connectionId, incarnationId, control, fontSize }: TerminalViewProps): import("react").JSX.Element;
+declare function TerminalView({ session, apiUrl, token, theme, title, subtitle, isActive, connectionId, incarnationId, control, fontSize }: TerminalViewProps): import("react").JSX.Element;
 //#endregion
-export { type TerminalTheme, TerminalView, type TerminalViewProps };
+export { type TerminalSession, type TerminalTheme, TerminalView, type TerminalViewProps };

package/dist/terminal.js

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

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

@@ -117,7 +117,7 @@ function interactiveIdentityKey(incarnationId, control) {
 * preserved as a fallback so the hook keeps working against
 * deployments that have not yet shipped the WS endpoint.
 */
-function usePtySession({ apiUrl, token, onData, connectionId: providedConnectionId, incarnationId, control }) {
+function usePtySession({ enabled = true, apiUrl, token, onData, connectionId: providedConnectionId, incarnationId, control }) {
 	const [isConnected, setIsConnected] = useState(false);
 	const [error, setError] = useState(null);
 	const sessionIdRef = useRef(null);
@@ -650,13 +650,18 @@ function usePtySession({ apiUrl, token, onData, connectionId: providedConnection
 		});
 	}, [ensureDrainRunning]);
 	useEffect(() => {
+		if (!enabled) return;
 		mountedRef.current = true;
 		connect();
 		return () => {
 			mountedRef.current = false;
 			cleanup();
 		};
-	}, [connect, cleanup]);
+	}, [
+		enabled,
+		connect,
+		cleanup
+	]);
 	return {
 		isConnected,
 		error,

package/dist/use-pty-session-DbAYO5uH.d.ts

@@ -0,0 +1,66 @@
+import { AgentInteractiveSessionControlClaim } from "@tangle-network/agent-interface";
+//#region src/hooks/use-pty-session.d.ts
+interface UsePtySessionOptions {
+  /** Disable the built-in shell transport when a caller supplies a session. */
+  enabled?: boolean;
+  /** Base URL of the sidecar (e.g. "http://localhost:9100"). */
+  apiUrl: string;
+  /** Bearer token for authentication. */
+  token: string;
+  /** Called with raw PTY output (may contain ANSI escape codes). */
+  onData: (data: string) => void;
+  /**
+   * Stable id identifying this terminal connection to the sidecar.
+   * Reused on every connect/reconnect so the sidecar restores the same
+   * PTY session (within its reconnect window) instead of spawning a
+   * fresh shell. When omitted, a random id is generated per connect —
+   * so the session does not survive a remount.
+   */
+  connectionId?: string;
+  /**
+   * Exact incarnation issued for an interactive agent session. When present,
+   * it must be sent with `control` on every WebSocket init frame.
+   */
+  incarnationId?: string;
+  /** Write claim for the exact interactive agent session. */
+  control?: AgentInteractiveSessionControlClaim;
+}
+interface UsePtySessionReturn {
+  /** Whether the underlying transport is connected and receiving data. */
+  isConnected: boolean;
+  /** Connection or API error, if any. */
+  error: string | null;
+  /** Send a command to the PTY session. */
+  sendCommand: (command: string) => Promise<void>;
+  /** Safely resize the remote PTY. */
+  resizeTerminal: (cols: number, rows: number) => Promise<void>;
+  /** Tear down and reconnect. */
+  reconnect: () => void;
+}
+/**
+ * Manages a PTY session against the sidecar terminal API.
+ *
+ * Transport:
+ *   1. Try the current sidecar WebSocket contract directly:
+ *      GET /terminals/:id/ws, then send `{"type":"init",...}`.
+ *      - Server → client: BINARY frames carrying PTY output; TEXT frames
+ *        carrying lifecycle/control messages.
+ *      - Client → server: TEXT frames carrying JSON input/resize messages.
+ *   2. If direct WS does not reach server `ready` within
+ *      WS_READY_TIMEOUT_MS, or it errors before ready, fall back to the older
+ *      terminal contract:
+ *      - POST /terminals creates the session.
+ *      - GET /terminals/:id/ws tries the older WS transport.
+ *      - GET /terminals/:id/stream (SSE for output)
+ *      - POST /terminals/:id/input (one batched POST at a time)
+ *      - PATCH /terminals/:id (resize)
+ *   3. DELETE /terminals/:id closes sessions created by the older REST API.
+ *
+ * The WS path eliminates the per-keystroke HTTP round-trip that
+ * dominates typing latency through edge proxies; the HTTP+SSE path is
+ * preserved as a fallback so the hook keeps working against
+ * deployments that have not yet shipped the WS endpoint.
+ */
+declare function usePtySession({ enabled, apiUrl, token, onData, connectionId: providedConnectionId, incarnationId, control }: UsePtySessionOptions): UsePtySessionReturn;
+//#endregion
+export { UsePtySessionReturn as n, usePtySession as r, UsePtySessionOptions as t };

package/dist/workbench/embedded-app.js

@@ -1,2 +1,2 @@
-import { t as EmbeddedAppView } from "../embedded-app-view-CNWKeod5.js";
+import { t as EmbeddedAppView } from "../embedded-app-view-CoiS_kfY.js";
 export { EmbeddedAppView };

package/dist/{workbench-CBfynLzB.js → workbench-DJlOqodW.js}

@@ -1,8 +1,8 @@
 import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { o as PortsList } from "./dashboard-CqyJQc7V.js";
-import { n as TerminalView } from "./terminal-CN9ZgHRt.js";
+import { n as TerminalView } from "./terminal-DmSUfGha.js";
 import { RichFileTree } from "./files.js";
-import { n as PreviewView } from "./embedded-app-view-CNWKeod5.js";
+import { n as PreviewView } from "./embedded-app-view-CoiS_kfY.js";
 import { Button, Skeleton, Textarea } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";

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-CBfynLzB.js";
-import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-CNWKeod5.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-DJlOqodW.js";
+import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-CoiS_kfY.js";
 export { BRAND_PRISM_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats, resolveLanguage };