@tangle-network/sandbox-ui 0.10.2 → 0.10.4

package/dist/pages.js

@@ -298,16 +298,65 @@ function BillingPage({
 
 // src/pages/provisioning-wizard.tsx
 import * as React2 from "react";
-import { ArrowLeft, Layers, Cpu, Bot, Info, Loader2, Settings, Plus, Trash2, Check } from "lucide-react";
+import {
+  ArrowLeft,
+  Layers,
+  Cpu,
+  Bot,
+  Info,
+  Loader2,
+  Settings,
+  Plus,
+  Trash2,
+  Check
+} from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var VALID_DRIVERS = /* @__PURE__ */ new Set(["docker", "firecracker", "tangle"]);
+var VALID_DRIVERS = /* @__PURE__ */ new Set([
+  "docker",
+  "firecracker",
+  "tangle"
+]);
+var DEFAULT_MODEL_OPTIONS = [
+  { value: "claude-sonnet", label: "Claude Sonnet 4.6 (Highly Capable)" }
+];
+var DEFAULT_MODEL_TIER = DEFAULT_MODEL_OPTIONS[0]?.value ?? "claude-sonnet";
 var STACK_DISPLAY = {
-  universal: { name: "Default", abbr: "D", color: "violet", textClass: "text-[var(--surface-violet-text)]" },
-  ethereum: { name: "Ethereum", abbr: "\u039E", color: "blue", textClass: "text-[var(--surface-info-text)]" },
-  solana: { name: "Solana", abbr: "S", color: "green", textClass: "text-[var(--surface-success-text)]" },
-  tangle: { name: "Tangle", abbr: "T", color: "purple", textClass: "text-[var(--surface-violet-text)]" },
-  "ai-sdk": { name: "AI SDK", abbr: "AI", color: "teal", textClass: "text-[var(--surface-teal-text)]" },
-  rust: { name: "Rust", abbr: "Rs", color: "orange", textClass: "text-[var(--surface-orange-text)]" }
+  universal: {
+    name: "Default",
+    abbr: "D",
+    color: "violet",
+    textClass: "text-[var(--surface-violet-text)]"
+  },
+  ethereum: {
+    name: "Ethereum",
+    abbr: "\u039E",
+    color: "blue",
+    textClass: "text-[var(--surface-info-text)]"
+  },
+  solana: {
+    name: "Solana",
+    abbr: "S",
+    color: "green",
+    textClass: "text-[var(--surface-success-text)]"
+  },
+  tangle: {
+    name: "Tangle",
+    abbr: "T",
+    color: "purple",
+    textClass: "text-[var(--surface-violet-text)]"
+  },
+  "ai-sdk": {
+    name: "AI SDK",
+    abbr: "AI",
+    color: "teal",
+    textClass: "text-[var(--surface-teal-text)]"
+  },
+  rust: {
+    name: "Rust",
+    abbr: "Rs",
+    color: "orange",
+    textClass: "text-[var(--surface-orange-text)]"
+  }
 };
 function resolveEnvironment(env) {
   if (env.id.startsWith("template:")) {
@@ -334,9 +383,27 @@ function resolveEnvironment(env) {
   };
 }
 var defaultEnvironments = [
-  { id: "node", name: "Node.js", description: "v20.x LTS with optimized runtime for asynchronous event-driven agents.", icon: /* @__PURE__ */ jsx2("span", { className: "text-[var(--code-success)] text-2xl font-bold", children: "N" }), color: "green" },
-  { id: "python", name: "Python", description: "v3.11 pre-installed with PyTorch and common data science libraries.", icon: /* @__PURE__ */ jsx2("span", { className: "text-sky-400 text-2xl font-bold", children: "Py" }), color: "blue" },
-  { id: "ubuntu", name: "Ubuntu", description: "Full 22.04 LTS terminal access for custom containerized workloads.", icon: /* @__PURE__ */ jsx2("span", { className: "text-orange-400 text-2xl font-bold", children: "U" }), color: "orange" }
+  {
+    id: "node",
+    name: "Node.js",
+    description: "v20.x LTS with optimized runtime for asynchronous event-driven agents.",
+    icon: /* @__PURE__ */ jsx2("span", { className: "text-[var(--code-success)] text-2xl font-bold", children: "N" }),
+    color: "green"
+  },
+  {
+    id: "python",
+    name: "Python",
+    description: "v3.11 pre-installed with PyTorch and common data science libraries.",
+    icon: /* @__PURE__ */ jsx2("span", { className: "text-sky-400 text-2xl font-bold", children: "Py" }),
+    color: "blue"
+  },
+  {
+    id: "ubuntu",
+    name: "Ubuntu",
+    description: "Full 22.04 LTS terminal access for custom containerized workloads.",
+    icon: /* @__PURE__ */ jsx2("span", { className: "text-orange-400 text-2xl font-bold", children: "U" }),
+    color: "orange"
+  }
 ];
 var CPU_MIN = 0.5;
 var CPU_MAX = 8;
@@ -344,9 +411,35 @@ var RAM_MIN = 2;
 var RAM_MAX = 32;
 var STORAGE_MIN = 20;
 var STORAGE_MAX = 512;
-function calcCost(cpu, ram, storage) {
-  const cost = cpu * 0.045 + ram * 5e-3 + storage * 11e-4;
-  return cost.toFixed(2);
+var DEFAULT_PRICING_RATES = {
+  cpuPerHr: 0.045,
+  ramPerGbHr: 5e-3,
+  diskPerGbHr: 11e-4,
+  minChargePerHr: void 0
+};
+function formatPerSecondValue(hourlyValue) {
+  return (hourlyValue / 3600).toFixed(8);
+}
+var RAW_PRESETS = [
+  { name: "Lightweight", cpu: 2, ram: 4, storage: 50 },
+  { name: "Standard", cpu: 4, ram: 16, storage: 128 },
+  { name: "Performance", cpu: 8, ram: 32, storage: 256 }
+];
+function computeHourlyCost(cpu, ram, storage, rates) {
+  const compute = cpu * rates.cpuPerHr;
+  const memory = ram * rates.ramPerGbHr;
+  const storageCost = storage * rates.diskPerGbHr;
+  const lineSum = compute + memory + storageCost;
+  const floor = rates.minChargePerHr ?? 0;
+  return {
+    compute,
+    memory,
+    storage: storageCost,
+    lineSum,
+    floor,
+    floorApplies: floor > lineSum,
+    total: Math.max(floor, lineSum)
+  };
 }
 function ProvisioningWizard({
   environments: environmentsProp,
@@ -359,13 +452,27 @@ function ProvisioningWizard({
   defaultConfig,
   skipToReview,
   onLoadStartupScripts,
-  resourceLimits
+  resourceLimits,
+  modelOptions,
+  pricingRates,
+  planTiers
 }) {
-  const cpuMax = Math.max(CPU_MIN, Math.min(resourceLimits?.cpuMax ?? CPU_MAX, CPU_MAX));
-  const ramMax = Math.max(RAM_MIN, Math.min(resourceLimits?.ramMaxGB ?? RAM_MAX, RAM_MAX));
-  const storageMax = Math.max(STORAGE_MIN, Math.min(resourceLimits?.storageMaxGB ?? STORAGE_MAX, STORAGE_MAX));
+  const cpuMax = Math.max(
+    CPU_MIN,
+    Math.min(resourceLimits?.cpuMax ?? CPU_MAX, CPU_MAX)
+  );
+  const ramMax = Math.max(
+    RAM_MIN,
+    Math.min(resourceLimits?.ramMaxGB ?? RAM_MAX, RAM_MAX)
+  );
+  const storageMax = Math.max(
+    STORAGE_MIN,
+    Math.min(resourceLimits?.storageMaxGB ?? STORAGE_MAX, STORAGE_MAX)
+  );
   const dc = defaultConfig;
-  const [envList, setEnvList] = React2.useState(environmentsProp ?? defaultEnvironments);
+  const [envList, setEnvList] = React2.useState(
+    environmentsProp ?? defaultEnvironments
+  );
   const onLoadEnvironmentsRef = React2.useRef(onLoadEnvironments);
   onLoadEnvironmentsRef.current = onLoadEnvironments;
   React2.useEffect(() => {
@@ -374,7 +481,10 @@ function ProvisioningWizard({
       onLoadEnvironmentsRef.current().then((entries) => {
         if (!cancelled) setEnvList(entries.map(resolveEnvironment));
       }).catch((err) => {
-        if (!cancelled) setLoadError(err instanceof Error ? err.message : "Failed to load environments");
+        if (!cancelled)
+          setLoadError(
+            err instanceof Error ? err.message : "Failed to load environments"
+          );
       });
     } else if (environmentsProp) {
       setEnvList(environmentsProp);
@@ -385,30 +495,54 @@ function ProvisioningWizard({
   }, [environmentsProp]);
   const environments = envList;
   const effectiveDefault = dc?.environment ?? defaultEnvironment;
-  const [selectedEnv, setSelectedEnv] = React2.useState(effectiveDefault ?? environments[0]?.id ?? "");
+  const [selectedEnv, setSelectedEnv] = React2.useState(
+    effectiveDefault ?? environments[0]?.id ?? ""
+  );
   React2.useEffect(() => {
     if (effectiveDefault && envList.some((e) => e.id === effectiveDefault)) {
       setSelectedEnv(effectiveDefault);
     }
   }, [envList, effectiveDefault]);
-  const [cpuCores, setCpuCores] = React2.useState(Math.min(dc?.cpuCores ?? 4, cpuMax));
+  const [cpuCores, setCpuCores] = React2.useState(
+    Math.min(dc?.cpuCores ?? 4, cpuMax)
+  );
   const [ramGB, setRamGB] = React2.useState(Math.min(dc?.ramGB ?? 16, ramMax));
-  const [storageGB, setStorageGB] = React2.useState(Math.min(dc?.storageGB ?? 128, storageMax));
+  const [storageGB, setStorageGB] = React2.useState(
+    Math.min(dc?.storageGB ?? 128, storageMax)
+  );
   React2.useEffect(() => {
     setCpuCores((prev) => Math.min(prev, cpuMax));
     setRamGB((prev) => Math.min(prev, ramMax));
     setStorageGB((prev) => Math.min(prev, storageMax));
   }, [cpuMax, ramMax, storageMax]);
-  const [modelTier, setModelTier] = React2.useState(dc?.modelTier ?? "claude-sonnet");
-  const [systemPrompt, setSystemPrompt] = React2.useState(dc?.systemPrompt ?? "");
+  const [modelTier, setModelTier] = React2.useState(
+    dc?.modelTier ?? DEFAULT_MODEL_TIER
+  );
+  const [systemPrompt, setSystemPrompt] = React2.useState(
+    dc?.systemPrompt ?? ""
+  );
+  React2.useEffect(() => {
+    const options = modelOptions ?? DEFAULT_MODEL_OPTIONS;
+    if (options.length === 0) return;
+    const currentOption = options.find((o) => o.value === modelTier);
+    if (!currentOption || currentOption.disabled) {
+      const firstAvailable = options.find((o) => !o.disabled);
+      if (firstAvailable && firstAvailable.value !== modelTier) {
+        setModelTier(firstAvailable.value);
+      }
+    }
+  }, [modelOptions, modelTier]);
   const [name, setName] = React2.useState(dc?.name ?? "");
   const [gitUrl, setGitUrl] = React2.useState(dc?.gitUrl ?? "");
   const [envVars, setEnvVars] = React2.useState(dc?.envVars ?? [{ key: "", value: "" }]);
   const [driver, setDriver] = React2.useState(dc?.driver ?? "docker");
   const [bare, setBare] = React2.useState(dc?.bare ?? false);
-  const [startupScriptIds, setStartupScriptIds] = React2.useState(dc?.startupScriptIds ?? []);
+  const [startupScriptIds, setStartupScriptIds] = React2.useState(
+    dc?.startupScriptIds ?? []
+  );
   const [availableScripts, setAvailableScripts] = React2.useState([]);
   const [activePreset, setActivePreset] = React2.useState(null);
+  const [pricingView, setPricingView] = React2.useState("hourly");
   const [showAdvanced, setShowAdvanced] = React2.useState(false);
   const [loadError, setLoadError] = React2.useState(null);
   const onLoadStartupScriptsRef = React2.useRef(onLoadStartupScripts);
@@ -419,7 +553,10 @@ function ProvisioningWizard({
       onLoadStartupScriptsRef.current().then((scripts) => {
         if (!cancelled) setAvailableScripts(scripts);
       }).catch((err) => {
-        if (!cancelled) setLoadError(err instanceof Error ? err.message : "Failed to load startup scripts");
+        if (!cancelled)
+          setLoadError(
+            err instanceof Error ? err.message : "Failed to load startup scripts"
+          );
       });
     }
     return () => {
@@ -427,7 +564,9 @@ function ProvisioningWizard({
     };
   }, []);
   const isMultistep = variant === "multistep";
-  const [currentStep, setCurrentStep] = React2.useState(skipToReview && dc && isMultistep ? 3 : 1);
+  const [currentStep, setCurrentStep] = React2.useState(
+    skipToReview && dc && isMultistep ? 3 : 1
+  );
   const [isDeploying, setIsDeploying] = React2.useState(false);
   const [deployError, setDeployError] = React2.useState(null);
   const handleDeploy = async () => {
@@ -435,8 +574,25 @@ function ProvisioningWizard({
     setIsDeploying(true);
     setDeployError(null);
     try {
-      const validScriptIds = new Set(availableScripts.filter((s) => s.enabled).map((s) => s.id));
-      await onSubmit({ environment: selectedEnv, cpuCores, ramGB, storageGB, modelTier, systemPrompt, name, gitUrl, envVars: envVars.filter((e) => e.key.trim() !== ""), driver, bare, startupScriptIds: startupScriptIds.filter((id) => validScriptIds.has(id)) });
+      const validScriptIds = new Set(
+        availableScripts.filter((s) => s.enabled).map((s) => s.id)
+      );
+      await onSubmit({
+        environment: selectedEnv,
+        cpuCores,
+        ramGB,
+        storageGB,
+        modelTier,
+        systemPrompt,
+        name,
+        gitUrl,
+        envVars: envVars.filter((e) => e.key.trim() !== ""),
+        driver,
+        bare,
+        startupScriptIds: startupScriptIds.filter(
+          (id) => validScriptIds.has(id)
+        )
+      });
     } catch (err) {
       setDeployError(err instanceof Error ? err.message : "Deployment failed");
     } finally {
@@ -449,15 +605,73 @@ function ProvisioningWizard({
     setStorageGB(Math.min(storage, storageMax));
     setActivePreset(name2);
   };
-  const presets = [
-    { name: "Lightweight", cpu: Math.min(2, cpuMax), ram: Math.min(4, ramMax), storage: Math.min(50, storageMax) },
-    { name: "Standard", cpu: Math.min(4, cpuMax), ram: Math.min(16, ramMax), storage: Math.min(128, storageMax) },
-    { name: "Performance", cpu: Math.min(8, cpuMax), ram: Math.min(32, ramMax), storage: Math.min(256, storageMax) }
-  ];
-  const hourCost = calcCost(cpuCores, ramGB, storageGB);
+  const presets = RAW_PRESETS.map((p) => {
+    const locked = p.cpu > cpuMax || p.ram > ramMax || p.storage > storageMax;
+    let unlockLabel;
+    if (locked && planTiers && planTiers.length > 0) {
+      const unlocking = planTiers.find(
+        (t) => p.cpu <= t.cpuMax && p.ram <= t.ramMaxGB && p.storage <= t.storageMaxGB
+      );
+      unlockLabel = unlocking?.label;
+    }
+    return {
+      ...p,
+      fits: !locked,
+      locked,
+      unlockLabel: unlockLabel ?? "Pro"
+    };
+  });
+  const didInitPresetFromDcRef = React2.useRef(false);
+  const lastLimitsRef = React2.useRef(null);
+  React2.useEffect(() => {
+    const limitsUnchanged = lastLimitsRef.current !== null && lastLimitsRef.current.cpu === cpuMax && lastLimitsRef.current.ram === ramMax && lastLimitsRef.current.storage === storageMax;
+    if (limitsUnchanged) return;
+    lastLimitsRef.current = { cpu: cpuMax, ram: ramMax, storage: storageMax };
+    if (dc && !didInitPresetFromDcRef.current) {
+      didInitPresetFromDcRef.current = true;
+      const matching = RAW_PRESETS.find(
+        (p) => p.cpu === dc.cpuCores && p.ram === dc.ramGB && p.storage === dc.storageGB
+      );
+      if (matching) setActivePreset(matching.name);
+      return;
+    }
+    const largestFitting = [...RAW_PRESETS].reverse().find(
+      (p) => p.cpu <= cpuMax && p.ram <= ramMax && p.storage <= storageMax
+    );
+    if (largestFitting) {
+      applyPreset(
+        largestFitting.name,
+        largestFitting.cpu,
+        largestFitting.ram,
+        largestFitting.storage
+      );
+    } else {
+      setActivePreset(null);
+    }
+  }, [cpuMax, ramMax, storageMax, dc]);
+  const effectivePricingRates = pricingRates ?? DEFAULT_PRICING_RATES;
+  const hourlyCostBreakdown = computeHourlyCost(
+    cpuCores,
+    ramGB,
+    storageGB,
+    effectivePricingRates
+  );
+  const hourCost = hourlyCostBreakdown.total.toFixed(2);
+  const displayValue = pricingView === "hourly" ? hourCost : formatPerSecondValue(hourlyCostBreakdown.total);
+  const pricingSuffix = pricingView === "hourly" ? "/ hour" : "/ sec";
+  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: [
-      onBack && /* @__PURE__ */ jsx2("button", { type: "button", onClick: onBack, className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border hover:bg-muted/50 transition-colors text-foreground", children: /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-5 w-5" }) }),
+      onBack && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border hover:bg-muted/50 transition-colors text-foreground",
+          children: /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-5 w-5" })
+        }
+      ),
       /* @__PURE__ */ jsxs2("div", { children: [
         /* @__PURE__ */ jsx2("h1", { className: "text-3xl font-extrabold tracking-tight text-foreground mb-1", children: "Sandbox Provisioning" }),
         /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: "Select your stack, allocate resources, and configure your agent." })
@@ -466,16 +680,39 @@ function ProvisioningWizard({
     /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-12 gap-6 flex-1 min-h-0", children: [
       /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-8 flex flex-col min-h-0", children: [
         isMultistep && /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 mb-4 bg-card border border-border p-3 rounded-2xl mx-auto max-w-2xl justify-between shrink-0", children: [1, 2, 3].map((s) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx2("div", { className: cn(
-            "w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 transition-all duration-200",
-            currentStep === s ? "bg-primary text-primary-foreground ring-2 ring-primary/30 ring-offset-2 ring-offset-card shadow-sm" : currentStep > s ? "bg-primary text-primary-foreground" : "bg-muted border border-border text-muted-foreground"
-          ), children: currentStep > s ? /* @__PURE__ */ jsx2(Check, { className: "h-3.5 w-3.5" }) : s }),
-          /* @__PURE__ */ jsxs2("span", { className: cn("ml-2 sm:ml-3 font-bold text-sm tracking-tight hidden sm:inline transition-colors duration-200", currentStep === s ? "text-foreground" : currentStep > s ? "text-primary" : "text-muted-foreground"), children: [
-            s === 1 && "Environment",
-            s === 2 && "Resources",
-            s === 3 && "AI Agent"
-          ] }),
-          s < 3 && /* @__PURE__ */ jsx2("div", { className: cn("w-4 sm:w-8 h-0.5 mx-2 sm:mx-4 rounded-full transition-colors duration-300", currentStep > s ? "bg-primary" : "bg-border") })
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn(
+                "w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 transition-all duration-200",
+                currentStep === s ? "bg-primary text-primary-foreground ring-2 ring-primary/30 ring-offset-2 ring-offset-card shadow-sm" : currentStep > s ? "bg-primary text-primary-foreground" : "bg-muted border border-border text-muted-foreground"
+              ),
+              children: currentStep > s ? /* @__PURE__ */ jsx2(Check, { className: "h-3.5 w-3.5" }) : s
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "span",
+            {
+              className: cn(
+                "ml-2 sm:ml-3 font-bold text-sm tracking-tight hidden sm:inline transition-colors duration-200",
+                currentStep === s ? "text-foreground" : currentStep > s ? "text-primary" : "text-muted-foreground"
+              ),
+              children: [
+                s === 1 && "Environment",
+                s === 2 && "Resources",
+                s === 3 && "AI Agent"
+              ]
+            }
+          ),
+          s < 3 && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn(
+                "w-4 sm:w-8 h-0.5 mx-2 sm:mx-4 rounded-full transition-colors duration-300",
+                currentStep > s ? "bg-primary" : "bg-border"
+              )
+            }
+          )
         ] }, s)) }),
         dc && isMultistep && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between bg-card border border-border rounded-2xl px-4 py-3 shrink-0", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm", children: [
@@ -492,7 +729,11 @@ function ProvisioningWizard({
                 setCpuCores(Math.min(4, cpuMax));
                 setRamGB(Math.min(16, ramMax));
                 setStorageGB(Math.min(128, storageMax));
-                setModelTier("claude-sonnet");
+                const resetOptions = modelOptions ?? DEFAULT_MODEL_OPTIONS;
+                const firstAvailable = resetOptions.find(
+                  (o) => !o.disabled
+                );
+                setModelTier(firstAvailable?.value ?? DEFAULT_MODEL_TIER);
                 setSystemPrompt("");
                 setName("");
                 setGitUrl("");
@@ -501,6 +742,7 @@ function ProvisioningWizard({
                 setBare(false);
                 setStartupScriptIds([]);
                 setActivePreset(null);
+                setPricingView("hourly");
               },
               className: "text-xs font-bold text-primary hover:text-primary/70 transition-colors",
               children: "Start from scratch"
@@ -530,10 +772,16 @@ function ProvisioningWizard({
                   selectedEnv === env.id && /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/8 to-transparent pointer-events-none" }),
                   /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-start mb-3 relative z-10", children: [
                     /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-full flex items-center justify-center bg-muted/50 border border-border shadow-inner", children: env.icon }),
-                    /* @__PURE__ */ jsx2("div", { className: cn(
-                      "w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200",
-                      selectedEnv === env.id ? "border-primary bg-primary" : "border-border group-hover:border-primary/40"
-                    ), children: selectedEnv === env.id && /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3 text-primary-foreground animate-in zoom-in duration-200" }) })
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        className: cn(
+                          "w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200",
+                          selectedEnv === env.id ? "border-primary bg-primary" : "border-border group-hover:border-primary/40"
+                        ),
+                        children: selectedEnv === env.id && /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3 text-primary-foreground animate-in zoom-in duration-200" })
+                      }
+                    )
                   ] }),
                   /* @__PURE__ */ jsx2("h3", { className: "font-bold text-sm mb-0.5 text-foreground relative z-10", children: env.name }),
                   /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground leading-relaxed relative z-10", children: env.description })
@@ -550,59 +798,110 @@ function ProvisioningWizard({
             /* @__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) => {
-                const active = activePreset === p.name;
-                return /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(p.name, p.cpu, p.ram, p.storage), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", active ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", active ? "text-primary" : "text-foreground"), children: p.name }),
-                  /* @__PURE__ */ jsxs2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: [
-                    p.cpu,
-                    "C / ",
-                    p.ram,
-                    "G / ",
-                    p.storage,
-                    "G"
-                  ] })
-                ] }, p.name);
+                const active = activePreset === p.name && !p.locked;
+                return /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    type: "button",
+                    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]"
+                    ),
+                    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 }),
+                      /* @__PURE__ */ jsx2(
+                        "div",
+                        {
+                          className: cn(
+                            "font-bold text-sm transition-colors duration-200",
+                            active ? "text-primary" : p.locked ? "text-muted-foreground" : "text-foreground"
+                          ),
+                          children: p.name
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: [
+                        p.cpu,
+                        " vCPU",
+                        p.cpu === 1 ? "" : "s",
+                        " / ",
+                        p.ram,
+                        "GB /",
+                        " ",
+                        p.storage,
+                        "GB"
+                      ] })
+                    ]
+                  },
+                  p.name
+                );
               }) })
             ] }),
             /* @__PURE__ */ jsx2("div", { className: "space-y-6", children: [
-              { label: "Compute Cores (CPU)", value: cpuCores, setter: setCpuCores, min: CPU_MIN, max: cpuMax, step: 0.5, unit: "vCPUs" },
-              { label: "Memory (RAM)", value: ramGB, setter: setRamGB, min: RAM_MIN, max: ramMax, step: 1, unit: "GB" },
-              { label: "Ephemeral Storage", value: storageGB, setter: setStorageGB, min: STORAGE_MIN, max: storageMax, step: 8, unit: "GB" }
-            ].map(({ label, value, setter, min, max, step: s, unit }) => /* @__PURE__ */ jsxs2("div", { children: [
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end border-b border-border pb-1.5 mb-2", children: [
-                /* @__PURE__ */ jsx2("label", { className: "font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: label }),
-                /* @__PURE__ */ jsxs2("span", { className: "text-xl font-bold text-foreground tracking-tight", children: [
-                  value,
-                  " ",
-                  /* @__PURE__ */ jsx2("span", { className: "text-xs text-primary ml-1", children: unit })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx2(
-                "input",
-                {
-                  type: "range",
-                  min,
-                  max,
-                  step: s,
-                  value,
-                  onChange: (e) => {
-                    setter(+e.target.value);
-                    setActivePreset(null);
-                  },
-                  className: "w-full h-2 rounded-full appearance-none cursor-pointer accent-primary [&::-webkit-slider-runnable-track]:bg-border [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:bg-border [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-2 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-foreground [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110"
-                }
-              ),
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground/60 mt-1", children: [
-                /* @__PURE__ */ jsxs2("span", { children: [
-                  min,
-                  unit
-                ] }),
-                /* @__PURE__ */ jsxs2("span", { children: [
-                  max,
-                  unit
-                ] })
-              ] })
-            ] }, label)) })
+              {
+                label: "Compute Cores (CPU)",
+                value: cpuCores,
+                setter: setCpuCores,
+                min: CPU_MIN,
+                max: cpuMax,
+                step: 0.5,
+                unit: "vCPU"
+              },
+              {
+                label: "Memory (RAM)",
+                value: ramGB,
+                setter: setRamGB,
+                min: RAM_MIN,
+                max: ramMax,
+                step: 1,
+                unit: "GB"
+              },
+              {
+                label: "Ephemeral Storage",
+                value: storageGB,
+                setter: setStorageGB,
+                min: STORAGE_MIN,
+                max: storageMax,
+                step: 8,
+                unit: "GB"
+              }
+            ].map(
+              ({ label, value, setter, min, max, step: s, unit }) => {
+                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__ */ jsx2(
+                    "input",
+                    {
+                      type: "range",
+                      min,
+                      max,
+                      step: s,
+                      value,
+                      onChange: (e) => {
+                        setter(+e.target.value);
+                        setActivePreset(null);
+                      },
+                      className: "w-full h-2 rounded-full appearance-none cursor-pointer accent-primary [&::-webkit-slider-runnable-track]:bg-border [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:bg-border [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-2 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-foreground [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground/60 mt-1", children: [
+                    /* @__PURE__ */ jsxs2("span", { children: [
+                      min,
+                      unit === "vCPU" ? min === 1 ? " vCPU" : " vCPUs" : unit
+                    ] }),
+                    /* @__PURE__ */ jsxs2("span", { children: [
+                      max,
+                      unit === "vCPU" ? max === 1 ? " vCPU" : " vCPUs" : unit
+                    ] })
+                  ] })
+                ] }, label);
+              }
+            ) })
           ] }) }),
           (!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: [
@@ -612,19 +911,28 @@ function ProvisioningWizard({
             /* @__PURE__ */ jsxs2("div", { className: "space-y-5", children: [
               /* @__PURE__ */ jsxs2("div", { children: [
                 /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Model Engine" }),
-                /* @__PURE__ */ jsxs2(
+                /* @__PURE__ */ jsx2(
                   "select",
                   {
                     value: modelTier,
                     onChange: (e) => setModelTier(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: "llama-3-8b", className: "bg-gray-900", children: "Llama-3-8B-Instruct (Lightweight)" }),
-                      /* @__PURE__ */ jsx2("option", { value: "mistral-7b", className: "bg-gray-900", children: "Mistral-7B-v0.2 (Efficient)" }),
-                      /* @__PURE__ */ jsx2("option", { value: "claude-sonnet", className: "bg-gray-900", children: "Claude Sonnet 4.6 (Highly Capable)" })
-                    ]
+                    disabled: modelOptions && modelOptions.filter((o) => !o.disabled).length === 0,
+                    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 disabled:opacity-50 disabled:cursor-not-allowed",
+                    children: (modelOptions ?? DEFAULT_MODEL_OPTIONS).map(
+                      (option) => /* @__PURE__ */ jsx2(
+                        "option",
+                        {
+                          value: option.value,
+                          disabled: option.disabled,
+                          className: "bg-gray-900",
+                          children: option.label
+                        },
+                        option.value
+                      )
+                    )
                   }
-                )
+                ),
+                modelOptions && modelOptions.length > 0 && modelOptions.every((o) => o.disabled) && /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground mt-2", children: "All model options are currently disabled. Please upgrade your plan or contact support." })
               ] }),
               /* @__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)" }),
@@ -675,12 +983,22 @@ function ProvisioningWizard({
                         {
                           value: driver,
                           onChange: (e) => {
-                            if (VALID_DRIVERS.has(e.target.value)) setDriver(e.target.value);
+                            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: "firecracker",
+                                className: "bg-gray-900",
+                                children: "Firecracker microVM (Secure)"
+                              }
+                            ),
                             /* @__PURE__ */ jsx2("option", { value: "tangle", className: "bg-gray-900", children: "Tangle Distributed Node" })
                           ]
                         }
@@ -703,10 +1021,21 @@ function ProvisioningWizard({
                   /* @__PURE__ */ jsxs2("div", { children: [
                     /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-2", children: [
                       /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Environment Variables" }),
-                      /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => setEnvVars([...envVars, { key: "", value: "" }]), className: "flex items-center gap-1 text-xs text-primary hover:text-primary/70 transition-colors font-bold", children: [
-                        /* @__PURE__ */ jsx2(Plus, { className: "h-3 w-3" }),
-                        " Add Var"
-                      ] })
+                      /* @__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: [
@@ -715,7 +1044,11 @@ function ProvisioningWizard({
                           {
                             type: "text",
                             value: env.key,
-                            onChange: (e) => setEnvVars(envVars.map((v, idx) => idx === i ? { ...v, key: e.target.value } : v)),
+                            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"
                           }
@@ -725,12 +1058,26 @@ function ProvisioningWizard({
                           {
                             type: "password",
                             value: env.value,
-                            onChange: (e) => setEnvVars(envVars.map((v, idx) => idx === i ? { ...v, value: e.target.value } : v)),
+                            onChange: (e) => setEnvVars(
+                              envVars.map(
+                                (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",
                             placeholder: "sk-xxxxxxxxxxx"
                           }
                         ),
-                        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setEnvVars(envVars.filter((_, idx) => idx !== i)), className: "h-10 w-10 flex items-center justify-center shrink-0 rounded-xl 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" }) })
+                        /* @__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" })
                     ] })
@@ -738,36 +1085,82 @@ function ProvisioningWizard({
                   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]
+                      const selected = startupScriptIds.includes(
+                        script.id
+                      );
+                      return /* @__PURE__ */ jsxs2(
+                        "label",
+                        {
+                          className: "flex items-start gap-3 cursor-pointer group rounded-lg border border-border p-3 transition-colors hover:border-primary/30",
+                          children: [
+                            /* @__PURE__ */ jsx2(
+                              "input",
+                              {
+                                type: "checkbox",
+                                checked: selected,
+                                onChange: () => setStartupScriptIds(
+                                  (prev) => selected ? prev.filter(
+                                    (id) => id !== script.id
+                                  ) : [...prev, script.id]
+                                ),
+                                className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary/30"
+                              }
                             ),
-                            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__ */ 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(
+                        "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: [
@@ -782,93 +1175,97 @@ function ProvisioningWizard({
         ] })
       ] }),
       /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-4 sticky top-4 space-y-4", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "bg-card border border-primary/15 rounded-[24px] overflow-hidden shadow-2xl relative", children: [
-          /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(173,163,255,0.05)_0,transparent_100%)] pointer-events-none" }),
-          /* @__PURE__ */ jsxs2("div", { className: "bg-muted/50 border-b border-border px-4 py-3 flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsx2("div", { className: "h-3 w-3 rounded-full bg-[#ff5f56]/80" }),
-              /* @__PURE__ */ jsx2("div", { className: "h-3 w-3 rounded-full bg-[#ffbd2e]/80" }),
-              /* @__PURE__ */ jsx2("div", { className: "h-3 w-3 rounded-full bg-[#27c93f]/80" })
-            ] }),
-            /* @__PURE__ */ jsx2("div", { className: "font-mono text-[10px] text-muted-foreground uppercase tracking-widest ml-2 border-l border-border pl-3", children: "deploy_sequence.sh" })
-          ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "p-5 font-mono text-xs space-y-3 min-h-[240px] relative z-10 text-[13px]", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "text-green-400", children: [
-              "root@tangle:~# ",
-              /* @__PURE__ */ jsx2("span", { className: "text-foreground/80", children: "tangle-cli provision --new" })
-            ] }),
-            /* @__PURE__ */ jsx2("div", { className: "text-muted-foreground/70", children: "Initializing deployment handshake..." }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
-              " Bound Platform: ",
-              /* @__PURE__ */ jsx2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: environments.find((e) => e.id === selectedEnv)?.name ?? "Node.js" }, `env-${selectedEnv}`)
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
-              " Allocation CPU: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: [
-                cpuCores,
-                " Cores"
-              ] }, `cpu-${cpuCores}`)
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
-              " Allocation RAM: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: [
-                ramGB,
-                "GB"
-              ] }, `ram-${ramGB}`)
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
-              " Mounted Storage: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: [
-                storageGB,
-                "GB NVMe"
-              ] }, `disk-${storageGB}`)
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "pt-3 flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx2("div", { className: "w-2 h-4 bg-primary animate-pulse" }),
-              /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "Awaiting user confirmation..." })
-            ] })
-          ] })
-        ] }),
         /* @__PURE__ */ jsxs2("div", { className: "p-6 rounded-[24px] bg-card border border-primary/15 relative overflow-hidden", children: [
           /* @__PURE__ */ jsx2("div", { className: "hidden" }),
           /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-4 relative z-10", children: [
             /* @__PURE__ */ jsx2("span", { className: "font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Run Cost" }),
-            /* @__PURE__ */ jsx2("div", { className: "h-7 w-7 rounded-full bg-muted/30 flex items-center justify-center border border-border", children: /* @__PURE__ */ jsx2(Info, { className: "h-3.5 w-3.5 text-primary" }) })
+            /* @__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",
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-pressed": pricingView === "hourly",
+                      onClick: () => setPricingView("hourly"),
+                      className: cn(
+                        "rounded-full px-2.5 py-0.5 text-[10px] font-bold transition-all",
+                        pricingView === "hourly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                      ),
+                      children: "Per Hour"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-pressed": pricingView === "perSecond",
+                      onClick: () => setPricingView("perSecond"),
+                      className: cn(
+                        "rounded-full px-2.5 py-0.5 text-[10px] font-bold transition-all",
+                        pricingView === "perSecond" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                      ),
+                      children: "Per Second"
+                    }
+                  )
+                ]
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2 mb-5 relative z-10", children: [
-            /* @__PURE__ */ jsxs2("span", { className: "text-4xl font-black text-foreground tracking-tighter animate-in fade-in duration-200", children: [
-              "$",
-              hourCost
-            ] }, hourCost),
-            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-bold", children: "/ hour" })
+            /* @__PURE__ */ jsxs2(
+              "span",
+              {
+                className: cn(
+                  "font-black text-foreground tracking-tighter animate-in fade-in duration-200",
+                  pricingView === "hourly" ? "text-4xl" : "text-2xl"
+                ),
+                children: [
+                  "$",
+                  displayValue
+                ]
+              },
+              pricingView
+            ),
+            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-bold", 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__ */ jsx2("span", { children: "COMPUTE" }),
               /* @__PURE__ */ jsxs2("span", { className: "text-foreground", children: [
                 "$",
-                (cpuCores * 0.045).toFixed(2),
-                "/h"
+                fmtRate(hourlyCostBreakdown.compute),
+                rateSuffix
               ] })
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
               /* @__PURE__ */ jsx2("span", { children: "MEMORY" }),
               /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
                 "$",
-                (ramGB * 5e-3).toFixed(2),
-                "/h"
+                fmtRate(hourlyCostBreakdown.memory),
+                rateSuffix
               ] })
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
               /* @__PURE__ */ jsx2("span", { children: "STORAGE" }),
               /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
                 "$",
-                (storageGB * 11e-4).toFixed(2),
-                "/h"
+                fmtRate(hourlyCostBreakdown.storage),
+                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: [
+              /* @__PURE__ */ jsx2("span", { children: "MIN CHARGE" }),
+              /* @__PURE__ */ jsxs2("span", { children: [
+                "$",
+                fmtRate(
+                  hourlyCostBreakdown.floor - hourlyCostBreakdown.lineSum
+                ),
+                rateSuffix
               ] })
             ] })
           ] })
@@ -885,7 +1282,8 @@ function ProvisioningWizard({
               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",
               children: [
-                "Continue to ",
+                "Continue to",
+                " ",
                 currentStep === 1 ? "Resources" : "Agent Config"
               ]
             }
@@ -1839,46 +2237,64 @@ function SecretsPage({ apiClient, className }) {
         /* @__PURE__ */ jsx5(DialogTitle, { children: "Create Secret" }),
         /* @__PURE__ */ jsx5(DialogDescription, { children: "Secrets are automatically exposed as environment variables across all your new sandboxes." })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs5("div", { children: [
-          /* @__PURE__ */ jsx5("label", { className: "block text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Name" }),
-          /* @__PURE__ */ jsx5(
-            "input",
-            {
-              type: "text",
-              value: newName,
-              onChange: (e) => setNewName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")),
-              placeholder: "MY_SECRET_KEY",
-              className: "w-full rounded-md border border-border bg-card px-3 py-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs5("div", { children: [
-          /* @__PURE__ */ jsx5("label", { className: "block text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Value" }),
-          /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx5(
-              "input",
-              {
-                type: showValue ? "text" : "password",
-                value: newValue,
-                onChange: (e) => setNewValue(e.target.value),
-                placeholder: "Enter secret value...",
-                className: "w-full rounded-md border border-border bg-card px-3 py-2.5 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              "button",
-              {
-                type: "button",
-                onClick: () => setShowValue(!showValue),
-                className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground",
-                children: showValue ? /* @__PURE__ */ jsx5(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(Eye, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx5("p", { className: "mt-1.5 text-xs text-muted-foreground", children: "This value cannot be retrieved after creation." })
-        ] })
-      ] }),
+      /* @__PURE__ */ jsxs5(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            if (newName.trim() && newValue.trim() && !isCreating) handleCreate();
+          },
+          className: "space-y-4",
+          children: [
+            /* @__PURE__ */ jsxs5("div", { children: [
+              /* @__PURE__ */ jsx5("label", { htmlFor: "secret-name", className: "block text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Name" }),
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  id: "secret-name",
+                  name: "secret-name",
+                  type: "text",
+                  value: newName,
+                  onChange: (e) => setNewName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")),
+                  placeholder: "MY_SECRET_KEY",
+                  autoComplete: "off",
+                  className: "w-full rounded-md border border-border bg-card px-3 py-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { children: [
+              /* @__PURE__ */ jsx5("label", { htmlFor: "secret-value", className: "block text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Value" }),
+              /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx5(
+                  "input",
+                  {
+                    id: "secret-value",
+                    name: "secret-value",
+                    type: showValue ? "text" : "password",
+                    value: newValue,
+                    onChange: (e) => setNewValue(e.target.value),
+                    placeholder: "Enter secret value...",
+                    autoComplete: "new-password",
+                    className: "w-full rounded-md border border-border bg-card px-3 py-2.5 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowValue(!showValue),
+                    className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground",
+                    "aria-label": showValue ? "Hide value" : "Show value",
+                    children: showValue ? /* @__PURE__ */ jsx5(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(Eye, { className: "h-4 w-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx5("p", { className: "mt-1.5 text-xs text-muted-foreground", children: "This value cannot be retrieved after creation." })
+            ] }),
+            /* @__PURE__ */ jsx5("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": "true", children: "Submit" })
+          ]
+        }
+      ),
       createError && /* @__PURE__ */ jsx5("p", { className: "mt-3 text-sm text-destructive", children: createError }),
       /* @__PURE__ */ jsxs5(DialogFooter, { children: [
         /* @__PURE__ */ jsx5(
@@ -1958,10 +2374,11 @@ function SecretsPage({ apiClient, className }) {
           {
             type: "button",
             onClick: () => setIsCreateOpen(true),
+            "aria-label": "Create your first secret",
             className: "mt-6 inline-flex items-center gap-2 rounded-md bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-semibold text-[var(--btn-primary-text)] hover:bg-[var(--btn-primary-hover)] transition-colors active:scale-[0.97]",
             children: [
               /* @__PURE__ */ jsx5(Plus3, { className: "h-4 w-4" }),
-              "Create Secret"
+              "New Secret"
             ]
           }
         )
@@ -2858,10 +3275,11 @@ function StartupScriptsPage({ apiClient, className }) {
           {
             type: "button",
             onClick: openCreate,
+            "aria-label": "Create your first startup script",
             className: "mt-4 inline-flex items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] px-4 py-2.5 text-sm font-bold text-[var(--btn-primary-text)] shadow-sm transition-colors hover:bg-[var(--btn-primary-hover)]",
             children: [
               /* @__PURE__ */ jsx7(Plus4, { className: "h-4 w-4" }),
-              "Create Script"
+              "New Script"
             ]
           }
         )