@tangle-network/sandbox-ui 0.20.3 → 0.21.1

package/dist/pages.js

@@ -1,17 +1,18 @@
 import {
   BillingDashboard,
   InfoPanel,
-  ModelPicker,
   PricingPage,
   TemplateCard,
-  UsageChart,
-  canonicalModelId
-} from "./chunk-QNVVKMEW.js";
+  UsageChart
+} from "./chunk-DNZ4DTNA.js";
 import {
   Badge,
   Button,
+  Input,
+  Switch,
   Textarea
 } from "./chunk-7ZA5SEK3.js";
+import "./chunk-4KAPMTPU.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -280,7 +281,6 @@ import {
   ArrowLeft,
   Layers,
   Cpu,
-  Bot,
   Info,
   Loader2,
   Settings,
@@ -294,6 +294,8 @@ var VALID_DRIVERS = /* @__PURE__ */ new Set([
   "firecracker",
   "tangle"
 ]);
+var SECTION_CARD_CLASS = "rounded-lg border border-border bg-card p-5 shadow-sm";
+var FIELD_LABEL_CLASS = "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]";
 var STACK_DISPLAY = {
   universal: {
     name: "Default",
@@ -509,10 +511,6 @@ function ProvisioningWizard({
   skipToReview,
   onLoadStartupScripts,
   resourceLimits,
-  models,
-  popular,
-  defaultModel,
-  onSetDefault,
   sshAccess,
   pricingRates,
   planTiers
@@ -599,19 +597,6 @@ function ProvisioningWizard({
       (prev) => snapSliderValue(prev, STORAGE_MIN, storageMax, storageStep)
     );
   }, [cpuMax, ramMax, storageMax, cpuStep, ramStep, storageStep]);
-  const [modelTier, setModelTier] = React2.useState(
-    dc?.modelTier ?? defaultModel ?? ""
-  );
-  const [systemPrompt, setSystemPrompt] = React2.useState(
-    dc?.systemPrompt ?? ""
-  );
-  React2.useEffect(() => {
-    if (!models || models.length === 0) return;
-    const ids = models.map(canonicalModelId);
-    if (ids.includes(modelTier)) return;
-    const next = (defaultModel && ids.includes(defaultModel) ? defaultModel : void 0) ?? popular?.find((p) => ids.includes(p)) ?? ids[0];
-    if (next && next !== modelTier) setModelTier(next);
-  }, [models, modelTier, defaultModel, popular]);
   const [name, setName] = React2.useState(dc?.name ?? "");
   const [gitUrl, setGitUrl] = React2.useState(dc?.gitUrl ?? "");
   const [envVars, setEnvVars] = React2.useState(dc?.envVars ?? [{ key: "", value: "" }]);
@@ -644,7 +629,7 @@ function ProvisioningWizard({
     };
   }, []);
   const isMultistep = variant === "multistep";
-  const stepLabels = sshAccess ? ["Environment", "Resources", "AI Agent", "Access"] : ["Environment", "Resources", "AI Agent"];
+  const stepLabels = sshAccess ? ["Environment", "Resources", "Access"] : ["Environment", "Resources"];
   const finalStep = stepLabels.length;
   const [currentStep, setCurrentStep] = React2.useState(
     skipToReview && dc && isMultistep ? finalStep : 1
@@ -664,8 +649,6 @@ function ProvisioningWizard({
         cpuCores,
         ramGB,
         storageGB,
-        modelTier,
-        systemPrompt,
         name,
         gitUrl,
         envVars: envVars.filter((e) => e.key.trim() !== ""),
@@ -744,41 +727,43 @@ function ProvisioningWizard({
   const rateSuffix = pricingView === "hourly" ? "/h" : "/s";
   const fmtRate = (v) => pricingView === "hourly" ? v.toFixed(2) : formatPerSecondValue(v);
   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: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-4 flex items-center gap-3 shrink-0", children: [
       onBack && /* @__PURE__ */ jsx2(
-        "button",
+        Button,
         {
           type: "button",
+          variant: "outline",
+          size: "icon",
           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" })
+          className: "h-9 w-9 shrink-0",
+          children: /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-4 w-4" })
         }
       ),
       /* @__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." })
+        /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: "Sandbox Provisioning" }),
+        /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: "Select your stack, allocate resources, and deploy." })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-12 gap-6 flex-1 min-h-0", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-12 gap-5 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 bg-card border border-border p-3 rounded-2xl mx-auto max-w-2xl justify-between shrink-0", children: stepLabels.map((label, index) => {
+        isMultistep && /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 mb-4 rounded-lg border border-border bg-card px-4 py-2 shadow-sm mx-auto max-w-2xl justify-between shrink-0", children: stepLabels.map((label, index) => {
           const s = index + 1;
           return /* @__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"
+                  "h-6 w-6 rounded-full flex items-center justify-center font-semibold text-xs shrink-0 transition-colors duration-200",
+                  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
+                children: currentStep > s ? /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3" }) : s
               }
             ),
             /* @__PURE__ */ jsx2(
               "span",
               {
                 className: cn(
-                  "ml-2 sm:ml-3 font-bold text-sm tracking-tight hidden sm:inline transition-colors duration-200",
+                  "ml-2 font-medium text-sm hidden sm:inline transition-colors duration-200",
                   currentStep === s ? "text-foreground" : currentStep > s ? "text-primary" : "text-muted-foreground"
                 ),
                 children: label
@@ -788,22 +773,23 @@ function ProvisioningWizard({
               "div",
               {
                 className: cn(
-                  "w-4 sm:w-8 h-0.5 mx-2 sm:mx-4 rounded-full transition-colors duration-300",
+                  "w-4 sm:w-8 h-px mx-2 sm:mx-3 transition-colors duration-300",
                   currentStep > s ? "bg-primary" : "bg-border"
                 )
               }
             )
           ] }, s);
         }) }),
-        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: [
+        dc && isMultistep && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between rounded-lg border border-border bg-card px-4 py-2.5 shadow-sm shrink-0 mb-4", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm", children: [
             /* @__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(
-            "button",
+            Button,
             {
               type: "button",
+              variant: "link",
               onClick: () => {
                 setCurrentStep(1);
                 setSelectedEnv(environments[0]?.id ?? "");
@@ -812,9 +798,6 @@ function ProvisioningWizard({
                 setStorageGB(
                   snapSliderValue(128, STORAGE_MIN, storageMax, storageStep)
                 );
-                const first = models?.[0];
-                setModelTier(first ? canonicalModelId(first) : "");
-                setSystemPrompt("");
                 setName("");
                 setGitUrl("");
                 setEnvVars([{ key: "", value: "" }]);
@@ -824,30 +807,30 @@ function ProvisioningWizard({
                 setActivePreset(null);
                 setPricingView("hourly");
               },
-              className: "text-xs font-bold text-primary hover:text-primary/70 transition-colors",
+              className: "h-auto p-0 text-xs",
               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: [
+        loadError && /* @__PURE__ */ jsxs2("div", { className: "rounded-lg border border-destructive/30 bg-destructive/10 p-3 flex items-center gap-2 shrink-0 mb-4", 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: "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-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" })
+          (!isMultistep || currentStep === 1) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: SECTION_CARD_CLASS, children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 mb-4", children: [
+              /* @__PURE__ */ jsx2(Layers, { className: "h-4 w-4 text-primary shrink-0" }),
+              /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-[0.06em] text-muted-foreground", children: "Environment Selection" })
             ] }),
             /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: isLoadingEnvironments && environments.length === 0 ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs2(
               "div",
               {
-                className: "p-4 rounded-[16px] border border-border bg-card/50 animate-pulse",
+                className: "p-3.5 rounded-lg border border-border bg-card/50 animate-pulse",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-start mb-3", children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-start mb-2.5", children: [
                     /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-full bg-muted/60 border border-border" }),
-                    /* @__PURE__ */ jsx2("div", { className: "w-5 h-5 rounded-full border-2 border-border" })
+                    /* @__PURE__ */ jsx2("div", { className: "w-4 h-4 rounded-full border-2 border-border" })
                   ] }),
                   /* @__PURE__ */ jsx2("div", { className: "h-3 w-1/3 rounded bg-muted/60 mb-2" }),
                   /* @__PURE__ */ jsx2("div", { className: "h-2.5 w-5/6 rounded bg-muted/50 mb-1.5" }),
@@ -861,39 +844,38 @@ function ProvisioningWizard({
                 type: "button",
                 onClick: () => setSelectedEnv(env.id),
                 className: cn(
-                  "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]"
+                  "group p-3.5 rounded-lg text-left border transition-colors duration-200",
+                  selectedEnv === env.id ? "bg-primary/5 border-primary ring-1 ring-primary/20" : "bg-card border-border hover:border-primary/30 active:scale-[0.99]"
                 ),
                 children: [
-                  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__ */ jsxs2("div", { className: "flex justify-between items-start mb-2.5", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-full flex items-center justify-center bg-muted/50 border border-border", children: env.icon }),
                     /* @__PURE__ */ jsx2(
                       "div",
                       {
                         className: cn(
-                          "w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200",
+                          "w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors 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" })
+                        children: selectedEnv === env.id && /* @__PURE__ */ jsx2(Check, { className: "h-2.5 w-2.5 text-primary-foreground" })
                       }
                     )
                   ] }),
-                  /* @__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 })
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-sm mb-0.5 text-foreground", children: env.name }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground leading-relaxed", children: env.description })
                 ]
               },
               env.id
             )) })
           ] }) }),
-          (!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-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" })
+          (!isMultistep || currentStep === 2) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: SECTION_CARD_CLASS, children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 mb-4", children: [
+              /* @__PURE__ */ jsx2(Cpu, { className: "h-4 w-4 text-primary shrink-0" }),
+              /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-[0.06em] text-muted-foreground", 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__ */ jsx2("div", { className: "grid grid-cols-3 gap-3", children: presets.map((p) => {
+            /* @__PURE__ */ jsxs2("div", { className: "mb-4", children: [
+              /* @__PURE__ */ jsx2("label", { className: cn(FIELD_LABEL_CLASS, "mb-2"), children: "Compute Presets" }),
+              /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3 gap-2", children: presets.map((p) => {
                 const active = activePreset === p.name && !p.locked;
                 return /* @__PURE__ */ jsxs2(
                   "button",
@@ -902,16 +884,16 @@ function ProvisioningWizard({
                     onClick: () => !p.locked && applyPreset(p.name, p.cpu, p.ram, p.storage),
                     disabled: p.locked,
                     className: cn(
-                      "p-3 rounded-[14px] transition-all duration-200 text-center group border relative",
-                      active ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : p.locked ? "bg-muted/30 border-border opacity-60 cursor-not-allowed" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"
+                      "p-2.5 rounded-lg transition-colors duration-200 text-center group border relative",
+                      active ? "bg-primary/5 border-primary ring-1 ring-primary/20" : p.locked ? "bg-muted/30 border-border opacity-60 cursor-not-allowed" : "bg-card border-border hover:border-primary/30 active:scale-[0.99]"
                     ),
                     children: [
-                      p.locked && /* @__PURE__ */ jsx2("div", { className: "absolute -top-1.5 -right-1.5 bg-primary text-primary-foreground text-[9px] font-bold px-1.5 py-0.5 rounded-full uppercase tracking-wider", children: p.unlockLabel }),
+                      p.locked && /* @__PURE__ */ jsx2("div", { className: "absolute -top-1.5 -right-1.5 bg-primary text-primary-foreground text-[9px] font-semibold px-1.5 py-0.5 rounded-full uppercase tracking-wider", children: p.unlockLabel }),
                       /* @__PURE__ */ jsx2(
                         "div",
                         {
                           className: cn(
-                            "font-bold text-sm transition-colors duration-200",
+                            "font-semibold text-sm transition-colors duration-200",
                             active ? "text-primary" : p.locked ? "text-muted-foreground" : "text-foreground"
                           ),
                           children: p.name
@@ -934,7 +916,7 @@ function ProvisioningWizard({
                 );
               }) })
             ] }),
-            /* @__PURE__ */ jsx2("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: [
               {
                 label: "Compute Cores (CPU)",
                 value: cpuCores,
@@ -966,9 +948,9 @@ function ProvisioningWizard({
               ({ label, value, setter, min, max, step: s, unit }) => {
                 const displayUnit = unit === "vCPU" ? `${value} vCPU${value === 1 ? "" : "s"}` : `${value}${unit}`;
                 return /* @__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__ */ jsx2("span", { className: "text-xl font-bold text-foreground tracking-tight", children: displayUnit })
+                  /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end pb-1 mb-1.5", children: [
+                    /* @__PURE__ */ jsx2("label", { className: FIELD_LABEL_CLASS, children: label }),
+                    /* @__PURE__ */ jsx2("span", { className: "text-sm font-semibold text-foreground tabular-nums", children: displayUnit })
                   ] }),
                   /* @__PURE__ */ jsx2(
                     "input",
@@ -982,7 +964,7 @@ function ProvisioningWizard({
                         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"
+                      className: "w-full h-1.5 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-1.5 [&::-moz-range-track]:bg-border [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-1.5 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-foreground"
                     }
                   ),
                   /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground/60 mt-1", children: [
@@ -999,294 +981,254 @@ function ProvisioningWizard({
               }
             ) })
           ] }) }),
-          (!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-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: [
-              /* @__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__ */ jsx2(
-                  ModelPicker,
-                  {
-                    label: "",
-                    value: modelTier,
-                    onChange: setModelTier,
-                    models: models ?? [],
-                    loading: !models,
-                    disabled: !models || models.length === 0,
-                    popular,
-                    triggerClassName: "rounded-xl h-12 px-4 font-bold"
-                  }
-                ),
-                onSetDefault && /* @__PURE__ */ jsx2(
-                  SaveAsDefault,
-                  {
-                    modelTier,
-                    defaultModel: defaultModel ?? null,
-                    onSetDefault
-                  }
-                )
+          (!isMultistep || currentStep === 2) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsx2("section", { className: SECTION_CARD_CLASS, children: /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowAdvanced(!showAdvanced),
+                className: "flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors text-sm font-medium 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-4 space-y-4", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxs2("div", { children: [
+                  /* @__PURE__ */ jsx2("label", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Workspace Name" }),
+                  /* @__PURE__ */ jsx2(
+                    Input,
+                    {
+                      type: "text",
+                      value: name,
+                      onChange: (e) => setName(e.target.value),
+                      maxLength: 128,
+                      className: "h-9 px-3 text-sm",
+                      placeholder: "my-cool-sandbox"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs2("div", { children: [
+                  /* @__PURE__ */ jsx2("label", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Virtualization Driver" }),
+                  /* @__PURE__ */ jsxs2(
+                    "select",
+                    {
+                      value: driver,
+                      onChange: (e) => {
+                        if (VALID_DRIVERS.has(e.target.value))
+                          setDriver(
+                            e.target.value
+                          );
+                      },
+                      className: "w-full bg-card border border-border rounded-lg h-9 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring 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: "Core Directives (System Prompt)" }),
+                /* @__PURE__ */ jsx2("label", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Git Repository URL" }),
                 /* @__PURE__ */ jsx2(
-                  "textarea",
+                  Input,
                   {
-                    value: systemPrompt,
-                    onChange: (e) => setSystemPrompt(e.target.value),
-                    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..."
+                    type: "text",
+                    value: gitUrl,
+                    onChange: (e) => setGitUrl(e.target.value),
+                    className: "h-9 px-3 text-sm",
+                    placeholder: "https://github.com/my-org/my-repo.git"
                   }
                 )
               ] }),
-              /* @__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),
-                          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"
-                        }
-                      )
-                    ] }),
-                    /* @__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) => {
-                            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)"
-                              }
-                            ),
-                            /* @__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__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-1.5", children: [
+                  /* @__PURE__ */ jsx2("label", { className: FIELD_LABEL_CLASS, children: "Environment Variables" }),
+                  /* @__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-medium",
+                      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",
+                      Input,
                       {
                         type: "text",
-                        value: gitUrl,
-                        onChange: (e) => setGitUrl(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 placeholder:text-muted-foreground",
-                        placeholder: "https://github.com/my-org/my-repo.git"
+                        value: env.key,
+                        onChange: (e) => setEnvVars(
+                          envVars.map(
+                            (v, idx) => idx === i ? { ...v, key: e.target.value } : v
+                          )
+                        ),
+                        className: "flex-1 h-9 px-3 font-mono text-sm",
+                        placeholder: "API_KEY"
                       }
-                    )
-                  ] }),
-                  /* @__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-primary hover:text-primary/70 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 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"
-                          }
+                    ),
+                    /* @__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] h-9 px-3 font-mono text-sm",
+                        placeholder: "sk-xxxxxxxxxxx"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "outline",
+                        size: "icon",
+                        onClick: () => setEnvVars(
+                          envVars.filter((_, idx) => idx !== i)
                         ),
+                        className: "h-9 w-9 shrink-0 text-destructive hover:bg-destructive/10 hover:border-destructive/30",
+                        children: /* @__PURE__ */ jsx2(Trash2, { className: "h-4 w-4" })
+                      }
+                    )
+                  ] }, i)),
+                  envVars.length === 0 && /* @__PURE__ */ jsx2("div", { className: "text-center p-3 border border-dashed border-border rounded-lg text-muted-foreground/60 text-xs italic", children: "No environment variables set" })
+                ] })
+              ] }),
+              availableScripts.length > 0 && /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsx2("div", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), 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: "password",
-                            value: env.value,
-                            onChange: (e) => setEnvVars(
-                              envVars.map(
-                                (v, idx) => idx === i ? { ...v, value: e.target.value } : v
-                              )
+                            type: "checkbox",
+                            checked: selected,
+                            onChange: () => setStartupScriptIds(
+                              (prev) => selected ? prev.filter(
+                                (id) => id !== script.id
+                              ) : [...prev, script.id]
                             ),
-                            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"
+                            className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary/30"
                           }
                         ),
-                        /* @__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 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]
+                        /* @__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" })
+                                    ]
+                                  }
                                 ),
-                                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-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-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." })
-                    ] })
-                  ] }) })
-                ] })
+                              ]
+                            },
+                            s
+                          )) })
+                        ] })
+                      ]
+                    },
+                    script.id
+                  );
+                }) })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "pt-3 border-t border-border flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs2("div", { children: [
+                  /* @__PURE__ */ jsx2(
+                    "label",
+                    {
+                      htmlFor: "wizard-bare-mode",
+                      className: "block text-sm font-medium text-foreground cursor-pointer",
+                      children: "Bare Mode"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Start as a raw container without an embedded AI Agent backend." })
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  Switch,
+                  {
+                    id: "wizard-bare-mode",
+                    checked: bare,
+                    onCheckedChange: setBare,
+                    className: "mt-0.5"
+                  }
+                )
               ] })
             ] })
-          ] }) }),
-          sshAccess && (!isMultistep || currentStep === 4) && /* @__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-primary/10 border border-primary/20 text-primary", children: /* @__PURE__ */ jsx2(Settings, { className: "h-5 w-5" }) }),
-              /* @__PURE__ */ jsx2("h2", { className: "text-lg font-bold text-foreground tracking-tight", children: "Access Configuration" })
+          ] }) }) }),
+          sshAccess && (!isMultistep || currentStep === 3) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: SECTION_CARD_CLASS, children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 mb-4", children: [
+              /* @__PURE__ */ jsx2(Settings, { className: "h-4 w-4 text-primary shrink-0" }),
+              /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-[0.06em] text-muted-foreground", children: "Access Configuration" })
             ] }),
             /* @__PURE__ */ jsx2(SshAccessStep, { config: sshAccess })
           ] }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-4 sticky top-4 space-y-4", children: [
-        /* @__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__ */ jsxs2("div", { className: "rounded-lg border border-border bg-card p-5 shadow-sm", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-3", children: [
+            /* @__PURE__ */ jsx2("span", { className: FIELD_LABEL_CLASS, children: "Run Cost" }),
             /* @__PURE__ */ jsxs2(
               "div",
               {
                 role: "group",
                 "aria-label": "Pricing view",
-                className: "inline-flex items-center rounded-full border border-border bg-muted/50 p-0.5",
+                className: "inline-flex items-center rounded-md border border-border bg-muted/50 p-0.5",
                 children: [
                   /* @__PURE__ */ jsx2(
                     "button",
@@ -1295,7 +1237,7 @@ function ProvisioningWizard({
                       "aria-pressed": pricingView === "hourly",
                       onClick: () => setPricingView("hourly"),
                       className: cn(
-                        "rounded-full px-2.5 py-0.5 text-[10px] font-bold transition-all",
+                        "rounded px-2.5 py-0.5 text-[10px] font-medium transition-all",
                         pricingView === "hourly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
                       ),
                       children: "Per Hour"
@@ -1308,7 +1250,7 @@ function ProvisioningWizard({
                       "aria-pressed": pricingView === "perSecond",
                       onClick: () => setPricingView("perSecond"),
                       className: cn(
-                        "rounded-full px-2.5 py-0.5 text-[10px] font-bold transition-all",
+                        "rounded px-2.5 py-0.5 text-[10px] font-medium transition-all",
                         pricingView === "perSecond" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
                       ),
                       children: "Per Second"
@@ -1318,13 +1260,13 @@ function ProvisioningWizard({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2 mb-5 relative z-10", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2 mb-4", children: [
             /* @__PURE__ */ jsxs2(
               "span",
               {
                 className: cn(
-                  "font-black text-foreground tracking-tighter animate-in fade-in duration-200",
-                  pricingView === "hourly" ? "text-4xl" : "text-2xl"
+                  "font-semibold text-foreground tracking-tight tabular-nums animate-in fade-in duration-200",
+                  pricingView === "hourly" ? "text-3xl" : "text-xl"
                 ),
                 children: [
                   "$",
@@ -1333,10 +1275,10 @@ function ProvisioningWizard({
               },
               pricingView
             ),
-            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-bold", children: pricingSuffix })
+            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm", children: pricingSuffix })
           ] }),
-          /* @__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__ */ jsxs2("div", { className: "space-y-2 rounded-md border border-border bg-muted/30 p-3", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-wide text-muted-foreground", children: [
               /* @__PURE__ */ jsx2("span", { children: "COMPUTE" }),
               /* @__PURE__ */ jsxs2("span", { className: "text-foreground", children: [
                 "$",
@@ -1344,7 +1286,7 @@ function ProvisioningWizard({
                 rateSuffix
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-wide text-muted-foreground", children: [
               /* @__PURE__ */ jsx2("span", { children: "MEMORY" }),
               /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
                 "$",
@@ -1352,7 +1294,7 @@ function ProvisioningWizard({
                 rateSuffix
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-wide text-muted-foreground", children: [
               /* @__PURE__ */ jsx2("span", { children: "STORAGE" }),
               /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
                 "$",
@@ -1360,7 +1302,7 @@ function ProvisioningWizard({
                 rateSuffix
               ] })
             ] }),
-            hourlyCostBreakdown.floorApplies && /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-primary border-t border-border pt-2", children: [
+            hourlyCostBreakdown.floorApplies && /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-wide text-primary border-t border-border pt-2", children: [
               /* @__PURE__ */ jsx2("span", { children: "MIN CHARGE" }),
               /* @__PURE__ */ jsxs2("span", { children: [
                 "$",
@@ -1372,29 +1314,29 @@ function ProvisioningWizard({
             ] })
           ] })
         ] }),
-        deployError && /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border border-destructive/30 bg-destructive/10 p-3 flex items-center gap-2", children: [
+        deployError && /* @__PURE__ */ jsxs2("div", { className: "rounded-lg 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: [
+        /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: isMultistep ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
           currentStep < finalStep ? /* @__PURE__ */ jsxs2(
-            "button",
+            Button,
             {
               type: "button",
               onClick: () => setCurrentStep((s) => s + 1),
-              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",
+              className: "w-full",
               children: [
                 "Continue to ",
                 stepLabels[currentStep]
               ]
             }
           ) : /* @__PURE__ */ jsx2(
-            "button",
+            Button,
             {
               type: "button",
               onClick: handleDeploy,
-              disabled: isDeploying || !selectedEnv || !modelTier && !bare,
-              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",
+              disabled: isDeploying || !selectedEnv,
+              className: "w-full",
               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..."
@@ -1402,21 +1344,22 @@ function ProvisioningWizard({
             }
           ),
           currentStep > 1 && /* @__PURE__ */ jsx2(
-            "button",
+            Button,
             {
               type: "button",
+              variant: "secondary",
               onClick: () => setCurrentStep((s) => s - 1),
-              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",
+              className: "w-full",
               children: "Back"
             }
           )
         ] }) : /* @__PURE__ */ jsx2(
-          "button",
+          Button,
           {
             type: "button",
             onClick: handleDeploy,
-            disabled: isDeploying || !selectedEnv || !modelTier && !bare,
-            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",
+            disabled: isDeploying || !selectedEnv,
+            className: "w-full",
             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..."
@@ -1427,36 +1370,6 @@ function ProvisioningWizard({
     ] })
   ] });
 }
-function SaveAsDefault({
-  modelTier,
-  defaultModel,
-  onSetDefault
-}) {
-  const isCurrentDefault = Boolean(modelTier) && modelTier === defaultModel;
-  const disabled = !modelTier || isCurrentDefault;
-  return /* @__PURE__ */ jsxs2("div", { className: "mt-2 flex items-center gap-2 text-xs text-muted-foreground", children: [
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          if (!disabled) onSetDefault(modelTier);
-        },
-        disabled,
-        className: cn(
-          "underline-offset-2 transition-colors",
-          disabled ? "cursor-default opacity-60" : "hover:text-foreground hover:underline focus:outline-none focus:text-foreground focus:underline"
-        ),
-        children: isCurrentDefault ? "\u2713 Saved as default" : "Save as default"
-      }
-    ),
-    defaultModel && !isCurrentDefault && /* @__PURE__ */ jsxs2("span", { className: "truncate", children: [
-      "(current default: ",
-      /* @__PURE__ */ jsx2("span", { className: "font-mono", children: defaultModel }),
-      ")"
-    ] })
-  ] });
-}
 
 // src/pages/pricing-page.tsx
 import * as React3 from "react";
@@ -1622,7 +1535,7 @@ import {
   DialogTitle
 } from "@tangle-network/ui/primitives";
 import { EmptyState } from "@tangle-network/ui/primitives";
-import { Input } from "@tangle-network/ui/primitives";
+import { Input as Input2 } from "@tangle-network/ui/primitives";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var TIER_LIMITS = {
   free: 3,
@@ -1715,7 +1628,7 @@ function ProfilesPage({
     /* @__PURE__ */ jsxs4("div", { className: "relative max-w-md", children: [
       /* @__PURE__ */ jsx4(Search, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
       /* @__PURE__ */ jsx4(
-        Input,
+        Input2,
         {
           placeholder: "Search profiles...",
           value: searchQuery,
@@ -1991,7 +1904,7 @@ function ProfileFormDialog({
       /* @__PURE__ */ jsxs4("div", { children: [
         /* @__PURE__ */ jsx4("label", { className: "mb-1 block font-medium text-sm", children: "Name *" }),
         /* @__PURE__ */ jsx4(
-          Input,
+          Input2,
           {
             value: formData.name,
             onChange: (e) => setFormData((d) => ({ ...d, name: e.target.value })),
@@ -2005,7 +1918,7 @@ function ProfileFormDialog({
       /* @__PURE__ */ jsxs4("div", { children: [
         /* @__PURE__ */ jsx4("label", { className: "mb-1 block font-medium text-sm", children: "Description" }),
         /* @__PURE__ */ jsx4(
-          Input,
+          Input2,
           {
             value: formData.description,
             onChange: (e) => setFormData((d) => ({ ...d, description: e.target.value })),
@@ -2035,7 +1948,7 @@ function ProfileFormDialog({
       /* @__PURE__ */ jsxs4("div", { children: [
         /* @__PURE__ */ jsx4("label", { className: "mb-1 block font-medium text-sm", children: "Model" }),
         /* @__PURE__ */ jsx4(
-          Input,
+          Input2,
           {
             value: formData.model,
             onChange: (e) => setFormData((d) => ({ ...d, model: e.target.value })),
@@ -2060,7 +1973,7 @@ function ProfileFormDialog({
       /* @__PURE__ */ jsxs4("div", { children: [
         /* @__PURE__ */ jsx4("label", { className: "mb-1 block font-medium text-sm", children: "Tags" }),
         /* @__PURE__ */ jsx4(
-          Input,
+          Input2,
           {
             value: formData.tags?.join(", "),
             onChange: (e) => setFormData((d) => ({
@@ -3665,7 +3578,6 @@ var CATEGORY_DEFAULTS = {
     cpuCores: 4,
     ramGB: 16,
     storageGB: 128,
-    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": {
@@ -3673,7 +3585,6 @@ var CATEGORY_DEFAULTS = {
     cpuCores: 8,
     ramGB: 32,
     storageGB: 256,
-    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: {
@@ -3681,7 +3592,6 @@ var CATEGORY_DEFAULTS = {
     cpuCores: 2,
     ramGB: 4,
     storageGB: 50,
-    systemPrompt: "You are a frontend development assistant. Help build modern, accessible, and performant user interfaces.",
     bare: false
   },
   infrastructure: {
@@ -3689,7 +3599,6 @@ var CATEGORY_DEFAULTS = {
     cpuCores: 4,
     ramGB: 16,
     storageGB: 128,
-    systemPrompt: "You are an infrastructure and DevOps assistant. Help with service configuration, deployment, monitoring, and operational best practices.",
     bare: false
   },
   general: {
@@ -3697,7 +3606,6 @@ var CATEGORY_DEFAULTS = {
     cpuCores: 4,
     ramGB: 16,
     storageGB: 128,
-    systemPrompt: "",
     bare: false
   }
 };