@synteq/cli 0.2.0 → 1.1.2

package/dist/tui/screens/resources/AppDetail.js

@@ -0,0 +1,810 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { Spinner } from "../../components/Spinner.js";
+import { InputBar } from "../../components/InputBar.js";
+import { ConfirmModal } from "../../components/ConfirmModal.js";
+import { Sparkline } from "../../components/Sparkline.js";
+import { useApi } from "../../hooks/useApi.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 { parseTimeBound, fmtClock, fmtWhen } from "../../../apps-support/time.js";
+const TABS = [
+    { key: "overview", label: "Overview", hotkey: "1" },
+    { key: "logs", label: "Logs", hotkey: "2" },
+    { key: "deployments", label: "Deployments", hotkey: "3" },
+    { key: "metrics", label: "Metrics", hotkey: "4" },
+    { key: "env", label: "Env", hotkey: "5" },
+    { key: "settings", label: "Settings", hotkey: "6" },
+];
+export function AppDetailView({ app: initial, onClose, onLock, }) {
+    const [tab, setTab] = useState("overview");
+    const [app, setApp] = useState(initial);
+    // A tab that is mid-prompt or mid-modal owns the keyboard; the tab bar
+    // and Esc-to-close step aside until it releases.
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        onLock(true);
+        return () => onLock(false);
+    }, [onLock]);
+    useInput((input, key) => {
+        if (busy)
+            return;
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        const hit = TABS.find((t) => t.hotkey === input);
+        if (hit) {
+            setTab(hit.key);
+            return;
+        }
+        if (input === "]" || key.rightArrow) {
+            setTab((t) => TABS[(TABS.findIndex((x) => x.key === t) + 1) % TABS.length].key);
+        }
+        else if (input === "[" || key.leftArrow) {
+            setTab((t) => TABS[(TABS.findIndex((x) => x.key === t) - 1 + TABS.length) % TABS.length].key);
+        }
+    }, { isActive: true });
+    return (React.createElement(Box, { flexDirection: "column", width: "100%" },
+        React.createElement(Box, { marginBottom: 1 }, TABS.map((t, i) => (React.createElement(Box, { key: t.key, marginRight: i === TABS.length - 1 ? 0 : 2 },
+            React.createElement(Text, { color: t.key === tab ? colors.accent : colors.dim, bold: t.key === tab },
+                t.hotkey,
+                " ",
+                t.label))))),
+        tab === "overview" && React.createElement(OverviewTab, { app: app, onApp: setApp }),
+        tab === "logs" && React.createElement(LogsTab, { app: app, onBusy: setBusy }),
+        tab === "deployments" && React.createElement(DeploymentsTab, { app: app, onBusy: setBusy }),
+        tab === "metrics" && React.createElement(MetricsTab, { app: app }),
+        tab === "env" && React.createElement(EnvTab, { app: app, onBusy: setBusy }),
+        tab === "settings" && React.createElement(SettingsTab, { app: app, onBusy: setBusy })));
+}
+// ─── Overview ────────────────────────────────────────────────────────────────
+function OverviewTab({ app, onApp }) {
+    const api = useApi();
+    const { navigate } = useRouter();
+    const [health, setHealth] = useState(null);
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        api.apps.get(app.id).then((a) => !cancelled && onApp(a)).catch(() => { });
+        api.apps.health(app.id).then((h) => !cancelled && setHealth(h)).catch(() => setHealth(null));
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [api, app.id, tick]);
+    useInput((input) => {
+        if (input === "r")
+            setTick((t) => t + 1);
+        else if (input === "d") {
+            deployPresetRef.current = { appId: app.id };
+            navigate("deploy");
+        }
+    });
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(DetailRow, { label: "Id", value: app.id }),
+        React.createElement(DetailRow, { label: "Status", value: React.createElement(Text, { color: statusColor(app.status) ?? colors.text }, app.status) }),
+        React.createElement(DetailRow, { label: "URL", value: `https://${app.hostname}` }),
+        React.createElement(DetailRow, { label: "Plan", value: `${app.planTier} · ${app.replicas} replica${app.replicas === 1 ? "" : "s"}` }),
+        React.createElement(DetailRow, { label: "Region", value: app.region }),
+        React.createElement(DetailRow, { label: "Release", value: app.activeRelease ? `#${app.activeRelease}` : "none yet" }),
+        app.githubRepoFullName ? React.createElement(DetailRow, { label: "GitHub", value: app.githubRepoFullName }) : null,
+        React.createElement(DetailRow, { label: "Created", value: fmtWhen(app.createdAt) }),
+        React.createElement(DetailRow, { label: "Health", value: health === null ? (React.createElement(Text, { color: colors.dim }, "checking\u2026")) : (React.createElement(Text, { color: health.ok ? colors.success : colors.error },
+                health.ok ? "healthy" : "unhealthy",
+                health.status != null ? ` · HTTP ${health.status}` : "",
+                health.latencyMs != null ? ` · ${health.latencyMs} ms` : "",
+                health.detail ? ` · ${health.detail}` : "")) }),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.dim }, "d deploy a directory here \u00B7 r refresh \u00B7 1-6 or [ ] switch tabs \u00B7 Esc back"))));
+}
+// ─── Logs ────────────────────────────────────────────────────────────────────
+const WINDOWS = ["15m", "1h", "6h", "24h", "72h", "168h"];
+function LogsTab({ app, onBusy }) {
+    const api = useApi();
+    const [windowIdx, setWindowIdx] = useState(1);
+    const [from, setFrom] = useState(null);
+    const [until, setUntil] = useState(null);
+    const [search, setSearch] = useState("");
+    const [editing, setEditing] = useState(null);
+    const [draft, setDraft] = useState("");
+    const [promptError, setPromptError] = useState(null);
+    const [lines, setLines] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [offset, setOffset] = useState(0); // lines scrolled up from the tail
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        onBusy(editing !== null);
+    }, [editing, onBusy]);
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        api.apps
+            .logHistory(app.id, {
+            since: WINDOWS[windowIdx],
+            from: from ?? undefined,
+            until: until ?? undefined,
+            limit: 2000,
+        })
+            .then((res) => {
+            if (cancelled)
+                return;
+            setLines(res.lines ?? res.entries ?? []);
+            setOffset(0);
+        })
+            .catch((e) => !cancelled && setError(e instanceof Error ? e.message : String(e)))
+            .finally(() => !cancelled && setLoading(false));
+        return () => {
+            cancelled = true;
+        };
+    }, [api, app.id, windowIdx, from, until, tick]);
+    const visibleLines = useMemo(() => {
+        const needle = search.trim().toLowerCase();
+        return needle ? lines.filter((l) => (l.message ?? "").toLowerCase().includes(needle)) : lines;
+    }, [lines, search]);
+    const rows = Math.max(6, (process.stdout.rows ?? 24) - 14);
+    const end = Math.max(0, visibleLines.length - offset);
+    const start = Math.max(0, end - rows);
+    const shown = visibleLines.slice(start, end);
+    useInput((input, key) => {
+        if (editing)
+            return;
+        if (input === "w") {
+            setFrom(null);
+            setUntil(null);
+            setWindowIdx((i) => (i + 1) % WINDOWS.length);
+        }
+        else if (input === "f") {
+            setDraft("");
+            setPromptError(null);
+            setEditing("from");
+        }
+        else if (input === "t") {
+            setDraft("");
+            setPromptError(null);
+            setEditing("until");
+        }
+        else if (input === "/") {
+            setDraft(search);
+            setEditing("search");
+        }
+        else if (input === "c") {
+            setFrom(null);
+            setUntil(null);
+            setSearch("");
+        }
+        else if (input === "r") {
+            setTick((t) => t + 1);
+        }
+        else if (key.upArrow || input === "k") {
+            setOffset((o) => Math.min(Math.max(0, visibleLines.length - rows), o + 1));
+        }
+        else if (key.downArrow || input === "j") {
+            setOffset((o) => Math.max(0, o - 1));
+        }
+        else if (key.pageUp) {
+            setOffset((o) => Math.min(Math.max(0, visibleLines.length - rows), o + rows));
+        }
+        else if (key.pageDown) {
+            setOffset((o) => Math.max(0, o - rows));
+        }
+        else if (input === "G") {
+            setOffset(0);
+        }
+    }, { isActive: true });
+    const windowLabel = from
+        ? `${fmtWhen(from)} → ${until ? fmtWhen(until) : "now"}`
+        : `last ${WINDOWS[windowIdx]}${until ? ` until ${fmtWhen(until)}` : ""}`;
+    const submitPrompt = (v) => {
+        if (editing === "search") {
+            setSearch(v);
+            setEditing(null);
+            return;
+        }
+        const text = v.trim();
+        if (!text) {
+            if (editing === "from")
+                setFrom(null);
+            else
+                setUntil(null);
+            setEditing(null);
+            return;
+        }
+        const d = parseTimeBound(text);
+        if (!d) {
+            setPromptError("Not a timestamp (2026-09-12 16:00) or an age (90m, 2h, 3d).");
+            return;
+        }
+        if (editing === "from") {
+            if (until && d >= new Date(until)) {
+                setPromptError("from must be before until.");
+                return;
+            }
+            setFrom(d.toISOString());
+        }
+        else {
+            if (from && d <= new Date(from)) {
+                setPromptError("until must be after from.");
+                return;
+            }
+            setUntil(d.toISOString());
+        }
+        setEditing(null);
+    };
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, null,
+            React.createElement(Text, { color: colors.dim }, "Window "),
+            React.createElement(Text, { color: colors.text }, windowLabel),
+            search ? (React.createElement(Text, { color: colors.dim },
+                "  ·  filter ",
+                React.createElement(Text, { color: colors.text }, search))) : null,
+            React.createElement(Text, { color: colors.dim }, `  ·  ${visibleLines.length} line${visibleLines.length === 1 ? "" : "s"}`)),
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            loading ? (React.createElement(Spinner, { label: "Fetching logs\u2026" })) : error ? (React.createElement(Text, { color: colors.error },
+                "Error: ",
+                error)) : shown.length === 0 ? (React.createElement(Text, { color: colors.dim }, "No log lines in this window.")) : (shown.map((l, i) => (React.createElement(Box, { key: `${l.ts ?? ""}-${start + i}` },
+                React.createElement(Text, { color: colors.dim }, fmtClock(l.ts).padEnd(9)),
+                l.build ? React.createElement(Text, { color: colors.dim }, `${l.build} `) : null,
+                React.createElement(Text, { color: levelColor(l.level), wrap: "truncate-end" }, l.message ?? ""))))),
+            !loading && offset > 0 ? React.createElement(Text, { color: colors.dim }, `… ${offset} newer line${offset === 1 ? "" : "s"} below (G to jump to the end)`) : null),
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" }, editing ? (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim }, editing === "from"
+                ? "From — a timestamp (2026-09-12 16:00) or an age (2h, 3d). Empty clears it."
+                : editing === "until"
+                    ? "Until — a timestamp or an age (30m). Empty = now."
+                    : "Filter — substring to match, case-insensitive. Empty clears it."),
+            promptError ? React.createElement(Text, { color: colors.error }, promptError) : null,
+            React.createElement(InputBar, { value: draft, onChange: setDraft, onSubmit: submitPrompt, focused: true, placeholder: editing === "search" ? "error" : "2h" }),
+            React.createElement(Text, { color: colors.dim }, "Enter to apply \u00B7 Esc to cancel"))) : (React.createElement(Text, { color: colors.dim }, "w window \u00B7 f from \u00B7 t until \u00B7 / filter \u00B7 c clear \u00B7 r refresh \u00B7 \u2191\u2193 PgUp PgDn scroll \u00B7 G end"))),
+        React.createElement(EscListener, { active: editing !== null, onEscape: () => setEditing(null) })));
+}
+function levelColor(level) {
+    const l = (level ?? "").toLowerCase();
+    if (l === "error" || l === "fatal")
+        return colors.error;
+    if (l === "warn" || l === "warning")
+        return colors.warning;
+    return colors.text;
+}
+/** Esc inside a text prompt: ink-text-input does not consume it, so the
+ *  owning tab listens while a prompt is open. */
+function EscListener({ active, onEscape }) {
+    useInput((_input, key) => {
+        if (key.escape)
+            onEscape();
+    }, { isActive: active });
+    return null;
+}
+// ─── Deployments ─────────────────────────────────────────────────────────────
+function DeploymentsTab({ app, onBusy }) {
+    const api = useApi();
+    const [releases, setReleases] = useState(null);
+    const [error, setError] = useState(null);
+    const [cursor, setCursor] = useState(0);
+    const [open, setOpen] = useState(null);
+    const [build, setBuild] = useState(null);
+    const [confirm, setConfirm] = useState(null);
+    const [notice, setNotice] = useState(null);
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        onBusy(confirm !== null);
+    }, [confirm, onBusy]);
+    useEffect(() => {
+        let cancelled = false;
+        api.apps
+            .releases(app.id)
+            .then((rs) => {
+            if (cancelled)
+                return;
+            setReleases([...rs].sort((a, b) => b.number - a.number));
+            setError(null);
+        })
+            .catch((e) => !cancelled && setError(e instanceof Error ? e.message : String(e)));
+        return () => {
+            cancelled = true;
+        };
+    }, [api, app.id, tick]);
+    useEffect(() => {
+        if (!open?.buildId) {
+            setBuild(null);
+            return;
+        }
+        let cancelled = false;
+        api.apps.buildDetail(app.id, open.buildId).then((b) => !cancelled && setBuild(b)).catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, [api, app.id, open]);
+    const rows = releases ?? [];
+    const selected = rows[cursor];
+    useInput((input, key) => {
+        if (confirm)
+            return;
+        if (open) {
+            if (key.escape || key.leftArrow)
+                setOpen(null);
+            else if (input === "b" && !open.isCurrent)
+                setConfirm(open);
+            return;
+        }
+        if (key.upArrow || input === "k")
+            setCursor((c) => Math.max(0, c - 1));
+        else if (key.downArrow || input === "j")
+            setCursor((c) => Math.min(rows.length - 1, c + 1));
+        else if (key.return && selected)
+            setOpen(selected);
+        else if (input === "b" && selected && !selected.isCurrent)
+            setConfirm(selected);
+        else if (input === "r")
+            setTick((t) => t + 1);
+    }, { isActive: true });
+    const rollback = useCallback(async (r) => {
+        setNotice({ text: `Rolling back to #${r.number}…`, color: colors.warning });
+        try {
+            await api.apps.rollback(app.id, r.number);
+            setNotice({ text: `Rollback to #${r.number} started — a new release with that image is rolling out.`, color: colors.success });
+            setOpen(null);
+            setTick((t) => t + 1);
+        }
+        catch (e) {
+            setNotice({ text: e instanceof Error ? e.message : String(e), color: colors.error });
+        }
+    }, [api, app.id]);
+    if (confirm) {
+        return (React.createElement(ConfirmModal, { title: `Roll ${app.slug} back to release #${confirm.number}?`, hint: "Re-deploys that release's image as a new release. The current release stays in history.", onConfirm: () => {
+                const r = confirm;
+                setConfirm(null);
+                void rollback(r);
+            }, onCancel: () => setConfirm(null) }));
+    }
+    if (open) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(DetailRow, { label: "Release", value: `#${open.number}${open.isCurrent ? "  (current)" : ""}` }),
+            React.createElement(DetailRow, { label: "Status", value: React.createElement(Text, { color: statusColor(open.status) ?? colors.text }, open.status) }),
+            React.createElement(DetailRow, { label: "Deployed", value: fmtWhen(open.deployedAt) }),
+            React.createElement(DetailRow, { label: "Image", value: open.imageDigest.slice(0, 24) }),
+            open.commitSha ? React.createElement(DetailRow, { label: "Commit", value: `${open.commitSha.slice(0, 7)}${open.commitMessage ? `  ${open.commitMessage}` : ""}` }) : null,
+            build ? (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+                React.createElement(Text, { color: colors.dim, bold: true },
+                    "Build ",
+                    build.id.slice(0, 8),
+                    " \u00B7 ",
+                    build.frontend,
+                    " \u00B7 ",
+                    build.status,
+                    build.cacheHit ? " · cache hit" : ""),
+                (build.steps ?? []).map((s) => (React.createElement(Box, { key: s.id },
+                    React.createElement(Box, { width: 3 },
+                        React.createElement(Text, { color: statusColor(s.status) ?? colors.dim }, s.status === "succeeded" ? glyphs.check : s.status === "failed" ? "✗" : "·")),
+                    React.createElement(Box, { width: 28 },
+                        React.createElement(Text, { color: colors.text }, s.label)),
+                    React.createElement(Text, { color: colors.dim }, s.durationMs != null ? `${(s.durationMs / 1000).toFixed(1)}s` : s.status)))))) : open.buildId ? (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Spinner, { label: "Loading build\u2026" }))) : (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "No source build (image deploy or rollback)."))),
+            notice ? (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: notice.color }, notice.text))) : null,
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, open.isCurrent ? "Esc back" : "b roll back to this release · Esc back"))));
+    }
+    return (React.createElement(Box, { flexDirection: "column" },
+        releases === null ? (React.createElement(Spinner, { label: "Loading deployments\u2026" })) : error ? (React.createElement(Text, { color: colors.error },
+            "Error: ",
+            error)) : rows.length === 0 ? (React.createElement(Text, { color: colors.dim }, "No deployments yet \u2014 press d on Overview to deploy.")) : (rows.slice(0, Math.max(5, (process.stdout.rows ?? 24) - 14)).map((r, i) => {
+            const focused = i === cursor;
+            return (React.createElement(Box, { key: r.id },
+                React.createElement(Text, { color: focused ? colors.accent : colors.dim }, focused ? `${glyphs.chevronRight} ` : "  "),
+                React.createElement(Box, { width: 7 },
+                    React.createElement(Text, { color: focused ? colors.accent : colors.text, bold: focused }, `#${r.number}`)),
+                React.createElement(Box, { width: 16 },
+                    React.createElement(Text, { color: statusColor(r.status) ?? colors.dim }, r.status)),
+                React.createElement(Box, { width: 14 },
+                    React.createElement(Text, { color: colors.dim }, fmtWhen(r.deployedAt))),
+                React.createElement(Text, { color: colors.dim, wrap: "truncate-end" },
+                    r.isCurrent ? "current  " : "",
+                    r.commitSha ? `${r.commitSha.slice(0, 7)} ` : "",
+                    r.commitMessage ?? "")));
+        })),
+        notice ? (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: notice.color }, notice.text))) : null,
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.dim }, "\u2191\u2193 select \u00B7 Enter details \u00B7 b roll back to selected \u00B7 r refresh"))));
+}
+// ─── Metrics ─────────────────────────────────────────────────────────────────
+const RANGES = ["15m", "1h", "6h", "24h"];
+function MetricsTab({ app }) {
+    const api = useApi();
+    const [rangeIdx, setRangeIdx] = useState(1);
+    const [usage, setUsage] = useState(null);
+    const [error, setError] = useState(null);
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        const load = () => api.apps
+            .usage(app.id, { range: RANGES[rangeIdx] })
+            .then((u) => {
+            if (cancelled)
+                return;
+            setUsage(u);
+            setError(null);
+        })
+            .catch((e) => !cancelled && setError(e instanceof Error ? e.message : String(e)));
+        void load();
+        const id = setInterval(load, 15_000);
+        return () => {
+            cancelled = true;
+            clearInterval(id);
+        };
+    }, [api, app.id, rangeIdx, tick]);
+    useInput((input) => {
+        if (input === "w")
+            setRangeIdx((i) => (i + 1) % RANGES.length);
+        else if (input === "r")
+            setTick((t) => t + 1);
+    });
+    if (error)
+        return React.createElement(Text, { color: colors.error },
+            "Error: ",
+            error);
+    if (!usage)
+        return React.createElement(Spinner, { label: "Loading usage\u2026" });
+    const env = usage.envelope;
+    const cur = usage.current;
+    const cpuNow = cur?.cpu?.current ?? null;
+    const memNow = cur?.memory?.current ?? null;
+    const cpuPct = cpuNow !== null && env && env.cpuMillicores > 0 ? (cpuNow / env.cpuMillicores) * 100 : null;
+    const memPct = memNow !== null && env && env.memoryMib > 0 ? (memNow / (env.memoryMib * 1024 * 1024)) * 100 : null;
+    const cpuSeries = seriesOf(usage, "cpu");
+    const memSeries = seriesOf(usage, "memory");
+    const rx = cur?.networkRx?.current ?? null;
+    const tx = cur?.networkTx?.current ?? null;
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, null,
+            React.createElement(Text, { color: colors.dim }, "Window "),
+            React.createElement(Text, { color: colors.text }, RANGES[rangeIdx]),
+            React.createElement(Text, { color: colors.dim }, cur ? "  ·  live" : "  ·  latest snapshot (orchestrator unreachable)")),
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(UsageRow, { label: "CPU", pct: cpuPct, rightText: cpuNow !== null ? `${(cpuNow / 1000).toFixed(2)}${env ? ` / ${(env.cpuMillicores / 1000).toFixed(2)}` : ""} cores` : undefined }),
+            React.createElement(UsageRow, { label: "RAM", pct: memPct, rightText: memNow !== null ? `${Math.round(memNow / (1024 * 1024))}${env ? ` / ${env.memoryMib}` : ""} MB` : undefined }),
+            env?.bandwidthGbMonth != null || env?.bandwidthUsedGb != null ? (React.createElement(UsageRow, { label: "Net", pct: env.bandwidthGbMonth ? ((env.bandwidthUsedGb ?? 0) / env.bandwidthGbMonth) * 100 : null, rightText: `${(env.bandwidthUsedGb ?? 0).toFixed(2)} GB${env.bandwidthGbMonth != null ? ` / ${env.bandwidthGbMonth} GB this period` : " this period"}` })) : null),
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim, bold: true }, "Over the window"),
+            React.createElement(Sparkline, { data: cpuSeries, width: 28, label: "cpu   ", color: colors.accent }),
+            React.createElement(Sparkline, { data: memSeries, width: 28, label: "ram   ", color: colors.accentSoft }),
+            rx !== null || tx !== null ? (React.createElement(Text, { color: colors.dim }, `net   ↓ ${fmtRate(rx ?? 0)}   ↑ ${fmtRate(tx ?? 0)}`)) : null),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: colors.dim }, "w window \u00B7 r refresh \u00B7 refreshes every 15 s"))));
+}
+function seriesOf(usage, key) {
+    const live = usage.current?.[key]?.series?.map((p) => p.value) ?? [];
+    if (live.length)
+        return live;
+    return (usage.series ?? []).map((s) => s.payload?.[key]?.current ?? 0);
+}
+function fmtRate(bytesPerSec) {
+    if (bytesPerSec < 1024)
+        return `${bytesPerSec.toFixed(0)} B/s`;
+    if (bytesPerSec < 1024 * 1024)
+        return `${(bytesPerSec / 1024).toFixed(1)} KB/s`;
+    return `${(bytesPerSec / (1024 * 1024)).toFixed(2)} MB/s`;
+}
+// ─── Env ─────────────────────────────────────────────────────────────────────
+function EnvTab({ app, onBusy }) {
+    const api = useApi();
+    const [vars, setVars] = useState(null);
+    const [error, setError] = useState(null);
+    const [cursor, setCursor] = useState(0);
+    const [editing, setEditing] = useState(null);
+    const [draft, setDraft] = useState("");
+    const [promptError, setPromptError] = useState(null);
+    const [revealed, setRevealed] = useState({});
+    const [confirmDelete, setConfirmDelete] = useState(null);
+    const [notice, setNotice] = useState(null);
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        onBusy(editing !== null || confirmDelete !== null);
+    }, [editing, confirmDelete, onBusy]);
+    useEffect(() => {
+        let cancelled = false;
+        api.apps
+            .env(app.id)
+            .then((vs) => {
+            if (cancelled)
+                return;
+            setVars([...vs].sort((a, b) => a.key.localeCompare(b.key)));
+            setError(null);
+        })
+            .catch((e) => !cancelled && setError(e instanceof Error ? e.message : String(e)));
+        return () => {
+            cancelled = true;
+        };
+    }, [api, app.id, tick]);
+    const rows = vars ?? [];
+    const selected = rows[cursor];
+    useInput((input, key) => {
+        if (editing || confirmDelete)
+            return;
+        if (key.upArrow || input === "k")
+            setCursor((c) => Math.max(0, c - 1));
+        else if (key.downArrow || input === "j")
+            setCursor((c) => Math.min(rows.length - 1, c + 1));
+        else if (input === "a") {
+            setDraft("");
+            setPromptError(null);
+            setEditing("add");
+        }
+        else if ((input === "e" || key.return) && selected) {
+            setDraft("");
+            setPromptError(null);
+            setEditing("edit");
+        }
+        else if (input === "v" && selected) {
+            void reveal(selected);
+        }
+        else if (input === "x" && selected)
+            setConfirmDelete(selected);
+        else if (input === "r")
+            setTick((t) => t + 1);
+    }, { isActive: true });
+    const reveal = async (v) => {
+        if (revealed[v.key] !== undefined) {
+            setRevealed((r) => {
+                const next = { ...r };
+                delete next[v.key];
+                return next;
+            });
+            return;
+        }
+        try {
+            const out = await api.apps.revealEnv(app.id, v.key);
+            setRevealed((r) => ({ ...r, [v.key]: out.value }));
+        }
+        catch (e) {
+            setNotice({ text: e instanceof Error ? e.message : String(e), color: colors.error });
+        }
+    };
+    const submit = async (raw) => {
+        let key;
+        let value;
+        if (editing === "add") {
+            const eq = raw.indexOf("=");
+            if (eq <= 0) {
+                setPromptError("Type KEY=VALUE.");
+                return;
+            }
+            key = raw.slice(0, eq).trim();
+            value = raw.slice(eq + 1);
+            if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) {
+                setPromptError("Keys are letters, digits and underscores, not starting with a digit.");
+                return;
+            }
+        }
+        else {
+            if (!selected)
+                return;
+            key = selected.key;
+            value = raw;
+        }
+        setEditing(null);
+        setNotice({ text: `Saving ${key}…`, color: colors.warning });
+        try {
+            await api.apps.setEnv(app.id, {
+                key,
+                value,
+                scope: editing === "edit" ? selected?.scope : undefined,
+                kind: editing === "edit" ? selected?.kind : undefined,
+            });
+            setNotice({ text: `Saved ${key}. Redeploy to apply it at runtime.`, color: colors.success });
+            setRevealed((r) => {
+                const next = { ...r };
+                delete next[key];
+                return next;
+            });
+            setTick((t) => t + 1);
+        }
+        catch (e) {
+            setNotice({ text: e instanceof Error ? e.message : String(e), color: colors.error });
+        }
+    };
+    const remove = async (v) => {
+        setNotice({ text: `Removing ${v.key}…`, color: colors.warning });
+        try {
+            await api.apps.deleteEnv(app.id, v.key);
+            setNotice({ text: `Removed ${v.key}.`, color: colors.success });
+            setCursor((c) => Math.max(0, c - 1));
+            setTick((t) => t + 1);
+        }
+        catch (e) {
+            setNotice({ text: e instanceof Error ? e.message : String(e), color: colors.error });
+        }
+    };
+    if (confirmDelete) {
+        return (React.createElement(ConfirmModal, { title: `Remove ${confirmDelete.key} from ${app.slug}?`, hint: "The value is gone for good; a redeploy no longer sees it.", onConfirm: () => {
+                const v = confirmDelete;
+                setConfirmDelete(null);
+                void remove(v);
+            }, onCancel: () => setConfirmDelete(null) }));
+    }
+    return (React.createElement(Box, { flexDirection: "column" },
+        vars === null ? (React.createElement(Spinner, { label: "Loading env\u2026" })) : error ? (React.createElement(Text, { color: colors.error },
+            "Error: ",
+            error)) : rows.length === 0 ? (React.createElement(Text, { color: colors.dim }, "No environment variables. Press a to add one.")) : (rows.map((v, i) => {
+            const focused = i === cursor;
+            const shown = revealed[v.key];
+            return (React.createElement(Box, { key: v.id, flexDirection: "column" },
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: focused ? colors.accent : colors.dim }, focused ? `${glyphs.chevronRight} ` : "  "),
+                    React.createElement(Box, { width: 28 },
+                        React.createElement(Text, { color: focused ? colors.accent : colors.text, bold: focused, wrap: "truncate-end" }, v.key)),
+                    React.createElement(Box, { width: 9 },
+                        React.createElement(Text, { color: colors.dim }, v.scope)),
+                    React.createElement(Box, { width: 8 },
+                        React.createElement(Text, { color: colors.dim }, v.kind ?? "secret")),
+                    React.createElement(Text, { color: colors.dim }, shown !== undefined ? `= ${shown}` : v.hasValue ? "••••••" : "(empty)"),
+                    React.createElement(Text, { color: colors.dim }, `  ${fmtWhen(v.updatedAt)}`))));
+        })),
+        notice ? (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: notice.color }, notice.text))) : null,
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" }, editing ? (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim }, editing === "add"
+                ? "New variable as KEY=VALUE (stored as a runtime secret; change scope or kind with `synteq app env add`)."
+                : `New value for ${selected?.key}.`),
+            promptError ? React.createElement(Text, { color: colors.error }, promptError) : null,
+            React.createElement(InputBar, { value: draft, onChange: setDraft, onSubmit: (v) => void submit(v), focused: true, placeholder: editing === "add" ? "DATABASE_URL=postgres://…" : "" }),
+            React.createElement(Text, { color: colors.dim }, "Enter to save \u00B7 Esc to cancel"))) : (React.createElement(Text, { color: colors.dim }, "a add \u00B7 e / Enter edit \u00B7 v reveal / hide \u00B7 x remove \u00B7 r refresh"))),
+        React.createElement(EscListener, { active: editing !== null, onEscape: () => setEditing(null) })));
+}
+const SETTING_FIELDS = [
+    { key: "rootDirectory", label: "Root directory", hint: "Subdirectory to build from (empty = repo root).", kind: "text" },
+    { key: "dockerfilePath", label: "Dockerfile path", hint: "Relative to the root directory.", kind: "text" },
+    { key: "buildContext", label: "Build context", hint: "Docker build context directory.", kind: "text" },
+    { key: "dockerCommand", label: "Start command", hint: "Overrides the container's start command.", kind: "text" },
+    { key: "preDeployCommand", label: "Pre-deploy command", hint: "Runs once before each deploy (migrations).", kind: "text" },
+    { key: "autoDeploy", label: "Auto-deploy", hint: "on_commit deploys every push; off deploys only by hand.", kind: "toggle" },
+    { key: "healthCheckPath", label: "Health check path", hint: "HTTP path polled to gate a deploy healthy (/healthz).", kind: "text" },
+    { key: "port", label: "Port", hint: "1-65535; empty lets the runtime detect it.", kind: "int" },
+    { key: "buildFilterIncluded", label: "Build paths (include)", hint: "Comma-separated; a push touching none of them skips the build.", kind: "list" },
+    { key: "buildFilterIgnored", label: "Build paths (ignore)", hint: "Comma-separated; pushes touching only these skip the build.", kind: "list" },
+];
+function SettingsTab({ app, onBusy }) {
+    const api = useApi();
+    const [settings, setSettings] = useState(null);
+    const [error, setError] = useState(null);
+    const [cursor, setCursor] = useState(0);
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState("");
+    const [promptError, setPromptError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    useEffect(() => {
+        onBusy(editing);
+    }, [editing, onBusy]);
+    useEffect(() => {
+        let cancelled = false;
+        api.apps
+            .settings(app.id)
+            .then((s) => !cancelled && setSettings(s))
+            .catch((e) => !cancelled && setError(e instanceof Error ? e.message : String(e)));
+        return () => {
+            cancelled = true;
+        };
+    }, [api, app.id]);
+    const field = SETTING_FIELDS[cursor];
+    const currentText = (key) => {
+        if (!settings)
+            return "";
+        const v = settings[key];
+        if (v == null)
+            return "";
+        if (Array.isArray(v))
+            return v.join(", ");
+        return String(v);
+    };
+    const save = useCallback(async (patch, label) => {
+        setNotice({ text: `Saving ${label}…`, color: colors.warning });
+        try {
+            const s = await api.apps.patchSettings(app.id, patch);
+            setSettings(s);
+            setNotice({ text: `Saved ${label}.`, color: colors.success });
+        }
+        catch (e) {
+            setNotice({ text: e instanceof Error ? e.message : String(e), color: colors.error });
+        }
+    }, [api, app.id]);
+    useInput((input, key) => {
+        if (editing || !settings)
+            return;
+        if (key.upArrow || input === "k")
+            setCursor((c) => Math.max(0, c - 1));
+        else if (key.downArrow || input === "j")
+            setCursor((c) => Math.min(SETTING_FIELDS.length - 1, c + 1));
+        else if (key.return || input === "e") {
+            if (field.kind === "toggle") {
+                const next = settings.autoDeploy === "off" ? "on_commit" : "off";
+                void save({ autoDeploy: next }, `${field.label} → ${next}`);
+                return;
+            }
+            setDraft(currentText(field.key));
+            setPromptError(null);
+            setEditing(true);
+        }
+    }, { isActive: true });
+    const submit = (raw) => {
+        const text = raw.trim();
+        const patch = {};
+        if (field.kind === "int") {
+            if (text === "")
+                patch.port = null;
+            else {
+                const n = Number(text);
+                if (!Number.isInteger(n) || n < 1 || n > 65535) {
+                    setPromptError("Port must be a whole number 1-65535, or empty to clear it.");
+                    return;
+                }
+                patch.port = n;
+            }
+        }
+        else if (field.kind === "list") {
+            const items = text ? text.split(",").map((s) => s.trim()).filter(Boolean) : [];
+            patch[field.key] = items.length ? items : null;
+        }
+        else {
+            patch[field.key] = text === "" ? null : text;
+        }
+        setEditing(false);
+        void save(patch, field.label);
+    };
+    if (error)
+        return React.createElement(Text, { color: colors.error },
+            "Error: ",
+            error);
+    if (!settings)
+        return React.createElement(Spinner, { label: "Loading settings\u2026" });
+    return (React.createElement(Box, { flexDirection: "column" },
+        SETTING_FIELDS.map((f, i) => {
+            const focused = i === cursor;
+            const text = currentText(f.key);
+            const placeholder = f.key === "port" ? `detect (${settings.effectivePort})` : f.key === "autoDeploy" ? "" : "—";
+            return (React.createElement(Box, { key: f.key },
+                React.createElement(Text, { color: focused ? colors.accent : colors.dim }, focused ? `${glyphs.chevronRight} ` : "  "),
+                React.createElement(Box, { width: 24 },
+                    React.createElement(Text, { color: focused ? colors.accent : colors.text, bold: focused }, f.label)),
+                React.createElement(Text, { color: text ? colors.text : colors.dim, wrap: "truncate-end" }, text || placeholder)));
+        }),
+        notice ? (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: notice.color }, notice.text))) : null,
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" }, editing ? (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim },
+                field.label,
+                " \u2014 ",
+                field.hint,
+                " Empty clears it."),
+            promptError ? React.createElement(Text, { color: colors.error }, promptError) : null,
+            React.createElement(InputBar, { value: draft, onChange: setDraft, onSubmit: submit, focused: true }),
+            React.createElement(Text, { color: colors.dim }, "Enter to save \u00B7 Esc to cancel"))) : (React.createElement(Text, { color: colors.dim },
+            field.hint,
+            "  ·  ",
+            field.kind === "toggle" ? "Enter toggles" : "Enter / e edits"))),
+        React.createElement(EscListener, { active: editing, onEscape: () => setEditing(false) })));
+}
+// ─── shared bits ─────────────────────────────────────────────────────────────
+function DetailRow({ label, value }) {
+    return (React.createElement(Box, null,
+        React.createElement(Box, { width: 16 },
+            React.createElement(Text, { color: colors.dim }, label)),
+        typeof value === "string" ? React.createElement(Text, { color: colors.text }, value) : value));
+}
+function UsageRow({ label, pct, rightText }) {
+    const barWidth = 16;
+    const filled = pct !== null && Number.isFinite(pct) ? Math.min(barWidth, Math.max(0, Math.round((pct / 100) * barWidth))) : 0;
+    const bar = pct !== null ? "█".repeat(filled) + "░".repeat(barWidth - filled) : "─".repeat(barWidth);
+    const tone = pct === null ? colors.dim : pct >= 100 ? colors.error : pct >= 80 ? colors.warning : colors.accent;
+    return (React.createElement(Box, null,
+        React.createElement(Box, { width: 8 },
+            React.createElement(Text, { color: colors.dim }, label)),
+        React.createElement(Text, { color: tone }, bar),
+        rightText ? React.createElement(Text, { color: colors.dim }, `  ${rightText}`) : null));
+}
+//# sourceMappingURL=AppDetail.js.map