@runloop/rl-cli 1.1.0 → 1.3.0

package/dist/screens/ObjectDetailScreen.js

@@ -0,0 +1,377 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ObjectDetailScreen - Detail page for storage objects
+ * Uses the generic ResourceDetailPage component
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import figures from "figures";
+import { writeFile } from "fs/promises";
+import { useNavigation } from "../store/navigationStore.js";
+import { useObjectStore, } from "../store/objectStore.js";
+import { getClient } from "../utils/client.js";
+import { ResourceDetailPage, formatTimestamp, } from "../components/ResourceDetailPage.js";
+import { getObject, deleteObject, formatFileSize, } from "../services/objectService.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { SuccessMessage } from "../components/SuccessMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { Header } from "../components/Header.js";
+import { ConfirmationPrompt } from "../components/ConfirmationPrompt.js";
+import { colors } from "../utils/theme.js";
+export function ObjectDetailScreen({ objectId }) {
+    const { goBack } = useNavigation();
+    const objects = useObjectStore((state) => state.objects);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [fetchedObject, setFetchedObject] = React.useState(null);
+    const [deleting, setDeleting] = React.useState(false);
+    const [showDownloadPrompt, setShowDownloadPrompt] = React.useState(false);
+    const [downloadPath, setDownloadPath] = React.useState("");
+    const [downloading, setDownloading] = React.useState(false);
+    const [downloadResult, setDownloadResult] = React.useState(null);
+    const [downloadError, setDownloadError] = React.useState(null);
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+    // Find object in store first
+    const objectFromStore = objects.find((o) => o.id === objectId);
+    // Polling function - must be defined before any early returns (Rules of Hooks)
+    const pollObject = React.useCallback(async () => {
+        if (!objectId)
+            return null;
+        return getObject(objectId);
+    }, [objectId]);
+    // Fetch object from API if not in store or missing full details
+    React.useEffect(() => {
+        if (objectId && !loading && !fetchedObject) {
+            // Always fetch full details since store may only have basic info
+            setLoading(true);
+            setError(null);
+            getObject(objectId)
+                .then((obj) => {
+                setFetchedObject(obj);
+                setLoading(false);
+            })
+                .catch((err) => {
+                setError(err);
+                setLoading(false);
+            });
+        }
+    }, [objectId, loading, fetchedObject]);
+    // Use fetched object for full details, fall back to store for basic display
+    const storageObject = fetchedObject || objectFromStore;
+    // Handle download submission
+    const handleDownloadSubmit = React.useCallback(async () => {
+        if (!downloadPath.trim() || !storageObject)
+            return;
+        setShowDownloadPrompt(false);
+        setDownloading(true);
+        try {
+            const client = getClient();
+            // Get download URL
+            const downloadUrlResponse = await client.objects.download(storageObject.id, {
+                duration_seconds: 3600,
+            });
+            // Download the file
+            const response = await fetch(downloadUrlResponse.download_url);
+            if (!response.ok) {
+                throw new Error(`Download failed: HTTP ${response.status}`);
+            }
+            // Save the file
+            const arrayBuffer = await response.arrayBuffer();
+            const buffer = Buffer.from(arrayBuffer);
+            await writeFile(downloadPath.trim(), buffer);
+            setDownloadResult(`Downloaded to ${downloadPath.trim()}`);
+        }
+        catch (err) {
+            setDownloadError(err);
+        }
+        finally {
+            setDownloading(false);
+        }
+    }, [downloadPath, storageObject]);
+    // Handle input for download prompt and result screens - must be before early returns (Rules of Hooks)
+    useInput((input, key) => {
+        if (showDownloadPrompt) {
+            if (key.escape) {
+                setShowDownloadPrompt(false);
+                setDownloadPath("");
+            }
+            else if (key.return) {
+                handleDownloadSubmit();
+            }
+            return;
+        }
+        if (downloadResult || downloadError) {
+            if (input === "q" || key.escape || key.return) {
+                setDownloadResult(null);
+                setDownloadError(null);
+                setDownloadPath("");
+            }
+            return;
+        }
+    }, { isActive: showDownloadPrompt || !!downloadResult || !!downloadError });
+    // Show loading state while fetching
+    if (loading && !storageObject) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Storage Objects" },
+                        { label: "Loading...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Loading object details..." })] }));
+    }
+    // Show error state if fetch failed
+    if (error && !storageObject) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Storage Objects" },
+                        { label: "Error", active: true },
+                    ] }), _jsx(ErrorMessage, { message: "Failed to load object details", error: error })] }));
+    }
+    // Show error if no object found
+    if (!storageObject) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Storage Objects" },
+                        { label: "Not Found", active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Storage object ${objectId || "unknown"} not found`, error: new Error("Storage object not found") })] }));
+    }
+    // Build detail sections
+    const detailSections = [];
+    // Basic details section
+    const basicFields = [];
+    if (storageObject.content_type) {
+        basicFields.push({
+            label: "Content Type",
+            value: storageObject.content_type,
+        });
+    }
+    if (storageObject.size_bytes !== undefined) {
+        basicFields.push({
+            label: "Size",
+            value: formatFileSize(storageObject.size_bytes),
+        });
+    }
+    if (storageObject.state) {
+        basicFields.push({
+            label: "State",
+            value: storageObject.state,
+        });
+    }
+    if (storageObject.is_public !== undefined) {
+        basicFields.push({
+            label: "Public",
+            value: storageObject.is_public ? "Yes" : "No",
+        });
+    }
+    if (storageObject.create_time_ms) {
+        basicFields.push({
+            label: "Created",
+            value: formatTimestamp(storageObject.create_time_ms),
+        });
+    }
+    // TTL / Expires - show remaining time before auto-deletion
+    if (storageObject.delete_after_time_ms) {
+        const now = Date.now();
+        const remainingMs = storageObject.delete_after_time_ms - now;
+        let ttlValue;
+        let ttlColor = colors.text;
+        if (remainingMs <= 0) {
+            ttlValue = "Expired";
+            ttlColor = colors.error;
+        }
+        else {
+            const remainingMinutes = Math.floor(remainingMs / 60000);
+            if (remainingMinutes < 60) {
+                ttlValue = `${remainingMinutes}m remaining`;
+                ttlColor = remainingMinutes < 10 ? colors.warning : colors.text;
+            }
+            else {
+                const hours = Math.floor(remainingMinutes / 60);
+                const mins = remainingMinutes % 60;
+                ttlValue = `${hours}h ${mins}m remaining`;
+            }
+        }
+        basicFields.push({
+            label: "Expires",
+            value: _jsx(Text, { color: ttlColor, children: ttlValue }),
+        });
+    }
+    if (basicFields.length > 0) {
+        detailSections.push({
+            title: "Details",
+            icon: figures.squareSmallFilled,
+            color: colors.warning,
+            fields: basicFields,
+        });
+    }
+    // Download URL section
+    if (storageObject.download_url) {
+        detailSections.push({
+            title: "Download",
+            icon: figures.arrowDown,
+            color: colors.success,
+            fields: [
+                {
+                    label: "URL",
+                    value: (_jsxs(Text, { color: colors.info, children: [storageObject.download_url.substring(0, 60), "..."] })),
+                },
+            ],
+        });
+    }
+    // Metadata section
+    if (storageObject.metadata &&
+        Object.keys(storageObject.metadata).length > 0) {
+        const metadataFields = Object.entries(storageObject.metadata).map(([key, value]) => ({
+            label: key,
+            value: value,
+        }));
+        detailSections.push({
+            title: "Metadata",
+            icon: figures.identical,
+            color: colors.secondary,
+            fields: metadataFields,
+        });
+    }
+    // Operations available for objects
+    const operations = [
+        {
+            key: "download",
+            label: "Download",
+            color: colors.success,
+            icon: figures.arrowDown,
+            shortcut: "w",
+        },
+        {
+            key: "delete",
+            label: "Delete",
+            color: colors.error,
+            icon: figures.cross,
+            shortcut: "d",
+        },
+    ];
+    // Handle operation selection
+    const handleOperation = async (operation, resource) => {
+        switch (operation) {
+            case "download":
+                // Show download prompt
+                const defaultName = resource.name || resource.id;
+                setDownloadPath(`./${defaultName}`);
+                setShowDownloadPrompt(true);
+                break;
+            case "delete":
+                // Show confirmation dialog
+                setShowDeleteConfirm(true);
+                break;
+        }
+    };
+    // Execute delete after confirmation
+    const executeDelete = async () => {
+        if (!storageObject)
+            return;
+        setShowDeleteConfirm(false);
+        setDeleting(true);
+        try {
+            await deleteObject(storageObject.id);
+            goBack();
+        }
+        catch (err) {
+            setError(err);
+            setDeleting(false);
+        }
+    };
+    // Build detailed info lines for full details view
+    const buildDetailLines = (obj) => {
+        const lines = [];
+        // Core Information
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Storage Object Details" }, "core-title"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", obj.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", obj.name || "(none)"] }, "core-name"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Content Type: ", obj.content_type || "(unknown)"] }, "core-type"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Size: ", formatFileSize(obj.size_bytes)] }, "core-size"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "State: ", obj.state || "(unknown)"] }, "core-state"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Public: ", obj.is_public ? "Yes" : "No"] }, "core-public"));
+        if (obj.create_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(obj.create_time_ms).toLocaleString()] }, "core-created"));
+        }
+        if (obj.delete_after_time_ms) {
+            const now = Date.now();
+            const remainingMs = obj.delete_after_time_ms - now;
+            let expiresText;
+            if (remainingMs <= 0) {
+                expiresText = "Expired";
+            }
+            else {
+                const remainingMinutes = Math.floor(remainingMs / 60000);
+                if (remainingMinutes < 60) {
+                    expiresText = `${remainingMinutes}m remaining`;
+                }
+                else {
+                    const hours = Math.floor(remainingMinutes / 60);
+                    const mins = remainingMinutes % 60;
+                    expiresText = `${hours}h ${mins}m remaining`;
+                }
+            }
+            lines.push(_jsxs(Text, { color: remainingMs <= 0 ? colors.error : colors.warning, children: [" ", "Expires: ", expiresText] }, "core-expires"));
+        }
+        lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Download URL
+        if (obj.download_url) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Download URL" }, "url-title"));
+            lines.push(_jsxs(Text, { color: colors.info, children: [" ", obj.download_url] }, "url-value"));
+            lines.push(_jsx(Text, { children: " " }, "url-space"));
+        }
+        // Metadata
+        if (obj.metadata && Object.keys(obj.metadata).length > 0) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Metadata" }, "meta-title"));
+            Object.entries(obj.metadata).forEach(([key, value], idx) => {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", key, ": ", value] }, `meta-${idx}`));
+            });
+            lines.push(_jsx(Text, { children: " " }, "meta-space"));
+        }
+        // Raw JSON
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
+        const jsonLines = JSON.stringify(obj, null, 2).split("\n");
+        jsonLines.forEach((line, idx) => {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
+        });
+        return lines;
+    };
+    // Show download result
+    if (downloadResult || downloadError) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Storage Objects" },
+                        { label: storageObject.name || storageObject.id },
+                        { label: "Download", active: true },
+                    ] }), _jsx(Header, { title: "Download Result" }), downloadResult && _jsx(SuccessMessage, { message: downloadResult }), downloadError && (_jsx(ErrorMessage, { message: "Download failed", error: downloadError })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter], [q], or [esc] to continue" }) })] }));
+    }
+    // Show downloading state
+    if (downloading) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Storage Objects" },
+                        { label: storageObject.name || storageObject.id },
+                        { label: "Downloading...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: `Downloading to ${downloadPath}...` })] }));
+    }
+    // Show download prompt
+    if (showDownloadPrompt) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Storage Objects" },
+                        { label: storageObject.name || storageObject.id },
+                        { label: "Download", active: true },
+                    ] }), _jsx(Header, { title: "Download Storage Object" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.text, children: [figures.arrowRight, " Downloading:", " ", _jsx(Text, { color: colors.primary, children: storageObject.name || storageObject.id })] }), storageObject.size_bytes && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.info, " Size: ", formatFileSize(storageObject.size_bytes)] }))] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: colors.text, children: "Save to path:" }), _jsxs(Box, { marginTop: 0, children: [_jsxs(Text, { color: colors.primary, children: [figures.pointer, " "] }), _jsx(TextInput, { value: downloadPath, onChange: setDownloadPath, placeholder: "./filename" })] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "[Enter] Download \u2022 [Esc] Cancel" }) })] }));
+    }
+    // Show delete confirmation
+    if (showDeleteConfirm && storageObject) {
+        return (_jsx(ConfirmationPrompt, { title: "Delete Storage Object", message: `Are you sure you want to delete "${storageObject.name || storageObject.id}"?`, details: "This action cannot be undone.", breadcrumbItems: [
+                { label: "Storage Objects" },
+                { label: storageObject.name || storageObject.id },
+                { label: "Delete", active: true },
+            ], onConfirm: executeDelete, onCancel: () => setShowDeleteConfirm(false) }));
+    }
+    // Show deleting state
+    if (deleting) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Storage Objects" },
+                        { label: storageObject.name || storageObject.id },
+                        { label: "Deleting...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Deleting storage object..." })] }));
+    }
+    return (_jsx(ResourceDetailPage, { resource: storageObject, resourceType: "Storage Objects", getDisplayName: (obj) => obj.name || obj.id, getId: (obj) => obj.id, getStatus: (obj) => obj.state || "unknown", detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines, pollResource: pollObject }));
+}

package/dist/screens/ObjectListScreen.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNavigation } from "../store/navigationStore.js";
+import { ListObjectsUI } from "../commands/object/list.js";
+export function ObjectListScreen() {
+    const { goBack } = useNavigation();
+    return _jsx(ListObjectsUI, { onBack: goBack, onExit: goBack });
+}

package/dist/screens/SnapshotDetailScreen.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SnapshotDetailScreen - Detail page for snapshots
+ * Uses the generic ResourceDetailPage component
+ */
+import React from "react";
+import { Text } from "ink";
+import figures from "figures";
+import { useNavigation } from "../store/navigationStore.js";
+import { useSnapshotStore } from "../store/snapshotStore.js";
+import { ResourceDetailPage, formatTimestamp, } from "../components/ResourceDetailPage.js";
+import { getSnapshot, deleteSnapshot } from "../services/snapshotService.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { ConfirmationPrompt } from "../components/ConfirmationPrompt.js";
+import { colors } from "../utils/theme.js";
+export function SnapshotDetailScreen({ snapshotId, }) {
+    const { goBack, navigate } = useNavigation();
+    const snapshots = useSnapshotStore((state) => state.snapshots);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [fetchedSnapshot, setFetchedSnapshot] = React.useState(null);
+    const [deleting, setDeleting] = React.useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+    // Find snapshot in store first
+    const snapshotFromStore = snapshots.find((s) => s.id === snapshotId);
+    // Polling function - must be defined before any early returns (Rules of Hooks)
+    const pollSnapshot = React.useCallback(async () => {
+        if (!snapshotId)
+            return null;
+        return getSnapshot(snapshotId);
+    }, [snapshotId]);
+    // Fetch snapshot from API if not in store or missing full details
+    React.useEffect(() => {
+        if (snapshotId && !loading && !fetchedSnapshot) {
+            // Always fetch full details since store may only have basic info
+            setLoading(true);
+            setError(null);
+            getSnapshot(snapshotId)
+                .then((snapshot) => {
+                setFetchedSnapshot(snapshot);
+                setLoading(false);
+            })
+                .catch((err) => {
+                setError(err);
+                setLoading(false);
+            });
+        }
+    }, [snapshotId, loading, fetchedSnapshot]);
+    // Use fetched snapshot for full details, fall back to store for basic display
+    const snapshot = fetchedSnapshot || snapshotFromStore;
+    // Show loading state while fetching
+    if (loading && !snapshot) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Snapshots" },
+                        { label: "Loading...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Loading snapshot details..." })] }));
+    }
+    // Show error state if fetch failed
+    if (error && !snapshot) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Snapshots" }, { label: "Error", active: true }] }), _jsx(ErrorMessage, { message: "Failed to load snapshot details", error: error })] }));
+    }
+    // Show error if no snapshot found
+    if (!snapshot) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Snapshots" }, { label: "Not Found", active: true }] }), _jsx(ErrorMessage, { message: `Snapshot ${snapshotId || "unknown"} not found`, error: new Error("Snapshot not found") })] }));
+    }
+    // Build detail sections
+    const detailSections = [];
+    // Basic details section
+    const basicFields = [];
+    if (snapshot.create_time_ms) {
+        basicFields.push({
+            label: "Created",
+            value: formatTimestamp(snapshot.create_time_ms),
+        });
+    }
+    if (snapshot.devbox_id) {
+        basicFields.push({
+            label: "Source Devbox",
+            value: _jsx(Text, { color: colors.idColor, children: snapshot.devbox_id }),
+        });
+    }
+    if (snapshot.disk_size_bytes) {
+        const sizeGB = (snapshot.disk_size_bytes / (1024 * 1024 * 1024)).toFixed(2);
+        basicFields.push({
+            label: "Disk Size",
+            value: `${sizeGB} GB`,
+        });
+    }
+    if (basicFields.length > 0) {
+        detailSections.push({
+            title: "Details",
+            icon: figures.squareSmallFilled,
+            color: colors.warning,
+            fields: basicFields,
+        });
+    }
+    // Metadata section
+    if (snapshot.metadata && Object.keys(snapshot.metadata).length > 0) {
+        const metadataFields = Object.entries(snapshot.metadata).map(([key, value]) => ({
+            label: key,
+            value: value,
+        }));
+        detailSections.push({
+            title: "Metadata",
+            icon: figures.identical,
+            color: colors.secondary,
+            fields: metadataFields,
+        });
+    }
+    // Operations available for snapshots
+    const operations = [
+        {
+            key: "create-devbox",
+            label: "Create Devbox from Snapshot",
+            color: colors.success,
+            icon: figures.play,
+            shortcut: "c",
+        },
+        {
+            key: "delete",
+            label: "Delete Snapshot",
+            color: colors.error,
+            icon: figures.cross,
+            shortcut: "d",
+        },
+    ];
+    // Handle operation selection
+    const handleOperation = async (operation, resource) => {
+        switch (operation) {
+            case "create-devbox":
+                navigate("devbox-create", { snapshotId: resource.id });
+                break;
+            case "delete":
+                // Show confirmation dialog
+                setShowDeleteConfirm(true);
+                break;
+        }
+    };
+    // Execute delete after confirmation
+    const executeDelete = async () => {
+        if (!snapshot)
+            return;
+        setShowDeleteConfirm(false);
+        setDeleting(true);
+        try {
+            await deleteSnapshot(snapshot.id);
+            goBack();
+        }
+        catch (err) {
+            setError(err);
+            setDeleting(false);
+        }
+    };
+    // Build detailed info lines for full details view
+    const buildDetailLines = (snap) => {
+        const lines = [];
+        // Core Information
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Snapshot Details" }, "core-title"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", snap.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", snap.name || "(none)"] }, "core-name"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Status: ", snap.status] }, "core-status"));
+        if (snap.devbox_id) {
+            lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "Source Devbox: ", snap.devbox_id] }, "core-devbox"));
+        }
+        if (snap.create_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(snap.create_time_ms).toLocaleString()] }, "core-created"));
+        }
+        if (snap.disk_size_bytes) {
+            const sizeGB = (snap.disk_size_bytes / (1024 * 1024 * 1024)).toFixed(2);
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Disk Size: ", sizeGB, " GB"] }, "core-size"));
+        }
+        lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Metadata
+        if (snap.metadata && Object.keys(snap.metadata).length > 0) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Metadata" }, "meta-title"));
+            Object.entries(snap.metadata).forEach(([key, value], idx) => {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", key, ": ", value] }, `meta-${idx}`));
+            });
+            lines.push(_jsx(Text, { children: " " }, "meta-space"));
+        }
+        // Raw JSON
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
+        const jsonLines = JSON.stringify(snap, null, 2).split("\n");
+        jsonLines.forEach((line, idx) => {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
+        });
+        return lines;
+    };
+    // Show delete confirmation
+    if (showDeleteConfirm && snapshot) {
+        return (_jsx(ConfirmationPrompt, { title: "Delete Snapshot", message: `Are you sure you want to delete "${snapshot.name || snapshot.id}"?`, details: "This action cannot be undone.", breadcrumbItems: [
+                { label: "Snapshots" },
+                { label: snapshot.name || snapshot.id },
+                { label: "Delete", active: true },
+            ], onConfirm: executeDelete, onCancel: () => setShowDeleteConfirm(false) }));
+    }
+    // Show deleting state
+    if (deleting) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Snapshots" },
+                        { label: snapshot.name || snapshot.id },
+                        { label: "Deleting...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Deleting snapshot..." })] }));
+    }
+    return (_jsx(ResourceDetailPage, { resource: snapshot, resourceType: "Snapshots", getDisplayName: (snap) => snap.name || snap.id, getId: (snap) => snap.id, getStatus: (snap) => snap.status || "unknown", detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines, pollResource: snapshot.status === "pending" ? pollSnapshot : undefined }));
+}

package/dist/services/blueprintService.js

@@ -33,11 +33,11 @@ export async function listBlueprints(options) {
             blueprints.push({
                 id: String(b.id || "").substring(0, MAX_ID_LENGTH),
                 name: String(b.name || "").substring(0, MAX_NAME_LENGTH),
-                status: String(b.status || "").substring(0, MAX_STATUS_LENGTH),
+                status: b.status,
+                state: b.state,
                 create_time_ms: b.create_time_ms,
-                build_status: b.status
-                    ? String(b.status).substring(0, MAX_STATUS_LENGTH)
-                    : undefined,
+                parameters: b.parameters,
+                // UI-specific convenience fields
                 architecture: architecture
                     ? String(architecture).substring(0, MAX_ARCH_LENGTH)
                     : undefined,
@@ -60,16 +60,35 @@ export async function listBlueprints(options) {
 export async function getBlueprint(id) {
     const client = getClient();
     const blueprint = await client.blueprints.retrieve(id);
+    // Extract architecture and resources from launch_parameters for convenience
+    const launchParams = blueprint.parameters?.launch_parameters;
     return {
-        id: blueprint.id,
-        name: blueprint.name,
-        status: blueprint.status,
-        create_time_ms: blueprint.create_time_ms,
-        build_status: blueprint.build_status,
-        architecture: blueprint.architecture,
-        resources: blueprint.resources,
+        // Spread all API fields
+        ...blueprint,
+        // UI-specific convenience fields
+        architecture: launchParams?.architecture ?? undefined,
+        resources: launchParams?.resource_size_request ?? undefined,
     };
 }
+/**
+ * Get a single blueprint by ID or name
+ */
+export async function getBlueprintByIdOrName(idOrName) {
+    const client = getClient();
+    // Check if it's an ID (starts with bpt_) or a name
+    if (idOrName.startsWith("bpt_")) {
+        return getBlueprint(idOrName);
+    }
+    // It's a name, search for it
+    const result = await client.blueprints.list({ name: idOrName });
+    const blueprints = result.blueprints || [];
+    if (blueprints.length === 0) {
+        return null;
+    }
+    // Return the first exact match, or first result if no exact match
+    const blueprint = blueprints.find((b) => b.name === idOrName) || blueprints[0];
+    return getBlueprint(blueprint.id);
+}
 /**
  * Get blueprint logs
  * Returns the raw logs array from the API response