@tangle-network/sandbox-ui 0.21.0 → 0.21.1

package/dist/pages.js

@@ -8,6 +8,8 @@ import {
 import {
   Badge,
   Button,
+  Input,
+  Switch,
   Textarea
 } from "./chunk-7ZA5SEK3.js";
 import "./chunk-4KAPMTPU.js";
@@ -292,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",
@@ -723,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("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
@@ -767,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 ?? "");
@@ -800,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" }),
@@ -837,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",
@@ -878,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
@@ -910,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,
@@ -942,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",
@@ -958,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: [
@@ -975,37 +981,37 @@ function ProvisioningWizard({
               }
             ) })
           ] }) }),
-          (!isMultistep || currentStep === 2) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsx2("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__ */ jsx2("div", { className: "space-y-5", children: /* @__PURE__ */ jsxs2("div", { children: [
+          (!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-foreground/70 hover:text-foreground transition-colors text-sm font-bold focus:outline-none",
+                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-6 space-y-5 animate-in slide-in-from-top-4 fade-in duration-300", children: [
+            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: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Workspace Name" }),
+                  /* @__PURE__ */ jsx2("label", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Workspace Name" }),
                   /* @__PURE__ */ jsx2(
-                    "input",
+                    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",
+                      className: "h-9 px-3 text-sm",
                       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__ */ jsx2("label", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Virtualization Driver" }),
                   /* @__PURE__ */ jsxs2(
                     "select",
                     {
@@ -1016,7 +1022,7 @@ function ProvisioningWizard({
                             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",
+                      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(
@@ -1034,21 +1040,21 @@ function ProvisioningWizard({
                 ] })
               ] }),
               /* @__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("label", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Git Repository URL" }),
                 /* @__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",
+                    className: "h-9 px-3 text-sm",
                     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("div", { className: "flex justify-between items-center mb-1.5", children: [
+                  /* @__PURE__ */ jsx2("label", { className: FIELD_LABEL_CLASS, children: "Environment Variables" }),
                   /* @__PURE__ */ jsxs2(
                     "button",
                     {
@@ -1057,7 +1063,7 @@ function ProvisioningWizard({
                         ...envVars,
                         { key: "", value: "" }
                       ]),
-                      className: "flex items-center gap-1 text-xs text-primary hover:text-primary/70 transition-colors font-bold",
+                      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"
@@ -1068,7 +1074,7 @@ function ProvisioningWizard({
                 /* @__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: env.key,
@@ -1077,12 +1083,12 @@ function ProvisioningWizard({
                             (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",
+                        className: "flex-1 h-9 px-3 font-mono text-sm",
                         placeholder: "API_KEY"
                       }
                     ),
                     /* @__PURE__ */ jsx2(
-                      "input",
+                      Input,
                       {
                         type: "password",
                         value: env.value,
@@ -1091,27 +1097,29 @@ function ProvisioningWizard({
                             (v, idx) => idx === i ? { ...v, value: e.target.value } : v
                           )
                         ),
-                        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",
+                        className: "flex-[2] h-9 px-3 font-mono text-sm",
                         placeholder: "sk-xxxxxxxxxxx"
                       }
                     ),
                     /* @__PURE__ */ jsx2(
-                      "button",
+                      Button,
                       {
                         type: "button",
+                        variant: "outline",
+                        size: "icon",
                         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",
+                        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 bg-card border border-border rounded-xl text-muted-foreground/60 text-sm italic", children: "No environment variables set" })
+                  envVars.length === 0 && /* @__PURE__ */ jsx2("div", { className: "text-center p-3 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: "text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Startup Scripts" }),
+                /* @__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
@@ -1178,46 +1186,49 @@ function ProvisioningWizard({
                   );
                 }) })
               ] }),
-              /* @__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__ */ jsxs2("div", { className: "pt-3 border-t border-border flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs2("div", { children: [
                   /* @__PURE__ */ jsx2(
-                    "input",
+                    "label",
                     {
-                      type: "checkbox",
-                      className: "sr-only peer",
-                      checked: bare,
-                      onChange: (e) => setBare(e.target.checked)
+                      htmlFor: "wizard-bare-mode",
+                      className: "block text-sm font-medium text-foreground cursor-pointer",
+                      children: "Bare Mode"
                     }
                   ),
-                  /* @__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__ */ jsx2("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Start as a raw container without an embedded AI Agent backend." })
                 ] }),
-                /* @__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." })
-                ] })
-              ] }) })
+                /* @__PURE__ */ jsx2(
+                  Switch,
+                  {
+                    id: "wizard-bare-mode",
+                    checked: bare,
+                    onCheckedChange: setBare,
+                    className: "mt-0.5"
+                  }
+                )
+              ] })
             ] })
-          ] }) }) }) }),
-          sshAccess && (!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(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",
@@ -1226,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"
@@ -1239,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"
@@ -1249,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: [
                   "$",
@@ -1264,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: [
                 "$",
@@ -1275,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: [
                 "$",
@@ -1283,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: [
                 "$",
@@ -1291,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: [
                 "$",
@@ -1303,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,
-              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",
+              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..."
@@ -1333,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,
-            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",
+            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..."
@@ -1523,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,
@@ -1616,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,
@@ -1892,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 })),
@@ -1906,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 })),
@@ -1936,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 })),
@@ -1961,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) => ({