@runloop/rl-cli 0.0.3 → 0.1.1

package/dist/components/MetadataDisplay.js

@@ -1,24 +1,32 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import { Badge } from '@inkjs/ui';
-import figures from 'figures';
+import { Box, Text } from "ink";
+import { Badge } from "@inkjs/ui";
+import figures from "figures";
+import { colors } from "../utils/theme.js";
 // Generate color for each key based on hash
 const getColorForKey = (key, index) => {
-    const colors = ['cyan', 'magenta', 'yellow', 'blue', 'green', 'red'];
-    return colors[index % colors.length];
+    const colorList = [
+        colors.primary,
+        colors.secondary,
+        colors.warning,
+        colors.info,
+        colors.success,
+        colors.error,
+    ];
+    return colorList[index % colorList.length];
 };
-export const MetadataDisplay = ({ metadata, title = 'Metadata', showBorder = false, selectedKey }) => {
+export const MetadataDisplay = ({ metadata, title = "Metadata", showBorder = false, selectedKey, }) => {
     const entries = Object.entries(metadata);
     if (entries.length === 0) {
         return null;
     }
-    const content = (_jsxs(Box, { flexDirection: "row", alignItems: "center", flexWrap: "wrap", children: [title && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "#0a4d3a", bold: true, children: [figures.info, " ", title] }), _jsx(Text, { children: " " })] })), entries.map(([key, value], index) => {
+    const content = (_jsxs(Box, { flexDirection: "row", alignItems: "center", flexWrap: "wrap", children: [title && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.accent3, bold: true, children: [figures.info, " ", title] }), _jsx(Text, { children: " " })] })), entries.map(([key, value], index) => {
                 const color = getColorForKey(key, index);
                 const isSelected = selectedKey === key;
-                return (_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [isSelected && (_jsxs(Text, { color: "cyan", bold: true, children: [figures.pointer, " "] })), _jsx(Badge, { color: isSelected ? 'cyan' : color, children: `${key}: ${value}` })] }, key));
+                return (_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [isSelected && (_jsxs(Text, { color: colors.primary, bold: true, children: [figures.pointer, " "] })), _jsx(Badge, { color: isSelected ? colors.primary : color, children: `${key}: ${value}` })] }, key));
             })] }));
     if (showBorder) {
-        return (_jsx(Box, { borderStyle: "round", borderColor: "#0a4d3a", paddingX: 2, paddingY: 1, flexDirection: "column", children: content }));
+        return (_jsx(Box, { borderStyle: "round", borderColor: colors.accent3, paddingX: 2, paddingY: 1, flexDirection: "column", children: content }));
     }
     return content;
 };

package/dist/components/OperationsMenu.js

@@ -1,15 +1,16 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } 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";
 /**
  * Reusable operations menu component for detail pages
  * Displays a list of available operations with keyboard navigation
  */
 export const OperationsMenu = ({ operations, selectedIndex, onNavigate, onSelect, onBack, additionalActions = [], }) => {
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.play, " Operations"] }), _jsx(Box, { flexDirection: "column", children: operations.map((op, index) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Operations"] }), _jsx(Box, { flexDirection: "column", children: operations.map((op, index) => {
                             const isSelected = index === selectedIndex;
-                            return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? 'cyan' : 'gray', children: [isSelected ? figures.pointer : ' ', ' '] }), _jsxs(Text, { color: isSelected ? op.color : 'gray', bold: isSelected, children: [op.icon, " ", op.label] })] }, op.key));
-                        }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Select \u2022", additionalActions.map((action) => ` [${action.key}] ${action.label} •`), ' ', "[q] Back"] }) })] }));
+                            return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? colors.primary : colors.textDim, children: [isSelected ? figures.pointer : " ", " "] }), _jsxs(Text, { color: isSelected ? op.color : colors.textDim, bold: isSelected, children: [op.icon, " ", op.label] })] }, op.key));
+                        }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Select \u2022", additionalActions.map((action) => ` [${action.key}] ${action.label} •`), " ", "[q] Back"] }) })] }));
 };
 /**
  * Helper to filter operations based on conditions

package/dist/components/ResourceActionsMenu.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { colors } from "../utils/theme.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { ActionsPopup } from "./ActionsPopup.js";
+import { DevboxActionsMenu } from "./DevboxActionsMenu.js";
+export const ResourceActionsMenu = (props) => {
+    if (props.resourceType === "devbox") {
+        const { resource, onBack, breadcrumbItems, initialOperation, initialOperationIndex, skipOperationsMenu, onSSHRequest, } = props;
+        return (_jsx(DevboxActionsMenu, { devbox: resource, onBack: onBack, breadcrumbItems: breadcrumbItems, initialOperation: initialOperation, initialOperationIndex: initialOperationIndex, skipOperationsMenu: skipOperationsMenu, onSSHRequest: onSSHRequest }));
+    }
+    // Blueprint generic actions menu
+    const { resource, onBack, breadcrumbItems = [
+        { label: "Blueprints" },
+        { label: resource.name || resource.id, active: true },
+    ], operations, initialOperation, initialOperationIndex = 0, skipOperationsMenu = false, onExecute, } = props;
+    const [selectedOperation, setSelectedOperation] = React.useState(initialOperationIndex);
+    const [executingOperation, setExecutingOperation] = React.useState(initialOperation || null);
+    const [operationInput, setOperationInput] = React.useState("");
+    const [operationResult, setOperationResult] = React.useState(null);
+    const [operationError, setOperationError] = React.useState(null);
+    React.useEffect(() => {
+        if (skipOperationsMenu && initialOperation) {
+            setExecutingOperation(initialOperation);
+        }
+    }, [skipOperationsMenu, initialOperation]);
+    const selectedOp = operations[selectedOperation] ||
+        operations.find((o) => o.key === executingOperation);
+    const execute = async () => {
+        try {
+            const result = await onExecute(executingOperation, {
+                input: operationInput.trim() || undefined,
+            });
+            if (typeof result === "string") {
+                setOperationResult(result);
+            }
+            else {
+                // No result to show; go back
+                onBack();
+            }
+        }
+        catch (err) {
+            setOperationError(err);
+        }
+    };
+    useInput((input, key) => {
+        // Result screen
+        if (operationResult || operationError) {
+            if (key.return || key.escape || input === "q") {
+                onBack();
+            }
+            return;
+        }
+        // If executing and needs input
+        if (executingOperation) {
+            const op = operations.find((o) => o.key === executingOperation);
+            if (op?.needsInput) {
+                if (key.return) {
+                    execute();
+                }
+                else if (input === "q" || key.escape) {
+                    setExecutingOperation(null);
+                    setOperationInput("");
+                }
+                else if (input.length === 1) {
+                    setOperationInput((prev) => prev + input);
+                }
+                else if (key.backspace) {
+                    setOperationInput((prev) => prev.slice(0, -1));
+                }
+                return;
+            }
+            // No input needed: execute immediately
+            execute();
+            return;
+        }
+        // Operations menu navigation
+        if (key.upArrow && selectedOperation > 0) {
+            setSelectedOperation(selectedOperation - 1);
+        }
+        else if (key.downArrow && selectedOperation < operations.length - 1) {
+            setSelectedOperation(selectedOperation + 1);
+        }
+        else if (key.return) {
+            setExecutingOperation(operations[selectedOperation].key);
+        }
+        else if (key.escape || input === "q") {
+            onBack();
+        }
+        else {
+            // Shortcut keys
+            const idx = operations.findIndex((op) => op.shortcut === input);
+            if (idx >= 0) {
+                setSelectedOperation(idx);
+                setExecutingOperation(operations[idx].key);
+            }
+        }
+    });
+    // Screens
+    if (operationResult || operationError) {
+        const label = operations.find((o) => o.key === executingOperation)?.label;
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems, showVersionCheck: true }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: operationError ? colors.error : colors.success, children: operationError ? `${label} failed` : `${label} completed` }), !!operationResult && (_jsx(Text, { color: colors.textDim, dimColor: true, children: operationResult })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.pointerSmall, " Press [Enter] to go back"] })] })] }));
+    }
+    if (executingOperation && selectedOp?.needsInput) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems, showVersionCheck: true }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: colors.textDim, children: [selectedOp.inputPrompt || "Input:", " "] }), _jsxs(Text, { children: [" ", operationInput] }), _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" })] })] }));
+    }
+    // Operations menu
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: resource, operations: operations.map((op) => ({
+                        key: op.key,
+                        label: op.label,
+                        color: op.color,
+                        icon: op.icon,
+                        shortcut: op.shortcut || "",
+                    })), selectedOperation: selectedOperation, onClose: onBack }) })] }));
+};

package/dist/components/ResourceListView.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput, useStdout, useApp } from "ink";
+import TextInput from "ink-text-input";
+import figures from "figures";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { SpinnerComponent } from "./Spinner.js";
+import { ErrorMessage } from "./ErrorMessage.js";
+import { Table } from "./Table.js";
+import { colors } from "../utils/theme.js";
+// Format time ago in a succinct way
+export const formatTimeAgo = (timestamp) => {
+    const seconds = Math.floor((Date.now() - timestamp) / 1000);
+    if (seconds < 60)
+        return `${seconds}s ago`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 30)
+        return `${days}d ago`;
+    const months = Math.floor(days / 30);
+    if (months < 12)
+        return `${months}mo ago`;
+    const years = Math.floor(months / 12);
+    return `${years}y ago`;
+};
+export function ResourceListView({ config }) {
+    const { stdout } = useStdout();
+    const { exit: inkExit } = useApp();
+    const [loading, setLoading] = React.useState(true);
+    const [resources, setResources] = React.useState([]);
+    const [error, setError] = React.useState(null);
+    const [currentPage, setCurrentPage] = React.useState(0);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [searchMode, setSearchMode] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const [refreshing, setRefreshing] = React.useState(false);
+    const [refreshIcon, setRefreshIcon] = React.useState(0);
+    const pageSize = config.pageSize || 10;
+    const maxFetch = config.maxFetch || 100;
+    // Calculate responsive dimensions
+    const terminalWidth = stdout?.columns || 120;
+    const terminalHeight = stdout?.rows || 30;
+    // Fetch resources
+    const fetchData = React.useCallback(async (isInitialLoad = false) => {
+        try {
+            if (isInitialLoad) {
+                setRefreshing(true);
+            }
+            const data = await config.fetchResources();
+            setResources(data);
+        }
+        catch (err) {
+            setError(err);
+        }
+        finally {
+            setLoading(false);
+            if (isInitialLoad) {
+                setTimeout(() => setRefreshing(false), 300);
+            }
+        }
+    }, [config.fetchResources]);
+    // Initial load
+    React.useEffect(() => {
+        fetchData(true);
+    }, [fetchData]);
+    // Auto-refresh
+    React.useEffect(() => {
+        if (config.autoRefresh?.enabled) {
+            const interval = setInterval(() => {
+                fetchData(false);
+            }, config.autoRefresh.interval || 3000);
+            return () => clearInterval(interval);
+        }
+    }, [config.autoRefresh, fetchData]);
+    // Animate refresh icon
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setRefreshIcon((prev) => (prev + 1) % 10);
+        }, 80);
+        return () => clearInterval(interval);
+    }, []);
+    // Filter resources based on search query
+    const filteredResources = React.useMemo(() => {
+        if (!config.searchConfig?.enabled || !searchQuery.trim()) {
+            return resources;
+        }
+        const query = searchQuery.toLowerCase();
+        return resources.filter((resource) => {
+            const fields = config.searchConfig.fields(resource);
+            return fields.some((field) => field.toLowerCase().includes(query));
+        });
+    }, [resources, searchQuery, config.searchConfig]);
+    // Pagination
+    const totalPages = Math.ceil(filteredResources.length / pageSize);
+    const startIndex = currentPage * pageSize;
+    const endIndex = Math.min(startIndex + pageSize, filteredResources.length);
+    const currentResources = filteredResources.slice(startIndex, endIndex);
+    // Ensure selected index is within bounds
+    React.useEffect(() => {
+        if (currentResources.length > 0 &&
+            selectedIndex >= currentResources.length) {
+            setSelectedIndex(Math.max(0, currentResources.length - 1));
+        }
+    }, [currentResources.length, selectedIndex]);
+    const selectedResource = currentResources[selectedIndex];
+    // Input handling
+    useInput((input, key) => {
+        // Handle Ctrl+C to force exit
+        if (key.ctrl && input === "c") {
+            process.stdout.write("\x1b[?1049l"); // Exit alternate screen
+            process.exit(130);
+        }
+        const pageResourcesCount = currentResources.length;
+        // Skip input handling when in search mode
+        if (searchMode) {
+            if (key.escape) {
+                setSearchMode(false);
+                setSearchQuery("");
+            }
+            return;
+        }
+        // Handle list view navigation
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < pageResourcesCount - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if ((input === "n" || key.rightArrow) &&
+            currentPage < totalPages - 1) {
+            setCurrentPage(currentPage + 1);
+            setSelectedIndex(0);
+        }
+        else if ((input === "p" || key.leftArrow) && currentPage > 0) {
+            setCurrentPage(currentPage - 1);
+            setSelectedIndex(0);
+        }
+        else if (key.return && selectedResource && config.onSelect) {
+            console.clear();
+            config.onSelect(selectedResource);
+        }
+        else if (input === "/" && config.searchConfig?.enabled) {
+            setSearchMode(true);
+        }
+        else if (key.escape) {
+            if (searchQuery) {
+                setSearchQuery("");
+                setCurrentPage(0);
+                setSelectedIndex(0);
+            }
+            else {
+                if (config.onBack) {
+                    config.onBack();
+                }
+                else if (config.onExit) {
+                    config.onExit();
+                }
+                else {
+                    inkExit();
+                }
+            }
+        }
+        else if (config.additionalShortcuts) {
+            // Handle additional shortcuts
+            const shortcut = config.additionalShortcuts.find((s) => s.key === input);
+            if (shortcut && selectedResource) {
+                shortcut.handler(selectedResource);
+            }
+        }
+    });
+    // Calculate stats
+    const stats = React.useMemo(() => {
+        if (!config.statusConfig || !config.getStatus) {
+            return null;
+        }
+        const successCount = resources.filter((r) => config.statusConfig.success.includes(config.getStatus(r))).length;
+        const warningCount = resources.filter((r) => config.statusConfig.warning.includes(config.getStatus(r))).length;
+        const errorCount = resources.filter((r) => config.statusConfig.error.includes(config.getStatus(r))).length;
+        return { successCount, warningCount, errorCount };
+    }, [resources, config.statusConfig, config.getStatus]);
+    // Loading state
+    if (loading) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: config.breadcrumbItems || [
+                        { label: config.resourceNamePlural, active: true },
+                    ] }), _jsx(SpinnerComponent, { message: `Loading ${config.resourceNamePlural.toLowerCase()}...` })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: config.breadcrumbItems || [
+                        { label: config.resourceNamePlural, active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Failed to list ${config.resourceNamePlural.toLowerCase()}`, error: error })] }));
+    }
+    // Empty state
+    if (!loading && !error && resources.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: config.breadcrumbItems || [
+                        { label: config.resourceNamePlural, active: true },
+                    ] }), config.emptyState && (_jsxs(Box, { children: [_jsx(Text, { color: colors.warning, children: figures.info }), _jsxs(Text, { children: [" ", config.emptyState.message] }), config.emptyState.command && (_jsx(Text, { color: colors.primary, bold: true, children: config.emptyState.command }))] }))] }));
+    }
+    // List view with data
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: config.breadcrumbItems || [
+                    { label: config.resourceNamePlural, active: true },
+                ] }), config.searchConfig?.enabled && (_jsxs(_Fragment, { children: [searchMode && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, children: [figures.pointerSmall, " Search:", " "] }), _jsx(TextInput, { value: searchQuery, onChange: setSearchQuery, placeholder: config.searchConfig.placeholder || "Type to search...", onSubmit: () => {
+                                    setSearchMode(false);
+                                    setCurrentPage(0);
+                                    setSelectedIndex(0);
+                                } }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Esc to cancel]"] })] })), !searchMode && searchQuery && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, children: [figures.info, " Searching for: "] }), _jsx(Text, { color: colors.warning, bold: true, children: searchQuery }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", currentResources.length, " results) [/ to edit, Esc to clear]"] })] }))] })), _jsx(Table, { data: currentResources, keyExtractor: config.keyExtractor, selectedIndex: selectedIndex, title: `${config.resourceNamePlural.toLowerCase()}[${searchQuery ? currentResources.length : resources.length}]`, columns: config.columns }, `table-${searchQuery}-${currentPage}`), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", resources.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] })] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", filteredResources.length] }), _jsx(Text, { children: " " }), refreshing ? (_jsx(Text, { color: colors.primary, children: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"][refreshIcon % 10] })) : (_jsx(Text, { color: colors.success, children: figures.circleFilled }))] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), totalPages > 1 && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), config.onSelect && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Enter] Details"] })), config.searchConfig?.enabled && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [/] Search"] })), config.additionalShortcuts &&
+                        config.additionalShortcuts.map((shortcut) => (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [", shortcut.key, "] ", shortcut.label] }, shortcut.key))), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Esc] Back"] })] })] }));
+}

package/dist/components/Spinner.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import Spinner from 'ink-spinner';
-export const SpinnerComponent = ({ message }) => {
-    return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" ", message] })] }));
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import { colors } from "../utils/theme.js";
+export const SpinnerComponent = ({ message, }) => {
+    return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: colors.primary, children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" ", message] })] }));
 };

package/dist/components/StatusBadge.js

@@ -1,44 +1,94 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from 'ink';
-import figures from 'figures';
+import { Text } from "ink";
+import figures from "figures";
+import { colors } from "../utils/theme.js";
 export const getStatusDisplay = (status) => {
     if (!status) {
-        return { icon: figures.questionMarkPrefix, color: 'gray', text: 'UNKNOWN' };
+        return {
+            icon: figures.questionMarkPrefix,
+            color: colors.textDim,
+            text: "UNKNOWN   ",
+        };
     }
     switch (status) {
-        case 'running':
-            return { icon: figures.circleFilled, color: 'green', text: 'RUNNING   ' };
-        case 'provisioning':
-            return { icon: figures.ellipsis, color: 'yellow', text: 'PROVISION ' };
-        case 'initializing':
-            return { icon: figures.ellipsis, color: 'cyan', text: 'INITIALIZE' };
-        case 'suspended':
-            return { icon: figures.circleDotted, color: 'yellow', text: 'SUSPENDED ' };
-        case 'failure':
-            return { icon: figures.cross, color: 'red', text: 'FAILED    ' };
-        case 'shutdown':
-            return { icon: figures.circle, color: 'gray', text: 'SHUTDOWN  ' };
-        case 'resuming':
-            return { icon: figures.ellipsis, color: 'cyan', text: 'RESUMING  ' };
-        case 'suspending':
-            return { icon: figures.ellipsis, color: 'yellow', text: 'SUSPENDING' };
-        case 'ready':
-            return { icon: figures.tick, color: 'green', text: 'READY     ' };
-        case 'build_complete':
-        case 'building_complete':
-            return { icon: figures.tick, color: 'green', text: 'COMPLETE  ' };
-        case 'building':
-            return { icon: figures.ellipsis, color: 'yellow', text: 'BUILDING  ' };
-        case 'build_failed':
-            return { icon: figures.cross, color: 'red', text: 'FAILED    ' };
+        case "running":
+            return {
+                icon: figures.circleFilled,
+                color: colors.success,
+                text: "RUNNING   ",
+            };
+        case "provisioning":
+            return {
+                icon: figures.ellipsis,
+                color: colors.warning,
+                text: "PROVISION ",
+            };
+        case "initializing":
+            return {
+                icon: figures.ellipsis,
+                color: colors.primary,
+                text: "INITIALIZE",
+            };
+        case "suspended":
+            return {
+                icon: figures.circleDotted,
+                color: colors.warning,
+                text: "SUSPENDED ",
+            };
+        case "failure":
+            return { icon: figures.cross, color: colors.error, text: "FAILED    " };
+        case "shutdown":
+            return {
+                icon: figures.circle,
+                color: colors.textDim,
+                text: "SHUTDOWN  ",
+            };
+        case "resuming":
+            return {
+                icon: figures.ellipsis,
+                color: colors.primary,
+                text: "RESUMING  ",
+            };
+        case "suspending":
+            return {
+                icon: figures.ellipsis,
+                color: colors.warning,
+                text: "SUSPENDING",
+            };
+        case "ready":
+            return {
+                icon: figures.bullet,
+                color: colors.success,
+                text: "READY     ",
+            };
+        case "build_complete":
+        case "building_complete":
+            return {
+                icon: figures.bullet,
+                color: colors.success,
+                text: "COMPLETE  ",
+            };
+        case "building":
+            return {
+                icon: figures.ellipsis,
+                color: colors.warning,
+                text: "BUILDING  ",
+            };
+        case "build_failed":
+        case "failed":
+            return { icon: figures.cross, color: colors.error, text: "FAILED    " };
         default:
             // Truncate and pad any unknown status to 10 chars to match column width
             const truncated = status.toUpperCase().slice(0, 10);
-            const padded = truncated.padEnd(10, ' ');
-            return { icon: figures.questionMarkPrefix, color: 'gray', text: padded };
+            const padded = truncated.padEnd(10, " ");
+            return {
+                icon: figures.questionMarkPrefix,
+                color: colors.textDim,
+                text: padded,
+            };
     }
 };
-export const StatusBadge = ({ status, showText = true }) => {
+export const StatusBadge = ({ status, showText = true, }) => {
     const statusDisplay = getStatusDisplay(status);
     return (_jsxs(_Fragment, { children: [_jsx(Text, { color: statusDisplay.color, children: statusDisplay.icon }), showText && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: statusDisplay.color, children: statusDisplay.text })] }))] }));
 };

package/dist/components/SuccessMessage.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } 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 SuccessMessage = ({ message, details, }) => {
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: "green", bold: true, children: [figures.tick, " ", message] }) }), details && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: details.split('\n').map((line, i) => (_jsx(Text, { color: "gray", dimColor: true, children: line }, i))) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: colors.success, bold: true, children: [figures.tick, " ", message] }) }), details && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: details.split("\n").map((line, i) => (_jsx(Text, { color: colors.textDim, dimColor: true, children: line }, i))) }))] }));
 };