@synteq/cli 0.2.0 → 1.1.2

package/dist/tui/screens/Order.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, useCallback } from "react";
+import React, { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import { Box, Text, useInput } from "ink";
 import TextInput from "ink-text-input";
 import { Panel } from "../components/Panel.js";
@@ -16,7 +16,10 @@ 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 { orderResultMessage } from "../../ui/order-result.js";
 import { glyphs } from "../theme/glyphs.js";
+import { deployPresetRef } from "./deployPreset.js";
+import { RUNTIMES, RUNTIME_LABELS } from "../../functions-support/runtime.js";
 const emptyDraft = {
     kind: null,
     projectId: null,
@@ -35,6 +38,10 @@ const emptyDraft = {
     applyCredits: false,
     paymentMethodId: null,
     paymentKind: "method",
+    fnName: "",
+    fnPlanTier: null,
+    fnRuntime: "node22",
+    fnLocationId: null,
 };
 const PROGRESS_STEPS = [
     "kind",
@@ -46,9 +53,16 @@ const PROGRESS_STEPS = [
     "payment",
     "summary",
 ];
-function stepsForKind(kind) {
+function stepsForKind(kind, fnLocations = 0) {
     const base = ["kind", "project"];
-    if (kind === "vps") {
+    if (kind === "function") {
+        // The location step only appears when there is a choice to make.
+        base.push("fn-name", "fn-plan", "fn-runtime");
+        if (fnLocations > 1)
+            base.push("fn-location");
+        base.push("fn-summary");
+    }
+    else if (kind === "vps") {
         base.push("vps-spec", "image", "hostname", "auth", "payment", "summary");
     }
     else if (kind === "gpu" || kind === "dedicated" || kind === "vds") {
@@ -83,17 +97,21 @@ export function Order() {
         paymentMethods: [],
         creditBalance: 0,
         balanceCurrency: "",
+        fnPlans: [],
+        fnLocations: [],
     });
     useEffect(() => {
         let cancelled = false;
         (async () => {
             try {
-                const [orderCatalog, storageCatalog, projects, methods, balance] = await Promise.all([
+                const [orderCatalog, storageCatalog, projects, methods, balance, fnPlans, fnLocations] = await Promise.all([
                     api.orders.catalog().catch(() => null),
                     api.storage.catalog().catch(() => null),
                     api.projects.list().catch(() => []),
                     api.payments.methods().catch(() => []),
                     api.billing.balance().catch(() => ({})),
+                    api.functions.plans().catch(() => []),
+                    api.functions.locations().catch(() => []),
                 ]);
                 if (cancelled)
                     return;
@@ -109,6 +127,8 @@ export function Order() {
                     paymentMethods: methods,
                     creditBalance: Number.isFinite(credit) && credit > 0 ? credit : 0,
                     balanceCurrency: balance.currency ?? "",
+                    fnPlans,
+                    fnLocations,
                 });
             }
             catch (e) {
@@ -127,10 +147,12 @@ export function Order() {
             setDraft((d) => ({ ...d, projectId: def.id }));
         }
     }, [cat.loading, cat.projects, draft.projectId]);
-    const visibleSteps = useMemo(() => stepsForKind(draft.kind), [draft.kind]);
+    const visibleSteps = useMemo(() => stepsForKind(draft.kind, cat.fnLocations.length), [draft.kind, cat.fnLocations.length]);
     const stepIndex = visibleSteps.indexOf(step);
     const stepNumber = stepIndex >= 0 ? stepIndex + 1 : 1;
     const totalSteps = visibleSteps.length;
+    const netEstimate = useMemo(() => estimateMonthlyCost(draft, cat), [draft, cat]);
+    const quote = usePreviewQuote(draft, cat, api, netEstimate?.amount ?? 0);
     const goPrev = useCallback(() => {
         if (step === "kind")
             return;
@@ -144,6 +166,7 @@ export function Order() {
             setStep(visibleSteps[idx + 1]);
     }, [step, visibleSteps]);
     const textInputOwnsKeys = step === "hostname" ||
+        step === "fn-name" ||
         step === "size" ||
         (step === "auth" && !!draft.authKind) ||
         step === "vps-spec";
@@ -194,10 +217,25 @@ export function Order() {
                 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 () => {
+        body = (React.createElement(StepRouter, { step: step, draft: draft, setDraft: setDraft, userEmail: header.userEmail, api: api, cat: cat, creditBalance: cat.creditBalance, balanceCurrency: cat.balanceCurrency, quote: quote, goNext: goNext, onApp: () => {
+                // App: the Deploy walkthrough owns naming, plan (cap-aware) and the
+                // paid-plan order; open it at its "New app" step.
+                deployPresetRef.current = { newApp: true };
+                navigate("deploy");
+            }, onSubmit: async () => {
                 setStep("submitting");
                 try {
-                    if (draft.kind === "storage") {
+                    if (draft.kind === "function") {
+                        const loc = cat.fnLocations.length === 1 ? cat.fnLocations[0] : cat.fnLocations.find((l) => l.locationId === draft.fnLocationId);
+                        const fn = await api.functions.create({
+                            name: draft.fnName.trim(),
+                            planTier: draft.fnPlanTier ?? cat.fnPlans[0]?.name ?? "",
+                            runtime: draft.fnRuntime,
+                            ...(loc ? { locationId: loc.locationId } : {}),
+                        }, draft.projectId ?? undefined);
+                        setResult({ ok: true, fn });
+                    }
+                    else if (draft.kind === "storage") {
                         const out = await api.storage.order({
                             name: draft.hostname || "volume",
                             size_gb: draft.storageSizeGb ?? 0,
@@ -267,7 +305,7 @@ export function Order() {
         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(LivePriceFooter, { draft: draft, cat: cat, quote: quote })))),
         React.createElement(Box, { flexDirection: "column" },
             React.createElement(Tip, null, tipForStep(step, draft, cancelConfirm)),
             React.createElement(StatusBar, { right: [
@@ -276,22 +314,40 @@ export function Order() {
                     header.balance ?? "",
                 ].filter(Boolean) }))));
 }
-function LivePriceFooter({ draft, cat, }) {
+function LivePriceFooter({ draft, cat, quote, }) {
     const est = useMemo(() => estimateMonthlyCost(draft, cat), [draft, cat]);
-    const shouldShow = draft.kind !== null && draft.projectId !== null;
+    const shouldShow = draft.kind !== null && draft.kind !== "function" && 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 }, "-"))));
+    // A landed, non-degraded server quote is the number — even at zero tax
+    // (CLI-M3: the zero-tax quote used to be discarded for client math, which
+    // can drift from the seam). Unquoted/degraded → client estimate.
+    const showTax = quote.hasTax && !quote.degraded;
+    const amount = quote.quoted && !quote.degraded ? quote.total : est?.amount;
+    return (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+        React.createElement(Box, { paddingX: 2, paddingY: 0, borderStyle: "round", borderColor: colors.dim },
+            React.createElement(Text, { color: colors.dim }, "Est. monthly: "),
+            amount != null ? (React.createElement(React.Fragment, null,
+                React.createElement(Text, { color: colors.accent, bold: true }, `$${amount.toFixed(2)}`),
+                React.createElement(Text, { color: colors.dim }, `  · ${est?.label ?? ""}`),
+                showTax ? (React.createElement(Text, { color: colors.dim }, `  (incl. ${quote.taxLabel.toLowerCase()})`)) : null)) : (React.createElement(Text, { color: colors.dim }, "-"))),
+        quote.degraded ? (React.createElement(Text, { color: colors.warning }, `${quote.taxLabel} estimate unavailable — final total shown at invoice.`)) : null));
 }
 function StepRouter(props) {
     const { step, draft, setDraft, cat, goNext } = props;
     switch (step) {
         case "kind":
-            return React.createElement(KindStep, { draft: draft, setDraft: setDraft, goNext: goNext });
+            return React.createElement(KindStep, { draft: draft, setDraft: setDraft, goNext: goNext, onApp: props.onApp });
+        case "fn-name":
+            return React.createElement(FnNameStep, { api: props.api, draft: draft, setDraft: setDraft, goNext: goNext });
+        case "fn-plan":
+            return React.createElement(FnPlanStep, { plans: cat.fnPlans, draft: draft, setDraft: setDraft, goNext: goNext });
+        case "fn-runtime":
+            return React.createElement(FnRuntimeStep, { draft: draft, setDraft: setDraft, goNext: goNext });
+        case "fn-location":
+            return React.createElement(FnLocationStep, { locations: cat.fnLocations, draft: draft, setDraft: setDraft, goNext: goNext });
+        case "fn-summary":
+            return React.createElement(FnSummaryStep, { draft: draft, cat: cat, onSubmit: props.onSubmit, onEdit: props.onEdit });
         case "project":
             return React.createElement(ProjectStep, { projects: cat.projects, draft: draft, setDraft: setDraft, goNext: goNext });
         case "plan-location":
@@ -310,21 +366,25 @@ function StepRouter(props) {
             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 }));
+            const { quote } = props;
+            const showTax = quote.hasTax && !quote.degraded;
+            return (React.createElement(PaymentStep, { methods: cat.paymentMethods, creditBalance: cat.creditBalance, balanceCurrency: cat.balanceCurrency, estimatedCost: showTax ? quote.total : est?.amount ?? 0, quote: quote, draft: draft, setDraft: setDraft, goNext: goNext }));
         }
         case "summary":
-            return (React.createElement(SummaryStep, { draft: draft, cat: cat, onSubmit: props.onSubmit, onEdit: props.onEdit }));
+            return (React.createElement(SummaryStep, { draft: draft, cat: cat, quote: props.quote, 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" })));
+                React.createElement(Spinner, { label: draft.kind === "function" ? `Creating ${draft.fnName}…` : "Submitting order…" })));
         case "result":
             return React.createElement(ResultStep, { result: props.result });
         default:
             return React.createElement(Text, null, "-");
     }
 }
-function KindStep({ draft, setDraft, goNext, }) {
+function KindStep({ draft, setDraft, goNext, onApp, }) {
     const items = [
+        { value: "app", label: "App", hint: "managed container; name → plan → deploy" },
+        { value: "function", label: "Function", hint: "serverless; name → plan → runtime → region" },
         { value: "vps", label: "VPS", hint: "custom CPU/RAM/disk; shared or dedicated cores" },
         { value: "vds", label: "VDS", hint: "tier-based performance servers (order via web for now)" },
         { value: "gpu", label: "GPU", hint: "preset GPU-bearing plans" },
@@ -333,6 +393,10 @@ function KindStep({ draft, setDraft, goNext, }) {
     ];
     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 === "app") {
+                    onApp();
+                    return;
+                }
                 if (v !== draft.kind) {
                     setDraft((d) => ({
                         ...d,
@@ -352,6 +416,124 @@ function KindStep({ draft, setDraft, goNext, }) {
                 goNext();
             } })));
 }
+// ---------------------------------------------------------------- Function
+// A function is created straight through POST /functions (no order row, no
+// payment step): name → plan → runtime → (location) → confirm. Mirrors what
+// `synteq function init` does with the API.
+const FN_NAME_RE = /^[a-z0-9][a-z0-9-]{1,61}[a-z0-9]$/;
+function FnNameStep({ api, draft, setDraft, goNext, }) {
+    const [value, setValue] = useState(draft.fnName);
+    const [err, setErr] = useState(null);
+    const [checking, setChecking] = useState(false);
+    return (React.createElement(Panel, { title: "Function name", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Text, { color: colors.dim }, "Lowercase letters, digits and dashes \u2014 it becomes the hostname."),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.dim }, "Name: "),
+            checking ? (React.createElement(Spinner, { label: `Checking ${value.trim()}…` })) : (React.createElement(TextInput, { value: value, onChange: (v) => {
+                    setValue(v);
+                    setErr(null);
+                }, onSubmit: (v) => {
+                    const name = v.trim();
+                    if (!FN_NAME_RE.test(name)) {
+                        setErr("Use 3–63 lowercase letters, digits and dashes.");
+                        return;
+                    }
+                    setChecking(true);
+                    api.functions
+                        .checkName(name)
+                        .then((check) => {
+                        if (!check.available) {
+                            setErr(`"${name}" isn't available${check.reason ? `: ${check.reason}` : "."}`);
+                            return;
+                        }
+                        setDraft((d) => ({ ...d, fnName: name }));
+                        goNext();
+                    })
+                        .catch((e) => setErr(e instanceof Error ? e.message : String(e)))
+                        .finally(() => setChecking(false));
+                }, placeholder: "my-fn" }))),
+        err ? (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.error }, err))) : null));
+}
+function fnPlanHint(p) {
+    const parts = [
+        `${p.memoryMib} MB`,
+        p.cpuMillicores ? `${(p.cpuMillicores / 1000).toFixed(2)} cores` : "",
+        p.pricePerMillionInvocationsUsd != null ? `$${p.pricePerMillionInvocationsUsd}/M invocations` : "",
+        p.pricePerGbSecondUsd != null ? `$${p.pricePerGbSecondUsd}/GB-s` : "",
+        p.keepWarmMonthlyUsd != null ? `keep-warm $${p.keepWarmMonthlyUsd}/mo` : "",
+    ];
+    return parts.filter(Boolean).join(" · ");
+}
+function FnPlanStep({ plans, draft, setDraft, goNext, }) {
+    if (plans.length === 0) {
+        return (React.createElement(Panel, { title: "No function plans", paddingX: 3, paddingY: 1, width: 80 },
+            React.createElement(Text, { color: colors.error }, "No function plans are available on this account."),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Esc to go back."))));
+    }
+    const items = plans.map((p) => ({
+        value: p.name,
+        label: p.displayName || p.name,
+        hint: fnPlanHint(p),
+    }));
+    return (React.createElement(Panel, { title: "Plan", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Text, { color: colors.dim },
+            "Pick a plan for ",
+            draft.fnName,
+            "."),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Menu, { items: items, initialIndex: Math.max(0, items.findIndex((i) => i.value === draft.fnPlanTier)), onSelect: (v) => {
+                    setDraft((d) => ({ ...d, fnPlanTier: v }));
+                    goNext();
+                } }))));
+}
+function FnRuntimeStep({ draft, setDraft, goNext, }) {
+    const items = RUNTIMES.map((r) => ({ value: r, label: RUNTIME_LABELS[r], hint: r }));
+    return (React.createElement(Panel, { title: "Runtime", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Menu, { items: items, initialIndex: Math.max(0, items.findIndex((i) => i.value === draft.fnRuntime)), onSelect: (v) => {
+                setDraft((d) => ({ ...d, fnRuntime: v }));
+                goNext();
+            } })));
+}
+function FnLocationStep({ locations, draft, setDraft, goNext, }) {
+    const items = locations.map((l) => ({
+        value: l.locationId,
+        label: l.city || l.code,
+        hint: [l.code, l.country].filter(Boolean).join(" · "),
+    }));
+    return (React.createElement(Panel, { title: "Region", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Menu, { items: items, initialIndex: Math.max(0, items.findIndex((i) => i.value === draft.fnLocationId)), onSelect: (v) => {
+                setDraft((d) => ({ ...d, fnLocationId: v }));
+                goNext();
+            } })));
+}
+function FnSummaryStep({ draft, cat, onSubmit, onEdit, }) {
+    const projectName = cat.projects.find((p) => p.id === draft.projectId)?.name;
+    const plan = cat.fnPlans.find((p) => p.name === draft.fnPlanTier);
+    const loc = cat.fnLocations.length === 1
+        ? cat.fnLocations[0]
+        : cat.fnLocations.find((l) => l.locationId === draft.fnLocationId);
+    return (React.createElement(Panel, { title: "Create this function?", paddingX: 3, paddingY: 1, width: 80 },
+        React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Row, { label: "Name", value: draft.fnName }),
+            React.createElement(Row, { label: "Project", value: projectName ?? draft.projectId }),
+            React.createElement(Row, { label: "Plan", value: plan ? `${plan.displayName || plan.name} · ${fnPlanHint(plan)}` : draft.fnPlanTier }),
+            React.createElement(Row, { label: "Runtime", value: RUNTIME_LABELS[draft.fnRuntime] }),
+            React.createElement(Row, { label: "Region", value: loc ? `${loc.city || loc.code} (${loc.code})` : "default" }),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Nothing is charged now: runs bill against the plan's credits.")),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Menu, { items: [
+                        { value: "create", label: "Create function", keybind: "enter" },
+                        { value: "edit", label: "Edit from start", keybind: "e" },
+                    ], onSelect: (v) => {
+                        if (v === "create")
+                            void onSubmit();
+                        else
+                            onEdit();
+                    } })))));
+}
 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 },
@@ -1126,7 +1308,7 @@ function AuthStep({ draft, setDraft, goNext, }) {
             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, }) {
+function PaymentStep({ methods, creditBalance, balanceCurrency, estimatedCost, quote, draft, setDraft, goNext, }) {
     const eligible = methods.filter((m) => !isAch(m));
     const creditsCover = estimatedCost > 0 && creditBalance >= estimatedCost;
     const rows = [
@@ -1210,8 +1392,14 @@ function PaymentStep({ methods, creditBalance, balanceCurrency, estimatedCost, d
                 React.createElement(Text, { color: colors.dim }, "Esc to go back."))));
     }
     const creditsLabel = `$${creditBalance.toFixed(2)}${balanceCurrency ? ` ${balanceCurrency}` : ""}`;
+    const showTaxBreakdown = quote.hasTax && !quote.degraded;
     return (React.createElement(Panel, { title: "Payment", paddingX: 3, paddingY: 1, width: 80 },
         React.createElement(Box, { flexDirection: "column" },
+            showTaxBreakdown ? (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+                React.createElement(Row, { label: "Subtotal", value: `$${quote.subtotal.toFixed(2)}` }),
+                React.createElement(Row, { label: quote.taxLabel, value: `$${quote.taxTotal.toFixed(2)}` }),
+                React.createElement(Row, { label: "Total", value: `$${quote.total.toFixed(2)}` }))) : quote.degraded ? (React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, { color: colors.warning }, `${quote.taxLabel} estimate unavailable — final total shown at invoice.`))) : null,
             rows.map((row, i) => {
                 const focused = i === cursor;
                 const marker = focused ? `${glyphs.chevronRight} ` : "  ";
@@ -1266,7 +1454,7 @@ function describePaymentMethod(m) {
 function capitalize(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
 }
-function SummaryStep({ draft, cat, onSubmit, onEdit, }) {
+function SummaryStep({ draft, cat, quote, 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
@@ -1311,6 +1499,11 @@ function SummaryStep({ draft, cat, onSubmit, onEdit, }) {
                         ? "pasted SSH public key"
                         : "-" })) : null,
             React.createElement(Row, { label: "Payment", value: paymentLabel }),
+            quote.hasTax && !quote.degraded ? (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+                React.createElement(Row, { label: "Subtotal", value: `$${quote.subtotal.toFixed(2)}` }),
+                React.createElement(Row, { label: quote.taxLabel, value: `$${quote.taxTotal.toFixed(2)}` }),
+                React.createElement(Row, { label: "Total", value: `$${quote.total.toFixed(2)}` }))) : quote.degraded ? (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.warning }, `${quote.taxLabel} estimate unavailable — final total shown at invoice.`))) : null,
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Menu, { items: [
                         { value: "submit", label: "Submit order", keybind: "enter" },
@@ -1334,6 +1527,19 @@ function ResultStep({ 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 && "fn" in result) {
+        const fn = result.fn;
+        return (React.createElement(Panel, { title: "Function created", paddingX: 3, paddingY: 1, width: 80, borderColor: colors.success },
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Row, { label: "Function", value: fn.slug }),
+                React.createElement(Row, { label: "URL", value: fn.hostname ? `https://${fn.hostname}` : "-" }),
+                React.createElement(Row, { label: "Plan", value: fn.planTier }),
+                React.createElement(Row, { label: "Runtime", value: RUNTIME_LABELS[fn.runtime] ?? fn.runtime }),
+                React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { color: colors.dim }, `Deploy code with \`synteq function deploy ${fn.slug} --dir .\``)),
+                React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { color: colors.dim }, "Press Esc or Enter to return to Dashboard.")))));
+    }
     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),
@@ -1341,6 +1547,10 @@ function ResultStep({ result, }) {
                 React.createElement(Text, { color: colors.dim }, "Press Esc or Enter to return to Dashboard."))));
     }
     const color = statusColor(result.status ?? "") ?? colors.success;
+    // QA-21: closing line follows the order status — an unpaid order
+    // (awaiting_customer / payment_pending, no checkout) must never read
+    // "All done".
+    const closing = orderResultMessage(result.status, result.checkoutUrl);
     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" }),
@@ -1348,9 +1558,7 @@ function ResultStep({ result, }) {
             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(Text, { color: closing.tone === "warning" ? colors.warning : color }, closing.text)),
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: colors.dim }, "Press Esc or Enter to return to Dashboard.")))));
 }
@@ -1379,6 +1587,10 @@ function tipForStep(step, draft, cancelConfirm) {
             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 "fn-name":
+            return "Type a name (lowercase letters, digits, dashes). Enter to check and continue · Esc back.";
+        case "fn-summary":
+            return "Enter on Create to create the function. Edit to start over. Esc to go back.";
         case "auth":
             return draft.authKind
                 ? "Type and Enter to confirm. Esc to pick a different method."
@@ -1451,7 +1663,9 @@ function estimateMonthlyCost(draft, cat) {
                 cpu * baseCfg.price_per_cpu +
                 ramGb * baseCfg.price_per_ram_gb +
                 disk * baseCfg.price_per_disk_gb +
-                extraTb * cfg.price_per_tb;
+                // Dedicated specs price extra bandwidth at the dedicated rate
+                // (backend pricing.py custom_virtualized_dedicated_price_per_tb).
+                extraTb * (baseCfg.price_per_tb ?? cfg.price_per_tb);
             return {
                 amount,
                 label: `Custom · ${cpu}c ${ramGb}GB ${disk}GB${draft.customSpec._dedicated ? " · dedicated" : ""}`,
@@ -1471,4 +1685,123 @@ function estimateMonthlyCost(draft, cat) {
     }
     return null;
 }
+/** Same {kind, spec, quantity} shape `POST /orders` sends (see
+ *  `virtualizedOrderInToGenericSpecs` / storage's order body in
+ *  `src/api/client.ts`) — the preview must price exactly what create
+ *  would charge. Returns null when the draft isn't priceable yet, same
+ *  gating as `estimateMonthlyCost`. */
+function buildPreviewBody(draft) {
+    if (!draft.projectId || !draft.locationId)
+        return null;
+    if (draft.kind === "storage") {
+        if (!draft.storageSizeGb)
+            return null;
+        return {
+            kind: "block_volume",
+            spec: {
+                size_gb: draft.storageSizeGb,
+                project_id: draft.projectId,
+                location_id: draft.locationId,
+            },
+            quantity: 1,
+        };
+    }
+    if (draft.kind === "vps" || draft.kind === "vds" || draft.kind === "gpu" || draft.kind === "dedicated") {
+        const spec = {
+            project_id: draft.projectId,
+            location_id: draft.locationId,
+            // Preview prices independent of image/hostname/auth — omit them so
+            // the quote can fire as soon as spec + location are picked (mirrors
+            // the FE preview's early-fire behaviour and the backend's own
+            // preview-host/preview-volume placeholder injection for identity
+            // fields that don't affect price).
+        };
+        if (draft.planId) {
+            spec.plan_id = draft.planId;
+        }
+        else if (draft.kind === "vds" && draft.tierCategorySlug && draft.tierIndex != null) {
+            spec.tier_category_slug = draft.tierCategorySlug;
+            spec.tier_index = draft.tierIndex;
+        }
+        else if (draft.kind === "vps" && draft.customSpec.cpu_cores && draft.customSpec.ram_gb && draft.customSpec.disk_gb) {
+            spec.custom_cpu_cores = draft.customSpec.cpu_cores;
+            spec.custom_ram_gb = draft.customSpec.ram_gb;
+            spec.custom_disk_gb = draft.customSpec.disk_gb;
+            if (draft.customSpec.bandwidth_tb != null)
+                spec.custom_bandwidth_tb = draft.customSpec.bandwidth_tb;
+            spec.custom_dedicated = !!draft.customSpec._dedicated;
+        }
+        else {
+            return null;
+        }
+        return { kind: "virtualized", spec, quantity: 1 };
+    }
+    return null;
+}
+/** Debounced POST /orders/preview keyed on the priced config. Keeps
+ *  `net` (the instant client-computed estimate) as both the pre-quote
+ *  placeholder and the degraded/error fallback; `hasTax` gates every
+ *  breakdown row so a zero-tax order renders identically to today. */
+function usePreviewQuote(draft, cat, api, net) {
+    const [resp, setResp] = useState(null);
+    // The config the current `resp`/`degraded` was fetched for. While the
+    // draft has changed but the fresh quote hasn't landed yet, this lags
+    // `bodyKey` — the signal that the on-screen quote is stale.
+    const [respKey, setRespKey] = useState(null);
+    const [degraded, setDegraded] = useState(false);
+    const reqIdRef = useRef(0);
+    const body = useMemo(() => buildPreviewBody(draft), [draft]);
+    const bodyKey = body ? JSON.stringify(body) : null;
+    useEffect(() => {
+        if (!bodyKey) {
+            setResp(null);
+            setRespKey(null);
+            setDegraded(false);
+            return;
+        }
+        const reqId = ++reqIdRef.current;
+        const t = setTimeout(() => {
+            api
+                .request("POST", "/orders/preview", { body: JSON.parse(bodyKey) })
+                .then((r) => {
+                if (reqId !== reqIdRef.current)
+                    return;
+                setResp(r);
+                setRespKey(bodyKey);
+                setDegraded(!!r.estimate_degraded);
+            })
+                .catch(() => {
+                if (reqId !== reqIdRef.current)
+                    return;
+                // This attempt was for the *current* draft: record its key so the
+                // degraded fallback + warning line take over the displayed total,
+                // rather than a stale quote left over from a previous config.
+                setRespKey(bodyKey);
+                setDegraded(true);
+            });
+        }, 400);
+        return () => {
+            clearTimeout(t);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [bodyKey, api]);
+    // Only trust the quote when it was fetched for the *current* draft. During
+    // the debounce + round-trip after an edit, `respKey !== bodyKey`, so we fall
+    // back to the instant net estimate (a clean "estimating…" placeholder) as the
+    // comment above describes — instead of showing the prior config's total/tax.
+    const fresh = respKey === bodyKey;
+    const quoted = resp != null && fresh && !degraded;
+    const taxTotal = quoted ? Number(resp.tax_total) : 0;
+    const subtotal = quoted ? Number(resp.subtotal) : net;
+    const total = quoted ? Number(resp.total) : net;
+    return {
+        subtotal,
+        taxTotal,
+        total,
+        taxLabel: (quoted && resp.tax_label) || "Tax",
+        degraded: !!bodyKey && fresh && degraded,
+        hasTax: quoted && taxTotal > 0,
+        quoted,
+    };
+}
 //# sourceMappingURL=Order.js.map