@tangle-network/sandbox-ui 0.116.7 → 0.116.9

package/dist/{dashboard-_-b7laAR.js → dashboard-DwdEQoqK.js}

@@ -1085,7 +1085,7 @@ function ProfileAvatar({ user, isLoading = false, onLogout, onSettingsClick, set
 					className: "mr-2 h-4 w-4",
 					"aria-hidden": "true"
 				}), "Settings"]
-			}) : /* @__PURE__ */ jsx(DropdownMenuItem, {
+			}) : settingsHref !== null ? /* @__PURE__ */ jsx(DropdownMenuItem, {
 				asChild: true,
 				children: /* @__PURE__ */ jsxs(Link, {
 					href: settingsHref,
@@ -1096,8 +1096,8 @@ function ProfileAvatar({ user, isLoading = false, onLogout, onSettingsClick, set
 						"aria-hidden": "true"
 					}), "Settings"]
 				})
-			}),
-			onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			}) : null,
+			onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [(children || appearance || onSettingsClick || settingsHref !== null) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
 				className: "text-[var(--surface-danger-text)]",
 				onClick: onLogout,
 				children: [/* @__PURE__ */ jsx(LogOutIcon, {
@@ -1489,6 +1489,12 @@ 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 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";
@@ -1502,9 +1508,9 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, on
 	const resumeHandler = isStopped ? resolveResumeHandler(sandbox.status) : void 0;
 	const status = STATUS_META[sandbox.status];
 	const isArchived = sandbox.status === "archived";
-	const cpuPercent = sandbox.cpuPercent ?? 0;
-	const ramUsed = sandbox.ramUsed ?? 0;
-	const ramTotal = sandbox.ramTotal ?? 0;
+	const cpuPercent = sandbox.cpuPercent;
+	const ramUsed = sandbox.ramUsed;
+	const ramTotal = sandbox.ramTotal;
 	const diskUsed = sandbox.diskUsed;
 	const diskTotal = sandbox.diskTotal;
 	const specs = [
@@ -1514,7 +1520,7 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, on
 			value: sandbox.vcpu,
 			unit: "vCPU"
 		},
-		ramTotal > 0 && {
+		ramTotal != null && ramTotal > 0 && {
 			key: "ram",
 			icon: /* @__PURE__ */ jsx(MemoryStick, { className: "h-3.5 w-3.5" }),
 			value: ramTotal,
@@ -1531,27 +1537,35 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, on
 		className: cn$1("group relative flex flex-col justify-between overflow-hidden rounded-lg border bg-surface-container p-5 transition-colors", isRunning ? "border-[var(--status-running)]/30" : "border-[var(--md3-outline-variant)]", "hover:border-foreground/15", className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start justify-between",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx("h3", {
-						className: "truncate text-sm font-bold text-foreground",
-						children: sandbox.name
-					}), sandbox.team && /* @__PURE__ */ jsxs("span", {
-						className: "inline-flex items-center gap-1 rounded-full bg-[var(--accent-surface-soft)] px-2 py-0.5 text-[10px] font-semibold text-[var(--accent-text)]",
-						title: `Shared with ${sandbox.team.name ?? "Team"} · ${sandbox.team.role}`,
-						children: [/* @__PURE__ */ jsx(Users, {
-							className: "h-3 w-3",
-							"aria-hidden": "true"
-						}), sandbox.team.name ?? "Team"]
-					})]
-				}), /* @__PURE__ */ jsxs("p", {
-					className: "mt-0.5 font-mono text-[10px] tracking-wider text-muted-foreground uppercase",
-					children: [sandbox.nodeId || "Unknown Node", sandbox.team && /* @__PURE__ */ jsxs("span", {
-						className: "ml-2 normal-case tracking-normal",
-						children: ["· your role: ", sandbox.team.role]
+				className: "flex min-w-0 items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "min-w-0 flex-1 truncate text-sm font-bold text-foreground",
+							title: sandbox.name,
+							"aria-label": sandbox.name,
+							children: sandbox.name
+						}), sandbox.team && /* @__PURE__ */ jsxs("span", {
+							className: "inline-flex min-w-0 max-w-40 items-center gap-1 rounded-full bg-[var(--accent-surface-soft)] px-2 py-0.5 text-[10px] font-semibold text-[var(--accent-text)]",
+							title: `Shared with ${sandbox.team.name ?? "Team"} · ${sandbox.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: sandbox.team.name ?? "Team"
+							})]
+						})]
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "mt-0.5 min-w-0 truncate font-mono text-[10px] tracking-wider text-muted-foreground uppercase",
+						children: [sandbox.nodeId || "Unknown Node", sandbox.team && /* @__PURE__ */ jsxs("span", {
+							className: "ml-2 normal-case tracking-normal",
+							children: ["· your role: ", sandbox.team.role]
+						})]
 					})]
-				})] }), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 					asChild: true,
 					children: /* @__PURE__ */ jsx("button", {
 						type: "button",
@@ -1636,19 +1650,22 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, on
 					isRunning ? /* @__PURE__ */ jsxs("div", {
 						className: "space-y-2 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-high p-3",
 						children: [
-							/* @__PURE__ */ jsx(ResourceMeter, {
+							cpuPercent != null ? /* @__PURE__ */ jsx(ResourceMeter, {
 								label: "CPU",
 								value: cpuPercent,
 								max: 100,
 								icon: /* @__PURE__ */ jsx(Cpu, { className: "h-3 w-3" })
-							}),
-							ramTotal > 0 && /* @__PURE__ */ jsx(ResourceMeter, {
-								label: "MEM",
+							}) : /* @__PURE__ */ jsx(UnknownMetric, { label: "CPU" }),
+							ramUsed != null && ramTotal != null && ramTotal > 0 ? /* @__PURE__ */ jsx(ResourceMeter, {
+								label: "RAM",
 								value: ramUsed,
 								max: ramTotal,
-								valueLabel: `${ramUsed} / ${ramTotal} GB`,
+								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, {
 								label: "DISK",
 								value: diskUsed,
@@ -1702,13 +1719,13 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, on
 				children: isRunning ? /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => onOpenIDE?.(sandbox.id),
-					className: "flex w-full items-center justify-center gap-2 rounded-md bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-semibold text-[var(--btn-primary-text)] transition-colors hover:bg-[var(--btn-primary-hover)] active:scale-[0.97]",
+					className: cn$1("flex w-full items-center justify-center gap-2 min-h-11 rounded-md bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-semibold text-[var(--btn-primary-text)] transition-colors hover:bg-[var(--btn-primary-hover)] active:scale-[0.97]", focusRing),
 					children: [/* @__PURE__ */ jsx(Network, { className: "h-4 w-4" }), "Connect Session"]
 				}) : /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => resumeHandler?.(sandbox.id),
 					disabled: isTransitioning || !resumeHandler,
-					className: cn$1("flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-semibold transition-colors border", isTransitioning || !resumeHandler ? "bg-muted text-muted-foreground cursor-not-allowed border-[var(--md3-outline-variant)]" : "bg-surface-container-high text-foreground hover:bg-surface-container-highest border-[var(--md3-outline-variant)] active:scale-[0.97]"),
+					className: cn$1("flex min-h-11 w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-semibold transition-colors border", focusRing, isTransitioning || !resumeHandler ? "bg-muted text-muted-foreground cursor-not-allowed border-[var(--md3-outline-variant)]" : "bg-surface-container-high text-foreground hover:bg-surface-container-highest border-[var(--md3-outline-variant)] active:scale-[0.97]"),
 					children: [/* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }), isTransitioning ? "Starting..." : resumeLabel]
 				})
 			})
@@ -1779,6 +1796,7 @@ function isResumable(status) {
 	return status !== "running" && status !== "provisioning" && status !== "creating";
 }
 function MiniMeter({ label, percent, className }) {
+	const hasValue = percent != null && Number.isFinite(percent);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn$1("space-y-1", className),
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -1786,44 +1804,91 @@ function MiniMeter({ label, percent, className }) {
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "font-bold",
 				children: label
-			}), /* @__PURE__ */ jsxs("span", {
-				className: "text-primary",
-				children: [percent, "%"]
+			}), /* @__PURE__ */ jsx("span", {
+				className: hasValue ? "text-primary" : "text-muted-foreground",
+				children: hasValue ? String(percent) + "%" : "Unknown"
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: "h-1.5 w-full bg-muted rounded-full overflow-hidden",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "h-full bg-primary rounded-full",
-				style: { width: `${percent}%` }
+			className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+			"aria-hidden": "true",
+			children: hasValue && /* @__PURE__ */ jsx("div", {
+				className: "h-full rounded-full bg-primary",
+				style: { width: String(percent) + "%" }
 			})
 		})]
 	});
 }
+function StatusIndicator({ status }) {
+	const sc = statusColors[status] ?? statusColors.stopped;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 whitespace-nowrap",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn$1("flex h-2.5 w-2.5 shrink-0 rounded-full", sc.dot),
+			"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),
+			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-primary 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..."
+		})]
+	});
+	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);
+	let start = Math.max(2, page - 1);
+	let end = Math.min(totalPages - 1, page + 1);
+	if (page <= 3) {
+		start = 2;
+		end = 5;
+	} else if (page >= totalPages - 2) {
+		start = totalPages - 4;
+		end = totalPages - 1;
+	}
+	const items = [1];
+	if (start > 2) items.push("start-ellipsis");
+	for (let current = start; current <= end; current += 1) items.push(current);
+	if (end < totalPages - 1) items.push("end-ellipsis");
+	items.push(totalPages);
+	return items;
+}
 function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange, onOpenIDE, onOpenTerminal, onSSH, onResume, onWake, onMore, onDelete, onStop, onKeepAlive, onUsage, onHealth, onFork, className }) {
-	const totalCount = total ?? sandboxes.length;
-	const totalPages = Math.ceil(totalCount / pageSize);
+	const totalCount = Math.max(0, total ?? sandboxes.length);
+	const safePageSize = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 10;
+	const totalPages = Math.ceil(totalCount / safePageSize);
+	const currentPage = Math.min(Number.isFinite(page) ? Math.max(1, Math.floor(page)) : 1, Math.max(1, totalPages));
+	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 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;
@@ -1836,348 +1901,359 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn$1("w-full", className),
-		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("div", {
+			className: "w-full bg-surface-container rounded-2xl 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",
+				"aria-label": "Sandbox list",
+				tabIndex: 0,
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "w-full table-fixed border-collapse text-left",
+					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("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: "Status"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "px-3 py-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground xl:px-6",
+									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",
+									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", {
+									scope: "col",
+									className: "hidden w-48 px-3 py-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground xl: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-52 xl:px-4",
+									children: "Actions"
+								})
+							]
+						})
+					}), /* @__PURE__ */ jsx("tbody", {
+						className: "divide-y divide-border",
+						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"),
+								onClick: onRowClick,
 								children: [
-									/* @__PURE__ */ jsx("th", {
-										className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
-										children: "Status"
+									/* @__PURE__ */ jsx("td", {
+										className: "hidden px-3 py-4 align-top xl:table-cell xl:px-4 xl:py-5",
+										children: /* @__PURE__ */ jsx(StatusIndicator, { status: sb.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: [
-										/* @__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: "min-w-0 px-3 py-4 align-top xl:px-6 xl:py-5",
+										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-primary",
+														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
+													})]
 												})]
-											})
-										}),
-										/* @__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}`,
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "grid min-w-0 gap-1 text-[11px] xl:hidden",
 												children: [
-													/* @__PURE__ */ jsx(Users, {
-														className: "h-3 w-3 shrink-0",
-														"aria-hidden": "true"
+													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: "min-w-0 truncate",
-														children: sb.team.name ?? "Team"
+													(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
+														})]
 													}),
-													/* @__PURE__ */ jsxs("span", {
-														className: "shrink-0 font-normal text-muted-foreground",
-														children: ["· ", sb.team.role]
+													(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 })]
 													})
 												]
-											}) : /* @__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",
+											})]
+										})
+									}),
+									hasTeamSandboxes && /* @__PURE__ */ jsx("td", {
+										className: "hidden px-3 py-4 align-top xl:table-cell xl:px-4 xl: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"
-												}), "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", {
+												}),
+												/* @__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", {
+													children: sb.team.name ?? "Team"
+												}),
+												/* @__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: "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",
+										children: /* @__PURE__ */ jsx(SandboxResources, { sandbox: sb })
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "w-28 px-2 py-3 text-right align-top xl:w-52 xl:px-4 xl:py-5",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "flex min-w-0 flex-wrap items-center justify-end gap-1",
+											children: [
+												isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+													/* @__PURE__ */ jsx("button", {
 														type: "button",
 														onClick: (e) => {
 															stopRowClick(e);
-															resumeHandler(sb.id);
+															onOpenIDE?.(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]
+														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" })
 													}),
-													(() => {
-														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", {
+													/* @__PURE__ */ jsx("button", {
 														type: "button",
-														"aria-label": `Delete ${sb.name}`,
 														onClick: (e) => {
 															stopRowClick(e);
-															onDelete(sb.id);
+															onOpenTerminal?.(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" })
+														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" })
 													})
-												]
-											})
+												] }),
+												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-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all", focusRing),
+													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: `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": `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: `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" })
+												})
+											]
 										})
-									]
-								}, 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" })
+									})
+								]
+							}, sb.id);
 						})
-					]
-				})]
+					})]
+				})
 			})
-		]
+		}), totalPages > 1 && /* @__PURE__ */ jsxs("div", {
+			className: "mt-6 flex flex-col items-center justify-between gap-4 text-xs font-medium text-muted-foreground sm:flex-row",
+			children: [/* @__PURE__ */ jsx("p", { children: rangeStart === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Showing 0 of ",
+				totalCount,
+				" sandboxes"
+			] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Showing ",
+				rangeStart,
+				"-",
+				rangeEnd,
+				" of ",
+				totalCount,
+				" sandboxes"
+			] }) }), /* @__PURE__ */ jsxs("nav", {
+				className: "flex flex-wrap items-center justify-center gap-1",
+				"aria-label": "Sandbox pages",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						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),
+						children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+					}),
+					getPageItems(currentPage, totalPages).map((item) => typeof item === "number" ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onPageChange?.(item),
+						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-primary" : "hover:bg-surface-container-high", !onPageChange && "cursor-not-allowed opacity-30"),
+						children: item
+					}, item) : /* @__PURE__ */ jsx("span", {
+						className: "px-1",
+						"aria-hidden": "true",
+						children: "..."
+					}, item)),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						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),
+						children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+					})
+				]
+			})]
+		})]
 	});
 }
 //#endregion