@runloop/rl-cli 0.0.1

package/dist/commands/upload.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { render } from 'ink';
+import { createReadStream } from 'fs';
+import { getClient } from '../utils/client.js';
+import { Header } from '../components/Header.js';
+import { SpinnerComponent } from '../components/Spinner.js';
+import { SuccessMessage } from '../components/SuccessMessage.js';
+import { ErrorMessage } from '../components/ErrorMessage.js';
+const UploadFileUI = ({ id, file, targetPath }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [success, setSuccess] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const upload = async () => {
+            try {
+                const client = getClient();
+                const fileStream = createReadStream(file);
+                const filename = file.split('/').pop() || 'uploaded-file';
+                await client.devboxes.uploadFile(id, {
+                    path: targetPath || filename,
+                    file: fileStream,
+                });
+                setSuccess(true);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        upload();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { title: "Upload File", subtitle: `Uploading to devbox: ${id}` }), loading && _jsx(SpinnerComponent, { message: "Uploading file..." }), success && (_jsx(SuccessMessage, { message: "File uploaded successfully!", details: `File: ${file}${targetPath ? `\nTarget: ${targetPath}` : ''}` })), error && _jsx(ErrorMessage, { message: "Failed to upload file", error: error })] }));
+};
+export async function uploadFile(id, file, options) {
+    const { waitUntilExit } = render(_jsx(UploadFileUI, { id: id, file: file, targetPath: options.path }));
+    await waitUntilExit();
+}

package/dist/components/Banner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+import Gradient from 'ink-gradient';
+export const Banner = React.memo(() => {
+    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsx(Gradient, { colors: ['#0a4d3a', '#e5f1ed'], children: _jsx(Text, { bold: true, children: `
+╦═╗╦ ╦╔╗╔╦  ╔═╗╔═╗╔═╗
+╠╦╝║ ║║║║║  ║ ║║ ║╠═╝
+╩╚═╚═╝╝╚╝╩═╝╚═╝╚═╝╩ .ai
+          ` }) }) }));
+});

package/dist/components/Breadcrumb.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+import figures from 'figures';
+export const Breadcrumb = React.memo(({ items }) => {
+    const baseUrl = process.env.RUNLOOP_BASE_URL;
+    const isDevEnvironment = baseUrl && baseUrl !== 'https://api.runloop.ai';
+    return (_jsxs(Box, { marginBottom: 1, paddingX: 1, paddingY: 0, children: [_jsx(Text, { color: "green", dimColor: true, bold: true, children: "RL" }), isDevEnvironment && _jsx(Text, { color: "redBright", bold: true, children: " (dev)" }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowRight, " "] }), items.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? 'cyan' : 'gray', bold: item.active, dimColor: !item.active, children: item.label }), index < items.length - 1 && (_jsx(Text, { color: "gray", dimColor: true, children: " / " }))] }, index)))] }));
+});

package/dist/components/DetailView.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/**
+ * Reusable detail view component for displaying entity information
+ * Organizes data into sections with labeled items
+ */
+export const DetailView = ({ sections }) => {
+    return (_jsx(Box, { flexDirection: "column", gap: 1, children: sections.map((section, sectionIndex) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "yellow", bold: true, children: section.title }), section.items.map((item, itemIndex) => (_jsx(Box, { children: _jsxs(Text, { color: item.color || 'gray', dimColor: true, children: [item.label, ": ", item.value] }) }, itemIndex))), sectionIndex < sections.length - 1 && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: " " }) }))] }, sectionIndex))) }));
+};
+/**
+ * Helper to build detail sections from an object
+ */
+export function buildDetailSections(data, config) {
+    return Object.entries(config).map(([sectionName, sectionConfig]) => ({
+        title: sectionName,
+        items: sectionConfig.fields
+            .map((field) => {
+            const value = data[field.key];
+            if (value === undefined || value === null)
+                return null;
+            return {
+                label: field.label,
+                value: field.formatter ? field.formatter(value) : String(value),
+                color: field.color,
+            };
+        })
+            .filter(Boolean),
+    })).filter((section) => section.items.length > 0);
+}

package/dist/components/DevboxCard.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import figures from 'figures';
+export const DevboxCard = ({ id, name, status, createdAt, }) => {
+    const getStatusDisplay = (status) => {
+        switch (status) {
+            case 'running':
+                return { icon: figures.tick, color: 'green' };
+            case 'provisioning':
+            case 'initializing':
+                return { icon: figures.ellipsis, color: 'yellow' };
+            case 'stopped':
+            case 'suspended':
+                return { icon: figures.circle, color: 'gray' };
+            case 'failed':
+                return { icon: figures.cross, color: 'red' };
+            default:
+                return { icon: figures.circle, color: 'gray' };
+        }
+    };
+    const statusDisplay = getStatusDisplay(status);
+    const displayName = name || id;
+    return (_jsxs(Box, { children: [_jsx(Text, { color: statusDisplay.color, children: statusDisplay.icon }), _jsx(Text, { children: " " }), _jsx(Box, { width: 20, children: _jsx(Text, { color: "cyan", bold: true, children: displayName.slice(0, 18) }) }), _jsx(Text, { color: "gray", dimColor: true, children: id }), createdAt && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "gray", dimColor: true, children: new Date(createdAt).toLocaleDateString() })] }))] }));
+};

package/dist/components/DevboxCreatePage.js

@@ -0,0 +1,370 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import figures from 'figures';
+import { getClient } from '../utils/client.js';
+import { Header } from './Header.js';
+import { SpinnerComponent } from './Spinner.js';
+import { ErrorMessage } from './ErrorMessage.js';
+import { SuccessMessage } from './SuccessMessage.js';
+import { Breadcrumb } from './Breadcrumb.js';
+import { MetadataDisplay } from './MetadataDisplay.js';
+export const DevboxCreatePage = ({ onBack, onCreate }) => {
+    const [currentField, setCurrentField] = React.useState('name');
+    const [formData, setFormData] = React.useState({
+        name: '',
+        architecture: 'arm64',
+        resource_size: 'SMALL',
+        custom_cpu: '',
+        custom_memory: '',
+        custom_disk: '',
+        keep_alive: '3600',
+        metadata: {},
+        blueprint_id: '',
+        snapshot_id: '',
+    });
+    const [metadataKey, setMetadataKey] = React.useState('');
+    const [metadataValue, setMetadataValue] = React.useState('');
+    const [inMetadataSection, setInMetadataSection] = React.useState(false);
+    const [metadataInputMode, setMetadataInputMode] = React.useState(null);
+    const [selectedMetadataIndex, setSelectedMetadataIndex] = React.useState(-1); // -1 means "add new" row
+    const [creating, setCreating] = React.useState(false);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const baseFields = [
+        { key: 'name', label: 'Name', type: 'text' },
+        { key: 'architecture', label: 'Architecture', type: 'select' },
+        { key: 'resource_size', label: 'Resource Size', type: 'select' },
+    ];
+    // Add custom resource fields if CUSTOM_SIZE is selected
+    const customFields = formData.resource_size === 'CUSTOM_SIZE'
+        ? [
+            { key: 'custom_cpu', label: 'CPU Cores (2-16, even)', type: 'text' },
+            { key: 'custom_memory', label: 'Memory GB (2-64, even)', type: 'text' },
+            { key: 'custom_disk', label: 'Disk GB (2-64, even)', type: 'text' },
+        ]
+        : [];
+    const remainingFields = [
+        { key: 'keep_alive', label: 'Keep Alive (seconds)', type: 'text' },
+        { key: 'blueprint_id', label: 'Blueprint ID (optional)', type: 'text' },
+        { key: 'snapshot_id', label: 'Snapshot ID (optional)', type: 'text' },
+        { key: 'metadata', label: 'Metadata (optional)', type: 'metadata' },
+    ];
+    const fields = [...baseFields, ...customFields, ...remainingFields];
+    const architectures = ['arm64', 'x86_64'];
+    const resourceSizes = ['X_SMALL', 'SMALL', 'MEDIUM', 'LARGE', 'X_LARGE', 'XX_LARGE', 'CUSTOM_SIZE'];
+    const currentFieldIndex = fields.findIndex((f) => f.key === currentField);
+    useInput((input, key) => {
+        // Handle result screen
+        if (result) {
+            if (input === 'q' || key.escape || key.return) {
+                if (onCreate) {
+                    onCreate(result);
+                }
+                onBack();
+            }
+            return;
+        }
+        // Handle error screen
+        if (error) {
+            if (input === 'r' || key.return) {
+                // Retry - clear error and return to form
+                setError(null);
+            }
+            else if (input === 'q' || key.escape) {
+                // Quit - go back to list
+                onBack();
+            }
+            return;
+        }
+        // Handle creating state
+        if (creating) {
+            return;
+        }
+        // Back to list
+        if (input === 'q' || key.escape) {
+            console.clear();
+            onBack();
+            return;
+        }
+        // Submit form
+        if (input === 's' && key.ctrl) {
+            handleCreate();
+            return;
+        }
+        // Handle metadata section
+        if (inMetadataSection) {
+            const metadataKeys = Object.keys(formData.metadata);
+            // Selection model: 0 = "Add new", 1..n = Existing items, n+1 = "Done"
+            const maxIndex = metadataKeys.length + 1;
+            // Handle input mode (typing key or value)
+            if (metadataInputMode) {
+                if (metadataInputMode === 'key' && key.return && metadataKey.trim()) {
+                    setMetadataInputMode('value');
+                    return;
+                }
+                else if (metadataInputMode === 'value' && key.return) {
+                    if (metadataKey.trim() && metadataValue.trim()) {
+                        setFormData({
+                            ...formData,
+                            metadata: {
+                                ...formData.metadata,
+                                [metadataKey.trim()]: metadataValue.trim(),
+                            },
+                        });
+                    }
+                    setMetadataKey('');
+                    setMetadataValue('');
+                    setMetadataInputMode(null);
+                    setSelectedMetadataIndex(0); // Back to "add new" row
+                    return;
+                }
+                else if (key.escape) {
+                    // Cancel input
+                    setMetadataKey('');
+                    setMetadataValue('');
+                    setMetadataInputMode(null);
+                    return;
+                }
+                else if (key.tab) {
+                    // Tab between key and value
+                    setMetadataInputMode(metadataInputMode === 'key' ? 'value' : 'key');
+                    return;
+                }
+                return; // Don't process other keys while in input mode
+            }
+            // Navigation mode
+            if (key.upArrow && selectedMetadataIndex > 0) {
+                setSelectedMetadataIndex(selectedMetadataIndex - 1);
+            }
+            else if (key.downArrow && selectedMetadataIndex < maxIndex) {
+                setSelectedMetadataIndex(selectedMetadataIndex + 1);
+            }
+            else if (key.return) {
+                if (selectedMetadataIndex === 0) {
+                    // Add new
+                    setMetadataKey('');
+                    setMetadataValue('');
+                    setMetadataInputMode('key');
+                }
+                else if (selectedMetadataIndex === maxIndex) {
+                    // Done - exit metadata section
+                    setInMetadataSection(false);
+                    setSelectedMetadataIndex(0);
+                    setMetadataKey('');
+                    setMetadataValue('');
+                    setMetadataInputMode(null);
+                }
+                else if (selectedMetadataIndex >= 1 && selectedMetadataIndex <= metadataKeys.length) {
+                    // Edit existing (selectedMetadataIndex - 1 gives array index)
+                    const keyToEdit = metadataKeys[selectedMetadataIndex - 1];
+                    setMetadataKey(keyToEdit || '');
+                    setMetadataValue(formData.metadata[keyToEdit] || '');
+                    // Remove old entry
+                    const newMetadata = { ...formData.metadata };
+                    delete newMetadata[keyToEdit];
+                    setFormData({ ...formData, metadata: newMetadata });
+                    setMetadataInputMode('key');
+                }
+            }
+            else if ((input === 'd' || key.delete) && selectedMetadataIndex >= 1 && selectedMetadataIndex <= metadataKeys.length) {
+                // Delete selected item (selectedMetadataIndex - 1 gives array index)
+                const keyToDelete = metadataKeys[selectedMetadataIndex - 1];
+                const newMetadata = { ...formData.metadata };
+                delete newMetadata[keyToDelete];
+                setFormData({ ...formData, metadata: newMetadata });
+                // Stay at same position or move to add new if we deleted the last item
+                const newLength = Object.keys(newMetadata).length;
+                if (selectedMetadataIndex > newLength) {
+                    setSelectedMetadataIndex(Math.max(0, newLength));
+                }
+            }
+            else if (key.escape || input === 'q') {
+                // Exit metadata section
+                setInMetadataSection(false);
+                setSelectedMetadataIndex(0);
+                setMetadataKey('');
+                setMetadataValue('');
+                setMetadataInputMode(null);
+            }
+            return;
+        }
+        // Now safe to get field from list
+        const field = fields[currentFieldIndex];
+        // Navigation
+        if (key.upArrow && currentFieldIndex > 0) {
+            setCurrentField(fields[currentFieldIndex - 1].key);
+            return;
+        }
+        if (key.downArrow && currentFieldIndex < fields.length - 1) {
+            setCurrentField(fields[currentFieldIndex + 1].key);
+            return;
+        }
+        // Enter key on metadata field to enter metadata section
+        if (currentField === 'metadata' && key.return) {
+            setInMetadataSection(true);
+            setSelectedMetadataIndex(0); // Start at "add new" row
+            return;
+        }
+        // Handle select fields
+        if (field && field.type === 'select' && (key.leftArrow || key.rightArrow)) {
+            if (currentField === 'architecture') {
+                const currentIndex = architectures.indexOf(formData.architecture);
+                const newIndex = key.leftArrow
+                    ? Math.max(0, currentIndex - 1)
+                    : Math.min(architectures.length - 1, currentIndex + 1);
+                setFormData({ ...formData, architecture: architectures[newIndex] });
+            }
+            else if (currentField === 'resource_size') {
+                const currentIndex = resourceSizes.indexOf(formData.resource_size);
+                const newIndex = key.leftArrow
+                    ? Math.max(0, currentIndex - 1)
+                    : Math.min(resourceSizes.length - 1, currentIndex + 1);
+                setFormData({ ...formData, resource_size: resourceSizes[newIndex] });
+            }
+            return;
+        }
+    });
+    // Validate custom resource configuration
+    const validateCustomResources = () => {
+        if (formData.resource_size !== 'CUSTOM_SIZE') {
+            return null;
+        }
+        const cpu = parseInt(formData.custom_cpu);
+        const memory = parseInt(formData.custom_memory);
+        const disk = parseInt(formData.custom_disk);
+        if (formData.custom_cpu && (isNaN(cpu) || cpu < 2 || cpu > 16 || cpu % 2 !== 0)) {
+            return 'CPU cores must be an even number between 2 and 16';
+        }
+        if (formData.custom_memory && (isNaN(memory) || memory < 2 || memory > 64 || memory % 2 !== 0)) {
+            return 'Memory must be an even number between 2 and 64 GB';
+        }
+        if (formData.custom_disk && (isNaN(disk) || disk < 2 || disk > 64 || disk % 2 !== 0)) {
+            return 'Disk must be an even number between 2 and 64 GB';
+        }
+        // Validate CPU to memory ratio (1:2 to 1:8)
+        if (formData.custom_cpu && formData.custom_memory) {
+            const ratio = memory / cpu;
+            if (ratio < 2 || ratio > 8) {
+                return `CPU to memory ratio must be 1:2 to 1:8 (got ${cpu}:${memory}, ratio 1:${ratio.toFixed(1)})`;
+            }
+        }
+        return null;
+    };
+    const handleCreate = async () => {
+        // Validate before creating
+        const validationError = validateCustomResources();
+        if (validationError) {
+            setError(new Error(validationError));
+            return;
+        }
+        setCreating(true);
+        setError(null);
+        try {
+            const client = getClient();
+            const launchParameters = {};
+            if (formData.architecture) {
+                launchParameters.architecture = formData.architecture;
+            }
+            if (formData.resource_size) {
+                launchParameters.resource_size_request = formData.resource_size;
+            }
+            if (formData.resource_size === 'CUSTOM_SIZE') {
+                if (formData.custom_cpu)
+                    launchParameters.custom_cpu_cores = parseInt(formData.custom_cpu);
+                if (formData.custom_memory)
+                    launchParameters.custom_gb_memory = parseInt(formData.custom_memory);
+                if (formData.custom_disk)
+                    launchParameters.custom_disk_size = parseInt(formData.custom_disk);
+            }
+            if (formData.keep_alive) {
+                launchParameters.keep_alive_time_seconds = parseInt(formData.keep_alive);
+            }
+            const createParams = {};
+            if (formData.name) {
+                createParams.name = formData.name;
+            }
+            if (Object.keys(formData.metadata).length > 0) {
+                createParams.metadata = formData.metadata;
+            }
+            if (formData.blueprint_id) {
+                createParams.blueprint_id = formData.blueprint_id;
+            }
+            if (formData.snapshot_id) {
+                createParams.snapshot_id = formData.snapshot_id;
+            }
+            if (Object.keys(launchParameters).length > 0) {
+                createParams.launch_parameters = launchParameters;
+            }
+            const devbox = await client.devboxes.create(createParams);
+            setResult(devbox);
+        }
+        catch (err) {
+            setError(err);
+        }
+        finally {
+            setCreating(false);
+        }
+    };
+    // Result screen
+    if (result) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: 'Devboxes' },
+                        { label: 'Create', active: true }
+                    ] }), _jsx(Header, { title: "Create Devbox" }), _jsx(SuccessMessage, { message: "Devbox created successfully!", details: `ID: ${result.id}\nName: ${result.name || '(none)'}\nStatus: ${result.status}` }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter], [q], or [esc] to return to list" }) })] }));
+    }
+    // Error screen
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: 'Devboxes' },
+                        { label: 'Create', active: true }
+                    ] }), _jsx(Header, { title: "Create Devbox" }), _jsx(ErrorMessage, { message: "Failed to create devbox", error: error }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter] or [r] to retry \u2022 [q] or [esc] to cancel" }) })] }));
+    }
+    // Creating screen
+    if (creating) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: 'Devboxes' },
+                        { label: 'Create', active: true }
+                    ] }), _jsx(Header, { title: "Create Devbox" }), _jsx(SpinnerComponent, { message: "Creating devbox..." })] }));
+    }
+    // Form screen
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    { label: 'Devboxes' },
+                    { label: 'Create', active: true }
+                ] }), _jsx(Header, { title: "Create Devbox" }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field, index) => {
+                    const isActive = currentField === field.key;
+                    const fieldData = formData[field.key];
+                    if (field.type === 'text') {
+                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? 'cyan' : 'gray', children: [isActive ? figures.pointer : ' ', " ", field.label, ":", ' '] }), isActive ? (_jsx(TextInput, { value: String(fieldData || ''), onChange: (value) => {
+                                        setFormData({ ...formData, [field.key]: value });
+                                    }, placeholder: field.key === 'name' ? 'my-devbox' :
+                                        field.key === 'keep_alive' ? '3600' :
+                                            field.key === 'blueprint_id' ? 'bp_xxx' :
+                                                field.key === 'snapshot_id' ? 'snap_xxx' :
+                                                    '' })) : (_jsx(Text, { color: "white", children: String(fieldData || '(empty)') }))] }, field.key));
+                    }
+                    if (field.type === 'select') {
+                        const value = fieldData;
+                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? 'cyan' : 'gray', children: [isActive ? figures.pointer : ' ', " ", field.label, ":"] }), _jsxs(Text, { color: isActive ? 'cyan' : 'white', bold: isActive, children: [' ', value || '(none)'] }), isActive && (_jsxs(Text, { color: "gray", dimColor: true, children: [' ', "[", figures.arrowLeft, figures.arrowRight, " to change]"] }))] }, field.key));
+                    }
+                    if (field.type === 'metadata') {
+                        if (!inMetadataSection) {
+                            // Collapsed view
+                            return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? 'cyan' : 'gray', children: [isActive ? figures.pointer : ' ', " ", field.label, ":", ' '] }), _jsxs(Text, { color: "white", children: [Object.keys(formData.metadata).length, " item(s)"] }), isActive && (_jsx(Text, { color: "gray", dimColor: true, children: " [Enter to manage]" }))] }), Object.keys(formData.metadata).length > 0 && (_jsx(Box, { marginLeft: 2, children: _jsx(MetadataDisplay, { metadata: formData.metadata, showBorder: false }) }))] }, field.key));
+                        }
+                        // Expanded metadata section view
+                        const metadataKeys = Object.keys(formData.metadata);
+                        // Selection model: 0 = "Add new", 1..n = Existing items, n+1 = "Done"
+                        const maxIndex = metadataKeys.length + 1;
+                        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.hamburger, " Manage Metadata"] }), metadataInputMode && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: selectedMetadataIndex === 0 ? 'green' : 'yellow', paddingX: 1, children: [_jsx(Text, { color: selectedMetadataIndex === 0 ? 'green' : 'yellow', bold: true, children: selectedMetadataIndex === 0 ? 'Adding New' : 'Editing' }), _jsx(Box, { children: metadataInputMode === 'key' ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "cyan", children: "Key: " }), _jsx(TextInput, { value: metadataKey || '', onChange: setMetadataKey, placeholder: "env" })] })) : (_jsxs(Text, { dimColor: true, children: ["Key: ", metadataKey || ''] })) }), _jsx(Box, { children: metadataInputMode === 'value' ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "cyan", children: "Value: " }), _jsx(TextInput, { value: metadataValue || '', onChange: setMetadataValue, placeholder: "production" })] })) : (_jsxs(Text, { dimColor: true, children: ["Value: ", metadataValue || ''] })) })] })), !metadataInputMode && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: selectedMetadataIndex === 0 ? 'cyan' : 'gray', children: [selectedMetadataIndex === 0 ? figures.pointer : ' ', ' '] }), _jsx(Text, { color: selectedMetadataIndex === 0 ? 'green' : 'gray', bold: selectedMetadataIndex === 0, children: "+ Add new metadata" })] }), metadataKeys.length > 0 && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: metadataKeys.map((key, index) => {
+                                                const itemIndex = index + 1; // Items are at indices 1..n
+                                                const isSelected = selectedMetadataIndex === itemIndex;
+                                                return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? 'cyan' : 'gray', children: [isSelected ? figures.pointer : ' ', ' '] }), _jsxs(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: [key, ": ", formData.metadata[key]] })] }, key));
+                                            }) })), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: selectedMetadataIndex === maxIndex ? 'cyan' : 'gray', children: [selectedMetadataIndex === maxIndex ? figures.pointer : ' ', ' '] }), _jsxs(Text, { color: selectedMetadataIndex === maxIndex ? 'green' : 'gray', bold: selectedMetadataIndex === maxIndex, children: [figures.tick, " Done"] })] })] })), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: metadataInputMode
+                                            ? `[Tab] Switch field • [Enter] ${metadataInputMode === 'key' ? 'Next' : 'Save'} • [esc] Cancel`
+                                            : `${figures.arrowUp}${figures.arrowDown} Navigate • [Enter] ${selectedMetadataIndex === 0 ? 'Add' : selectedMetadataIndex === maxIndex ? 'Done' : 'Edit'} • [d] Delete • [esc] Back` }) })] }, field.key));
+                    }
+                    return null;
+                }) }), formData.resource_size === 'CUSTOM_SIZE' && validateCustomResources() && (_jsxs(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, paddingY: 0, marginTop: 1, children: [_jsxs(Text, { color: "red", bold: true, children: [figures.cross, " Validation Error"] }), _jsx(Text, { color: "red", dimColor: true, children: validateCustomResources() })] })), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, paddingY: 0, marginTop: 1, children: [_jsxs(Text, { color: "green", bold: true, children: [figures.info, " Summary"] }), _jsxs(Text, { dimColor: true, children: ["Name: ", formData.name || '(auto-generated)'] }), _jsxs(Text, { dimColor: true, children: ["Architecture: ", formData.architecture] }), formData.resource_size && _jsxs(Text, { dimColor: true, children: ["Resources: ", formData.resource_size] }), formData.resource_size === 'CUSTOM_SIZE' && formData.custom_cpu && (_jsxs(Text, { dimColor: true, children: ["  CPU: ", formData.custom_cpu, " cores"] })), formData.resource_size === 'CUSTOM_SIZE' && formData.custom_memory && (_jsxs(Text, { dimColor: true, children: ["  Memory: ", formData.custom_memory, " GB"] })), formData.resource_size === 'CUSTOM_SIZE' && formData.custom_disk && (_jsxs(Text, { dimColor: true, children: ["  Disk: ", formData.custom_disk, " GB"] })), _jsxs(Text, { dimColor: true, children: ["Keep Alive: ", formData.keep_alive, "s (", Math.floor(parseInt(formData.keep_alive || '0') / 60), "m)"] }), formData.blueprint_id && _jsxs(Text, { dimColor: true, children: ["Blueprint: ", formData.blueprint_id] }), formData.snapshot_id && _jsxs(Text, { dimColor: true, children: ["Snapshot: ", formData.snapshot_id] }), _jsxs(Text, { dimColor: true, children: ["Metadata: ", Object.keys(formData.metadata).length, " item(s)"] })] }), !inMetadataSection && (_jsxs(_Fragment, { children: [_jsx(Box, { borderStyle: "single", borderColor: "green", paddingX: 1, paddingY: 0, marginTop: 1, children: _jsxs(Text, { color: "green", bold: true, children: [figures.play, " Press [Ctrl+S] to create this devbox"] }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Ctrl+S] Create \u2022 [q] Cancel"] }) })] }))] }));
+};