@tangle-network/sandbox-ui 0.6.1 → 0.8.4

package/dist/pages.js

@@ -5,7 +5,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from "./chunk-YS66Q3RC.js";
+} from "./chunk-3CJ2SOEI.js";
 import {
   Tabs,
   TabsContent,
@@ -15,23 +15,26 @@ import {
 import {
   EmptyState,
   Input
-} from "./chunk-BRBTD7RH.js";
+} from "./chunk-MA7YKRUP.js";
+import {
+  TemplateCard
+} from "./chunk-7U2Z23NE.js";
 import {
   BillingDashboard,
   PricingPage,
   UsageChart
-} from "./chunk-565V6JTN.js";
+} from "./chunk-UXQMIR3D.js";
 import {
   Skeleton,
   SkeletonCard
-} from "./chunk-YYGECNZZ.js";
+} from "./chunk-66EZOYZR.js";
 import {
   Badge,
   Card
-} from "./chunk-TDYQBLL5.js";
+} from "./chunk-ZMNSRDMH.js";
 import {
   Button
-} from "./chunk-TSE423UF.js";
+} from "./chunk-2QZ6G7NM.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -294,8 +297,8 @@ function BillingPage({
 
 // src/pages/provisioning-wizard.tsx
 import * as React2 from "react";
-import { ArrowLeft, ArrowRight, Layers, Cpu, Bot, Info } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { ArrowLeft, Layers, Cpu, Bot, Info, Loader2, Settings, Plus, Trash2 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var STACK_DISPLAY = {
   universal: { name: "Universal", abbr: "U", color: "violet", textClass: "text-[var(--surface-violet-text)]" },
   ethereum: { name: "Ethereum", abbr: "\u039E", color: "blue", textClass: "text-[var(--surface-info-text)]" },
@@ -309,7 +312,7 @@ function resolveEnvironment(env) {
   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() : "?");
   const color = display?.color ?? "slate";
-  const textClass = display?.textClass ?? "text-[var(--text-muted)]";
+  const textClass = display?.textClass ?? "text-muted-foreground";
   return {
     id: env.id,
     name,
@@ -323,7 +326,6 @@ var defaultEnvironments = [
   { id: "python", name: "Python", description: "v3.11 pre-installed with PyTorch and common data science libraries.", icon: /* @__PURE__ */ jsx2("span", { className: "text-sky-400 text-2xl font-bold", children: "Py" }), color: "blue" },
   { id: "ubuntu", name: "Ubuntu", description: "Full 22.04 LTS terminal access for custom containerized workloads.", icon: /* @__PURE__ */ jsx2("span", { className: "text-orange-400 text-2xl font-bold", children: "U" }), color: "orange" }
 ];
-var STEPS = ["Stack", "Resources", "Agent", "Review"];
 var CPU_MIN = 0.5;
 var CPU_MAX = 8;
 var RAM_MIN = 2;
@@ -334,14 +336,18 @@ function calcCost(cpu, ram) {
   const cost = cpu * 0.045 + ram * 5e-3;
   return cost.toFixed(2);
 }
-var sectionIcon = "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-surface-soft)] border border-[var(--border-accent)] text-[var(--brand-cool)]";
 function ProvisioningWizard({
   environments: environmentsProp,
   onLoadEnvironments,
   onSubmit,
   onBack,
-  className
+  className,
+  variant = "flat",
+  defaultEnvironment,
+  defaultConfig,
+  skipToReview
 }) {
+  const dc = defaultConfig;
   const [envList, setEnvList] = React2.useState(environmentsProp ?? defaultEnvironments);
   React2.useEffect(() => {
     if (onLoadEnvironments) {
@@ -351,224 +357,445 @@ function ProvisioningWizard({
     }
   }, [onLoadEnvironments, environmentsProp]);
   const environments = envList;
-  const [step, setStep] = React2.useState(0);
-  const [selectedEnv, setSelectedEnv] = React2.useState(environments[0]?.id ?? "");
-  const [cpuCores, setCpuCores] = React2.useState(4);
-  const [ramGB, setRamGB] = React2.useState(16);
-  const [storageGB, setStorageGB] = React2.useState(128);
-  const [modelTier, setModelTier] = React2.useState("claude-sonnet");
-  const [systemPrompt, setSystemPrompt] = React2.useState("");
-  const handleNext = () => {
-    if (step < STEPS.length - 1) setStep(step + 1);
-    else onSubmit?.({ environment: selectedEnv, cpuCores, ramGB, storageGB, modelTier, systemPrompt });
+  const effectiveDefault = dc?.environment ?? defaultEnvironment;
+  const [selectedEnv, setSelectedEnv] = React2.useState(effectiveDefault ?? environments[0]?.id ?? "");
+  React2.useEffect(() => {
+    if (effectiveDefault && envList.some((e) => e.id === effectiveDefault)) {
+      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 [modelTier, setModelTier] = React2.useState(dc?.modelTier ?? "claude-sonnet");
+  const [systemPrompt, setSystemPrompt] = React2.useState(dc?.systemPrompt ?? "");
+  const [name, setName] = React2.useState(dc?.name ?? "");
+  const [gitUrl, setGitUrl] = React2.useState(dc?.gitUrl ?? "");
+  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 [showAdvanced, setShowAdvanced] = React2.useState(false);
+  const isMultistep = variant === "multistep";
+  const [currentStep, setCurrentStep] = React2.useState(skipToReview && dc && isMultistep ? 3 : 1);
+  const [isDeploying, setIsDeploying] = React2.useState(false);
+  const handleDeploy = () => {
+    setIsDeploying(true);
+    onSubmit?.({ environment: selectedEnv, cpuCores, ramGB, storageGB, modelTier, systemPrompt, name, gitUrl, envVars: envVars.filter((e) => e.key.trim() !== ""), driver, bare });
   };
-  const handleBack = () => {
-    if (step > 0) setStep(step - 1);
-    else onBack?.();
+  const applyPreset = (cpu, ram, storage) => {
+    setCpuCores(cpu);
+    setRamGB(ram);
+    setStorageGB(storage);
   };
   const hourCost = calcCost(cpuCores, ramGB);
-  return /* @__PURE__ */ jsxs2("div", { className: cn("max-w-6xl mx-auto", className), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "mb-10", children: [
-      /* @__PURE__ */ jsx2("h1", { className: "text-4xl font-extrabold tracking-tight text-[var(--text-primary)] mb-2", children: "Sandbox Provisioning" }),
-      /* @__PURE__ */ jsx2("p", { className: "text-[var(--text-muted)] max-w-2xl", children: "Configure your high-performance orchestration environment. Select your stack, allocate resources, and prime your agent for deployment." })
-    ] }),
-    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-4 gap-4 mb-10", children: STEPS.map((label, i) => /* @__PURE__ */ jsxs2("div", { className: "relative pt-5", children: [
-      /* @__PURE__ */ jsx2("div", { className: cn("h-1 w-full rounded-full transition-colors", i <= step ? "bg-[var(--brand-cool)]" : "bg-[var(--depth-3)]") }),
-      /* @__PURE__ */ jsxs2("span", { className: cn("absolute top-0 left-0 font-mono text-[10px] uppercase tracking-widest font-bold transition-colors", i <= step ? "text-[var(--brand-cool)]" : "text-[var(--text-muted)]"), children: [
-        String(i + 1).padStart(2, "0"),
-        " ",
-        label
+  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" }) }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("h1", { className: "text-3xl font-extrabold tracking-tight text-foreground mb-1", children: "Sandbox Provisioning" }),
+        /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: "Select your stack, allocate resources, and configure your agent." })
       ] })
-    ] }, label)) }),
-    /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-12 gap-8 items-start", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-8 space-y-6", children: [
-        /* @__PURE__ */ jsxs2("section", { className: "bg-[var(--depth-2)] rounded-xl p-8 border border-[var(--border-subtle)]", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 mb-8", children: [
-            /* @__PURE__ */ jsx2("div", { className: sectionIcon, children: /* @__PURE__ */ jsx2(Layers, { className: "h-5 w-5" }) }),
-            /* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: "Environment Selection" })
+    ] }),
+    /* @__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: [
+            s === 1 && "Environment",
+            s === 2 && "Resources",
+            s === 3 && "AI Agent"
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: environments.map((env) => /* @__PURE__ */ jsxs2(
+          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)) }),
+        dc && isMultistep && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between glass-panel 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("span", { className: "text-muted-foreground", children: "Pre-configured from template." })
+          ] }),
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
-              onClick: () => setSelectedEnv(env.id),
-              className: cn(
-                "group relative p-5 rounded-xl bg-[var(--depth-3)] cursor-pointer hover:bg-[var(--depth-4)] transition-all text-left border",
-                selectedEnv === env.id ? "border-[var(--border-accent)]" : "border-[var(--border-subtle)]"
-              ),
-              children: [
-                /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-start mb-4", children: [
-                  /* @__PURE__ */ jsx2("div", { className: "w-12 h-12 rounded-full flex items-center justify-center bg-[var(--depth-1)]", children: env.icon }),
-                  /* @__PURE__ */ jsx2("div", { className: cn("w-5 h-5 rounded-full border-2 flex items-center justify-center", selectedEnv === env.id ? "border-[var(--brand-cool)]" : "border-[var(--border-default)]"), children: selectedEnv === env.id && /* @__PURE__ */ jsx2("div", { className: "w-2.5 h-2.5 bg-[var(--brand-cool)] rounded-full" }) })
-                ] }),
-                /* @__PURE__ */ jsx2("h3", { className: "font-bold text-base mb-1 text-[var(--text-primary)]", children: env.name }),
-                /* @__PURE__ */ jsx2("p", { className: "text-xs text-[var(--text-muted)] leading-relaxed", children: env.description })
-              ]
-            },
-            env.id
-          )) })
+              onClick: () => {
+                setCurrentStep(1);
+                setCpuCores(4);
+                setRamGB(16);
+                setStorageGB(128);
+                setModelTier("claude-sonnet");
+                setSystemPrompt("");
+                setBare(false);
+              },
+              className: "text-xs font-bold text-accent hover:text-accent-deep transition-colors",
+              children: "Start from scratch"
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxs2("section", { className: "bg-[var(--depth-2)] rounded-xl p-8 border border-[var(--border-subtle)]", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 mb-8", children: [
-            /* @__PURE__ */ jsx2("div", { className: sectionIcon, children: /* @__PURE__ */ jsx2(Cpu, { className: "h-5 w-5" }) }),
-            /* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: "Resource Allocation" })
-          ] }),
-          /* @__PURE__ */ jsx2("div", { className: "space-y-8", 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" }
-          ].map(({ label, value, setter, min, max, step: s, unit }) => /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end", children: [
-              /* @__PURE__ */ jsx2("label", { className: "font-mono text-xs uppercase tracking-widest text-[var(--text-muted)]", children: label }),
-              /* @__PURE__ */ jsxs2("span", { className: "text-2xl font-bold text-[var(--brand-cool)]", children: [
-                value,
-                " ",
-                /* @__PURE__ */ jsx2("span", { className: "text-xs text-[var(--text-muted)]", children: unit })
-              ] })
+        /* @__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: [
+            /* @__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("h2", { className: "text-lg font-bold text-foreground tracking-tight", children: "Environment Selection" })
             ] }),
-            /* @__PURE__ */ jsx2(
-              "input",
+            /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: environments.map((env) => /* @__PURE__ */ jsxs2(
+              "button",
               {
-                type: "range",
-                min,
-                max,
-                step: s,
-                value,
-                onChange: (e) => setter(+e.target.value),
-                className: "w-full h-2 bg-[var(--depth-1)] rounded-full appearance-none cursor-pointer accent-[var(--brand-cool)]"
-              }
-            ),
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-[var(--text-muted)]", children: [
-              /* @__PURE__ */ jsxs2("span", { children: [
-                min,
-                " ",
-                unit
-              ] }),
-              /* @__PURE__ */ jsxs2("span", { children: [
-                max,
-                " ",
-                unit
+                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)]"
+                ),
+                children: [
+                  selectedEnv === env.id && /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-gradient-to-br from-accent/10 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("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 })
+                ]
+              },
+              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: [
+            /* @__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("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" })
+                ] })
               ] })
-            ] })
-          ] }, label)) })
-        ] }),
-        /* @__PURE__ */ jsxs2("section", { className: "bg-[var(--depth-2)] rounded-xl p-8 border border-[var(--border-subtle)]", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 mb-8", children: [
-            /* @__PURE__ */ jsx2("div", { className: sectionIcon, children: /* @__PURE__ */ jsx2(Bot, { className: "h-5 w-5" }) }),
-            /* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: "AI Agent Configuration" })
-          ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
-            /* @__PURE__ */ jsxs2("div", { children: [
-              /* @__PURE__ */ jsx2("label", { className: "block font-mono text-xs uppercase tracking-widest text-[var(--text-muted)] mb-3", children: "Model Tier" }),
-              /* @__PURE__ */ jsxs2(
-                "select",
-                {
-                  value: modelTier,
-                  onChange: (e) => setModelTier(e.target.value),
-                  className: "w-full bg-[var(--depth-1)] border border-[var(--border-subtle)] rounded-xl h-12 px-4 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-[var(--border-accent)] text-[var(--text-primary)]",
-                  children: [
-                    /* @__PURE__ */ jsx2("option", { value: "llama-3-8b", children: "Llama-3-8B-Instruct (Lightweight)" }),
-                    /* @__PURE__ */ jsx2("option", { value: "mistral-7b", children: "Mistral-7B-v0.2 (Efficient)" }),
-                    /* @__PURE__ */ jsx2("option", { value: "claude-sonnet", children: "Claude Sonnet 4.6 (Capable)" })
-                  ]
-                }
-              )
             ] }),
-            /* @__PURE__ */ jsxs2("div", { children: [
-              /* @__PURE__ */ jsx2("label", { className: "block font-mono text-xs uppercase tracking-widest text-[var(--text-muted)] mb-3", children: "Initial System Prompt" }),
+            /* @__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" }
+            ].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(
-                "textarea",
+                "input",
                 {
-                  value: systemPrompt,
-                  onChange: (e) => setSystemPrompt(e.target.value),
-                  className: "w-full bg-[var(--depth-1)] border border-[var(--border-subtle)] rounded-xl p-5 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-[var(--border-accent)] h-40 resize-none text-[var(--text-primary)] placeholder:text-[var(--text-muted)]",
-                  placeholder: "Define the core persona of your agent..."
+                  type: "range",
+                  min,
+                  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"
                 }
-              )
+              ),
+              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground/60 mt-1", children: [
+                /* @__PURE__ */ jsxs2("span", { children: [
+                  min,
+                  unit
+                ] }),
+                /* @__PURE__ */ jsxs2("span", { children: [
+                  max,
+                  unit
+                ] })
+              ] })
+            ] }, 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: [
+            /* @__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("h2", { className: "text-lg font-bold text-foreground tracking-tight", children: "AI Agent Capability" })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "space-y-5", children: [
+              /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Model Engine" }),
+                /* @__PURE__ */ jsxs2(
+                  "select",
+                  {
+                    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",
+                    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)" }),
+                      /* @__PURE__ */ jsx2("option", { value: "claude-sonnet", className: "bg-gray-900", children: "Claude Sonnet 4.6 (Highly Capable)" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Core Directives (System Prompt)" }),
+                /* @__PURE__ */ jsx2(
+                  "textarea",
+                  {
+                    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",
+                    placeholder: "Define the autonomous directives or operational boundaries..."
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "pt-4 border-t border-border", children: [
+                /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowAdvanced(!showAdvanced),
+                    className: "flex items-center gap-2 text-foreground/70 hover:text-foreground transition-colors text-sm font-bold focus:outline-none",
+                    children: [
+                      /* @__PURE__ */ jsx2(Settings, { className: "w-4 h-4" }),
+                      showAdvanced ? "Hide Advanced Options" : "Show Advanced Options"
+                    ]
+                  }
+                ),
+                showAdvanced && /* @__PURE__ */ jsxs2("div", { className: "mt-6 space-y-5 animate-in slide-in-from-top-4 fade-in duration-300", children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+                    /* @__PURE__ */ jsxs2("div", { children: [
+                      /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Workspace Name" }),
+                      /* @__PURE__ */ jsx2(
+                        "input",
+                        {
+                          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",
+                          placeholder: "my-cool-sandbox"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs2("div", { children: [
+                      /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Virtualization Driver" }),
+                      /* @__PURE__ */ jsxs2(
+                        "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",
+                          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)" }),
+                            /* @__PURE__ */ jsx2("option", { value: "tangle", className: "bg-gray-900", children: "Tangle Distributed Node" })
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs2("div", { children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Git Repository URL" }),
+                    /* @__PURE__ */ jsx2(
+                      "input",
+                      {
+                        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",
+                        placeholder: "https://github.com/my-org/my-repo.git"
+                      }
+                    )
+                  ] }),
+                  /* @__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__ */ jsx2(Plus, { className: "h-3 w-3" }),
+                        " Add Var"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+                      envVars.map((env, i) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
+                        /* @__PURE__ */ jsx2(
+                          "input",
+                          {
+                            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",
+                            placeholder: "API_KEY"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2(
+                          "input",
+                          {
+                            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",
+                            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" }) })
+                      ] }, 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" })
+                    ] })
+                  ] }),
+                  /* @__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__ */ 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-xs text-muted-foreground", children: "Start as a raw container without an embedded AI Agent backend." })
+                    ] })
+                  ] }) })
+                ] })
+              ] })
             ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center py-4", children: [
-          /* @__PURE__ */ jsxs2("button", { type: "button", onClick: handleBack, className: "px-8 py-3 rounded-xl border border-[var(--border-subtle)] hover:bg-[var(--depth-3)] transition-colors text-sm font-bold text-[var(--text-secondary)] flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-4 w-4" }),
-            "Back"
-          ] }),
-          /* @__PURE__ */ jsxs2("button", { type: "button", onClick: handleNext, className: "px-10 py-3 bg-[var(--accent-surface-soft)] border border-[var(--border-accent)] text-[var(--accent-text)] font-bold rounded-xl hover:bg-[var(--accent-surface-strong)] active:scale-95 transition-all flex items-center gap-2 group", children: [
-            step < STEPS.length - 1 ? "Continue" : "Launch Sandbox",
-            /* @__PURE__ */ jsx2(ArrowRight, { className: "h-4 w-4 group-hover:translate-x-1 transition-transform" })
-          ] })
+          ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-4 sticky top-24 space-y-6", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "bg-[var(--depth-2)] rounded-xl overflow-hidden border border-[var(--border-subtle)]", children: [
-          /* @__PURE__ */ jsx2("div", { className: "bg-[var(--depth-1)] border-b border-[var(--border-subtle)] px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ jsx2("div", { className: "font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-tighter", children: "config_stream.sh" }) }),
-          /* @__PURE__ */ jsxs2("div", { className: "p-6 font-mono text-xs space-y-3 min-h-[280px]", children: [
-            /* @__PURE__ */ jsx2("div", { className: "text-[var(--code-success)]", children: "$ tangle-cli provision --new" }),
-            /* @__PURE__ */ jsx2("div", { className: "text-[var(--text-muted)]", children: "Initializing handshake..." }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-[var(--text-secondary)]", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)]", children: "\u2713" }),
-              " Platform: ",
-              /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-primary)]", children: environments.find((e) => e.id === selectedEnv)?.name ?? "Node.js" })
+      /* @__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__ */ 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: [
+              /* @__PURE__ */ jsx2("div", { className: "h-3 w-3 rounded-full bg-[#ff5f56]/80" }),
+              /* @__PURE__ */ jsx2("div", { className: "h-3 w-3 rounded-full bg-[#ffbd2e]/80" }),
+              /* @__PURE__ */ jsx2("div", { className: "h-3 w-3 rounded-full bg-[#27c93f]/80" })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-[var(--text-secondary)]", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)]", children: "\u2713" }),
-              " Compute: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--text-primary)]", children: [
+            /* @__PURE__ */ jsx2("div", { className: "font-mono text-[10px] text-muted-foreground uppercase tracking-widest ml-2 border-l border-border pl-3", children: "deploy_sequence.sh" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "p-5 font-mono text-xs space-y-3 min-h-[240px] relative z-10 text-[13px]", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "text-green-400", children: [
+              "root@tangle:~# ",
+              /* @__PURE__ */ jsx2("span", { className: "text-foreground/80", children: "tangle-cli provision --new" })
+            ] }),
+            /* @__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" }),
+              " Bound Platform: ",
+              /* @__PURE__ */ jsx2("span", { className: "text-foreground font-bold", children: environments.find((e) => e.id === selectedEnv)?.name ?? "Node.js" })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-accent mr-2", children: "\u2713" }),
+              " Allocation CPU: ",
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold", children: [
                 cpuCores,
-                " vCPUs"
+                " Cores"
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-[var(--text-secondary)]", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)]", children: "\u2713" }),
-              " Memory: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--text-primary)]", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-accent mr-2", children: "\u2713" }),
+              " Allocation RAM: ",
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold", children: [
                 ramGB,
                 "GB"
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-[var(--text-secondary)]", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)]", children: "\u2713" }),
-              " Disk: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--text-primary)]", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-accent mr-2", children: "\u2713" }),
+              " Mounted Storage: ",
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold", children: [
                 storageGB,
                 "GB NVMe"
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "pt-4 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx2("div", { className: "w-2 h-4 bg-[var(--brand-cool)] animate-pulse" }),
-              /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-muted)]", children: "Ready for review..." })
+            /* @__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("span", { className: "text-muted-foreground", children: "Awaiting user confirmation..." })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "p-6 rounded-xl bg-[var(--depth-3)] border border-[var(--border-accent)]", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-4", children: [
-            /* @__PURE__ */ jsx2("span", { className: "text-sm font-bold text-[var(--text-secondary)]", children: "Estimated Run Cost" }),
-            /* @__PURE__ */ jsx2(Info, { className: "h-4 w-4 text-[var(--brand-cool)]" })
+        /* @__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: "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__ */ jsxs2("div", { className: "flex items-baseline gap-2 mb-6", children: [
-            /* @__PURE__ */ jsxs2("span", { className: "text-4xl font-extrabold text-[var(--text-primary)]", children: [
+          /* @__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: [
               "$",
               hourCost
             ] }),
-            /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-muted)] text-sm", children: "/ hour" })
+            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-bold", children: "/ hour" })
           ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono uppercase tracking-widest text-[var(--text-muted)]", children: [
-              /* @__PURE__ */ jsx2("span", { children: "Compute" }),
-              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--text-secondary)]", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "space-y-2 relative z-10 glass-panel rounded-xl p-3 border border-border", 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: [
                 "$",
-                (cpuCores * 0.045).toFixed(2)
+                (cpuCores * 0.045).toFixed(2),
+                "/h"
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono uppercase tracking-widest text-[var(--text-muted)]", children: [
-              /* @__PURE__ */ jsx2("span", { children: "Memory" }),
-              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--text-secondary)]", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+              /* @__PURE__ */ jsx2("span", { children: "MEMORY" }),
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
                 "$",
                 (ramGB * 5e-3).toFixed(2)
               ] })
             ] })
           ] })
-        ] })
+        ] }),
+        /* @__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",
+              children: [
+                "Continue to ",
+                currentStep === 1 ? "Resources" : "Agent Config"
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs2(
+            "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" })
+              ]
+            }
+          ),
+          currentStep > 1 && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              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",
+              children: "Back"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs2(
+          "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" })
+            ]
+          }
+        ) })
       ] })
     ] })
   ] });
@@ -576,73 +803,28 @@ function ProvisioningWizard({
 
 // src/pages/pricing-page.tsx
 import * as React3 from "react";
+import { ChevronDown } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var variantColors = {
-  sandbox: {
-    accent: "text-[var(--accent-text)]",
-    gradient: "bg-[image:var(--accent-gradient-strong)]"
-  }
-};
 async function fetchTiersFromApi(apiBasePath) {
   const res = await fetch(`${apiBasePath}/v1/billing/tiers`);
-  if (!res.ok) {
-    throw new Error("Failed to fetch pricing tiers");
-  }
+  if (!res.ok) throw new Error("Failed to fetch pricing tiers");
   const data = await res.json();
   return data.tiers || data;
 }
-function PricingPageSkeleton() {
-  return /* @__PURE__ */ jsxs3("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-center gap-4", children: [
-      /* @__PURE__ */ jsx3(Skeleton, { className: "h-10 w-24" }),
-      /* @__PURE__ */ jsx3(Skeleton, { className: "h-10 w-24" })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: [
-      /* @__PURE__ */ jsx3(SkeletonCard, { className: "h-96" }),
-      /* @__PURE__ */ jsx3(SkeletonCard, { className: "h-96" }),
-      /* @__PURE__ */ jsx3(SkeletonCard, { className: "h-96" })
-    ] })
-  ] });
-}
-function PricingPageError({
-  message,
-  onRetry
-}) {
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center space-y-4 rounded-xl border border-destructive/20 bg-destructive/5 p-8 text-center", children: [
-    /* @__PURE__ */ jsx3("div", { className: "rounded-full bg-destructive/10 p-3", children: /* @__PURE__ */ jsxs3(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        className: "h-6 w-6 text-destructive",
-        children: [
-          /* @__PURE__ */ jsx3("title", { children: "Error icon" }),
-          /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ jsx3("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
-          /* @__PURE__ */ jsx3("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx3("h3", { className: "font-semibold text-lg", children: "Failed to load pricing" }),
-      /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-sm", children: message })
-    ] }),
-    /* @__PURE__ */ jsx3(
-      "button",
-      {
-        type: "button",
-        onClick: onRetry,
-        className: "rounded-lg bg-primary px-4 py-2 font-medium text-primary-foreground text-sm transition-colors hover:bg-primary/90",
-        children: "Try Again"
-      }
-    )
-  ] });
-}
+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: "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."
+  }
+];
 function StandalonePricingPage({
   variant = "sandbox",
   initialTiers,
@@ -653,7 +835,6 @@ function StandalonePricingPage({
   subtitle = "Choose the plan that fits your needs. Upgrade or downgrade at any time.",
   className
 }) {
-  const colors = variantColors[variant];
   const [state, setState] = React3.useState({
     tiers: initialTiers || [],
     loading: !initialTiers,
@@ -690,20 +871,12 @@ function StandalonePricingPage({
         const res = await fetch(`${apiBasePath}/v1/billing/subscribe`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            tierId,
-            billingPeriod: state.billingPeriod
-          })
+          body: JSON.stringify({ tierId, billingPeriod: state.billingPeriod })
         });
-        if (!res.ok) {
-          throw new Error("Failed to initiate subscription");
-        }
+        if (!res.ok) throw new Error("Failed to initiate subscription");
         const { checkoutUrl, loginUrl } = await res.json();
-        if (loginUrl) {
-          window.location.href = loginUrl;
-        } else if (checkoutUrl) {
-          window.location.href = checkoutUrl;
-        }
+        if (loginUrl) window.location.href = loginUrl;
+        else if (checkoutUrl) window.location.href = checkoutUrl;
       } catch (err) {
         setState((prev) => ({
           ...prev,
@@ -714,111 +887,52 @@ function StandalonePricingPage({
     },
     [apiBasePath, state.billingPeriod, onSelectTier]
   );
-  const handleBillingPeriodChange = React3.useCallback(
-    (period) => {
-      setState((prev) => ({ ...prev, billingPeriod: period }));
-    },
-    []
-  );
-  return /* @__PURE__ */ jsxs3("div", { className: cn("w-full space-y-12", className), children: [
+  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 }),
+      /* @__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: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-center gap-4", children: [
+        /* @__PURE__ */ jsx3(Skeleton, { className: "h-10 w-24" }),
+        /* @__PURE__ */ jsx3(Skeleton, { className: "h-10 w-24" })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-3", children: [
+        /* @__PURE__ */ jsx3(SkeletonCard, { className: "h-[500px]" }),
+        /* @__PURE__ */ jsx3(SkeletonCard, { className: "h-[500px]" }),
+        /* @__PURE__ */ jsx3(SkeletonCard, { className: "h-[500px]" })
+      ] })
+    ] }) : state.error ? /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center space-y-4 rounded-xl border border-destructive/20 bg-destructive/5 p-8 text-center", children: [
+      /* @__PURE__ */ jsx3("p", { className: "text-destructive text-sm font-medium", children: state.error }),
       /* @__PURE__ */ jsx3(
-        "h1",
+        "button",
         {
-          className: cn(
-            "font-bold text-4xl tracking-tight sm:text-5xl",
-            "bg-clip-text text-transparent",
-            colors.gradient
-          ),
-          children: title
+          type: "button",
+          onClick: loadTiers,
+          className: "rounded-lg bg-primary px-4 py-2 font-medium text-primary-foreground text-sm hover:bg-primary/90 transition-colors",
+          children: "Try Again"
         }
-      ),
-      /* @__PURE__ */ jsx3("p", { className: "mx-auto max-w-2xl text-lg text-muted-foreground", children: subtitle })
-    ] }),
-    state.loading ? /* @__PURE__ */ jsx3(PricingPageSkeleton, {}) : state.error ? /* @__PURE__ */ jsx3(PricingPageError, { message: state.error, onRetry: loadTiers }) : /* @__PURE__ */ jsx3(
+      )
+    ] }) : /* @__PURE__ */ jsx3(
       PricingPage,
       {
         tiers: state.tiers,
         billingPeriod: state.billingPeriod,
-        onBillingPeriodChange: handleBillingPeriodChange,
+        onBillingPeriodChange: (p) => setState((prev) => ({ ...prev, billingPeriod: p })),
         onSelectTier: handleSelectTier,
         variant,
         loading: state.selectingTier
       }
     ),
-    /* @__PURE__ */ jsxs3("div", { className: "mx-auto max-w-3xl space-y-6 border-border border-t pt-8", children: [
-      /* @__PURE__ */ jsx3("h2", { className: "text-center font-semibold text-xl", children: "Frequently Asked Questions" }),
-      /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs3("details", { className: "group rounded-lg border border-border bg-card p-4", children: [
-          /* @__PURE__ */ jsxs3("summary", { className: "flex cursor-pointer list-none items-center justify-between font-medium", children: [
-            "What are credits?",
-            /* @__PURE__ */ jsxs3(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                className: "h-4 w-4 transition-transform group-open:rotate-180",
-                children: [
-                  /* @__PURE__ */ jsx3("title", { children: "Toggle icon" }),
-                  /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx3("p", { className: "mt-3 text-muted-foreground text-sm", children: "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." })
+    /* @__PURE__ */ jsxs3("div", { className: "mx-auto max-w-2xl space-y-4 border-t border-border pt-12", children: [
+      /* @__PURE__ */ jsx3("h2", { className: "text-center text-xl font-bold text-foreground mb-6", children: "Frequently Asked Questions" }),
+      FAQ.map(({ q, a }) => /* @__PURE__ */ jsxs3("details", { className: "group rounded-xl border border-border bg-card overflow-hidden", children: [
+        /* @__PURE__ */ jsxs3("summary", { className: "flex cursor-pointer items-center justify-between px-6 py-4 font-medium text-foreground text-sm", children: [
+          q,
+          /* @__PURE__ */ jsx3(ChevronDown, { className: "h-4 w-4 text-muted-foreground transition-transform group-open:rotate-180" })
         ] }),
-        /* @__PURE__ */ jsxs3("details", { className: "group rounded-lg border border-border bg-card p-4", children: [
-          /* @__PURE__ */ jsxs3("summary", { className: "flex cursor-pointer list-none items-center justify-between font-medium", children: [
-            "Can I change plans later?",
-            /* @__PURE__ */ jsxs3(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                className: "h-4 w-4 transition-transform group-open:rotate-180",
-                children: [
-                  /* @__PURE__ */ jsx3("title", { children: "Toggle icon" }),
-                  /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx3("p", { className: "mt-3 text-muted-foreground text-sm", children: "Yes! You can upgrade or downgrade your plan at any time. When you upgrade, you will be charged the prorated difference. When you downgrade, the change takes effect at the end of your billing cycle." })
-        ] }),
-        /* @__PURE__ */ jsxs3("details", { className: "group rounded-lg border border-border bg-card p-4", children: [
-          /* @__PURE__ */ jsxs3("summary", { className: "flex cursor-pointer list-none items-center justify-between font-medium", children: [
-            "Do unused credits roll over?",
-            /* @__PURE__ */ jsxs3(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                className: "h-4 w-4 transition-transform group-open:rotate-180",
-                children: [
-                  /* @__PURE__ */ jsx3("title", { children: "Toggle icon" }),
-                  /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx3("p", { className: "mt-3 text-muted-foreground text-sm", children: "Monthly credits do not roll over to the next month. However, purchased credit packs never expire and can be used at any time." })
-        ] })
-      ] })
+        /* @__PURE__ */ jsx3("div", { className: "px-6 pb-4", children: /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground leading-relaxed", children: a }) })
+      ] }, q))
     ] })
   ] });
 }
@@ -829,11 +943,11 @@ import {
   ChevronRight,
   Copy,
   Edit2,
-  Loader2,
-  Plus,
+  Loader2 as Loader22,
+  Plus as Plus2,
   Search,
   Settings2,
-  Trash2
+  Trash2 as Trash22
 } from "lucide-react";
 import * as React4 from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -910,7 +1024,7 @@ function ProfilesPage({
             onClick: () => setCreateDialogOpen(true),
             disabled: !canCreateMore,
             children: [
-              /* @__PURE__ */ jsx4(Plus, { className: "mr-2 h-4 w-4" }),
+              /* @__PURE__ */ jsx4(Plus2, { className: "mr-2 h-4 w-4" }),
               "Create Profile"
             ]
           }
@@ -942,7 +1056,7 @@ function ProfilesPage({
       /* @__PURE__ */ jsx4("span", { children: error }),
       /* @__PURE__ */ jsx4(Button, { variant: "ghost", size: "sm", onClick: loadProfiles, children: "Retry" })
     ] }),
-    loading && /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx4(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }),
+    loading && /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx4(Loader22, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }),
     !loading && /* @__PURE__ */ jsxs4("div", { className: "space-y-8", children: [
       /* @__PURE__ */ jsxs4("section", { children: [
         /* @__PURE__ */ jsx4("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs4("h2", { className: "font-medium text-lg", children: [
@@ -959,7 +1073,7 @@ function ProfilesPage({
             title: "No custom profiles yet",
             description: "Create a profile to customize agent behavior",
             action: canCreateMore ? /* @__PURE__ */ jsxs4(Button, { onClick: () => setCreateDialogOpen(true), children: [
-              /* @__PURE__ */ jsx4(Plus, { className: "mr-2 h-4 w-4" }),
+              /* @__PURE__ */ jsx4(Plus2, { className: "mr-2 h-4 w-4" }),
               "Create Profile"
             ] }) : void 0
           }
@@ -1083,7 +1197,7 @@ function ProfileCard({
                 size: "icon",
                 onClick: onDelete,
                 "aria-label": "Delete profile",
-                children: /* @__PURE__ */ jsx4(Trash2, { className: "h-4 w-4 text-[var(--surface-danger-text)]" })
+                children: /* @__PURE__ */ jsx4(Trash22, { className: "h-4 w-4 text-[var(--surface-danger-text)]" })
               }
             )
           ] })
@@ -1301,7 +1415,7 @@ function ProfileFormDialog({
       /* @__PURE__ */ jsxs4(DialogFooter, { children: [
         /* @__PURE__ */ jsx4(Button, { type: "button", variant: "outline", onClick: onClose, children: "Cancel" }),
         /* @__PURE__ */ jsxs4(Button, { type: "submit", disabled: saving || !formData.name, children: [
-          saving && /* @__PURE__ */ jsx4(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+          saving && /* @__PURE__ */ jsx4(Loader22, { className: "mr-2 h-4 w-4 animate-spin" }),
           isEditing ? "Save Changes" : "Create Profile"
         ] })
       ] })
@@ -1356,7 +1470,7 @@ function DeleteProfileDialog({
           onClick: handleDelete,
           disabled: deleting,
           children: [
-            deleting && /* @__PURE__ */ jsx4(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+            deleting && /* @__PURE__ */ jsx4(Loader22, { className: "mr-2 h-4 w-4 animate-spin" }),
             "Delete Profile"
           ]
         }
@@ -1460,10 +1574,450 @@ 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 { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function SecretsPage({ apiClient, className }) {
+  const [secrets, setSecrets] = React5.useState([]);
+  const [loading, setLoading] = React5.useState(true);
+  const [error, setError] = React5.useState(null);
+  const [isCreateOpen, setIsCreateOpen] = React5.useState(false);
+  const [newName, setNewName] = React5.useState("");
+  const [newValue, setNewValue] = React5.useState("");
+  const [showValue, setShowValue] = React5.useState(false);
+  const [isCreating, setIsCreating] = React5.useState(false);
+  const [createError, setCreateError] = React5.useState(null);
+  const [deleteTarget, setDeleteTarget] = React5.useState(null);
+  const [isDeleting, setIsDeleting] = React5.useState(false);
+  const apiRef = React5.useRef(apiClient);
+  apiRef.current = apiClient;
+  const loadSecrets = React5.useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await apiRef.current.listSecrets();
+      setSecrets(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load secrets");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  React5.useEffect(() => {
+    loadSecrets();
+  }, [loadSecrets]);
+  const handleCreate = async () => {
+    if (!newName.trim()) return;
+    setIsCreating(true);
+    setCreateError(null);
+    try {
+      await apiRef.current.createSecret(newName.trim(), newValue);
+      setIsCreateOpen(false);
+      setNewName("");
+      setNewValue("");
+      setShowValue(false);
+      loadSecrets();
+    } catch (err) {
+      setCreateError(err instanceof Error ? err.message : "Failed to create secret");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+  const handleDelete = async (name) => {
+    setIsDeleting(true);
+    try {
+      await apiRef.current.deleteSecret(name);
+      setDeleteTarget(null);
+      loadSecrets();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete secret");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  const formatDate = (dateStr) => {
+    try {
+      const ts = /^\d+$/.test(dateStr) ? Number(dateStr) : dateStr;
+      const date = new Date(ts);
+      if (Number.isNaN(date.getTime())) return dateStr;
+      return date.toLocaleDateString();
+    } catch {
+      return dateStr;
+    }
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center 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__ */ 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]",
+          children: [
+            /* @__PURE__ */ jsx5(Plus3, { className: "h-4 w-4" }),
+            "Create Secret"
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxs5("div", { className: "rounded-xl 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 })
+    ] }),
+    /* @__PURE__ */ jsx5(Dialog, { open: isCreateOpen, onOpenChange: (open) => {
+      if (!open) {
+        setIsCreateOpen(false);
+        setNewName("");
+        setNewValue("");
+        setCreateError(null);
+        setShowValue(false);
+      }
+    }, 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__ */ 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(
+            "input",
+            {
+              type: "text",
+              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"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5("label", { className: "block text-sm font-medium text-foreground mb-1.5", children: "Value" }),
+          /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx5(
+              "input",
+              {
+                type: showValue ? "text" : "password",
+                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"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowValue(!showValue),
+                className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground",
+                children: showValue ? /* @__PURE__ */ jsx5(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(Eye, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx5("p", { className: "mt-1.5 text-xs text-muted-foreground", children: "This value cannot be retrieved after creation." })
+        ] })
+      ] }),
+      createError && /* @__PURE__ */ jsx5("p", { className: "mt-3 text-sm text-destructive", children: createError }),
+      /* @__PURE__ */ jsxs5(DialogFooter, { children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setIsCreateOpen(false);
+              setNewName("");
+              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",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            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]",
+            children: isCreating ? "Creating..." : "Create Secret"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx5(Dialog, { open: !!deleteTarget, onOpenChange: (open) => {
+      if (!open) setDeleteTarget(null);
+    }, children: /* @__PURE__ */ jsxs5(DialogContent, { className: "max-w-sm", children: [
+      /* @__PURE__ */ jsxs5(DialogHeader, { children: [
+        /* @__PURE__ */ jsx5(DialogTitle, { children: "Delete Secret?" }),
+        /* @__PURE__ */ jsxs5(DialogDescription, { children: [
+          "This will permanently delete ",
+          /* @__PURE__ */ jsx5("span", { className: "font-mono font-bold text-foreground", children: deleteTarget }),
+          ". Sandboxes using this secret will lose access to it."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5(DialogFooter, { children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            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",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            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]",
+            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("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." }),
+        /* @__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",
+            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__ */ 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("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(
+            "button",
+            {
+              type: "button",
+              onClick: () => setDeleteTarget(secret.name),
+              className: "p-1 text-muted-foreground hover:text-destructive transition-colors rounded",
+              children: /* @__PURE__ */ jsx5(Trash23, { className: "h-4 w-4" })
+            }
+          ) })
+        ] }, secret.name)) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/pages/templates-page.tsx
+import { Layers as Layers2 } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function TemplatesPage({ templates, loading = false, onUseTemplate, className }) {
+  return /* @__PURE__ */ jsxs6("div", { className: cn("space-y-8", className), children: [
+    /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx6("h1", { className: "font-bold text-3xl text-foreground", children: "Templates" }),
+      /* @__PURE__ */ jsx6("p", { className: "mt-1 text-muted-foreground", children: "Pre-configured environments to get started quickly" })
+    ] }),
+    loading || !templates ? /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx6(Skeleton, { className: "h-56 rounded-2xl" }, i)) }) : templates.length === 0 ? /* @__PURE__ */ jsxs6("div", { className: "rounded-2xl border border-border bg-card p-16 text-center", children: [
+      /* @__PURE__ */ jsx6(Layers2, { className: "mx-auto mb-3 h-10 w-10 text-muted-foreground" }),
+      /* @__PURE__ */ jsx6("p", { className: "text-sm font-medium text-foreground mb-1", children: "No templates available" }),
+      /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: "Check back later for pre-configured environments." })
+    ] }) : /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3", children: templates.map((template) => /* @__PURE__ */ jsx6(
+      TemplateCard,
+      {
+        template,
+        onUseTemplate
+      },
+      template.id
+    )) })
+  ] });
+}
+
+// src/lib/template-presets.ts
+var BLOCKCHAIN_PATTERNS = [
+  "ethereum",
+  "solana",
+  "arbitrum",
+  "base-aa",
+  "base-l2",
+  "polygon",
+  "tangle",
+  "chainlink",
+  "foundry",
+  "hardhat",
+  "optimism",
+  "zksync",
+  "starknet",
+  "cosmos",
+  "near",
+  "aptos",
+  "sui",
+  "ton",
+  "injective",
+  "gnosis",
+  "linea",
+  "monad",
+  "reth",
+  "soneium",
+  "xlayer",
+  "coinbase",
+  "farcaster",
+  "worldcoin",
+  "x402-payments",
+  "xmtp",
+  "openzeppelin",
+  "biconomy",
+  "gelato",
+  "hyperlane",
+  "hyperliquid",
+  "lifi",
+  "polymer",
+  "risc0",
+  "stylus",
+  "succinct",
+  "fhenix",
+  "rindexer",
+  "ai-agent-web3"
+];
+var AI_ML_PATTERNS = [
+  "pytorch",
+  "tensorflow",
+  "huggingface",
+  "chromadb",
+  "langchain",
+  "llamaindex",
+  "ai-sdk",
+  "ollama",
+  "vllm",
+  "pgvector",
+  "qdrant",
+  "milvus",
+  "weaviate",
+  "mlops",
+  "jupyter",
+  "scientific-python"
+];
+var FRONTEND_PATTERNS = [
+  "react",
+  "next",
+  "vue",
+  "angular",
+  "svelte",
+  "vite",
+  "astro",
+  "remix",
+  "gatsby",
+  "nuxt"
+];
+var INFRASTRUCTURE_PATTERNS = [
+  "redis",
+  "postgresql",
+  "mongodb",
+  "kafka",
+  "elasticsearch",
+  "clickhouse",
+  "minio",
+  "kubernetes",
+  "terraform",
+  "pulumi",
+  "blockscout",
+  "tempo",
+  "convex"
+];
+function categorizeTemplate(id) {
+  const lower = id.toLowerCase();
+  if (BLOCKCHAIN_PATTERNS.some((p) => lower.includes(p))) return "blockchain";
+  if (AI_ML_PATTERNS.some((p) => lower.includes(p))) return "ai-ml";
+  if (FRONTEND_PATTERNS.some((p) => lower.includes(p))) return "frontend";
+  if (INFRASTRUCTURE_PATTERNS.some((p) => lower.includes(p))) return "infrastructure";
+  return "general";
+}
+var CATEGORY_DEFAULTS = {
+  blockchain: {
+    environment: "",
+    cpuCores: 4,
+    ramGB: 16,
+    storageGB: 128,
+    modelTier: "claude-sonnet",
+    systemPrompt: "You are a blockchain development assistant. Help with smart contract development, testing, and deployment. Follow security best practices and suggest gas optimizations where relevant.",
+    bare: false
+  },
+  "ai-ml": {
+    environment: "",
+    cpuCores: 8,
+    ramGB: 32,
+    storageGB: 256,
+    modelTier: "claude-sonnet",
+    systemPrompt: "You are an AI/ML development assistant. Help with model training, data processing, and experiment management. Suggest efficient approaches for the available compute resources.",
+    bare: false
+  },
+  frontend: {
+    environment: "",
+    cpuCores: 2,
+    ramGB: 4,
+    storageGB: 50,
+    modelTier: "claude-sonnet",
+    systemPrompt: "You are a frontend development assistant. Help build modern, accessible, and performant user interfaces.",
+    bare: false
+  },
+  infrastructure: {
+    environment: "",
+    cpuCores: 4,
+    ramGB: 16,
+    storageGB: 128,
+    modelTier: "claude-sonnet",
+    systemPrompt: "You are an infrastructure and DevOps assistant. Help with service configuration, deployment, monitoring, and operational best practices.",
+    bare: false
+  },
+  general: {
+    environment: "",
+    cpuCores: 4,
+    ramGB: 16,
+    storageGB: 128,
+    modelTier: "claude-sonnet",
+    systemPrompt: "",
+    bare: false
+  }
+};
+function getPresetForTemplate(id) {
+  const category = categorizeTemplate(id);
+  const defaults = CATEGORY_DEFAULTS[category];
+  return { ...defaults, environment: id };
+}
 export {
   BillingPage,
   ProfilesPage,
   ProvisioningWizard,
+  SecretsPage,
   StandalonePricingPage,
+  TemplatesPage,
+  getPresetForTemplate,
   resolveEnvironment
 };