@runloop/rl-cli 0.0.3 → 0.1.1

package/dist/components/DevboxCard.js

@@ -1,24 +1,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import figures from 'figures';
+import { Box, Text } from "ink";
+import figures from "figures";
+import { colors } from "../utils/theme.js";
 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' };
+            case "running":
+                return { icon: figures.tick, color: colors.success };
+            case "provisioning":
+            case "initializing":
+                return { icon: figures.ellipsis, color: colors.warning };
+            case "stopped":
+            case "suspended":
+                return { icon: figures.circle, color: colors.textDim };
+            case "failed":
+                return { icon: figures.cross, color: colors.error };
             default:
-                return { icon: figures.circle, color: 'gray' };
+                return { icon: figures.circle, color: colors.textDim };
         }
     };
     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() })] }))] }));
+    return (_jsxs(Box, { children: [_jsx(Text, { color: statusDisplay.color, children: statusDisplay.icon }), _jsx(Text, { children: " " }), _jsx(Box, { width: 20, children: _jsx(Text, { color: colors.primary, bold: true, children: displayName.slice(0, 18) }) }), _jsx(Text, { color: colors.textDim, dimColor: true, children: id }), createdAt && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: new Date(createdAt).toLocaleDateString() })] }))] }));
 };

package/dist/components/DevboxCreatePage.js

@@ -1,30 +1,31 @@
 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 { 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('create');
+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 { SpinnerComponent } from "./Spinner.js";
+import { ErrorMessage } from "./ErrorMessage.js";
+import { SuccessMessage } from "./SuccessMessage.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { MetadataDisplay } from "./MetadataDisplay.js";
+import { colors } from "../utils/theme.js";
+export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
+    const [currentField, setCurrentField] = React.useState("create");
     const [formData, setFormData] = React.useState({
-        name: '',
-        architecture: 'arm64',
-        resource_size: 'SMALL',
-        custom_cpu: '',
-        custom_memory: '',
-        custom_disk: '',
-        keep_alive: '3600',
+        name: "",
+        architecture: "arm64",
+        resource_size: "SMALL",
+        custom_cpu: "",
+        custom_memory: "",
+        custom_disk: "",
+        keep_alive: "3600",
         metadata: {},
-        blueprint_id: '',
-        snapshot_id: '',
+        blueprint_id: initialBlueprintId || "",
+        snapshot_id: "",
     });
-    const [metadataKey, setMetadataKey] = React.useState('');
-    const [metadataValue, setMetadataValue] = React.useState('');
+    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
@@ -32,33 +33,45 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
     const [result, setResult] = React.useState(null);
     const [error, setError] = React.useState(null);
     const baseFields = [
-        { key: 'create', label: 'Devbox Create', type: 'action' },
-        { key: 'name', label: 'Name', type: 'text' },
-        { key: 'architecture', label: 'Architecture', type: 'select' },
-        { key: 'resource_size', label: 'Resource Size', type: 'select' },
+        { key: "create", label: "Devbox Create", type: "action" },
+        { 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'
+    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' },
+            { 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' },
+        { 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 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 (input === "q" || key.escape || key.return) {
                 if (onCreate) {
                     onCreate(result);
                 }
@@ -68,11 +81,11 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
         }
         // Handle error screen
         if (error) {
-            if (input === 'r' || key.return) {
+            if (input === "r" || key.return) {
                 // Retry - clear error and return to form
                 setError(null);
             }
-            else if (input === 'q' || key.escape) {
+            else if (input === "q" || key.escape) {
                 // Quit - go back to list
                 onBack();
             }
@@ -83,18 +96,18 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
             return;
         }
         // Back to list
-        if (input === 'q' || key.escape) {
+        if (input === "q" || key.escape) {
             console.clear();
             onBack();
             return;
         }
         // Submit form
-        if (input === 's' && key.ctrl) {
+        if (input === "s" && key.ctrl) {
             handleCreate();
             return;
         }
         // Handle Enter on create field
-        if (currentField === 'create' && key.return) {
+        if (currentField === "create" && key.return) {
             handleCreate();
             return;
         }
@@ -105,11 +118,11 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
             const maxIndex = metadataKeys.length + 1;
             // Handle input mode (typing key or value)
             if (metadataInputMode) {
-                if (metadataInputMode === 'key' && key.return && metadataKey.trim()) {
-                    setMetadataInputMode('value');
+                if (metadataInputMode === "key" && key.return && metadataKey.trim()) {
+                    setMetadataInputMode("value");
                     return;
                 }
-                else if (metadataInputMode === 'value' && key.return) {
+                else if (metadataInputMode === "value" && key.return) {
                     if (metadataKey.trim() && metadataValue.trim()) {
                         setFormData({
                             ...formData,
@@ -119,22 +132,22 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
                             },
                         });
                     }
-                    setMetadataKey('');
-                    setMetadataValue('');
+                    setMetadataKey("");
+                    setMetadataValue("");
                     setMetadataInputMode(null);
                     setSelectedMetadataIndex(0); // Back to "add new" row
                     return;
                 }
                 else if (key.escape) {
                     // Cancel input
-                    setMetadataKey('');
-                    setMetadataValue('');
+                    setMetadataKey("");
+                    setMetadataValue("");
                     setMetadataInputMode(null);
                     return;
                 }
                 else if (key.tab) {
                     // Tab between key and value
-                    setMetadataInputMode(metadataInputMode === 'key' ? 'value' : 'key');
+                    setMetadataInputMode(metadataInputMode === "key" ? "value" : "key");
                     return;
                 }
                 return; // Don't process other keys while in input mode
@@ -149,31 +162,34 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
             else if (key.return) {
                 if (selectedMetadataIndex === 0) {
                     // Add new
-                    setMetadataKey('');
-                    setMetadataValue('');
-                    setMetadataInputMode('key');
+                    setMetadataKey("");
+                    setMetadataValue("");
+                    setMetadataInputMode("key");
                 }
                 else if (selectedMetadataIndex === maxIndex) {
                     // Done - exit metadata section
                     setInMetadataSection(false);
                     setSelectedMetadataIndex(0);
-                    setMetadataKey('');
-                    setMetadataValue('');
+                    setMetadataKey("");
+                    setMetadataValue("");
                     setMetadataInputMode(null);
                 }
-                else if (selectedMetadataIndex >= 1 && selectedMetadataIndex <= metadataKeys.length) {
+                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] || '');
+                    setMetadataKey(keyToEdit || "");
+                    setMetadataValue(formData.metadata[keyToEdit] || "");
                     // Remove old entry
                     const newMetadata = { ...formData.metadata };
                     delete newMetadata[keyToEdit];
                     setFormData({ ...formData, metadata: newMetadata });
-                    setMetadataInputMode('key');
+                    setMetadataInputMode("key");
                 }
             }
-            else if ((input === 'd' || key.delete) && selectedMetadataIndex >= 1 && selectedMetadataIndex <= metadataKeys.length) {
+            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 };
@@ -185,12 +201,12 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
                     setSelectedMetadataIndex(Math.max(0, newLength));
                 }
             }
-            else if (key.escape || input === 'q') {
+            else if (key.escape || input === "q") {
                 // Exit metadata section
                 setInMetadataSection(false);
                 setSelectedMetadataIndex(0);
-                setMetadataKey('');
-                setMetadataValue('');
+                setMetadataKey("");
+                setMetadataValue("");
                 setMetadataInputMode(null);
             }
             return;
@@ -207,46 +223,55 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
             return;
         }
         // Enter key on metadata field to enter metadata section
-        if (currentField === 'metadata' && key.return) {
+        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') {
+        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] });
+                setFormData({
+                    ...formData,
+                    architecture: architectures[newIndex],
+                });
             }
-            else if (currentField === 'resource_size') {
+            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] });
+                setFormData({
+                    ...formData,
+                    resource_size: resourceSizes[newIndex],
+                });
             }
             return;
         }
     });
     // Validate custom resource configuration
     const validateCustomResources = () => {
-        if (formData.resource_size !== 'CUSTOM_SIZE') {
+        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_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_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';
+        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) {
@@ -275,7 +300,7 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
             if (formData.resource_size) {
                 launchParameters.resource_size_request = formData.resource_size;
             }
-            if (formData.resource_size === 'CUSTOM_SIZE') {
+            if (formData.resource_size === "CUSTOM_SIZE") {
                 if (formData.custom_cpu)
                     launchParameters.custom_cpu_cores = parseInt(formData.custom_cpu);
                 if (formData.custom_memory)
@@ -314,65 +339,74 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
     };
     // Result screen
     if (result) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Devboxes' },
-                        { label: 'Create', active: true }
-                    ] }), _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" }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _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: colors.textDim, 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(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" }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(ErrorMessage, { message: "Failed to create devbox", error: error }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, 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(SpinnerComponent, { message: "Creating devbox..." })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(SpinnerComponent, { message: "Creating devbox..." })] }));
     }
     // Form screen
-    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                    { label: 'Devboxes' },
-                    { label: 'Create', active: true }
-                ] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field, index) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field, index) => {
                     const isActive = currentField === field.key;
                     const fieldData = formData[field.key];
-                    if (field.type === 'action') {
-                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? 'green' : 'gray', bold: isActive, children: [isActive ? figures.pointer : ' ', " ", field.label] }), isActive && (_jsxs(Text, { color: "gray", dimColor: true, children: [' ', "[Enter to create]"] }))] }, field.key));
+                    if (field.type === "action") {
+                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? colors.success : colors.textDim, bold: isActive, children: [isActive ? figures.pointer : " ", " ", field.label] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to create]"] }))] }, 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) => {
+                    if (field.type === "text") {
+                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, 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));
+                                    }, 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: colors.text, children: String(fieldData || "(empty)") }))] }, field.key));
                     }
-                    if (field.type === 'select') {
+                    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));
+                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", field.label, ":"] }), _jsxs(Text, { color: isActive ? colors.primary : colors.text, bold: isActive, children: [" ", value || "(none)"] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", figures.arrowLeft, figures.arrowRight, " to change]"] }))] }, field.key));
                     }
-                    if (field.type === 'metadata') {
+                    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));
+                            return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", field.label, ":", " "] }), _jsxs(Text, { color: colors.text, children: [Object.keys(formData.metadata).length, " item(s)"] }), isActive && (_jsxs(Text, { color: colors.textDim, 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) => {
+                        return (_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"] }), metadataInputMode && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: selectedMetadataIndex === 0
+                                        ? colors.success
+                                        : colors.warning, paddingX: 1, children: [_jsx(Text, { color: selectedMetadataIndex === 0
+                                                ? colors.success
+                                                : colors.warning, bold: true, children: selectedMetadataIndex === 0 ? "Adding New" : "Editing" }), _jsx(Box, { children: metadataInputMode === "key" ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: colors.primary, 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: colors.primary, 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
+                                                        ? colors.primary
+                                                        : colors.textDim, children: [selectedMetadataIndex === 0
+                                                            ? figures.pointer
+                                                            : " ", " "] }), _jsx(Text, { color: selectedMetadataIndex === 0
+                                                        ? colors.success
+                                                        : colors.textDim, 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 (_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, ": ", formData.metadata[key]] })] }, key));
+                                            }) })), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: selectedMetadataIndex === maxIndex
+                                                        ? colors.primary
+                                                        : colors.textDim, children: [selectedMetadataIndex === maxIndex
+                                                            ? figures.pointer
+                                                            : " ", " "] }), _jsxs(Text, { color: selectedMetadataIndex === maxIndex
+                                                        ? colors.success
+                                                        : colors.textDim, bold: selectedMetadataIndex === 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: 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() })] })), !inMetadataSection && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Create \u2022 [q] Cancel"] }) }))] }));
+                }) }), formData.resource_size === "CUSTOM_SIZE" &&
+                validateCustomResources() && (_jsxs(Box, { borderStyle: "round", borderColor: colors.error, paddingX: 1, paddingY: 0, marginTop: 1, children: [_jsxs(Text, { color: colors.error, bold: true, children: [figures.cross, " Validation Error"] }), _jsx(Text, { color: colors.error, dimColor: true, children: validateCustomResources() })] })), !inMetadataSection && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Create \u2022 [q] Cancel"] }) }))] }));
 };