@tangle-network/sandbox-ui 0.116.4 → 0.116.6

package/README.md

@@ -38,6 +38,17 @@ Import styles in your app root:
 import "@tangle-network/sandbox-ui/styles";
 ```
 
+### Workspace integration access
+
+Use `IntegrationsPanel` from `/integrations` for the provider catalog, logos, search, connection status, and account actions.
+Do not render a second connection catalog above it.
+Supply `getConnectionContext` for a short access label on each connected card.
+Supply `getConnectionActions` for authorized workspace actions in that card's menu.
+Each action has an `id`, `label`, optional `disabled` flag, and `onSelect` callback.
+The panel waits for asynchronous actions and surfaces failures.
+Keep workspace authorization and binding persistence in the consuming application's server.
+When a provider has multiple accounts, include distinct account labels and identities in its workspace actions.
+
 ### Embed a sandbox app
 
 Use `EmbeddedAppView` when a workspace presents a running web app beside an agent conversation.

package/dist/{dashboard-CqyJQc7V.js → dashboard-Bx27mUVe.js}

@@ -7,7 +7,7 @@ import { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, Dropd
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { useEffect, useRef, useState } from "react";
-import { focusField, focusFieldWithin, focusRing, timeAgo } from "@tangle-network/ui/utils";
+import { focusField, focusFieldWithin, focusRing, focusRingInset, timeAgo } from "@tangle-network/ui/utils";
 import { Activity, BarChart2, Bell, Bot, Box, Camera, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Code2, Copy, Cpu, DollarSign, Download, ExternalLink, File, FileEdit, FilePlus, FileText, GitBranch, GitCommit, Globe, HardDrive, Key, Layers, Loader2, MemoryStick, MessageSquare, Monitor, MoreHorizontal, MoreVertical, Network, PanelLeft, Play, Plug, Plus, Power, PowerOff, RefreshCw, RotateCcw, Server, Settings, ShieldAlert, Skull, Terminal, Timer, Trash2, User, Users, Wrench, X, XCircle } from "lucide-react";
 import { createPortal } from "react-dom";
 import * as Select from "@radix-ui/react-select";
@@ -1803,6 +1803,27 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 	const totalCount = total ?? sandboxes.length;
 	const totalPages = Math.ceil(totalCount / pageSize);
 	const hasTeamSandboxes = sandboxes.some((sb) => sb.team !== void 0);
+	const tableScrollRef = React$1.useRef(null);
+	const [hasHiddenColumns, setHasHiddenColumns] = React$1.useState(false);
+	React$1.useEffect(() => {
+		const scroller = tableScrollRef.current;
+		const table = scroller?.querySelector("table");
+		if (!scroller || !table) return;
+		const measure = () => setHasHiddenColumns(scroller.scrollWidth > scroller.clientWidth + 1);
+		measure();
+		if (typeof ResizeObserver === "undefined") {
+			window.addEventListener("resize", measure);
+			return () => window.removeEventListener("resize", measure);
+		}
+		const observer = new ResizeObserver(measure);
+		observer.observe(scroller);
+		observer.observe(table);
+		return () => observer.disconnect();
+	}, [sandboxes, hasTeamSandboxes]);
+	const scrollColumns = (direction) => {
+		const scroller = tableScrollRef.current;
+		scroller?.scrollBy({ left: direction * scroller.clientWidth * .75 });
+	};
 	const resolveResumeHandler = (status) => {
 		if (onResume) return onResume;
 		if (status === "hibernating") return onWake;
@@ -1815,306 +1836,348 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn$1("w-full", className),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "w-full bg-surface-container rounded-2xl overflow-hidden border border-[var(--md3-outline-variant)]",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "overflow-x-auto",
-				children: /* @__PURE__ */ jsxs("table", {
-					className: "w-full text-left border-collapse",
-					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-						className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]",
-						children: [
-							/* @__PURE__ */ jsx("th", {
-								className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
-								children: "Status"
-							}),
-							/* @__PURE__ */ jsx("th", {
-								className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
-								children: "Sandbox Name"
-							}),
-							hasTeamSandboxes && /* @__PURE__ */ jsx("th", {
-								className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
-								children: "Scope"
-							}),
-							/* @__PURE__ */ jsx("th", {
-								className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
-								children: "Environment"
-							}),
-							/* @__PURE__ */ jsx("th", {
-								className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
-								children: "Resources"
-							}),
-							/* @__PURE__ */ jsx("th", {
-								className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider text-right",
-								children: "Actions"
-							})
-						]
-					}) }), /* @__PURE__ */ jsx("tbody", {
-						className: "divide-y divide-border",
-						children: sandboxes.map((sb) => {
-							const sc = statusColors[sb.status] ?? statusColors.stopped;
-							const isActive = sb.status === "running";
-							const isHibernating = sb.status === "hibernating";
-							const isProvisioning = sb.status === "provisioning";
-							const resumeHandler = isResumable(sb.status) ? resolveResumeHandler(sb.status) : void 0;
-							const onRowClick = resolveRowClick(sb);
-							const resumeLabel = isHibernating ? "Wake Up" : "Resume";
-							const stopRowClick = (e) => e.stopPropagation();
-							return /* @__PURE__ */ jsxs("tr", {
-								className: cn$1("group relative transition-colors", onRowClick ? "cursor-pointer hover:bg-surface-container-high" : "hover:bg-surface-container-high"),
-								onClick: onRowClick,
+		children: [
+			sandboxes.length > 0 && hasHiddenColumns && /* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex items-center justify-end gap-2 text-xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: "Columns" }),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => scrollColumns(-1),
+						className: `rounded-md border border-[var(--md3-outline-variant)] p-1.5 ${focusRing}`,
+						"aria-label": "Scroll sandbox table left",
+						title: "Scroll table left",
+						children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => scrollColumns(1),
+						className: `rounded-md border border-[var(--md3-outline-variant)] p-1.5 ${focusRing}`,
+						"aria-label": "Scroll sandbox table right",
+						title: "Scroll table right",
+						children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "w-full bg-surface-container rounded-2xl overflow-hidden border border-[var(--md3-outline-variant)]",
+				children: /* @__PURE__ */ jsx("div", {
+					ref: tableScrollRef,
+					className: `max-h-[min(60vh,35rem)] overflow-auto ${focusRingInset}`,
+					role: "region",
+					"aria-label": "Sandbox table; scroll horizontally for more columns",
+					tabIndex: 0,
+					children: /* @__PURE__ */ jsxs("table", {
+						className: cn$1("w-full text-left border-collapse", hasTeamSandboxes && "[&_th]:px-4 [&_td]:px-4"),
+						children: [/* @__PURE__ */ jsx("thead", {
+							className: "sticky top-0 z-10",
+							children: /* @__PURE__ */ jsxs("tr", {
+								className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]",
 								children: [
-									/* @__PURE__ */ jsx("td", {
-										className: "px-6 py-5 whitespace-nowrap",
-										children: /* @__PURE__ */ jsxs("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ jsx("span", {
-												className: cn$1("flex h-2.5 w-2.5 rounded-full", sc.dot),
-												...sc.dot.includes("animate-") ? { "data-motion": "essential" } : {}
-											}), /* @__PURE__ */ jsx("span", {
-												className: cn$1("text-xs font-bold uppercase tracking-wide", sc.text),
-												children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1)
-											})]
-										})
+									/* @__PURE__ */ jsx("th", {
+										className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+										children: "Status"
 									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "px-6 py-5",
-										children: /* @__PURE__ */ jsxs("div", {
-											className: "flex flex-col",
-											children: [/* @__PURE__ */ jsx("span", {
-												className: "text-sm font-bold text-foreground group-hover:text-primary transition-colors",
-												children: sb.name
-											}), sb.nodeId && /* @__PURE__ */ jsx("span", {
-												className: "text-[10px] font-mono text-muted-foreground",
-												children: sb.nodeId
-											})]
-										})
+									/* @__PURE__ */ jsx("th", {
+										className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+										children: "Sandbox Name"
 									}),
-									hasTeamSandboxes && /* @__PURE__ */ jsx("td", {
-										className: "px-6 py-5",
-										children: sb.team ? /* @__PURE__ */ jsxs("div", {
-											className: "inline-flex items-center gap-1.5 rounded-full bg-[var(--accent-surface-soft)] px-2.5 py-1 text-[11px] font-semibold text-[var(--accent-text)]",
-											title: `Shared with ${sb.team.name ?? "Team"} · ${sb.team.role}`,
-											children: [
-												/* @__PURE__ */ jsx(Users, {
-													className: "h-3 w-3",
-													"aria-hidden": "true"
-												}),
-												/* @__PURE__ */ jsx("span", { children: sb.team.name ?? "Team" }),
-												/* @__PURE__ */ jsxs("span", {
-													className: "font-normal text-muted-foreground",
-													children: ["· ", sb.team.role]
-												})
-											]
-										}) : /* @__PURE__ */ jsxs("div", {
-											className: "inline-flex items-center gap-1.5 rounded-full bg-surface-container-high px-2.5 py-1 text-[11px] font-medium text-muted-foreground",
-											title: "Personal sandbox",
-											children: [/* @__PURE__ */ jsx(User, {
-												className: "h-3 w-3",
-												"aria-hidden": "true"
-											}), "Personal"]
-										})
+									hasTeamSandboxes && /* @__PURE__ */ jsx("th", {
+										className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+										children: "Scope"
 									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "px-6 py-5",
-										children: /* @__PURE__ */ jsxs("div", {
-											className: "flex items-center gap-3",
-											children: [sb.imageIcon && /* @__PURE__ */ jsx("div", {
-												className: "w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center",
-												children: sb.imageIcon
-											}), sb.image && /* @__PURE__ */ jsx("span", {
-												className: "text-xs font-bold text-foreground",
-												children: sb.image
-											})]
-										})
+									/* @__PURE__ */ jsx("th", {
+										className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+										children: "Environment"
 									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "px-6 py-5",
-										children: isActive ? /* @__PURE__ */ jsxs("div", {
-											className: "space-y-3 w-48",
-											children: [/* @__PURE__ */ jsx(MiniMeter, {
-												label: "CPU",
-												percent: sb.cpuPercent ?? 0
-											}), /* @__PURE__ */ jsx(MiniMeter, {
-												label: "RAM",
-												percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0
-											})]
-										}) : isProvisioning ? /* @__PURE__ */ jsxs("div", {
-											className: "flex items-center gap-2 text-primary italic text-[10px] font-bold",
-											children: [/* @__PURE__ */ jsx(RefreshCw, {
-												className: "h-3.5 w-3.5 animate-spin",
-												"data-motion": "essential"
-											}), sb.provisioningMessage ?? "Allocating nodes..."]
-										}) : isHibernating ? /* @__PURE__ */ jsxs("div", {
-											className: "space-y-3 w-48 opacity-30",
-											children: [/* @__PURE__ */ jsx(MiniMeter, {
-												label: "CPU",
-												percent: 0
-											}), /* @__PURE__ */ jsx(MiniMeter, {
-												label: "RAM",
-												percent: 0
-											})]
-										}) : null
+									/* @__PURE__ */ jsx("th", {
+										className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+										children: "Resources"
 									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "px-6 py-5 text-right",
-										children: /* @__PURE__ */ jsxs("div", {
-											className: "flex items-center justify-end gap-1",
-											children: [
-												isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
-													/* @__PURE__ */ jsx("button", {
-														type: "button",
-														onClick: (e) => {
-															stopRowClick(e);
-															onOpenIDE?.(sb.id);
-														},
-														className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
-														title: "Open IDE",
-														children: /* @__PURE__ */ jsx(Code2, { className: "h-4 w-4" })
+									/* @__PURE__ */ jsx("th", {
+										className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider text-right",
+										children: "Actions"
+									})
+								]
+							})
+						}), /* @__PURE__ */ jsx("tbody", {
+							className: "divide-y divide-border",
+							children: sandboxes.map((sb) => {
+								const sc = statusColors[sb.status] ?? statusColors.stopped;
+								const isActive = sb.status === "running";
+								const isHibernating = sb.status === "hibernating";
+								const isProvisioning = sb.status === "provisioning";
+								const resumeHandler = isResumable(sb.status) ? resolveResumeHandler(sb.status) : void 0;
+								const onRowClick = resolveRowClick(sb);
+								const resumeLabel = isHibernating ? "Wake Up" : "Resume";
+								const stopRowClick = (e) => e.stopPropagation();
+								return /* @__PURE__ */ jsxs("tr", {
+									className: cn$1("group relative transition-colors", onRowClick ? "cursor-pointer hover:bg-surface-container-high" : "hover:bg-surface-container-high"),
+									onClick: onRowClick,
+									children: [
+										/* @__PURE__ */ jsx("td", {
+											className: "px-6 py-5 whitespace-nowrap",
+											children: /* @__PURE__ */ jsxs("div", {
+												className: "flex items-center gap-2",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: cn$1("flex h-2.5 w-2.5 rounded-full", sc.dot),
+													...sc.dot.includes("animate-") ? { "data-motion": "essential" } : {}
+												}), /* @__PURE__ */ jsx("span", {
+													className: cn$1("text-xs font-bold uppercase tracking-wide", sc.text),
+													children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1)
+												})]
+											})
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-6 py-5",
+											children: /* @__PURE__ */ jsxs("div", {
+												className: cn$1("flex min-w-0 flex-col", hasTeamSandboxes ? "max-w-36" : "max-w-64"),
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "truncate text-sm font-bold text-foreground group-hover:text-primary transition-colors",
+													title: sb.name,
+													children: sb.name
+												}), sb.nodeId && /* @__PURE__ */ jsx("span", {
+													className: "truncate text-[10px] font-mono text-muted-foreground",
+													title: sb.nodeId,
+													children: sb.nodeId
+												})]
+											})
+										}),
+										hasTeamSandboxes && /* @__PURE__ */ jsx("td", {
+											className: "px-6 py-5",
+											children: sb.team ? /* @__PURE__ */ jsxs("div", {
+												className: "inline-flex max-w-40 items-center gap-1.5 rounded-full bg-[var(--accent-surface-soft)] px-2.5 py-1 text-[11px] font-semibold text-[var(--accent-text)]",
+												title: `Shared with ${sb.team.name ?? "Team"} · ${sb.team.role}`,
+												children: [
+													/* @__PURE__ */ jsx(Users, {
+														className: "h-3 w-3 shrink-0",
+														"aria-hidden": "true"
+													}),
+													/* @__PURE__ */ jsx("span", {
+														className: "min-w-0 truncate",
+														children: sb.team.name ?? "Team"
 													}),
-													/* @__PURE__ */ jsx("button", {
+													/* @__PURE__ */ jsxs("span", {
+														className: "shrink-0 font-normal text-muted-foreground",
+														children: ["· ", sb.team.role]
+													})
+												]
+											}) : /* @__PURE__ */ jsxs("div", {
+												className: "inline-flex items-center gap-1.5 rounded-full bg-surface-container-high px-2.5 py-1 text-[11px] font-medium text-muted-foreground",
+												title: "Personal sandbox",
+												children: [/* @__PURE__ */ jsx(User, {
+													className: "h-3 w-3",
+													"aria-hidden": "true"
+												}), "Personal"]
+											})
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-6 py-5",
+											children: /* @__PURE__ */ jsxs("div", {
+												className: cn$1("flex min-w-0 items-center gap-3", hasTeamSandboxes ? "max-w-26" : "max-w-28"),
+												children: [sb.imageIcon && /* @__PURE__ */ jsx("div", {
+													className: "w-8 h-8 shrink-0 rounded-lg bg-surface-container-high flex items-center justify-center",
+													children: sb.imageIcon
+												}), sb.image && /* @__PURE__ */ jsx("span", {
+													className: "min-w-0 truncate text-xs font-bold text-foreground",
+													title: sb.image,
+													children: sb.image
+												})]
+											})
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-6 py-5",
+											children: isActive ? /* @__PURE__ */ jsxs("div", {
+												className: cn$1("space-y-3", hasTeamSandboxes ? "w-44" : "w-48"),
+												children: [/* @__PURE__ */ jsx(MiniMeter, {
+													label: "CPU",
+													percent: sb.cpuPercent ?? 0
+												}), /* @__PURE__ */ jsx(MiniMeter, {
+													label: "RAM",
+													percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0
+												})]
+											}) : isProvisioning ? /* @__PURE__ */ jsxs("div", {
+												className: cn$1("flex items-center gap-2 text-primary italic text-[10px] font-bold", hasTeamSandboxes ? "max-w-44" : "max-w-48"),
+												children: [/* @__PURE__ */ jsx(RefreshCw, {
+													className: "h-3.5 w-3.5 shrink-0 animate-spin",
+													"data-motion": "essential"
+												}), /* @__PURE__ */ jsx("span", {
+													className: "min-w-0 truncate",
+													title: sb.provisioningMessage ?? "Allocating nodes...",
+													children: sb.provisioningMessage ?? "Allocating nodes..."
+												})]
+											}) : isHibernating ? /* @__PURE__ */ jsxs("div", {
+												className: cn$1("space-y-3 opacity-30", hasTeamSandboxes ? "w-44" : "w-48"),
+												children: [/* @__PURE__ */ jsx(MiniMeter, {
+													label: "CPU",
+													percent: 0
+												}), /* @__PURE__ */ jsx(MiniMeter, {
+													label: "RAM",
+													percent: 0
+												})]
+											}) : null
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-6 py-5 text-right",
+											children: /* @__PURE__ */ jsxs("div", {
+												className: "flex items-center justify-end gap-1",
+												children: [
+													isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+														/* @__PURE__ */ jsx("button", {
+															type: "button",
+															onClick: (e) => {
+																stopRowClick(e);
+																onOpenIDE?.(sb.id);
+															},
+															className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
+															title: "Open IDE",
+															children: /* @__PURE__ */ jsx(Code2, { className: "h-4 w-4" })
+														}),
+														/* @__PURE__ */ jsx("button", {
+															type: "button",
+															onClick: (e) => {
+																stopRowClick(e);
+																onOpenTerminal?.(sb.id);
+															},
+															className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
+															title: "Terminal",
+															children: /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" })
+														}),
+														/* @__PURE__ */ jsx("button", {
+															type: "button",
+															onClick: (e) => {
+																stopRowClick(e);
+																onSSH?.(sb.id);
+															},
+															className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
+															title: "SSH",
+															children: /* @__PURE__ */ jsx(Key, { className: "h-4 w-4" })
+														})
+													] }),
+													resumeHandler && /* @__PURE__ */ jsxs("button", {
 														type: "button",
 														onClick: (e) => {
 															stopRowClick(e);
-															onOpenTerminal?.(sb.id);
+															resumeHandler(sb.id);
 														},
-														className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
-														title: "Terminal",
-														children: /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" })
+														className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--md3-outline-variant)] text-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all",
+														title: resumeLabel,
+														children: [/* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }), resumeLabel]
 													}),
-													/* @__PURE__ */ jsx("button", {
+													(() => {
+														const runItem = (handler) => (e) => {
+															e.stopPropagation();
+															handler(sb.id);
+														};
+														const overflowSections = [];
+														if (isActive) {
+															const lifecycle = [];
+															if (onStop) lifecycle.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
+																onClick: runItem(onStop),
+																children: [/* @__PURE__ */ jsx(PowerOff, { className: "mr-2 h-4 w-4" }), " Stop Sandbox"]
+															}, "stop"));
+															if (onKeepAlive) lifecycle.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
+																onClick: runItem(onKeepAlive),
+																children: [/* @__PURE__ */ jsx(Clock, { className: "mr-2 h-4 w-4" }), " Keep Alive"]
+															}, "keep-alive"));
+															if (lifecycle.length) overflowSections.push(lifecycle);
+															const observability = [];
+															if (onUsage) observability.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
+																onClick: runItem(onUsage),
+																children: [/* @__PURE__ */ jsx(BarChart2, { className: "mr-2 h-4 w-4" }), " View Usage"]
+															}, "usage"));
+															if (onHealth) observability.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
+																onClick: runItem(onHealth),
+																children: [/* @__PURE__ */ jsx(Activity, { className: "mr-2 h-4 w-4" }), " Health Check"]
+															}, "health"));
+															if (observability.length) overflowSections.push(observability);
+															if (onFork) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
+																onClick: runItem(onFork),
+																children: [/* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }), " Fork Sandbox"]
+															}, "fork")]);
+														} else if (isResumable(sb.status)) {
+															if (onFork) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
+																onClick: runItem(onFork),
+																children: [/* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }), " Fork Sandbox"]
+															}, "fork")]);
+														}
+														if (onMore) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
+															onClick: runItem(onMore),
+															children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " View Details"]
+														}, "view-details")]);
+														if (overflowSections.length === 0) return null;
+														return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+															asChild: true,
+															children: /* @__PURE__ */ jsx("button", {
+																type: "button",
+																onClick: stopRowClick,
+																className: `p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90 ${focusRing}`,
+																"aria-label": `More actions for ${sb.name}`,
+																title: "More actions",
+																children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+															})
+														}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+															align: "end",
+															className: "min-w-[180px]",
+															children: overflowSections.map((section, sectionIdx) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [sectionIdx > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), section] }, sectionIdx))
+														})] });
+													})(),
+													onDelete && canAdminSandbox(sb) && /* @__PURE__ */ jsx("button", {
 														type: "button",
+														"aria-label": `Delete ${sb.name}`,
 														onClick: (e) => {
 															stopRowClick(e);
-															onSSH?.(sb.id);
+															onDelete(sb.id);
 														},
-														className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
-														title: "SSH",
-														children: /* @__PURE__ */ jsx(Key, { className: "h-4 w-4" })
+														className: `p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-muted-foreground hover:text-[var(--surface-danger-text)] transition-all active:scale-90 ${focusRing}`,
+														title: "Delete",
+														children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
 													})
-												] }),
-												resumeHandler && /* @__PURE__ */ jsxs("button", {
-													type: "button",
-													onClick: (e) => {
-														stopRowClick(e);
-														resumeHandler(sb.id);
-													},
-													className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--md3-outline-variant)] text-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all",
-													title: resumeLabel,
-													children: [/* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }), resumeLabel]
-												}),
-												(() => {
-													const runItem = (handler) => (e) => {
-														e.stopPropagation();
-														handler(sb.id);
-													};
-													const overflowSections = [];
-													if (isActive) {
-														const lifecycle = [];
-														if (onStop) lifecycle.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
-															onClick: runItem(onStop),
-															children: [/* @__PURE__ */ jsx(PowerOff, { className: "mr-2 h-4 w-4" }), " Stop Sandbox"]
-														}, "stop"));
-														if (onKeepAlive) lifecycle.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
-															onClick: runItem(onKeepAlive),
-															children: [/* @__PURE__ */ jsx(Clock, { className: "mr-2 h-4 w-4" }), " Keep Alive"]
-														}, "keep-alive"));
-														if (lifecycle.length) overflowSections.push(lifecycle);
-														const observability = [];
-														if (onUsage) observability.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
-															onClick: runItem(onUsage),
-															children: [/* @__PURE__ */ jsx(BarChart2, { className: "mr-2 h-4 w-4" }), " View Usage"]
-														}, "usage"));
-														if (onHealth) observability.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
-															onClick: runItem(onHealth),
-															children: [/* @__PURE__ */ jsx(Activity, { className: "mr-2 h-4 w-4" }), " Health Check"]
-														}, "health"));
-														if (observability.length) overflowSections.push(observability);
-														if (onFork) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
-															onClick: runItem(onFork),
-															children: [/* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }), " Fork Sandbox"]
-														}, "fork")]);
-													} else if (isResumable(sb.status)) {
-														if (onFork) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
-															onClick: runItem(onFork),
-															children: [/* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }), " Fork Sandbox"]
-														}, "fork")]);
-													}
-													if (onMore) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
-														onClick: runItem(onMore),
-														children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " View Details"]
-													}, "view-details")]);
-													if (overflowSections.length === 0) return null;
-													return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-														asChild: true,
-														children: /* @__PURE__ */ jsx("button", {
-															type: "button",
-															onClick: stopRowClick,
-															className: `p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90 ${focusRing}`,
-															"aria-label": `More actions for ${sb.name}`,
-															title: "More actions",
-															children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
-														})
-													}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-														align: "end",
-														className: "min-w-[180px]",
-														children: overflowSections.map((section, sectionIdx) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [sectionIdx > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), section] }, sectionIdx))
-													})] });
-												})(),
-												onDelete && canAdminSandbox(sb) && /* @__PURE__ */ jsx("button", {
-													type: "button",
-													"aria-label": `Delete ${sb.name}`,
-													onClick: (e) => {
-														stopRowClick(e);
-														onDelete(sb.id);
-													},
-													className: `p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-muted-foreground hover:text-[var(--surface-danger-text)] transition-all active:scale-90 ${focusRing}`,
-													title: "Delete",
-													children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
-												})
-											]
+												]
+											})
 										})
-									})
-								]
-							}, sb.id);
-						})
-					})]
+									]
+								}, sb.id);
+							})
+						})]
+					})
 				})
+			}),
+			totalPages > 1 && /* @__PURE__ */ jsxs("div", {
+				className: "mt-6 flex flex-col md:flex-row justify-between items-center text-muted-foreground text-xs font-medium gap-4",
+				children: [/* @__PURE__ */ jsxs("p", { children: [
+					"Showing ",
+					sandboxes.length,
+					" of ",
+					totalCount,
+					" active sandboxes"
+				] }), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onPageChange?.(page - 1),
+							disabled: page <= 1,
+							className: "p-2 rounded-lg border border-[var(--md3-outline-variant)] hover:bg-surface-container-high transition-colors disabled:opacity-30",
+							children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+						}),
+						Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onPageChange?.(p),
+							className: cn$1("px-3 py-1 rounded-lg transition-colors", p === page ? "bg-[var(--accent-surface-soft)] text-primary border border-[var(--md3-outline)]" : "hover:bg-surface-container-high"),
+							children: p
+						}, p)),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onPageChange?.(page + 1),
+							disabled: page >= totalPages,
+							className: "p-2 rounded-lg border border-[var(--md3-outline-variant)] hover:bg-surface-container-high transition-colors disabled:opacity-30",
+							children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+						})
+					]
+				})]
 			})
-		}), totalPages > 1 && /* @__PURE__ */ jsxs("div", {
-			className: "mt-6 flex flex-col md:flex-row justify-between items-center text-muted-foreground text-xs font-medium gap-4",
-			children: [/* @__PURE__ */ jsxs("p", { children: [
-				"Showing ",
-				sandboxes.length,
-				" of ",
-				totalCount,
-				" active sandboxes"
-			] }), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => onPageChange?.(page - 1),
-						disabled: page <= 1,
-						className: "p-2 rounded-lg border border-[var(--md3-outline-variant)] hover:bg-surface-container-high transition-colors disabled:opacity-30",
-						children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-					}),
-					Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => onPageChange?.(p),
-						className: cn$1("px-3 py-1 rounded-lg transition-colors", p === page ? "bg-[var(--accent-surface-soft)] text-primary border border-[var(--md3-outline)]" : "hover:bg-surface-container-high"),
-						children: p
-					}, p)),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => onPageChange?.(page + 1),
-						disabled: page >= totalPages,
-						className: "p-2 rounded-lg border border-[var(--md3-outline-variant)] hover:bg-surface-container-high transition-colors disabled:opacity-30",
-						children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-					})
-				]
-			})]
-		})]
+		]
 	});
 }
 //#endregion

package/dist/dashboard.js

@@ -1,4 +1,4 @@
-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 { $ 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-Bx27mUVe.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";
 export { ActivityFeed, BackendConfig, BackendSelector, BillingDashboard, ClusterStatusBar, CreditBalance, DashboardLayout, GitPanel, HARNESS_BRAND, HARNESS_OPTIONS, HarnessLogo, HarnessPicker, INSUFFICIENT_BALANCE_CODE, InfoPanel, InvoiceTable, MetricAreaChart, ModelBrandStack, NetworkConfig, NewSandboxCard, OutOfCreditsModal, PlanCards, PortsList, PricingPage, ProcessList, ProfileAvatar, ProfileComparison, ProfileSelector, PromoBanner, RailButton, RailCollapseToggle, RailExpandable, RailFlyout, RailHeader, RailModeButton, RailSeparator, RailThemeToggle, RailTooltip, ResourceMeter, ResourceSnapshot, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxTable, Sidebar, SidebarContent, SidebarLayout, SidebarPanel, SidebarPanelContent, SidebarPanelHeader, SidebarProvider, SidebarRail, SidebarRailFooter, SidebarRailHeader, SidebarRailNav, SnapshotList, SystemLogsViewer, TemplateCard, UsageChart, UsageSummary, VariantList, canAdminSandbox, canonicalModelId, chatCapableHarnesses, formatPrice, modelBrandFor, parseInsufficientBalance, useSidebar };

package/dist/globals.css

@@ -971,6 +971,9 @@
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
+  .max-h-\[min\(60vh\,35rem\)\] {
+    max-height: min(60vh, 35rem);
+  }
   .max-h-\[min\(60vh\,420px\)\] {
     max-height: min(60vh, 420px);
   }
@@ -1040,6 +1043,9 @@
   .min-h-\[120px\] {
     min-height: 120px;
   }
+  .min-h-\[136px\] {
+    min-height: 136px;
+  }
   .min-h-\[160px\] {
     min-height: 160px;
   }
@@ -1310,9 +1316,27 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
+  .max-w-26 {
+    max-width: calc(var(--spacing) * 26);
+  }
+  .max-w-28 {
+    max-width: calc(var(--spacing) * 28);
+  }
+  .max-w-36 {
+    max-width: calc(var(--spacing) * 36);
+  }
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
+  .max-w-44 {
+    max-width: calc(var(--spacing) * 44);
+  }
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
   .max-w-80 {
     max-width: calc(var(--spacing) * 80);
   }
@@ -1430,6 +1454,9 @@
   .max-w-\[1050px\] {
     max-width: 1050px;
   }
+  .max-w-\[1086px\] {
+    max-width: 1086px;
+  }
   .max-w-\[1100px\] {
     max-width: 1100px;
   }
@@ -5061,6 +5088,12 @@
   .\[\&_svg\]\:shrink-0 svg {
     flex-shrink: 0;
   }
+  .\[\&_td\]\:px-4 td {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .\[\&_th\]\:px-4 th {
+    padding-inline: calc(var(--spacing) * 4);
+  }
   .\[\&_tr\]\:border-b tr {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;

package/dist/index.js

@@ -1,8 +1,8 @@
-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 { 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-BbeBgtUT.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-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-Pq-koOTW.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 { $ 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-Bx27mUVe.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-Bf4hBLXJ.js";

package/dist/integrations.d.ts

@@ -47,6 +47,12 @@ interface IntegrationHealth {
 //#endregion
 //#region src/integrations/integrations-panel.d.ts
 type IntegrationSort = "featured" | "alpha";
+interface IntegrationConnectionAction {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  onSelect: () => void | Promise<void>;
+}
 interface IntegrationsPanelProps {
   catalog: IntegrationProvider[];
   connections: IntegrationConnection[];
@@ -86,6 +92,10 @@ interface IntegrationsPanelProps {
     connectionId: string;
     providerId: string;
   }) => void | Promise<void>;
+  /** Consumer-owned access context shown below the connected account. */
+  getConnectionContext?: (connection: IntegrationConnection) => string | undefined;
+  /** Additional authorized actions in the connected card menu. */
+  getConnectionActions?: (connection: IntegrationConnection) => IntegrationConnectionAction[];
   /** Empty-state message when the catalog hasn't loaded any providers. */
   emptyCatalogLabel?: string;
   /**
@@ -104,7 +114,7 @@ interface IntegrationsPanelProps {
   skeletonCount?: number;
   className?: string;
 }
-export declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, emptyCatalogLabel, featuredIds, defaultSort, skeletonCount, className }: IntegrationsPanelProps): React$1.JSX.Element;
+export declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, getConnectionContext, getConnectionActions, emptyCatalogLabel, featuredIds, defaultSort, skeletonCount, className }: IntegrationsPanelProps): React$1.JSX.Element;
 //#endregion
 //#region src/integrations/use-integrations.d.ts
 /**
@@ -188,4 +198,4 @@ interface ProviderIconProps {
  */
 export declare function ProviderIcon({ id, iconUrl, displayName, size, className }: ProviderIconProps): React$1.JSX.Element;
 //#endregion
-export type { ConnectInput, IntegrationConnection, IntegrationConnector, IntegrationHealth, IntegrationProvider, IntegrationSort, IntegrationsPanelProps, ProviderIconProps, UseIntegrationsOptions, UseIntegrationsResult };
+export type { ConnectInput, IntegrationConnection, IntegrationConnectionAction, IntegrationConnector, IntegrationHealth, IntegrationProvider, IntegrationSort, IntegrationsPanelProps, ProviderIconProps, UseIntegrationsOptions, UseIntegrationsResult };

package/dist/integrations.js

@@ -118,7 +118,21 @@ function displayNameOf(provider) {
 function matchesQuery(provider, q) {
 	return `${displayNameOf(provider)} ${provider.providerId} ${provider.description ?? ""}`.toLowerCase().includes(q);
 }
-function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, emptyCatalogLabel = "No integrations available yet.", featuredIds = DEFAULT_FEATURED_IDS, defaultSort = "featured", skeletonCount = DEFAULT_SKELETON_COUNT, className }) {
+function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, getConnectionContext, getConnectionActions, emptyCatalogLabel = "No integrations available yet.", featuredIds = DEFAULT_FEATURED_IDS, defaultSort = "featured", skeletonCount = DEFAULT_SKELETON_COUNT, className }) {
+	const tileBoxClass = cn(TILE_BOX_CLASS, getConnectionContext && "w-full min-h-[136px]");
+	const [actionError, setActionError] = React$1.useState(null);
+	const [pendingAction, setPendingAction] = React$1.useState(false);
+	const runConnectionAction = async (action) => {
+		setActionError(null);
+		setPendingAction(true);
+		try {
+			await action.onSelect();
+		} catch (error) {
+			setActionError(error instanceof Error ? error.message : "Could not update the connection.");
+		} finally {
+			setPendingAction(false);
+		}
+	};
 	const [query, setQuery] = React$1.useState("");
 	const [sort, setSort] = React$1.useState(defaultSort);
 	const [disconnectTarget, setDisconnectTarget] = React$1.useState(null);
@@ -213,7 +227,7 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 			className: TILE_GRID_CLASS,
 			children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxs("div", {
 				"aria-hidden": true,
-				className: cn(TILE_BOX_CLASS, "animate-pulse border-border bg-muted/40"),
+				className: cn(tileBoxClass, "animate-pulse border-border bg-muted/40"),
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "shrink-0 rounded-2xl bg-muted",
 					style: {
@@ -243,6 +257,11 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 				sort,
 				onSortChange: setSort
 			}),
+			actionError ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-sm text-destructive",
+				children: actionError
+			}) : null,
 			connectError ? /* @__PURE__ */ jsx("div", {
 				role: "alert",
 				"data-testid": "integration-connect-error",
@@ -259,13 +278,15 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 					const live = connectionIndex.get(`${provider.providerId}:${connectorId}`);
 					const name = displayNameOf(provider);
 					if (Boolean(live) && live) {
+						const connectionContext = getConnectionContext?.(live);
+						const connectionActions = getConnectionActions?.(live) ?? [];
 						const manageHref = getManageHref?.(live);
 						const canManage = Boolean(manageHref) || Boolean(onManage);
 						return /* @__PURE__ */ jsxs("div", {
 							"data-testid": `integration-${provider.providerId}`,
 							"data-connected": "true",
 							title: live.accountDisplay ? `${name} — ${live.accountDisplay}` : name,
-							className: cn(TILE_BOX_CLASS, "group relative", "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"),
+							className: cn(tileBoxClass, "group relative", "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"),
 							children: [
 								manageHref ? /* @__PURE__ */ jsx("a", {
 									href: manageHref,
@@ -302,6 +323,11 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 										}) : null]
 									})]
 								}),
+								connectionContext ? /* @__PURE__ */ jsx("span", {
+									className: "pointer-events-none w-full truncate text-[11px] leading-4 text-muted-foreground",
+									title: connectionContext,
+									children: connectionContext
+								}) : null,
 								/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 									asChild: true,
 									children: /* @__PURE__ */ jsx("button", {
@@ -334,7 +360,14 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 											}),
 											children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Manage"]
 										}) : null,
-										canManage ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+										connectionActions.map((action) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+											disabled: action.disabled || pendingAction,
+											onSelect: () => {
+												runConnectionAction(action);
+											},
+											children: action.label
+										}, action.id)),
+										canManage || connectionActions.length > 0 ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
 										/* @__PURE__ */ jsxs(DropdownMenuItem, {
 											"data-testid": `disconnect-${provider.providerId}`,
 											className: "text-destructive focus:text-destructive",
@@ -364,7 +397,7 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 							});
 						},
 						title: provider.description ? provider.description : `Connect ${name}`,
-						className: cn(TILE_BOX_CLASS, "group border-border bg-card transition-all", "hover:border-[var(--border-strong)] hover:bg-accent/40 hover:shadow-sm", focusRing),
+						className: cn(tileBoxClass, "group border-border bg-card transition-all", "hover:border-[var(--border-strong)] hover:bg-accent/40 hover:shadow-sm", focusRing),
 						children: [/* @__PURE__ */ jsx(ProviderIcon, {
 							id: provider.providerId,
 							iconUrl: provider.iconUrl,

package/dist/styles.css

@@ -971,6 +971,9 @@
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
+  .max-h-\[min\(60vh\,35rem\)\] {
+    max-height: min(60vh, 35rem);
+  }
   .max-h-\[min\(60vh\,420px\)\] {
     max-height: min(60vh, 420px);
   }
@@ -1040,6 +1043,9 @@
   .min-h-\[120px\] {
     min-height: 120px;
   }
+  .min-h-\[136px\] {
+    min-height: 136px;
+  }
   .min-h-\[160px\] {
     min-height: 160px;
   }
@@ -1310,9 +1316,27 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
+  .max-w-26 {
+    max-width: calc(var(--spacing) * 26);
+  }
+  .max-w-28 {
+    max-width: calc(var(--spacing) * 28);
+  }
+  .max-w-36 {
+    max-width: calc(var(--spacing) * 36);
+  }
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
+  .max-w-44 {
+    max-width: calc(var(--spacing) * 44);
+  }
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
   .max-w-80 {
     max-width: calc(var(--spacing) * 80);
   }
@@ -1430,6 +1454,9 @@
   .max-w-\[1050px\] {
     max-width: 1050px;
   }
+  .max-w-\[1086px\] {
+    max-width: 1086px;
+  }
   .max-w-\[1100px\] {
     max-width: 1100px;
   }
@@ -5061,6 +5088,12 @@
   .\[\&_svg\]\:shrink-0 svg {
     flex-shrink: 0;
   }
+  .\[\&_td\]\:px-4 td {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .\[\&_th\]\:px-4 th {
+    padding-inline: calc(var(--spacing) * 4);
+  }
   .\[\&_tr\]\:border-b tr {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;

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

@@ -1,5 +1,5 @@
 import { t as cn$1 } from "./utils-DzWbktWG.js";
-import { o as PortsList } from "./dashboard-CqyJQc7V.js";
+import { o as PortsList } from "./dashboard-Bx27mUVe.js";
 import { n as TerminalView } from "./terminal-DmSUfGha.js";
 import { RichFileTree } from "./files.js";
 import { n as PreviewView } from "./embedded-app-view-CoiS_kfY.js";

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-DJlOqodW.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-BbeBgtUT.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/package.json

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