@synteq/cli 0.1.4 → 0.1.6

package/dist/tui/screens/Order.js

@@ -22,6 +22,8 @@ const emptyDraft = {
     projectId: null,
     planId: null,
     customSpec: {},
+    tierCategorySlug: null,
+    tierIndex: null,
     storageSizeGb: null,
     locationId: null,
     imageId: null,
@@ -37,8 +39,7 @@ const emptyDraft = {
 const PROGRESS_STEPS = [
     "kind",
     "project",
-    "plan",
-    "location",
+    "plan-location",
     "image",
     "hostname",
     "auth",
@@ -50,8 +51,11 @@ function stepsForKind(kind) {
     if (kind === "vps") {
         base.push("vps-spec", "image", "hostname", "auth", "payment", "summary");
     }
-    else if (kind === "gpu" || kind === "dedicated") {
-        base.push("plan", "location", "image", "hostname", "auth", "payment", "summary");
+    else if (kind === "gpu" || kind === "dedicated" || kind === "vds") {
+        // Split plan/tier picker + location picker into one step so we can probe
+        // per-location availability live (server-side /public/order/validate) and
+        // offer notify-me when the chosen location is out of stock.
+        base.push("plan-location", "image", "hostname", "auth", "payment", "summary");
     }
     else if (kind === "storage") {
         base.push("size", "location", "hostname", "payment", "summary");
@@ -85,7 +89,7 @@ export function Order() {
         (async () => {
             try {
                 const [orderCatalog, storageCatalog, projects, methods, balance] = await Promise.all([
-                    api.vpsOrders.catalog().catch(() => null),
+                    api.orders.catalog().catch(() => null),
                     api.storage.catalog().catch(() => null),
                     api.projects.list().catch(() => []),
                     api.payments.methods().catch(() => []),
@@ -210,10 +214,18 @@ export function Order() {
                         });
                     }
                     else {
+                        // Sizing mode per kind:
+                        //   vps → custom_spec (custom_cpu_cores/ram/disk sliders)
+                        //   vds → tier_category_slug + tier_index (server resolves)
+                        //   gpu / dedicated → plan_id (preset catalog plan)
+                        const isVps = draft.kind === "vps";
+                        const isVds = draft.kind === "vds";
                         const body = {
                             project_id: draft.projectId,
-                            plan_id: draft.kind === "vps" ? undefined : draft.planId ?? undefined,
-                            custom_spec: draft.kind === "vps" ? buildCustomSpec(draft.customSpec) : undefined,
+                            plan_id: isVps || isVds ? undefined : draft.planId ?? undefined,
+                            custom_spec: isVps ? buildCustomSpec(draft.customSpec) : undefined,
+                            tier_category_slug: isVds ? draft.tierCategorySlug ?? undefined : undefined,
+                            tier_index: isVds ? draft.tierIndex ?? undefined : undefined,
                             location_id: draft.locationId,
                             image_id: draft.imageId,
                             hostname: draft.hostname,
@@ -227,7 +239,7 @@ export function Order() {
                                 ? draft.sshKeyId
                                 : undefined,
                         };
-                        const out = await api.vpsOrders.create(body);
+                        const out = await api.orders.create(body);
                         setResult({
                             ok: true,
                             orderId: out.order_id,
@@ -282,8 +294,8 @@ function StepRouter(props) {
             return React.createElement(KindStep, { draft: draft, setDraft: setDraft, goNext: goNext });
         case "project":
             return React.createElement(ProjectStep, { projects: cat.projects, draft: draft, setDraft: setDraft, goNext: goNext });
-        case "plan":
-            return (React.createElement(PlanStep, { catalog: cat.orderCatalog, draft: draft, setDraft: setDraft, goNext: goNext }));
+        case "plan-location":
+            return (React.createElement(PlanLocationStep, { catalog: cat.orderCatalog, userEmail: props.userEmail, draft: draft, setDraft: setDraft, goNext: goNext }));
         case "vps-spec":
             return (React.createElement(VpsSpecStep, { customConfig: cat.orderCatalog?.custom_config ?? null, locations: cat.orderCatalog?.locations ?? [], userEmail: props.userEmail, draft: draft, setDraft: setDraft, goNext: goNext }));
         case "size":
@@ -314,9 +326,10 @@ function StepRouter(props) {
 function KindStep({ draft, setDraft, goNext, }) {
     const items = [
         { value: "vps", label: "VPS", hint: "custom CPU/RAM/disk; shared or dedicated cores" },
+        { value: "vds", label: "VDS", hint: "tier-based performance servers (order via web for now)" },
         { value: "gpu", label: "GPU", hint: "preset GPU-bearing plans" },
-        { value: "dedicated", label: "Dedicated", hint: "whole physical hosts" },
-        { value: "storage", label: "Storage", hint: "block volume (attach to a VPS later)" },
+        { value: "dedicated", label: "Instant Metal", hint: "whole physical hosts" },
+        { value: "storage", label: "Storage", hint: "block volume (attach to a resource later)" },
     ];
     return (React.createElement(Panel, { title: "What are you ordering?", paddingX: 3, paddingY: 1, width: 80 },
         React.createElement(Menu, { items: items, initialIndex: Math.max(0, items.findIndex((i) => i.value === draft.kind)), onSelect: (v) => {
@@ -326,6 +339,8 @@ function KindStep({ draft, setDraft, goNext, }) {
                         kind: v,
                         planId: null,
                         customSpec: {},
+                        tierCategorySlug: null,
+                        tierIndex: null,
                         storageSizeGb: null,
                         locationId: null,
                         imageId: null,
@@ -355,33 +370,6 @@ function ProjectStep({ projects, draft, setDraft, goNext, }) {
                 goNext();
             } })));
 }
-function PlanStep({ catalog, draft, setDraft, goNext, }) {
-    if (!catalog) {
-        return (React.createElement(Panel, { title: "Catalog unavailable", paddingX: 3, paddingY: 1, width: 80 },
-            React.createElement(Text, { color: colors.error }, "Couldn't load the order catalog. Try again later.")));
-    }
-    const category = draft.kind === "gpu" ? "gpu_cloud" : "dedicated";
-    const filtered = catalog.plans.filter((p) => p.category === category || p.category.replace("_", "-") === draft.kind);
-    const plans = filtered.length ? filtered : catalog.plans;
-    if (plans.length === 0) {
-        return (React.createElement(Panel, { title: "No plans in catalog", paddingX: 3, paddingY: 1, width: 80 },
-            React.createElement(Text, { color: colors.warning },
-                "No ",
-                draft.kind,
-                " plans are currently offered. Try a different resource type.")));
-    }
-    const items = plans.map((p) => ({
-        value: p.id,
-        label: planRowLabel(p),
-        hint: planRowHint(p),
-        disabled: p.in_stock ? undefined : "out of stock",
-    }));
-    return (React.createElement(Panel, { title: `Pick a ${draft.kind === "gpu" ? "GPU" : "dedicated"} plan`, paddingX: 3, paddingY: 1, width: 80 },
-        React.createElement(Menu, { items: items, initialIndex: Math.max(0, items.findIndex((i) => i.value === draft.planId)), onSelect: (v) => {
-                setDraft((d) => ({ ...d, planId: v, locationId: null }));
-                goNext();
-            } })));
-}
 function planRowLabel(p) {
     return `${p.name}  $${p.monthly_price}/mo`;
 }
@@ -392,10 +380,308 @@ function planRowHint(p) {
     const extra = p.gpu_model ? ` · ${p.gpu_model}` : "";
     return `${cores} ${ram} ${disk}${extra}`;
 }
+// Combined plan/tier + location picker for VDS, GPU Cloud, and Instant Metal.
+// Mirrors what the VPS custom-spec step does: probe /public/order/validate
+// per-location so the user sees which locations can actually fit the pick,
+// and offer marketing.notifyStock when the chosen location is out of stock.
+//
+// The VPS custom-spec flow lives in its own step (VpsSpecStep) because the
+// left pane is a slider grid rather than a plan/tier list — different shape,
+// same idea.
+function PlanLocationStep({ catalog, userEmail, draft, setDraft, goNext, }) {
+    const api = useApi();
+    if (!catalog) {
+        return (React.createElement(Panel, { title: "Catalog unavailable", paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Text, { color: colors.error }, "Couldn't load the order catalog. Try again later.")));
+    }
+    const isVds = draft.kind === "vds";
+    const isDedicated = draft.kind === "dedicated";
+    let picks = [];
+    let leftTitle = "Pick a plan";
+    const validateKind = isVds ? "vds" : isDedicated ? "instant_metal" : "gpu_cloud";
+    if (isVds) {
+        // Find an enabled VDS category with a non-empty ladder. Usually
+        // exactly one (vds_performance); we take the first enabled.
+        const vdsCats = (catalog.categories ?? []).filter((c) => c.slug.startsWith("vds") &&
+            c.slider_config?.enabled &&
+            (c.slider_config.tiers?.length ?? 0) > 0);
+        if (vdsCats.length === 0) {
+            return (React.createElement(Panel, { title: "No VDS tiers configured", paddingX: 3, paddingY: 1, width: 80 },
+                React.createElement(Text, { color: colors.warning }, "No VDS tier ladders are enabled on this deployment. Pick a different resource kind or order VDS from the web console.")));
+        }
+        const cat = vdsCats[0];
+        leftTitle = `Pick a VDS tier (${cat.name ?? cat.slug})`;
+        const tiers = cat.slider_config?.tiers ?? [];
+        picks = tiers.map((t, i) => ({
+            key: `${cat.slug}#${i}`,
+            label: `Tier ${i}  $${t.monthly_price}/mo`,
+            hint: `${t.cpu}c · ${t.ram_gb}GB RAM · ${t.disk_gb}GB disk · ${t.bandwidth_tb}TB BW`,
+            cpu_cores: t.cpu,
+            ram_gb: t.ram_gb,
+            disk_gb: t.disk_gb,
+            monthly_price: t.monthly_price,
+            in_stock: true, // VDS ladders don't carry a coarse in-stock flag; rely on per-loc probe below.
+            tierCategorySlug: cat.slug,
+            tierIndex: i,
+            dedicated: false,
+        }));
+    }
+    else {
+        const category = isDedicated ? "dedicated" : "gpu_cloud";
+        const filtered = catalog.plans.filter((p) => p.category === category || p.category.replace("_", "-") === draft.kind);
+        const plans = filtered.length ? filtered : catalog.plans;
+        if (plans.length === 0) {
+            return (React.createElement(Panel, { title: "No plans in catalog", paddingX: 3, paddingY: 1, width: 80 },
+                React.createElement(Text, { color: colors.warning },
+                    "No ",
+                    draft.kind,
+                    " plans are currently offered. Try a different resource type.")));
+        }
+        leftTitle = `Pick a ${isDedicated ? "Instant Metal" : "GPU"} plan`;
+        picks = plans.map((p) => ({
+            key: p.id,
+            label: planRowLabel(p),
+            hint: planRowHint(p),
+            cpu_cores: p.cpu_cores,
+            ram_gb: p.ram_gb,
+            disk_gb: p.disk_gb,
+            monthly_price: p.monthly_price,
+            in_stock: p.in_stock,
+            planId: p.id,
+            dedicated: isDedicated,
+        }));
+    }
+    const locations = catalog.locations;
+    const hasLocations = locations.length > 0;
+    // Initial cursor: last-picked selection if present, else the first
+    // in-stock (plan-level) row; falls back to 0.
+    const initialPickIdx = (() => {
+        if (isVds && draft.tierIndex != null && draft.tierCategorySlug) {
+            const idx = picks.findIndex((p) => p.tierCategorySlug === draft.tierCategorySlug &&
+                p.tierIndex === draft.tierIndex);
+            if (idx >= 0)
+                return idx;
+        }
+        if (!isVds && draft.planId) {
+            const idx = picks.findIndex((p) => p.planId === draft.planId);
+            if (idx >= 0)
+                return idx;
+        }
+        const firstInStock = picks.findIndex((p) => p.in_stock);
+        return firstInStock >= 0 ? firstInStock : 0;
+    })();
+    const [pickCursor, setPickCursor] = useState(initialPickIdx);
+    const [locCursor, setLocCursor] = useState(() => {
+        const idx = locations.findIndex((l) => l.id === draft.locationId);
+        return idx >= 0 ? idx : 0;
+    });
+    const [pane, setPane] = useState("pick");
+    const [notifyState, setNotifyState] = useState("idle");
+    // Availability probe keyed on (pickCursor, location). Cleared whenever
+    // the pick changes so a stale in-stock badge can't survive a tier switch.
+    const [stockByLoc, setStockByLoc] = useState({});
+    const currentPick = picks[pickCursor];
+    useEffect(() => {
+        // Reset probe results when the pick changes — a Tier 2 might fit where
+        // Tier 3 does not (and vice versa), so old flags would lie.
+        setStockByLoc({});
+        setNotifyState("idle");
+    }, [pickCursor]);
+    useEffect(() => {
+        if (!hasLocations || !currentPick)
+            return;
+        if (!currentPick.in_stock)
+            return; // Plan globally OOS — nothing to probe.
+        let cancelled = false;
+        // Small debounce so switching picks quickly doesn't fire N * K validate
+        // calls.
+        const t = setTimeout(() => {
+            for (const loc of locations) {
+                api.orders
+                    .validate({
+                    cpu_cores: currentPick.cpu_cores,
+                    ram_gb: currentPick.ram_gb,
+                    disk_gb: currentPick.disk_gb,
+                    location_id: loc.id,
+                    dedicated: currentPick.dedicated,
+                    kind: validateKind,
+                })
+                    .then((res) => {
+                    if (cancelled)
+                        return;
+                    setStockByLoc((m) => ({ ...m, [loc.id]: res.available }));
+                })
+                    .catch(() => {
+                    // Swallow — the location just stays unmarked; the server will
+                    // fail the order if the spec truly can't fit, and we've already
+                    // let the user see the pick.
+                });
+            }
+        }, 250);
+        return () => {
+            cancelled = true;
+            clearTimeout(t);
+        };
+        // Re-run whenever the pick's specs, the location list, or the kind changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        hasLocations,
+        currentPick?.cpu_cores,
+        currentPick?.ram_gb,
+        currentPick?.disk_gb,
+        currentPick?.dedicated,
+        validateKind,
+        locations,
+    ]);
+    const selLoc = hasLocations ? locations[locCursor] ?? null : null;
+    const planLevelOOS = Boolean(currentPick && !currentPick.in_stock);
+    const locStockKnown = selLoc ? stockByLoc[selLoc.id] !== undefined : false;
+    const selInStock = !hasLocations ||
+        (!planLevelOOS && (!locStockKnown || stockByLoc[selLoc?.id ?? ""] !== false));
+    const canContinue = Boolean(currentPick) && Boolean(selLoc) && selInStock;
+    const commit = () => {
+        if (!currentPick || !selLoc)
+            return;
+        setDraft((d) => ({
+            ...d,
+            planId: currentPick.planId ?? null,
+            tierCategorySlug: currentPick.tierCategorySlug ?? null,
+            tierIndex: currentPick.tierIndex ?? null,
+            locationId: selLoc.id,
+        }));
+        goNext();
+    };
+    const requestNotify = async () => {
+        if (!selLoc || !currentPick)
+            return;
+        if (notifyState === "sending" || notifyState === "sent")
+            return;
+        if (!userEmail) {
+            setNotifyState("error");
+            return;
+        }
+        setNotifyState("sending");
+        try {
+            await api.marketing.notifyStock({
+                email: userEmail,
+                location_id: selLoc.id,
+                plan_id: currentPick.planId ?? null,
+                note: `CLI order wizard — ${draft.kind}`,
+                config_json: {
+                    cpu_cores: currentPick.cpu_cores,
+                    ram_gb: currentPick.ram_gb,
+                    disk_gb: currentPick.disk_gb,
+                    dedicated: currentPick.dedicated,
+                    kind: validateKind,
+                    tier_category_slug: currentPick.tierCategorySlug ?? null,
+                    tier_index: currentPick.tierIndex ?? null,
+                },
+            });
+            setNotifyState("sent");
+        }
+        catch {
+            setNotifyState("error");
+        }
+    };
+    useInput((input, key) => {
+        if (key.tab) {
+            if (hasLocations)
+                setPane((p) => (p === "pick" ? "loc" : "pick"));
+            return;
+        }
+        if (pane === "pick") {
+            if (key.upArrow) {
+                setPickCursor((c) => (c === 0 ? picks.length - 1 : c - 1));
+            }
+            else if (key.downArrow) {
+                setPickCursor((c) => (c === picks.length - 1 ? 0 : c + 1));
+            }
+            else if (key.return || key.rightArrow) {
+                if (hasLocations)
+                    setPane("loc");
+                else
+                    commit();
+            }
+            return;
+        }
+        // pane === "loc"
+        if (key.upArrow) {
+            setLocCursor((c) => (c === 0 ? locations.length - 1 : c - 1));
+        }
+        else if (key.downArrow) {
+            setLocCursor((c) => (c === locations.length - 1 ? 0 : c + 1));
+        }
+        else if (key.leftArrow) {
+            setPane("pick");
+        }
+        else if (key.return) {
+            if (canContinue)
+                commit();
+            else
+                void requestNotify();
+        }
+    });
+    const buttonLabel = canContinue
+        ? "Continue"
+        : notifyState === "sent"
+            ? "Requested ✓"
+            : notifyState === "sending"
+                ? "Sending…"
+                : "Notify me";
+    const pickPanel = (React.createElement(Panel, { title: leftTitle, paddingX: 2, paddingY: 1, width: hasLocations ? 50 : 80, borderColor: pane === "pick" ? colors.accent : undefined },
+        React.createElement(Box, { flexDirection: "column" },
+            picks.map((p, i) => {
+                const isCursor = i === pickCursor;
+                const disabled = !p.in_stock;
+                return (React.createElement(Box, { key: p.key },
+                    React.createElement(Text, { color: isCursor
+                            ? pane === "pick"
+                                ? colors.accent
+                                : colors.text
+                            : colors.dim }, isCursor ? `${glyphs.chevronRight} ` : "  "),
+                    React.createElement(Text, { bold: isCursor, color: disabled
+                            ? colors.dim
+                            : isCursor && pane === "pick"
+                                ? colors.accent
+                                : colors.text }, p.label),
+                    React.createElement(Text, { color: colors.dim }, `   ${p.hint}`),
+                    disabled ? (React.createElement(Text, { color: colors.dim }, "   out of stock")) : null));
+            }),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(ActionButton, { keybind: "\u21B5", label: buttonLabel, onPress: () => (canContinue ? commit() : void requestNotify()), focused: pane === "pick" && !hasLocations })),
+            selLoc && !canContinue && currentPick ? (React.createElement(Box, null,
+                React.createElement(Text, { color: notifyState === "sent" ? colors.dim : colors.warning }, notifyState === "sent"
+                    ? `We'll email you when ${selLoc.city ?? selLoc.name} has capacity for this ${isVds ? "tier" : "plan"}.`
+                    : `${selLoc.city ?? selLoc.name} can't fit this ${isVds ? "tier" : "plan"} right now — we can email you when it can.`))) : null,
+            notifyState === "error" ? (React.createElement(Box, null,
+                React.createElement(Text, { color: colors.error }, "Couldn't save the notification \u2014 try again."))) : null)));
+    if (!hasLocations)
+        return pickPanel;
+    return (React.createElement(Box, { flexDirection: "row", width: 80 },
+        pickPanel,
+        React.createElement(Panel, { title: "Location", paddingX: 1, paddingY: 1, width: 30, borderColor: pane === "loc" ? colors.accent : undefined },
+            React.createElement(Box, { flexDirection: "column" }, locations.map((l, i) => {
+                const isCursor = i === locCursor;
+                const known = stockByLoc[l.id];
+                const oos = planLevelOOS || known === false;
+                const name = [l.city ?? l.name, l.country ?? ""]
+                    .filter(Boolean)
+                    .join(", ");
+                return (React.createElement(Box, { key: l.id, flexDirection: "column" },
+                    React.createElement(Box, null,
+                        React.createElement(Text, { color: isCursor
+                                ? pane === "loc"
+                                    ? colors.accent
+                                    : colors.text
+                                : colors.dim }, isCursor ? `${glyphs.chevronRight} ` : "  "),
+                        React.createElement(Text, { wrap: "truncate-end", bold: isCursor, dimColor: oos, color: oos ? colors.dim : isCursor ? colors.accent : colors.text }, name)),
+                    oos ? (React.createElement(Text, { color: colors.dim }, "    out of stock")) : known === undefined ? (React.createElement(Text, { color: colors.dim }, `    ${l.code ?? "checking…"}`)) : l.code ? (React.createElement(Text, { color: colors.dim }, `    ${l.code}`)) : null));
+            })))));
+}
 function VpsSpecStep({ customConfig, locations, userEmail, draft, setDraft, goNext, }) {
     if (!customConfig?.enabled) {
         return (React.createElement(Panel, { title: "Custom VPS unavailable", paddingX: 3, paddingY: 1, width: 80 },
-            React.createElement(Text, { color: colors.warning }, "Custom VPS spec is not currently offered. Pick GPU or Dedicated instead.")));
+            React.createElement(Text, { color: colors.warning }, "Custom VPS spec is not currently offered. Pick GPU or Instant Metal instead.")));
     }
     return (React.createElement(VpsSpecFieldsStep, { customConfig: customConfig, locations: locations, userEmail: userEmail, draft: draft, setDraft: setDraft, goNext: goNext }));
 }
@@ -433,8 +719,8 @@ function VpsSpecFieldsStep({ customConfig, locations, userEmail, draft, setDraft
         let cancelled = false;
         const t = setTimeout(() => {
             for (const loc of locations) {
-                api.vpsOrders
-                    .customAvailability({
+                api.orders
+                    .validate({
                     cpu_cores: cpuN,
                     ram_gb: ramN,
                     disk_gb: diskN,
@@ -988,11 +1274,20 @@ function SummaryStep({ draft, cat, onSubmit, onEdit, }) {
     const imageName = cat.orderCatalog?.images.find((i) => i.id === draft.imageId)?.display_name;
     const plan = cat.orderCatalog?.plans.find((p) => p.id === draft.planId);
     const chosenPm = cat.paymentMethods.find((m) => m.id === draft.paymentMethodId);
+    // VDS: pull the picked tier's spec back out of the catalog for display.
+    // The server owns the truth; we resolve here purely for the summary
+    // preview so the user sees what they're about to buy.
+    const vdsCat = draft.kind === "vds"
+        ? (cat.orderCatalog?.categories ?? []).find((c) => c.slug === draft.tierCategorySlug)
+        : null;
+    const vdsTier = vdsCat?.slider_config?.tiers?.[draft.tierIndex ?? -1];
     const specLine = draft.kind === "vps"
         ? `${draft.customSpec.cpu_cores ?? "?"} vCPU · ${draft.customSpec.ram_gb ?? 0} GB RAM · ${draft.customSpec.disk_gb ?? "?"} GB disk${draft.customSpec.bandwidth_tb ? ` · ${draft.customSpec.bandwidth_tb} TB BW` : ""}${draft.customSpec._dedicated ? " · dedicated" : ""}`
-        : plan
-            ? `${plan.name} — ${plan.cpu_cores}c ${plan.ram_gb}G ${plan.disk_gb}G${plan.gpu_model ? ` · ${plan.gpu_model}` : ""}`
-            : undefined;
+        : draft.kind === "vds" && vdsTier
+            ? `Tier ${draft.tierIndex} — ${vdsTier.cpu}c ${vdsTier.ram_gb}G ${vdsTier.disk_gb}G · ${vdsTier.bandwidth_tb}TB BW  ($${vdsTier.monthly_price}/mo)`
+            : plan
+                ? `${plan.name} — ${plan.cpu_cores}c ${plan.ram_gb}G ${plan.disk_gb}G${plan.gpu_model ? ` · ${plan.gpu_model}` : ""}`
+                : undefined;
     const paymentLabel = (() => {
         const parts = [];
         if (draft.applyCredits && cat.creditBalance > 0) {
@@ -1080,6 +1375,8 @@ function tipForStep(step, draft, cancelConfirm) {
             return "↑↓ to choose, Enter to select. Esc to cancel.";
         case "vps-spec":
             return "Tab location/spec · ↑↓ move · Enter continue · Esc back.";
+        case "plan-location":
+            return "Tab pick/location · ↑↓ move · Enter continue (or Notify me if OOS) · Esc back.";
         case "hostname":
             return "Type a hostname (5–253 chars). Enter to confirm · Esc back.";
         case "auth":
@@ -1131,6 +1428,16 @@ function estimateMonthlyCost(draft, cat) {
             return { amount: plan.monthly_price, label: plan.name };
         }
     }
+    if (draft.kind === "vds" && draft.tierCategorySlug && draft.tierIndex != null && cat.orderCatalog) {
+        const vc = (cat.orderCatalog.categories ?? []).find((c) => c.slug === draft.tierCategorySlug);
+        const t = vc?.slider_config?.tiers?.[draft.tierIndex];
+        if (t) {
+            return {
+                amount: typeof t.monthly_price === "string" ? Number(t.monthly_price) : t.monthly_price,
+                label: `VDS tier ${draft.tierIndex} · ${t.cpu}c ${t.ram_gb}GB ${t.disk_gb}GB`,
+            };
+        }
+    }
     if (draft.kind === "vps" && cat.orderCatalog?.custom_config) {
         const cfg = cat.orderCatalog.custom_config;
         const baseCfg = draft.customSpec._dedicated ? cfg.dedicated : cfg;