@synteq/cli 0.1.5 → 0.2.0

package/dist/tui/screens/Order.js

@@ -39,8 +39,7 @@ const emptyDraft = {
 const PROGRESS_STEPS = [
     "kind",
     "project",
-    "plan",
-    "location",
+    "plan-location",
     "image",
     "hostname",
     "auth",
@@ -52,17 +51,15 @@ 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");
     }
-    else if (kind === "vds") {
-        // VDS: pick a tier from the ladder, then the standard trailing steps.
-        // Server resolves cpu/ram/disk/price from tier_category_slug + tier_index.
-        base.push("vds-tier", "location", "image", "hostname", "auth", "payment", "summary");
-    }
     else {
         return PROGRESS_STEPS;
     }
@@ -92,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(() => []),
@@ -242,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,
@@ -288,7 +285,7 @@ function LivePriceFooter({ draft, cat, }) {
         React.createElement(Text, { color: colors.dim }, "Est. monthly: "),
         est ? (React.createElement(React.Fragment, null,
             React.createElement(Text, { color: colors.accent, bold: true }, `$${est.amount.toFixed(2)}`),
-            React.createElement(Text, { color: colors.dim }, `  · ${est.label}`))) : (React.createElement(Text, { color: colors.dim }, "—"))));
+            React.createElement(Text, { color: colors.dim }, `  · ${est.label}`))) : (React.createElement(Text, { color: colors.dim }, "-"))));
 }
 function StepRouter(props) {
     const { step, draft, setDraft, cat, goNext } = props;
@@ -297,12 +294,10 @@ 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 "vds-tier":
-            return (React.createElement(VdsTierStep, { catalog: cat.orderCatalog, draft: draft, setDraft: setDraft, goNext: goNext }));
         case "size":
             return (React.createElement(SizeStep, { catalog: cat.storageCatalog, draft: draft, setDraft: setDraft, goNext: goNext }));
         case "location":
@@ -325,7 +320,7 @@ function StepRouter(props) {
         case "result":
             return React.createElement(ResultStep, { result: props.result });
         default:
-            return React.createElement(Text, null, "\u2014");
+            return React.createElement(Text, null, "-");
     }
 }
 function KindStep({ draft, setDraft, goNext, }) {
@@ -334,7 +329,7 @@ function KindStep({ draft, setDraft, goNext, }) {
         { 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: "Instant Metal", hint: "whole physical hosts" },
-        { value: "storage", label: "Storage", hint: "block volume (attach to a VPS later)" },
+        { 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) => {
@@ -375,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" : "Instant Metal"} 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`;
 }
@@ -412,44 +380,303 @@ function planRowHint(p) {
     const extra = p.gpu_model ? ` · ${p.gpu_model}` : "";
     return `${cores} ${ram} ${disk}${extra}`;
 }
-// VDS-specific tier picker. Reads catalog.categories[slug].slider_config.tiers
-// (the same ladder the server enforces at order time) and submits the pick
-// as tier_category_slug + tier_index. Different shape from PlanStep (plans)
-// and VpsSpecStep (custom sliders) — VDS is a third product family.
-function VdsTierStep({ catalog, draft, setDraft, goNext, }) {
+// 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.")));
     }
-    // Find an enabled VDS category with a non-empty ladder. Usually
-    // exactly one (vds_performance); multiple would need a category
-    // picker step first — not shipped, 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 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,
+        }));
     }
-    const cat = vdsCats[0];
-    const tiers = cat.slider_config?.tiers ?? [];
-    const items = tiers.map((t, i) => ({
-        value: 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`,
-    }));
-    return (React.createElement(Panel, { title: `Pick a VDS tier (${cat.name ?? cat.slug})`, paddingX: 3, paddingY: 1, width: 80 },
-        React.createElement(Menu, { items: items, initialIndex: Math.max(0, items.findIndex((i) => i.value === draft.tierIndex)), onSelect: (v) => {
-                setDraft((d) => ({
-                    ...d,
-                    tierCategorySlug: cat.slug,
-                    tierIndex: v,
-                    // Reset downstream location so the next step re-picks based
-                    // on where this tier is actually available.
-                    locationId: null,
-                }));
-                goNext();
-            } })));
+    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 - 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) {
@@ -492,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,
@@ -588,7 +815,7 @@ function VpsSpecFieldsStep({ customConfig, locations, userEmail, draft, setDraft
             await api.marketing.notifyStock({
                 email: userEmail,
                 location_id: selLoc.id,
-                note: "CLI order wizard — custom VPS",
+                note: "CLI order wizard - custom VPS",
                 config_json: {
                     cpu_cores: Number(cpu) || null,
                     ram_gb: Number(ramGb) || null,
@@ -672,9 +899,9 @@ function VpsSpecFieldsStep({ customConfig, locations, userEmail, draft, setDraft
             !selInStock && selLoc ? (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} is back in stock.`
-                    : `${selLoc.city ?? selLoc.name} is out of stock — we can email you when it's back.`))) : null,
+                    : `${selLoc.city ?? selLoc.name} is out of stock - we can email you when it's back.`))) : null,
             notifyState === "error" ? (React.createElement(Box, null,
-                React.createElement(Text, { color: colors.error }, "Couldn't save the notification \u2014 try again."))) : null,
+                React.createElement(Text, { color: colors.error }, "Couldn't save the notification - try again."))) : null,
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: colors.dim }, hasLocations
                     ? "Tab location/spec · ↑↓ move · ←/→ CPU type · Enter continue"
@@ -954,7 +1181,7 @@ function PaymentStep({ methods, creditBalance, balanceCurrency, estimatedCost, d
         else {
             if (!draft.paymentMethodId && !(draft.applyCredits && creditsCover)) {
                 setErr(creditBalance > 0
-                    ? "Pick a payment method — credits don't cover the full amount."
+                    ? "Pick a payment method - credits don't cover the full amount."
                     : "Pick a payment method.");
                 return;
             }
@@ -1015,7 +1242,7 @@ function PaymentStep({ methods, creditBalance, balanceCurrency, estimatedCost, d
             isBitpay ? (React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: colors.dim }, "BitPay opens a hosted checkout URL in your browser after submit."))) : null,
             methods.length !== eligible.length ? (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: colors.dim }, "Stripe ACH hidden \u2014 it can't settle instant charges. Pay an existing invoice in Billing instead."))) : null,
+                React.createElement(Text, { color: colors.dim }, "Stripe ACH hidden - it can't settle instant charges. Pay an existing invoice in Billing instead."))) : null,
             err ? (React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: colors.error }, err))) : null,
             React.createElement(Box, { marginTop: 1 },
@@ -1057,9 +1284,9 @@ function SummaryStep({ draft, cat, onSubmit, onEdit, }) {
     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" : ""}`
         : 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)`
+            ? `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}` : ""}`
+                ? `${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 = [];
@@ -1072,17 +1299,17 @@ function SummaryStep({ draft, cat, onSubmit, onEdit, }) {
     })();
     return (React.createElement(Panel, { title: "Review your order", paddingX: 3, paddingY: 1, width: 80 },
         React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Row, { label: "Kind", value: draft.kind ?? "—" }),
-            React.createElement(Row, { label: "Project", value: projectName ?? draft.projectId ?? "—" }),
-            draft.kind === "storage" ? (React.createElement(Row, { label: "Size", value: draft.storageSizeGb ? `${draft.storageSizeGb} GB` : "—" })) : (React.createElement(Row, { label: "Spec", value: specLine ?? "—" })),
-            React.createElement(Row, { label: "Location", value: locName ?? draft.locationId ?? "—" }),
-            draft.kind !== "storage" ? (React.createElement(Row, { label: "Image", value: imageName ?? draft.imageId ?? "—" })) : null,
-            React.createElement(Row, { label: draft.kind === "storage" ? "Name" : "Hostname", value: draft.hostname || "—" }),
+            React.createElement(Row, { label: "Kind", value: draft.kind ?? "-" }),
+            React.createElement(Row, { label: "Project", value: projectName ?? draft.projectId ?? "-" }),
+            draft.kind === "storage" ? (React.createElement(Row, { label: "Size", value: draft.storageSizeGb ? `${draft.storageSizeGb} GB` : "-" })) : (React.createElement(Row, { label: "Spec", value: specLine ?? "-" })),
+            React.createElement(Row, { label: "Location", value: locName ?? draft.locationId ?? "-" }),
+            draft.kind !== "storage" ? (React.createElement(Row, { label: "Image", value: imageName ?? draft.imageId ?? "-" })) : null,
+            React.createElement(Row, { label: draft.kind === "storage" ? "Name" : "Hostname", value: draft.hostname || "-" }),
             draft.kind !== "storage" ? (React.createElement(Row, { label: "Auth", value: draft.authKind === "password"
                     ? "root password (hidden)"
                     : draft.authKind === "ssh-paste"
                         ? "pasted SSH public key"
-                        : "—" })) : null,
+                        : "-" })) : null,
             React.createElement(Row, { label: "Payment", value: paymentLabel }),
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Menu, { items: [
@@ -1100,7 +1327,7 @@ function Row({ label, value }) {
     return (React.createElement(Box, null,
         React.createElement(Box, { width: 14 },
             React.createElement(Text, { color: colors.dim }, label)),
-        React.createElement(Text, { color: colors.text }, value === undefined || value === null || value === "" ? "—" : String(value))));
+        React.createElement(Text, { color: colors.text }, value === undefined || value === null || value === "" ? "-" : String(value))));
 }
 function ResultStep({ result, }) {
     if (!result) {
@@ -1117,13 +1344,13 @@ function ResultStep({ result, }) {
     return (React.createElement(Panel, { title: "Order submitted", paddingX: 3, paddingY: 1, width: 80, borderColor: colors.success },
         React.createElement(Box, { flexDirection: "column" },
             React.createElement(Row, { label: "Status", value: result.status ?? "ok" }),
-            React.createElement(Row, { label: "Order id", value: result.orderId ?? "—" }),
-            React.createElement(Row, { label: "Invoice id", value: result.invoiceId ?? "—" }),
+            React.createElement(Row, { label: "Order id", value: result.orderId ?? "-" }),
+            React.createElement(Row, { label: "Invoice id", value: result.invoiceId ?? "-" }),
             result.checkoutUrl ? React.createElement(Row, { label: "Checkout URL", value: result.checkoutUrl }) : null,
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: color }, result.checkoutUrl
                     ? "Open the checkout URL in your browser to complete payment."
-                    : "All done — see Resources to watch provisioning.")),
+                    : "All done - see Resources to watch provisioning.")),
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: colors.dim }, "Press Esc or Enter to return to Dashboard.")))));
 }
@@ -1148,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":
@@ -1182,7 +1411,7 @@ function buildCustomSpec(s) {
 function fingerprint(pubKey) {
     const parts = pubKey.trim().split(/\s+/);
     if (parts.length === 0)
-        return "—";
+        return "-";
     const algo = parts[0] ?? "";
     const b64 = parts[1] ?? "";
     const comment = parts.slice(2).join(" ");