@synteq/cli 0.1.0

package/dist/tui/screens/Order.js

@@ -0,0 +1,1169 @@
+import React, { useEffect, useState, useMemo, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { Panel } from "../components/Panel.js";
+import { Menu } from "../components/Menu.js";
+import { StatusBar } from "../components/StatusBar.js";
+import { Tip } from "../components/Tip.js";
+import { Spinner } from "../components/Spinner.js";
+import { CenteredFrame } from "../components/CenteredFrame.js";
+import { BackButton } from "../components/BackButton.js";
+import { NumberInput } from "../components/NumberInput.js";
+import { ActionButton } from "../components/ActionButton.js";
+import { ConfirmModal } from "../components/ConfirmModal.js";
+import { useApi } from "../hooks/useApi.js";
+import { useHeader } from "../hooks/useHeader.js";
+import { useMousePause } from "../hooks/useMouse.js";
+import { useRouter } from "../router.js";
+import { colors, statusColor } from "../theme/colors.js";
+import { glyphs } from "../theme/glyphs.js";
+const emptyDraft = {
+    kind: null,
+    projectId: null,
+    planId: null,
+    customSpec: {},
+    storageSizeGb: null,
+    locationId: null,
+    imageId: null,
+    hostname: "",
+    authKind: null,
+    password: "",
+    sshPublicKey: "",
+    sshKeyId: null,
+    applyCredits: false,
+    paymentMethodId: null,
+    paymentKind: "method",
+};
+const PROGRESS_STEPS = [
+    "kind",
+    "project",
+    "plan",
+    "location",
+    "image",
+    "hostname",
+    "auth",
+    "payment",
+    "summary",
+];
+function stepsForKind(kind) {
+    const base = ["kind", "project"];
+    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 === "storage") {
+        base.push("size", "location", "hostname", "payment", "summary");
+    }
+    else {
+        return PROGRESS_STEPS;
+    }
+    return base;
+}
+export function Order() {
+    const api = useApi();
+    const { header } = useHeader();
+    const { navigate } = useRouter();
+    useMousePause(true);
+    const [step, setStep] = useState("kind");
+    const [draft, setDraft] = useState(emptyDraft);
+    const [cancelConfirm, setCancelConfirm] = useState(false);
+    const [result, setResult] = useState(null);
+    const [cat, setCat] = useState({
+        loading: true,
+        error: null,
+        orderCatalog: null,
+        storageCatalog: null,
+        projects: [],
+        paymentMethods: [],
+        creditBalance: 0,
+        balanceCurrency: "",
+    });
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const [orderCatalog, storageCatalog, projects, methods, balance] = await Promise.all([
+                    api.vpsOrders.catalog().catch(() => null),
+                    api.storage.catalog().catch(() => null),
+                    api.projects.list().catch(() => []),
+                    api.payments.methods().catch(() => []),
+                    api.billing.balance().catch(() => ({})),
+                ]);
+                if (cancelled)
+                    return;
+                const credit = typeof balance.credit === "number"
+                    ? balance.credit
+                    : typeof balance.credit === "string" ? Number(balance.credit) : 0;
+                setCat({
+                    loading: false,
+                    error: null,
+                    orderCatalog,
+                    storageCatalog,
+                    projects,
+                    paymentMethods: methods,
+                    creditBalance: Number.isFinite(credit) && credit > 0 ? credit : 0,
+                    balanceCurrency: balance.currency ?? "",
+                });
+            }
+            catch (e) {
+                if (cancelled)
+                    return;
+                setCat((c) => ({ ...c, loading: false, error: e instanceof Error ? e.message : String(e) }));
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [api]);
+    useEffect(() => {
+        if (!cat.loading && cat.projects.length && draft.projectId === null) {
+            const def = cat.projects.find((p) => p.is_default) ?? cat.projects[0];
+            setDraft((d) => ({ ...d, projectId: def.id }));
+        }
+    }, [cat.loading, cat.projects, draft.projectId]);
+    const visibleSteps = useMemo(() => stepsForKind(draft.kind), [draft.kind]);
+    const stepIndex = visibleSteps.indexOf(step);
+    const stepNumber = stepIndex >= 0 ? stepIndex + 1 : 1;
+    const totalSteps = visibleSteps.length;
+    const goPrev = useCallback(() => {
+        if (step === "kind")
+            return;
+        const idx = visibleSteps.indexOf(step);
+        if (idx > 0)
+            setStep(visibleSteps[idx - 1]);
+    }, [step, visibleSteps]);
+    const goNext = useCallback(() => {
+        const idx = visibleSteps.indexOf(step);
+        if (idx >= 0 && idx + 1 < visibleSteps.length)
+            setStep(visibleSteps[idx + 1]);
+    }, [step, visibleSteps]);
+    const textInputOwnsKeys = step === "hostname" ||
+        step === "size" ||
+        (step === "auth" && !!draft.authKind) ||
+        step === "vps-spec";
+    const canSwallowBack = !["submitting", "result"].includes(step) && !textInputOwnsKeys;
+    useInput((input, key) => {
+        if (cancelConfirm) {
+            if (input === "y" || input === "Y") {
+                navigate("dashboard");
+            }
+            else {
+                setCancelConfirm(false);
+            }
+            return;
+        }
+        if (step === "result") {
+            if (key.escape || key.return)
+                navigate("dashboard");
+            return;
+        }
+        if (step === "submitting")
+            return;
+        if (key.escape) {
+            if (step === "auth" && draft.authKind) {
+                setDraft((d) => ({ ...d, authKind: null }));
+                return;
+            }
+            if (step === "kind") {
+                setCancelConfirm(true);
+            }
+            else {
+                goPrev();
+            }
+            return;
+        }
+        if (canSwallowBack && (key.leftArrow || key.backspace || key.delete)) {
+            goPrev();
+        }
+    });
+    let body;
+    if (cat.loading) {
+        body = (React.createElement(Panel, { paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Spinner, { label: "Loading catalog\u2026" })));
+    }
+    else if (cat.error) {
+        body = (React.createElement(Panel, { title: "Couldn't load catalog", paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Text, { color: colors.error }, cat.error),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Esc to return to Dashboard."))));
+    }
+    else {
+        body = (React.createElement(StepRouter, { step: step, draft: draft, setDraft: setDraft, userEmail: header.userEmail, cat: cat, creditBalance: cat.creditBalance, balanceCurrency: cat.balanceCurrency, goNext: goNext, onSubmit: async () => {
+                setStep("submitting");
+                try {
+                    if (draft.kind === "storage") {
+                        const out = await api.storage.order({
+                            name: draft.hostname || "volume",
+                            size_gb: draft.storageSizeGb ?? 0,
+                            location_id: draft.locationId,
+                            payment_method_id: draft.paymentMethodId ?? undefined,
+                            apply_credits: draft.applyCredits || undefined,
+                        }, draft.projectId ?? undefined);
+                        setResult({
+                            ok: true,
+                            orderId: out.order_id,
+                            invoiceId: out.invoice_id,
+                            status: out.status,
+                            checkoutUrl: out.checkout_url,
+                        });
+                    }
+                    else {
+                        const body = {
+                            project_id: draft.projectId,
+                            plan_id: draft.kind === "vps" ? undefined : draft.planId ?? undefined,
+                            custom_spec: draft.kind === "vps" ? buildCustomSpec(draft.customSpec) : undefined,
+                            location_id: draft.locationId,
+                            image_id: draft.imageId,
+                            hostname: draft.hostname,
+                            quantity: 1,
+                            payment_kind: draft.paymentKind,
+                            payment_method_id: draft.paymentMethodId ?? undefined,
+                            apply_credits: draft.applyCredits || undefined,
+                            password: draft.authKind === "password" ? draft.password : undefined,
+                            ssh_public_key: draft.authKind === "ssh-paste" ? draft.sshPublicKey : undefined,
+                            ssh_key_id: draft.authKind === "ssh-saved" && draft.sshKeyId
+                                ? draft.sshKeyId
+                                : undefined,
+                        };
+                        const out = await api.vpsOrders.create(body);
+                        setResult({
+                            ok: true,
+                            orderId: out.order_id,
+                            invoiceId: out.invoice_id,
+                            status: out.status,
+                            checkoutUrl: out.checkout_url,
+                        });
+                    }
+                    setStep("result");
+                }
+                catch (e) {
+                    setResult({ ok: false, error: e instanceof Error ? e.message : String(e) });
+                    setStep("result");
+                }
+            }, onEdit: () => setStep("kind"), result: result }));
+    }
+    return (React.createElement(CenteredFrame, { fullHeight: true, maxWidth: 120 },
+        React.createElement(Box, { flexDirection: "row", paddingX: 2, width: "100%", flexShrink: 0 },
+            step !== "kind" && (React.createElement(React.Fragment, null,
+                React.createElement(BackButton, { onBack: goPrev }),
+                React.createElement(Text, { color: colors.dim }, " · "))),
+            React.createElement(Text, { color: colors.dim, wrap: "truncate-end" }, `New order · Step ${stepNumber} of ${totalSteps}  `),
+            renderProgressDots(stepNumber, totalSteps)),
+        React.createElement(Box, { height: 1 }),
+        cancelConfirm ? (React.createElement(ConfirmModal, { title: "Cancel this order?", hint: "Your progress is kept until you leave the wizard.", onConfirm: () => navigate("dashboard"), onCancel: () => setCancelConfirm(false) })) : (React.createElement(Box, { flexGrow: 1, justifyContent: "center", alignItems: "flex-start" },
+            React.createElement(Box, { flexDirection: "column", width: 80 },
+                body,
+                React.createElement(LivePriceFooter, { draft: draft, cat: cat })))),
+        React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Tip, null, tipForStep(step, draft, cancelConfirm)),
+            React.createElement(StatusBar, { right: [
+                    header.teamName ? `Team: ${header.teamName}` : "",
+                    header.projectName ? `Project: ${header.projectName}` : "",
+                    header.balance ?? "",
+                ].filter(Boolean) }))));
+}
+function LivePriceFooter({ draft, cat, }) {
+    const est = useMemo(() => estimateMonthlyCost(draft, cat), [draft, cat]);
+    const shouldShow = draft.kind !== null && draft.projectId !== null;
+    if (!shouldShow)
+        return null;
+    return (React.createElement(Box, { paddingX: 2, paddingY: 0, marginTop: 1, borderStyle: "round", borderColor: colors.dim },
+        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 }, "—"))));
+}
+function StepRouter(props) {
+    const { step, draft, setDraft, cat, goNext } = props;
+    switch (step) {
+        case "kind":
+            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 "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":
+            return (React.createElement(SizeStep, { catalog: cat.storageCatalog, draft: draft, setDraft: setDraft, goNext: goNext }));
+        case "location":
+            return (React.createElement(LocationStep, { orderCatalog: cat.orderCatalog, storageCatalog: cat.storageCatalog, draft: draft, setDraft: setDraft, goNext: goNext }));
+        case "image":
+            return (React.createElement(ImageStep, { catalog: cat.orderCatalog, draft: draft, setDraft: setDraft, goNext: goNext }));
+        case "hostname":
+            return (React.createElement(HostnameStep, { draft: draft, setDraft: setDraft, goNext: goNext }));
+        case "auth":
+            return React.createElement(AuthStep, { draft: draft, setDraft: setDraft, goNext: goNext });
+        case "payment": {
+            const est = estimateMonthlyCost(draft, cat);
+            return (React.createElement(PaymentStep, { methods: cat.paymentMethods, creditBalance: cat.creditBalance, balanceCurrency: cat.balanceCurrency, estimatedCost: est?.amount ?? 0, draft: draft, setDraft: setDraft, goNext: goNext }));
+        }
+        case "summary":
+            return (React.createElement(SummaryStep, { draft: draft, cat: cat, onSubmit: props.onSubmit, onEdit: props.onEdit }));
+        case "submitting":
+            return (React.createElement(Panel, { paddingX: 3, paddingY: 1, width: 80 },
+                React.createElement(Spinner, { label: "Submitting order\u2026" })));
+        case "result":
+            return React.createElement(ResultStep, { result: props.result });
+        default:
+            return React.createElement(Text, null, "\u2014");
+    }
+}
+function KindStep({ draft, setDraft, goNext, }) {
+    const items = [
+        { value: "vps", label: "VPS", hint: "custom CPU/RAM/disk; shared or dedicated cores" },
+        { 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)" },
+    ];
+    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) => {
+                if (v !== draft.kind) {
+                    setDraft((d) => ({
+                        ...d,
+                        kind: v,
+                        planId: null,
+                        customSpec: {},
+                        storageSizeGb: null,
+                        locationId: null,
+                        imageId: null,
+                    }));
+                }
+                else {
+                    setDraft((d) => ({ ...d, kind: v }));
+                }
+                goNext();
+            } })));
+}
+function ProjectStep({ projects, draft, setDraft, goNext, }) {
+    if (projects.length === 0) {
+        return (React.createElement(Panel, { title: "No projects on this team", paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Text, { color: colors.error }, "You need at least one project to bill against. Create one in the portal and try again."),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Press Esc to return to Dashboard."))));
+    }
+    const items = projects.map((p) => ({
+        value: p.id,
+        label: p.name,
+        hint: p.is_default ? "default" : (p.description ?? undefined),
+    }));
+    return (React.createElement(Panel, { title: "Pick a project to bill against", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Menu, { items: items, initialIndex: Math.max(0, items.findIndex((i) => i.value === draft.projectId)), onSelect: (v) => {
+                setDraft((d) => ({ ...d, projectId: v }));
+                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`;
+}
+function planRowHint(p) {
+    const cores = `${p.cpu_cores}c`;
+    const ram = `${Math.round(p.ram_mb / 1024)}G`;
+    const disk = `${p.disk_gb}G`;
+    const extra = p.gpu_model ? ` · ${p.gpu_model}` : "";
+    return `${cores} ${ram} ${disk}${extra}`;
+}
+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.")));
+    }
+    return (React.createElement(VpsSpecFieldsStep, { customConfig: customConfig, locations: locations, userEmail: userEmail, draft: draft, setDraft: setDraft, goNext: goNext }));
+}
+function VpsSpecFieldsStep({ customConfig, locations, userEmail, draft, setDraft, goNext, }) {
+    const api = useApi();
+    const dedicated = Boolean(draft.customSpec._dedicated);
+    const baseCfg = dedicated ? customConfig.dedicated : customConfig;
+    const initialCpu = draft.customSpec.cpu_cores ?? baseCfg.cpu_min;
+    const initialRamGb = (draft.customSpec.ram_mb ? draft.customSpec.ram_mb / 1024 : null) ??
+        customConfig.ram_min_gb;
+    const initialDisk = draft.customSpec.disk_gb ?? customConfig.disk_min_gb;
+    const initialBw = draft.customSpec.bandwidth_tb ?? customConfig.bandwidth_min_tb;
+    const [cpu, setCpu] = useState(String(initialCpu));
+    const [ramGb, setRamGb] = useState(String(initialRamGb));
+    const [disk, setDisk] = useState(String(initialDisk));
+    const [bw, setBw] = useState(String(initialBw));
+    const hasLocations = locations.length > 0;
+    const [pane, setPane] = useState(hasLocations && !draft.locationId ? "loc" : "spec");
+    const [specRow, setSpecRow] = useState(0);
+    const [locCursor, setLocCursor] = useState(() => {
+        const chosen = locations.findIndex((l) => l.id === draft.locationId);
+        return chosen >= 0 ? chosen : 0;
+    });
+    const [notifyState, setNotifyState] = useState("idle");
+    const [stockByLoc, setStockByLoc] = useState({});
+    const selLoc = hasLocations ? locations[locCursor] ?? null : null;
+    const selInStock = !hasLocations || stockByLoc[selLoc?.id ?? ""] !== false;
+    useEffect(() => {
+        if (!hasLocations)
+            return;
+        const cpuN = Number(cpu);
+        const ramN = Number(ramGb);
+        const diskN = Number(disk);
+        if (!(cpuN > 0 && ramN > 0 && diskN > 0))
+            return;
+        let cancelled = false;
+        const t = setTimeout(() => {
+            for (const loc of locations) {
+                api.vpsOrders
+                    .customAvailability({
+                    cpu_cores: cpuN,
+                    ram_mb: ramN * 1024,
+                    disk_gb: diskN,
+                    location_id: loc.id,
+                    dedicated,
+                })
+                    .then((res) => {
+                    if (cancelled)
+                        return;
+                    setStockByLoc((m) => ({ ...m, [loc.id]: res.available }));
+                })
+                    .catch(() => {
+                });
+            }
+        }, 600);
+        return () => {
+            cancelled = true;
+            clearTimeout(t);
+        };
+    }, [api, hasLocations, locations, cpu, ramGb, disk, dedicated]);
+    useEffect(() => {
+        setDraft((d) => ({
+            ...d,
+            locationId: d.locationId ?? selLoc?.id ?? null,
+            customSpec: {
+                ...d.customSpec,
+                cpu_cores: d.customSpec.cpu_cores ?? initialCpu,
+                ram_mb: d.customSpec.ram_mb ?? initialRamGb * 1024,
+                disk_gb: d.customSpec.disk_gb ?? initialDisk,
+                bandwidth_tb: d.customSpec.bandwidth_tb ?? initialBw,
+            },
+        }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const cpuMin = baseCfg.cpu_min;
+    const cpuMax = baseCfg.cpu_max;
+    const cpuStep = baseCfg.cpu_stops?.length ? undefined : baseCfg.cpu_step;
+    const ramMin = customConfig.ram_min_gb;
+    const ramMax = customConfig.ram_max_gb;
+    const ramStep = customConfig.ram_stops?.length ? undefined : customConfig.ram_step_gb;
+    const diskMin = customConfig.disk_min_gb;
+    const diskMax = customConfig.disk_max_gb;
+    const diskStep = customConfig.disk_stops?.length ? undefined : customConfig.disk_step_gb;
+    const bwMin = customConfig.bandwidth_min_tb;
+    const bwMax = customConfig.bandwidth_max_tb;
+    const bwStep = customConfig.bandwidth_stops?.length ? undefined : customConfig.bandwidth_step_tb;
+    const moveLocation = (delta) => {
+        if (!hasLocations)
+            return;
+        setLocCursor((c) => Math.max(0, Math.min(locations.length - 1, c + delta)));
+        setNotifyState("idle");
+    };
+    const commit = () => {
+        if (!selInStock)
+            return;
+        const fields = [
+            { raw: cpu, min: cpuMin, max: cpuMax, row: 1 },
+            { raw: ramGb, min: ramMin, max: ramMax, row: 2 },
+            { raw: disk, min: diskMin, max: diskMax, row: 3 },
+            { raw: bw, min: bwMin, max: bwMax, row: 4 },
+        ];
+        for (const f of fields) {
+            const n = Number(f.raw);
+            if (!Number.isFinite(n) || n < f.min || n > f.max) {
+                setPane("spec");
+                setSpecRow(f.row);
+                return;
+            }
+        }
+        setDraft((d) => ({
+            ...d,
+            locationId: selLoc?.id ?? d.locationId,
+            customSpec: {
+                ...d.customSpec,
+                cpu_cores: Number(cpu),
+                ram_mb: Number(ramGb) * 1024,
+                disk_gb: Number(disk),
+                bandwidth_tb: Number(bw),
+            },
+        }));
+        goNext();
+    };
+    const requestNotify = async () => {
+        if (!selLoc || notifyState === "sending" || notifyState === "sent")
+            return;
+        if (!userEmail) {
+            setNotifyState("error");
+            return;
+        }
+        setNotifyState("sending");
+        try {
+            await api.marketing.notifyStock({
+                email: userEmail,
+                location_id: selLoc.id,
+                note: "CLI order wizard — custom VPS",
+                config_json: {
+                    cpu_cores: Number(cpu) || null,
+                    ram_gb: Number(ramGb) || null,
+                    disk_gb: Number(disk) || null,
+                    bandwidth_tb: Number(bw) || null,
+                    dedicated,
+                },
+            });
+            setNotifyState("sent");
+        }
+        catch {
+            setNotifyState("error");
+        }
+    };
+    useInput((input, key) => {
+        if (key.tab) {
+            if (hasLocations)
+                setPane((p) => (p === "loc" ? "spec" : "loc"));
+            return;
+        }
+        if (pane === "loc") {
+            if (key.upArrow)
+                moveLocation(-1);
+            else if (key.downArrow)
+                moveLocation(1);
+            else if (key.return || key.rightArrow)
+                setPane("spec");
+            return;
+        }
+        if (key.upArrow) {
+            setSpecRow((r) => (r === 0 ? 5 : (r - 1)));
+        }
+        else if (key.downArrow) {
+            setSpecRow((r) => (r === 5 ? 0 : (r + 1)));
+        }
+        else if (specRow === 0 &&
+            (key.leftArrow || key.rightArrow || input === " ")) {
+            setDraft((d) => ({
+                ...d,
+                customSpec: { ...d.customSpec, _dedicated: !d.customSpec._dedicated },
+            }));
+        }
+        else if (specRow === 5 && key.return) {
+            if (selInStock)
+                commit();
+            else
+                void requestNotify();
+        }
+    });
+    const liveSet = useCallback((buf, setBuf, apply) => {
+        setBuf(buf);
+        const n = Number(buf);
+        if (Number.isFinite(n) && n > 0) {
+            setDraft((d) => ({ ...d, customSpec: { ...d.customSpec, ...apply(n) } }));
+        }
+    }, [setDraft]);
+    const specFocused = pane === "spec";
+    const buttonLabel = selInStock
+        ? "Continue"
+        : notifyState === "sent"
+            ? "Requested ✓"
+            : notifyState === "sending"
+                ? "Sending…"
+                : "Notify me";
+    const specPanel = (React.createElement(Panel, { title: "VPS specification", paddingX: 3, paddingY: 1, width: hasLocations ? 53 : 80, borderColor: specFocused ? colors.accent : undefined },
+        React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Box, null,
+                React.createElement(Text, { color: specFocused && specRow === 0 ? colors.accent : colors.dim, bold: specFocused && specRow === 0 }, "CPU type"),
+                React.createElement(Text, { color: !dedicated ? colors.accent : colors.dim }, `   ${!dedicated ? "●" : "○"} Shared`),
+                React.createElement(Text, { color: dedicated ? colors.accent : colors.dim }, `   ${dedicated ? "●" : "○"} Dedicated`)),
+            React.createElement(Box, { marginTop: 1 }),
+            React.createElement(NumberInput, { label: "CPU cores", value: cpu, onChange: (v) => liveSet(v, setCpu, (n) => ({ cpu_cores: n })), onSubmit: () => setSpecRow(2), min: cpuMin, max: cpuMax, step: cpuStep, unit: "vCPU", focused: specFocused && specRow === 1 }),
+            React.createElement(Box, { marginTop: 1 }),
+            React.createElement(NumberInput, { label: "RAM", value: ramGb, onChange: (v) => liveSet(v, setRamGb, (n) => ({ ram_mb: n * 1024 })), onSubmit: () => setSpecRow(3), min: ramMin, max: ramMax, step: ramStep, unit: "GB", focused: specFocused && specRow === 2 }),
+            React.createElement(Box, { marginTop: 1 }),
+            React.createElement(NumberInput, { label: "Disk", value: disk, onChange: (v) => liveSet(v, setDisk, (n) => ({ disk_gb: n })), onSubmit: () => setSpecRow(4), min: diskMin, max: diskMax, step: diskStep, unit: "GB NVMe", focused: specFocused && specRow === 3 }),
+            React.createElement(Box, { marginTop: 1 }),
+            React.createElement(NumberInput, { label: "Bandwidth", value: bw, onChange: (v) => liveSet(v, setBw, (n) => ({ bandwidth_tb: n })), onSubmit: () => setSpecRow(5), min: bwMin, max: bwMax, step: bwStep, unit: "TB", focused: specFocused && specRow === 4 }),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(ActionButton, { keybind: "\u21B5", label: buttonLabel, onPress: () => (selInStock ? commit() : void requestNotify()), focused: specFocused && specRow === 5 })),
+            !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,
+            notifyState === "error" ? (React.createElement(Box, null,
+                React.createElement(Text, { color: colors.error }, "Couldn't save the notification \u2014 try again."))) : null,
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, hasLocations
+                    ? "Tab location/spec · ↑↓ move · ←/→ CPU type · Enter continue"
+                    : "↑↓ to move · ←/→ CPU type · Enter to continue")))));
+    if (!hasLocations)
+        return specPanel;
+    return (React.createElement(Box, { flexDirection: "row", width: 80 },
+        React.createElement(Panel, { title: "Location", paddingX: 1, paddingY: 1, width: 27, borderColor: pane === "loc" ? colors.accent : undefined },
+            React.createElement(Box, { flexDirection: "column" }, locations.map((l, i) => {
+                const isCursor = i === locCursor;
+                const oos = stockByLoc[l.id] === 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")) : l.code ? (React.createElement(Text, { color: colors.dim }, `    ${l.code}`)) : null));
+            }))),
+        specPanel));
+}
+function SizeStep({ catalog, draft, setDraft, goNext, }) {
+    const [value, setValue] = useState(draft.storageSizeGb ? String(draft.storageSizeGb) : "");
+    const [err, setErr] = useState(null);
+    if (!catalog || !catalog.is_active) {
+        return (React.createElement(Panel, { title: "Storage unavailable", paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Text, { color: colors.warning }, "Block storage is not currently offered on this team.")));
+    }
+    const useTb = catalog.price_unit === "tb";
+    const divisor = useTb ? 1024 : 1;
+    const unit = useTb ? "TB" : "GB";
+    const minUnits = Math.max(1, Math.floor((catalog.min_size_gb ?? 1) / divisor));
+    const maxUnits = Math.max(minUnits, Math.floor((catalog.max_size_gb ?? 10000) / divisor));
+    return (React.createElement(Panel, { title: `Volume size in ${unit} (${minUnits}–${maxUnits})`, paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Box, null,
+            React.createElement(Text, { color: colors.dim }, `Size (${unit}): `),
+            React.createElement(TextInput, { value: value, onChange: (v) => {
+                    setValue(v.replace(/[^0-9]/g, ""));
+                    setErr(null);
+                }, onSubmit: (v) => {
+                    const n = Number(v);
+                    if (!Number.isFinite(n) || n < minUnits || n > maxUnits) {
+                        setErr(`Enter a number between ${minUnits} and ${maxUnits}.`);
+                        return;
+                    }
+                    const sizeGb = Math.round(n * divisor / (catalog.step_gb || 1)) * (catalog.step_gb || 1);
+                    setDraft((d) => ({ ...d, storageSizeGb: sizeGb }));
+                    goNext();
+                }, placeholder: `${minUnits}` })),
+        err ? (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.error }, err))) : (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.dim }, "Enter to confirm \u00B7 Esc to go back.")))));
+}
+function LocationStep({ orderCatalog, storageCatalog, draft, setDraft, goNext, }) {
+    const isStorage = draft.kind === "storage";
+    let items = [];
+    if (isStorage && storageCatalog) {
+        items = storageCatalog.locations.map((l) => ({
+            value: l.id,
+            label: `${l.city ?? l.name} ${l.country ?? ""}`.trim(),
+            hint: l.code,
+            disabled: l.in_stock ? undefined : "out of stock",
+        }));
+    }
+    else if (orderCatalog) {
+        const plan = draft.planId ? orderCatalog.plans.find((p) => p.id === draft.planId) : undefined;
+        items = orderCatalog.locations.map((l) => {
+            const stock = plan?.per_location_stock?.[l.id];
+            const oos = Boolean(stock && !stock.in_stock);
+            return {
+                value: l.id,
+                label: `${l.city}, ${l.country}`.trim(),
+                hint: l.code,
+                disabled: oos ? "out of stock" : undefined,
+            };
+        });
+    }
+    if (items.length === 0) {
+        return (React.createElement(Panel, { title: "No locations available", paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Text, { color: colors.warning }, "Try a different plan or kind.")));
+    }
+    return (React.createElement(Panel, { title: "Pick a location", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Menu, { items: items, initialIndex: Math.max(0, items.findIndex((i) => i.value === draft.locationId)), onSelect: (v) => {
+                setDraft((d) => ({ ...d, locationId: v }));
+                goNext();
+            } })));
+}
+function ImageStep({ 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 catalog.")));
+    }
+    const items = catalog.images.map((i) => ({
+        value: i.id,
+        label: i.display_name,
+        hint: i.os_type,
+    }));
+    return (React.createElement(Panel, { title: "Pick an OS image", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Menu, { items: items, initialIndex: Math.max(0, items.findIndex((i) => i.value === draft.imageId)), onSelect: (v) => {
+                setDraft((d) => ({ ...d, imageId: v }));
+                goNext();
+            } })));
+}
+function HostnameStep({ draft, setDraft, goNext, }) {
+    const isStorage = draft.kind === "storage";
+    const [value, setValue] = useState(draft.hostname);
+    const [err, setErr] = useState(null);
+    const min = isStorage ? 1 : 5;
+    const max = isStorage ? 64 : 253;
+    return (React.createElement(Panel, { title: isStorage ? "Volume name" : "Hostname", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Box, null,
+            React.createElement(Text, { color: colors.dim }, isStorage ? "Name: " : "Hostname: "),
+            React.createElement(TextInput, { value: value, onChange: (v) => {
+                    setValue(v);
+                    setErr(null);
+                }, onSubmit: (v) => {
+                    const trimmed = v.trim();
+                    if (trimmed.length < min || trimmed.length > max) {
+                        setErr(`${isStorage ? "Name" : "Hostname"} must be ${min}–${max} characters.`);
+                        return;
+                    }
+                    setDraft((d) => ({ ...d, hostname: trimmed }));
+                    goNext();
+                }, placeholder: isStorage ? "backups" : "web-01" })),
+        err ? (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.error }, err))) : (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.dim }, "Enter to confirm \u00B7 Esc to go back.")))));
+}
+function AuthStep({ draft, setDraft, goNext, }) {
+    const api = useApi();
+    const [value, setValue] = useState(draft.authKind === "password" ? draft.password : draft.sshPublicKey);
+    const [err, setErr] = useState(null);
+    const [savedKeys, setSavedKeys] = useState(null);
+    const [savedKeysErr, setSavedKeysErr] = useState(null);
+    useEffect(() => {
+        if (draft.authKind !== "ssh-saved" || savedKeys !== null)
+            return;
+        let abort = false;
+        (async () => {
+            try {
+                const keys = await api.sshKeys.list();
+                if (!abort)
+                    setSavedKeys(keys);
+            }
+            catch (e) {
+                if (!abort)
+                    setSavedKeysErr(e instanceof Error ? e.message : String(e));
+            }
+        })();
+        return () => {
+            abort = true;
+        };
+    }, [api, draft.authKind, savedKeys]);
+    if (!draft.authKind) {
+        const items = [
+            { value: "ssh-saved", label: "Use SSH key from account", hint: "pick from your saved keys" },
+            { value: "ssh-paste", label: "Paste SSH public key", hint: "ssh-ed25519 / ssh-rsa / ecdsa-…" },
+            { value: "password", label: "Root password", hint: "min 8 chars" },
+        ];
+        return (React.createElement(Panel, { title: "How should we authorise login?", paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Menu, { items: items, onSelect: (v) => {
+                    setDraft((d) => ({ ...d, authKind: v }));
+                } })));
+    }
+    if (draft.authKind === "ssh-saved") {
+        if (savedKeysErr) {
+            return (React.createElement(Panel, { title: "SSH keys on your account", paddingX: 3, paddingY: 1, width: 80 },
+                React.createElement(Text, { color: colors.error },
+                    "Failed to load: ",
+                    savedKeysErr),
+                React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { color: colors.dim }, "Esc to go back \u00B7 pick a different auth method."))));
+        }
+        if (savedKeys === null) {
+            return (React.createElement(Panel, { title: "SSH keys on your account", paddingX: 3, paddingY: 1, width: 80 },
+                React.createElement(Spinner, { label: "Loading keys\u2026" })));
+        }
+        if (savedKeys.length === 0) {
+            return (React.createElement(Panel, { title: "No SSH keys on your account", paddingX: 3, paddingY: 1, width: 80 },
+                React.createElement(Text, { color: colors.dim }, "You don't have any saved SSH keys. Add one in the portal under Account \u2192 SSH keys, or pick a different auth method (Esc).")));
+        }
+        return (React.createElement(Panel, { title: "Pick a saved SSH key", paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Menu, { items: savedKeys.map((k) => ({
+                    value: k.id,
+                    label: k.name,
+                    hint: fingerprint(k.public_key),
+                })), onSelect: (id) => {
+                    setDraft((d) => ({ ...d, sshKeyId: id }));
+                    goNext();
+                } })));
+    }
+    const isPwd = draft.authKind === "password";
+    return (React.createElement(Panel, { title: isPwd ? "Root password" : "Paste OpenSSH public key", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Box, null,
+            React.createElement(Text, { color: colors.dim }, isPwd ? "Password: " : "Public key: "),
+            React.createElement(TextInput, { value: value, mask: isPwd ? "•" : undefined, onChange: (v) => {
+                    setValue(v);
+                    setErr(null);
+                }, onSubmit: (v) => {
+                    if (isPwd) {
+                        if (v.length < 8) {
+                            setErr("Password must be ≥8 characters.");
+                            return;
+                        }
+                        setDraft((d) => ({ ...d, password: v }));
+                    }
+                    else {
+                        if (!(v.startsWith("ssh-") || v.startsWith("ecdsa-") || v.startsWith("sk-"))) {
+                            setErr("Doesn't look like an OpenSSH public key.");
+                            return;
+                        }
+                        setDraft((d) => ({ ...d, sshPublicKey: v }));
+                    }
+                    goNext();
+                }, placeholder: isPwd ? "hunter2hunter2" : "ssh-ed25519 AAAA…" })),
+        err ? (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.error }, err))) : (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.dim }, "Enter to confirm \u00B7 Esc to pick a different auth method.")))));
+}
+function PaymentStep({ methods, creditBalance, balanceCurrency, estimatedCost, draft, setDraft, goNext, }) {
+    const eligible = methods.filter((m) => !isAch(m));
+    const creditsCover = estimatedCost > 0 && creditBalance >= estimatedCost;
+    const rows = [
+        ...(creditsCover ? [{ kind: "credits-only" }] : []),
+        ...eligible.map((m) => ({ kind: "method", m })),
+        ...(creditBalance > 0 && !creditsCover ? [{ kind: "checkbox" }] : []),
+        { kind: "confirm" },
+    ];
+    const [cursor, setCursor] = useState(() => {
+        if (creditsCover)
+            return 0;
+        const sel = rows.findIndex((r) => r.kind === "method" && r.m.id === draft.paymentMethodId);
+        if (sel >= 0)
+            return sel;
+        const def = rows.findIndex((r) => r.kind === "method" && r.m.is_default);
+        return def >= 0 ? def : 0;
+    });
+    const [err, setErr] = useState(null);
+    const chosen = eligible.find((m) => m.id === draft.paymentMethodId) ?? null;
+    const isBitpay = chosen?.provider === "bitpay";
+    const creditsOnlySelected = draft.applyCredits && draft.paymentMethodId === null;
+    useEffect(() => {
+        if (creditsCover && draft.paymentMethodId === null && !draft.applyCredits) {
+            setDraft((d) => ({ ...d, applyCredits: true, paymentKind: "method" }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const activate = (row) => {
+        setErr(null);
+        if (row.kind === "credits-only") {
+            setDraft((d) => ({
+                ...d,
+                applyCredits: true,
+                paymentMethodId: null,
+                paymentKind: "method",
+            }));
+        }
+        else if (row.kind === "method") {
+            const bp = row.m.provider === "bitpay";
+            setDraft((d) => ({
+                ...d,
+                paymentMethodId: row.m.id,
+                paymentKind: bp ? "bitpay" : "method",
+                applyCredits: bp ? false : d.applyCredits,
+            }));
+        }
+        else if (row.kind === "checkbox") {
+            if (isBitpay)
+                return;
+            setDraft((d) => ({ ...d, applyCredits: !d.applyCredits }));
+        }
+        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.");
+                return;
+            }
+            goNext();
+        }
+    };
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setCursor((c) => (c === 0 ? rows.length - 1 : c - 1));
+        }
+        else if (key.downArrow) {
+            setCursor((c) => (c === rows.length - 1 ? 0 : c + 1));
+        }
+        else if (key.return || input === " ") {
+            const row = rows[cursor];
+            if (row)
+                activate(row);
+        }
+    });
+    if (eligible.length === 0 && !creditsCover) {
+        return (React.createElement(Panel, { title: "No saved payment methods", paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Text, null, "You don't have any saved payment methods on this team yet."),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Open the Billing screen (Ctrl+B from the Dashboard) to add a card, PayPal mandate, or BitPay wallet, then come back.")),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Esc to go back."))));
+    }
+    const creditsLabel = `$${creditBalance.toFixed(2)}${balanceCurrency ? ` ${balanceCurrency}` : ""}`;
+    return (React.createElement(Panel, { title: "Payment", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Box, { flexDirection: "column" },
+            rows.map((row, i) => {
+                const focused = i === cursor;
+                const marker = focused ? `${glyphs.chevronRight} ` : "  ";
+                if (row.kind === "credits-only") {
+                    const on = creditsOnlySelected;
+                    return (React.createElement(Box, { key: "credits-only" },
+                        React.createElement(Text, { color: focused ? colors.accent : colors.dim }, marker),
+                        React.createElement(Text, { bold: focused, color: on ? colors.accent : focused ? colors.text : colors.dim }, `${on ? "●" : "○"} Credits only`),
+                        React.createElement(Text, { color: colors.dim }, `   ${creditsLabel} covers $${estimatedCost.toFixed(2)}`)));
+                }
+                if (row.kind === "method") {
+                    const on = draft.paymentMethodId === row.m.id;
+                    return (React.createElement(Box, { key: row.m.id },
+                        React.createElement(Text, { color: focused ? colors.accent : colors.dim }, marker),
+                        React.createElement(Text, { bold: focused, color: on ? colors.accent : focused ? colors.text : colors.dim }, `${on ? "●" : "○"} ${describePaymentMethod(row.m)}`),
+                        row.m.provider === "bitpay" ? (React.createElement(Text, { color: colors.dim }, "   crypto · opens hosted checkout")) : null));
+                }
+                if (row.kind === "checkbox") {
+                    const disabled = isBitpay;
+                    return (React.createElement(Box, { key: "checkbox", marginTop: 1 },
+                        React.createElement(Text, { color: focused ? colors.accent : colors.dim }, marker),
+                        React.createElement(Text, { bold: focused, color: disabled ? colors.dim : draft.applyCredits ? colors.accent : focused ? colors.text : colors.dim }, `[${draft.applyCredits ? "x" : " "}] Apply credit balance first`),
+                        React.createElement(Text, { color: colors.dim }, disabled ? "   (can't combine with crypto)" : `   ${creditsLabel}, remainder on the method`)));
+                }
+                return (React.createElement(Box, { key: "confirm", marginTop: 1, flexShrink: 0 },
+                    React.createElement(ActionButton, { keybind: "\u21B5", label: "Confirm", onPress: () => activate(row), focused: focused })));
+            }),
+            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,
+            err ? (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.error }, err))) : null,
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "\u2191\u2193 move \u00B7 Enter or Space select \u00B7 Enter on Confirm to continue")))));
+}
+function isAch(m) {
+    return m.provider === "stripe" && m.card_brand === "us_bank_account";
+}
+function describePaymentMethod(m) {
+    const brand = m.card_brand ? capitalize(m.card_brand) : null;
+    const last4 = m.card_last4 ? `····${m.card_last4}` : null;
+    const provider = capitalize(m.provider);
+    const head = brand && last4 ? `${brand} ${last4}` : brand ?? last4 ?? provider;
+    const tail = [];
+    if (m.nickname)
+        tail.push(`(${m.nickname})`);
+    if (m.is_default)
+        tail.push("· default");
+    return tail.length ? `${head} ${tail.join(" ")}` : head;
+}
+function capitalize(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+function SummaryStep({ draft, cat, onSubmit, onEdit, }) {
+    const projectName = cat.projects.find((p) => p.id === draft.projectId)?.name;
+    const locName = draft.kind === "storage"
+        ? cat.storageCatalog?.locations.find((l) => l.id === draft.locationId)?.city
+        : cat.orderCatalog?.locations.find((l) => l.id === draft.locationId)?.city;
+    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);
+    const specLine = draft.kind === "vps"
+        ? `${draft.customSpec.cpu_cores ?? "?"} vCPU · ${(draft.customSpec.ram_mb ?? 0) / 1024} 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 ${Math.round(plan.ram_mb / 1024)}G ${plan.disk_gb}G${plan.gpu_model ? ` · ${plan.gpu_model}` : ""}`
+            : undefined;
+    const paymentLabel = (() => {
+        const parts = [];
+        if (draft.applyCredits && cat.creditBalance > 0) {
+            parts.push(`credits ($${cat.creditBalance.toFixed(2)}${cat.balanceCurrency ? ` ${cat.balanceCurrency}` : ""})`);
+        }
+        if (chosenPm)
+            parts.push(describePaymentMethod(chosenPm));
+        return parts.length ? parts.join(" + ") : "(none)";
+    })();
+    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 || "—" }),
+            draft.kind !== "storage" ? (React.createElement(Row, { label: "Auth", value: draft.authKind === "password"
+                    ? "root password (hidden)"
+                    : draft.authKind === "ssh-paste"
+                        ? "pasted SSH public key"
+                        : "—" })) : null,
+            React.createElement(Row, { label: "Payment", value: paymentLabel }),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Menu, { items: [
+                        { value: "submit", label: "Submit order", keybind: "enter" },
+                        { value: "edit", label: "Edit from start", keybind: "e" },
+                        { value: "cancel", label: "Cancel", keybind: "esc" },
+                    ], onSelect: (v) => {
+                        if (v === "submit")
+                            void onSubmit();
+                        else if (v === "edit")
+                            onEdit();
+                    } })))));
+}
+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))));
+}
+function ResultStep({ result, }) {
+    if (!result) {
+        return (React.createElement(Panel, { title: "Done", paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Text, { color: colors.dim }, "No result yet.")));
+    }
+    if (!result.ok) {
+        return (React.createElement(Panel, { title: "Order failed", paddingX: 3, paddingY: 1, width: 80, borderColor: colors.error },
+            React.createElement(Text, { color: colors.error }, result.error),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Press Esc or Enter to return to Dashboard."))));
+    }
+    const color = statusColor(result.status ?? "") ?? colors.success;
+    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 ?? "—" }),
+            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.")),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Press Esc or Enter to return to Dashboard.")))));
+}
+function renderProgressDots(current, total) {
+    let done = "";
+    let pending = "";
+    for (let i = 1; i <= total; i++) {
+        if (i <= current)
+            done += "●";
+        else
+            pending += "○";
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Text, { color: colors.text }, done),
+        pending ? React.createElement(Text, { color: colors.dim }, pending) : null));
+}
+function tipForStep(step, draft, cancelConfirm) {
+    if (cancelConfirm)
+        return "y to cancel and return to Dashboard, any other key to keep editing.";
+    switch (step) {
+        case "kind":
+            return "↑↓ to choose, Enter to select. Esc to cancel.";
+        case "vps-spec":
+            return "Tab location/spec · ↑↓ move · Enter continue · Esc back.";
+        case "hostname":
+            return "Type a hostname (5–253 chars). Enter to confirm · Esc back.";
+        case "auth":
+            return draft.authKind
+                ? "Type and Enter to confirm. Esc to pick a different method."
+                : "Pick how to authorise login. Esc to go back.";
+        case "size":
+            return "Type a number then Enter. Esc to go back.";
+        case "payment":
+            return "↑↓ move · Enter/Space select · Enter on Confirm. Esc back.";
+        case "summary":
+            return "Enter on Submit to send. Edit to start over. Esc to go back.";
+        case "submitting":
+            return "Talking to the API…";
+        case "result":
+            return "Press Esc or Enter to return to the Dashboard.";
+        default:
+            return "↑↓ to choose, Enter to select. ← / Backspace to go back. Esc to cancel.";
+    }
+}
+function buildCustomSpec(s) {
+    if (!s.cpu_cores || !s.ram_mb || !s.disk_gb)
+        return undefined;
+    return {
+        cpu_cores: s.cpu_cores,
+        ram_mb: s.ram_mb,
+        disk_gb: s.disk_gb,
+        bandwidth_tb: s.bandwidth_tb,
+        dedicated: s._dedicated,
+    };
+}
+function fingerprint(pubKey) {
+    const parts = pubKey.trim().split(/\s+/);
+    if (parts.length === 0)
+        return "—";
+    const algo = parts[0] ?? "";
+    const b64 = parts[1] ?? "";
+    const comment = parts.slice(2).join(" ");
+    if (comment)
+        return `${algo}  ${comment}`;
+    if (b64)
+        return `${algo}  ${b64.slice(0, 12)}…`;
+    return algo;
+}
+function estimateMonthlyCost(draft, cat) {
+    if (draft.planId && cat.orderCatalog) {
+        const plan = cat.orderCatalog.plans.find((p) => p.id === draft.planId);
+        if (plan?.monthly_price != null) {
+            return { amount: plan.monthly_price, label: plan.name };
+        }
+    }
+    if (draft.kind === "vps" && cat.orderCatalog?.custom_config) {
+        const cfg = cat.orderCatalog.custom_config;
+        const baseCfg = draft.customSpec._dedicated ? cfg.dedicated : cfg;
+        const cpu = draft.customSpec.cpu_cores;
+        const ramMb = draft.customSpec.ram_mb;
+        const disk = draft.customSpec.disk_gb;
+        if (cpu && ramMb && disk) {
+            const ramGb = ramMb / 1024;
+            const bwTb = draft.customSpec.bandwidth_tb ?? cfg.bandwidth_included_tb;
+            const extraTb = Math.max(0, bwTb - cfg.bandwidth_included_tb);
+            const amount = baseCfg.base_price +
+                cpu * baseCfg.price_per_cpu +
+                ramGb * baseCfg.price_per_ram_gb +
+                disk * baseCfg.price_per_disk_gb +
+                extraTb * cfg.price_per_tb;
+            return {
+                amount,
+                label: `Custom · ${cpu}c ${ramGb}GB ${disk}GB${draft.customSpec._dedicated ? " · dedicated" : ""}`,
+            };
+        }
+    }
+    if (draft.kind === "storage" && draft.storageSizeGb && cat.storageCatalog) {
+        const price = Number(cat.storageCatalog.price_per_gb);
+        if (Number.isFinite(price) && price > 0) {
+            const useTb = cat.storageCatalog.price_unit === "tb";
+            const units = useTb ? draft.storageSizeGb / 1024 : draft.storageSizeGb;
+            return {
+                amount: price * units,
+                label: `${draft.storageSizeGb} GB block volume`,
+            };
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=Order.js.map