@runloop/rl-cli 0.1.2 → 0.3.0

package/dist/hooks/useCursorPagination.js

@@ -1,125 +1,165 @@
 import React from "react";
+/**
+ * Hook for cursor-based pagination with polling.
+ *
+ * Design:
+ * - No caching: always fetches fresh data on navigation or poll
+ * - Cursor history: tracks the last item ID of each visited page
+ *   - cursorHistory[N] = last item ID of page N (used as startingAt for page N+1)
+ * - Polling: refreshes current page every pollInterval ms
+ *
+ * Navigation:
+ * - Page 0: startingAt = undefined
+ * - Page N: startingAt = cursorHistory[N-1]
+ * - Going back uses known cursor from history
+ */
 export function useCursorPagination(config) {
+    const { fetchPage, pageSize, getItemId, pollInterval = 2000, deps = [], pollingEnabled = true, } = config;
+    // State
     const [items, setItems] = React.useState([]);
     const [loading, setLoading] = React.useState(true);
+    const [navigating, setNavigating] = React.useState(false);
     const [error, setError] = React.useState(null);
     const [currentPage, setCurrentPage] = React.useState(0);
-    const [totalCount, setTotalCount] = React.useState(0);
     const [hasMore, setHasMore] = React.useState(false);
-    const [refreshing, setRefreshing] = React.useState(false);
-    // Cache for page data and cursors
-    const pageCache = React.useRef(new Map());
-    const lastIdCache = React.useRef(new Map());
-    const fetchData = React.useCallback(async (isInitialLoad = false) => {
+    const [totalCount, setTotalCount] = React.useState(0);
+    // Cursor history: cursorHistory[N] = last item ID of page N
+    // Used to determine startingAt for page N+1
+    const cursorHistoryRef = React.useRef([]);
+    // Track if component is mounted
+    const isMountedRef = React.useRef(true);
+    // Track if we're currently fetching (to prevent concurrent fetches)
+    const isFetchingRef = React.useRef(false);
+    // Store stable references to config
+    const fetchPageRef = React.useRef(fetchPage);
+    const getItemIdRef = React.useRef(getItemId);
+    const pageSizeRef = React.useRef(pageSize);
+    // Keep refs in sync
+    React.useEffect(() => {
+        fetchPageRef.current = fetchPage;
+    }, [fetchPage]);
+    React.useEffect(() => {
+        getItemIdRef.current = getItemId;
+    }, [getItemId]);
+    React.useEffect(() => {
+        pageSizeRef.current = pageSize;
+    }, [pageSize]);
+    // Cleanup on unmount
+    React.useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    /**
+     * Fetch a specific page
+     * @param page - Page number to fetch (0-indexed)
+     * @param isInitialLoad - Whether this is the initial load (shows loading state)
+     * @param isNavigation - Whether this is a page navigation (shows navigating state)
+     */
+    const fetchPageData = React.useCallback(async (page, isInitialLoad = false, isNavigation = false) => {
+        if (!isMountedRef.current)
+            return;
+        if (isFetchingRef.current)
+            return;
+        isFetchingRef.current = true;
         try {
             if (isInitialLoad) {
-                setRefreshing(true);
-            }
-            setLoading(true);
-            // Check cache first (skip on refresh)
-            if (!isInitialLoad && pageCache.current.has(currentPage)) {
-                setItems(pageCache.current.get(currentPage) || []);
-                setLoading(false);
-                return;
+                setLoading(true);
             }
-            const pageItems = [];
-            // Get starting_at cursor from previous page's last ID
-            const startingAt = currentPage > 0
-                ? lastIdCache.current.get(currentPage - 1)
-                : undefined;
-            // Build query params
-            const queryParams = {
-                limit: config.pageSize,
-                ...config.queryParams,
-            };
-            if (startingAt) {
-                queryParams.starting_at = startingAt;
+            if (isNavigation) {
+                setNavigating(true);
             }
-            // Fetch the page
-            const result = await config.fetchPage(queryParams);
-            // Extract items (handle both array response and paginated response)
-            const fetchedItems = Array.isArray(result) ? result : result.items;
-            pageItems.push(...fetchedItems.slice(0, config.pageSize));
-            // Update pagination metadata
-            if (!Array.isArray(result)) {
-                setTotalCount(result.total_count || pageItems.length);
-                setHasMore(result.has_more || false);
-            }
-            else {
-                setTotalCount(pageItems.length);
-                setHasMore(false);
+            setError(null);
+            // Determine startingAt cursor:
+            // - Page 0: undefined
+            // - Page N: cursorHistory[N-1] (last item ID from previous page)
+            const startingAt = page > 0 ? cursorHistoryRef.current[page - 1] : undefined;
+            const result = await fetchPageRef.current({
+                limit: pageSizeRef.current,
+                startingAt,
+            });
+            if (!isMountedRef.current)
+                return;
+            // Update items
+            setItems(result.items);
+            // Update cursor history for this page
+            if (result.items.length > 0) {
+                const lastItemId = getItemIdRef.current(result.items[result.items.length - 1]);
+                cursorHistoryRef.current[page] = lastItemId;
             }
-            // Cache the page data and last ID
-            if (pageItems.length > 0) {
-                pageCache.current.set(currentPage, pageItems);
-                lastIdCache.current.set(currentPage, config.getItemId(pageItems[pageItems.length - 1]));
+            // Update pagination state
+            setHasMore(result.hasMore);
+            if (result.totalCount !== undefined) {
+                setTotalCount(result.totalCount);
             }
-            // Update items for current page
-            setItems(pageItems);
         }
         catch (err) {
+            if (!isMountedRef.current)
+                return;
             setError(err);
         }
         finally {
-            setLoading(false);
-            if (isInitialLoad) {
-                setTimeout(() => setRefreshing(false), 300);
+            if (isMountedRef.current) {
+                setLoading(false);
+                setNavigating(false);
             }
+            isFetchingRef.current = false;
         }
-    }, [currentPage, config]);
-    // Initial load and page changes
+    }, []);
+    // Reset when deps change (e.g., filters, search)
+    const depsKey = JSON.stringify(deps);
     React.useEffect(() => {
-        fetchData(true);
-    }, [fetchData, currentPage]);
-    // Auto-refresh
+        // Clear cursor history when deps change
+        cursorHistoryRef.current = [];
+        setCurrentPage(0);
+        setItems([]);
+        setHasMore(false);
+        setTotalCount(0);
+        // Fetch page 0
+        fetchPageData(0, true);
+    }, [depsKey, fetchPageData]);
+    // Polling effect
     React.useEffect(() => {
-        if (!config.refreshInterval || config.refreshInterval <= 0) {
+        if (!pollInterval || pollInterval <= 0 || !pollingEnabled) {
             return;
         }
-        const interval = setInterval(() => {
-            // Clear cache on refresh
-            pageCache.current.clear();
-            lastIdCache.current.clear();
-            fetchData(false);
-        }, config.refreshInterval);
-        return () => clearInterval(interval);
-    }, [config.refreshInterval, fetchData]);
+        const timer = setInterval(() => {
+            if (isMountedRef.current && !isFetchingRef.current) {
+                fetchPageData(currentPage, false);
+            }
+        }, pollInterval);
+        return () => clearInterval(timer);
+    }, [pollInterval, pollingEnabled, currentPage, fetchPageData]);
+    // Navigation functions
     const nextPage = React.useCallback(() => {
-        if (!loading && hasMore) {
-            setCurrentPage((prev) => prev + 1);
+        if (!loading && !navigating && hasMore) {
+            const newPage = currentPage + 1;
+            setCurrentPage(newPage);
+            fetchPageData(newPage, false, true);
         }
-    }, [loading, hasMore]);
+    }, [loading, navigating, hasMore, currentPage, fetchPageData]);
     const prevPage = React.useCallback(() => {
-        if (!loading && currentPage > 0) {
-            setCurrentPage((prev) => prev - 1);
-        }
-    }, [loading, currentPage]);
-    const goToPage = React.useCallback((page) => {
-        if (!loading && page >= 0) {
-            setCurrentPage(page);
+        if (!loading && !navigating && currentPage > 0) {
+            const newPage = currentPage - 1;
+            setCurrentPage(newPage);
+            fetchPageData(newPage, false, true);
         }
-    }, [loading]);
+    }, [loading, navigating, currentPage, fetchPageData]);
     const refresh = React.useCallback(() => {
-        pageCache.current.clear();
-        lastIdCache.current.clear();
-        fetchData(true);
-    }, [fetchData]);
-    const clearCache = React.useCallback(() => {
-        pageCache.current.clear();
-        lastIdCache.current.clear();
-    }, []);
+        fetchPageData(currentPage, false);
+    }, [currentPage, fetchPageData]);
     return {
         items,
         loading,
+        navigating,
         error,
         currentPage,
-        totalCount,
         hasMore,
-        refreshing,
+        hasPrev: currentPage > 0,
+        totalCount,
         nextPage,
         prevPage,
-        goToPage,
         refresh,
-        clearCache,
     };
 }

package/dist/hooks/useExitOnCtrlC.js

@@ -0,0 +1,15 @@
+/**
+ * Hook to handle Ctrl+C (SIGINT) consistently across all screens
+ * Exits the program with proper cleanup of alternate screen buffer
+ */
+import { useInput } from "ink";
+import { exitAlternateScreenBuffer } from "../utils/screen.js";
+import { processUtils } from "../utils/processUtils.js";
+export function useExitOnCtrlC() {
+    useInput((input, key) => {
+        if (key.ctrl && input === "c") {
+            exitAlternateScreenBuffer();
+            processUtils.exit(130); // Standard exit code for SIGINT
+        }
+    });
+}

package/dist/hooks/useViewportHeight.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { useStdout } from "ink";
+/**
+ * Custom hook to calculate available viewport height for content rendering.
+ * Ensures consistent layout calculations across all CLI screens and prevents overflow.
+ *
+ * @param options Configuration for viewport calculation
+ * @returns Viewport dimensions including available height for content
+ *
+ * @example
+ * ```tsx
+ * const { viewportHeight } = useViewportHeight({ overhead: 10 });
+ * const pageSize = viewportHeight; // Use for dynamic page sizing
+ * ```
+ */
+export function useViewportHeight(options = {}) {
+    const { overhead = 0, minHeight = 5, maxHeight = 100 } = options;
+    const { stdout } = useStdout();
+    // Sample terminal dimensions ONCE and use fixed values - no reactive dependencies
+    // This prevents re-renders and Yoga WASM crashes from dynamic resizing
+    // CRITICAL: Initialize with safe fallback values to prevent null/undefined
+    const dimensions = React.useRef({
+        width: 120,
+        height: 30,
+    });
+    // Only sample on first call when still at default values
+    if (dimensions.current.width === 120 && dimensions.current.height === 30) {
+        // Only sample if stdout has valid dimensions
+        const sampledWidth = stdout?.columns && stdout.columns > 0 ? stdout.columns : 120;
+        const sampledHeight = stdout?.rows && stdout.rows > 0 ? stdout.rows : 30;
+        // Always enforce safe bounds to prevent Yoga crashes
+        dimensions.current = {
+            width: Math.max(80, Math.min(200, sampledWidth)),
+            height: Math.max(20, Math.min(100, sampledHeight)),
+        };
+    }
+    const terminalHeight = dimensions.current.height;
+    const terminalWidth = dimensions.current.width;
+    // Calculate viewport height with bounds
+    const viewportHeight = Math.max(minHeight, Math.min(maxHeight, terminalHeight - overhead));
+    // Removed console.logs to prevent rendering interference
+    return {
+        viewportHeight,
+        terminalHeight,
+        terminalWidth,
+    };
+}

package/dist/mcp/server-http.js

@@ -4,6 +4,7 @@ import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
 import { getClient } from "../utils/client.js";
 import express from "express";
+import { processUtils } from "../utils/processUtils.js";
 // Define available tools for the MCP server
 const TOOLS = [
     {
@@ -412,5 +413,5 @@ async function main() {
 }
 main().catch((error) => {
     console.error("Fatal error in main():", error);
-    process.exit(1);
+    processUtils.exit(1);
 });

package/dist/mcp/server.js

@@ -2,7 +2,62 @@
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
-import { getClient } from "../utils/client.js";
+import Runloop from "@runloop/api-client";
+import { VERSION } from "@runloop/api-client/version.js";
+import Conf from "conf";
+import { processUtils } from "../utils/processUtils.js";
+let configInstance = null;
+function getConfigInstance() {
+    if (!configInstance) {
+        configInstance = new Conf({
+            projectName: "runloop-cli",
+        });
+    }
+    return configInstance;
+}
+function getConfig() {
+    // Check environment variable first
+    const envApiKey = process.env.RUNLOOP_API_KEY;
+    if (envApiKey) {
+        return { apiKey: envApiKey };
+    }
+    // Fall back to stored config
+    try {
+        const config = getConfigInstance();
+        const apiKey = config.get("apiKey");
+        return { apiKey };
+    }
+    catch (error) {
+        console.error("Warning: Failed to load config:", error);
+        return {};
+    }
+}
+function getBaseUrl() {
+    const env = process.env.RUNLOOP_ENV?.toLowerCase();
+    switch (env) {
+        case "dev":
+            return "https://api.runloop.pro";
+        case "prod":
+        default:
+            return "https://api.runloop.ai";
+    }
+}
+function getClient() {
+    const config = getConfig();
+    if (!config.apiKey) {
+        throw new Error("API key not configured. Please set RUNLOOP_API_KEY environment variable or run: rli auth");
+    }
+    const baseURL = getBaseUrl();
+    return new Runloop({
+        bearerToken: config.apiKey,
+        baseURL,
+        timeout: 10000, // 10 seconds instead of default 30 seconds
+        maxRetries: 2, // 2 retries instead of default 5 (only for retryable errors)
+        defaultHeaders: {
+            "User-Agent": `Runloop/JS ${VERSION} - CLI MCP`,
+        },
+    });
+}
 // Define available tools for the MCP server
 const TOOLS = [
     {
@@ -386,12 +441,21 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
 });
 // Start the server
 async function main() {
-    const transport = new StdioServerTransport();
-    await server.connect(transport);
-    // Log to stderr so it doesn't interfere with MCP protocol on stdout
-    console.error("Runloop MCP server running on stdio");
+    try {
+        console.error("[MCP] Starting Runloop MCP server...");
+        const transport = new StdioServerTransport();
+        console.error("[MCP] Created stdio transport");
+        await server.connect(transport);
+        // Log to stderr so it doesn't interfere with MCP protocol on stdout
+        console.error("[MCP] Server initialization complete, waiting for requests...");
+    }
+    catch (error) {
+        console.error("[MCP] Error in main():", error);
+        throw error;
+    }
 }
 main().catch((error) => {
-    console.error("Fatal error in main():", error);
-    process.exit(1);
+    console.error("[MCP] Fatal error in main():", error);
+    console.error("[MCP] Stack trace:", error instanceof Error ? error.stack : "N/A");
+    processUtils.exit(1);
 });

package/dist/router/Router.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Router - Manages screen navigation with clean mount/unmount lifecycle
+ * Replaces conditional rendering pattern from menu.tsx
+ */
+import React from "react";
+import { useNavigation } from "../store/navigationStore.js";
+import { useDevboxStore } from "../store/devboxStore.js";
+import { useBlueprintStore } from "../store/blueprintStore.js";
+import { useSnapshotStore } from "../store/snapshotStore.js";
+import { ErrorBoundary } from "../components/ErrorBoundary.js";
+// Import screen components
+import { MenuScreen } from "../screens/MenuScreen.js";
+import { DevboxListScreen } from "../screens/DevboxListScreen.js";
+import { DevboxDetailScreen } from "../screens/DevboxDetailScreen.js";
+import { DevboxActionsScreen } from "../screens/DevboxActionsScreen.js";
+import { DevboxCreateScreen } from "../screens/DevboxCreateScreen.js";
+import { BlueprintListScreen } from "../screens/BlueprintListScreen.js";
+import { BlueprintLogsScreen } from "../screens/BlueprintLogsScreen.js";
+import { SnapshotListScreen } from "../screens/SnapshotListScreen.js";
+import { SSHSessionScreen } from "../screens/SSHSessionScreen.js";
+/**
+ * Router component that renders the current screen
+ * Implements memory cleanup on route changes
+ *
+ * Uses React key prop to force complete unmount/remount on screen changes,
+ * which prevents Yoga WASM errors during transitions.
+ */
+export function Router() {
+    const { currentScreen, params } = useNavigation();
+    const prevScreenRef = React.useRef(null);
+    // Memory cleanup on route changes
+    React.useEffect(() => {
+        const prevScreen = prevScreenRef.current;
+        if (prevScreen && prevScreen !== currentScreen) {
+            // Immediate cleanup without delay - React's key-based remount handles timing
+            switch (prevScreen) {
+                case "devbox-list":
+                case "devbox-detail":
+                case "devbox-actions":
+                case "devbox-create":
+                    // Clear devbox data when leaving devbox screens
+                    // Keep cache if we're still in devbox context
+                    if (!currentScreen.startsWith("devbox")) {
+                        useDevboxStore.getState().clearAll();
+                    }
+                    break;
+                case "blueprint-list":
+                case "blueprint-detail":
+                case "blueprint-logs":
+                    if (!currentScreen.startsWith("blueprint")) {
+                        useBlueprintStore.getState().clearAll();
+                    }
+                    break;
+                case "snapshot-list":
+                case "snapshot-detail":
+                    if (!currentScreen.startsWith("snapshot")) {
+                        useSnapshotStore.getState().clearAll();
+                    }
+                    break;
+            }
+        }
+        prevScreenRef.current = currentScreen;
+    }, [currentScreen]);
+    // CRITICAL: Use key prop to force React to completely unmount old component
+    // and mount new component, preventing race conditions during screen transitions.
+    // The key ensures React treats this as a completely new component tree.
+    // Wrap in ErrorBoundary to catch any Yoga WASM errors gracefully.
+    return (_jsxs(ErrorBoundary, { children: [currentScreen === "menu" && (_jsx(MenuScreen, { ...params }, currentScreen)), currentScreen === "devbox-list" && (_jsx(DevboxListScreen, { ...params }, currentScreen)), currentScreen === "devbox-detail" && (_jsx(DevboxDetailScreen, { ...params }, currentScreen)), currentScreen === "devbox-actions" && (_jsx(DevboxActionsScreen, { ...params }, currentScreen)), currentScreen === "devbox-create" && (_jsx(DevboxCreateScreen, { ...params }, currentScreen)), currentScreen === "blueprint-list" && (_jsx(BlueprintListScreen, { ...params }, currentScreen)), currentScreen === "blueprint-detail" && (_jsx(BlueprintListScreen, { ...params }, currentScreen)), currentScreen === "blueprint-logs" && (_jsx(BlueprintLogsScreen, { ...params }, currentScreen)), currentScreen === "snapshot-list" && (_jsx(SnapshotListScreen, { ...params }, currentScreen)), currentScreen === "snapshot-detail" && (_jsx(SnapshotListScreen, { ...params }, currentScreen)), currentScreen === "ssh-session" && (_jsx(SSHSessionScreen, { ...params }, currentScreen))] }, `boundary-${currentScreen}`));
+}

package/dist/router/types.js

@@ -0,0 +1 @@
+export {};

package/dist/screens/BlueprintListScreen.js

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

package/dist/screens/BlueprintLogsScreen.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BlueprintLogsScreen - Screen for viewing blueprint build logs
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { useNavigation } from "../store/navigationStore.js";
+import { LogsViewer } from "../components/LogsViewer.js";
+import { Header } from "../components/Header.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { getBlueprintLogs } from "../services/blueprintService.js";
+import { colors } from "../utils/theme.js";
+export function BlueprintLogsScreen({ blueprintId }) {
+    const { goBack, params } = useNavigation();
+    const [logs, setLogs] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    // Use blueprintId from props or params
+    const id = blueprintId || params.blueprintId;
+    React.useEffect(() => {
+        if (!id) {
+            goBack();
+            return;
+        }
+        let cancelled = false;
+        const fetchLogs = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                const blueprintLogs = await getBlueprintLogs(id);
+                if (!cancelled) {
+                    setLogs(Array.isArray(blueprintLogs) ? blueprintLogs : []);
+                    setLoading(false);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err);
+                    setLoading(false);
+                }
+            }
+        };
+        fetchLogs();
+        return () => {
+            cancelled = true;
+        };
+    }, [id, goBack]);
+    if (!id) {
+        return null;
+    }
+    // Get blueprint name from params if available (for breadcrumb)
+    const blueprintName = params.blueprintName || id;
+    if (loading) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Blueprints" },
+                        { label: blueprintName },
+                        { label: "Logs", active: true },
+                    ] }), _jsx(Header, { title: "Loading Logs" }), _jsx(SpinnerComponent, { message: "Fetching blueprint logs..." })] }));
+    }
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Blueprints" },
+                        { label: blueprintName },
+                        { label: "Logs", active: true },
+                    ] }), _jsx(Header, { title: "Error" }), _jsx(ErrorMessage, { message: "Failed to load blueprint logs", error: error }), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [q] or [esc] to go back" }) })] }));
+    }
+    return (_jsx(LogsViewer, { logs: logs, breadcrumbItems: [
+            { label: "Blueprints" },
+            { label: blueprintName },
+            { label: "Logs", active: true },
+        ], onBack: goBack, title: "Blueprint Build Logs" }));
+}

package/dist/screens/DevboxActionsScreen.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DevboxActionsScreen - Pure UI component for devbox actions
+ * Refactored from components/DevboxActionsMenu.tsx
+ */
+import React from "react";
+import { useNavigation } from "../store/navigationStore.js";
+import { useDevboxStore } from "../store/devboxStore.js";
+import { DevboxActionsMenu } from "../components/DevboxActionsMenu.js";
+export function DevboxActionsScreen({ devboxId, operation, }) {
+    const { goBack } = useNavigation();
+    const devboxes = useDevboxStore((state) => state.devboxes);
+    // Find devbox in store
+    const devbox = devboxes.find((d) => d.id === devboxId);
+    // Navigate back if devbox not found - must be in useEffect, not during render
+    React.useEffect(() => {
+        if (!devbox) {
+            goBack();
+        }
+    }, [devbox, goBack]);
+    if (!devbox) {
+        return null;
+    }
+    return (_jsx(DevboxActionsMenu, { devbox: devbox, onBack: goBack, initialOperation: operation }));
+}

package/dist/screens/DevboxCreateScreen.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNavigation } from "../store/navigationStore.js";
+import { DevboxCreatePage } from "../components/DevboxCreatePage.js";
+export function DevboxCreateScreen() {
+    const { goBack } = useNavigation();
+    const handleCreate = () => {
+        // After creation, go back to list (which will refresh)
+        goBack();
+    };
+    return _jsx(DevboxCreatePage, { onBack: goBack, onCreate: handleCreate });
+}