@tangle-network/sandbox-ui 0.10.1 → 0.10.3

package/dist/pages.d.ts

@@ -39,6 +39,32 @@ interface ResourceLimits {
     ramMaxGB?: number;
     storageMaxGB?: number;
 }
+interface ModelOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface PricingRates {
+    cpuPerHr: number;
+    ramPerGbHr: number;
+    diskPerGbHr: number;
+    minChargePerHr?: number;
+}
+/**
+ * Describes one selectable plan tier for the purpose of badging locked
+ * presets with the *correct* upgrade target. Without this, every locked
+ * preset shows "Pro" — wrong for a user who is already on Pro and whose
+ * next step up is Enterprise.
+ */
+interface PlanTierInfo {
+    /** Stable id (e.g. "free" | "pro" | "enterprise") */
+    id: string;
+    /** Short badge label shown on locked presets (e.g. "Pro", "Enterprise") */
+    label: string;
+    cpuMax: number;
+    ramMaxGB: number;
+    storageMaxGB: number;
+}
 interface ProvisioningWizardProps {
     environments?: EnvironmentOption[];
     onLoadEnvironments?: () => Promise<EnvironmentEntry[]>;
@@ -56,6 +82,16 @@ interface ProvisioningWizardProps {
     onLoadStartupScripts?: () => Promise<StartupScriptEntry[]>;
     /** Plan-based resource limits — caps the slider maximums */
     resourceLimits?: ResourceLimits;
+    /** Override the list of model engines shown in step 3 */
+    modelOptions?: ModelOption[];
+    /** Real pricing rates from the API for accurate cost calculation */
+    pricingRates?: PricingRates;
+    /**
+     * Ordered list of plan tiers (smallest to largest). When provided,
+     * locked presets are badged with the label of the smallest tier that
+     * would unlock them. Falls back to a generic "Pro" badge when omitted.
+     */
+    planTiers?: PlanTierInfo[];
 }
 interface StartupScriptEntry {
     id: string;
@@ -82,7 +118,7 @@ interface ProvisioningConfig {
     startupScriptIds?: string[];
 }
 declare function resolveEnvironment(env: EnvironmentEntry): EnvironmentOption;
-declare function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments, onSubmit, onBack, className, variant, defaultEnvironment, defaultConfig, skipToReview, onLoadStartupScripts, resourceLimits, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
+declare function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments, onSubmit, onBack, className, variant, defaultEnvironment, defaultConfig, skipToReview, onLoadStartupScripts, resourceLimits, modelOptions, pricingRates, planTiers, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
 
 type ProductVariant = "sandbox";
 interface StandalonePricingPageProps {
@@ -234,4 +270,4 @@ type TemplateCategory = "blockchain" | "ai-ml" | "frontend" | "infrastructure" |
 type TemplatePreset = Omit<ProvisioningConfig, "name" | "gitUrl" | "envVars" | "driver" | "startupScriptIds">;
 declare function getPresetForTemplate(id: string): TemplatePreset;
 
-export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentEntry, type EnvironmentOption, PricingTier, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, type ResourceLimits, type ScriptType, type Secret, type SecretsApiClient, SecretsPage, type SecretsPageProps, StandalonePricingPage, type StandalonePricingPageProps, type StartupScript, type StartupScriptEntry, type StartupScriptFormData, type StartupScriptsApiClient, StartupScriptsPage, type StartupScriptsPageProps, type TemplateCategory, type TemplatePreset, TemplatesPage, type TemplatesPageProps, getPresetForTemplate, resolveEnvironment };
+export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentEntry, type EnvironmentOption, type ModelOption, type PlanTierInfo, type PricingRates, PricingTier, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, type ResourceLimits, type ScriptType, type Secret, type SecretsApiClient, SecretsPage, type SecretsPageProps, StandalonePricingPage, type StandalonePricingPageProps, type StartupScript, type StartupScriptEntry, type StartupScriptFormData, type StartupScriptsApiClient, StartupScriptsPage, type StartupScriptsPageProps, type TemplateCategory, type TemplatePreset, TemplatesPage, type TemplatesPageProps, getPresetForTemplate, resolveEnvironment };

package/dist/pages.js

@@ -301,6 +301,10 @@ import * as React2 from "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 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)]" },
@@ -344,8 +348,22 @@ 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;
+var DEFAULT_PRICING_RATES = {
+  cpuPerHr: 0.045,
+  ramPerGbHr: 5e-3,
+  diskPerGbHr: 11e-4,
+  minChargePerHr: void 0
+};
+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 calcCost(cpu, ram, storage, rates) {
+  const cost = Math.max(
+    rates.minChargePerHr ?? 0,
+    cpu * rates.cpuPerHr + ram * rates.ramPerGbHr + storage * rates.diskPerGbHr
+  );
   return cost.toFixed(2);
 }
 function ProvisioningWizard({
@@ -359,7 +377,10 @@ 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));
@@ -399,8 +420,19 @@ function ProvisioningWizard({
     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 [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: "" }]);
@@ -449,12 +481,45 @@ 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 hourCost = calcCost(cpuCores, ramGB, storageGB, effectivePricingRates);
   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" }) }),
@@ -492,7 +557,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("");
@@ -550,59 +619,74 @@ 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: "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 }) => /* @__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
+            ].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__ */ jsxs2("span", { children: [
-                  max,
-                  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 === "vCPU" ? min === 1 ? " vCPU" : " vCPUs" : unit
+                  ] }),
+                  /* @__PURE__ */ jsxs2("span", { children: [
+                    max,
+                    unit === "vCPU" ? max === 1 ? " vCPU" : " vCPUs" : unit
+                  ] })
                 ] })
-              ] })
-            ] }, label)) })
+              ] }, 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 +696,26 @@ 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)" }),
@@ -782,57 +873,6 @@ 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: [
@@ -846,32 +886,48 @@ function ProvisioningWizard({
             ] }, hourCost),
             /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-bold", children: "/ hour" })
           ] }),
-          /* @__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"
-              ] })
-            ] }),
-            /* @__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"
-              ] })
-            ] }),
-            /* @__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"
+          (() => {
+            const computeCost = cpuCores * effectivePricingRates.cpuPerHr;
+            const memoryCost = ramGB * effectivePricingRates.ramPerGbHr;
+            const storageCost = storageGB * effectivePricingRates.diskPerGbHr;
+            const lineSum = computeCost + memoryCost + storageCost;
+            const floor = effectivePricingRates.minChargePerHr ?? 0;
+            const floorApplies = floor > lineSum;
+            return /* @__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: [
+                  "$",
+                  computeCost.toFixed(2),
+                  "/h"
+                ] })
+              ] }),
+              /* @__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: [
+                  "$",
+                  memoryCost.toFixed(2),
+                  "/h"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+                /* @__PURE__ */ jsx2("span", { children: "STORAGE" }),
+                /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
+                  "$",
+                  storageCost.toFixed(2),
+                  "/h"
+                ] })
+              ] }),
+              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: [
+                  "$",
+                  (floor - lineSum).toFixed(2),
+                  "/h"
+                ] })
               ] })
-            ] })
-          ] })
+            ] });
+          })()
         ] }),
         deployError && /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border border-destructive/30 bg-destructive/10 p-3 flex items-center gap-2", children: [
           /* @__PURE__ */ jsx2(Info, { className: "h-4 w-4 text-destructive shrink-0" }),
@@ -1839,46 +1895,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 +2032,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 +2933,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"
             ]
           }
         )