@tangle-network/sandbox-ui 0.8.4 → 0.10.0

package/dist/pages.js

@@ -5,7 +5,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from "./chunk-3CJ2SOEI.js";
+} from "./chunk-US6JKJKH.js";
 import {
   Tabs,
   TabsContent,
@@ -17,13 +17,14 @@ import {
   Input
 } from "./chunk-MA7YKRUP.js";
 import {
+  InfoPanel,
   TemplateCard
-} from "./chunk-7U2Z23NE.js";
+} from "./chunk-VX3XOUEB.js";
 import {
   BillingDashboard,
   PricingPage,
   UsageChart
-} from "./chunk-UXQMIR3D.js";
+} from "./chunk-OHPW55EV.js";
 import {
   Skeleton,
   SkeletonCard
@@ -34,7 +35,7 @@ import {
 } from "./chunk-ZMNSRDMH.js";
 import {
   Button
-} from "./chunk-2QZ6G7NM.js";
+} from "./chunk-MKTSMWVD.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -297,10 +298,11 @@ function BillingPage({
 
 // src/pages/provisioning-wizard.tsx
 import * as React2 from "react";
-import { ArrowLeft, Layers, Cpu, Bot, Info, Loader2, Settings, Plus, Trash2 } from "lucide-react";
+import { ArrowLeft, Layers, Cpu, Bot, Info, Loader2, Settings, Plus, Trash2, Check } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var VALID_DRIVERS = /* @__PURE__ */ new Set(["docker", "firecracker", "tangle"]);
 var STACK_DISPLAY = {
-  universal: { name: "Universal", abbr: "U", color: "violet", textClass: "text-[var(--surface-violet-text)]" },
+  universal: { name: "Default", abbr: "D", color: "violet", textClass: "text-[var(--surface-violet-text)]" },
   ethereum: { name: "Ethereum", abbr: "\u039E", color: "blue", textClass: "text-[var(--surface-info-text)]" },
   solana: { name: "Solana", abbr: "S", color: "green", textClass: "text-[var(--surface-success-text)]" },
   tangle: { name: "Tangle", abbr: "T", color: "purple", textClass: "text-[var(--surface-violet-text)]" },
@@ -308,6 +310,16 @@ var STACK_DISPLAY = {
   rust: { name: "Rust", abbr: "Rs", color: "orange", textClass: "text-[var(--surface-orange-text)]" }
 };
 function resolveEnvironment(env) {
+  if (env.id.startsWith("template:")) {
+    const templateName = env.description?.replace(/^Template:\s*/, "") ?? "Custom Template";
+    return {
+      id: env.id,
+      name: templateName,
+      description: env.description ?? "User template from snapshot",
+      icon: /* @__PURE__ */ jsx2("span", { className: "text-[var(--surface-success-text)] text-2xl font-bold", children: "T" }),
+      color: "green"
+    };
+  }
   const display = STACK_DISPLAY[env.id];
   const name = display?.name ?? (env.id.length > 0 ? env.id.charAt(0).toUpperCase() + env.id.slice(1).replace(/-/g, " ") : "Unknown");
   const abbr = display?.abbr ?? (env.id.length > 0 ? env.id[0].toUpperCase() : "?");
@@ -332,8 +344,8 @@ var RAM_MIN = 2;
 var RAM_MAX = 32;
 var STORAGE_MIN = 20;
 var STORAGE_MAX = 512;
-function calcCost(cpu, ram) {
-  const cost = cpu * 0.045 + ram * 5e-3;
+function calcCost(cpu, ram, storage) {
+  const cost = cpu * 0.045 + ram * 5e-3 + storage * 11e-4;
   return cost.toFixed(2);
 }
 function ProvisioningWizard({
@@ -345,17 +357,32 @@ function ProvisioningWizard({
   variant = "flat",
   defaultEnvironment,
   defaultConfig,
-  skipToReview
+  skipToReview,
+  onLoadStartupScripts,
+  resourceLimits
 }) {
+  const cpuMax = Math.max(CPU_MIN, Math.min(resourceLimits?.cpuMax ?? CPU_MAX, CPU_MAX));
+  const ramMax = Math.max(RAM_MIN, Math.min(resourceLimits?.ramMaxGB ?? RAM_MAX, RAM_MAX));
+  const storageMax = Math.max(STORAGE_MIN, Math.min(resourceLimits?.storageMaxGB ?? STORAGE_MAX, STORAGE_MAX));
   const dc = defaultConfig;
   const [envList, setEnvList] = React2.useState(environmentsProp ?? defaultEnvironments);
+  const onLoadEnvironmentsRef = React2.useRef(onLoadEnvironments);
+  onLoadEnvironmentsRef.current = onLoadEnvironments;
   React2.useEffect(() => {
-    if (onLoadEnvironments) {
-      onLoadEnvironments().then((entries) => setEnvList(entries.map(resolveEnvironment)));
+    let cancelled = false;
+    if (onLoadEnvironmentsRef.current) {
+      onLoadEnvironmentsRef.current().then((entries) => {
+        if (!cancelled) setEnvList(entries.map(resolveEnvironment));
+      }).catch((err) => {
+        if (!cancelled) setLoadError(err instanceof Error ? err.message : "Failed to load environments");
+      });
     } else if (environmentsProp) {
       setEnvList(environmentsProp);
     }
-  }, [onLoadEnvironments, environmentsProp]);
+    return () => {
+      cancelled = true;
+    };
+  }, [environmentsProp]);
   const environments = envList;
   const effectiveDefault = dc?.environment ?? defaultEnvironment;
   const [selectedEnv, setSelectedEnv] = React2.useState(effectiveDefault ?? environments[0]?.id ?? "");
@@ -364,9 +391,14 @@ function ProvisioningWizard({
       setSelectedEnv(effectiveDefault);
     }
   }, [envList, effectiveDefault]);
-  const [cpuCores, setCpuCores] = React2.useState(dc?.cpuCores ?? 4);
-  const [ramGB, setRamGB] = React2.useState(dc?.ramGB ?? 16);
-  const [storageGB, setStorageGB] = React2.useState(dc?.storageGB ?? 128);
+  const [cpuCores, setCpuCores] = React2.useState(Math.min(dc?.cpuCores ?? 4, cpuMax));
+  const [ramGB, setRamGB] = React2.useState(Math.min(dc?.ramGB ?? 16, ramMax));
+  const [storageGB, setStorageGB] = React2.useState(Math.min(dc?.storageGB ?? 128, storageMax));
+  React2.useEffect(() => {
+    setCpuCores((prev) => Math.min(prev, cpuMax));
+    setRamGB((prev) => Math.min(prev, ramMax));
+    setStorageGB((prev) => Math.min(prev, storageMax));
+  }, [cpuMax, ramMax, storageMax]);
   const [modelTier, setModelTier] = React2.useState(dc?.modelTier ?? "claude-sonnet");
   const [systemPrompt, setSystemPrompt] = React2.useState(dc?.systemPrompt ?? "");
   const [name, setName] = React2.useState(dc?.name ?? "");
@@ -374,20 +406,55 @@ function ProvisioningWizard({
   const [envVars, setEnvVars] = React2.useState(dc?.envVars ?? [{ key: "", value: "" }]);
   const [driver, setDriver] = React2.useState(dc?.driver ?? "docker");
   const [bare, setBare] = React2.useState(dc?.bare ?? false);
+  const [startupScriptIds, setStartupScriptIds] = React2.useState(dc?.startupScriptIds ?? []);
+  const [availableScripts, setAvailableScripts] = React2.useState([]);
+  const [activePreset, setActivePreset] = React2.useState(null);
   const [showAdvanced, setShowAdvanced] = React2.useState(false);
+  const [loadError, setLoadError] = React2.useState(null);
+  const onLoadStartupScriptsRef = React2.useRef(onLoadStartupScripts);
+  onLoadStartupScriptsRef.current = onLoadStartupScripts;
+  React2.useEffect(() => {
+    let cancelled = false;
+    if (onLoadStartupScriptsRef.current) {
+      onLoadStartupScriptsRef.current().then((scripts) => {
+        if (!cancelled) setAvailableScripts(scripts);
+      }).catch((err) => {
+        if (!cancelled) setLoadError(err instanceof Error ? err.message : "Failed to load startup scripts");
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, []);
   const isMultistep = variant === "multistep";
   const [currentStep, setCurrentStep] = React2.useState(skipToReview && dc && isMultistep ? 3 : 1);
   const [isDeploying, setIsDeploying] = React2.useState(false);
-  const handleDeploy = () => {
+  const [deployError, setDeployError] = React2.useState(null);
+  const handleDeploy = async () => {
+    if (!onSubmit) return;
     setIsDeploying(true);
-    onSubmit?.({ environment: selectedEnv, cpuCores, ramGB, storageGB, modelTier, systemPrompt, name, gitUrl, envVars: envVars.filter((e) => e.key.trim() !== ""), driver, bare });
+    setDeployError(null);
+    try {
+      const validScriptIds = new Set(availableScripts.filter((s) => s.enabled).map((s) => s.id));
+      await onSubmit({ environment: selectedEnv, cpuCores, ramGB, storageGB, modelTier, systemPrompt, name, gitUrl, envVars: envVars.filter((e) => e.key.trim() !== ""), driver, bare, startupScriptIds: startupScriptIds.filter((id) => validScriptIds.has(id)) });
+    } catch (err) {
+      setDeployError(err instanceof Error ? err.message : "Deployment failed");
+    } finally {
+      setIsDeploying(false);
+    }
   };
-  const applyPreset = (cpu, ram, storage) => {
-    setCpuCores(cpu);
-    setRamGB(ram);
-    setStorageGB(storage);
+  const applyPreset = (name2, cpu, ram, storage) => {
+    setCpuCores(Math.min(cpu, cpuMax));
+    setRamGB(Math.min(ram, ramMax));
+    setStorageGB(Math.min(storage, storageMax));
+    setActivePreset(name2);
   };
-  const hourCost = calcCost(cpuCores, ramGB);
+  const presets = [
+    { name: "Lightweight", cpu: Math.min(2, cpuMax), ram: Math.min(4, ramMax), storage: Math.min(50, storageMax) },
+    { name: "Standard", cpu: Math.min(4, cpuMax), ram: Math.min(16, ramMax), storage: Math.min(128, storageMax) },
+    { name: "Performance", cpu: Math.min(8, cpuMax), ram: Math.min(32, ramMax), storage: Math.min(256, storageMax) }
+  ];
+  const hourCost = calcCost(cpuCores, ramGB, storageGB);
   return /* @__PURE__ */ jsxs2("div", { className: cn("max-w-6xl mx-auto flex flex-col", className), children: [
     /* @__PURE__ */ jsxs2("div", { className: "mb-6 flex items-center gap-4 shrink-0", children: [
       onBack && /* @__PURE__ */ jsx2("button", { type: "button", onClick: onBack, className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border hover:bg-muted/50 transition-colors text-foreground", children: /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-5 w-5" }) }),
@@ -398,18 +465,21 @@ function ProvisioningWizard({
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-12 gap-6 flex-1 min-h-0", children: [
       /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-8 flex flex-col min-h-0", children: [
-        isMultistep && /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 mb-4 glass-panel p-3 rounded-2xl mx-auto max-w-2xl justify-between shrink-0", children: [1, 2, 3].map((s) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx2("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs transition-colors shrink-0", currentStep === s ? "bg-primary text-primary-foreground" : currentStep > s ? "bg-primary/40 text-primary-foreground" : "bg-muted text-muted-foreground"), children: s }),
-          /* @__PURE__ */ jsxs2("span", { className: cn("ml-2 sm:ml-3 font-bold text-sm tracking-tight hidden sm:inline", currentStep === s ? "text-foreground" : currentStep > s ? "text-primary/60" : "text-muted-foreground"), children: [
+        isMultistep && /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 mb-4 bg-card border border-border p-3 rounded-2xl mx-auto max-w-2xl justify-between shrink-0", children: [1, 2, 3].map((s) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx2("div", { className: cn(
+            "w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 transition-all duration-200",
+            currentStep === s ? "bg-primary text-primary-foreground ring-2 ring-primary/30 ring-offset-2 ring-offset-card shadow-sm" : currentStep > s ? "bg-primary text-primary-foreground" : "bg-muted border border-border text-muted-foreground"
+          ), children: currentStep > s ? /* @__PURE__ */ jsx2(Check, { className: "h-3.5 w-3.5" }) : s }),
+          /* @__PURE__ */ jsxs2("span", { className: cn("ml-2 sm:ml-3 font-bold text-sm tracking-tight hidden sm:inline transition-colors duration-200", currentStep === s ? "text-foreground" : currentStep > s ? "text-primary" : "text-muted-foreground"), children: [
             s === 1 && "Environment",
             s === 2 && "Resources",
             s === 3 && "AI Agent"
           ] }),
-          s < 3 && /* @__PURE__ */ jsx2("div", { className: cn("w-4 sm:w-8 h-px mx-2 sm:mx-4 transition-colors", currentStep > s ? "bg-primary/40" : "bg-border") })
+          s < 3 && /* @__PURE__ */ jsx2("div", { className: cn("w-4 sm:w-8 h-0.5 mx-2 sm:mx-4 rounded-full transition-colors duration-300", currentStep > s ? "bg-primary" : "bg-border") })
         ] }, s)) }),
-        dc && isMultistep && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between glass-panel rounded-2xl px-4 py-3 shrink-0", children: [
+        dc && isMultistep && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between bg-card border border-border rounded-2xl px-4 py-3 shrink-0", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm", children: [
-            /* @__PURE__ */ jsx2(Info, { className: "h-4 w-4 text-accent shrink-0" }),
+            /* @__PURE__ */ jsx2(Info, { className: "h-4 w-4 text-primary shrink-0" }),
             /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "Pre-configured from template." })
           ] }),
           /* @__PURE__ */ jsx2(
@@ -418,22 +488,33 @@ function ProvisioningWizard({
               type: "button",
               onClick: () => {
                 setCurrentStep(1);
-                setCpuCores(4);
-                setRamGB(16);
-                setStorageGB(128);
+                setSelectedEnv(environments[0]?.id ?? "");
+                setCpuCores(Math.min(4, cpuMax));
+                setRamGB(Math.min(16, ramMax));
+                setStorageGB(Math.min(128, storageMax));
                 setModelTier("claude-sonnet");
                 setSystemPrompt("");
+                setName("");
+                setGitUrl("");
+                setEnvVars([{ key: "", value: "" }]);
+                setDriver("docker");
                 setBare(false);
+                setStartupScriptIds([]);
+                setActivePreset(null);
               },
-              className: "text-xs font-bold text-accent hover:text-accent-deep transition-colors",
+              className: "text-xs font-bold text-primary hover:text-primary/70 transition-colors",
               children: "Start from scratch"
             }
           )
         ] }),
+        loadError && /* @__PURE__ */ jsxs2("div", { className: "rounded-2xl border border-destructive/30 bg-destructive/10 p-3 flex items-center gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsx2(Info, { className: "h-4 w-4 text-destructive shrink-0" }),
+          /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium text-destructive", children: loadError })
+        ] }),
         /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-y-auto min-h-0 space-y-4", children: [
-          (!isMultistep || currentStep === 1) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: "glass-panel rounded-[24px] p-6 shadow-2xl relative overflow-hidden", children: [
+          (!isMultistep || currentStep === 1) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: "bg-card border border-border rounded-[24px] p-6 shadow-2xl relative overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-300", children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 mb-6", children: [
-              /* @__PURE__ */ jsx2("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent/10 border border-accent/20 text-accent glow-primary", children: /* @__PURE__ */ jsx2(Layers, { className: "h-5 w-5" }) }),
+              /* @__PURE__ */ jsx2("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 border border-primary/20 text-primary", children: /* @__PURE__ */ jsx2(Layers, { className: "h-5 w-5" }) }),
               /* @__PURE__ */ jsx2("h2", { className: "text-lg font-bold text-foreground tracking-tight", children: "Environment Selection" })
             ] }),
             /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: environments.map((env) => /* @__PURE__ */ jsxs2(
@@ -442,14 +523,17 @@ function ProvisioningWizard({
                 type: "button",
                 onClick: () => setSelectedEnv(env.id),
                 className: cn(
-                  "group relative p-4 rounded-[16px] transition-all text-left overflow-hidden border border-transparent",
-                  selectedEnv === env.id ? "glass-panel-heavy border-accent glow-primary" : "glass-panel hover:border-[var(--glass-border-color)]"
+                  "group relative p-4 rounded-[16px] text-left overflow-hidden border transition-all duration-200",
+                  selectedEnv === env.id ? "bg-primary/5 border-primary ring-2 ring-primary/20 shadow-md" : "bg-card border-border hover:border-primary/30 hover:shadow-sm hover:-translate-y-0.5 active:scale-[0.98]"
                 ),
                 children: [
-                  selectedEnv === env.id && /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-gradient-to-br from-accent/10 to-transparent pointer-events-none" }),
+                  selectedEnv === env.id && /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/8 to-transparent pointer-events-none" }),
                   /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-start mb-3 relative z-10", children: [
                     /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-full flex items-center justify-center bg-muted/50 border border-border shadow-inner", children: env.icon }),
-                    /* @__PURE__ */ jsx2("div", { className: cn("w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors", selectedEnv === env.id ? "border-accent bg-accent/20" : "border-border"), children: selectedEnv === env.id && /* @__PURE__ */ jsx2("div", { className: "w-2.5 h-2.5 bg-accent rounded-full animate-in zoom-in" }) })
+                    /* @__PURE__ */ jsx2("div", { className: cn(
+                      "w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200",
+                      selectedEnv === env.id ? "border-primary bg-primary" : "border-border group-hover:border-primary/40"
+                    ), children: selectedEnv === env.id && /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3 text-primary-foreground animate-in zoom-in duration-200" }) })
                   ] }),
                   /* @__PURE__ */ jsx2("h3", { className: "font-bold text-sm mb-0.5 text-foreground relative z-10", children: env.name }),
                   /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground leading-relaxed relative z-10", children: env.description })
@@ -458,39 +542,39 @@ function ProvisioningWizard({
               env.id
             )) })
           ] }) }),
-          (!isMultistep || currentStep === 2) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: "glass-panel rounded-[24px] p-6 shadow-2xl relative overflow-hidden", children: [
+          (!isMultistep || currentStep === 2) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: "bg-card border border-border rounded-[24px] p-6 shadow-2xl relative overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-300", children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 mb-5", children: [
-              /* @__PURE__ */ jsx2("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent/10 border border-accent/20 text-accent glow-primary", children: /* @__PURE__ */ jsx2(Cpu, { className: "h-5 w-5" }) }),
+              /* @__PURE__ */ jsx2("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 border border-primary/20 text-primary", children: /* @__PURE__ */ jsx2(Cpu, { className: "h-5 w-5" }) }),
               /* @__PURE__ */ jsx2("h2", { className: "text-lg font-bold text-foreground tracking-tight", children: "Resource Allocation" })
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "mb-6", children: [
               /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-3", children: "Compute Presets" }),
-              /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-3 gap-3", children: [
-                /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(2, 4, 50), className: cn("p-3 rounded-[14px] transition-all text-center group", cpuCores === 2 && ramGB === 4 && storageGB === 50 ? "glass-panel-heavy border-accent glow-primary" : "glass-panel hover:border-[var(--glass-border-color)]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors", cpuCores === 2 && ramGB === 4 && storageGB === 50 ? "text-accent" : "text-foreground"), children: "Lightweight" }),
-                  /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: "2C / 4G / 50G" })
-                ] }),
-                /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(4, 16, 128), className: cn("p-3 rounded-[14px] transition-all text-center group", cpuCores === 4 && ramGB === 16 && storageGB === 128 ? "glass-panel-heavy border-accent glow-primary" : "glass-panel hover:border-[var(--glass-border-color)]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors", cpuCores === 4 && ramGB === 16 && storageGB === 128 ? "text-accent" : "text-foreground"), children: "Standard" }),
-                  /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: "4C / 16G / 128G" })
-                ] }),
-                /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(8, 32, 256), className: cn("p-3 rounded-[14px] transition-all text-center group", cpuCores === 8 && ramGB === 32 && storageGB === 256 ? "glass-panel-heavy border-accent glow-primary" : "glass-panel hover:border-[var(--glass-border-color)]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors", cpuCores === 8 && ramGB === 32 && storageGB === 256 ? "text-accent" : "text-foreground"), children: "Performance" }),
-                  /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: "8C / 32G / 256G" })
-                ] })
-              ] })
+              /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3 gap-3", children: presets.map((p) => {
+                const active = activePreset === p.name;
+                return /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(p.name, p.cpu, p.ram, p.storage), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", active ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
+                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", active ? "text-primary" : "text-foreground"), children: p.name }),
+                  /* @__PURE__ */ jsxs2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: [
+                    p.cpu,
+                    "C / ",
+                    p.ram,
+                    "G / ",
+                    p.storage,
+                    "G"
+                  ] })
+                ] }, p.name);
+              }) })
             ] }),
             /* @__PURE__ */ jsx2("div", { className: "space-y-6", children: [
-              { label: "Compute Cores (CPU)", value: cpuCores, setter: setCpuCores, min: CPU_MIN, max: CPU_MAX, step: 0.5, unit: "vCPUs" },
-              { label: "Memory (RAM)", value: ramGB, setter: setRamGB, min: RAM_MIN, max: RAM_MAX, step: 1, unit: "GB" },
-              { label: "Ephemeral Storage", value: storageGB, setter: setStorageGB, min: STORAGE_MIN, max: STORAGE_MAX, step: 8, unit: "GB" }
+              { label: "Compute Cores (CPU)", value: cpuCores, setter: setCpuCores, min: CPU_MIN, max: cpuMax, step: 0.5, unit: "vCPUs" },
+              { label: "Memory (RAM)", value: ramGB, setter: setRamGB, min: RAM_MIN, max: ramMax, step: 1, unit: "GB" },
+              { label: "Ephemeral Storage", value: storageGB, setter: setStorageGB, min: STORAGE_MIN, max: storageMax, step: 8, unit: "GB" }
             ].map(({ label, value, setter, min, max, step: s, unit }) => /* @__PURE__ */ jsxs2("div", { children: [
               /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end border-b border-border pb-1.5 mb-2", children: [
                 /* @__PURE__ */ jsx2("label", { className: "font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: label }),
                 /* @__PURE__ */ jsxs2("span", { className: "text-xl font-bold text-foreground tracking-tight", children: [
                   value,
                   " ",
-                  /* @__PURE__ */ jsx2("span", { className: "text-xs text-accent/80 ml-1", children: unit })
+                  /* @__PURE__ */ jsx2("span", { className: "text-xs text-primary ml-1", children: unit })
                 ] })
               ] }),
               /* @__PURE__ */ jsx2(
@@ -501,8 +585,11 @@ function ProvisioningWizard({
                   max,
                   step: s,
                   value,
-                  onChange: (e) => setter(+e.target.value),
-                  className: "w-full h-1.5 bg-muted rounded-full appearance-none cursor-pointer accent-accent"
+                  onChange: (e) => {
+                    setter(+e.target.value);
+                    setActivePreset(null);
+                  },
+                  className: "w-full h-2 rounded-full appearance-none cursor-pointer accent-primary [&::-webkit-slider-runnable-track]:bg-border [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:bg-border [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-2 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-foreground [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110"
                 }
               ),
               /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground/60 mt-1", children: [
@@ -517,9 +604,9 @@ function ProvisioningWizard({
               ] })
             ] }, label)) })
           ] }) }),
-          (!isMultistep || currentStep === 3) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: "glass-panel rounded-[24px] p-6 shadow-2xl relative overflow-hidden", children: [
+          (!isMultistep || currentStep === 3) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: "bg-card border border-border rounded-[24px] p-6 shadow-2xl relative overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-300", children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 mb-5", children: [
-              /* @__PURE__ */ jsx2("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent/10 border border-accent/20 text-accent glow-primary", children: /* @__PURE__ */ jsx2(Bot, { className: "h-5 w-5" }) }),
+              /* @__PURE__ */ jsx2("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 border border-primary/20 text-primary", children: /* @__PURE__ */ jsx2(Bot, { className: "h-5 w-5" }) }),
               /* @__PURE__ */ jsx2("h2", { className: "text-lg font-bold text-foreground tracking-tight", children: "AI Agent Capability" })
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "space-y-5", children: [
@@ -530,7 +617,7 @@ function ProvisioningWizard({
                   {
                     value: modelTier,
                     onChange: (e) => setModelTier(e.target.value),
-                    className: "w-full glass-panel rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent appearance-none",
+                    className: "w-full bg-card border border-border rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none",
                     children: [
                       /* @__PURE__ */ jsx2("option", { value: "llama-3-8b", className: "bg-gray-900", children: "Llama-3-8B-Instruct (Lightweight)" }),
                       /* @__PURE__ */ jsx2("option", { value: "mistral-7b", className: "bg-gray-900", children: "Mistral-7B-v0.2 (Efficient)" }),
@@ -546,7 +633,8 @@ function ProvisioningWizard({
                   {
                     value: systemPrompt,
                     onChange: (e) => setSystemPrompt(e.target.value),
-                    className: "w-full glass-panel rounded-xl p-4 font-mono text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent h-32 resize-none placeholder:text-muted-foreground",
+                    maxLength: 1e4,
+                    className: "w-full bg-card border border-border rounded-xl p-4 font-mono text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent h-32 resize-none placeholder:text-muted-foreground",
                     placeholder: "Define the autonomous directives or operational boundaries..."
                   }
                 )
@@ -574,7 +662,8 @@ function ProvisioningWizard({
                           type: "text",
                           value: name,
                           onChange: (e) => setName(e.target.value),
-                          className: "w-full glass-panel rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent placeholder:text-muted-foreground",
+                          maxLength: 128,
+                          className: "w-full bg-card border border-border rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent placeholder:text-muted-foreground",
                           placeholder: "my-cool-sandbox"
                         }
                       )
@@ -585,8 +674,10 @@ function ProvisioningWizard({
                         "select",
                         {
                           value: driver,
-                          onChange: (e) => setDriver(e.target.value),
-                          className: "w-full glass-panel rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent appearance-none",
+                          onChange: (e) => {
+                            if (VALID_DRIVERS.has(e.target.value)) setDriver(e.target.value);
+                          },
+                          className: "w-full bg-card border border-border rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none",
                           children: [
                             /* @__PURE__ */ jsx2("option", { value: "docker", className: "bg-gray-900", children: "Docker container (Default)" }),
                             /* @__PURE__ */ jsx2("option", { value: "firecracker", className: "bg-gray-900", children: "Firecracker microVM (Secure)" }),
@@ -604,7 +695,7 @@ function ProvisioningWizard({
                         type: "text",
                         value: gitUrl,
                         onChange: (e) => setGitUrl(e.target.value),
-                        className: "w-full glass-panel rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent placeholder:text-muted-foreground",
+                        className: "w-full bg-card border border-border rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent placeholder:text-muted-foreground",
                         placeholder: "https://github.com/my-org/my-repo.git"
                       }
                     )
@@ -612,7 +703,7 @@ function ProvisioningWizard({
                   /* @__PURE__ */ jsxs2("div", { children: [
                     /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-2", children: [
                       /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Environment Variables" }),
-                      /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => setEnvVars([...envVars, { key: "", value: "" }]), className: "flex items-center gap-1 text-xs text-accent hover:text-accent-deep transition-colors font-bold", children: [
+                      /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => setEnvVars([...envVars, { key: "", value: "" }]), className: "flex items-center gap-1 text-xs text-primary hover:text-primary/70 transition-colors font-bold", children: [
                         /* @__PURE__ */ jsx2(Plus, { className: "h-3 w-3" }),
                         " Add Var"
                       ] })
@@ -625,7 +716,7 @@ function ProvisioningWizard({
                             type: "text",
                             value: env.key,
                             onChange: (e) => setEnvVars(envVars.map((v, idx) => idx === i ? { ...v, key: e.target.value } : v)),
-                            className: "flex-1 glass-panel rounded-xl h-10 px-3 font-mono text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent placeholder:text-muted-foreground",
+                            className: "flex-1 bg-card border border-border rounded-xl h-10 px-3 font-mono text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary placeholder:text-muted-foreground",
                             placeholder: "API_KEY"
                           }
                         ),
@@ -635,22 +726,52 @@ function ProvisioningWizard({
                             type: "password",
                             value: env.value,
                             onChange: (e) => setEnvVars(envVars.map((v, idx) => idx === i ? { ...v, value: e.target.value } : v)),
-                            className: "flex-[2] glass-panel rounded-xl h-10 px-3 font-mono text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent placeholder:text-muted-foreground",
+                            className: "flex-[2] bg-card border border-border rounded-xl h-10 px-3 font-mono text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary placeholder:text-muted-foreground",
                             placeholder: "sk-xxxxxxxxxxx"
                           }
                         ),
-                        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setEnvVars(envVars.filter((_, idx) => idx !== i)), className: "h-10 w-10 flex items-center justify-center shrink-0 rounded-xl glass-panel text-red-400 hover:bg-red-500/10 hover:border-red-500/30 transition-colors", children: /* @__PURE__ */ jsx2(Trash2, { className: "h-4 w-4" }) })
+                        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setEnvVars(envVars.filter((_, idx) => idx !== i)), className: "h-10 w-10 flex items-center justify-center shrink-0 rounded-xl bg-card border border-border text-red-400 hover:bg-red-500/10 hover:border-red-500/30 transition-colors", children: /* @__PURE__ */ jsx2(Trash2, { className: "h-4 w-4" }) })
                       ] }, i)),
-                      envVars.length === 0 && /* @__PURE__ */ jsx2("div", { className: "text-center p-3 glass-panel rounded-xl text-muted-foreground/60 text-sm italic", children: "No environment variables set" })
+                      envVars.length === 0 && /* @__PURE__ */ jsx2("div", { className: "text-center p-3 bg-card border border-border rounded-xl text-muted-foreground/60 text-sm italic", children: "No environment variables set" })
                     ] })
                   ] }),
+                  availableScripts.length > 0 && /* @__PURE__ */ jsxs2("div", { children: [
+                    /* @__PURE__ */ jsx2("div", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Startup Scripts" }),
+                    /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: availableScripts.filter((s) => s.enabled).map((script) => {
+                      const selected = startupScriptIds.includes(script.id);
+                      return /* @__PURE__ */ jsxs2("label", { className: "flex items-start gap-3 cursor-pointer group rounded-lg border border-border p-3 transition-colors hover:border-primary/30", children: [
+                        /* @__PURE__ */ jsx2(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: selected,
+                            onChange: () => setStartupScriptIds(
+                              (prev) => selected ? prev.filter((id) => id !== script.id) : [...prev, script.id]
+                            ),
+                            className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary/30"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors", children: script.name }),
+                          script.description && /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5", children: script.description }),
+                          script.injectSecrets.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-1 mt-1.5", children: script.injectSecrets.map((s) => /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground", children: [
+                            /* @__PURE__ */ jsxs2("svg", { className: "h-2.5 w-2.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                              /* @__PURE__ */ jsx2("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+                              /* @__PURE__ */ jsx2("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+                            ] }),
+                            s
+                          ] }, s)) })
+                        ] })
+                      ] }, script.id);
+                    }) })
+                  ] }),
                   /* @__PURE__ */ jsx2("div", { className: "pt-2 border-t border-border", children: /* @__PURE__ */ jsxs2("label", { className: "flex items-center gap-3 cursor-pointer group", children: [
                     /* @__PURE__ */ jsxs2("div", { className: "relative flex items-center justify-center shrink-0", children: [
                       /* @__PURE__ */ jsx2("input", { type: "checkbox", className: "sr-only peer", checked: bare, onChange: (e) => setBare(e.target.checked) }),
-                      /* @__PURE__ */ jsx2("div", { className: "w-10 h-6 bg-muted peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent hover:bg-white/20 transition-colors" })
+                      /* @__PURE__ */ jsx2("div", { className: "w-10 h-6 bg-muted peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary hover:bg-muted/80 transition-colors" })
                     ] }),
                     /* @__PURE__ */ jsxs2("div", { children: [
-                      /* @__PURE__ */ jsx2("div", { className: "text-sm font-bold text-foreground mb-0.5 group-hover:text-accent transition-colors", children: "Bare Mode" }),
+                      /* @__PURE__ */ jsx2("div", { className: "text-sm font-bold text-foreground mb-0.5 group-hover:text-primary transition-colors", children: "Bare Mode" }),
                       /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground", children: "Start as a raw container without an embedded AI Agent backend." })
                     ] })
                   ] }) })
@@ -661,7 +782,7 @@ function ProvisioningWizard({
         ] })
       ] }),
       /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-4 sticky top-4 space-y-4", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "glass-panel-heavy rounded-[24px] overflow-hidden shadow-2xl relative", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "bg-card border border-primary/15 rounded-[24px] overflow-hidden shadow-2xl relative", children: [
           /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(173,163,255,0.05)_0,transparent_100%)] pointer-events-none" }),
           /* @__PURE__ */ jsxs2("div", { className: "bg-muted/50 border-b border-border px-4 py-3 flex items-center gap-3", children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
@@ -678,54 +799,54 @@ function ProvisioningWizard({
             ] }),
             /* @__PURE__ */ jsx2("div", { className: "text-muted-foreground/70", children: "Initializing deployment handshake..." }),
             /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-accent mr-2", children: "\u2713" }),
+              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
               " Bound Platform: ",
-              /* @__PURE__ */ jsx2("span", { className: "text-foreground font-bold", children: environments.find((e) => e.id === selectedEnv)?.name ?? "Node.js" })
+              /* @__PURE__ */ jsx2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: environments.find((e) => e.id === selectedEnv)?.name ?? "Node.js" }, `env-${selectedEnv}`)
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-accent mr-2", children: "\u2713" }),
+              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
               " Allocation CPU: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: [
                 cpuCores,
                 " Cores"
-              ] })
+              ] }, `cpu-${cpuCores}`)
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-accent mr-2", children: "\u2713" }),
+              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
               " Allocation RAM: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: [
                 ramGB,
                 "GB"
-              ] })
+              ] }, `ram-${ramGB}`)
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-accent mr-2", children: "\u2713" }),
+              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
               " Mounted Storage: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: [
                 storageGB,
                 "GB NVMe"
-              ] })
+              ] }, `disk-${storageGB}`)
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "pt-3 flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx2("div", { className: "w-2 h-4 bg-accent animate-pulse" }),
+              /* @__PURE__ */ jsx2("div", { className: "w-2 h-4 bg-primary animate-pulse" }),
               /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "Awaiting user confirmation..." })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "p-6 rounded-2xl bg-accent/5 backdrop-blur-md border border-accent/20 shadow-[0_0_30px_rgba(173,163,255,0.1)] relative overflow-hidden", children: [
-          /* @__PURE__ */ jsx2("div", { className: "absolute -top-20 -right-20 w-40 h-40 bg-accent/20 blur-[50px] rounded-full" }),
+        /* @__PURE__ */ jsxs2("div", { className: "p-6 rounded-[24px] bg-card border border-primary/15 relative overflow-hidden", children: [
+          /* @__PURE__ */ jsx2("div", { className: "hidden" }),
           /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-4 relative z-10", children: [
             /* @__PURE__ */ jsx2("span", { className: "font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Run Cost" }),
-            /* @__PURE__ */ jsx2("div", { className: "h-7 w-7 rounded-full bg-muted/30 flex items-center justify-center border border-border", children: /* @__PURE__ */ jsx2(Info, { className: "h-3.5 w-3.5 text-accent" }) })
+            /* @__PURE__ */ jsx2("div", { className: "h-7 w-7 rounded-full bg-muted/30 flex items-center justify-center border border-border", children: /* @__PURE__ */ jsx2(Info, { className: "h-3.5 w-3.5 text-primary" }) })
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2 mb-5 relative z-10", children: [
-            /* @__PURE__ */ jsxs2("span", { className: "text-4xl font-black text-foreground tracking-tighter", children: [
+            /* @__PURE__ */ jsxs2("span", { className: "text-4xl font-black text-foreground tracking-tighter animate-in fade-in duration-200", children: [
               "$",
               hourCost
-            ] }),
+            ] }, hourCost),
             /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-bold", children: "/ hour" })
           ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "space-y-2 relative z-10 glass-panel rounded-xl p-3 border border-border", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "space-y-2 relative z-10 bg-card border border-border rounded-xl p-3", children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
               /* @__PURE__ */ jsx2("span", { children: "COMPUTE" }),
               /* @__PURE__ */ jsxs2("span", { className: "text-foreground", children: [
@@ -738,37 +859,47 @@ function ProvisioningWizard({
               /* @__PURE__ */ jsx2("span", { children: "MEMORY" }),
               /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
                 "$",
-                (ramGB * 5e-3).toFixed(2)
+                (ramGB * 5e-3).toFixed(2),
+                "/h"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+              /* @__PURE__ */ jsx2("span", { children: "STORAGE" }),
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
+                "$",
+                (storageGB * 11e-4).toFixed(2),
+                "/h"
               ] })
             ] })
           ] })
         ] }),
+        deployError && /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border border-destructive/30 bg-destructive/10 p-3 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(Info, { className: "h-4 w-4 text-destructive shrink-0" }),
+          /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium text-destructive", children: deployError })
+        ] }),
         /* @__PURE__ */ jsx2("div", { className: "space-y-3", children: isMultistep ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
           currentStep < 3 ? /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
               onClick: () => setCurrentStep((s) => s + 1),
-              className: "w-full relative overflow-hidden h-12 bg-accent/10 text-accent font-extrabold text-sm rounded-2xl border border-accent/20 hover:bg-accent/20 transition-colors shadow-sm shadow-accent/10",
+              className: "w-full relative overflow-hidden h-12 bg-primary text-primary-foreground font-extrabold text-sm rounded-2xl hover:brightness-110 transition-all active:scale-[0.98] shadow-md",
               children: [
                 "Continue to ",
                 currentStep === 1 ? "Resources" : "Agent Config"
               ]
             }
-          ) : /* @__PURE__ */ jsxs2(
+          ) : /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
               onClick: handleDeploy,
               disabled: isDeploying || !selectedEnv,
-              className: "w-full relative overflow-hidden h-12 bg-gradient-to-r from-accent to-accent-deep text-white font-extrabold text-sm rounded-2xl tracking-wide shadow-[0_0_20px_rgba(130,99,255,0.2)] disabled:opacity-50 transition-transform active:scale-[0.98]",
-              children: [
-                isDeploying ? /* @__PURE__ */ jsxs2("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
-                  /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin" }),
-                  "Deploying..."
-                ] }) : /* @__PURE__ */ jsx2("span", { className: "relative z-10", children: "Deploy Workspace" }),
-                /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-white/20 opacity-0 hover:opacity-100 transition-opacity" })
-              ]
+              className: "w-full h-12 bg-primary text-primary-foreground font-extrabold text-sm rounded-2xl tracking-wide shadow-md disabled:opacity-50 hover:brightness-110 active:scale-[0.98] transition-all",
+              children: isDeploying ? /* @__PURE__ */ jsxs2("span", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin" }),
+                "Deploying..."
+              ] }) : "Deploy Workspace"
             }
           ),
           currentStep > 1 && /* @__PURE__ */ jsx2(
@@ -776,24 +907,21 @@ function ProvisioningWizard({
             {
               type: "button",
               onClick: () => setCurrentStep((s) => s - 1),
-              className: "w-full h-10 glass-panel text-foreground/70 font-bold text-sm rounded-2xl hover:text-foreground hover:border-[var(--glass-border-color)] transition-colors",
+              className: "w-full h-10 bg-secondary text-secondary-foreground border border-border font-bold text-sm rounded-2xl hover:brightness-95 active:scale-[0.98] transition-all",
               children: "Back"
             }
           )
-        ] }) : /* @__PURE__ */ jsxs2(
+        ] }) : /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
             onClick: handleDeploy,
             disabled: isDeploying || !selectedEnv,
-            className: "w-full relative overflow-hidden h-12 bg-gradient-to-r from-accent to-accent-deep text-white font-extrabold text-sm rounded-2xl tracking-wide shadow-[0_0_20px_rgba(130,99,255,0.2)] disabled:opacity-50 transition-transform active:scale-[0.98]",
-            children: [
-              isDeploying ? /* @__PURE__ */ jsxs2("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin" }),
-                "Spinning up environment..."
-              ] }) : /* @__PURE__ */ jsx2("span", { className: "relative z-10", children: "Deploy Workspace" }),
-              /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-white/20 opacity-0 hover:opacity-100 transition-opacity" })
-            ]
+            className: "w-full h-12 bg-primary text-primary-foreground font-extrabold text-sm rounded-2xl tracking-wide shadow-md disabled:opacity-50 hover:brightness-110 active:scale-[0.98] transition-all",
+            children: isDeploying ? /* @__PURE__ */ jsxs2("span", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin" }),
+              "Spinning up environment..."
+            ] }) : "Deploy Workspace"
           }
         ) })
       ] })
@@ -813,16 +941,16 @@ async function fetchTiersFromApi(apiBasePath) {
 }
 var FAQ = [
   {
-    q: "What are credits?",
-    a: "Credits are used to pay for AI model usage. Different models consume different amounts of credits based on their complexity and the length of your requests."
+    q: "What is included usage?",
+    a: "Each plan includes a monthly USD usage balance. Compute and AI model usage are billed per second from this balance. If you exceed your included amount, overage is billed at the same rates with no penalty."
   },
   {
     q: "Can I change plans later?",
     a: "Yes. You can upgrade or downgrade your plan at any time. When you upgrade, you are charged the prorated difference. When you downgrade, the change takes effect at the end of your billing cycle."
   },
   {
-    q: "Do unused credits roll over?",
-    a: "Monthly credits do not roll over to the next month. However, purchased credit packs never expire and can be used at any time."
+    q: "Does unused balance roll over?",
+    a: "Monthly included usage does not roll over to the next month. Your balance resets at the start of each billing cycle."
   }
 ];
 function StandalonePricingPage({
@@ -833,6 +961,7 @@ function StandalonePricingPage({
   fetchTiers,
   title = "Simple, transparent pricing",
   subtitle = "Choose the plan that fits your needs. Upgrade or downgrade at any time.",
+  eyebrow,
   className
 }) {
   const [state, setState] = React3.useState({
@@ -889,7 +1018,8 @@ function StandalonePricingPage({
   );
   return /* @__PURE__ */ jsxs3("div", { className: cn("mx-auto max-w-6xl px-6 py-16 space-y-16", className), children: [
     /* @__PURE__ */ jsxs3("div", { className: "space-y-4 text-center", children: [
-      /* @__PURE__ */ jsx3("h1", { className: "text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl", children: title }),
+      eyebrow && /* @__PURE__ */ jsx3("span", { className: "text-xs font-bold uppercase tracking-widest text-[var(--brand-emerald,#10B981)]", children: eyebrow }),
+      /* @__PURE__ */ jsx3("h1", { className: "text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl font-display", children: title }),
       /* @__PURE__ */ jsx3("p", { className: "mx-auto max-w-2xl text-lg text-muted-foreground", children: subtitle })
     ] }),
     state.loading ? /* @__PURE__ */ jsxs3("div", { className: "space-y-8", children: [
@@ -1577,7 +1707,7 @@ function ProfileDetailDialog({
 
 // src/pages/secrets-page.tsx
 import * as React5 from "react";
-import { Lock, Plus as Plus3, Trash2 as Trash23, Eye, EyeOff, AlertCircle as AlertCircle2 } from "lucide-react";
+import { Lock, Plus as Plus3, Trash2 as Trash23, Eye, EyeOff, AlertCircle as AlertCircle2, Key, Shield, CheckCircle } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function SecretsPage({ apiClient, className }) {
   const [secrets, setSecrets] = React5.useState([]);
@@ -1593,23 +1723,27 @@ function SecretsPage({ apiClient, className }) {
   const [isDeleting, setIsDeleting] = React5.useState(false);
   const apiRef = React5.useRef(apiClient);
   apiRef.current = apiClient;
-  const loadSecrets = React5.useCallback(async () => {
+  const loadGenRef = React5.useRef(0);
+  const loadSecrets = React5.useCallback(async (showSpinner = true) => {
+    const gen = ++loadGenRef.current;
     try {
-      setLoading(true);
+      if (showSpinner) setLoading(true);
       setError(null);
       const data = await apiRef.current.listSecrets();
+      if (gen !== loadGenRef.current) return;
       setSecrets(data);
     } catch (err) {
+      if (gen !== loadGenRef.current) return;
       setError(err instanceof Error ? err.message : "Failed to load secrets");
     } finally {
-      setLoading(false);
+      if (gen === loadGenRef.current) setLoading(false);
     }
   }, []);
   React5.useEffect(() => {
     loadSecrets();
   }, [loadSecrets]);
   const handleCreate = async () => {
-    if (!newName.trim()) return;
+    if (!newName.trim() || !newValue.trim()) return;
     setIsCreating(true);
     setCreateError(null);
     try {
@@ -1618,7 +1752,7 @@ function SecretsPage({ apiClient, className }) {
       setNewName("");
       setNewValue("");
       setShowValue(false);
-      loadSecrets();
+      await loadSecrets(false);
     } catch (err) {
       setCreateError(err instanceof Error ? err.message : "Failed to create secret");
     } finally {
@@ -1630,7 +1764,7 @@ function SecretsPage({ apiClient, className }) {
     try {
       await apiRef.current.deleteSecret(name);
       setDeleteTarget(null);
-      loadSecrets();
+      await loadSecrets(false);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to delete secret");
     } finally {
@@ -1642,31 +1776,53 @@ function SecretsPage({ apiClient, className }) {
       const ts = /^\d+$/.test(dateStr) ? Number(dateStr) : dateStr;
       const date = new Date(ts);
       if (Number.isNaN(date.getTime())) return dateStr;
-      return date.toLocaleDateString();
+      return date.toLocaleDateString("en-US");
     } catch {
       return dateStr;
     }
   };
-  return /* @__PURE__ */ jsxs5("div", { className: cn("space-y-6", className), children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: cn("mx-auto w-full max-w-7xl space-y-8", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-4 md:flex-row md:items-end md:justify-between", children: [
       /* @__PURE__ */ jsxs5("div", { children: [
-        /* @__PURE__ */ jsx5("h1", { className: "font-bold text-3xl text-foreground", children: "Secrets" }),
-        /* @__PURE__ */ jsx5("p", { className: "mt-1 text-muted-foreground", children: "Secrets securely stored here will be automatically exposed as environment variables across all your new sandboxes." })
+        /* @__PURE__ */ jsx5("h1", { className: "font-display text-3xl font-extrabold tracking-tight text-foreground", children: "Environment Secrets" }),
+        /* @__PURE__ */ jsx5("p", { className: "mt-1 text-sm text-muted-foreground", children: "Secrets are securely stored and automatically exposed as environment variables across all your sandboxes." })
       ] }),
       /* @__PURE__ */ jsxs5(
         "button",
         {
           type: "button",
           onClick: () => setIsCreateOpen(true),
-          className: "inline-flex items-center gap-2 rounded-lg bg-primary/20 border border-primary/30 px-4 py-2 text-sm font-bold text-primary hover:bg-primary hover:text-primary-foreground transition-colors active:scale-[0.97]",
+          className: "inline-flex items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] border border-[var(--border-accent,transparent)] px-5 py-2.5 text-sm font-semibold text-[var(--btn-primary-text)] hover:bg-[var(--btn-primary-hover)] transition-colors active:scale-[0.97]",
           children: [
             /* @__PURE__ */ jsx5(Plus3, { className: "h-4 w-4" }),
-            "Create Secret"
+            "New Secret"
           ]
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsxs5("div", { className: "rounded-xl border border-destructive/30 bg-destructive/10 p-4 flex items-center gap-3", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-4", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "rounded-lg border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
+        /* @__PURE__ */ jsx5("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Total Active Secrets" }),
+        /* @__PURE__ */ jsx5("div", { className: "mt-2 flex items-baseline gap-2", children: /* @__PURE__ */ jsx5("span", { className: "font-display text-2xl font-extrabold text-foreground", children: secrets.length }) })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "rounded-lg border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
+        /* @__PURE__ */ jsx5("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Status" }),
+        /* @__PURE__ */ jsxs5("div", { className: "mt-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx5(CheckCircle, { className: "h-4 w-4 text-[var(--surface-success-text,#047857)]" }),
+          /* @__PURE__ */ jsx5("span", { className: "text-sm font-semibold text-[var(--surface-success-text,#047857)]", children: "Encrypted" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx5(
+        InfoPanel,
+        {
+          className: "md:col-span-2",
+          label: "Security Audit",
+          title: "All engines operational.",
+          description: "Secrets are encrypted at rest using AES-256."
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxs5("div", { className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 flex items-center gap-3", children: [
       /* @__PURE__ */ jsx5(AlertCircle2, { className: "h-5 w-5 text-destructive shrink-0" }),
       /* @__PURE__ */ jsx5("p", { className: "text-destructive text-sm font-medium", children: error })
     ] }),
@@ -1681,11 +1837,11 @@ function SecretsPage({ apiClient, className }) {
     }, children: /* @__PURE__ */ jsxs5(DialogContent, { className: "max-w-md", children: [
       /* @__PURE__ */ jsxs5(DialogHeader, { children: [
         /* @__PURE__ */ jsx5(DialogTitle, { children: "Create Secret" }),
-        /* @__PURE__ */ jsx5(DialogDescription, { children: "Secrets securely stored here will be automatically exposed as environment variables across all your new sandboxes." })
+        /* @__PURE__ */ jsx5(DialogDescription, { children: "Secrets are automatically exposed as environment variables across all your new sandboxes." })
       ] }),
       /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs5("div", { children: [
-          /* @__PURE__ */ jsx5("label", { className: "block text-sm font-medium text-foreground mb-1.5", children: "Name" }),
+          /* @__PURE__ */ jsx5("label", { className: "block text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Name" }),
           /* @__PURE__ */ jsx5(
             "input",
             {
@@ -1693,12 +1849,12 @@ function SecretsPage({ apiClient, className }) {
               value: newName,
               onChange: (e) => setNewName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")),
               placeholder: "MY_SECRET_KEY",
-              className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              className: "w-full rounded-md border border-border bg-card px-3 py-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
             }
           )
         ] }),
         /* @__PURE__ */ jsxs5("div", { children: [
-          /* @__PURE__ */ jsx5("label", { className: "block text-sm font-medium text-foreground mb-1.5", children: "Value" }),
+          /* @__PURE__ */ jsx5("label", { className: "block text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Value" }),
           /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
             /* @__PURE__ */ jsx5(
               "input",
@@ -1707,7 +1863,7 @@ function SecretsPage({ apiClient, className }) {
                 value: newValue,
                 onChange: (e) => setNewValue(e.target.value),
                 placeholder: "Enter secret value...",
-                className: "w-full rounded-lg border border-border bg-background px-3 py-2 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                className: "w-full rounded-md border border-border bg-card px-3 py-2.5 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
               }
             ),
             /* @__PURE__ */ jsx5(
@@ -1735,7 +1891,7 @@ function SecretsPage({ apiClient, className }) {
               setNewValue("");
               setCreateError(null);
             },
-            className: "rounded-lg border border-border bg-muted px-4 py-2 text-sm font-medium text-foreground hover:bg-muted/80 transition-colors",
+            className: "rounded-md border border-border bg-card px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors",
             children: "Cancel"
           }
         ),
@@ -1744,8 +1900,8 @@ function SecretsPage({ apiClient, className }) {
           {
             type: "button",
             onClick: handleCreate,
-            disabled: !newName.trim() || !newValue || isCreating,
-            className: "rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 active:scale-[0.97]",
+            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"
           }
         )
@@ -1768,7 +1924,7 @@ function SecretsPage({ apiClient, className }) {
           {
             type: "button",
             onClick: () => setDeleteTarget(null),
-            className: "rounded-lg border border-border bg-muted px-4 py-2 text-sm font-medium text-foreground hover:bg-muted/80 transition-colors",
+            className: "rounded-md border border-border bg-card px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors",
             children: "Cancel"
           }
         ),
@@ -1778,60 +1934,79 @@ function SecretsPage({ apiClient, className }) {
             type: "button",
             onClick: () => deleteTarget && handleDelete(deleteTarget),
             disabled: isDeleting,
-            className: "rounded-lg bg-destructive px-4 py-2 text-sm font-bold text-destructive-foreground hover:bg-destructive/90 transition-colors disabled:opacity-50 active:scale-[0.97]",
+            className: "rounded-md bg-destructive px-4 py-2 text-sm font-bold text-destructive-foreground hover:bg-destructive/90 transition-colors disabled:opacity-50 active:scale-[0.97]",
             children: isDeleting ? "Deleting..." : "Delete Secret"
           }
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs5("div", { className: "rounded-xl border border-border bg-card shadow-sm overflow-hidden", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "border-b border-border bg-muted/20 px-6 py-4 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx5("h2", { className: "text-sm font-bold text-foreground", children: "Your Secrets" }),
+    /* @__PURE__ */ jsxs5("div", { className: "overflow-hidden rounded-lg border border-border bg-card shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "border-b border-border px-6 py-4 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx5("div", { className: "flex gap-6", children: /* @__PURE__ */ jsx5("button", { type: "button", className: "text-xs font-bold uppercase tracking-widest text-foreground border-b-2 border-foreground pb-1", children: "All Secrets" }) }),
         /* @__PURE__ */ jsxs5("span", { className: "text-xs text-muted-foreground font-mono", children: [
           secrets.length,
           " secret",
           secrets.length !== 1 ? "s" : ""
         ] })
       ] }),
-      loading ? /* @__PURE__ */ jsx5("div", { className: "p-12 text-center", children: /* @__PURE__ */ jsx5("div", { className: "mx-auto h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" }) }) : secrets.length === 0 ? /* @__PURE__ */ jsxs5("div", { className: "p-12 text-center", children: [
-        /* @__PURE__ */ jsx5(Lock, { className: "mx-auto mb-3 h-10 w-10 text-muted-foreground" }),
-        /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium text-foreground mb-1", children: "No secrets yet" }),
-        /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground mb-4", children: "Create a secret to inject into your sandboxes." }),
+      loading ? /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsx5("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" }) }) : secrets.length === 0 ? /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
+        /* @__PURE__ */ jsx5(Lock, { className: "h-10 w-10 text-muted-foreground mb-4" }),
+        /* @__PURE__ */ jsx5("h3", { className: "text-lg font-semibold text-foreground", children: "No secrets yet" }),
+        /* @__PURE__ */ jsx5("p", { className: "mt-1 text-sm text-muted-foreground max-w-sm", children: "Create a secret to inject into your sandboxes." }),
         /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
             onClick: () => setIsCreateOpen(true),
-            className: "inline-flex items-center gap-2 rounded-lg bg-primary/20 border border-primary/30 px-4 py-2 text-sm font-bold text-primary hover:bg-primary hover:text-primary-foreground transition-colors",
+            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__ */ jsx5(Plus3, { className: "h-4 w-4" }),
               "Create Secret"
             ]
           }
         )
-      ] }) : /* @__PURE__ */ jsxs5("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ jsx5("thead", { className: "bg-muted/10 border-b border-border", children: /* @__PURE__ */ jsxs5("tr", { children: [
-          /* @__PURE__ */ jsx5("th", { className: "px-6 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Name" }),
-          /* @__PURE__ */ jsx5("th", { className: "px-6 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Created" }),
-          /* @__PURE__ */ jsx5("th", { className: "px-6 py-2.5 text-right text-xs font-medium text-muted-foreground w-16" })
+      ] }) : /* @__PURE__ */ jsxs5("table", { className: "w-full text-left border-collapse", children: [
+        /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { className: "bg-muted/30 border-b border-border", children: [
+          /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Secret Name" }),
+          /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Encrypted Value" }),
+          /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground text-right", children: "Created" }),
+          /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 w-12" })
         ] }) }),
-        /* @__PURE__ */ jsx5("tbody", { className: "divide-y divide-border", children: secrets.map((secret) => /* @__PURE__ */ jsxs5("tr", { className: "hover:bg-muted/30 transition-colors", children: [
-          /* @__PURE__ */ jsx5("td", { className: "px-6 py-3", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx5(Lock, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-            /* @__PURE__ */ jsx5("span", { className: "font-mono text-xs font-bold text-foreground", children: secret.name })
+        /* @__PURE__ */ jsx5("tbody", { className: "divide-y divide-border", children: secrets.map((secret) => /* @__PURE__ */ jsxs5("tr", { className: "hover:bg-muted/20 transition-colors", children: [
+          /* @__PURE__ */ jsx5("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx5(Key, { className: "h-4 w-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx5("span", { className: "text-sm font-bold font-mono text-foreground", children: secret.name })
           ] }) }),
-          /* @__PURE__ */ jsx5("td", { className: "px-6 py-3 text-xs text-muted-foreground", children: formatDate(secret.createdAt) }),
-          /* @__PURE__ */ jsx5("td", { className: "px-6 py-3 text-right", children: /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx5("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx5("code", { className: "text-xs font-mono text-muted-foreground bg-muted px-2 py-1 rounded", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }) }),
+          /* @__PURE__ */ jsx5("td", { className: "px-6 py-4 text-right", children: /* @__PURE__ */ jsx5("span", { className: "text-xs text-muted-foreground", children: formatDate(secret.createdAt) }) }),
+          /* @__PURE__ */ jsx5("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
               onClick: () => setDeleteTarget(secret.name),
-              className: "p-1 text-muted-foreground hover:text-destructive transition-colors rounded",
+              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__ */ jsx5(Trash23, { className: "h-4 w-4" })
             }
           ) })
         ] }, secret.name)) })
       ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "rounded-lg border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 mb-3", children: [
+          /* @__PURE__ */ jsx5("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__ */ jsx5(Shield, { className: "h-5 w-5" }) }),
+          /* @__PURE__ */ jsx5("h3", { className: "text-sm font-bold text-foreground", children: "Encryption Standard" })
+        ] }),
+        /* @__PURE__ */ jsx5("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__ */ jsxs5("div", { className: "rounded-lg border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 mb-3", children: [
+          /* @__PURE__ */ jsx5("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__ */ jsx5(Lock, { className: "h-5 w-5" }) }),
+          /* @__PURE__ */ jsx5("h3", { className: "text-sm font-bold text-foreground", children: "Access Policy" })
+        ] }),
+        /* @__PURE__ */ jsx5("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." })
+      ] })
     ] })
   ] });
 }
@@ -1860,6 +2035,928 @@ function TemplatesPage({ templates, loading = false, onUseTemplate, className })
   ] });
 }
 
+// src/pages/startup-scripts-page.tsx
+import * as React6 from "react";
+import {
+  Play,
+  Plus as Plus4,
+  Trash2 as Trash24,
+  Pencil,
+  AlertCircle as AlertCircle3,
+  Power,
+  PowerOff,
+  Shield as Shield2,
+  Terminal,
+  Clock,
+  ChevronDown as ChevronDown2,
+  ChevronUp,
+  GripVertical,
+  Lock as Lock2,
+  Cpu as Cpu2,
+  MemoryStick,
+  Layers as Layers3
+} from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var SCRIPT_TYPE_META = {
+  bash: {
+    label: "Bash",
+    ext: "sh",
+    interpreter: "bash",
+    template: "#!/bin/bash\nset -e\n\n# Your startup script here\n"
+  },
+  python: {
+    label: "Python",
+    ext: "py",
+    interpreter: "python3",
+    template: "#!/usr/bin/env python3\nimport os\nimport subprocess\n\n# Your startup script here\n"
+  },
+  node: {
+    label: "Node.js",
+    ext: "js",
+    interpreter: "node",
+    template: "#!/usr/bin/env node\nconst { execSync } = require('child_process');\n\n// Your startup script here\n"
+  },
+  ruby: {
+    label: "Ruby",
+    ext: "rb",
+    interpreter: "ruby",
+    template: "#!/usr/bin/env ruby\n\n# Your startup script here\n"
+  },
+  custom: {
+    label: "Custom",
+    ext: "sh",
+    interpreter: "sh",
+    template: "#!/bin/sh\n\n# Specify your interpreter in the shebang line above\n"
+  }
+};
+var SCRIPT_TEMPLATES = [
+  {
+    name: "Install Claude Code",
+    description: "Install and authenticate Claude Code CLI",
+    scriptType: "bash",
+    content: `#!/bin/bash
+set -e
+
+# Install Claude Code
+npm install -g @anthropic-ai/claude-code
+
+# Authenticate if API key secret is available
+if [ -n "$ANTHROPIC_API_KEY" ]; then
+  echo "Claude Code installed and API key configured"
+fi`,
+    injectSecrets: ["ANTHROPIC_API_KEY"]
+  },
+  {
+    name: "Git Clone & Setup",
+    description: "Clone a repo, install dependencies, and run setup",
+    scriptType: "bash",
+    content: `#!/bin/bash
+set -e
+
+REPO_URL="\${GIT_REPO_URL:-https://github.com/your-org/your-repo.git}"
+BRANCH="\${GIT_BRANCH:-main}"
+
+cd /home/agent
+git clone --depth 1 --branch "$BRANCH" "$REPO_URL" workspace
+cd workspace
+
+# Detect and install dependencies
+if [ -f "package.json" ]; then
+  npm install
+elif [ -f "requirements.txt" ]; then
+  pip install -r requirements.txt
+elif [ -f "Cargo.toml" ]; then
+  cargo fetch
+elif [ -f "go.mod" ]; then
+  go mod download
+fi
+
+echo "Repository cloned and dependencies installed"`,
+    injectSecrets: ["GITHUB_TOKEN"]
+  },
+  {
+    name: "Python Environment",
+    description: "Create a virtual environment with common packages",
+    scriptType: "python",
+    content: `#!/usr/bin/env python3
+import subprocess
+import sys
+
+# Create and activate virtual environment
+subprocess.run([sys.executable, "-m", "venv", "/home/agent/.venv"], check=True)
+
+# Install common packages
+packages = [
+    "requests",
+    "httpx",
+    "python-dotenv",
+    "pydantic",
+]
+
+subprocess.run(
+    ["/home/agent/.venv/bin/pip", "install", "--quiet"] + packages,
+    check=True,
+)
+
+print(f"Python venv created with {len(packages)} packages")`,
+    injectSecrets: []
+  },
+  {
+    name: "SSH Key Setup",
+    description: "Configure SSH keys for Git access",
+    scriptType: "bash",
+    content: `#!/bin/bash
+set -e
+
+mkdir -p ~/.ssh
+chmod 700 ~/.ssh
+
+# Write deploy key if secret is available
+if [ -n "$SSH_PRIVATE_KEY" ]; then
+  echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_ed25519
+  chmod 600 ~/.ssh/id_ed25519
+  ssh-keyscan github.com >> ~/.ssh/known_hosts 2>/dev/null
+  echo "SSH key configured for Git access"
+else
+  echo "No SSH_PRIVATE_KEY secret found, skipping"
+fi`,
+    injectSecrets: ["SSH_PRIVATE_KEY"]
+  },
+  {
+    name: "Node.js Project Bootstrap",
+    description: "Initialize a new Node.js project with TypeScript",
+    scriptType: "node",
+    content: `#!/usr/bin/env node
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+const dir = '/home/agent/workspace';
+if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+process.chdir(dir);
+
+if (!fs.existsSync('package.json')) {
+  execSync('npm init -y', { stdio: 'inherit' });
+  execSync('npm install typescript tsx @types/node --save-dev', { stdio: 'inherit' });
+  execSync('npx tsc --init --target ES2022 --module NodeNext --moduleResolution NodeNext --outDir dist', { stdio: 'inherit' });
+  console.log('Node.js + TypeScript project initialized');
+} else {
+  execSync('npm install', { stdio: 'inherit' });
+  console.log('Dependencies installed');
+}`,
+    injectSecrets: []
+  }
+];
+function makeDefaultFormData(scriptType = "bash") {
+  return {
+    name: "",
+    description: "",
+    scriptType,
+    content: SCRIPT_TYPE_META[scriptType].template,
+    environments: [],
+    minCpuCores: null,
+    minRamGB: null,
+    runOrder: 100,
+    timeoutSeconds: 300,
+    continueOnFailure: false,
+    runAsRoot: false,
+    injectSecrets: [],
+    enabled: true
+  };
+}
+function StartupScriptsPage({ apiClient, className }) {
+  const [scripts, setScripts] = React6.useState([]);
+  const [secrets, setSecrets] = React6.useState([]);
+  const [environments, setEnvironments] = React6.useState([]);
+  const [loading, setLoading] = React6.useState(true);
+  const [error, setError] = React6.useState(null);
+  const [isDialogOpen, setIsDialogOpen] = React6.useState(false);
+  const [dialogStep, setDialogStep] = React6.useState("picker");
+  const [transitionDir, setTransitionDir] = React6.useState("forward");
+  const [stepKey, setStepKey] = React6.useState(0);
+  const [editingScript, setEditingScript] = React6.useState(null);
+  const [formData, setFormData] = React6.useState(makeDefaultFormData());
+  const [isSaving, setIsSaving] = React6.useState(false);
+  const [formError, setFormError] = React6.useState(null);
+  const [showConditions, setShowConditions] = React6.useState(false);
+  const [deleteTarget, setDeleteTarget] = React6.useState(null);
+  const [isDeleting, setIsDeleting] = React6.useState(false);
+  const apiRef = React6.useRef(apiClient);
+  apiRef.current = apiClient;
+  const loadGenRef = React6.useRef(0);
+  const loadData = React6.useCallback(async (showSpinner = true) => {
+    const gen = ++loadGenRef.current;
+    try {
+      if (showSpinner) setLoading(true);
+      setError(null);
+      const [scriptData, secretData, envData] = await Promise.all([
+        apiRef.current.listScripts(),
+        apiRef.current.listSecrets?.() ?? Promise.resolve([]),
+        apiRef.current.listEnvironments?.() ?? Promise.resolve([])
+      ]);
+      if (gen !== loadGenRef.current) return;
+      setScripts(scriptData);
+      setSecrets(secretData);
+      setEnvironments(envData);
+    } catch (err) {
+      if (gen !== loadGenRef.current) return;
+      setError(err instanceof Error ? err.message : "Failed to load startup scripts");
+    } finally {
+      if (gen === loadGenRef.current) setLoading(false);
+    }
+  }, []);
+  React6.useEffect(() => {
+    loadData();
+  }, [loadData]);
+  const openCreate = () => {
+    setEditingScript(null);
+    setFormData(makeDefaultFormData());
+    setFormError(null);
+    setShowConditions(false);
+    setDialogStep("picker");
+    setIsDialogOpen(true);
+  };
+  const goToStep = (step) => {
+    setTransitionDir(step === "form" ? "forward" : "back");
+    setStepKey((k) => k + 1);
+    setDialogStep(step);
+  };
+  const openBlankScript = (scriptType = "bash") => {
+    setEditingScript(null);
+    setFormData(makeDefaultFormData(scriptType));
+    setFormError(null);
+    setShowConditions(false);
+    goToStep("form");
+  };
+  const openFromTemplate = (template) => {
+    setEditingScript(null);
+    setFormData({
+      ...makeDefaultFormData(template.scriptType),
+      name: template.name,
+      description: template.description,
+      content: template.content,
+      injectSecrets: template.injectSecrets.filter(
+        (s) => secrets.some((sec) => sec.name === s)
+      )
+    });
+    setFormError(null);
+    setShowConditions(false);
+    goToStep("form");
+  };
+  const openEdit = (script) => {
+    setEditingScript(script);
+    setFormData({
+      name: script.name,
+      description: script.description,
+      scriptType: script.scriptType ?? "bash",
+      content: script.content,
+      environments: script.environments,
+      minCpuCores: script.minCpuCores,
+      minRamGB: script.minRamGB,
+      runOrder: script.runOrder,
+      timeoutSeconds: script.timeoutSeconds,
+      continueOnFailure: script.continueOnFailure,
+      runAsRoot: script.runAsRoot,
+      injectSecrets: script.injectSecrets,
+      enabled: script.enabled
+    });
+    setFormError(null);
+    setShowConditions(
+      script.environments.length > 0 || script.minCpuCores !== null || script.minRamGB !== null
+    );
+    setDialogStep("form");
+    setIsDialogOpen(true);
+  };
+  const handleSave = async () => {
+    setFormError(null);
+    setIsSaving(true);
+    try {
+      if (editingScript) {
+        await apiRef.current.updateScript(editingScript.id, formData);
+      } else {
+        await apiRef.current.createScript(formData);
+      }
+      setIsDialogOpen(false);
+      await loadData(false);
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : "Failed to save script");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleToggle = async (script) => {
+    try {
+      await apiRef.current.toggleScript(script.id);
+      await loadData(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to toggle script");
+    }
+  };
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    setIsDeleting(true);
+    try {
+      await apiRef.current.deleteScript(deleteTarget.id);
+      setDeleteTarget(null);
+      await loadData(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete script");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  const toggleSecret = (name) => {
+    setFormData((prev) => ({
+      ...prev,
+      injectSecrets: prev.injectSecrets.includes(name) ? prev.injectSecrets.filter((s) => s !== name) : [...prev.injectSecrets, name]
+    }));
+  };
+  const toggleEnvironment = (env) => {
+    setFormData((prev) => ({
+      ...prev,
+      environments: prev.environments.includes(env) ? prev.environments.filter((e) => e !== env) : [...prev.environments, env]
+    }));
+  };
+  const activeCount = scripts.filter((s) => s.enabled).length;
+  return /* @__PURE__ */ jsxs7("div", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-4 md:flex-row md:items-end md:justify-between", children: [
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx7("h1", { className: "font-display text-3xl font-extrabold tracking-tight text-foreground", children: "Startup Scripts" }),
+        /* @__PURE__ */ jsx7("p", { className: "mt-1 text-sm text-muted-foreground", children: "Define scripts that run automatically when your sandboxes start. Scripts can access your encrypted secrets." })
+      ] }),
+      /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          type: "button",
+          onClick: openCreate,
+          className: "inline-flex items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] px-4 py-2.5 text-sm font-bold text-[var(--btn-primary-text)] shadow-sm transition-colors hover:bg-[var(--btn-primary-hover)]",
+          children: [
+            /* @__PURE__ */ jsx7(Plus4, { className: "h-4 w-4" }),
+            "New Script"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-4", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
+        /* @__PURE__ */ jsx7("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Total Scripts" }),
+        /* @__PURE__ */ jsx7("div", { className: "mt-2 flex items-baseline gap-2", children: /* @__PURE__ */ jsx7("span", { className: "font-display text-2xl font-extrabold text-foreground", children: scripts.length }) })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
+        /* @__PURE__ */ jsx7("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Active" }),
+        /* @__PURE__ */ jsxs7("div", { className: "mt-2 flex items-baseline gap-2", children: [
+          /* @__PURE__ */ jsx7("span", { className: "font-display text-2xl font-extrabold text-foreground", children: activeCount }),
+          /* @__PURE__ */ jsxs7("span", { className: "text-xs text-muted-foreground", children: [
+            "of ",
+            scripts.length
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx7(
+        InfoPanel,
+        {
+          className: "md:col-span-2",
+          label: "Execution",
+          title: "Scripts run before your agent starts.",
+          description: "They execute in order, with full access to injected secrets as environment variables."
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 rounded-lg border border-destructive/30 bg-destructive/10 p-4", children: [
+      /* @__PURE__ */ jsx7(AlertCircle3, { className: "h-5 w-5 shrink-0 text-destructive" }),
+      /* @__PURE__ */ jsx7("p", { className: "text-sm font-medium text-destructive", children: error })
+    ] }),
+    /* @__PURE__ */ jsx7(Dialog, { open: isDialogOpen, onOpenChange: setIsDialogOpen, children: /* @__PURE__ */ jsxs7(DialogContent, { className: "max-w-2xl max-h-[90vh] overflow-y-auto", children: [
+      dialogStep === "picker" && /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: cn(
+            "animate-in fade-in duration-300",
+            transitionDir === "back" ? "slide-in-from-left-4" : "slide-in-from-right-4"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs7(DialogHeader, { children: [
+              /* @__PURE__ */ jsx7(DialogTitle, { children: "New Startup Script" }),
+              /* @__PURE__ */ jsx7(DialogDescription, { children: "Start from a template or create a blank script." })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "space-y-4 py-2", children: [
+              /* @__PURE__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsx7("p", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Blank Script" }),
+                /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2", children: Object.entries(SCRIPT_TYPE_META).map(([type, meta]) => /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => openBlankScript(type),
+                    className: "rounded-lg border border-border bg-card px-4 py-2.5 text-sm font-medium text-foreground hover:border-primary/30 hover:bg-muted/50 transition-colors",
+                    children: meta.label
+                  },
+                  type
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsx7("p", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Templates" }),
+                /* @__PURE__ */ jsx7("div", { className: "space-y-2", children: SCRIPT_TEMPLATES.map((tmpl) => /* @__PURE__ */ jsxs7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => openFromTemplate(tmpl),
+                    className: "w-full text-left rounded-lg border border-border bg-card p-4 hover:border-primary/30 hover:bg-muted/30 transition-colors group",
+                    children: [
+                      /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsxs7("div", { children: [
+                          /* @__PURE__ */ jsx7("h4", { className: "text-sm font-bold text-foreground group-hover:text-primary transition-colors", children: tmpl.name }),
+                          /* @__PURE__ */ jsx7("p", { className: "mt-0.5 text-xs text-muted-foreground", children: tmpl.description })
+                        ] }),
+                        /* @__PURE__ */ jsx7("span", { className: "text-[10px] font-mono text-muted-foreground bg-muted rounded px-1.5 py-0.5", children: SCRIPT_TYPE_META[tmpl.scriptType].label })
+                      ] }),
+                      tmpl.injectSecrets.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 flex flex-wrap gap-1", children: tmpl.injectSecrets.map((s) => /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground", children: [
+                        /* @__PURE__ */ jsx7(Lock2, { className: "h-2.5 w-2.5" }),
+                        s
+                      ] }, s)) })
+                    ]
+                  },
+                  tmpl.name
+                )) })
+              ] })
+            ] })
+          ]
+        },
+        `picker-${stepKey}`
+      ),
+      dialogStep === "form" && /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: cn(
+            "animate-in fade-in duration-300",
+            transitionDir === "forward" ? "slide-in-from-right-4" : "slide-in-from-left-4"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs7(DialogHeader, { children: [
+              /* @__PURE__ */ jsx7(DialogTitle, { children: editingScript ? "Edit Script" : "Create Startup Script" }),
+              /* @__PURE__ */ jsx7(DialogDescription, { children: editingScript ? "Modify your startup script configuration." : "Define a shell script that runs when sandboxes start. Scripts execute before the AI agent." })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "space-y-5 py-2", children: [
+              /* @__PURE__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsx7("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Name" }),
+                /* @__PURE__ */ jsx7(
+                  "input",
+                  {
+                    type: "text",
+                    value: formData.name,
+                    onChange: (e) => setFormData((p) => ({ ...p, name: e.target.value })),
+                    placeholder: "Install Claude Code",
+                    maxLength: 64,
+                    className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsx7("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Description" }),
+                /* @__PURE__ */ jsx7(
+                  "input",
+                  {
+                    type: "text",
+                    value: formData.description,
+                    onChange: (e) => setFormData((p) => ({ ...p, description: e.target.value })),
+                    placeholder: "Sets up Claude Code with authentication",
+                    maxLength: 256,
+                    className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsx7("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Language" }),
+                /* @__PURE__ */ jsx7("div", { className: "mt-1.5 flex flex-wrap gap-2", children: Object.entries(SCRIPT_TYPE_META).map(([type, meta]) => /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      const currentMeta = SCRIPT_TYPE_META[formData.scriptType];
+                      const isDefaultContent = formData.content === currentMeta.template;
+                      setFormData((p) => ({
+                        ...p,
+                        scriptType: type,
+                        content: isDefaultContent ? meta.template : p.content
+                      }));
+                    },
+                    className: cn(
+                      "rounded-lg px-3 py-1.5 text-xs font-medium border transition-colors",
+                      formData.scriptType === type ? "bg-primary/10 border-primary/30 text-primary" : "bg-background border-border text-muted-foreground hover:border-primary/20"
+                    ),
+                    children: meta.label
+                  },
+                  type
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsx7("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Script" }),
+                /* @__PURE__ */ jsx7(
+                  "textarea",
+                  {
+                    value: formData.content,
+                    onChange: (e) => setFormData((p) => ({ ...p, content: e.target.value })),
+                    rows: 12,
+                    spellCheck: false,
+                    className: "mt-1.5 w-full rounded-lg border border-border bg-[var(--depth-1,hsl(var(--muted)))] px-4 py-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 resize-y"
+                  }
+                ),
+                /* @__PURE__ */ jsxs7("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+                  SCRIPT_TYPE_META[formData.scriptType].label,
+                  " script. Injected secrets are available as environment variables (e.g. ",
+                  /* @__PURE__ */ jsx7("code", { className: "text-primary", children: "$GITHUB_TOKEN" }),
+                  ")."
+                ] })
+              ] }),
+              secrets.length > 0 && /* @__PURE__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsx7("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Inject Secrets" }),
+                /* @__PURE__ */ jsx7("p", { className: "mt-0.5 text-xs text-muted-foreground", children: "Select secrets to make available as environment variables." }),
+                /* @__PURE__ */ jsx7("div", { className: "mt-2 flex flex-wrap gap-2", children: secrets.map((secret) => {
+                  const selected = formData.injectSecrets.includes(secret.name);
+                  return /* @__PURE__ */ jsxs7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggleSecret(secret.name),
+                      className: cn(
+                        "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium border transition-colors",
+                        selected ? "bg-primary/10 border-primary/30 text-primary" : "bg-muted border-border text-muted-foreground hover:border-primary/20"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx7(Lock2, { className: "h-3 w-3" }),
+                        secret.name
+                      ]
+                    },
+                    secret.name
+                  );
+                }) })
+              ] }),
+              /* @__PURE__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsxs7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowConditions(!showConditions),
+                    className: "flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-muted-foreground hover:text-foreground transition-colors",
+                    children: [
+                      showConditions ? /* @__PURE__ */ jsx7(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(ChevronDown2, { className: "h-3.5 w-3.5" }),
+                      "Conditions & Execution"
+                    ]
+                  }
+                ),
+                showConditions && /* @__PURE__ */ jsxs7("div", { className: "mt-3 space-y-4 rounded-lg border border-border bg-muted/30 p-4", children: [
+                  /* @__PURE__ */ jsxs7("div", { children: [
+                    /* @__PURE__ */ jsxs7("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx7(Layers3, { className: "h-3.5 w-3.5" }),
+                      "Environments"
+                    ] }),
+                    /* @__PURE__ */ jsx7("p", { className: "mt-0.5 text-xs text-muted-foreground", children: environments.length > 0 ? "Only run for these environments. Leave empty to run for all." : "No templates configured. Script will run for all environments." }),
+                    environments.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 flex flex-wrap gap-2", children: environments.map((env) => {
+                      const selected = formData.environments.includes(env.id);
+                      return /* @__PURE__ */ jsx7(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => toggleEnvironment(env.id),
+                          className: cn(
+                            "rounded-full px-3 py-1 text-xs font-medium border transition-colors",
+                            selected ? "bg-primary/10 border-primary/30 text-primary" : "bg-background border-border text-muted-foreground hover:border-primary/20"
+                          ),
+                          children: env.name || env.id
+                        },
+                        env.id
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-2 gap-4", children: [
+                    /* @__PURE__ */ jsxs7("div", { children: [
+                      /* @__PURE__ */ jsxs7("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx7(Cpu2, { className: "h-3.5 w-3.5" }),
+                        "Min CPU Cores"
+                      ] }),
+                      /* @__PURE__ */ jsx7(
+                        "input",
+                        {
+                          type: "number",
+                          value: formData.minCpuCores ?? "",
+                          onChange: (e) => setFormData((p) => ({
+                            ...p,
+                            minCpuCores: e.target.value ? Number(e.target.value) : null
+                          })),
+                          placeholder: "Any",
+                          min: 0.5,
+                          step: 0.5,
+                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs7("div", { children: [
+                      /* @__PURE__ */ jsxs7("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx7(MemoryStick, { className: "h-3.5 w-3.5" }),
+                        "Min RAM (GB)"
+                      ] }),
+                      /* @__PURE__ */ jsx7(
+                        "input",
+                        {
+                          type: "number",
+                          value: formData.minRamGB ?? "",
+                          onChange: (e) => setFormData((p) => ({
+                            ...p,
+                            minRamGB: e.target.value ? Number(e.target.value) : null
+                          })),
+                          placeholder: "Any",
+                          min: 1,
+                          step: 1,
+                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-2 gap-4", children: [
+                    /* @__PURE__ */ jsxs7("div", { children: [
+                      /* @__PURE__ */ jsxs7("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx7(GripVertical, { className: "h-3.5 w-3.5" }),
+                        "Run Order"
+                      ] }),
+                      /* @__PURE__ */ jsx7(
+                        "input",
+                        {
+                          type: "number",
+                          value: formData.runOrder,
+                          onChange: (e) => setFormData((p) => ({ ...p, runOrder: e.target.value ? Math.max(0, Number(e.target.value)) : 0 })),
+                          min: 0,
+                          max: 9999,
+                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx7("p", { className: "mt-1 text-xs text-muted-foreground", children: "Lower runs first" })
+                    ] }),
+                    /* @__PURE__ */ jsxs7("div", { children: [
+                      /* @__PURE__ */ jsxs7("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx7(Clock, { className: "h-3.5 w-3.5" }),
+                        "Timeout (seconds)"
+                      ] }),
+                      /* @__PURE__ */ jsx7(
+                        "input",
+                        {
+                          type: "number",
+                          value: formData.timeoutSeconds,
+                          onChange: (e) => setFormData((p) => ({ ...p, timeoutSeconds: e.target.value ? Math.max(5, Number(e.target.value)) : 300 })),
+                          min: 5,
+                          max: 3600,
+                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs7("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxs7("label", { className: "flex items-center justify-between cursor-pointer", children: [
+                      /* @__PURE__ */ jsxs7("div", { children: [
+                        /* @__PURE__ */ jsx7("span", { className: "text-sm font-medium text-foreground", children: "Continue on failure" }),
+                        /* @__PURE__ */ jsx7("p", { className: "text-xs text-muted-foreground", children: "If script fails, continue starting the sandbox" })
+                      ] }),
+                      /* @__PURE__ */ jsx7(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setFormData((p) => ({ ...p, continueOnFailure: !p.continueOnFailure })),
+                          className: cn(
+                            "relative h-6 w-11 rounded-full transition-colors",
+                            formData.continueOnFailure ? "bg-primary" : "bg-border"
+                          ),
+                          children: /* @__PURE__ */ jsx7(
+                            "span",
+                            {
+                              className: cn(
+                                "absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform",
+                                formData.continueOnFailure && "translate-x-5"
+                              )
+                            }
+                          )
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs7("label", { className: "flex items-center justify-between cursor-pointer", children: [
+                      /* @__PURE__ */ jsxs7("div", { children: [
+                        /* @__PURE__ */ jsx7("span", { className: "text-sm font-medium text-foreground", children: "Run as root" }),
+                        /* @__PURE__ */ jsx7("p", { className: "text-xs text-muted-foreground", children: "Execute with root privileges instead of the agent user" })
+                      ] }),
+                      /* @__PURE__ */ jsx7(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setFormData((p) => ({ ...p, runAsRoot: !p.runAsRoot })),
+                          className: cn(
+                            "relative h-6 w-11 rounded-full transition-colors",
+                            formData.runAsRoot ? "bg-primary" : "bg-border"
+                          ),
+                          children: /* @__PURE__ */ jsx7(
+                            "span",
+                            {
+                              className: cn(
+                                "absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform",
+                                formData.runAsRoot && "translate-x-5"
+                              )
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              formError && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/10 p-3", children: [
+                /* @__PURE__ */ jsx7(AlertCircle3, { className: "h-4 w-4 text-destructive" }),
+                /* @__PURE__ */ jsx7("p", { className: "text-sm text-destructive", children: formError })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs7(DialogFooter, { className: "flex items-center justify-between sm:justify-between", children: [
+              /* @__PURE__ */ jsx7("div", { children: !editingScript && /* @__PURE__ */ jsxs7(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => goToStep("picker"),
+                  className: "inline-flex items-center gap-1.5 rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx7("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "m15 18-6-6 6-6" }) }),
+                    "Back"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setIsDialogOpen(false),
+                    className: "rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleSave,
+                    disabled: isSaving || !formData.name.trim() || !formData.content.trim(),
+                    className: "rounded-lg bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-bold text-[var(--btn-primary-text)] shadow-sm transition-colors hover:bg-[var(--btn-primary-hover)] disabled:opacity-50",
+                    children: isSaving ? "Saving..." : editingScript ? "Save Changes" : "Create Script"
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        `form-${stepKey}`
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx7(Dialog, { open: !!deleteTarget, onOpenChange: () => setDeleteTarget(null), children: /* @__PURE__ */ jsxs7(DialogContent, { className: "max-w-md", children: [
+      /* @__PURE__ */ jsxs7(DialogHeader, { children: [
+        /* @__PURE__ */ jsx7(DialogTitle, { children: "Delete Startup Script" }),
+        /* @__PURE__ */ jsxs7(DialogDescription, { children: [
+          "Are you sure you want to delete \u201C",
+          deleteTarget?.name,
+          "\u201D? This action cannot be undone."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs7(DialogFooter, { children: [
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            onClick: () => setDeleteTarget(null),
+            className: "rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            onClick: handleDelete,
+            disabled: isDeleting,
+            className: "rounded-lg bg-destructive px-4 py-2 text-sm font-bold text-destructive-foreground shadow-sm transition-colors hover:bg-destructive/90 disabled:opacity-50",
+            children: isDeleting ? "Deleting..." : "Delete"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs7("div", { className: "overflow-hidden rounded-lg border border-border bg-card shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "border-b border-border px-6 py-4 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx7("button", { className: "text-xs font-bold uppercase tracking-widest text-foreground", children: "All Scripts" }) }),
+        /* @__PURE__ */ jsxs7("span", { className: "text-xs text-muted-foreground font-mono", children: [
+          scripts.length,
+          " script",
+          scripts.length !== 1 ? "s" : ""
+        ] })
+      ] }),
+      loading ? /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsx7("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" }) }) : scripts.length === 0 ? /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
+        /* @__PURE__ */ jsx7(Terminal, { className: "h-10 w-10 text-muted-foreground mb-4" }),
+        /* @__PURE__ */ jsx7("h3", { className: "text-lg font-semibold text-foreground", children: "No startup scripts yet" }),
+        /* @__PURE__ */ jsx7("p", { className: "mt-1 text-sm text-muted-foreground max-w-sm", children: "Create a script to run automatically when your sandboxes start." }),
+        /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            type: "button",
+            onClick: openCreate,
+            className: "mt-4 inline-flex items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] px-4 py-2.5 text-sm font-bold text-[var(--btn-primary-text)] shadow-sm transition-colors hover:bg-[var(--btn-primary-hover)]",
+            children: [
+              /* @__PURE__ */ jsx7(Plus4, { className: "h-4 w-4" }),
+              "Create Script"
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx7("div", { className: "divide-y divide-border", children: scripts.map((script) => /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: cn(
+            "group flex items-center gap-4 px-6 py-4 transition-colors hover:bg-muted/30",
+            !script.enabled && "opacity-60"
+          ),
+          children: [
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleToggle(script),
+                title: script.enabled ? "Disable" : "Enable",
+                className: cn(
+                  "flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors",
+                  script.enabled ? "bg-[var(--surface-success-bg,hsl(142 76% 90%))] text-[var(--surface-success-text,hsl(142 76% 36%))]" : "bg-muted text-muted-foreground"
+                ),
+                children: script.enabled ? /* @__PURE__ */ jsx7(Power, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(PowerOff, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx7("h4", { className: "text-sm font-bold text-foreground truncate", children: script.name }),
+                /* @__PURE__ */ jsx7("span", { className: "text-[10px] font-mono text-muted-foreground bg-muted rounded px-1.5 py-0.5", children: SCRIPT_TYPE_META[script.scriptType ?? "bash"].label }),
+                script.runOrder !== 100 && /* @__PURE__ */ jsxs7("span", { className: "text-[10px] font-mono text-muted-foreground bg-muted rounded px-1.5 py-0.5", children: [
+                  "#",
+                  script.runOrder
+                ] })
+              ] }),
+              script.description && /* @__PURE__ */ jsx7("p", { className: "mt-0.5 text-xs text-muted-foreground truncate", children: script.description }),
+              /* @__PURE__ */ jsxs7("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: [
+                script.environments.map((env) => /* @__PURE__ */ jsx7("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary", children: env }, env)),
+                script.injectSecrets.map((s) => /* @__PURE__ */ jsxs7("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground flex items-center gap-0.5", children: [
+                  /* @__PURE__ */ jsx7(Lock2, { className: "h-2.5 w-2.5" }),
+                  s
+                ] }, s)),
+                script.continueOnFailure && /* @__PURE__ */ jsx7("span", { className: "rounded-full bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-600", children: "soft fail" }),
+                script.runAsRoot && /* @__PURE__ */ jsx7("span", { className: "rounded-full bg-destructive/10 px-2 py-0.5 text-[10px] font-medium text-destructive", children: "root" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "hidden md:flex items-center gap-1 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx7(Clock, { className: "h-3.5 w-3.5" }),
+              script.timeoutSeconds,
+              "s"
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1 sm:opacity-0 sm:group-hover:opacity-100 sm:focus-within:opacity-100 transition-opacity", children: [
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => openEdit(script),
+                  className: "rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+                  "aria-label": `Edit ${script.name}`,
+                  children: /* @__PURE__ */ jsx7(Pencil, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setDeleteTarget(script),
+                  className: "rounded-md p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors",
+                  "aria-label": `Delete ${script.name}`,
+                  children: /* @__PURE__ */ jsx7(Trash24, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ]
+        },
+        script.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 mb-3", children: [
+          /* @__PURE__ */ jsx7("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__ */ jsx7(Play, { className: "h-5 w-5" }) }),
+          /* @__PURE__ */ jsx7("h3", { className: "text-sm font-bold text-foreground", children: "How Scripts Run" })
+        ] }),
+        /* @__PURE__ */ jsx7("p", { className: "text-sm text-muted-foreground", children: 'Scripts execute in order after the container starts but before the AI agent. They run as bash scripts with full access to mounted tools (Nix profile) and workspace. Failed scripts abort sandbox creation unless "continue on failure" is enabled.' })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 mb-3", children: [
+          /* @__PURE__ */ jsx7("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__ */ jsx7(Shield2, { className: "h-5 w-5" }) }),
+          /* @__PURE__ */ jsx7("h3", { className: "text-sm font-bold text-foreground", children: "Security & Secrets" })
+        ] }),
+        /* @__PURE__ */ jsx7("p", { className: "text-sm text-muted-foreground", children: "Selected secrets are injected as environment variables at execution time. Secret values are never stored in the script itself \u2014 they are decrypted and injected only when the sandbox starts. Scripts can use conditions to restrict execution to specific environments or resource tiers." })
+      ] })
+    ] })
+  ] });
+}
+
 // src/lib/template-presets.ts
 var BLOCKCHAIN_PATTERNS = [
   "ethereum",
@@ -2017,6 +3114,7 @@ export {
   ProvisioningWizard,
   SecretsPage,
   StandalonePricingPage,
+  StartupScriptsPage,
   TemplatesPage,
   getPresetForTemplate,
   resolveEnvironment