@synteq/cli 0.1.0

package/dist/tui/screens/Resources.js

@@ -0,0 +1,720 @@
+import React, { useEffect, useState, useCallback, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+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 { useApi } from "../hooks/useApi.js";
+import { useHeader } from "../hooks/useHeader.js";
+import { useRouter } from "../router.js";
+import { colors, statusColor } from "../theme/colors.js";
+import { glyphs } from "../theme/glyphs.js";
+import { CenteredFrame } from "../components/CenteredFrame.js";
+import { BackButton } from "../components/BackButton.js";
+import { Clickable } from "../components/Clickable.js";
+import { Sparkline } from "../components/Sparkline.js";
+import { ActionButton } from "../components/ActionButton.js";
+import { ConfirmModal } from "../components/ConfirmModal.js";
+const KIND_ITEMS = [
+    { value: "all", label: "All" },
+    { value: "cloud", label: "Cloud" },
+    { value: "gpu", label: "GPU Cloud" },
+    { value: "metal", label: "Metal" },
+    { value: "storage", label: "Storage" },
+    { value: "transit", label: "Transit" },
+];
+const KIND_TITLE = {
+    all: "All Resources",
+    cloud: "Cloud",
+    gpu: "GPU Cloud",
+    metal: "Metal",
+    storage: "Storage",
+    transit: "Transit",
+};
+function toVpsRow(v) {
+    return {
+        kind: "vps",
+        id: v.id,
+        name: v.hostname,
+        status: v.status,
+        location: v.location?.city ?? v.location?.name ?? "",
+        ip: v.ip_addresses?.[0]?.address ?? "",
+        raw: v,
+    };
+}
+function toMetalRow(b) {
+    return {
+        kind: "metal",
+        id: b.id,
+        name: b.hostname ?? b.reference,
+        status: b.is_active ? "active" : "inactive",
+        location: b.location_city ?? b.location_name ?? "",
+        ip: b.primary_ipv4 ?? "",
+        raw: b,
+    };
+}
+function toStorageRow(s) {
+    return {
+        kind: "storage",
+        id: s.id,
+        name: s.name,
+        status: s.is_attached ? `attached:${s.status}` : s.status,
+        location: s.location_name ?? "",
+        ip: s.vps_hostname ?? "",
+        raw: s,
+    };
+}
+function toTransitRow(t) {
+    return {
+        kind: "transit",
+        id: t.id,
+        name: t.service_name,
+        status: "active",
+        location: "",
+        ip: "",
+        raw: t,
+    };
+}
+export function Resources() {
+    const api = useApi();
+    const { header } = useHeader();
+    const { goBack } = useRouter();
+    const [kind, setKind] = useState("all");
+    const [rows, setRows] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [filter, setFilter] = useState("");
+    const [filterMode, setFilterMode] = useState("off");
+    const [mode, setMode] = useState("list");
+    const [cursor, setCursor] = useState(0);
+    const [selected, setSelected] = useState(null);
+    const [pane, setPane] = useState("sidebar");
+    const load = useCallback(async (k) => {
+        setLoading(true);
+        setError(null);
+        try {
+            let next = [];
+            switch (k) {
+                case "all": {
+                    const [vps, metal, storage, transit] = await Promise.all([
+                        api.vps.list().catch(() => []),
+                        api.baremetal.list().catch(() => []),
+                        api.storage.list().catch(() => []),
+                        api.transit.list().catch(() => []),
+                    ]);
+                    next = [
+                        ...vps.map(toVpsRow),
+                        ...metal.map(toMetalRow),
+                        ...storage.map(toStorageRow),
+                        ...transit.map(toTransitRow),
+                    ];
+                    break;
+                }
+                case "cloud": {
+                    const vps = await api.vps.list();
+                    next = vps
+                        .filter((v) => v.plan?.category !== "gpu_cloud")
+                        .map(toVpsRow);
+                    break;
+                }
+                case "gpu": {
+                    const vps = await api.vps.list();
+                    next = vps
+                        .filter((v) => v.plan?.category === "gpu_cloud")
+                        .map(toVpsRow);
+                    break;
+                }
+                case "metal": {
+                    const metal = await api.baremetal.list();
+                    next = metal.map(toMetalRow);
+                    break;
+                }
+                case "storage": {
+                    const storage = await api.storage.list();
+                    next = storage.map(toStorageRow);
+                    break;
+                }
+                case "transit": {
+                    const transit = await api.transit.list();
+                    next = transit.map(toTransitRow);
+                    break;
+                }
+            }
+            setRows(next);
+            setCursor(0);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+            setRows([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [api]);
+    useEffect(() => {
+        load(kind);
+    }, [kind, load]);
+    const visible = useMemo(() => {
+        if (!filter.trim())
+            return rows;
+        const q = filter.trim().toLowerCase();
+        return rows.filter((r) => {
+            return (r.name.toLowerCase().includes(q) ||
+                r.ip.toLowerCase().includes(q) ||
+                r.id.toLowerCase().includes(q));
+        });
+    }, [rows, filter]);
+    useEffect(() => {
+        if (cursor >= visible.length)
+            setCursor(Math.max(0, visible.length - 1));
+    }, [visible.length, cursor]);
+    const menuFocused = mode === "list" && filterMode !== "editing" && pane === "sidebar";
+    const listPaneActive = mode === "list" && filterMode !== "editing" && pane === "list";
+    useInput((input, key) => {
+        if (key.escape) {
+            if (filterMode === "editing") {
+                setFilter("");
+                setFilterMode("off");
+                return;
+            }
+            if (mode === "detail") {
+                setMode("list");
+                setSelected(null);
+                return;
+            }
+            if (pane === "list") {
+                setPane("sidebar");
+                return;
+            }
+            goBack();
+            return;
+        }
+        if (filterMode !== "editing") {
+            if (key.leftArrow || (key.tab && key.shift)) {
+                if (mode === "detail") {
+                    setMode("list");
+                    setSelected(null);
+                    setPane("sidebar");
+                    return;
+                }
+                if (pane === "list") {
+                    setPane("sidebar");
+                    return;
+                }
+            }
+            if ((key.rightArrow || (key.tab && !key.shift)) &&
+                mode === "list" &&
+                pane === "sidebar") {
+                if (visible.length > 0)
+                    setPane("list");
+                return;
+            }
+        }
+        if (mode === "list" && filterMode !== "editing") {
+            if (input === "r") {
+                load(kind);
+                return;
+            }
+            if (input === "/") {
+                setFilterMode("editing");
+                return;
+            }
+        }
+        if (!listPaneActive)
+            return;
+        if (key.upArrow || input === "k") {
+            setCursor((c) => Math.max(0, c - 1));
+            return;
+        }
+        if (key.downArrow || input === "j") {
+            setCursor((c) => Math.min(visible.length - 1, c + 1));
+            return;
+        }
+        if (key.return) {
+            const sel = visible[cursor];
+            if (sel) {
+                setSelected(sel);
+                setMode("detail");
+            }
+        }
+    }, { isActive: true });
+    const rows_count = visible.length;
+    const totalRows = process.stdout.rows ?? 24;
+    const paneHeight = Math.max(10, totalRows - 6);
+    return (React.createElement(CenteredFrame, { fullHeight: true, maxWidth: 120 },
+        React.createElement(Box, { paddingX: 2, paddingY: 0, height: 2, alignItems: "center" },
+            React.createElement(BackButton, { onBack: () => {
+                    if (filterMode === "editing") {
+                        setFilter("");
+                        setFilterMode("off");
+                        return;
+                    }
+                    if (mode === "detail") {
+                        setMode("list");
+                        setSelected(null);
+                        return;
+                    }
+                    if (pane === "list") {
+                        setPane("sidebar");
+                        return;
+                    }
+                    goBack();
+                } }),
+            React.createElement(Text, { color: colors.dim },
+                " · ",
+                React.createElement(Text, { color: colors.text }, "Resources"),
+                kind !== "all" ? (React.createElement(Text, { color: colors.dim }, ` · ${KIND_TITLE[kind]}`)) : null)),
+        React.createElement(Box, { flexGrow: 1, flexDirection: "row", paddingX: 1 },
+            React.createElement(Box, { width: 22, marginRight: 1 },
+                React.createElement(Panel, { paddingX: 1, paddingY: 1, width: 22, height: paneHeight, borderColor: pane === "sidebar" ? colors.accent : colors.dim },
+                    React.createElement(Menu, { items: KIND_ITEMS, onSelect: (v) => setKind(v), focused: menuFocused, initialIndex: 0 }))),
+            React.createElement(Box, { flexGrow: 1, flexDirection: "column" },
+                React.createElement(Panel, { title: mode === "detail" && selected ? selected.name : KIND_TITLE[kind], rightLabel: mode === "list"
+                        ? `${rows_count} item${rows_count === 1 ? "" : "s"}`
+                        : selected
+                            ? selected.kind.toUpperCase()
+                            : undefined, paddingX: 2, paddingY: 1, height: paneHeight, borderColor: pane === "list" || mode === "detail" ? colors.accent : colors.dim }, mode === "detail" && selected ? (React.createElement(DetailView, { row: selected })) : loading ? (React.createElement(Spinner, { label: `Loading ${KIND_TITLE[kind].toLowerCase()}…` })) : error ? (React.createElement(Text, { color: colors.error },
+                    "Error: ",
+                    error)) : visible.length === 0 ? (React.createElement(Text, { color: colors.dim }, rows.length === 0
+                    ? `No ${KIND_TITLE[kind].toLowerCase()} resources.`
+                    : `No matches for "${filter}".`)) : (React.createElement(RowList, { rows: visible, cursor: cursor, showKind: kind === "all", onHover: (i) => {
+                        if (pane !== "list")
+                            setPane("list");
+                        setCursor(i);
+                    }, onPick: (i) => {
+                        const sel = visible[i];
+                        if (sel) {
+                            setSelected(sel);
+                            setMode("detail");
+                        }
+                    } }))),
+                filterMode === "editing" ? (React.createElement(Box, { marginTop: 0 },
+                    React.createElement(InputBar, { value: filter, onChange: setFilter, onSubmit: (v) => {
+                            setFilter(v);
+                            setFilterMode(v.trim() ? "applied" : "off");
+                        }, placeholder: "filter by name / ip / id \u2014 Enter to apply, Esc to clear", focused: true }))) : filterMode === "applied" && filter ? (React.createElement(Box, { paddingX: 2 },
+                    React.createElement(Text, { color: colors.dim }, `filter: ${filter}`))) : null)),
+        React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Tip, null, mode === "detail"
+                ? "Esc to go back · s/S/r/x/c to power · click any button."
+                : filterMode === "editing"
+                    ? "Enter to apply filter · Esc to clear."
+                    : pane === "sidebar"
+                        ? "↑↓ kinds · → or Tab to enter list · / filter · r refresh · Esc back."
+                        : "↑↓ rows · Enter to open · ← or Esc to sidebar · / filter · r refresh."),
+            React.createElement(StatusBar, { left: `${rows_count} row${rows_count === 1 ? "" : "s"}`, right: [
+                    header.projectName ? `Project: ${header.projectName}` : "",
+                    header.teamName ? `Team: ${header.teamName}` : "",
+                ].filter(Boolean) }))));
+}
+function RowList({ rows, cursor, showKind, onPick, }) {
+    const [hover, setHover] = React.useState(null);
+    return (React.createElement(Box, { flexDirection: "column", width: "100%" }, rows.map((r, i) => {
+        const focused = i === cursor;
+        const isHovered = i === hover;
+        const cursorGlyph = focused ? `${glyphs.chevronRight} ` : "  ";
+        const rowBg = isHovered ? colors.selectionBg : undefined;
+        return (React.createElement(Clickable, { key: r.id, onHover: (h) => setHover(h ? i : (prev) => (prev === i ? null : prev)), onClick: () => onPick?.(i) },
+            React.createElement(Box, { width: "100%", justifyContent: "space-between", backgroundColor: rowBg, paddingX: 1 },
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: focused ? colors.accent : colors.dim, backgroundColor: rowBg }, cursorGlyph),
+                    showKind ? (React.createElement(Text, { color: colors.dim, backgroundColor: rowBg }, `[${r.kind}] `)) : null,
+                    React.createElement(Text, { bold: focused, color: focused ? colors.accent : colors.text, backgroundColor: rowBg }, r.name || "(unnamed)"),
+                    r.ip ? (React.createElement(Text, { color: colors.dim, backgroundColor: rowBg }, `  ${r.ip}`)) : null),
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: statusColor(r.status) ?? colors.dim, backgroundColor: rowBg }, r.status),
+                    r.location ? (React.createElement(Text, { color: colors.dim, backgroundColor: rowBg }, `  · ${r.location}`)) : null))));
+    })));
+}
+function DetailView({ row }) {
+    if (row.kind === "vps") {
+        return React.createElement(VpsDetailView, { row: row });
+    }
+    if (row.kind === "storage") {
+        return React.createElement(StorageDetailView, { row: row });
+    }
+    return React.createElement(StaticDetailView, { row: row });
+}
+function StaticDetailView({ row }) {
+    const rows = [];
+    rows.push(["Id", row.id]);
+    rows.push(["Status", row.status]);
+    if (row.ip)
+        rows.push(["IP / Host", row.ip]);
+    if (row.location)
+        rows.push(["Location", row.location]);
+    if (row.kind === "metal") {
+        const b = row.raw;
+        if (b.project_name)
+            rows.push(["Project", b.project_name]);
+        if (b.cpu_cores)
+            rows.push(["CPU cores", String(b.cpu_cores)]);
+        if (b.ram_gb)
+            rows.push(["RAM", `${b.ram_gb} GB`]);
+        rows.push(["Reference", b.reference]);
+    }
+    else if (row.kind === "storage") {
+        const s = row.raw;
+        if (s.project_name)
+            rows.push(["Project", s.project_name]);
+        rows.push(["Size", `${s.size_gb} GB`]);
+        if (s.disk_slot)
+            rows.push(["Slot", s.disk_slot]);
+        if (s.vps_hostname)
+            rows.push(["Attached to", s.vps_hostname]);
+    }
+    else if (row.kind === "transit") {
+        const t = row.raw;
+        if (t.project_name)
+            rows.push(["Project", t.project_name]);
+        if (t.commit_rate_bps) {
+            const mbps = Math.round(t.commit_rate_bps / 1_000_000);
+            rows.push(["Commit", `${mbps} Mbps`]);
+        }
+        if (t.description)
+            rows.push(["Description", t.description]);
+    }
+    return (React.createElement(Box, { flexDirection: "column" }, rows.map(([k, v]) => (React.createElement(Box, { key: k },
+        React.createElement(Box, { width: 16 },
+            React.createElement(Text, { color: colors.dim }, k)),
+        React.createElement(Text, { color: colors.text }, v))))));
+}
+const initialStats = {
+    status: "",
+    cpu: null,
+    memUsed: null,
+    memTotal: null,
+    diskUsed: null,
+    diskTotal: null,
+    uptimeSec: null,
+    netHistory: [],
+    netOutHistory: [],
+};
+const POLL_MS = 5_000;
+function VpsDetailView({ row }) {
+    const api = useApi();
+    const v = row.raw;
+    const [stats, setStats] = useState(initialStats);
+    const [actionStatus, setActionStatus] = useState(null);
+    useEffect(() => {
+        let abort = false;
+        const refresh = async () => {
+            try {
+                const [latest, rrd] = await Promise.all([
+                    api.vps.stats(row.id, "hour").catch(() => null),
+                    api.vps.rrd(row.id, "hour").catch(() => null),
+                ]);
+                if (abort)
+                    return;
+                const point = pickLatestPoint(latest);
+                const netHistory = (rrd?.points ?? [])
+                    .map((p) => (typeof p.netin === "number" ? p.netin : 0));
+                const netOutHistory = (rrd?.points ?? [])
+                    .map((p) => (typeof p.netout === "number" ? p.netout : 0));
+                setStats({
+                    status: point?.status ?? row.status ?? "",
+                    cpu: numOrNull(point?.cpu),
+                    memUsed: numOrNull(point?.mem),
+                    memTotal: numOrNull(point?.maxmem),
+                    diskUsed: numOrNull(point?.disk),
+                    diskTotal: numOrNull(point?.maxdisk),
+                    uptimeSec: numOrNull(point?.uptime),
+                    netHistory,
+                    netOutHistory,
+                });
+            }
+            catch { }
+        };
+        refresh();
+        const t = setInterval(refresh, POLL_MS);
+        return () => {
+            abort = true;
+            clearInterval(t);
+        };
+    }, [api, row.id, row.status]);
+    const doPower = useCallback(async (action) => {
+        setActionStatus({ label: `Sending ${action}…`, color: colors.warning });
+        try {
+            if (action === "cycle") {
+                await api.vpsControl.powerCycle(row.id);
+            }
+            else {
+                await api.vpsControl.power(row.id, action);
+            }
+            setActionStatus({ label: `${action} queued.`, color: colors.success });
+            setTimeout(() => setActionStatus(null), 3000);
+        }
+        catch (e) {
+            setActionStatus({
+                label: `Failed: ${e instanceof Error ? e.message : String(e)}`,
+                color: colors.error,
+            });
+        }
+    }, [api, row.id]);
+    const [confirmPower, setConfirmPower] = useState(null);
+    const requestPower = useCallback((action) => {
+        if (action === "start")
+            void doPower(action);
+        else
+            setConfirmPower(action);
+    }, [doPower]);
+    useInput((input) => {
+        if (input === "s")
+            requestPower("start");
+        else if (input === "S")
+            requestPower("shutdown");
+        else if (input === "r")
+            requestPower("reboot");
+        else if (input === "x")
+            requestPower("stop");
+        else if (input === "c")
+            requestPower("cycle");
+    });
+    if (confirmPower) {
+        return (React.createElement(ConfirmModal, { title: `${capitalizeAction(confirmPower)} ${row.name}?`, hint: confirmPower === "stop"
+                ? "Hard-stops the VM — like pulling the power cord."
+                : confirmPower === "cycle"
+                    ? "Hard stop, then start — in-memory state is lost."
+                    : undefined, onConfirm: () => {
+                setConfirmPower(null);
+                void doPower(confirmPower);
+            }, onCancel: () => setConfirmPower(null) }));
+    }
+    const planLabel = v.plan?.name ?? v.plan?.category ?? "";
+    const gpuLine = v.gpu_count && v.gpu_count > 0
+        ? `${v.gpu_count}× ${v.gpu_model_name ?? "GPU"}${v.gpu_vram_gb ? ` (${v.gpu_vram_gb} GB)` : ""}`
+        : null;
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(DetailRow, { label: "Id", value: row.id }),
+        React.createElement(DetailRow, { label: "Status", value: React.createElement(Text, { color: statusColor(stats.status || row.status) ?? colors.text }, stats.status || row.status) }),
+        row.ip ? React.createElement(DetailRow, { label: "IP / Host", value: row.ip }) : null,
+        row.location ? React.createElement(DetailRow, { label: "Location", value: row.location }) : null,
+        v.project_name ? React.createElement(DetailRow, { label: "Project", value: v.project_name }) : null,
+        planLabel ? React.createElement(DetailRow, { label: "Plan", value: planLabel }) : null,
+        gpuLine ? React.createElement(DetailRow, { label: "GPU", value: gpuLine }) : null,
+        stats.uptimeSec !== null ? (React.createElement(DetailRow, { label: "Uptime", value: formatUptime(stats.uptimeSec) })) : null,
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim, bold: true }, "Usage"),
+            React.createElement(UsageRow, { label: "CPU", pct: stats.cpu !== null ? stats.cpu * 100 : null, rightText: stats.cpu !== null ? `${(stats.cpu * 100).toFixed(1)}%` : undefined }),
+            React.createElement(UsageRow, { label: "RAM", pct: stats.memUsed !== null && stats.memTotal
+                    ? (stats.memUsed / stats.memTotal) * 100
+                    : null, rightText: stats.memUsed !== null && stats.memTotal
+                    ? `${formatBytes(stats.memUsed)} / ${formatBytes(stats.memTotal)}`
+                    : undefined }),
+            React.createElement(UsageRow, { label: "Disk", pct: stats.diskUsed !== null && stats.diskTotal
+                    ? (stats.diskUsed / stats.diskTotal) * 100
+                    : null, rightText: stats.diskUsed !== null && stats.diskTotal
+                    ? `${formatBytes(stats.diskUsed)} / ${formatBytes(stats.diskTotal)}`
+                    : undefined })),
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim, bold: true }, "Network (last hour)"),
+            React.createElement(Sparkline, { data: stats.netHistory, width: 28, label: "\u2193 in  ", color: colors.accent }),
+            React.createElement(Sparkline, { data: stats.netOutHistory, width: 28, label: "\u2191 out ", color: colors.accentSoft })),
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim, bold: true }, "Actions"),
+            React.createElement(Box, { marginTop: 0, flexShrink: 0 },
+                React.createElement(ActionButton, { keybind: "s", label: "Start", onPress: () => requestPower("start") }),
+                React.createElement(Box, { marginLeft: 1 }),
+                React.createElement(ActionButton, { keybind: "S", label: "Shutdown", onPress: () => requestPower("shutdown") }),
+                React.createElement(Box, { marginLeft: 1 }),
+                React.createElement(ActionButton, { keybind: "r", label: "Reboot", onPress: () => requestPower("reboot") })),
+            React.createElement(Box, { marginTop: 0, flexShrink: 0 },
+                React.createElement(ActionButton, { keybind: "x", label: "Stop", onPress: () => requestPower("stop") }),
+                React.createElement(Box, { marginLeft: 1 }),
+                React.createElement(ActionButton, { keybind: "c", label: "Cycle", onPress: () => requestPower("cycle") })),
+            actionStatus ? (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: actionStatus.color }, actionStatus.label))) : null)));
+}
+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);
+    return (React.createElement(Box, null,
+        React.createElement(Box, { width: 8 },
+            React.createElement(Text, { color: colors.dim }, label)),
+        React.createElement(Text, { color: pct !== null ? colors.accent : colors.dim }, bar),
+        rightText ? React.createElement(Text, { color: colors.dim }, `  ${rightText}`) : null));
+}
+function pickLatestPoint(raw) {
+    if (!raw)
+        return null;
+    if (Array.isArray(raw)) {
+        for (let i = raw.length - 1; i >= 0; i--) {
+            const p = raw[i];
+            if (p && typeof p === "object" && p.cpu !== undefined && p.cpu !== null) {
+                return p;
+            }
+        }
+        return raw[raw.length - 1] ?? null;
+    }
+    return raw;
+}
+function numOrNull(v) {
+    return typeof v === "number" && Number.isFinite(v) ? v : null;
+}
+function formatBytes(n) {
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    let i = 0;
+    let x = n;
+    while (x >= 1024 && i < units.length - 1) {
+        x /= 1024;
+        i++;
+    }
+    return `${x.toFixed(x >= 10 ? 0 : 1)} ${units[i]}`;
+}
+function capitalizeAction(a) {
+    return a.charAt(0).toUpperCase() + a.slice(1);
+}
+function formatUptime(sec) {
+    const d = Math.floor(sec / 86400);
+    const h = Math.floor((sec % 86400) / 3600);
+    const m = Math.floor((sec % 3600) / 60);
+    const parts = [];
+    if (d)
+        parts.push(`${d}d`);
+    if (h || d)
+        parts.push(`${h}h`);
+    parts.push(`${m}m`);
+    return parts.join(" ");
+}
+function StorageDetailView({ row }) {
+    const api = useApi();
+    const v = row.raw;
+    const [current, setCurrent] = useState(v);
+    const isAttached = current.is_attached;
+    const [subMode, setSubMode] = useState("idle");
+    const [actionStatus, setActionStatus] = useState(null);
+    const [vpsCandidates, setVpsCandidates] = useState(null);
+    const [vpsLoadError, setVpsLoadError] = useState(null);
+    useEffect(() => {
+        if (subMode !== "picking" || vpsCandidates !== null)
+            return;
+        let abort = false;
+        (async () => {
+            try {
+                const list = await api.vps.list(current.project_id);
+                if (abort)
+                    return;
+                setVpsCandidates(list);
+            }
+            catch (e) {
+                if (abort)
+                    return;
+                setVpsLoadError(e instanceof Error ? e.message : String(e));
+            }
+        })();
+        return () => {
+            abort = true;
+        };
+    }, [api, subMode, current.project_id, vpsCandidates]);
+    const doAttach = useCallback(async (vpsId) => {
+        setSubMode("submitting");
+        setActionStatus({ label: "Attaching…", color: colors.warning });
+        try {
+            const result = await api.storage.attach(current.id, vpsId);
+            const targetVps = vpsCandidates?.find((x) => x.id === vpsId);
+            setCurrent({
+                ...current,
+                is_attached: true,
+                status: "attached",
+                vps_id: vpsId,
+                vps_hostname: targetVps?.hostname ?? current.vps_hostname,
+                disk_slot: result.disk_slot ?? current.disk_slot,
+            });
+            setActionStatus({ label: `Attached to ${targetVps?.hostname ?? "VPS"}.`, color: colors.success });
+            setSubMode("idle");
+            setTimeout(() => setActionStatus(null), 3000);
+        }
+        catch (e) {
+            setActionStatus({
+                label: `Failed: ${e instanceof Error ? e.message : String(e)}`,
+                color: colors.error,
+            });
+            setSubMode("idle");
+        }
+    }, [api, current, vpsCandidates]);
+    const doDetach = useCallback(async () => {
+        setSubMode("submitting");
+        setActionStatus({ label: "Detaching…", color: colors.warning });
+        try {
+            await api.storage.detach(current.id);
+            setCurrent({
+                ...current,
+                is_attached: false,
+                status: "available",
+                vps_id: null,
+                vps_hostname: null,
+                disk_slot: null,
+            });
+            setActionStatus({ label: "Detached.", color: colors.success });
+            setSubMode("idle");
+            setTimeout(() => setActionStatus(null), 3000);
+        }
+        catch (e) {
+            setActionStatus({
+                label: `Failed: ${e instanceof Error ? e.message : String(e)}`,
+                color: colors.error,
+            });
+            setSubMode("idle");
+        }
+    }, [api, current]);
+    useInput((input, key) => {
+        if (subMode !== "idle") {
+            if (key.escape && subMode === "picking")
+                setSubMode("idle");
+            return;
+        }
+        if (input === "a" && !isAttached)
+            setSubMode("picking");
+        else if (input === "d" && isAttached)
+            doDetach();
+    });
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(DetailRow, { label: "Id", value: current.id }),
+        React.createElement(DetailRow, { label: "Status", value: React.createElement(Text, { color: statusColor(current.status) ?? colors.text }, current.status) }),
+        React.createElement(DetailRow, { label: "Project", value: current.project_name ?? "—" }),
+        current.location_name ? (React.createElement(DetailRow, { label: "Location", value: current.location_name })) : null,
+        React.createElement(DetailRow, { label: "Size", value: `${current.size_gb} GB` }),
+        current.monthly_price !== null && current.monthly_price !== undefined ? (React.createElement(DetailRow, { label: "Monthly cost", value: `$${current.monthly_price.toFixed(2)}` })) : null,
+        isAttached && current.vps_hostname ? (React.createElement(DetailRow, { label: "Attached to", value: current.vps_hostname })) : null,
+        isAttached && current.disk_slot ? (React.createElement(DetailRow, { label: "Disk slot", value: current.disk_slot })) : null,
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim, bold: true }, "Actions"),
+            React.createElement(Box, { marginTop: 0 }, isAttached ? (React.createElement(ActionButton, { keybind: "d", label: "Detach", onPress: doDetach })) : (React.createElement(ActionButton, { keybind: "a", label: "Attach to VPS", onPress: () => setSubMode("picking") }))),
+            actionStatus ? (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: actionStatus.color }, actionStatus.label))) : null),
+        subMode === "picking" ? (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { color: colors.dim, bold: true }, "Pick a VPS to attach to"),
+            vpsLoadError ? (React.createElement(Text, { color: colors.error },
+                "Failed to load VPS list: ",
+                vpsLoadError)) : vpsCandidates === null ? (React.createElement(Spinner, { label: "Loading VPS list\u2026" })) : (() => {
+                const filtered = current.location_id
+                    ? vpsCandidates.filter((vp) => !vp.location_id || vp.location_id === current.location_id)
+                    : vpsCandidates;
+                if (filtered.length === 0) {
+                    return (React.createElement(Text, { color: colors.dim }, current.location_name
+                        ? `No VPS instances in ${current.location_name}. Esc to cancel.`
+                        : "No VPS instances in this project. Esc to cancel."));
+                }
+                return (React.createElement(Menu, { items: filtered.map((vp) => ({
+                        value: vp.id,
+                        label: vp.hostname,
+                        hint: `${vp.location?.city ?? vp.location?.name ?? ""} · ${vp.status}`,
+                    })), onSelect: doAttach }));
+            })(),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: colors.dim }, "Esc to cancel.")))) : null));
+}
+//# sourceMappingURL=Resources.js.map