@synteq/cli 0.2.0 → 1.1.1

package/dist/tui/screens/Deploy.js

@@ -0,0 +1,912 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { existsSync, rmSync, statSync } from "node:fs";
+import { basename, dirname, resolve } from "node:path";
+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 { InputBar } from "../components/InputBar.js";
+import { CenteredFrame } from "../components/CenteredFrame.js";
+import { BackButton } from "../components/BackButton.js";
+import { useApi, useAppContext } 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";
+import { deployPresetRef } from "./deployPreset.js";
+import { humanSize, dotenvFiles, makeTarball, pickFrontend, pollBuild, resolveNewRelease, uploadSource, waitForReleaseOutcome, } from "../../apps-support/deploy.js";
+import { ApiError } from "../../api/errors.js";
+import { chargeLine, priceLine } from "../../apps-support/paid-app.js";
+import { isPaidPlan, planCapReason, planLine, toLocationOptions } from "../../apps-support/plans.js";
+import { describePaymentMethod, readBalance } from "../../ui/wizard.js";
+import { waitFor } from "../../ui/wait.js";
+import { portalUrl } from "../../ui/portal.js";
+import { PAYMENT_METHODS_PATH } from "../../ui/payment-gate.js";
+import { truncationNote } from "../../ui/table.js";
+/** The sub-steps of "create a new app" all count as the App step. */
+const NEW_APP_STEPS = new Set([
+    "new-app-plan",
+    "new-app-region",
+    "new-app-price",
+    "new-app-pay",
+    "new-app-confirm",
+    "new-app-order",
+]);
+const STEP_LABELS = {
+    project: "Project",
+    app: "App",
+    "new-app-plan": "Plan",
+    "new-app-region": "Location",
+    "new-app-price": "Price",
+    "new-app-pay": "Payment",
+    "new-app-confirm": "Confirm charge",
+    "new-app-order": "Ordering",
+    dir: "Directory",
+    confirm: "Confirm",
+    deploying: "Deploying",
+    result: "Done",
+};
+const PROGRESS = ["project", "app", "dir", "confirm", "deploying", "result"];
+const SLUG_RE = /^[a-z0-9][a-z0-9-]{1,61}[a-z0-9]$/;
+function nameCheckMessage(reason) {
+    if (reason === "taken")
+        return "This name is taken.";
+    if (reason === "banned")
+        return "This name isn't allowed.";
+    if (reason === "invalid_shape")
+        return "Use 3–63 lowercase letters, digits and dashes.";
+    return "This name is unavailable.";
+}
+/** ACH settles asynchronously, so it can't underwrite instant provisioning
+ *  (the same exclusion the Order screen applies). */
+function isAch(m) {
+    return m.provider === "stripe" && m.card_brand === "us_bank_account";
+}
+export function Deploy() {
+    const api = useApi();
+    const { config } = useAppContext();
+    const { header } = useHeader();
+    const { navigate, goBack } = useRouter();
+    useMousePause(true);
+    const preset = useRef(deployPresetRef.current);
+    const fromOrder = useRef(Boolean(deployPresetRef.current?.newApp));
+    useEffect(() => {
+        deployPresetRef.current = null;
+    }, []);
+    // A deploy of an existing app (preset appId) skips the project step.
+    const [step, setStep] = useState(preset.current?.appId ? "app" : "project");
+    const [projects, setProjects] = useState([]);
+    const [projectId, setProjectId] = useState(header.projectId ?? null);
+    // The App step holds the new-app name input and the existing-app list;
+    // Tab moves between them.
+    const [appPane, setAppPane] = useState("name");
+    const [nameState, setNameState] = useState({ kind: "idle" });
+    const [apps, setApps] = useState(null);
+    // The server's count: the list is one page of 200 (portal #419).
+    const [appsTotal, setAppsTotal] = useState(0);
+    const [plans, setPlans] = useState([]);
+    const [loadError, setLoadError] = useState(null);
+    const [app, setApp] = useState(null);
+    const [slug, setSlug] = useState("");
+    const [creating, setCreating] = useState(false);
+    const [dirInput, setDirInput] = useState(process.cwd());
+    const [dir, setDir] = useState(null);
+    const [dirError, setDirError] = useState(null);
+    const [frontend, setFrontend] = useState("railpack");
+    const [linkDir, setLinkDir] = useState(true);
+    const [phases, setPhases] = useState([]);
+    const [outcome, setOutcome] = useState(null);
+    const [error, setError] = useState(null);
+    const [order, setOrder] = useState(null);
+    // Catalog: the team's apps in the active project, plus plans for "new app".
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const [appsPage, plansOut, projectsOut] = await Promise.all([
+                    api.apps.listPage(),
+                    api.apps.plans().catch(() => []),
+                    api.projects.list().catch(() => []),
+                ]);
+                if (cancelled)
+                    return;
+                const list = appsPage.items;
+                setApps(list);
+                setAppsTotal(appsPage.total);
+                setPlans(plansOut);
+                setProjects(projectsOut);
+                setProjectId((cur) => cur ?? (projectsOut.find((p) => p.is_default) ?? projectsOut[0])?.id ?? null);
+                const pre = preset.current;
+                if (pre?.newApp) {
+                    setStep("project");
+                }
+                else if (pre) {
+                    const hit = list.find((a) => a.id === pre.appId);
+                    if (hit) {
+                        setApp(hit);
+                        if (pre.dir)
+                            setDirInput(pre.dir);
+                        else {
+                            const linked = linkedDirFor(config.get().links, hit.id);
+                            if (linked)
+                                setDirInput(linked);
+                        }
+                        setStep("dir");
+                    }
+                }
+            }
+            catch (e) {
+                if (!cancelled)
+                    setLoadError(e instanceof Error ? e.message : String(e));
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [api, config]);
+    // Live slug check while the user types (debounced): the shape rule first,
+    // then the server's check-name, so a taken name shows here and not as a
+    // refused order after the plan step.
+    const nameReq = useRef(0);
+    useEffect(() => {
+        const name = slug.trim();
+        const reqId = ++nameReq.current;
+        if (!name) {
+            setNameState({ kind: "idle" });
+            return;
+        }
+        if (!SLUG_RE.test(name)) {
+            setNameState({ kind: "invalid", msg: "Use 3–63 lowercase letters, digits and dashes." });
+            return;
+        }
+        setNameState({ kind: "checking" });
+        const t = setTimeout(() => {
+            api.apps
+                .checkName(name)
+                .then((r) => {
+                if (reqId !== nameReq.current)
+                    return;
+                setNameState(r.available ? { kind: "available", hostname: r.hostname } : { kind: "taken", msg: nameCheckMessage(r.reason) });
+            })
+                .catch((e) => {
+                if (reqId !== nameReq.current)
+                    return;
+                setNameState({ kind: "taken", msg: e instanceof Error ? e.message : String(e) });
+            });
+        }, 300);
+        return () => clearTimeout(t);
+    }, [slug, api]);
+    // When an app is picked, offer the directory it is already linked to.
+    const pickApp = useCallback((a) => {
+        setApp(a);
+        const linked = linkedDirFor(config.get().links, a.id);
+        if (linked)
+            setDirInput(linked);
+        setStep("dir");
+    }, [config]);
+    const alreadyLinked = useMemo(() => {
+        if (!app || !dir)
+            return false;
+        const link = config.linkFor(dir);
+        return !!link && link.app_id === app.id;
+    }, [app, dir, config]);
+    const confirmDir = useCallback((raw) => {
+        const path = resolve(raw.trim() || ".");
+        if (!existsSync(path) || !statSync(path).isDirectory()) {
+            setDirError(`Not a directory: ${path}`);
+            return;
+        }
+        setDirError(null);
+        setDir(path);
+        setFrontend(pickFrontend(path));
+        setStep("confirm");
+    }, []);
+    // The deploy itself — runs once when the confirm step hands over.
+    useEffect(() => {
+        if (step !== "deploying" || !app || !dir)
+            return;
+        let cancelled = false;
+        const started = Date.now();
+        const initial = [
+            { label: "Pack source", state: "active" },
+            { label: "Upload", state: "pending" },
+            { label: "Build", state: "pending" },
+            { label: "Release", state: "pending" },
+        ];
+        setPhases(initial);
+        const mark = (i, patch) => setPhases((ps) => ps.map((p, j) => (j === i ? { ...p, ...patch } : p)));
+        (async () => {
+            try {
+                const archive = await makeTarball(dir);
+                let build;
+                try {
+                    if (cancelled)
+                        return;
+                    const dotenv = dotenvFiles(dir);
+                    mark(0, {
+                        state: "done",
+                        detail: `${basename(dir)} → ${humanSize(archive)}` +
+                            (dotenv.length ? ` (not packed: ${dotenv.join(", ")} — set variables in the Environment tab)` : ""),
+                    });
+                    mark(1, { state: "active", detail: "0%" });
+                    // The orchestrator decides Dockerfile vs Railpack from what it finds
+                    // in the source now — the client no longer sends a frontend hint.
+                    // Shared with `synteq deploy --dir` (apps-support/deploy.ts) so the
+                    // two surfaces can't diverge on retry/fallback behaviour.
+                    build = await uploadSource(api, app.id, archive, {
+                        onProgress: (pct) => mark(1, { detail: `${pct}%` }),
+                    });
+                }
+                finally {
+                    // The pack is a full copy of the source (an un-ignored .env included)
+                    // in a shared tmpdir — gone once the upload settles, either way.
+                    rmSync(dirname(archive), { recursive: true, force: true });
+                }
+                if (cancelled)
+                    return;
+                mark(1, { state: "done", detail: `build ${build.id.slice(0, 8)} · ${frontend}` });
+                mark(2, { state: "active", detail: build.status });
+                const final = await pollBuild(api, app.id, build, {
+                    intervalMs: 4000,
+                    // A large source can sit in its first status for several minutes
+                    // while the API prepares it in the background (202 + poll) — a
+                    // deadline under 30 minutes can cut off a still-running deploy.
+                    timeoutMs: 1_800_000,
+                    onStatus: (s) => mark(2, { detail: s }),
+                });
+                if (cancelled)
+                    return;
+                if (final.status !== "succeeded") {
+                    mark(2, { state: "failed", detail: final.status });
+                    setOutcome({
+                        ok: false,
+                        error: final.status === "failed"
+                            ? [
+                                "The build failed.",
+                                final.failureReason ?? null,
+                                "The Deployments tab in the portal carries the build log.",
+                            ]
+                                .filter(Boolean)
+                                .join(" ")
+                            : `The build is still ${final.status} after 30 minutes; it may still finish server-side.`,
+                        buildId: final.id,
+                    });
+                    setStep("result");
+                    return;
+                }
+                mark(2, { state: "done", detail: "succeeded" });
+                mark(3, { state: "active", detail: "waiting for the release" });
+                const release = await resolveNewRelease(api, app.id, final);
+                if (cancelled)
+                    return;
+                const status = release
+                    ? await waitForReleaseOutcome(api, app.id, release.number, 180, (s) => mark(3, { detail: `#${release.number} ${s ?? "pending"}` }))
+                    : null;
+                if (cancelled)
+                    return;
+                const live = !release || status === "live";
+                mark(3, { state: live ? "done" : "failed", detail: release ? `#${release.number} ${status ?? "still rolling out"}` : "no release yet" });
+                let linked = false;
+                if (live && linkDir && !alreadyLinked) {
+                    config.setLink(dir, {
+                        team_id: app.teamId,
+                        project_id: app.projectId,
+                        app_id: app.id,
+                        app_slug: app.slug,
+                        linked_at: new Date().toISOString(),
+                        kind: "app",
+                    });
+                    linked = true;
+                }
+                if (live) {
+                    setOutcome({
+                        ok: true,
+                        release: release?.number ?? null,
+                        url: `https://${app.hostname}`,
+                        durationMs: Date.now() - started,
+                        linked,
+                    });
+                }
+                else {
+                    setOutcome({
+                        ok: false,
+                        error: status === "start_failed" || status === "health_failed"
+                            ? `Release #${release?.number} ${status.replace("_", " ")}. The previous release keeps serving.`
+                            : `Release #${release?.number} is ${status ?? "still rolling out"}.`,
+                    });
+                }
+                setStep("result");
+            }
+            catch (e) {
+                if (cancelled)
+                    return;
+                setPhases((ps) => ps.map((p) => (p.state === "active" ? { ...p, state: "failed" } : p)));
+                setOutcome({ ok: false, error: e instanceof Error ? e.message : String(e) });
+                setStep("result");
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step]);
+    const createApp = useCallback(async (planTier) => {
+        setCreating(true);
+        setError(null);
+        try {
+            const created = await api.apps.create({ slug: slug.trim(), ...(planTier ? { planTier } : {}) }, projectId ?? undefined);
+            setApps((list) => [created, ...(list ?? [])]);
+            setApp(created);
+            setStep("dir");
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+            setStep("app");
+        }
+        finally {
+            setCreating(false);
+        }
+    }, [api, slug, projectId]);
+    const patchOrder = useCallback((patch) => setOrder((o) => (o ? { ...o, ...patch } : o)), []);
+    // A paid tier is an ORDER, not a bare create (POST /apps refuses it with
+    // 402): walk the same steps `orderPaidApp` runs — location, price, credits,
+    // card, confirm, charge — one ink step each. Nothing charges before the
+    // confirm step's Enter.
+    const pickPlan = useCallback(async (planName) => {
+        const plan = plans.find((p) => p.name === planName);
+        if (!plan || !isPaidPlan(plan)) {
+            await createApp(planName);
+            return;
+        }
+        setError(null);
+        setCreating(true);
+        try {
+            const locations = toLocationOptions(await api.apps.locations());
+            if (locations.length === 0) {
+                setError("No locations are available for new apps right now. Try again later.");
+                return;
+            }
+            const next = {
+                plan,
+                region: locations.length === 1 ? locations[0].region : null,
+                locations,
+                quote: null,
+                credit: 0,
+                applyCredits: false,
+                methods: null,
+                methodId: null,
+                status: null,
+            };
+            setOrder(next);
+            setStep(next.region ? "new-app-price" : "new-app-region");
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setCreating(false);
+        }
+    }, [api, plans, createApp]);
+    const orderSpec = useMemo(() => order?.region
+        ? { slug: slug.trim(), plan_tier: order.plan.name, region: order.region, project_id: projectId ?? undefined }
+        : null, [order?.plan.name, order?.region, slug, projectId]);
+    // Price step: the first-month quote (tax included) and the credit balance.
+    // A preview the API REFUSED (4xx other than 429) is not a degraded quote —
+    // the order would be refused the same way — so it goes back to the plan.
+    useEffect(() => {
+        if (step !== "new-app-price" || !order || !orderSpec || order.quote)
+            return;
+        let cancelled = false;
+        (async () => {
+            let quote;
+            try {
+                const q = await api.orders.preview({ kind: "app", spec: orderSpec });
+                quote = {
+                    total: Number(q.total),
+                    taxTotal: Number(q.tax_total ?? 0),
+                    taxLabel: q.tax_label ?? "tax",
+                    currency: q.currency ?? "USD",
+                    degraded: Boolean(q.estimate_degraded),
+                };
+            }
+            catch (e) {
+                if (cancelled)
+                    return;
+                if (e instanceof ApiError && e.status >= 400 && e.status < 500 && e.status !== 429) {
+                    setError(`Can't order ${order.plan.displayName ?? order.plan.name}: ${e.detail}`);
+                    setOrder(null);
+                    setStep("new-app-plan");
+                    return;
+                }
+                quote = { total: Number(order.plan.monthlyAnchorUsd ?? 0), taxTotal: 0, taxLabel: "tax", currency: "USD", degraded: true };
+            }
+            const balance = await api.billing.balance().catch(() => ({}));
+            if (cancelled)
+                return;
+            const credit = readBalance(balance.credit);
+            patchOrder({ quote, credit });
+            // No credit to ask about: straight on to the card.
+            if (credit <= 0)
+                setStep("new-app-pay");
+        })();
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step, orderSpec]);
+    // Credits-first decided: credit that covers the whole month skips the card.
+    const decideCredits = useCallback((apply) => {
+        if (!order?.quote)
+            return;
+        patchOrder({ applyCredits: apply });
+        const covered = apply && order.credit >= order.quote.total && order.quote.total > 0;
+        setStep(covered ? "new-app-confirm" : "new-app-pay");
+    }, [order, patchOrder]);
+    // Payment step: the methods the app_order touchpoint may charge.
+    const loadMethods = useCallback(async () => {
+        patchOrder({ methods: null });
+        const rows = await api.payments.methodsForTouchpoint("app_order").catch(() => []);
+        patchOrder({ methods: rows.filter((m) => !isAch(m)) });
+    }, [api, patchOrder]);
+    useEffect(() => {
+        if (step !== "new-app-pay" || !order || order.methods)
+            return;
+        void loadMethods();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step]);
+    const coveredByCredit = !!order?.quote && order.applyCredits && order.credit >= order.quote.total && order.quote.total > 0;
+    const chosenMethod = order?.methods?.find((m) => m.id === order.methodId) ?? null;
+    // Order step: charge, then poll the order until the app row exists.
+    useEffect(() => {
+        if (step !== "new-app-order" || !order?.quote || !orderSpec)
+            return;
+        let cancelled = false;
+        (async () => {
+            try {
+                const payment = coveredByCredit
+                    ? { method: "credit_only" }
+                    : { method: "saved", payment_method_id: order.methodId, apply_credits: order.applyCredits && order.credit > 0 };
+                patchOrder({ status: "charging" });
+                const result = await api.orders.createApp(orderSpec, payment);
+                if (cancelled)
+                    return;
+                if (result.checkout_url)
+                    throw new Error(`This order needs hosted checkout: ${result.checkout_url}`);
+                if (result.status === "failed")
+                    throw new Error("The charge did not go through; no app created.");
+                const wait = await waitFor({
+                    timeoutSeconds: 120,
+                    poll: () => api.orders.status(result.order_id),
+                    classify: (o) => {
+                        const st = (o.status ?? "").toLowerCase();
+                        if ((st === "complete" || st === "provisioned") && o.resource_id)
+                            return { state: "success", label: `order ${st}` };
+                        if (st === "failed" || st === "cancelled") {
+                            return { state: "failure", label: `order ${st}`, reason: `Order ${st}: ${o.error_detail ?? "no detail from server"}` };
+                        }
+                        return { state: "pending", label: `order ${st || "pending"}` };
+                    },
+                    onStatus: (l) => patchOrder({ status: l }),
+                });
+                if (cancelled)
+                    return;
+                if (wait.outcome === "timeout") {
+                    throw new Error(`Charged, but the app is still being created (order ${result.order_id}). It will appear in Resources shortly.`);
+                }
+                if (wait.outcome === "failure")
+                    throw new Error(wait.reason);
+                const created = await api.apps.get(wait.value.resource_id);
+                if (cancelled)
+                    return;
+                setApps((list) => [created, ...(list ?? [])]);
+                setApp(created);
+                setOrder(null);
+                setStep("dir");
+            }
+            catch (e) {
+                if (cancelled)
+                    return;
+                setError(e instanceof Error ? e.message : String(e));
+                setOrder(null);
+                setStep("new-app-plan");
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step]);
+    const textOwnsKeys = (step === "app" && appPane === "name") || step === "dir";
+    useInput((input, key) => {
+        if (step === "app" && key.tab) {
+            setAppPane((p) => (p === "name" ? "list" : "name"));
+            return;
+        }
+        // Down from the name input lands on the list (Up from its first row comes back).
+        if (step === "app" && appPane === "name" && key.downArrow && appItems.length) {
+            setAppPane("list");
+            return;
+        }
+        if (textOwnsKeys) {
+            if (key.escape) {
+                if (step === "app") {
+                    // Entered from New order → App or the dashboard: Esc leaves the walkthrough.
+                    if (fromOrder.current || projects.length === 0)
+                        goBack();
+                    else
+                        setStep("project");
+                }
+                else
+                    setStep("app");
+            }
+            return;
+        }
+        if (step === "deploying")
+            return; // the build continues server-side either way
+        if (key.escape) {
+            if (step === "project" || step === "result")
+                goBack();
+            else if (step === "app") {
+                if (fromOrder.current || projects.length === 0)
+                    goBack();
+                else
+                    setStep("project");
+            }
+            else if (step === "new-app-plan")
+                setStep("app");
+            else if (step === "new-app-region" || step === "new-app-price") {
+                setOrder(null);
+                setStep("new-app-plan");
+            }
+            else if (step === "new-app-pay")
+                setStep("new-app-price");
+            else if (step === "new-app-confirm")
+                setStep(coveredByCredit ? "new-app-price" : "new-app-pay");
+            else if (step === "confirm")
+                setStep("dir");
+            return;
+        }
+        if (step === "new-app-order")
+            return; // the charge is in flight
+        if (step === "new-app-price") {
+            if (!order?.quote || order.credit <= 0)
+                return;
+            if (input === "y" || key.return)
+                decideCredits(true);
+            else if (input === "n")
+                decideCredits(false);
+            return;
+        }
+        if (step === "new-app-pay") {
+            if (input === "r")
+                void loadMethods();
+            return;
+        }
+        if (step === "new-app-confirm") {
+            if (key.return)
+                setStep("new-app-order");
+            return;
+        }
+        if (step === "confirm") {
+            if (key.return)
+                setStep("deploying");
+            else if (input === "f")
+                setFrontend((f) => (f === "dockerfile" ? "railpack" : "dockerfile"));
+            else if (input === "l" && !alreadyLinked)
+                setLinkDir((v) => !v);
+            return;
+        }
+        if (step === "result") {
+            if (input === "d") {
+                setOutcome(null);
+                setStep("confirm");
+            }
+            else if (input === "a" && app) {
+                navigate("resources");
+            }
+            else if (key.return)
+                goBack();
+        }
+    }, { isActive: true });
+    const stepIndex = Math.max(0, PROGRESS.indexOf(NEW_APP_STEPS.has(step) ? "app" : step));
+    const totalRows = process.stdout.rows ?? 24;
+    const paneHeight = Math.max(12, totalRows - 6);
+    const projectItems = useMemo(() => projects.map((p) => ({ value: p.id, label: p.name, hint: p.is_default ? "default" : (p.description ?? undefined) })), [projects]);
+    // Existing apps in the chosen project; "new app" is the input above the list.
+    const appItems = useMemo(() => (apps ?? [])
+        .filter((a) => !projectId || a.projectId === projectId)
+        .map((a) => ({ value: a.id, label: a.slug, hint: `${a.hostname} · ${a.planTier} · ${a.status}` })), [apps, projectId]);
+    const submitNewApp = useCallback((v) => {
+        const name = v.trim();
+        if (!SLUG_RE.test(name)) {
+            setError("Use 3–63 lowercase letters, digits and dashes.");
+            return;
+        }
+        if (nameState.kind !== "available")
+            return; // still checking, or taken
+        setError(null);
+        setStep("new-app-plan");
+    }, [nameState.kind]);
+    const planItems = useMemo(() => plans.length
+        ? plans.map((p) => ({
+            value: p.name,
+            label: p.displayName ?? p.name,
+            hint: planLine(p),
+            // At the per-team cap (or no capacity): shown, not pickable —
+            // the same rule the CLI picker applies.
+            disabled: planCapReason(p),
+        }))
+        : [{ value: "", label: "Default plan", hint: "the platform's default tier" }], [plans]);
+    const regionItems = useMemo(() => (order?.locations ?? []).map((l) => ({ value: l.region, label: l.city, hint: l.code })), [order?.locations]);
+    const methodItems = useMemo(() => (order?.methods ?? []).map((m) => ({
+        value: m.id,
+        label: describePaymentMethod(m),
+        disabled: m.eligible ? undefined : (m.ineligible_reason ?? "not allowed for apps"),
+    })), [order?.methods]);
+    const eligibleMethods = (order?.methods ?? []).filter((m) => m.eligible);
+    let body;
+    if (loadError) {
+        body = React.createElement(Text, { color: colors.error },
+            "Error: ",
+            loadError);
+    }
+    else if (apps === null) {
+        body = React.createElement(Spinner, { label: "Loading your apps\u2026" });
+    }
+    else if (step === "project") {
+        body = projects.length === 0 ? (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.error }, "You need at least one project. Create one in the portal and try again."),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Esc to go back.")))) : (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim }, "Which project is the app in?"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Menu, { items: projectItems, initialIndex: Math.max(0, projectItems.findIndex((i) => i.value === projectId)), focused: true, onSelect: (v) => {
+                        setProjectId(v);
+                        setAppPane("name");
+                        setStep("app");
+                    } }))));
+    }
+    else if (step === "app") {
+        const nameLine = nameState.kind === "checking" ? React.createElement(Text, { color: colors.dim }, "checking\u2026")
+            : nameState.kind === "available" ? React.createElement(Text, { color: colors.success }, `available${nameState.hostname ? ` · ${nameState.hostname}` : ""}`)
+                : nameState.kind === "invalid" || nameState.kind === "taken" ? React.createElement(Text, { color: colors.error }, nameState.msg)
+                    : React.createElement(Text, { color: colors.dim }, "lowercase letters, digits and dashes \u2014 it becomes the hostname");
+        body = (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim }, "Name a new app, or pick an existing one below (\u2193 / Tab to move between them)."),
+            error ? React.createElement(Text, { color: colors.error }, error) : null,
+            React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+                React.createElement(Text, { color: appPane === "name" ? colors.accent : colors.dim }, "New app"),
+                React.createElement(InputBar, { value: slug, onChange: setSlug, onSubmit: submitNewApp, placeholder: "my-api", focused: appPane === "name" }),
+                React.createElement(Box, { paddingX: 4 }, nameLine)),
+            React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+                React.createElement(Text, { color: appPane === "list" ? colors.accent : colors.dim }, appItems.length ? "Existing apps" : "No apps in this project yet"),
+                appItems.length ? (React.createElement(Menu, { items: appItems, focused: appPane === "list", onUpFromTop: () => setAppPane("name"), onSelect: (v) => {
+                        const hit = apps.find((a) => a.id === v);
+                        if (hit)
+                            pickApp(hit);
+                    } })) : null,
+                truncationNote(apps?.length ?? 0, appsTotal, "`synteq link --app <slug>`") ? (React.createElement(Text, { color: colors.dim }, truncationNote(apps?.length ?? 0, appsTotal, "`synteq link --app <slug>`"))) : null)));
+    }
+    else if (step === "new-app-plan") {
+        body = creating ? (React.createElement(Spinner, { label: `Creating ${slug}…` })) : (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim },
+                "Pick a plan for ",
+                slug,
+                ". A paid plan charges its first month now."),
+            error ? React.createElement(Text, { color: colors.error }, error) : null,
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Menu, { items: planItems, focused: true, onSelect: (v) => void pickPlan(v || null) }))));
+    }
+    else if (step === "new-app-region" && order) {
+        body = (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim },
+                "Where should ",
+                slug,
+                " run?"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Menu, { items: regionItems, focused: true, onSelect: (region) => {
+                        patchOrder({ region });
+                        setStep("new-app-price");
+                    } }))));
+    }
+    else if (step === "new-app-price" && order) {
+        body = !order.quote ? (React.createElement(Spinner, { label: "Pricing the first month\u2026" })) : (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.text }, priceLine({ ...order.quote, slug: slug.trim(), planName: order.plan.displayName ?? order.plan.name })),
+            order.credit > 0 ? (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+                React.createElement(Text, { color: colors.text },
+                    "Apply your credit balance ($",
+                    order.credit.toFixed(2),
+                    ") first?"),
+                React.createElement(Text, { color: colors.dim }, "y / Enter yes \u00B7 n no \u00B7 Esc back"))) : null));
+    }
+    else if (step === "new-app-pay" && order) {
+        body = !order.methods ? (React.createElement(Spinner, { label: "Loading payment methods\u2026" })) : eligibleMethods.length === 0 ? (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.text }, "No saved payment method can be charged for an app."),
+            order.methods.map((m) => m.ineligible_reason).filter(Boolean)[0] ? (React.createElement(Text, { color: colors.dim }, order.methods.map((m) => m.ineligible_reason).filter(Boolean)[0])) : null,
+            React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+                React.createElement(Text, { color: colors.dim },
+                    "Add a card in the portal: ",
+                    React.createElement(Text, { color: colors.text }, portalUrl(config.get().api_base_url, PAYMENT_METHODS_PATH))),
+                React.createElement(Text, { color: colors.dim }, "r re-check \u00B7 Esc back")))) : (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim }, "Charge which payment method?"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Menu, { items: methodItems, focused: true, onSelect: (methodId) => {
+                        patchOrder({ methodId });
+                        setStep("new-app-confirm");
+                    } }))));
+    }
+    else if (step === "new-app-confirm" && order?.quote) {
+        body = (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.text }, chargeLine({
+                ...order.quote,
+                slug: slug.trim(),
+                planName: order.plan.displayName ?? order.plan.name,
+                method: chosenMethod ?? undefined,
+                creditsApplied: order.applyCredits ? Math.min(order.credit, order.quote.total) : 0,
+            })),
+            order.quote.degraded ? (React.createElement(Text, { color: colors.dim }, "Tax estimate unavailable; the final total is on the invoice.")) : null,
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Enter charges and creates the app \u00B7 Esc back"))));
+    }
+    else if (step === "new-app-order" && order) {
+        body = React.createElement(Spinner, { label: `Charging and creating ${slug.trim()}… ${order.status ?? ""}` });
+    }
+    else if (step === "dir") {
+        body = (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim },
+                "Directory to build and ship to ",
+                React.createElement(Text, { color: colors.text }, app?.slug),
+                ". Enter keeps the path shown."),
+            dirError ? React.createElement(Text, { color: colors.error }, dirError) : null,
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(InputBar, { value: dirInput, onChange: setDirInput, onSubmit: confirmDir, placeholder: process.cwd(), focused: true }))));
+    }
+    else if (step === "confirm" && app && dir) {
+        body = (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Row, { label: "App", value: `${app.slug}  ${colorless(app.status)}` }),
+            React.createElement(Row, { label: "URL", value: `https://${app.hostname}` }),
+            React.createElement(Row, { label: "Directory", value: dir }),
+            React.createElement(Row, { label: "Builder", value: frontend === "dockerfile" ? "Dockerfile (found in the directory)" : "railpack (zero-config; no Dockerfile found)" }),
+            React.createElement(Row, { label: "Link directory", value: alreadyLinked ? "already linked to this app" : linkDir ? "yes — a bare `synteq deploy` here will target this app" : "no" }),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim },
+                    "Enter to deploy \u00B7 f toggle builder",
+                    alreadyLinked ? "" : " · l toggle link",
+                    " \u00B7 Esc back"))));
+    }
+    else if (step === "deploying") {
+        body = (React.createElement(Box, { flexDirection: "column" },
+            phases.map((p) => (React.createElement(Box, { key: p.label },
+                React.createElement(Box, { width: 3 },
+                    React.createElement(Text, { color: phaseColor(p.state) }, phaseGlyph(p.state))),
+                React.createElement(Box, { width: 16 },
+                    React.createElement(Text, { color: p.state === "pending" ? colors.dim : colors.text }, p.label)),
+                React.createElement(Text, { color: colors.dim }, p.detail ?? "")))),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Spinner, { label: "Working\u2026" }))));
+    }
+    else if (step === "result" && outcome) {
+        body = outcome.ok ? (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.success },
+                glyphs.check,
+                " Deployed ",
+                app?.slug,
+                outcome.release !== null ? ` · release #${outcome.release}` : "",
+                outcome.durationMs !== null ? ` · ${Math.round(outcome.durationMs / 1000)}s` : ""),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Row, { label: "URL", value: outcome.url })),
+            outcome.linked ? (React.createElement(Text, { color: colors.dim },
+                "Linked ",
+                dir,
+                " \u2192 ",
+                app?.slug,
+                ". `synteq deploy` from that directory targets it now.")) : null,
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "d deploy again \u00B7 a open Resources (logs, metrics, env) \u00B7 Enter back")))) : (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.error }, "Deploy did not go live."),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.text }, outcome.error)),
+            phases.length ? (React.createElement(Box, { marginTop: 1, flexDirection: "column" }, phases.map((p) => (React.createElement(Box, { key: p.label },
+                React.createElement(Box, { width: 3 },
+                    React.createElement(Text, { color: phaseColor(p.state) }, phaseGlyph(p.state))),
+                React.createElement(Box, { width: 16 },
+                    React.createElement(Text, { color: colors.dim }, p.label)),
+                React.createElement(Text, { color: colors.dim }, p.detail ?? "")))))) : null,
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "d try again \u00B7 Enter back"))));
+    }
+    else {
+        body = React.createElement(Spinner, { label: "\u2026" });
+    }
+    return (React.createElement(CenteredFrame, { fullHeight: true, maxWidth: 120 },
+        React.createElement(Box, { paddingX: 2, paddingY: 0, height: 2, alignItems: "center" },
+            React.createElement(BackButton, { onBack: () => {
+                    if (step === "deploying")
+                        return;
+                    if (step === "app" || step === "result")
+                        goBack();
+                    else if (step === "confirm")
+                        setStep("dir");
+                    else if (step === "new-app-order")
+                        return;
+                    else {
+                        setOrder(null);
+                        setStep("app");
+                    }
+                } }),
+            React.createElement(Text, { color: colors.dim },
+                " · ",
+                React.createElement(Text, { color: colors.text }, "Deploy"),
+                app ? React.createElement(Text, { color: colors.dim }, ` · ${app.slug}`) : null)),
+        React.createElement(Box, { flexGrow: 1, flexDirection: "column", paddingX: 1 },
+            React.createElement(Panel, { title: STEP_LABELS[step], rightLabel: `step ${stepIndex + 1} of ${PROGRESS.length}`, paddingX: 2, paddingY: 1, height: paneHeight, borderColor: colors.accent }, body)),
+        React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Tip, null, step === "project"
+                ? "↑↓ pick a project · Enter · Esc back."
+                : step === "app"
+                    ? "Type a name · Enter when it reads available · Tab to the app list · Esc back."
+                    : step === "dir"
+                        ? "Type a path · Enter to continue · Esc to pick another app."
+                        : step === "confirm"
+                            ? "Enter deploys · f switches Dockerfile / railpack · Esc back."
+                            : step === "deploying"
+                                ? "The build runs server-side; you can leave and it keeps going."
+                                : step === "result"
+                                    ? "d to deploy again · Enter to go back."
+                                    : step === "new-app-plan"
+                                        ? "↑↓ pick a plan · greyed tiers are at this team's cap · Esc back."
+                                        : step === "new-app-confirm"
+                                            ? "Nothing is charged until you press Enter here."
+                                            : step === "new-app-order"
+                                                ? "Charging the first month and creating the app…"
+                                                : "Enter to continue · Esc back."),
+            React.createElement(StatusBar, { left: STEP_LABELS[step], right: [
+                    header.projectName ? `Project: ${header.projectName}` : "",
+                    header.teamName ? `Team: ${header.teamName}` : "",
+                ].filter(Boolean) }))));
+}
+function Row({ label, value }) {
+    return (React.createElement(Box, null,
+        React.createElement(Box, { width: 16 },
+            React.createElement(Text, { color: colors.dim }, label)),
+        React.createElement(Text, { color: colors.text }, value)));
+}
+function colorless(s) {
+    return statusColor(s) ? s : s;
+}
+function phaseGlyph(state) {
+    switch (state) {
+        case "done":
+            return glyphs.check;
+        case "failed":
+            return "✗";
+        case "active":
+            return glyphs.chevronRight;
+        default:
+            return "·";
+    }
+}
+function phaseColor(state) {
+    switch (state) {
+        case "done":
+            return colors.success;
+        case "failed":
+            return colors.error;
+        case "active":
+            return colors.accent;
+        default:
+            return colors.dim;
+    }
+}
+/** The directory this machine has linked to the app, if any. */
+function linkedDirFor(links, appId) {
+    for (const [path, link] of Object.entries(links ?? {})) {
+        if (link.app_id === appId && (link.kind ?? "app") === "app" && existsSync(path))
+            return path;
+    }
+    return null;
+}
+//# sourceMappingURL=Deploy.js.map