@tangle-network/sandbox-ui 0.121.1 → 0.122.0

package/dist/{dashboard-CESeH2xQ.js → dashboard-BpEeXRo1.js}

@@ -1,14 +1,14 @@
-import { Wt as Logo, o as Button$1 } from "./primitives-BQGtwZX3.js";
+import { Wt as Logo, o as Button$1 } from "./primitives-C4qn9fZ8.js";
 import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { n as MOTION_SURFACE, r as MOTION_TRAVEL, t as MOTION_CONTROL } from "./motion-DkyBRJb9.js";
 import { i as moonshot_default } from "./model-brand-hMyDTUqB.js";
-import "./info-panel-C9cqDzOL.js";
+import "./page-layout-Cf90DTWr.js";
 import { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Skeleton, StatCard, useTheme } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-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 { 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, RotateCcw, Server, Settings, ShieldAlert, Skull, Terminal, Timer, Trash2, User, Users, Wrench, X, XCircle } from "lucide-react";
 import { focusField, focusFieldWithin, focusRing, focusRingInset, timeAgo } from "@tangle-network/ui/utils";
 import * as Select$1 from "@radix-ui/react-select";
 //#region src/dashboard/sidebar-context.tsx
@@ -1464,6 +1464,10 @@ const STATUS_META = {
 		label: "Failed",
 		color: "var(--status-error)"
 	},
+	expired: {
+		label: "Expired",
+		color: "var(--status-deleted)"
+	},
 	archived: {
 		label: "Archived",
 		color: "var(--status-deleted)"
@@ -1489,16 +1493,13 @@ function Spec({ icon, value, unit }) {
 		]
 	});
 }
-function UnknownMetric({ label }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between text-xs font-mono uppercase tracking-wide text-muted-foreground",
-		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", { children: "Unknown" })]
-	});
+function validMetric(value, max) {
+	return value != null && max != null && Number.isFinite(value) && Number.isFinite(max) && max > 0 && value >= 0 && value <= max;
 }
 function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, onDelete, onStop, onResume, onFork, onKeepAlive, onUsage, onHealth, className }) {
 	const isRunning = sandbox.status === "running";
 	const isTransitioning = sandbox.status === "provisioning" || sandbox.status === "creating";
-	const isStopped = !isRunning && !isTransitioning;
+	const isStopped = !isRunning && !isTransitioning && sandbox.status !== "expired";
 	const isHibernating = sandbox.status === "hibernating";
 	const resolveResumeHandler = (status) => {
 		if (onResume) return onResume;
@@ -1513,6 +1514,9 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, on
 	const ramTotal = sandbox.ramTotal;
 	const diskUsed = sandbox.diskUsed;
 	const diskTotal = sandbox.diskTotal;
+	const hasCpu = validMetric(cpuPercent, 100);
+	const hasRam = validMetric(ramUsed, ramTotal);
+	const hasDisk = validMetric(diskUsed, diskTotal);
 	const specs = [
 		sandbox.vcpu != null && {
 			key: "vcpu",
@@ -1647,26 +1651,23 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, on
 							children: ["up ", sandbox.uptime]
 						})]
 					}),
-					isRunning ? /* @__PURE__ */ jsxs("div", {
+					isRunning && (hasCpu || hasRam || hasDisk) ? /* @__PURE__ */ jsxs("div", {
 						className: "space-y-2 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-high p-3",
 						children: [
-							cpuPercent != null ? /* @__PURE__ */ jsx(ResourceMeter, {
+							hasCpu && cpuPercent != null && /* @__PURE__ */ jsx(ResourceMeter, {
 								label: "CPU",
 								value: cpuPercent,
 								max: 100,
 								icon: /* @__PURE__ */ jsx(Cpu, { className: "h-3 w-3" })
-							}) : /* @__PURE__ */ jsx(UnknownMetric, { label: "CPU" }),
-							ramUsed != null && ramTotal != null && ramTotal > 0 ? /* @__PURE__ */ jsx(ResourceMeter, {
+							}),
+							hasRam && ramUsed != null && ramTotal != null && /* @__PURE__ */ jsx(ResourceMeter, {
 								label: "RAM",
 								value: ramUsed,
 								max: ramTotal,
 								valueLabel: String(ramUsed) + " / " + String(ramTotal) + " GB",
 								icon: /* @__PURE__ */ jsx(MemoryStick, { className: "h-3 w-3" })
-							}) : ramUsed != null ? /* @__PURE__ */ jsxs("p", {
-								className: "flex items-center justify-between text-xs font-mono uppercase tracking-wide text-muted-foreground",
-								children: [/* @__PURE__ */ jsx("span", { children: "RAM" }), /* @__PURE__ */ jsxs("span", { children: [String(ramUsed), " GB used; capacity unknown"] })]
-							}) : /* @__PURE__ */ jsx(UnknownMetric, { label: "RAM" }),
-							diskUsed != null && diskTotal != null && diskTotal > 0 && /* @__PURE__ */ jsx(ResourceMeter, {
+							}),
+							hasDisk && diskUsed != null && diskTotal != null && /* @__PURE__ */ jsx(ResourceMeter, {
 								label: "DISK",
 								value: diskUsed,
 								max: diskTotal,
@@ -1714,7 +1715,7 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, on
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx("div", {
+			sandbox.status !== "expired" && /* @__PURE__ */ jsx("div", {
 				className: "border-t border-[var(--md3-outline-variant)] pt-3",
 				children: isRunning ? /* @__PURE__ */ jsxs("button", {
 					type: "button",
@@ -1786,6 +1787,11 @@ const statusColors = {
 		text: "text-[var(--surface-danger-text)]",
 		bar: "bg-[var(--code-error)]"
 	},
+	expired: {
+		dot: "bg-border",
+		text: "text-muted-foreground",
+		bar: "bg-border"
+	},
 	archived: {
 		dot: "bg-border",
 		text: "text-muted-foreground",
@@ -1793,27 +1799,33 @@ const statusColors = {
 	}
 };
 function isResumable(status) {
-	return status !== "running" && status !== "provisioning" && status !== "creating";
+	return status !== "running" && status !== "provisioning" && status !== "creating" && status !== "expired";
+}
+function validPercent(value) {
+	return value != null && Number.isFinite(value) && value >= 0 && value <= 100;
 }
-function MiniMeter({ label, percent, className }) {
-	const hasValue = percent != null && Number.isFinite(percent);
+function ramPercent(sandbox) {
+	if (sandbox.ramUsed == null || sandbox.ramTotal == null || !Number.isFinite(sandbox.ramUsed) || !Number.isFinite(sandbox.ramTotal) || sandbox.ramTotal <= 0) return void 0;
+	const value = sandbox.ramUsed / sandbox.ramTotal * 100;
+	return validPercent(value) ? Math.round(value) : void 0;
+}
+function MiniMeter({ label, percent }) {
+	if (!validPercent(percent)) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$1("space-y-1", className),
+		className: "min-w-0 flex-1 space-y-1.5",
+		"aria-label": `${label} ${percent}%`,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex justify-between text-[10px] font-mono text-muted-foreground",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "font-bold",
-				children: label
-			}), /* @__PURE__ */ jsx("span", {
-				className: hasValue ? "text-[var(--accent-text)]" : "text-muted-foreground",
-				children: hasValue ? String(percent) + "%" : "Unknown"
+			className: "flex justify-between gap-2 text-xs text-muted-foreground",
+			children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsxs("span", {
+				className: "tabular-nums text-foreground",
+				children: [percent, "%"]
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+			className: "h-1 w-full overflow-hidden rounded-full bg-surface-container-high",
 			"aria-hidden": "true",
-			children: hasValue && /* @__PURE__ */ jsx("div", {
+			children: /* @__PURE__ */ jsx("div", {
 				className: "h-full rounded-full bg-primary",
-				style: { width: String(percent) + "%" }
+				style: { width: `${percent}%` }
 			})
 		})]
 	});
@@ -1827,41 +1839,25 @@ function StatusIndicator({ status }) {
 			"aria-hidden": "true",
 			...sc.dot.includes("animate-") ? { "data-motion": "essential" } : {}
 		}), /* @__PURE__ */ jsx("span", {
-			className: cn$1("text-xs font-bold uppercase tracking-wide", sc.text),
+			className: cn$1("text-xs font-medium", sc.text),
 			children: status.charAt(0).toUpperCase() + status.slice(1)
 		})]
 	});
 }
-function SandboxResources({ sandbox, className }) {
-	if (sandbox.status === "running") {
-		const ramPercent = sandbox.ramUsed != null && sandbox.ramTotal != null && sandbox.ramTotal > 0 ? Math.round(sandbox.ramUsed / sandbox.ramTotal * 100) : void 0;
-		return /* @__PURE__ */ jsxs("div", {
-			className: cn$1("min-w-0 space-y-3", className),
-			children: [/* @__PURE__ */ jsx(MiniMeter, {
-				label: "CPU",
-				percent: sandbox.cpuPercent
-			}), /* @__PURE__ */ jsx(MiniMeter, {
-				label: "RAM",
-				percent: ramPercent
-			})]
-		});
-	}
-	if (sandbox.status === "provisioning" || sandbox.status === "creating") return /* @__PURE__ */ jsxs("div", {
-		className: cn$1("flex min-w-0 items-center gap-2 text-[var(--accent-text)] italic text-[10px] font-bold", className),
-		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: sandbox.provisioningMessage ?? "Allocating nodes...",
-			children: sandbox.provisioningMessage ?? "Allocating nodes..."
+function SandboxResources({ sandbox }) {
+	if (sandbox.status !== "running") return null;
+	const ram = ramPercent(sandbox);
+	if (!validPercent(sandbox.cpuPercent) && ram == null) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 items-center gap-4",
+		children: [/* @__PURE__ */ jsx(MiniMeter, {
+			label: "CPU",
+			percent: sandbox.cpuPercent
+		}), /* @__PURE__ */ jsx(MiniMeter, {
+			label: "RAM",
+			percent: ram
 		})]
 	});
-	if (sandbox.status === "hibernating") return /* @__PURE__ */ jsx("p", {
-		className: cn$1("text-xs text-muted-foreground", className),
-		children: "Not running"
-	});
-	return null;
 }
 function getPageItems(page, totalPages) {
 	if (totalPages <= 7) return Array.from({ length: totalPages }, (_, index) => index + 1);
@@ -1889,6 +1885,7 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 	const rangeStart = totalCount === 0 || sandboxes.length === 0 ? 0 : (currentPage - 1) * safePageSize + 1;
 	const rangeEnd = rangeStart === 0 ? 0 : Math.min(rangeStart + sandboxes.length - 1, totalCount);
 	const hasTeamSandboxes = sandboxes.some((sb) => sb.team !== void 0);
+	const hasResources = sandboxes.some((sb) => sb.status === "running" && (validPercent(sb.cpuPercent) || ramPercent(sb) != null));
 	const resolveResumeHandler = (status) => {
 		if (onResume) return onResume;
 		if (status === "hibernating") return onWake;
@@ -1902,7 +1899,7 @@ 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)]",
+			className: "w-full bg-surface-container rounded-xl overflow-hidden border border-[var(--md3-outline-variant)]",
 			children: /* @__PURE__ */ jsx("div", {
 				className: cn$1("max-h-[min(60vh,35rem)] overflow-x-hidden overflow-y-auto", focusRingInset),
 				role: "region",
@@ -1917,32 +1914,27 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 							children: [
 								/* @__PURE__ */ jsx("th", {
 									scope: "col",
-									className: "hidden w-36 px-3 py-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground xl:table-cell",
+									className: "hidden w-36 px-4 py-3 text-xs font-medium text-muted-foreground md:table-cell",
 									children: "Status"
 								}),
 								/* @__PURE__ */ jsx("th", {
 									scope: "col",
-									className: "px-3 py-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground xl:px-6",
+									className: "px-4 py-3 text-xs font-medium text-muted-foreground",
 									children: "Sandbox"
 								}),
 								hasTeamSandboxes && /* @__PURE__ */ jsx("th", {
 									scope: "col",
-									className: "hidden w-32 px-3 py-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground xl:table-cell",
+									className: "hidden w-40 px-4 py-3 text-xs font-medium text-muted-foreground xl:table-cell",
 									children: "Scope"
 								}),
-								/* @__PURE__ */ jsx("th", {
-									scope: "col",
-									className: "hidden w-28 px-3 py-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground xl:table-cell",
-									children: "Environment"
-								}),
-								/* @__PURE__ */ jsx("th", {
+								hasResources && /* @__PURE__ */ jsx("th", {
 									scope: "col",
-									className: "hidden w-48 px-3 py-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground xl:table-cell",
+									className: "hidden w-52 px-4 py-3 text-xs font-medium text-muted-foreground lg:table-cell",
 									children: "Resources"
 								}),
 								/* @__PURE__ */ jsx("th", {
 									scope: "col",
-									className: "w-28 px-2 py-4 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground xl:w-72 xl:px-4",
+									className: "w-44 px-3 py-3 text-right text-xs font-medium text-muted-foreground sm:w-48 sm:px-4",
 									children: "Actions"
 								})
 							]
@@ -1952,86 +1944,50 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 						children: sandboxes.map((sb) => {
 							const isActive = sb.status === "running";
 							const isHibernating = sb.status === "hibernating";
-							const isProvisioning = sb.status === "provisioning" || sb.status === "creating";
 							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"),
+								className: cn$1("group relative h-[72px] transition-colors", onRowClick ? "cursor-pointer hover:bg-surface-container-high" : "hover:bg-surface-container-high"),
 								onClick: onRowClick,
 								children: [
 									/* @__PURE__ */ jsx("td", {
-										className: "hidden px-3 py-4 align-top xl:table-cell xl:w-36 xl:px-4 xl:py-5",
+										className: "hidden px-4 py-3 align-middle md:table-cell",
 										children: /* @__PURE__ */ jsx(StatusIndicator, { status: sb.status })
 									}),
 									/* @__PURE__ */ jsx("td", {
-										className: "min-w-0 px-3 py-4 align-top xl:px-6 xl:py-5",
+										className: "min-w-0 px-4 py-3 align-middle",
 										children: /* @__PURE__ */ jsxs("div", {
-											className: "flex min-w-0 flex-col gap-2",
-											children: [/* @__PURE__ */ jsxs("div", {
-												className: "flex min-w-0 items-start gap-2",
-												children: [/* @__PURE__ */ jsx("div", {
-													className: "shrink-0 xl:hidden",
-													children: /* @__PURE__ */ jsx(StatusIndicator, { status: sb.status })
-												}), /* @__PURE__ */ jsxs("div", {
-													className: "min-w-0 flex-1",
-													children: [/* @__PURE__ */ jsx("span", {
-														className: "block min-w-0 truncate text-sm font-bold text-foreground transition-colors group-hover:text-[var(--accent-text)]",
-														title: sb.name,
-														"aria-label": sb.name,
-														children: sb.name
-													}), sb.nodeId && /* @__PURE__ */ jsx("span", {
-														className: "block min-w-0 truncate text-[10px] font-mono text-muted-foreground",
-														title: sb.nodeId,
-														children: sb.nodeId
-													})]
-												})]
+											className: "min-w-0 space-y-1",
+											children: [/* @__PURE__ */ jsx("span", {
+												className: "block truncate text-sm font-semibold text-foreground",
+												title: sb.name,
+												"aria-label": sb.name,
+												children: sb.name
 											}), /* @__PURE__ */ jsxs("div", {
-												className: "grid min-w-0 gap-1 text-[11px] xl:hidden",
+												className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground",
 												children: [
-													hasTeamSandboxes && /* @__PURE__ */ jsxs("div", {
-														className: "flex min-w-0 gap-2",
-														children: [/* @__PURE__ */ jsx("span", {
-															className: "shrink-0 text-muted-foreground",
-															children: "Scope"
-														}), sb.team ? /* @__PURE__ */ jsxs("span", {
-															className: "min-w-0 truncate text-foreground",
-															title: "Shared with " + (sb.team.name ?? "Team") + " · " + sb.team.role,
-															children: [
-																sb.team.name ?? "Team",
-																" - ",
-																sb.team.role
-															]
-														}) : /* @__PURE__ */ jsx("span", {
-															className: "text-foreground",
-															children: "Personal"
-														})]
+													/* @__PURE__ */ jsx("span", {
+														className: "md:hidden",
+														children: /* @__PURE__ */ jsx(StatusIndicator, { status: sb.status })
 													}),
-													(sb.customImage ?? sb.image) && /* @__PURE__ */ jsxs("div", {
-														className: "flex min-w-0 gap-2",
-														children: [/* @__PURE__ */ jsx("span", {
-															className: "shrink-0 text-muted-foreground",
-															children: "Environment"
-														}), /* @__PURE__ */ jsx("span", {
-															className: "min-w-0 truncate text-foreground",
-															title: sb.customImage ?? sb.image,
-															children: sb.customImage ?? sb.image
-														})]
+													sb.nodeId && /* @__PURE__ */ jsx("span", {
+														className: "hidden truncate font-mono text-xs md:block",
+														title: sb.nodeId,
+														children: sb.nodeId
 													}),
-													(isActive || isProvisioning || isHibernating) && /* @__PURE__ */ jsxs("div", {
-														className: "flex min-w-0 flex-col gap-1",
-														children: [/* @__PURE__ */ jsx("span", {
-															className: "text-muted-foreground",
-															children: "Resources"
-														}), /* @__PURE__ */ jsx(SandboxResources, { sandbox: sb })]
+													hasTeamSandboxes && /* @__PURE__ */ jsx("span", {
+														className: "truncate xl:hidden",
+														title: sb.team ? `${sb.team.name ?? "Team"} · ${sb.team.role}` : "Personal",
+														children: sb.team ? `${sb.team.name ?? "Team"} · ${sb.team.role}` : "Personal"
 													})
 												]
 											})]
 										})
 									}),
 									hasTeamSandboxes && /* @__PURE__ */ jsx("td", {
-										className: "hidden px-3 py-4 align-top xl:table-cell xl:px-4 xl:py-5",
+										className: "hidden px-4 py-3 align-middle xl:table-cell",
 										children: sb.team ? /* @__PURE__ */ jsxs("div", {
 											className: "inline-flex max-w-full items-center gap-1.5 overflow-hidden 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,
@@ -2058,73 +2014,41 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 											}), "Personal"]
 										})
 									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "hidden px-3 py-4 align-top xl:table-cell xl:px-4 xl:py-5",
-										children: /* @__PURE__ */ jsxs("div", {
-											className: "flex min-w-0 items-center gap-2",
-											children: [sb.imageIcon && /* @__PURE__ */ jsx("div", {
-												className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-surface-container-high",
-												children: sb.imageIcon
-											}), (sb.customImage ?? sb.image) && /* @__PURE__ */ jsx("span", {
-												className: "min-w-0 truncate text-xs font-bold text-foreground",
-												title: sb.customImage ?? sb.image,
-												children: sb.customImage ?? sb.image
-											})]
-										})
-									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "hidden px-3 py-4 align-top xl:table-cell xl:px-4 xl:py-5",
+									hasResources && /* @__PURE__ */ jsx("td", {
+										className: "hidden px-4 py-3 align-middle lg:table-cell",
 										children: /* @__PURE__ */ jsx(SandboxResources, { sandbox: sb })
 									}),
 									/* @__PURE__ */ jsx("td", {
-										className: "w-28 px-2 py-3 text-right align-top xl:w-72 xl:px-4 xl:py-5",
+										className: "w-44 px-3 py-3 text-right align-middle sm:w-48 sm:px-4",
 										children: /* @__PURE__ */ jsxs("div", {
-											className: "flex min-w-0 flex-wrap items-center justify-end gap-1",
+											className: "flex min-w-0 items-center justify-end gap-2",
 											children: [
-												isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
-													/* @__PURE__ */ jsx("button", {
-														type: "button",
-														onClick: (e) => {
-															stopRowClick(e);
-															onOpenIDE?.(sb.id);
-														},
-														className: cn$1("min-h-11 min-w-11 shrink-0 p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90", focusRing),
-														"aria-label": "Open IDE",
-														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: cn$1("min-h-11 min-w-11 shrink-0 p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90", focusRing),
-														"aria-label": "Open terminal",
-														title: "Terminal",
-														children: /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" })
-													}),
-													/* @__PURE__ */ jsx("button", {
-														type: "button",
-														onClick: (e) => {
-															stopRowClick(e);
-															onSSH?.(sb.id);
-														},
-														className: cn$1("min-h-11 min-w-11 shrink-0 p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90", focusRing),
-														"aria-label": "Open SSH details",
-														title: "SSH",
-														children: /* @__PURE__ */ jsx(Key, { className: "h-4 w-4" })
-													})
-												] }),
+												isActive && onOpenIDE && /* @__PURE__ */ jsxs("button", {
+													type: "button",
+													onClick: (e) => {
+														stopRowClick(e);
+														onOpenIDE(sb.id);
+													},
+													className: cn$1("inline-flex min-h-11 shrink-0 whitespace-nowrap items-center justify-center gap-2 rounded-lg border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-3 text-sm font-semibold text-[var(--accent-text)] shadow-sm transition-colors hover:bg-[var(--accent-surface-strong)]", focusRing),
+													"aria-label": "Open IDE",
+													title: "Open IDE",
+													children: [/* @__PURE__ */ jsx(Code2, {
+														className: "h-4 w-4 shrink-0",
+														"aria-hidden": "true"
+													}), /* @__PURE__ */ jsx("span", { children: "Open" })]
+												}),
 												resumeHandler && /* @__PURE__ */ jsxs("button", {
 													type: "button",
 													onClick: (e) => {
 														stopRowClick(e);
 														resumeHandler(sb.id);
 													},
-													className: cn$1("inline-flex min-h-11 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--md3-outline-variant)] text-[var(--accent-text)] text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all", focusRing),
+													className: cn$1("inline-flex min-h-11 shrink-0 whitespace-nowrap items-center justify-center gap-1.5 px-3 rounded-lg border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)] text-sm font-semibold shadow-sm hover:bg-[var(--accent-surface-strong)] transition-colors", focusRing),
 													title: resumeLabel,
-													children: [/* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }), resumeLabel]
+													children: [/* @__PURE__ */ jsx(Play, {
+														className: "h-4 w-4 shrink-0",
+														"aria-hidden": "true"
+													}), resumeLabel]
 												}),
 												(() => {
 													const runItem = (handler) => (e) => {
@@ -2133,6 +2057,16 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 													};
 													const overflowSections = [];
 													if (isActive) {
+														const access = [];
+														if (onOpenTerminal) access.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
+															onClick: runItem(onOpenTerminal),
+															children: [/* @__PURE__ */ jsx(Terminal, { className: "mr-2 h-4 w-4" }), " Open terminal"]
+														}, "terminal"));
+														if (onSSH) access.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
+															onClick: runItem(onSSH),
+															children: [/* @__PURE__ */ jsx(Key, { className: "mr-2 h-4 w-4" }), " SSH details"]
+														}, "ssh"));
+														if (access.length) overflowSections.push(access);
 														const lifecycle = [];
 														if (onStop) lifecycle.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
 															onClick: runItem(onStop),
@@ -2167,34 +2101,29 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 														onClick: runItem(onMore),
 														children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " View Details"]
 													}, "view-details")]);
+													if (onDelete && canAdminSandbox(sb)) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
+														onClick: runItem(onDelete),
+														className: "text-destructive focus:text-destructive",
+														"aria-label": `Delete ${sb.name}`,
+														children: [/* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }), " Delete"]
+													}, "delete")]);
 													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: `min-h-11 min-w-11 shrink-0 p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90 ${focusRing}`,
+															className: `inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-lg border border-border bg-surface-container-high text-foreground shadow-sm transition-colors hover:bg-surface-container-highest ${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]",
+														className: "min-w-[200px] border-border bg-surface-container-high shadow-xl [&_[role=menuitem]]:min-h-10 [&_[role=menuitem]]:text-sm",
 														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: `min-h-11 min-w-11 shrink-0 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" })
-												})
+												})()
 											]
 										})
 									})
@@ -2227,7 +2156,7 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 						onClick: () => onPageChange?.(currentPage - 1),
 						disabled: !onPageChange || currentPage <= 1,
 						"aria-label": "Previous page",
-						className: cn$1("min-h-11 min-w-11 rounded-lg border border-[var(--md3-outline-variant)] p-2 transition-colors hover:bg-surface-container-high disabled:opacity-30", focusRing),
+						className: cn$1("inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg border border-border bg-surface-container-high p-2 shadow-sm transition-colors hover:bg-surface-container-highest disabled:opacity-30", focusRing),
 						children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
 					}),
 					getPageItems(currentPage, totalPages).map((item) => typeof item === "number" ? /* @__PURE__ */ jsx("button", {
@@ -2236,7 +2165,7 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 						disabled: !onPageChange,
 						"aria-label": "Go to page " + item,
 						"aria-current": item === currentPage ? "page" : void 0,
-						className: cn$1("min-h-11 min-w-11 rounded-lg px-2 py-1 transition-colors", item === currentPage ? "border border-[var(--md3-outline)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "hover:bg-surface-container-high", !onPageChange && "cursor-not-allowed opacity-30"),
+						className: cn$1("inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg px-2 py-1 transition-colors", item === currentPage ? "border border-[var(--md3-outline)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "hover:bg-surface-container-high", !onPageChange && "cursor-not-allowed opacity-30"),
 						children: item
 					}, item) : /* @__PURE__ */ jsx("span", {
 						className: "px-1",
@@ -2248,7 +2177,7 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 						onClick: () => onPageChange?.(currentPage + 1),
 						disabled: !onPageChange || currentPage >= totalPages,
 						"aria-label": "Next page",
-						className: cn$1("min-h-11 min-w-11 rounded-lg border border-[var(--md3-outline-variant)] p-2 transition-colors hover:bg-surface-container-high disabled:opacity-30", focusRing),
+						className: cn$1("inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg border border-border bg-surface-container-high p-2 shadow-sm transition-colors hover:bg-surface-container-highest disabled:opacity-30", focusRing),
 						children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
 					})
 				]
@@ -5109,4 +5038,28 @@ function PromoBanner({ title, description, buttonLabel, href, onClick, icon, dis
 	});
 }
 //#endregion
-export { SidebarRailNav as $, ResourceMeter as A, RailFlyout as B, InvoiceTable as C, canAdminSandbox as D, SandboxCard as E, CreditBalance as F, Sidebar as G, RailModeButton as H, ProfileAvatar as I, SidebarPanelContent as J, SidebarContent as K, RailButton as L, INSUFFICIENT_BALANCE_CODE as M, OutOfCreditsModal as N, ActivityFeed as O, parseInsufficientBalance as P, SidebarRailHeader as Q, RailCollapseToggle as R, PlanCards as S, NewSandboxCard as T, RailSeparator as U, RailHeader as V, RailThemeToggle as W, SidebarRail as X, SidebarPanelHeader as Y, SidebarRailFooter as Z, HarnessPicker as _, ProcessList as a, SIDEBAR_TOTAL_WIDTH as at, HarnessLogo as b, UsageSummary as c, MetricAreaChart as d, RailTooltip as et, ProfileComparison as f, HARNESS_OPTIONS as g, DashboardLayout as h, NetworkConfig as i, SIDEBAR_RAIL_WIDTH as it, ClusterStatusBar as j, ResourceSnapshot as k, SystemLogsViewer as l, SidebarLayout as m, SnapshotList as n, SIDEBAR_PANEL_WIDTH as nt, PortsList as o, SidebarProvider as ot, ProfileSelector as p, SidebarPanel as q, BackendConfig as r, SIDEBAR_RAIL_LABELED_WIDTH as rt, GitPanel as s, useSidebar as st, PromoBanner as t, SIDEBAR_MOBILE_WIDTH as tt, VariantList as u, chatCapableHarnesses as v, SandboxTable as w, BackendSelector as x, HARNESS_BRAND as y, RailExpandable as z };
+//#region src/dashboard/info-panel.tsx
+function InfoPanel({ label, title, description, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("rounded-lg bg-[var(--brand-strong)] p-5 text-[var(--brand-strong-text)] relative overflow-hidden", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative z-10",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[10px] font-bold uppercase tracking-widest text-[var(--brand-strong-text-dim)]",
+					children: label
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "mt-1 text-lg font-bold",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-[var(--brand-strong-text-muted)]",
+					children: description
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-0 h-full w-1/3 bg-white/5 -skew-x-12 translate-x-12 pointer-events-none" })]
+	});
+}
+//#endregion
+export { SidebarRailHeader as $, ResourceSnapshot as A, RailExpandable as B, PlanCards as C, SandboxCard as D, NewSandboxCard as E, parseInsufficientBalance as F, RailThemeToggle as G, RailHeader as H, CreditBalance as I, SidebarPanel as J, Sidebar as K, ProfileAvatar as L, ClusterStatusBar as M, INSUFFICIENT_BALANCE_CODE as N, canAdminSandbox as O, OutOfCreditsModal as P, SidebarRailFooter as Q, RailButton as R, BackendSelector as S, SandboxTable as T, RailModeButton as U, RailFlyout as V, RailSeparator as W, SidebarPanelHeader as X, SidebarPanelContent as Y, SidebarRail as Z, HARNESS_OPTIONS as _, NetworkConfig as a, SIDEBAR_RAIL_WIDTH as at, HARNESS_BRAND as b, GitPanel as c, useSidebar as ct, VariantList as d, SidebarRailNav as et, MetricAreaChart as f, DashboardLayout as g, SidebarLayout as h, BackendConfig as i, SIDEBAR_RAIL_LABELED_WIDTH as it, ResourceMeter as j, ActivityFeed as k, UsageSummary as l, ProfileSelector as m, PromoBanner as n, SIDEBAR_MOBILE_WIDTH as nt, ProcessList as o, SIDEBAR_TOTAL_WIDTH as ot, ProfileComparison as p, SidebarContent as q, SnapshotList as r, SIDEBAR_PANEL_WIDTH as rt, PortsList as s, SidebarProvider as st, InfoPanel as t, RailTooltip as tt, SystemLogsViewer as u, HarnessPicker as v, InvoiceTable as w, HarnessLogo as x, chatCapableHarnesses as y, RailCollapseToggle as z };