@tangle-network/sandbox-ui 0.115.7 → 0.116.0

package/dist/{embedded-app-view-CNWKeod5.js → embedded-app-view-CoiS_kfY.js}

@@ -1,5 +1,5 @@
 import { t as cn$1 } from "./utils-DzWbktWG.js";
-import { t as WorkspacePaneHeader } from "./workspace-pane-header-C5e7sPaS.js";
+import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
 import { Button } from "@tangle-network/ui/primitives";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";

package/dist/globals.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;
   }
@@ -1906,6 +1906,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-visible {
+    overflow: visible;
+  }
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -2097,12 +2100,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 +2370,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);
   }
@@ -3718,6 +3709,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 +3984,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 +4019,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 +4357,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 +4555,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 +4999,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/hooks.d.ts

@@ -1,69 +1,7 @@
+import { n as UsePtySessionReturn, r as usePtySession, t as UsePtySessionOptions } from "./use-pty-session-DbAYO5uH.js";
 import { t as Session } from "./sidecar-DgH_vQ6m.js";
 import { a as SendMessageOptions, c as SessionStreamError, d as useSessionStream, i as SESSION_STREAM_RECONNECT_DELAY_MS, l as UseSessionStreamOptions, n as UseSidecarAuthOptions, o as SessionDegradation, r as useSidecarAuth, s as SessionInfo, t as SidecarAuth, u as UseSessionStreamResult } from "./use-sidecar-auth-CCTJcrq7.js";
-import { AgentInteractiveSessionControlClaim } from "@tangle-network/agent-interface";
 import { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from "@tangle-network/ui/hooks";
-//#region src/hooks/use-pty-session.d.ts
-export interface UsePtySessionOptions {
-  /** 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;
-}
-export 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.
- */
-export declare function usePtySession({ apiUrl, token, onData, connectionId: providedConnectionId, incarnationId, control }: UsePtySessionOptions): UsePtySessionReturn;
-//#endregion
 //#region src/hooks/use-sandbox-metrics.d.ts
 /**
  * Sandbox-level telemetry collected by the sidecar from cgroup v2
@@ -173,14 +111,12 @@ export interface UseSandboxMetricsResult {
    */
   history: SandboxMetricsSample[];
   /**
-   * True only until the first successful sample has arrived (or the
-   * first one after the target `sandboxId` changes). Subsequent polls
-   * do not flip this back to true, so consumers can gate a spinner
-   * on it without it flashing on every cycle.
+   * True while waiting for the first successful metrics response for this
+   * sandbox. Errors clear it so consumers can show the failure state.
    */
   loading: boolean;
   error: Error | null;
-  /** Wall-clock ms of the last successful sample, or null. */
+  /** Wall-clock ms of the last successful metrics response, or null. */
   lastUpdatedAt: number | null;
 }
 /**
@@ -203,4 +139,4 @@ export declare function useRenameSession(apiUrl: string, token: string | null):
   title: string;
 }, unknown>;
 //#endregion
-export { type AgentStreamEvent, type AppendUserMessageOptions, type ApplySdkEventOptions, type AuthUser, type AutomationStreamEvent, type BeginAssistantMessageOptions, type BotStreamEvent, type CompleteAssistantMessageOptions, type ConnectionState, type RealtimeSessionOptions, RealtimeSessionRegistry, type RealtimeSessionRegistryProps, type RealtimeSessionState, type RealtimeSessionTarget, SESSION_STREAM_RECONNECT_DELAY_MS, type SSEEvent, type SdkSessionAttachment, type SdkSessionEvent, type SdkSessionSeed, SendMessageOptions, SessionDegradation, SessionInfo, SessionStreamError, SidecarAuth, type TaskStreamEvent, type TerminalStreamEvent, type UseAuthOptions, type UseAuthResult, type UseRunGroupsOptions, type UseSSEStreamOptions, type UseSSEStreamResult, type UseSdkSessionOptions, type UseSdkSessionReturn, UseSessionStreamOptions, UseSessionStreamResult, UseSidecarAuthOptions, type UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream };
+export { type AgentStreamEvent, type AppendUserMessageOptions, type ApplySdkEventOptions, type AuthUser, type AutomationStreamEvent, type BeginAssistantMessageOptions, type BotStreamEvent, type CompleteAssistantMessageOptions, type ConnectionState, type RealtimeSessionOptions, RealtimeSessionRegistry, type RealtimeSessionRegistryProps, type RealtimeSessionState, type RealtimeSessionTarget, SESSION_STREAM_RECONNECT_DELAY_MS, type SSEEvent, type SdkSessionAttachment, type SdkSessionEvent, type SdkSessionSeed, SendMessageOptions, SessionDegradation, SessionInfo, SessionStreamError, SidecarAuth, type TaskStreamEvent, type TerminalStreamEvent, type UseAuthOptions, type UseAuthResult, UsePtySessionOptions, UsePtySessionReturn, type UseRunGroupsOptions, type UseSSEStreamOptions, type UseSSEStreamResult, type UseSdkSessionOptions, type UseSdkSessionReturn, UseSessionStreamOptions, UseSessionStreamResult, UseSidecarAuthOptions, type UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, usePtySession, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream };

package/dist/hooks.js

@@ -1,9 +1,10 @@
-import { t as usePtySession } from "./use-pty-session-C8cE0adT.js";
+import { t as usePtySession } from "./use-pty-session-Bf4hBLXJ.js";
 import { i as useSessionStream, n as SESSION_STREAM_RECONNECT_DELAY_MS, r as SessionStreamError, t as useSidecarAuth } from "./use-sidecar-auth-DkdcufOz.js";
 import * as React$1 from "react";
 import { RealtimeSessionRegistry, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from "@tangle-network/ui/hooks";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/hooks/use-sandbox-metrics.ts
+const METRICS_REQUEST_TIMEOUT_MS = 15e3;
 /**
 * Polls the sandbox's sidecar metrics through the API proxy and
 * derives a CPU% value from consecutive cumulative-CPU samples. Used
@@ -36,12 +37,19 @@ function useSandboxMetrics({ apiBaseUrl, sandboxId, token, enabled = true, inter
 		}
 		prevSandboxIdRef.current = sandboxId ?? null;
 		if (!enabled || sandboxCleared) return;
-		const controller = new AbortController();
 		let cancelled = false;
 		let timeoutId = null;
+		let activeRequestController = null;
 		const delay = Math.max(intervalMs, 500);
 		const fetchOnce = async () => {
 			if (!hasLoadedRef.current) setLoading(true);
+			const requestController = new AbortController();
+			activeRequestController = requestController;
+			let requestTimedOut = false;
+			const requestTimeoutId = window.setTimeout(() => {
+				requestTimedOut = true;
+				requestController.abort();
+			}, METRICS_REQUEST_TIMEOUT_MS);
 			try {
 				const headers = {};
 				if (token) headers.Authorization = `Bearer ${token}`;
@@ -49,7 +57,7 @@ function useSandboxMetrics({ apiBaseUrl, sandboxId, token, enabled = true, inter
 					method: "GET",
 					credentials: "include",
 					headers,
-					signal: controller.signal
+					signal: requestController.signal
 				});
 				if (!res.ok) throw new Error(`Metrics request failed (HTTP ${res.status})`);
 				const data = await res.json();
@@ -96,9 +104,14 @@ function useSandboxMetrics({ apiBaseUrl, sandboxId, token, enabled = true, inter
 				hasLoadedRef.current = true;
 				setLoading(false);
 			} catch (err) {
-				if (cancelled || err instanceof DOMException && err.name === "AbortError") return;
-				setError(err instanceof Error ? err : new Error(String(err)));
+				if (cancelled) return;
+				if (requestTimedOut) setError(/* @__PURE__ */ new Error(`Metrics request timed out after ${METRICS_REQUEST_TIMEOUT_MS / 1e3} seconds`));
+				else if (err instanceof DOMException && err.name === "AbortError") return;
+				else setError(err instanceof Error ? err : new Error(String(err)));
 				if (!hasLoadedRef.current) setLoading(false);
+			} finally {
+				window.clearTimeout(requestTimeoutId);
+				if (activeRequestController === requestController) activeRequestController = null;
 			}
 		};
 		const runLoop = async () => {
@@ -110,7 +123,7 @@ function useSandboxMetrics({ apiBaseUrl, sandboxId, token, enabled = true, inter
 		runLoop();
 		return () => {
 			cancelled = true;
-			controller.abort();
+			activeRequestController?.abort();
 			if (timeoutId !== null) window.clearTimeout(timeoutId);
 		};
 	}, [

package/dist/{index-CKRaj1pM.d.ts → index-D8XVXO94.d.ts}

@@ -136,7 +136,7 @@ declare function DirectoryPane({ root, selectedPath, onSelect, onRefresh, onUplo
 //#endregion
 //#region src/workspace/status-banner.d.ts
 /**
- * StatusBanner — full-width notification banner for connection/provisioning states.
+ * StatusBanner — inline notice for connection and provisioning states.
  */
 type BannerType = "provisioning" | "connecting" | "error" | "warning" | "success" | "info";
 interface StatusBannerProps {
@@ -542,7 +542,7 @@ interface SandboxWorkbenchSessionProps extends Omit<ChatContainerProps, "classNa
   meta?: ReactNode;
   headerActions?: ReactNode;
   /**
-   * Controls rendered as a strip attached beneath the chat composer —
+   * Controls rendered above the composer in the same centered column —
    * harness/model/effort pickers, token meters, etc. Use
    * `AgentSessionControls` from `@tangle-network/agent-app/web-react` for the
    * standard set.
@@ -564,15 +564,14 @@ interface SandboxWorkbenchProps {
   /**
    * Header above the transcript. `undefined` keeps the branded session card
    * (`Tangle Sandbox` / `title` / `status`), a node replaces it, and `null`
-   * removes it: the transcript then renders directly on `bg-surface` with no
+   * removes it: the transcript then renders directly on `bg-background` with no
    * eyebrow/title frame around it, and the shell's center header row appears
    * only while it holds an open-pane toggle.
    */
   centerHeader?: ReactNode | null;
   /**
-   * Composer rendered under the transcript on the panel background, inside the
-   * transcript's own `max-w-3xl` column. `session.composerControls`, when
-   * also given, sits above it as before.
+   * Composer rendered under the transcript in the same centered column as
+   * `session.composerControls`.
    */
   composer?: ReactNode;
   /**

package/dist/index.d.ts

@@ -4,11 +4,12 @@ import { $ as HARNESS_BRAND, $t as useSidebar, A as Variant, An as SidebarProps,
 import { a as modelBrandFor, i as canonicalModelId, n as ModelBrandStack, r as ModelInfo, t as ModelBrandIdentity } from "./model-brand-B9A4H9pJ.js";
 import { a as UsageChartProps, c as PricingPageProps, d as BillingBalance, f as BillingDashboard, h as BillingUsage, i as UsageChart, l as PricingTier, m as BillingSubscription, n as TemplateCardData, o as UsageDataPoint, p as BillingDashboardProps, r as TemplateCardProps, s as PricingPage, t as TemplateCard, u as formatPrice } from "./template-card-L-4gmjx2.js";
 import { C as getCodeLanguage, D as resolveFilePreviewKind, E as parseCsv, S as filterFileTree, T as getSyntaxLanguage, _ as RichFileTreeGitStatus, a as FileNode, b as detectFileFormat, c as FilePreviewProps, d as FileTabsProps, f as FileTree, g as RichFileTreeGitEntry, h as RichFileTree, i as FileFormat, l as FileTabData, m as FileTreeVisibilityOptions, n as FileArtifactPane, o as FilePreview, p as FileTreeProps, r as FileArtifactPaneProps, s as FilePreviewKind, t as CSV_PREVIEW_ROW_LIMIT, u as FileTabs, v as RichFileTreeProps, w as getFormatLabel, x as fileExtension, y as RichFileTreeThemeVars } from "./index-CXX5IpH2.js";
+import { n as UsePtySessionReturn, r as usePtySession, t as UsePtySessionOptions } from "./use-pty-session-DbAYO5uH.js";
 import { t as Session } from "./sidecar-DgH_vQ6m.js";
 import { d as useSessionStream, l as UseSessionStreamOptions, n as UseSidecarAuthOptions, o as SessionDegradation, r as useSidecarAuth, s as SessionInfo, t as SidecarAuth, u as UseSessionStreamResult } from "./use-sidecar-auth-CCTJcrq7.js";
-import { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SandboxMetrics, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SidecarMetricsPayload, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UsePtySessionOptions, UsePtySessionReturn, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSandboxMetricsOptions, UseSandboxMetricsResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useCreateSession, useDeleteSession, useDropdownMenu, useLiveTime, usePtySession, useRealtimeSession, useRenameSession, useRunCollapseState, useRunGroups, useSSEStream, useSandboxMetrics, useSdkSession, useSessions, useToolCallStream } from "./hooks.js";
+import { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SandboxMetrics, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SidecarMetricsPayload, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSandboxMetricsOptions, UseSandboxMetricsResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useCreateSession, useDeleteSession, useDropdownMenu, useLiveTime, useRealtimeSession, useRenameSession, useRunCollapseState, useRunGroups, useSSEStream, useSandboxMetrics, useSdkSession, useSessions, useToolCallStream } from "./hooks.js";
 import { $ as InputProps, $t as ToastProvider, A as DropZoneProps, At as Table, B as DropdownMenuSeparator, Bt as TabsList, C as DialogFooter, Ct as SkeletonTable, D as DialogTitle, Dt as StatusPillProps, E as DialogPortal, Et as StatusPill, F as DropdownMenuItem, Ft as TableHead, G as DropdownMenuTrigger, H as DropdownMenuSub, I as DropdownMenuLabel, It as TableHeader, J as FilterField, Jt as Textarea, K as EmptyState, Kt as TextShimmer, L as DropdownMenuPortal, Lt as TableRow, M as DropdownMenuCheckboxItem, Mt as TableCaption, N as DropdownMenuContent, Nt as TableCell, O as DialogTrigger, Ot as StatusTone, P as DropdownMenuGroup, Pt as TableFooter, Q as Input, Qt as ToastContainer, R as DropdownMenuRadioGroup, Rt as Tabs, S as DialogDescription, St as SkeletonCard, T as DialogOverlay, Tt as StatCardProps, U as DropdownMenuSubContent, Ut as TerminalDisplay, V as DropdownMenuShortcut, Vt as TabsTrigger, W as DropdownMenuSubTrigger, X as InlineCode, Xt as ThemeToggle, Y as FilterFieldProps, Yt as TextareaProps, Z as InlineCodeProps, Zt as Toast, _ as CodeBlockProps, _t as SelectTrigger, a as AvatarImage, an as badgeVariants, at as Progress, b as DialogClose, bn as TangleKnot, bt as SidebarDropZoneProps, c as Button, cn as useToast, ct as SegmentedControlProps, d as CardContent, dt as SelectGroup, en as Toolbar, et as Label, f as CardDescription, ft as SelectItem, g as CodeBlock, gt as SelectSeparator, h as CardTitle, ht as SelectScrollUpButton, i as AvatarFallback, in as UploadProgressProps, it as MetricStripProps, j as DropdownMenu, jt as TableBody, k as DropZone, kt as Switch, l as ButtonProps, lt as Select, m as CardHeader, mt as SelectScrollDownButton, nn as UploadFile, nt as MetricProps, o as Badge, on as buttonVariants, ot as SegmentedControl, p as CardFooter, pt as SelectLabel, q as EmptyStateProps, qt as TextShimmerProps, r as Avatar, rn as UploadProgress, rt as MetricStrip, s as BadgeProps, sn as useTheme, st as SegmentedControlOption, tn as ToolbarProps, tt as Metric, u as Card, ut as SelectContent, v as CopyButton, vn as Logo, vt as SelectValue, w as DialogHeader, wt as StatCard, x as DialogContent, xt as Skeleton, y as Dialog, yn as LogoProps, yt as SidebarDropZone, z as DropdownMenuRadioItem, zt as TabsContent } from "./index-PRM636Ex.js";
-import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-CKRaj1pM.js";
+import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-D8XVXO94.js";
 import { A as SandboxArtifactTerminal, C as ChangesPane, D as ChangesPaneProps, E as ChangedFile, O as SandboxArtifact, S as PillTabsProps, T as ArtifactView, _ as DiffStats, a as PreviewView, b as PillTabItem, c as DiffViewProps, d as FileBreadcrumb, f as FileBreadcrumbProps, g as PanelHeaderProps, h as PanelHeader, i as resolveLanguage, k as SandboxArtifactPaneProps, l as CodeView, m as GitStatusBadge, n as CodeSurface, o as PreviewViewProps, p as DiffStatsBadge, r as CodeSurfaceProps, s as DiffView, t as BRAND_PRISM_THEME, u as CodeViewProps, v as buildUnifiedPatch, w as SandboxArtifactPane, x as PillTabs, y as computeDiffStats } from "./index-D_G-wF6u.js";
 import { a as PreviewReadiness, i as PreviewAccess, n as EmbeddedAppView, r as EmbeddedAppViewProps, t as EmbeddedApp } from "./embedded-app-view-B_vMTtJn.js";
 import { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from "./openui.js";

package/dist/index.js

@@ -1,13 +1,13 @@
-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 { 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 { $ as SelectItem, A as DropdownMenuItem, At as Textarea, B as DropdownMenuTrigger, C as DialogTitle, Ct as TabsList, D as DropdownMenuCheckboxItem, E as DropdownMenu, Et as TerminalDisplay, F as DropdownMenuSeparator, Ft as UploadProgress, G as Label, Gt as TangleKnot, H as FilterField, I as DropdownMenuShortcut, It as badgeVariants, J as Progress, K as Metric, L as DropdownMenuSub, Lt as buttonVariants, M as DropdownMenuPortal, Mt as ToastContainer, N as DropdownMenuRadioGroup, Nt as ToastProvider, O as DropdownMenuContent, P as DropdownMenuRadioItem, Pt as Toolbar, Q as SelectGroup, R as DropdownMenuSubContent, Rt as useTheme, S as DialogPortal, St as TabsContent, T as DropZone, U as InlineCode, V as EmptyState, W as Input, Wt as Logo, X as Select, Y as SegmentedControl, Z as SelectContent, _ as DialogContent, _t as TableFooter, a as Badge, at as SelectValue, b as DialogHeader, bt as TableRow, c as CardContent, ct as SkeletonCard, d as CardHeader, dt as StatusPill, et as SelectLabel, f as CardTitle, ft as Switch, g as DialogClose, gt as TableCell, h as Dialog, ht as TableCaption, i as AvatarImage, it as SelectTrigger, j as DropdownMenuLabel, jt as ThemeToggle, k as DropdownMenuGroup, kt as TextShimmer, l as CardDescription, lt as SkeletonTable, m as CopyButton, mt as TableBody, n as Avatar, nt as SelectScrollUpButton, o as Button, ot as SidebarDropZone, p as CodeBlock, pt as Table, q as MetricStrip, r as AvatarFallback, rt as SelectSeparator, s as Card, st as Skeleton, tt as SelectScrollDownButton, u as CardFooter, ut as StatCard, v as DialogDescription, vt as TableHead, w as DialogTrigger, wt as TabsTrigger, x as DialogOverlay, xt as Tabs, y as DialogFooter, yt as TableHeader, z as DropdownMenuSubTrigger, zt as useToast } from "./primitives-Dh1vG6J3.js";
-import { t as WorkspacePaneHeader } from "./workspace-pane-header-C5e7sPaS.js";
-import { _ as TerminalPanel, a as AuditResults, b as DirectoryPane, c as SessionActivityMonitor, d as SessionSidebar, f as SESSION_CREATED_EVENT, g as RuntimePane, h as formatRelativeAge, i as TaskBoard, l as createShellShouldRevalidate, m as useOptimisticSessionItems, n as ApprovalQueue, o as AgentWorkbench, p as dispatchSessionCreated, r as CalendarView, s as SandboxWorkbench, t as ArtifactPane, u as shellShouldRevalidate, v as StatusBar, x as WorkspaceLayout, y as StatusBanner } from "./workspace-DoEZpkfF.js";
+import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
+import { _ as TerminalPanel, a as AuditResults, b as DirectoryPane, c as SessionActivityMonitor, d as SessionSidebar, f as SESSION_CREATED_EVENT, g as RuntimePane, h as formatRelativeAge, i as TaskBoard, l as createShellShouldRevalidate, m as useOptimisticSessionItems, n as ApprovalQueue, o as AgentWorkbench, p as dispatchSessionCreated, r as CalendarView, s as SandboxWorkbench, t as ArtifactPane, u as shellShouldRevalidate, v as StatusBar, x as WorkspaceLayout, y as StatusBanner } from "./workspace-CT4aDUE5.js";
 import { $ as SidebarRailNav, A as ResourceMeter, B as RailFlyout, C as InvoiceTable, D as canAdminSandbox, E as SandboxCard, F as CreditBalance, G as Sidebar, H as RailModeButton, I as ProfileAvatar, J as SidebarPanelContent, K as SidebarContent, L as RailButton, M as INSUFFICIENT_BALANCE_CODE, N as OutOfCreditsModal, O as ActivityFeed, P as parseInsufficientBalance, Q as SidebarRailHeader, R as RailCollapseToggle, S as PlanCards, T as NewSandboxCard, U as RailSeparator, V as RailHeader, W as RailThemeToggle, X as SidebarRail, Y as SidebarPanelHeader, Z as SidebarRailFooter, _ as HarnessPicker, a as ProcessList, at as SIDEBAR_TOTAL_WIDTH, b as HarnessLogo, c as UsageSummary, d as MetricAreaChart, et as RailTooltip, f as ProfileComparison, g as HARNESS_OPTIONS, h as DashboardLayout, i as NetworkConfig, it as SIDEBAR_RAIL_WIDTH, j as ClusterStatusBar, k as ResourceSnapshot, l as SystemLogsViewer, m as SidebarLayout, n as SnapshotList, nt as SIDEBAR_PANEL_WIDTH, o as PortsList, ot as SidebarProvider, p as ProfileSelector, q as SidebarPanel, r as BackendConfig, rt as SIDEBAR_RAIL_LABELED_WIDTH, s as GitPanel, st as useSidebar, t as PromoBanner, tt as SIDEBAR_MOBILE_WIDTH, u as VariantList, v as chatCapableHarnesses, w as SandboxTable, x as BackendSelector, y as HARNESS_BRAND, z as RailExpandable } from "./dashboard-CqyJQc7V.js";
 import { n as canonicalModelId, r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
 import { a as formatPrice, i as PricingPage, n as TemplateCard, o as BillingDashboard, r as UsageChart, t as InfoPanel } from "./info-panel-C9cqDzOL.js";
-import { t as usePtySession } from "./use-pty-session-C8cE0adT.js";
+import { t as usePtySession } from "./use-pty-session-Bf4hBLXJ.js";
 import { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, FilePreview, FileTabs, FileTree, RichFileTree, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind } from "./files.js";
-import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-CNWKeod5.js";
+import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-CoiS_kfY.js";
 import { OpenUIArtifactRenderer } from "./openui.js";
 import { a as ThinkingIndicator, c as createFetchTransport, d as AgentProfilePicker, f as DEFAULT_REASONING_LEVEL_OPTIONS, i as MessageList, l as modelProvider, m as ReasoningLevelPicker, n as ChatContainer, o as UserMessage, p as HARNESS_REASONING_OPTIONS, r as ChatMessage, s as ArtifactAgentDock, t as AgentTimeline, u as snapHarnessToModel } from "./chat-BOvFAe6p.js";
 import { ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunRowShell, RunRowStatusDot, ToolCallFeed, parseToolEvent } from "./run.js";

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;
   }
@@ -1906,6 +1906,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-visible {
+    overflow: visible;
+  }
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -2097,12 +2100,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 +2370,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);
   }
@@ -3718,6 +3709,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 +3984,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 +4019,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 +4357,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 +4555,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 +4999,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 };

package/dist/{workspace-DoEZpkfF.js → workspace-CT4aDUE5.js}

@@ -1,5 +1,5 @@
 import { t as cn$1 } from "./utils-DzWbktWG.js";
-import { t as WorkspacePaneHeader } from "./workspace-pane-header-C5e7sPaS.js";
+import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
 import { t as MOTION_CONTROL } from "./motion-DkyBRJb9.js";
 import { ArtifactPane, ArtifactPane as ArtifactPane$1, Badge, EmptyState, Input } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -88,8 +88,14 @@ function ResizeHandle({ label, onDragStart, onStep, className }) {
 		"aria-orientation": "vertical",
 		onPointerDown: handlePointerDown,
 		onKeyDown: handleKeyDown,
-		className: cn$1("relative hidden w-3 shrink-0 cursor-col-resize lg:flex", "items-stretch justify-center bg-transparent touch-none", focusRing, className),
-		children: [/* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-[var(--md3-outline-variant)] transition-colors" }), /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-[3px] -translate-x-1/2 rounded-full bg-transparent hover:bg-primary/30 focus-visible:bg-primary/40" })]
+		className: cn$1("group relative z-10 hidden w-px shrink-0 cursor-col-resize overflow-visible bg-transparent p-0 touch-none lg:flex", focusRing, className),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-y-0 left-1/2 z-10 w-[9px] -translate-x-1/2 cursor-col-resize bg-transparent"
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border transition-colors group-hover:bg-primary/20 group-focus-visible:bg-primary/30"
+		})]
 	});
 }
 function HorizontalResizeHandle({ label, onDragStart, onStep, className }) {
@@ -114,8 +120,14 @@ function HorizontalResizeHandle({ label, onDragStart, onStep, className }) {
 		"aria-orientation": "horizontal",
 		onPointerDown: handlePointerDown,
 		onKeyDown: handleKeyDown,
-		className: cn$1("relative hidden h-3 shrink-0 cursor-row-resize lg:flex", "items-center justify-center bg-transparent touch-none w-full", focusRing, className),
-		children: [/* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-[var(--md3-outline-variant)] transition-colors" }), /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-[3px] -translate-y-1/2 rounded-full bg-transparent hover:bg-primary/30 focus-visible:bg-primary/40" })]
+		className: cn$1("group relative z-10 hidden h-px w-full shrink-0 cursor-row-resize overflow-visible bg-transparent p-0 touch-none lg:flex", focusRing, className),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-x-0 top-1/2 z-10 h-[9px] w-full -translate-y-1/2 cursor-row-resize bg-transparent"
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-border transition-colors group-hover:bg-primary/20 group-focus-visible:bg-primary/30"
+		})]
 	});
 }
 function MobileDrawer({ side, title, header, onClose, children }) {
@@ -130,7 +142,7 @@ function MobileDrawer({ side, title, header, onClose, children }) {
 			onClick: onClose,
 			className: "absolute inset-0 bg-black/80 backdrop-blur-sm"
 		}), /* @__PURE__ */ jsxs("aside", {
-			className: cn$1("relative flex h-full w-[min(88vw,24rem)] flex-col border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]", side === "left" ? "border-r" : "ml-auto border-l"),
+			className: cn$1("relative flex h-full w-[min(88vw,24rem)] flex-col border-border bg-card shadow-[0_8px_30px_rgba(0,0,0,0.18)]", side === "left" ? "border-r" : "ml-auto border-l"),
 			children: [/* @__PURE__ */ jsxs(WorkspacePaneHeader, {
 				className: "justify-between gap-3",
 				children: [/* @__PURE__ */ jsx("div", {
@@ -335,7 +347,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 			"data-sandbox-theme": theme
 		} : {},
 		"data-density": density,
-		className: cn$1("flex h-screen flex-col overflow-hidden bg-[var(--bg-root)] text-foreground font-sans", className),
+		className: cn$1("flex h-screen flex-col overflow-hidden bg-background text-foreground font-sans", className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				ref: shellRef,
@@ -344,7 +356,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 					desktop && left && leftOpen && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("aside", {
 						"aria-label": leftLabel,
 						style: leftStyle,
-						className: "hidden shrink-0 border-r border-[var(--md3-outline-variant)] bg-surface-container-low lg:flex lg:flex-col",
+						className: cn$1("hidden shrink-0 bg-card lg:flex lg:flex-col", !resizable && "border-r border-border"),
 						children: [leftHeader && /* @__PURE__ */ jsxs(WorkspacePaneHeader, {
 							className: "justify-between gap-2",
 							children: [/* @__PURE__ */ jsx("div", {
@@ -409,12 +421,12 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 								onStep: stepBottomHeight
 							}), /* @__PURE__ */ jsx("section", {
 								"aria-label": bottomLabel,
-								className: "border-t border-[var(--md3-outline-variant)] bg-surface-container shrink-0",
+								className: cn$1("shrink-0 bg-card", !resizable && "border-t border-border"),
 								style: { height: `${bottomHeight}px` },
 								children: /* @__PURE__ */ jsxs("div", {
 									className: "flex h-full flex-col",
 									children: [/* @__PURE__ */ jsxs("div", {
-										className: "flex items-center justify-between gap-2 border-b border-[var(--md3-outline-variant)] px-3 py-1.5 bg-surface-container-high shrink-0",
+										className: "flex items-center justify-between gap-2 border-b border-border bg-background px-3 py-1.5 shrink-0",
 										children: [/* @__PURE__ */ jsx("div", {
 											className: "min-w-0 flex-1",
 											children: bottomHeader ?? /* @__PURE__ */ jsx("span", {
@@ -435,7 +447,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 								})
 							})] }),
 							centerFooter && /* @__PURE__ */ jsx("div", {
-								className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-low",
+								className: "shrink-0 border-t border-border bg-card",
 								children: centerFooter
 							})
 						]
@@ -447,7 +459,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 					}), /* @__PURE__ */ jsxs("aside", {
 						"aria-label": rightLabel,
 						style: rightStyle,
-						className: "hidden shrink-0 border-l border-[var(--md3-outline-variant)] bg-surface-container-low lg:flex lg:flex-col",
+						className: cn$1("hidden shrink-0 bg-card lg:flex lg:flex-col", !resizable && "border-l border-border"),
 						children: [/* @__PURE__ */ jsxs(WorkspacePaneHeader, {
 							className: "justify-between gap-2",
 							children: [/* @__PURE__ */ jsx("div", {
@@ -586,7 +598,7 @@ function DirectoryPane({ root, selectedPath, onSelect, onRefresh, onUpload, titl
 //#endregion
 //#region src/workspace/status-banner.tsx
 /**
-* StatusBanner — full-width notification banner for connection/provisioning states.
+* StatusBanner — inline notice for connection and provisioning states.
 */
 const BANNER_STYLES = {
 	provisioning: {
@@ -602,9 +614,9 @@ const BANNER_STYLES = {
 		icon: Wifi
 	},
 	error: {
-		bg: "bg-[var(--code-error)]/5",
-		border: "border-[var(--code-error)]/20",
-		text: "text-[var(--code-error)]",
+		bg: "bg-[var(--surface-danger-bg)]",
+		border: "border-[var(--surface-danger-border)]",
+		text: "text-[var(--surface-danger-text)]",
 		icon: AlertCircle
 	},
 	warning: {
@@ -620,8 +632,8 @@ const BANNER_STYLES = {
 		icon: CheckCircle
 	},
 	info: {
-		bg: "bg-surface-container-high",
-		border: "border-[var(--md3-outline-variant)]",
+		bg: "bg-background",
+		border: "border-border",
 		text: "text-muted-foreground",
 		icon: AlertCircle
 	}
@@ -632,27 +644,27 @@ function StatusBanner({ type, message, detail, onDismiss, className }) {
 	const isAnimated = type === "provisioning" || type === "connecting";
 	const role = type === "error" ? "alert" : "status";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$1("flex items-center gap-2.5 px-4 py-2 border-b font-sans text-sm", style.bg, style.border, className),
+		className: cn$1("flex items-start gap-3 rounded-lg border px-3 py-2.5 font-sans text-sm", style.bg, style.border, className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			role,
-			className: "flex min-w-0 items-center gap-2.5",
-			children: [
-				/* @__PURE__ */ jsx(Icon, {
-					className: cn$1("h-4 w-4 shrink-0", style.text, isAnimated && "animate-spin"),
-					...isAnimated ? { "data-motion": "essential" } : {}
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium text-foreground",
+			className: "flex min-w-0 flex-1 items-start gap-2.5",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				className: cn$1("mt-0.5 h-4 w-4 shrink-0", style.text, isAnimated && "animate-spin"),
+				...isAnimated ? { "data-motion": "essential" } : {}
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "break-words font-medium text-foreground",
 					children: message
-				}),
-				detail && /* @__PURE__ */ jsx("span", {
-					className: "font-mono text-xs text-muted-foreground tabular-nums",
+				}), detail && /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 break-words font-mono text-xs text-muted-foreground tabular-nums",
 					children: detail
-				})
-			]
+				})]
+			})]
 		}), onDismiss && /* @__PURE__ */ jsx("button", {
+			type: "button",
 			onClick: onDismiss,
-			className: "ml-auto font-sans text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+			className: `ml-auto mt-0.5 shrink-0 font-sans text-xs font-medium text-muted-foreground transition-colors hover:text-foreground ${focusRing}`,
 			children: "Dismiss"
 		})]
 	});
@@ -1541,12 +1553,12 @@ function ArtifactTabs({ artifacts, activeArtifactId, onSelect, onClose, tabIdPre
 	return /* @__PURE__ */ jsx("div", {
 		role: "tablist",
 		"aria-label": "Artifacts",
-		className: "flex items-center overflow-x-auto border-b border-[var(--md3-outline-variant)] bg-surface-container-high",
+		className: "flex items-center overflow-x-auto border-b border-border bg-background",
 		children: artifacts.map((artifact) => {
 			const Icon = artifact.icon ?? getArtifactTabIcon(artifact.kind);
 			const isActive = artifact.id === activeArtifactId;
 			return /* @__PURE__ */ jsxs("div", {
-				className: cn$1("group flex shrink-0 items-center border-r border-[var(--md3-outline-variant)] bg-surface-container relative", isActive ? "text-foreground after:absolute after:top-0 after:left-0 after:right-0 after:h-[2px] after:bg-primary" : "text-muted-foreground hover:bg-surface-container-high cursor-pointer"),
+				className: cn$1("group relative flex shrink-0 items-center border-r border-border bg-card", isActive ? "text-foreground after:absolute after:top-0 after:left-0 after:right-0 after:h-[2px] after:bg-primary" : "cursor-pointer text-muted-foreground hover:bg-muted"),
 				children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
 					ref: (element) => {
@@ -1602,7 +1614,7 @@ function ArtifactTabs({ artifacts, activeArtifactId, onSelect, onClose, tabIdPre
 function renderArtifact(artifact) {
 	switch (artifact.kind) {
 		case "file": return /* @__PURE__ */ jsx(FileArtifactPane, {
-			path: artifact.path,
+			path: artifact.path === artifact.filename ? void 0 : artifact.path,
 			filename: artifact.filename,
 			content: artifact.content,
 			blobUrl: artifact.blobUrl,
@@ -1612,10 +1624,11 @@ function renderArtifact(artifact) {
 			activeTabId: artifact.activeTabId,
 			onTabSelect: artifact.onTabSelect,
 			onTabClose: artifact.onTabClose,
-			eyebrow: artifact.eyebrow,
+			eyebrow: artifact.eyebrow ?? null,
 			meta: artifact.meta,
 			toolbar: artifact.toolbar,
-			footer: artifact.footer
+			footer: artifact.footer,
+			hideTitleBlock: typeof artifact.title === "string" && artifact.title === artifact.filename && artifact.path === artifact.filename && !artifact.eyebrow && !artifact.meta
 		});
 		case "markdown": return /* @__PURE__ */ jsx(ArtifactPane, {
 			eyebrow: artifact.eyebrow ?? "Document",
@@ -1713,7 +1726,7 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
 		onArtifactChange?.(artifactId);
 	};
 	const brandedHeader = /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-3.5",
+		className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-border bg-card px-4 py-3.5",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [
@@ -1742,25 +1755,15 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
 	const centerHeader = centerHeaderProp === void 0 ? brandedHeader : centerHeaderProp ?? void 0;
 	const { composerControls, ...chatSession } = session;
 	const transcript = /* @__PURE__ */ jsxs("div", {
-		className: cn$1("flex h-full min-h-0 flex-col", quiet && "bg-surface"),
-		children: [
-			/* @__PURE__ */ jsx(ChatContainer, {
-				...chatSession,
-				className: "min-h-0 flex-1",
-				presentation: session.presentation ?? "timeline"
-			}),
-			composerControls && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2",
-				children: composerControls
-			}),
-			composer && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "mx-auto w-full max-w-3xl px-3 pb-3",
-					children: composer
-				})
-			})
-		]
+		className: cn$1("flex h-full min-h-0 flex-col", quiet && "bg-background"),
+		children: [/* @__PURE__ */ jsx(ChatContainer, {
+			...chatSession,
+			className: "min-h-0 flex-1",
+			presentation: session.presentation ?? "timeline"
+		}), (composerControls || composer) && /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex w-full max-w-3xl shrink-0 flex-col gap-2 px-3 py-3",
+			children: [composerControls, composer]
+		})]
 	});
 	const center = quiet ? transcript : /* @__PURE__ */ jsx(ArtifactPane, {
 		eyebrow: session.eyebrow ?? "Agent Session",
@@ -1769,11 +1772,11 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
 		meta: session.meta,
 		headerActions: session.headerActions,
 		className: "h-full",
-		contentClassName: "bg-surface-container",
+		contentClassName: "bg-background",
 		children: transcript
 	});
 	const artifactPanel = artifacts.length > 0 || emptyArtifactState ? /* @__PURE__ */ jsxs("section", {
-		className: "flex h-full min-h-0 flex-col bg-surface-container",
+		className: "flex h-full min-h-0 flex-col bg-background",
 		children: [/* @__PURE__ */ jsx(ArtifactTabs, {
 			artifacts,
 			activeArtifactId: resolvedArtifactId,
@@ -1787,7 +1790,7 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
 			"aria-labelledby": activeArtifact ? `${artifactTabsId}-${activeArtifact.id}` : void 0,
 			"aria-label": activeArtifact ? void 0 : "Artifact content",
 			tabIndex: 0,
-			className: `min-h-0 flex-1 overflow-auto bg-surface-container ${focusRingInset}`,
+			className: `min-h-0 flex-1 overflow-auto bg-background ${focusRingInset}`,
 			children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx("div", {
 				className: "flex h-full items-center justify-center p-6",
 				children: emptyArtifactState ?? /* @__PURE__ */ jsx(EmptyState, {
@@ -1866,7 +1869,7 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
 		leftCollapsedControl: layout?.leftCollapsedControl,
 		leftContentClassName: railOnly ? "py-0" : void 0,
 		centerHeaderVisibility: quiet ? "auto" : "always",
-		className: cn$1("p-3 lg:p-4", className)
+		className: cn$1("p-2", className)
 	});
 }
 function AgentWorkbench(props) {

package/dist/{workspace-pane-header-C5e7sPaS.js → workspace-pane-header-Bg1cCcHX.js}

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function WorkspacePaneHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex h-14 shrink-0 items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3", className),
+		className: cn("flex h-14 shrink-0 items-center border-b border-border bg-card px-3", className),
 		...props
 	});
 }

package/dist/workspace.d.ts

@@ -1,2 +1,2 @@
-import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-CKRaj1pM.js";
+import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-D8XVXO94.js";
 export { AgentWorkbench, type ApprovalConfidenceStat, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, ArtifactPane, type ArtifactPaneProps, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type CalendarEvent, CalendarView, type CalendarViewProps, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, SessionActivityMonitor, type SessionActivityMonitorProps, type SessionCreatedDetail, type SessionOptimisticController, SessionSidebar, type SessionSidebarBadge, type SessionSidebarFilter, type SessionSidebarGroupBy, type SessionSidebarItem, type SessionSidebarLink, type SessionSidebarProps, type SessionSidebarVariant, type ShellShouldRevalidateArgs, type ShellShouldRevalidateOptions, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, TaskBoard, type TaskBoardColumn, type TaskBoardItem, type TaskBoardProps, type TerminalLine, TerminalPanel, type TerminalProps, type UseOptimisticSessionItemsOptions, WorkspaceLayout, type WorkspaceLayoutProps, WorkspacePaneHeader, type WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems };

package/dist/workspace.js

@@ -1,3 +1,3 @@
-import { t as WorkspacePaneHeader } from "./workspace-pane-header-C5e7sPaS.js";
-import { _ as TerminalPanel, a as AuditResults, b as DirectoryPane, c as SessionActivityMonitor, d as SessionSidebar, f as SESSION_CREATED_EVENT, g as RuntimePane, h as formatRelativeAge, i as TaskBoard, l as createShellShouldRevalidate, m as useOptimisticSessionItems, n as ApprovalQueue, o as AgentWorkbench, p as dispatchSessionCreated, r as CalendarView, s as SandboxWorkbench, t as ArtifactPane, u as shellShouldRevalidate, v as StatusBar, x as WorkspaceLayout, y as StatusBanner } from "./workspace-DoEZpkfF.js";
+import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
+import { _ as TerminalPanel, a as AuditResults, b as DirectoryPane, c as SessionActivityMonitor, d as SessionSidebar, f as SESSION_CREATED_EVENT, g as RuntimePane, h as formatRelativeAge, i as TaskBoard, l as createShellShouldRevalidate, m as useOptimisticSessionItems, n as ApprovalQueue, o as AgentWorkbench, p as dispatchSessionCreated, r as CalendarView, s as SandboxWorkbench, t as ArtifactPane, u as shellShouldRevalidate, v as StatusBar, x as WorkspaceLayout, y as StatusBanner } from "./workspace-CT4aDUE5.js";
 export { AgentWorkbench, ApprovalQueue, ArtifactPane, AuditResults, CalendarView, DirectoryPane, RuntimePane, SESSION_CREATED_EVENT, SandboxWorkbench, SessionActivityMonitor, SessionSidebar, StatusBanner, StatusBar, TaskBoard, TerminalPanel, WorkspaceLayout, WorkspacePaneHeader, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.115.7",
+  "version": "0.116.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",