@tangle-network/sandbox-ui 0.118.0 → 0.120.0

package/dist/pages.js

@@ -1,4 +1,4 @@
-import { $ as Select, C as DialogTitle$1, G as Input$1, Nt as Textarea$1, Y as PageHeader$1, _ as DialogContent$1, a as Badge$1, b as DialogHeader$1, ct as SelectValue, et as SelectContent, h as Dialog$1, ht as Switch, nt as SelectItem, o as Button$1, st as SelectTrigger, v as DialogDescription$1, y as DialogFooter$1 } from "./primitives-N-59i3-7.js";
+import { $ as Select$1, C as DialogTitle$1, G as Input$1, Nt as Textarea$1, Y as PageHeader$1, _ as DialogContent$1, a as Badge$1, b as DialogHeader$1, ct as SelectValue$1, et as SelectContent$1, h as Dialog$1, ht as Switch, nt as SelectItem$1, o as Button$1, st as SelectTrigger$1, v as DialogDescription$1, y as DialogFooter$1 } from "./primitives-BQGtwZX3.js";
 import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { i as PricingPage, n as TemplateCard, o as BillingDashboard, r as UsageChart, t as InfoPanel } from "./info-panel-C9cqDzOL.js";
 import { Badge, Button, Card, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyState, Input, Skeleton, SkeletonCard, Tabs, TabsContent, TabsList, TabsTrigger } from "@tangle-network/ui/primitives";
@@ -1490,25 +1490,25 @@ function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments
 											htmlFor: `${fieldIdPrefix}-driver`,
 											className: cn$1(FIELD_LABEL_CLASS, "mb-1.5"),
 											children: "Virtualization Driver"
-										}), /* @__PURE__ */ jsxs(Select, {
+										}), /* @__PURE__ */ jsxs(Select$1, {
 											value: driver,
 											onValueChange: (value) => {
 												if (VALID_DRIVERS.has(value)) setDriver(value);
 											},
-											children: [/* @__PURE__ */ jsx(SelectTrigger, {
+											children: [/* @__PURE__ */ jsx(SelectTrigger$1, {
 												id: `${fieldIdPrefix}-driver`,
 												className: "h-9",
-												children: /* @__PURE__ */ jsx(SelectValue, {})
-											}), /* @__PURE__ */ jsxs(SelectContent, { children: [
-												/* @__PURE__ */ jsx(SelectItem, {
+												children: /* @__PURE__ */ jsx(SelectValue$1, {})
+											}), /* @__PURE__ */ jsxs(SelectContent$1, { children: [
+												/* @__PURE__ */ jsx(SelectItem$1, {
 													value: "docker",
 													children: "Docker container (Default)"
 												}),
-												/* @__PURE__ */ jsx(SelectItem, {
+												/* @__PURE__ */ jsx(SelectItem$1, {
 													value: "firecracker",
 													children: "Firecracker microVM (Secure)"
 												}),
-												/* @__PURE__ */ jsx(SelectItem, {
+												/* @__PURE__ */ jsx(SelectItem$1, {
 													value: "tangle",
 													children: "Tangle Distributed Node"
 												})
@@ -2698,7 +2698,13 @@ function parseEnvText(text) {
 //#region src/pages/secrets-page.tsx
 /** Cap pasted/uploaded import sources so a pathological file cannot blow up the parser/UI. */
 const MAX_IMPORT_FILE_BYTES = 262144;
-function SecretsPage({ apiClient, className, teamSecretsHint }) {
+const DEFAULT_DESCRIPTION = "Secrets are securely stored and automatically exposed as environment variables across all your sandboxes.";
+const DEFAULT_CREATE_DESCRIPTION = "Secrets are automatically exposed as environment variables across all your new sandboxes.";
+const DEFAULT_EMPTY_DESCRIPTION = "Create a secret to inject into your sandboxes.";
+const DEFAULT_DELETE_CONSEQUENCE = "Sandboxes using this secret will lose access to it.";
+function SecretsPage({ apiClient, className, teamSecretsHint, title = "Environment Secrets", description = DEFAULT_DESCRIPTION, createDescription = DEFAULT_CREATE_DESCRIPTION, emptyDescription = DEFAULT_EMPTY_DESCRIPTION, deleteConsequence = DEFAULT_DELETE_CONSEQUENCE, variant = "page" }) {
+	const pane = variant === "pane";
+	const canReplace = typeof apiClient.updateSecret === "function";
 	const [secrets, setSecrets] = React$1.useState([]);
 	const [loading, setLoading] = React$1.useState(true);
 	const [error, setError] = React$1.useState(null);
@@ -2708,6 +2714,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 	const [showValue, setShowValue] = React$1.useState(false);
 	const [isCreating, setIsCreating] = React$1.useState(false);
 	const [createError, setCreateError] = React$1.useState(null);
+	const [replaceTarget, setReplaceTarget] = React$1.useState(null);
 	const [deleteTarget, setDeleteTarget] = React$1.useState(null);
 	const [isDeleting, setIsDeleting] = React$1.useState(false);
 	const [isImportOpen, setIsImportOpen] = React$1.useState(false);
@@ -2740,16 +2747,39 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 	React$1.useEffect(() => {
 		loadSecrets();
 	}, [loadSecrets]);
+	const openCreate = () => {
+		setReplaceTarget(null);
+		setNewName("");
+		setNewValue("");
+		setCreateError(null);
+		setShowValue(false);
+		setIsCreateOpen(true);
+	};
+	const openReplace = (name) => {
+		setReplaceTarget(name);
+		setNewName(name);
+		setNewValue("");
+		setCreateError(null);
+		setShowValue(false);
+		setIsCreateOpen(true);
+	};
+	const closeCreate = () => {
+		setIsCreateOpen(false);
+		setReplaceTarget(null);
+		setNewName("");
+		setNewValue("");
+		setCreateError(null);
+		setShowValue(false);
+	};
 	const handleCreate = async () => {
 		if (!newName.trim() || !newValue.trim()) return;
 		setIsCreating(true);
 		setCreateError(null);
 		try {
-			await apiRef.current.createSecret(newName.trim(), newValue);
-			setIsCreateOpen(false);
-			setNewName("");
-			setNewValue("");
-			setShowValue(false);
+			const update = apiRef.current.updateSecret;
+			if (replaceTarget && update) await update(replaceTarget, newValue);
+			else await apiRef.current.createSecret(newName.trim(), newValue);
+			closeCreate();
 			await loadSecrets(false);
 		} catch (err) {
 			setCreateError(err instanceof Error ? err.message : "Failed to create secret");
@@ -2886,26 +2916,48 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 			return dateStr;
 		}
 	};
+	const actions = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => setIsImportOpen(true),
+		className: "inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-surface-container-high active:scale-[0.97] sm:gap-2",
+		children: [/* @__PURE__ */ jsx(Upload, {
+			className: "h-4 w-4",
+			"aria-hidden": "true"
+		}), "Import .env"]
+	}), /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: openCreate,
+		className: "inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg border border-[var(--border-accent,transparent)] bg-[var(--btn-primary-bg)] px-3 py-2 text-sm font-semibold text-[var(--btn-primary-text)] transition-colors hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] sm:gap-2 sm:px-4",
+		children: [/* @__PURE__ */ jsx(Plus, {
+			className: "h-4 w-4",
+			"aria-hidden": "true"
+		}), "New Secret"]
+	})] });
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$1("mx-auto w-full max-w-6xl space-y-8", className),
+		className: cn$1(pane ? "flex h-full min-h-0 w-full flex-col" : "mx-auto w-full max-w-6xl space-y-6", className),
 		children: [
-			/* @__PURE__ */ jsx(PageHeader$1, {
-				title: "Environment Secrets",
-				description: "Secrets are securely stored and automatically exposed as environment variables across all your sandboxes.",
-				action: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: () => setIsImportOpen(true),
-					className: "inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-surface-container-high active:scale-[0.97] sm:gap-2 sm:px-4",
-					children: [/* @__PURE__ */ jsx(Upload, { className: "h-4 w-4" }), "Import .env"]
-				}), /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: () => setIsCreateOpen(true),
-					className: "inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg border border-[var(--border-accent,transparent)] bg-[var(--btn-primary-bg)] px-3 py-2.5 text-sm font-semibold text-[var(--btn-primary-text)] transition-colors hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] sm:gap-2 sm:px-5",
-					children: [/* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }), "New Secret"]
-				})] })
+			pane ? /* @__PURE__ */ jsxs("header", {
+				className: "flex shrink-0 flex-wrap items-center justify-between gap-x-6 gap-y-3 border-b border-border px-4 py-4 sm:px-6",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1 basis-64",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-lg font-semibold tracking-tight text-foreground",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "mt-0.5 text-sm text-muted-foreground",
+						children: description
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 items-center gap-2",
+					children: actions
+				})]
+			}) : /* @__PURE__ */ jsx(PageHeader$1, {
+				title,
+				description,
+				action: actions
 			}),
 			teamSecretsHint && /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap items-center gap-3 rounded-lg border border-[var(--md3-outline-variant)] bg-[var(--accent-surface-soft)]/40 px-4 py-3",
+				className: cn$1("flex flex-wrap items-center gap-3 border-[var(--md3-outline-variant)] bg-[var(--accent-surface-soft)]/40 px-4 py-3", pane ? "shrink-0 border-b sm:px-6" : "rounded-lg border"),
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-[min(100%,18rem)] flex-1 items-start gap-3",
 					children: [/* @__PURE__ */ jsx(Users, {
@@ -2935,65 +2987,33 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 					})]
 				})]
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "grid grid-cols-1 gap-6 md:grid-cols-4",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-5 shadow-[var(--shadow-card)]",
-						children: [/* @__PURE__ */ jsx("p", {
-							className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground",
-							children: "Total Active Secrets"
-						}), /* @__PURE__ */ jsx("div", {
-							className: "mt-2 flex items-baseline gap-2",
-							children: /* @__PURE__ */ jsx("span", {
-								className: "font-display text-2xl font-extrabold text-foreground",
-								children: secrets.length
-							})
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-5 shadow-[var(--shadow-card)]",
-						children: [/* @__PURE__ */ jsx("p", {
-							className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground",
-							children: "Status"
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "mt-2 flex items-center gap-2",
-							children: [/* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-[var(--surface-success-text,#047857)]" }), /* @__PURE__ */ jsx("span", {
-								className: "text-sm font-semibold text-[var(--surface-success-text,#047857)]",
-								children: "Encrypted"
-							})]
-						})]
-					}),
-					/* @__PURE__ */ jsx(InfoPanel, {
-						className: "md:col-span-2",
-						label: "Security Audit",
-						title: "All engines operational.",
-						description: "Secrets are encrypted at rest using AES-256."
-					})
-				]
-			}),
-			error && /* @__PURE__ */ jsxs("div", {
-				className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 flex items-center gap-3",
-				children: [/* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 text-destructive shrink-0" }), /* @__PURE__ */ jsx("p", {
-					className: "text-destructive text-sm font-medium",
+			error && (secrets.length > 0 || loading) && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: cn$1("flex items-center gap-3 border-destructive/30 bg-destructive/10 p-4", pane ? "shrink-0 border-b sm:px-6" : "rounded-lg border"),
+				children: [/* @__PURE__ */ jsx(AlertCircle, {
+					className: "h-5 w-5 shrink-0 text-destructive",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium text-destructive",
 					children: error
 				})]
 			}),
 			/* @__PURE__ */ jsx(Dialog, {
 				open: isCreateOpen,
 				onOpenChange: (open) => {
-					if (!open) {
-						setIsCreateOpen(false);
-						setNewName("");
-						setNewValue("");
-						setCreateError(null);
-						setShowValue(false);
-					}
+					if (!open) closeCreate();
 				},
 				children: /* @__PURE__ */ jsxs(DialogContent, {
 					className: "max-w-md",
 					children: [
-						/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Create Secret" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Secrets are automatically exposed as environment variables across all your new sandboxes." })] }),
+						/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: replaceTarget ? "Replace Value" : "Create Secret" }), /* @__PURE__ */ jsx(DialogDescription, { children: replaceTarget ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							"Save a new value for ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-mono font-bold text-foreground",
+								children: replaceTarget
+							}),
+							". The current value is overwritten and cannot be recovered."
+						] }) : createDescription })] }),
 						/* @__PURE__ */ jsxs("form", {
 							onSubmit: (e) => {
 								e.preventDefault();
@@ -3013,6 +3033,8 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 									onChange: (e) => setNewName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")),
 									placeholder: "MY_SECRET_KEY",
 									autoComplete: "off",
+									readOnly: replaceTarget !== null,
+									"aria-readonly": replaceTarget !== null,
 									className: `w-full rounded-md border bg-surface-container-low px-3 py-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField}`
 								})] }),
 								/* @__PURE__ */ jsxs("div", { children: [
@@ -3031,6 +3053,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 											onChange: (e) => setNewValue(e.target.value),
 											placeholder: "Enter secret value...",
 											autoComplete: "new-password",
+											autoFocus: replaceTarget !== null,
 											className: `w-full rounded-md border bg-surface-container-low px-3 py-2.5 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField}`
 										}), /* @__PURE__ */ jsx("button", {
 											type: "button",
@@ -3042,7 +3065,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 									}),
 									/* @__PURE__ */ jsx("p", {
 										className: "mt-1.5 text-xs text-muted-foreground",
-										children: "This value cannot be retrieved after creation."
+										children: "This value cannot be retrieved after it is saved."
 									})
 								] }),
 								/* @__PURE__ */ jsx("button", {
@@ -3060,12 +3083,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 						}),
 						/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx("button", {
 							type: "button",
-							onClick: () => {
-								setIsCreateOpen(false);
-								setNewName("");
-								setNewValue("");
-								setCreateError(null);
-							},
+							onClick: closeCreate,
 							className: "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-2 text-sm font-medium text-foreground hover:bg-surface-container-high transition-colors",
 							children: "Cancel"
 						}), /* @__PURE__ */ jsx("button", {
@@ -3073,7 +3091,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 							onClick: handleCreate,
 							disabled: !newName.trim() || !newValue.trim() || isCreating,
 							className: "rounded-md bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-bold text-[var(--btn-primary-text)] hover:bg-[var(--btn-primary-hover)] transition-colors disabled:opacity-50 active:scale-[0.97]",
-							children: isCreating ? "Creating..." : "Create Secret"
+							children: isCreating ? "Saving..." : replaceTarget ? "Replace Value" : "Create Secret"
 						})] })
 					]
 				})
@@ -3292,7 +3310,8 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 							className: "font-mono font-bold text-foreground",
 							children: deleteTarget
 						}),
-						". Sandboxes using this secret will lose access to it."
+						". ",
+						deleteConsequence
 					] })] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => setDeleteTarget(null),
@@ -3307,160 +3326,188 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
 					})] })]
 				})
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "overflow-hidden rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container shadow-[var(--shadow-card)]",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "border-b border-[var(--md3-outline-variant)] px-6 py-4 flex items-center justify-between",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "flex gap-6",
-						children: /* @__PURE__ */ jsx("button", {
+			/* @__PURE__ */ jsx("section", {
+				"aria-label": title,
+				className: cn$1(pane ? "min-h-0 flex-1 overflow-y-auto" : "overflow-hidden rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container shadow-[var(--shadow-card)]"),
+				children: loading ? /* @__PURE__ */ jsxs("div", {
+					role: "status",
+					"aria-busy": "true",
+					className: "divide-y divide-border",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Loading secrets…"
+					}), [
+						44,
+						36,
+						52
+					].map((width) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3 px-4 py-4 sm:px-6",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-pulse rounded bg-muted" }), /* @__PURE__ */ jsx("div", {
+							className: "h-4 animate-pulse rounded bg-muted",
+							style: { width: `${width * 4}px` }
+						})]
+					}, width))]
+				}) : error && secrets.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					role: "alert",
+					className: "flex flex-col items-center justify-center px-6 py-16 text-center",
+					children: [
+						/* @__PURE__ */ jsx(AlertCircle, {
+							className: "mb-4 h-10 w-10 text-destructive",
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ jsx("h3", {
+							className: "text-base font-semibold text-foreground",
+							children: "Secrets could not load"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "mt-1 max-w-sm text-sm text-muted-foreground",
+							children: error
+						}),
+						/* @__PURE__ */ jsx("button", {
 							type: "button",
-							className: "text-xs font-bold uppercase tracking-widest text-foreground border-b-2 border-foreground pb-1",
-							children: "All Secrets"
+							onClick: () => void loadSecrets(),
+							className: "mt-6 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-surface-container-high",
+							children: "Retry"
 						})
-					}), /* @__PURE__ */ jsxs("span", {
-						className: "text-xs text-muted-foreground font-mono",
-						children: [
-							secrets.length,
-							" secret",
-							secrets.length !== 1 ? "s" : ""
-						]
-					})]
-				}), loading ? /* @__PURE__ */ jsx("div", {
-					className: "flex items-center justify-center py-16",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "h-6 w-6 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent",
-						"data-motion": "essential"
-					})
+					]
 				}) : secrets.length === 0 ? /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col items-center justify-center py-16 text-center",
+					className: "flex flex-col items-center justify-center px-6 py-16 text-center",
 					children: [
-						/* @__PURE__ */ jsx(Lock, { className: "h-10 w-10 text-muted-foreground mb-4" }),
+						/* @__PURE__ */ jsx(Lock, {
+							className: "mb-4 h-10 w-10 text-muted-foreground",
+							"aria-hidden": "true"
+						}),
 						/* @__PURE__ */ jsx("h3", {
 							className: "text-lg font-semibold text-foreground",
 							children: "No secrets yet"
 						}),
 						/* @__PURE__ */ jsx("p", {
-							className: "mt-1 text-sm text-muted-foreground max-w-sm",
-							children: "Create a secret to inject into your sandboxes."
+							className: "mt-1 max-w-sm text-sm text-muted-foreground",
+							children: emptyDescription
 						}),
 						/* @__PURE__ */ jsxs("button", {
 							type: "button",
-							onClick: () => setIsCreateOpen(true),
+							onClick: openCreate,
 							"aria-label": "Create your first secret",
-							className: "mt-6 inline-flex items-center gap-2 rounded-md bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-semibold text-[var(--btn-primary-text)] hover:bg-[var(--btn-primary-hover)] transition-colors active:scale-[0.97]",
-							children: [/* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }), "New Secret"]
+							className: "mt-6 inline-flex items-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]",
+							children: [/* @__PURE__ */ jsx(Plus, {
+								className: "h-4 w-4",
+								"aria-hidden": "true"
+							}), "New Secret"]
 						})
 					]
 				}) : /* @__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", {
-								scope: "col",
-								className: "px-4 py-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground sm:px-6 sm:py-4",
-								children: "Secret Name"
-							}),
-							/* @__PURE__ */ jsx("th", {
-								scope: "col",
-								className: "hidden px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground sm:table-cell",
-								children: "Encrypted Value"
-							}),
-							/* @__PURE__ */ jsx("th", {
-								scope: "col",
-								className: "hidden px-6 py-4 text-right text-[10px] font-bold uppercase tracking-widest text-muted-foreground sm:table-cell",
-								children: "Created"
-							}),
-							/* @__PURE__ */ jsx("th", {
-								scope: "col",
-								"aria-label": "Actions",
-								className: "w-12 px-3 py-3 sm:px-6 sm:py-4"
-							})
-						]
-					}) }), /* @__PURE__ */ jsx("tbody", {
-						className: "divide-y divide-border",
-						children: secrets.map((secret) => /* @__PURE__ */ jsxs("tr", {
-							className: "hover:bg-surface-container-high transition-colors",
+					className: "w-full border-collapse text-left",
+					children: [
+						/* @__PURE__ */ jsxs("caption", {
+							className: "sr-only",
 							children: [
-								/* @__PURE__ */ jsx("td", {
-									className: "px-4 py-3 sm:px-6 sm:py-4",
-									children: /* @__PURE__ */ jsxs("div", {
-										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ jsx(Key, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
-											className: "min-w-0",
-											children: [/* @__PURE__ */ jsx("span", {
-												className: "break-all font-mono text-sm font-bold text-foreground sm:break-normal",
-												children: secret.name
-											}), /* @__PURE__ */ jsxs("span", {
-												className: "mt-1 block text-xs text-muted-foreground sm:hidden",
-												children: ["Created ", formatDate(secret.createdAt)]
-											})]
+								secrets.length,
+								" secret",
+								secrets.length !== 1 ? "s" : ""
+							]
+						}),
+						/* @__PURE__ */ jsx("thead", {
+							className: cn$1(pane && "sticky top-0 z-10 bg-background"),
+							children: /* @__PURE__ */ jsxs("tr", {
+								className: "border-b border-[var(--md3-outline-variant)]",
+								children: [
+									/* @__PURE__ */ jsxs("th", {
+										scope: "col",
+										className: "px-4 py-2.5 text-xs font-medium text-muted-foreground sm:px-6",
+										children: ["Name ", /* @__PURE__ */ jsx("span", {
+											className: "ml-1 font-mono tabular-nums",
+											children: secrets.length
 										})]
+									}),
+									/* @__PURE__ */ jsx("th", {
+										scope: "col",
+										className: "hidden px-4 py-2.5 text-xs font-medium text-muted-foreground md:table-cell",
+										children: "Value"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										scope: "col",
+										className: "hidden px-4 py-2.5 text-right text-xs font-medium text-muted-foreground sm:table-cell",
+										children: "Updated"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										scope: "col",
+										className: "w-px px-4 py-2.5 sm:pr-6",
+										children: /* @__PURE__ */ jsx("span", {
+											className: "sr-only",
+											children: "Actions"
+										})
 									})
-								}),
-								/* @__PURE__ */ jsx("td", {
-									className: "hidden px-6 py-4 sm:table-cell",
-									children: /* @__PURE__ */ jsx("code", {
-										className: "text-xs font-mono text-muted-foreground bg-surface-container-high px-2 py-1 rounded",
-										children: "••••••••••••••••"
-									})
-								}),
-								/* @__PURE__ */ jsx("td", {
-									className: "hidden px-6 py-4 text-right sm:table-cell",
-									children: /* @__PURE__ */ jsx("span", {
-										className: "text-xs text-muted-foreground",
-										children: formatDate(secret.createdAt)
-									})
-								}),
-								/* @__PURE__ */ jsx("td", {
-									className: "px-3 py-3 sm:px-6 sm:py-4",
-									children: /* @__PURE__ */ jsx("button", {
-										type: "button",
-										onClick: () => setDeleteTarget(secret.name),
-										className: "p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors",
-										"aria-label": `Delete ${secret.name}`,
-										children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
-									})
-								})
-							]
-						}, secret.name))
-					})]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "grid grid-cols-1 gap-6 md:grid-cols-2",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 shadow-[var(--shadow-card)]",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-3 mb-3",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "flex h-9 w-9 items-center justify-center rounded-md bg-[var(--brand-primary,hsl(var(--primary)))] text-[var(--btn-primary-text)]",
-							children: /* @__PURE__ */ jsx(Shield, { className: "h-5 w-5" })
-						}), /* @__PURE__ */ jsx("h3", {
-							className: "text-sm font-bold text-foreground",
-							children: "Encryption Standard"
-						})]
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground leading-relaxed",
-						children: "Your secrets are encrypted using AES-256-GCM at rest and TLS 1.3 in transit. Hardware Security Modules manage all root keys."
-					})]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 shadow-[var(--shadow-card)]",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-3 mb-3",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "flex h-9 w-9 items-center justify-center rounded-md bg-[var(--brand-primary,hsl(var(--primary)))] text-[var(--btn-primary-text)]",
-							children: /* @__PURE__ */ jsx(Lock, { className: "h-5 w-5" })
-						}), /* @__PURE__ */ jsx("h3", {
-							className: "text-sm font-bold text-foreground",
-							children: "Access Policy"
-						})]
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground leading-relaxed",
-						children: "Secrets are injected at sandbox creation time and are never exposed in logs, API responses, or container metadata."
-					})]
-				})]
+								]
+							})
+						}),
+						/* @__PURE__ */ jsx("tbody", {
+							className: "divide-y divide-border",
+							children: secrets.map((secret) => {
+								const changedAt = formatDate(secret.updatedAt ?? secret.createdAt);
+								return /* @__PURE__ */ jsxs("tr", {
+									className: "transition-colors hover:bg-surface-container-high",
+									children: [
+										/* @__PURE__ */ jsx("td", {
+											className: "py-3 pl-4 pr-1 sm:px-6",
+											children: /* @__PURE__ */ jsxs("div", {
+												className: "flex min-w-0 items-center gap-2.5 sm:gap-3",
+												children: [/* @__PURE__ */ jsx(Key, {
+													className: "h-4 w-4 shrink-0 text-muted-foreground",
+													"aria-hidden": "true"
+												}), /* @__PURE__ */ jsxs("div", {
+													className: "min-w-0",
+													children: [/* @__PURE__ */ jsx("span", {
+														className: "font-mono text-[13px] font-semibold text-foreground [overflow-wrap:anywhere] sm:text-sm",
+														children: secret.name
+													}), /* @__PURE__ */ jsxs("span", {
+														className: "mt-0.5 block text-xs text-muted-foreground sm:hidden",
+														children: ["Updated ", changedAt]
+													})]
+												})]
+											})
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "hidden px-4 py-3 md:table-cell",
+											children: /* @__PURE__ */ jsx("span", {
+												className: "font-mono text-xs tracking-widest text-muted-foreground",
+												"aria-label": "Value hidden",
+												children: "••••••••••••"
+											})
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "hidden whitespace-nowrap px-4 py-3 text-right text-xs text-muted-foreground sm:table-cell",
+											children: changedAt
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "whitespace-nowrap py-3 pl-1 pr-3 sm:px-4 sm:pr-6",
+											children: /* @__PURE__ */ jsxs("div", {
+												className: "flex items-center justify-end gap-1",
+												children: [canReplace && /* @__PURE__ */ jsx("button", {
+													type: "button",
+													onClick: () => openReplace(secret.name),
+													className: "rounded-md px-2 py-1.5 text-xs font-semibold text-foreground transition-colors hover:bg-surface-container-high",
+													"aria-label": `Replace value of ${secret.name}`,
+													children: "Replace"
+												}), /* @__PURE__ */ jsx("button", {
+													type: "button",
+													onClick: () => setDeleteTarget(secret.name),
+													className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
+													"aria-label": `Delete ${secret.name}`,
+													children: /* @__PURE__ */ jsx(Trash2, {
+														className: "h-4 w-4",
+														"aria-hidden": "true"
+													})
+												})]
+											})
+										})
+									]
+								}, secret.name);
+							})
+						})
+					]
+				})
 			})
 		]
 	});