@runloop/rl-cli 1.5.0 → 1.7.0

package/dist/commands/snapshot/list.js

@@ -12,11 +12,13 @@ import { NavigationTips } from "../../components/NavigationTips.js";
 import { Table, createTextColumn } from "../../components/Table.js";
 import { ActionsPopup } from "../../components/ActionsPopup.js";
 import { formatTimeAgo } from "../../components/ResourceListView.js";
+import { SearchBar } from "../../components/SearchBar.js";
 import { output, outputError } from "../../utils/output.js";
 import { colors } from "../../utils/theme.js";
 import { useViewportHeight } from "../../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../../hooks/useExitOnCtrlC.js";
 import { useCursorPagination } from "../../hooks/useCursorPagination.js";
+import { useListSearch } from "../../hooks/useListSearch.js";
 import { DevboxCreatePage } from "../../components/DevboxCreatePage.js";
 import { useNavigation } from "../../store/navigationStore.js";
 import { ConfirmationPrompt } from "../../components/ConfirmationPrompt.js";
@@ -35,8 +37,13 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
     const [operationLoading, setOperationLoading] = React.useState(false);
     const [showCreateDevbox, setShowCreateDevbox] = React.useState(false);
     const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+    // Search state
+    const search = useListSearch({
+        onSearchSubmit: () => setSelectedIndex(0),
+        onSearchClear: () => setSelectedIndex(0),
+    });
     // Calculate overhead for viewport height
-    const overhead = 13;
+    const overhead = 13 + search.getSearchOverhead();
     const { viewportHeight, terminalWidth } = useViewportHeight({
         overhead,
         minHeight: 5,
@@ -67,6 +74,9 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
         if (devboxId) {
             queryParams.devbox_id = devboxId;
         }
+        if (search.submittedSearchQuery) {
+            queryParams.search = search.submittedSearchQuery;
+        }
         // Fetch ONE page only
         const page = (await client.devboxes.listDiskSnapshots(queryParams));
         // Extract data and create defensive copies
@@ -87,7 +97,7 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
             totalCount: page.total_count || pageSnapshots.length,
         };
         return result;
-    }, [devboxId]);
+    }, [devboxId, search.submittedSearchQuery]);
     // Use the shared pagination hook
     const { items: snapshots, loading, navigating, error, currentPage, hasMore, hasPrev, totalCount, nextPage, prevPage, refresh, } = useCursorPagination({
         fetchPage,
@@ -97,8 +107,9 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
         pollingEnabled: !showPopup &&
             !executingOperation &&
             !showCreateDevbox &&
-            !showDeleteConfirm,
-        deps: [devboxId, PAGE_SIZE],
+            !showDeleteConfirm &&
+            !search.searchMode,
+        deps: [devboxId, PAGE_SIZE, search.submittedSearchQuery],
     });
     // Operations for snapshots
     const operations = React.useMemo(() => [
@@ -180,6 +191,13 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
         }
     };
     useInput((input, key) => {
+        // Handle search mode input
+        if (search.searchMode) {
+            if (key.escape) {
+                search.cancelSearch();
+            }
+            return;
+        }
         // Handle operation result display
         if (operationResult || operationError) {
             if (input === "q" || key.escape || key.return) {
@@ -289,7 +307,13 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
             setShowPopup(true);
             setSelectedOperation(0);
         }
+        else if (input === "/") {
+            search.enterSearchMode();
+        }
         else if (key.escape) {
+            if (search.handleEscape()) {
+                return;
+            }
             if (onBack) {
                 onBack();
             }
@@ -374,7 +398,7 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                     { label: "Snapshots", active: !devboxId },
                     ...(devboxId ? [{ label: `Devbox: ${devboxId}`, active: true }] : []),
-                ] }), !showPopup && (_jsx(Table, { data: snapshots, keyExtractor: (snapshot) => snapshot.id, selectedIndex: selectedIndex, title: `snapshots[${totalCount}]`, columns: columns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No snapshots found. Try: rli snapshot create", " ", "<devbox-id>"] }) })), !showPopup && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] })] })), showPopup && selectedSnapshotItem && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedSnapshotItem, operations: operations.map((op) => ({
+                ] }), _jsx(SearchBar, { searchMode: search.searchMode, searchQuery: search.searchQuery, submittedSearchQuery: search.submittedSearchQuery, resultCount: totalCount, onSearchChange: search.setSearchQuery, onSearchSubmit: search.submitSearch, placeholder: "Search snapshots..." }), !showPopup && (_jsx(Table, { data: snapshots, keyExtractor: (snapshot) => snapshot.id, selectedIndex: selectedIndex, title: `snapshots[${totalCount}]`, columns: columns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No snapshots found. Try: rli snapshot create", " ", "<devbox-id>"] }) })), !showPopup && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] }), search.submittedSearchQuery && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.warning, children: ["Filtered: \"", search.submittedSearchQuery, "\""] })] }))] })), showPopup && selectedSnapshotItem && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedSnapshotItem, operations: operations.map((op) => ({
                         key: op.key,
                         label: op.label,
                         color: op.color,
@@ -394,6 +418,7 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
                     },
                     { key: "Enter", label: "Details" },
                     { key: "a", label: "Actions" },
+                    { key: "/", label: "Search" },
                     { key: "Esc", label: "Back" },
                 ] })] }));
 };

package/dist/components/DevboxActionsMenu.js

@@ -14,8 +14,8 @@ import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useNavigation } from "../store/navigationStore.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
-import { getDevboxLogs, execCommand, suspendDevbox, resumeDevbox, shutdownDevbox, uploadFile, createSnapshot as createDevboxSnapshot, createTunnel, createSSHKey, } from "../services/devboxService.js";
-import { LogsViewer } from "./LogsViewer.js";
+import { suspendDevbox, resumeDevbox, shutdownDevbox, uploadFile, createSnapshot as createDevboxSnapshot, createTunnel, createSSHKey, } from "../services/devboxService.js";
+import { StreamingLogsViewer } from "./StreamingLogsViewer.js";
 export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     { label: "Devboxes" },
     { label: devbox.name || devbox.id, active: true },
@@ -30,6 +30,17 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     const [execScroll, setExecScroll] = React.useState(0);
     const [copyStatus, setCopyStatus] = React.useState(null);
     const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+    // Snapshot form state
+    const [snapshotFormMode, setSnapshotFormMode] = React.useState(false);
+    const [snapshotName, setSnapshotName] = React.useState("");
+    const [snapshotCommitMessage, setSnapshotCommitMessage] = React.useState("");
+    const [snapshotMetadata, setSnapshotMetadata] = React.useState({});
+    const [snapshotFormField, setSnapshotFormField] = React.useState("name");
+    const [inSnapshotMetadataSection, setInSnapshotMetadataSection] = React.useState(false);
+    const [snapshotMetadataKey, setSnapshotMetadataKey] = React.useState("");
+    const [snapshotMetadataValue, setSnapshotMetadataValue] = React.useState("");
+    const [snapshotMetadataInputMode, setSnapshotMetadataInputMode] = React.useState(null);
+    const [selectedSnapshotMetadataIndex, setSelectedSnapshotMetadataIndex] = React.useState(0);
     // Calculate viewport for exec output:
     // - Breadcrumb (3 lines + marginBottom): 4 lines
     // - Command header (border + 2 content + border + marginBottom): 5 lines
@@ -163,14 +174,193 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             !showDeleteConfirm) {
             setShowDeleteConfirm(true);
         }
+        // Show snapshot form
+        if (executingOperation === "snapshot" &&
+            !loading &&
+            devbox &&
+            !snapshotFormMode &&
+            !operationResult &&
+            !operationError) {
+            setSnapshotFormMode(true);
+            setSnapshotFormField("name");
+        }
     }, [executingOperation]);
     // Handle Ctrl+C to exit
     useExitOnCtrlC();
     useInput((input, key) => {
-        // Handle operation input mode
-        if (executingOperation && !operationResult && !operationError) {
+        // Handle snapshot metadata section input
+        if (snapshotFormMode && inSnapshotMetadataSection) {
+            const metadataKeys = Object.keys(snapshotMetadata);
+            const maxIndex = metadataKeys.length + 1;
+            // Handle input mode (typing key or value)
+            if (snapshotMetadataInputMode) {
+                if (snapshotMetadataInputMode === "key" &&
+                    key.return &&
+                    snapshotMetadataKey.trim()) {
+                    setSnapshotMetadataInputMode("value");
+                    return;
+                }
+                else if (snapshotMetadataInputMode === "value" && key.return) {
+                    if (snapshotMetadataKey.trim() && snapshotMetadataValue.trim()) {
+                        setSnapshotMetadata({
+                            ...snapshotMetadata,
+                            [snapshotMetadataKey.trim()]: snapshotMetadataValue.trim(),
+                        });
+                    }
+                    setSnapshotMetadataKey("");
+                    setSnapshotMetadataValue("");
+                    setSnapshotMetadataInputMode(null);
+                    setSelectedSnapshotMetadataIndex(0);
+                    return;
+                }
+                else if (key.escape) {
+                    setSnapshotMetadataKey("");
+                    setSnapshotMetadataValue("");
+                    setSnapshotMetadataInputMode(null);
+                    return;
+                }
+                else if (key.tab) {
+                    setSnapshotMetadataInputMode(snapshotMetadataInputMode === "key" ? "value" : "key");
+                    return;
+                }
+                return;
+            }
+            // Navigation mode in metadata section
+            if (key.upArrow && selectedSnapshotMetadataIndex > 0) {
+                setSelectedSnapshotMetadataIndex(selectedSnapshotMetadataIndex - 1);
+            }
+            else if (key.downArrow && selectedSnapshotMetadataIndex < maxIndex) {
+                setSelectedSnapshotMetadataIndex(selectedSnapshotMetadataIndex + 1);
+            }
+            else if (key.return) {
+                if (selectedSnapshotMetadataIndex === 0) {
+                    setSnapshotMetadataKey("");
+                    setSnapshotMetadataValue("");
+                    setSnapshotMetadataInputMode("key");
+                }
+                else if (selectedSnapshotMetadataIndex === maxIndex) {
+                    setInSnapshotMetadataSection(false);
+                    setSelectedSnapshotMetadataIndex(0);
+                    setSnapshotMetadataKey("");
+                    setSnapshotMetadataValue("");
+                    setSnapshotMetadataInputMode(null);
+                }
+                else if (selectedSnapshotMetadataIndex >= 1 &&
+                    selectedSnapshotMetadataIndex <= metadataKeys.length) {
+                    const keyToEdit = metadataKeys[selectedSnapshotMetadataIndex - 1];
+                    setSnapshotMetadataKey(keyToEdit || "");
+                    setSnapshotMetadataValue(snapshotMetadata[keyToEdit] || "");
+                    const newMetadata = { ...snapshotMetadata };
+                    delete newMetadata[keyToEdit];
+                    setSnapshotMetadata(newMetadata);
+                    setSnapshotMetadataInputMode("key");
+                }
+            }
+            else if ((input === "d" || key.delete) &&
+                selectedSnapshotMetadataIndex >= 1 &&
+                selectedSnapshotMetadataIndex <= metadataKeys.length) {
+                const keyToDelete = metadataKeys[selectedSnapshotMetadataIndex - 1];
+                const newMetadata = { ...snapshotMetadata };
+                delete newMetadata[keyToDelete];
+                setSnapshotMetadata(newMetadata);
+                const newLength = Object.keys(newMetadata).length;
+                if (selectedSnapshotMetadataIndex > newLength) {
+                    setSelectedSnapshotMetadataIndex(Math.max(0, newLength));
+                }
+            }
+            else if (key.escape || input === "q") {
+                setInSnapshotMetadataSection(false);
+                setSelectedSnapshotMetadataIndex(0);
+                setSnapshotMetadataKey("");
+                setSnapshotMetadataValue("");
+                setSnapshotMetadataInputMode(null);
+            }
+            return;
+        }
+        // Handle snapshot form mode (main form navigation)
+        if (snapshotFormMode && !inSnapshotMetadataSection) {
+            const snapshotFields = [
+                "name",
+                "commit_message",
+                "metadata",
+                "create",
+            ];
+            const currentFieldIndex = snapshotFields.indexOf(snapshotFormField);
+            if (input === "q" || key.escape) {
+                // Cancel snapshot form
+                setSnapshotFormMode(false);
+                setSnapshotName("");
+                setSnapshotCommitMessage("");
+                setSnapshotMetadata({});
+                setSnapshotFormField("name");
+                setExecutingOperation(null);
+                if (skipOperationsMenu) {
+                    onBack();
+                }
+                return;
+            }
+            // Navigate between fields (only when not actively editing text fields)
+            if (snapshotFormField !== "name" &&
+                snapshotFormField !== "commit_message") {
+                if (key.upArrow && currentFieldIndex > 0) {
+                    setSnapshotFormField(snapshotFields[currentFieldIndex - 1]);
+                    return;
+                }
+                if (key.downArrow && currentFieldIndex < snapshotFields.length - 1) {
+                    setSnapshotFormField(snapshotFields[currentFieldIndex + 1]);
+                    return;
+                }
+            }
+            // Handle Enter key
+            if (key.return) {
+                if (snapshotFormField === "name") {
+                    // Move to commit_message field
+                    setSnapshotFormField("commit_message");
+                }
+                else if (snapshotFormField === "commit_message") {
+                    // Move to metadata field
+                    setSnapshotFormField("metadata");
+                }
+                else if (snapshotFormField === "metadata") {
+                    // Enter metadata section
+                    setInSnapshotMetadataSection(true);
+                    setSelectedSnapshotMetadataIndex(0);
+                }
+                else if (snapshotFormField === "create") {
+                    // Execute snapshot creation
+                    executeOperation();
+                }
+                return;
+            }
+            // Tab navigation (when not in text input fields)
+            if (key.tab &&
+                snapshotFormField !== "name" &&
+                snapshotFormField !== "commit_message") {
+                const nextIndex = key.shift
+                    ? Math.max(0, currentFieldIndex - 1)
+                    : Math.min(snapshotFields.length - 1, currentFieldIndex + 1);
+                setSnapshotFormField(snapshotFields[nextIndex]);
+                return;
+            }
+            return;
+        }
+        // Handle operation input mode (for exec, upload, tunnel)
+        if (executingOperation &&
+            !operationResult &&
+            !operationError &&
+            !snapshotFormMode) {
             if (key.return && operationInput.trim()) {
-                executeOperation();
+                // For exec, navigate to dedicated exec screen
+                if (executingOperation === "exec") {
+                    navigate("devbox-exec", {
+                        devboxId: devbox.id,
+                        devboxName: devbox.name || devbox.id,
+                        execCommand: operationInput,
+                    });
+                }
+                else {
+                    executeOperation();
+                }
             }
             else if (input === "q" || key.escape) {
                 setExecutingOperation(null);
@@ -196,6 +386,40 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     setExecutingOperation(null);
                 }
             }
+            else if (input === "o" &&
+                operationResult &&
+                typeof operationResult === "object" &&
+                operationResult.__customRender === "tunnel") {
+                // Open tunnel URL in browser
+                const tunnelUrl = operationResult.__tunnelUrl;
+                if (tunnelUrl) {
+                    const openBrowser = async () => {
+                        const { exec } = await import("child_process");
+                        const platform = process.platform;
+                        let openCommand;
+                        if (platform === "darwin") {
+                            openCommand = `open "${tunnelUrl}"`;
+                        }
+                        else if (platform === "win32") {
+                            openCommand = `start "${tunnelUrl}"`;
+                        }
+                        else {
+                            openCommand = `xdg-open "${tunnelUrl}"`;
+                        }
+                        exec(openCommand, (error) => {
+                            if (error) {
+                                setCopyStatus("Could not open browser");
+                                setTimeout(() => setCopyStatus(null), 2000);
+                            }
+                            else {
+                                setCopyStatus("Opened in browser!");
+                                setTimeout(() => setCopyStatus(null), 2000);
+                            }
+                        });
+                    };
+                    openBrowser();
+                }
+            }
             else if ((key.upArrow || input === "k") &&
                 operationResult &&
                 typeof operationResult === "object" &&
@@ -238,6 +462,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                 setExecScroll(maxScroll);
             }
             else if (input === "c" &&
+                !key.ctrl && // Ignore if Ctrl+C for quit
                 operationResult &&
                 typeof operationResult === "object" &&
                 operationResult.__customRender === "exec") {
@@ -316,19 +541,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
         try {
             setLoading(true);
             switch (executingOperation) {
-                case "exec":
-                    // Use service layer (already truncates output to prevent Yoga crashes)
-                    const execResult = await execCommand(devbox.id, operationInput);
-                    // Format exec result for custom rendering
-                    const formattedExecResult = {
-                        __customRender: "exec",
-                        command: operationInput,
-                        stdout: execResult.stdout || "",
-                        stderr: execResult.stderr || "",
-                        exitCode: execResult.exit_code ?? 0,
-                    };
-                    setOperationResult(formattedExecResult);
-                    break;
+                // Note: "exec" is now handled by ExecViewer component directly
                 case "upload":
                     // Use service layer
                     const filename = operationInput.split("/").pop() || "file";
@@ -336,9 +549,28 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     setOperationResult(`File ${filename} uploaded successfully`);
                     break;
                 case "snapshot":
-                    // Use service layer
-                    const snapshot = await createDevboxSnapshot(devbox.id, operationInput || `snapshot-${Date.now()}`);
+                    // Use service layer with form data
+                    const snapshotOptions = {};
+                    if (snapshotName.trim()) {
+                        snapshotOptions.name = snapshotName.trim();
+                    }
+                    else {
+                        snapshotOptions.name = `snapshot-${Date.now()}`;
+                    }
+                    if (snapshotCommitMessage.trim()) {
+                        snapshotOptions.commit_message = snapshotCommitMessage.trim();
+                    }
+                    if (Object.keys(snapshotMetadata).length > 0) {
+                        snapshotOptions.metadata = snapshotMetadata;
+                    }
+                    const snapshot = await createDevboxSnapshot(devbox.id, snapshotOptions);
                     setOperationResult(`Snapshot created: ${snapshot.id}`);
+                    // Reset snapshot form state
+                    setSnapshotFormMode(false);
+                    setSnapshotName("");
+                    setSnapshotCommitMessage("");
+                    setSnapshotMetadata({});
+                    setSnapshotFormField("name");
                     break;
                 case "ssh":
                     // Use service layer
@@ -372,19 +604,11 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     });
                     break;
                 case "logs":
-                    // Use service layer (already truncates and escapes log messages)
-                    const logs = await getDevboxLogs(devbox.id);
-                    if (logs.length === 0) {
-                        setOperationResult("No logs available for this devbox.");
-                    }
-                    else {
-                        const logsResult = {
-                            __customRender: "logs",
-                            __logs: logs,
-                            __totalCount: logs.length,
-                        };
-                        setOperationResult(logsResult);
-                    }
+                    // Set flag to show streaming logs viewer
+                    const logsResult = {
+                        __customRender: "logs",
+                    };
+                    setOperationResult(logsResult);
                     break;
                 case "tunnel":
                     // Use service layer
@@ -394,10 +618,13 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     }
                     else {
                         const tunnel = await createTunnel(devbox.id, port);
-                        setOperationResult(`Tunnel created!\n\n` +
-                            `Local Port: ${port}\n` +
-                            `Public URL: ${tunnel.url}\n\n` +
-                            `You can now access port ${port} on the devbox via:\n${tunnel.url}`);
+                        // Store tunnel result with custom render type to enable "open in browser"
+                        const tunnelResult = {
+                            __customRender: "tunnel",
+                            __tunnelUrl: tunnel.url,
+                            __port: port,
+                        };
+                        setOperationResult(tunnelResult);
                     }
                     break;
                 case "suspend":
@@ -477,16 +704,15 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                             { key: "Enter/q/esc", label: "Back" },
                         ] })] }));
         }
-        // Check for custom logs rendering
+        // Check for custom logs rendering - use streaming logs viewer
         if (operationResult &&
             typeof operationResult === "object" &&
             operationResult.__customRender === "logs") {
-            const logs = operationResult.__logs || [];
-            return (_jsx(LogsViewer, { logs: logs, breadcrumbItems: [
+            return (_jsx(StreamingLogsViewer, { devboxId: devbox.id, breadcrumbItems: [
                     ...breadcrumbItems,
                     { label: "Logs", active: true },
                 ], onBack: () => {
-                    // Clear large data structures immediately to prevent memory leaks
+                    // Clear state
                     setOperationResult(null);
                     setOperationError(null);
                     setOperationInput("");
@@ -498,15 +724,93 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     else {
                         setExecutingOperation(null);
                     }
-                }, title: "Logs" }));
+                } }));
+        }
+        // Check for custom tunnel rendering
+        if (operationResult &&
+            typeof operationResult === "object" &&
+            operationResult.__customRender === "tunnel") {
+            const tunnelUrl = operationResult.__tunnelUrl || "";
+            const tunnelPort = operationResult.__port || "";
+            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [...breadcrumbItems, { label: "Open Tunnel", active: true }] }), _jsx(Header, { title: "Tunnel Created" }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.success, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.success, bold: true, children: [figures.tick, " Tunnel created successfully!"] }) }), _jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Port: " }), _jsx(Text, { color: colors.primary, bold: true, children: tunnelPort })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "Public URL: " }) }), _jsx(Box, { children: _jsx(Text, { color: colors.info, bold: true, children: tunnelUrl }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["You can now access port ", tunnelPort, " on the devbox via this URL"] }) }), copyStatus && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.success, bold: true, children: copyStatus }) }))] }), _jsx(NavigationTips, { tips: [
+                            { key: "o", label: "Open in Browser" },
+                            { key: "Enter/q/esc", label: "Back" },
+                        ] })] }));
         }
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [...breadcrumbItems, { label: operationLabel, active: true }] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && (_jsx(ErrorMessage, { message: "Operation failed", error: operationError })), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "Continue" }] })] }));
     }
+    // Snapshot form mode
+    if (snapshotFormMode && executingOperation === "snapshot" && devbox) {
+        if (loading) {
+            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                            ...breadcrumbItems,
+                            { label: "Create Snapshot", active: true },
+                        ] }), _jsx(Header, { title: "Creating Snapshot" }), _jsx(SpinnerComponent, { message: "Creating snapshot..." })] }));
+        }
+        const snapshotFields = [
+            { key: "name", label: "Name (optional)" },
+            { key: "metadata", label: "Metadata (optional)" },
+            { key: "create", label: "Create Snapshot" },
+        ];
+        const currentFieldIndex = snapshotFields.findIndex((f) => f.key === snapshotFormField);
+        // Expanded metadata section
+        if (inSnapshotMetadataSection) {
+            const metadataKeys = Object.keys(snapshotMetadata);
+            const maxIndex = metadataKeys.length + 1;
+            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                            ...breadcrumbItems,
+                            { label: "Create Snapshot", active: true },
+                        ] }), _jsx(Header, { title: "Create Snapshot - Metadata" }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.primary, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " Manage Metadata"] }), snapshotMetadataInputMode && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: selectedSnapshotMetadataIndex === 0
+                                    ? colors.success
+                                    : colors.warning, paddingX: 1, children: [_jsx(Text, { color: selectedSnapshotMetadataIndex === 0
+                                            ? colors.success
+                                            : colors.warning, bold: true, children: selectedSnapshotMetadataIndex === 0
+                                            ? "Adding New"
+                                            : "Editing" }), _jsx(Box, { children: snapshotMetadataInputMode === "key" ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: colors.primary, children: "Key: " }), _jsx(TextInput, { value: snapshotMetadataKey || "", onChange: setSnapshotMetadataKey, placeholder: "env" })] })) : (_jsxs(Text, { dimColor: true, children: ["Key: ", snapshotMetadataKey || ""] })) }), _jsx(Box, { children: snapshotMetadataInputMode === "value" ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: colors.primary, children: "Value: " }), _jsx(TextInput, { value: snapshotMetadataValue || "", onChange: setSnapshotMetadataValue, placeholder: "production" })] })) : (_jsxs(Text, { dimColor: true, children: ["Value: ", snapshotMetadataValue || ""] })) })] })), !snapshotMetadataInputMode && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: selectedSnapshotMetadataIndex === 0
+                                                    ? colors.primary
+                                                    : colors.textDim, children: [selectedSnapshotMetadataIndex === 0
+                                                        ? figures.pointer
+                                                        : " ", " "] }), _jsx(Text, { color: selectedSnapshotMetadataIndex === 0
+                                                    ? colors.success
+                                                    : colors.textDim, bold: selectedSnapshotMetadataIndex === 0, children: "+ Add new metadata" })] }), metadataKeys.length > 0 && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: metadataKeys.map((key, index) => {
+                                            const itemIndex = index + 1;
+                                            const isSelected = selectedSnapshotMetadataIndex === itemIndex;
+                                            return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? colors.primary : colors.textDim, children: [isSelected ? figures.pointer : " ", " "] }), _jsxs(Text, { color: isSelected ? colors.primary : colors.textDim, bold: isSelected, children: [key, ": ", snapshotMetadata[key]] })] }, key));
+                                        }) })), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: selectedSnapshotMetadataIndex === maxIndex
+                                                    ? colors.primary
+                                                    : colors.textDim, children: [selectedSnapshotMetadataIndex === maxIndex
+                                                        ? figures.pointer
+                                                        : " ", " "] }), _jsxs(Text, { color: selectedSnapshotMetadataIndex === maxIndex
+                                                    ? colors.success
+                                                    : colors.textDim, bold: selectedSnapshotMetadataIndex === maxIndex, children: [figures.tick, " Done"] })] })] })), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: colors.border, paddingX: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: snapshotMetadataInputMode
+                                        ? `[Tab] Switch field • [Enter] ${snapshotMetadataInputMode === "key" ? "Next" : "Save"} • [esc] Cancel`
+                                        : `${figures.arrowUp}${figures.arrowDown} Navigate • [Enter] ${selectedSnapshotMetadataIndex === 0 ? "Add" : selectedSnapshotMetadataIndex === maxIndex ? "Done" : "Edit"} • [d] Delete • [esc] Back` }) })] })] }));
+        }
+        // Main snapshot form
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        ...breadcrumbItems,
+                        { label: "Create Snapshot", active: true },
+                    ] }), _jsx(Header, { title: "Create Snapshot" }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.primary, bold: true, children: (() => {
+                                    const name = devbox.name || devbox.id;
+                                    return name.length > 100
+                                        ? name.substring(0, 100) + "..."
+                                        : name;
+                                })() }) }), _jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: snapshotFormField === "name" ? colors.primary : colors.textDim, children: [snapshotFormField === "name" ? figures.pointer : " ", " Name:", " "] }), snapshotFormField === "name" ? (_jsx(TextInput, { value: snapshotName, onChange: setSnapshotName, placeholder: "my-snapshot (optional)" })) : (_jsx(Text, { color: colors.text, children: snapshotName || "(auto-generated)" }))] }), _jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: snapshotFormField === "commit_message"
+                                        ? colors.primary
+                                        : colors.textDim, children: [snapshotFormField === "commit_message" ? figures.pointer : " ", " ", "Commit Message:", " "] }), snapshotFormField === "commit_message" ? (_jsx(TextInput, { value: snapshotCommitMessage, onChange: setSnapshotCommitMessage, placeholder: "Describe this snapshot (optional)" })) : (_jsx(Text, { color: colors.text, children: snapshotCommitMessage || "(none)" }))] }), _jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: snapshotFormField === "metadata"
+                                                ? colors.primary
+                                                : colors.textDim, children: [snapshotFormField === "metadata" ? figures.pointer : " ", " ", "Metadata:", " "] }), _jsxs(Text, { color: colors.text, children: [Object.keys(snapshotMetadata).length, " item(s)"] }), snapshotFormField === "metadata" && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to manage]"] }))] }), Object.keys(snapshotMetadata).length > 0 && (_jsx(Box, { marginLeft: 4, flexDirection: "column", children: Object.entries(snapshotMetadata).map(([key, value]) => (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [key, ": ", value] }, key))) }))] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: snapshotFormField === "create" ? colors.success : colors.textDim, bold: snapshotFormField === "create", children: [snapshotFormField === "create" ? figures.pointer : " ", " ", figures.play, " Create Snapshot"] }) })] }), _jsx(NavigationTips, { showArrows: true, tips: [
+                        {
+                            key: "Enter",
+                            label: snapshotFormField === "create" ? "Create" : "Select",
+                        },
+                        { key: "q/esc", label: "Cancel" },
+                    ] })] }));
+    }
     // Operation input mode
     if (executingOperation && devbox) {
         const needsInput = executingOperation === "exec" ||
             executingOperation === "upload" ||
-            executingOperation === "snapshot" ||
             executingOperation === "tunnel";
         if (loading) {
             return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
@@ -530,7 +834,6 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
         const prompts = {
             exec: "Command to execute:",
             upload: "File path to upload:",
-            snapshot: "Snapshot name (optional):",
             tunnel: "Port number to expose:",
         };
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [...breadcrumbItems, { label: operationLabel, active: true }] }), _jsx(Header, { title: operationLabel }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.primary, bold: true, children: (() => {
@@ -542,12 +845,15 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                                     ? "ls -la"
                                     : executingOperation === "upload"
                                         ? "/path/to/file"
-                                        : executingOperation === "tunnel"
-                                            ? "8080"
-                                            : "my-snapshot" }) }), _jsx(NavigationTips, { tips: [
-                                { key: "Enter", label: "Execute" },
-                                { key: "q/esc", label: "Cancel" },
-                            ] })] })] }));
+                                        : "8080" }) }), _jsx(NavigationTips, { tips: executingOperation === "exec"
+                                ? [
+                                    { key: "Enter", label: "Execute" },
+                                    { key: "q/esc", label: "Cancel" },
+                                ]
+                                : [
+                                    { key: "Enter", label: "Execute" },
+                                    { key: "q/esc", label: "Cancel" },
+                                ] })] })] }));
     }
     // Operations selection mode - only show if not skipping
     if (!skipOperationsMenu || !executingOperation) {