@runloop/rl-cli 1.9.0 → 1.10.0

package/dist/components/DevboxDetailPage.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * DevboxDetailPage - Detail page for devboxes
  * Uses the generic ResourceDetailPage component with devbox-specific customizations
@@ -85,7 +85,9 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
     ];
     // Filter operations based on devbox status
     const getFilteredOperations = (devbox) => {
-        return allOperations.filter((op) => {
+        const hasTunnel = !!(devbox.tunnel && devbox.tunnel.tunnel_key);
+        return allOperations
+            .filter((op) => {
             const status = devbox.status;
             // When suspended: logs and resume
             if (status === "suspended") {
@@ -103,6 +105,20 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             }
             // Default for transitional states (provisioning, initializing)
             return op.key === "logs" || op.key === "delete";
+        })
+            .map((op) => {
+            // Dynamic tunnel label based on whether tunnel is active
+            if (op.key === "tunnel") {
+                return hasTunnel
+                    ? {
+                        ...op,
+                        label: "Tunnel (Active)",
+                        color: colors.success,
+                        icon: figures.tick,
+                    }
+                    : op;
+            }
+            return op;
         });
     };
     // Build detail sections for the devbox
@@ -228,6 +244,22 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
                 },
             });
         }
+        // Tunnel status - always show when running
+        if (devbox.tunnel && devbox.tunnel.tunnel_key) {
+            const tunnelKey = devbox.tunnel.tunnel_key;
+            const authMode = devbox.tunnel.auth_mode;
+            const tunnelUrl = `https://{port}-${tunnelKey}.tunnel.runloop.ai`;
+            detailFields.push({
+                label: "Tunnel",
+                value: (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.success, bold: true, children: [figures.tick, " Active"] }), _jsx(Text, { color: colors.textDim, children: " \u2022 " }), _jsx(Text, { color: colors.success, children: tunnelUrl }), authMode === "authenticated" && (_jsx(Text, { color: colors.warning, children: " (authenticated)" }))] })),
+            });
+        }
+        else if (devbox.status === "running") {
+            detailFields.push({
+                label: "Tunnel",
+                value: (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.cross, " Off"] })),
+            });
+        }
         // Initiator
         if (devbox.initiator_id) {
             detailFields.push({
@@ -355,6 +387,18 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             }
             lines.push(_jsx(Text, { children: " " }, "launch-space"));
         }
+        // Tunnel Information
+        if (devbox.tunnel && devbox.tunnel.tunnel_key) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Tunnel" }, "tunnel-title"));
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Tunnel Key: ", devbox.tunnel.tunnel_key] }, "tunnel-key"));
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Auth Mode: ", devbox.tunnel.auth_mode] }, "tunnel-auth"));
+            const tunnelUrl = `https://{port}-${devbox.tunnel.tunnel_key}.tunnel.runloop.ai`;
+            lines.push(_jsxs(Text, { color: colors.success, children: [" ", "Tunnel URL: ", tunnelUrl] }, "tunnel-url"));
+            if (devbox.tunnel.auth_token) {
+                lines.push(_jsxs(Text, { color: colors.warning, children: [" ", "Auth Token: ", devbox.tunnel.auth_token] }, "tunnel-token"));
+            }
+            lines.push(_jsx(Text, { children: " " }, "tunnel-space"));
+        }
         // Source
         if (devbox.blueprint_id || devbox.snapshot_id) {
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Source" }, "source-title"));

package/dist/components/GatewayConfigCreatePage.js

@@ -11,6 +11,7 @@ import { NavigationTips } from "./NavigationTips.js";
 import { FormTextInput, FormSelect, FormActionButton, useFormSelectNavigation, } from "./form/index.js";
 import { colors } from "../utils/theme.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { validateGatewayConfig } from "../utils/gatewayConfigValidation.js";
 const authTypes = ["bearer", "header"];
 export const GatewayConfigCreatePage = ({ onBack, onCreate, initialConfig, }) => {
     const isEditing = !!initialConfig?.id;
@@ -36,13 +37,20 @@ export const GatewayConfigCreatePage = ({ onBack, onCreate, initialConfig, }) =>
     const fields = [
         {
             key: "create",
-            label: isEditing ? "Update Gateway Config" : "Create Gateway Config",
+            label: isEditing
+                ? "Update AI Gateway Config"
+                : "Create AI Gateway Config",
             type: "action",
         },
-        { key: "name", label: "Name", type: "text", placeholder: "my-gateway" },
+        {
+            key: "name",
+            label: "Name (required)",
+            type: "text",
+            placeholder: "my-gateway",
+        },
         {
             key: "endpoint",
-            label: "Endpoint URL",
+            label: "Endpoint URL (required)",
             type: "text",
             placeholder: "https://api.example.com",
         },
@@ -156,35 +164,34 @@ export const GatewayConfigCreatePage = ({ onBack, onCreate, initialConfig, }) =>
         }
     }, { isActive: true });
     const handleCreate = async () => {
-        // Validate required fields
-        if (!formData.name.trim()) {
-            setError(new Error("Name is required"));
-            return;
-        }
-        if (!formData.endpoint.trim()) {
-            setError(new Error("Endpoint URL is required"));
-            return;
-        }
-        if (formData.auth_type === "header" && !formData.auth_key.trim()) {
-            setError(new Error("Auth header key is required for header auth type"));
+        // Validate using shared validation
+        const validation = validateGatewayConfig({
+            name: formData.name,
+            endpoint: formData.endpoint,
+            authType: formData.auth_type,
+            authKey: formData.auth_key,
+        }, { requireName: true, requireEndpoint: true });
+        if (!validation.valid) {
+            setError(new Error(validation.errors.join("\n")));
             return;
         }
+        const { sanitized } = validation;
         setCreating(true);
         setError(null);
         try {
             const client = getClient();
             const authMechanism = {
-                type: formData.auth_type,
+                type: sanitized.authType,
             };
-            if (formData.auth_type === "header" && formData.auth_key.trim()) {
-                authMechanism.key = formData.auth_key.trim();
+            if (sanitized.authType === "header" && sanitized.authKey) {
+                authMechanism.key = sanitized.authKey;
             }
             let config;
             if (isEditing && initialConfig?.id) {
                 // Update existing config
                 config = await client.gatewayConfigs.update(initialConfig.id, {
-                    name: formData.name.trim(),
-                    endpoint: formData.endpoint.trim(),
+                    name: sanitized.name,
+                    endpoint: sanitized.endpoint,
                     auth_mechanism: authMechanism,
                     description: formData.description.trim() || undefined,
                 });
@@ -192,8 +199,8 @@ export const GatewayConfigCreatePage = ({ onBack, onCreate, initialConfig, }) =>
             else {
                 // Create new config
                 config = await client.gatewayConfigs.create({
-                    name: formData.name.trim(),
-                    endpoint: formData.endpoint.trim(),
+                    name: sanitized.name,
+                    endpoint: sanitized.endpoint,
                     auth_mechanism: authMechanism,
                     description: formData.description.trim() || undefined,
                 });
@@ -210,16 +217,16 @@ export const GatewayConfigCreatePage = ({ onBack, onCreate, initialConfig, }) =>
     // Result screen
     if (result) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: "Gateway Configs" },
+                        { label: "AI Gateway Configs" },
                         { label: isEditing ? "Update" : "Create", active: true },
-                    ] }), _jsx(SuccessMessage, { message: `Gateway config ${isEditing ? "updated" : "created"} successfully!` }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: result.id })] }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name: ", result.name || "(none)"] }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Endpoint: ", result.endpoint] }) })] }), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "Return to list" }] })] }));
+                    ] }), _jsx(SuccessMessage, { message: `AI gateway config ${isEditing ? "updated" : "created"} successfully!` }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: result.id })] }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name: ", result.name || "(none)"] }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Endpoint: ", result.endpoint] }) })] }), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "Return to list" }] })] }));
     }
     // Error screen
     if (error) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: "Gateway Configs" },
+                        { label: "AI Gateway Configs" },
                         { label: isEditing ? "Update" : "Create", active: true },
-                    ] }), _jsx(ErrorMessage, { message: `Failed to ${isEditing ? "update" : "create"} gateway config`, error: error }), _jsx(NavigationTips, { tips: [
+                    ] }), _jsx(ErrorMessage, { message: `Failed to ${isEditing ? "update" : "create"} AI gateway config`, error: error }), _jsx(NavigationTips, { tips: [
                         { key: "Enter/r", label: "Retry" },
                         { key: "q/esc", label: "Cancel" },
                     ] })] }));
@@ -227,13 +234,13 @@ export const GatewayConfigCreatePage = ({ onBack, onCreate, initialConfig, }) =>
     // Creating screen
     if (creating) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: "Gateway Configs" },
+                        { label: "AI Gateway Configs" },
                         { label: isEditing ? "Update" : "Create", active: true },
-                    ] }), _jsx(SpinnerComponent, { message: `${isEditing ? "Updating" : "Creating"} gateway config...` })] }));
+                    ] }), _jsx(SpinnerComponent, { message: `${isEditing ? "Updating" : "Creating"} AI gateway config...` })] }));
     }
     // Form screen
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                    { label: "Gateway Configs" },
+                    { label: "AI Gateway Configs" },
                     { label: isEditing ? "Update" : "Create", active: true },
                 ] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field) => {
                     const isActive = currentField === field.key;

package/dist/components/ResourcePicker.js

@@ -31,14 +31,22 @@ export function ResourcePicker({ config, onSelect, onCancel, initialSelected = [
         onSearchClear: () => setSelectedIndex(0),
     });
     // Calculate overhead for viewport height
-    const overhead = 15 + search.getSearchOverhead();
+    // Matches list pages: breadcrumb(4) + table chrome(4) + stats(2) + nav tips(2) + buffer(1) = 13
+    const overhead = 13 + search.getSearchOverhead();
     const { viewportHeight, terminalWidth } = useViewportHeight({
         overhead,
         minHeight: 5,
     });
     const PAGE_SIZE = viewportHeight;
-    // terminalWidth available from viewport hook for column calculations
-    void terminalWidth;
+    // Resolve columns - support both static array and function that receives terminalWidth
+    const resolvedColumns = React.useMemo(() => {
+        if (!config.columns)
+            return undefined;
+        if (typeof config.columns === "function") {
+            return config.columns(terminalWidth);
+        }
+        return config.columns;
+    }, [config.columns, terminalWidth]);
     // Store fetchPage in a ref to avoid dependency issues
     const fetchPageRef = React.useRef(config.fetchPage);
     React.useEffect(() => {
@@ -154,6 +162,9 @@ export function ResourcePicker({ config, onSelect, onCancel, initialSelected = [
                 handleConfirm();
             }
         }
+        else if (input === "c" && config.onCreateNew) {
+            config.onCreateNew();
+        }
         else if (input === "/") {
             search.enterSearchMode();
         }
@@ -178,7 +189,7 @@ export function ResourcePicker({ config, onSelect, onCancel, initialSelected = [
     // Calculate pagination info for display
     const startIndex = currentPage * PAGE_SIZE;
     const endIndex = Math.min(startIndex + PAGE_SIZE, totalCount);
-    return (_jsxs(_Fragment, { children: [config.breadcrumbItems && _jsx(Breadcrumb, { items: config.breadcrumbItems }), _jsx(SearchBar, { searchMode: search.searchMode, searchQuery: search.searchQuery, submittedSearchQuery: search.submittedSearchQuery, resultCount: totalCount, onSearchChange: search.setSearchQuery, onSearchSubmit: search.submitSearch, placeholder: config.searchPlaceholder || "Search..." }), config.columns ? (_jsx(Table, { data: items, keyExtractor: config.getItemId, selectedIndex: selectedIndex, title: `${config.title.toLowerCase()}[${totalCount}]${config.mode === "multi" ? ` (${selectedIds.size} selected)` : ""}`, columns: config.mode === "multi"
+    return (_jsxs(_Fragment, { children: [config.breadcrumbItems && _jsx(Breadcrumb, { items: config.breadcrumbItems }), _jsx(SearchBar, { searchMode: search.searchMode, searchQuery: search.searchQuery, submittedSearchQuery: search.submittedSearchQuery, resultCount: totalCount, onSearchChange: search.setSearchQuery, onSearchSubmit: search.submitSearch, placeholder: config.searchPlaceholder || "Search..." }), resolvedColumns ? (_jsx(Table, { data: items, keyExtractor: config.getItemId, selectedIndex: selectedIndex, title: `${config.title.toLowerCase()}[${totalCount}]${config.mode === "multi" ? ` (${selectedIds.size} selected)` : ""}`, columns: config.mode === "multi"
                     ? [
                         // Prepend checkbox column for multi-select mode
                         createComponentColumn("_selection", "", (row) => {
@@ -187,11 +198,11 @@ export function ResourcePicker({ config, onSelect, onCancel, initialSelected = [
                                         ? figures.checkboxOn
                                         : figures.checkboxOff, " "] }));
                         }, { width: 3 }),
-                        ...config.columns,
+                        ...resolvedColumns,
                     ]
-                    : config.columns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " ", config.emptyMessage || "No items found"] }) })) : (
+                    : resolvedColumns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " ", config.emptyMessage || "No items found", config.onCreateNew ? " Press [c] to create one." : ""] }) })) : (
             // Fallback simple list view if no columns provided
-            _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, paddingY: 0, children: items.length === 0 ? (_jsx(Box, { paddingY: 1, children: _jsxs(Text, { color: colors.textDim, children: [figures.info, " ", config.emptyMessage || "No items found"] }) })) : (items.map((item, index) => {
+            _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, paddingY: 0, children: items.length === 0 ? (_jsx(Box, { paddingY: 1, children: _jsxs(Text, { color: colors.textDim, children: [figures.info, " ", config.emptyMessage || "No items found", config.onCreateNew ? " Press [c] to create one." : ""] }) })) : (items.map((item, index) => {
                     const isHighlighted = index === selectedIndex;
                     const id = config.getItemId(item);
                     const label = config.getItemLabel(item);
@@ -214,6 +225,9 @@ export function ResourcePicker({ config, onSelect, onCancel, initialSelected = [
                         label: config.mode === "single" ? "Select" : "Confirm",
                         condition: canConfirm,
                     },
+                    ...(config.onCreateNew
+                        ? [{ key: "c", label: config.createNewLabel || "Create new" }]
+                        : []),
                     { key: "/", label: "Search" },
                     { key: "Esc", label: "Cancel" },
                 ] })] }));

package/dist/components/SecretCreatePage.js

@@ -14,10 +14,11 @@ import { NavigationTips } from "./NavigationTips.js";
 import { FormTextInput, FormActionButton } from "./form/index.js";
 import { colors } from "../utils/theme.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
-export const SecretCreatePage = ({ onBack, onCreate, }) => {
+export const SecretCreatePage = ({ onBack, onCreate, initialSecret, }) => {
+    const isUpdating = !!initialSecret;
     const [currentField, setCurrentField] = React.useState("submit");
     const [formData, setFormData] = React.useState({
-        name: "",
+        name: initialSecret?.name || "",
         value: "",
     });
     const [submitting, setSubmitting] = React.useState(false);
@@ -25,9 +26,17 @@ export const SecretCreatePage = ({ onBack, onCreate, }) => {
     const [error, setError] = React.useState(null);
     const [validationError, setValidationError] = React.useState(null);
     const fields = [
-        { key: "submit", label: "Create Secret", type: "action" },
+        {
+            key: "submit",
+            label: isUpdating ? "Update Secret" : "Create Secret",
+            type: "action",
+        },
         { key: "name", label: "Name (required)", type: "text" },
-        { key: "value", label: "Value (required)", type: "password" },
+        {
+            key: "value",
+            label: isUpdating ? "New Value (required)" : "Value (required)",
+            type: "password",
+        },
     ];
     const currentFieldIndex = fields.findIndex((f) => f.key === currentField);
     // Handle Ctrl+C to exit
@@ -78,13 +87,30 @@ export const SecretCreatePage = ({ onBack, onCreate, }) => {
             return;
         }
         // Navigation between fields (up/down arrows and tab/shift+tab)
-        if ((key.upArrow || (key.tab && key.shift)) && currentFieldIndex > 0) {
-            setCurrentField(fields[currentFieldIndex - 1].key);
+        // In update mode, skip the name field (it's read-only)
+        const getNextFieldIndex = (direction) => {
+            let nextIdx = direction === "up" ? currentFieldIndex - 1 : currentFieldIndex + 1;
+            while (nextIdx >= 0 && nextIdx < fields.length) {
+                if (isUpdating && fields[nextIdx].key === "name") {
+                    nextIdx = direction === "up" ? nextIdx - 1 : nextIdx + 1;
+                    continue;
+                }
+                return nextIdx;
+            }
+            return null;
+        };
+        if (key.upArrow || (key.tab && key.shift)) {
+            const nextIdx = getNextFieldIndex("up");
+            if (nextIdx !== null) {
+                setCurrentField(fields[nextIdx].key);
+            }
             return;
         }
-        if ((key.downArrow || (key.tab && !key.shift)) &&
-            currentFieldIndex < fields.length - 1) {
-            setCurrentField(fields[currentFieldIndex + 1].key);
+        if (key.downArrow || (key.tab && !key.shift)) {
+            const nextIdx = getNextFieldIndex("down");
+            if (nextIdx !== null) {
+                setCurrentField(fields[nextIdx].key);
+            }
             return;
         }
     });
@@ -105,10 +131,19 @@ export const SecretCreatePage = ({ onBack, onCreate, }) => {
         setValidationError(null);
         try {
             const client = getClient();
-            const secret = await client.secrets.create({
-                name: formData.name.trim(),
-                value: formData.value,
-            });
+            let secret;
+            if (isUpdating) {
+                // Update existing secret by name
+                secret = (await client.secrets.update(formData.name.trim(), {
+                    value: formData.value,
+                }));
+            }
+            else {
+                secret = (await client.secrets.create({
+                    name: formData.name.trim(),
+                    value: formData.value,
+                }));
+            }
             setResult(secret);
         }
         catch (err) {
@@ -123,16 +158,21 @@ export const SecretCreatePage = ({ onBack, onCreate, }) => {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                         { label: "Settings" },
                         { label: "Secrets" },
-                        { label: "Create", active: true },
-                    ] }), _jsx(SuccessMessage, { message: "Secret created successfully!" }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: result.id })] }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name: ", result.name] }) })] }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsxs(Text, { color: colors.info, children: [figures.info, " The secret value has been securely stored and cannot be retrieved."] }) }), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "View secret details" }] })] }));
+                        { label: isUpdating ? "Update" : "Create", active: true },
+                    ] }), _jsx(SuccessMessage, { message: `Secret ${isUpdating ? "updated" : "created"} successfully!` }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: result.id })] }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name: ", result.name] }) })] }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsxs(Text, { color: colors.info, children: [figures.info, " The secret value has been securely stored and cannot be retrieved."] }) }), _jsx(NavigationTips, { tips: [
+                        {
+                            key: "Enter/q/esc",
+                            label: isUpdating ? "Return to details" : "View secret details",
+                        },
+                    ] })] }));
     }
     // Error screen
     if (error) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                         { label: "Settings" },
                         { label: "Secrets" },
-                        { label: "Create", active: true },
-                    ] }), _jsx(ErrorMessage, { message: "Failed to create secret", error: error }), _jsx(NavigationTips, { tips: [
+                        { label: isUpdating ? "Update" : "Create", active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Failed to ${isUpdating ? "update" : "create"} secret`, error: error }), _jsx(NavigationTips, { tips: [
                         { key: "Enter/r", label: "Retry" },
                         { key: "q/esc", label: "Cancel" },
                     ] })] }));
@@ -142,20 +182,26 @@ export const SecretCreatePage = ({ onBack, onCreate, }) => {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                         { label: "Settings" },
                         { label: "Secrets" },
-                        { label: "Create", active: true },
-                    ] }), _jsx(SpinnerComponent, { message: "Creating secret..." })] }));
+                        { label: isUpdating ? "Update" : "Create", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: `${isUpdating ? "Updating" : "Creating"} secret...` })] }));
     }
     // Form screen
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                     { label: "Settings" },
                     { label: "Secrets" },
-                    { label: "Create", active: true },
-                ] }), _jsx(Box, { borderStyle: "round", borderColor: colors.info, paddingX: 1, paddingY: 0, marginBottom: 1, children: _jsxs(Text, { color: colors.info, children: [figures.info, " ", _jsx(Text, { bold: true, children: "Note:" }), " Secret values are", " ", _jsx(Text, { bold: true, children: "write-only" }), ". Once created, the value cannot be retrieved or viewed. To change a secret, delete it and create a new one."] }) }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field) => {
+                    { label: isUpdating ? "Update" : "Create", active: true },
+                ] }), _jsx(Box, { borderStyle: "round", borderColor: colors.info, paddingX: 1, paddingY: 0, marginBottom: 1, children: _jsxs(Text, { color: colors.info, children: [figures.info, " ", _jsx(Text, { bold: true, children: "Note:" }), " Secret values are", " ", _jsx(Text, { bold: true, children: "write-only" }), ". Once stored, the value cannot be retrieved or viewed.", " ", isUpdating
+                            ? "Enter a new value to replace the current one."
+                            : "You can update a secret's value later."] }) }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field) => {
                     const isActive = currentField === field.key;
                     if (field.type === "action") {
-                        return (_jsx(FormActionButton, { label: field.label, isActive: isActive, hint: "[Enter to create]" }, field.key));
+                        return (_jsx(FormActionButton, { label: field.label, isActive: isActive, hint: `[Enter to ${isUpdating ? "update" : "create"}]` }, field.key));
                     }
                     if (field.type === "text") {
+                        // In update mode, name is read-only
+                        if (isUpdating && field.key === "name") {
+                            return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: colors.textDim, children: ["  ", field.label, ":", " "] }), _jsx(Text, { color: colors.text, bold: true, children: formData.name })] }, field.key));
+                        }
                         const value = formData[field.key];
                         const hasError = field.key === "name" && validationError === "Name is required";
                         return (_jsx(FormTextInput, { label: field.label, value: value, onChange: (newValue) => {
@@ -177,7 +223,7 @@ export const SecretCreatePage = ({ onBack, onCreate, }) => {
                     }
                     return null;
                 }) }), _jsx(NavigationTips, { showArrows: true, tips: [
-                    { key: "Enter", label: "Create" },
+                    { key: "Enter", label: isUpdating ? "Update" : "Create" },
                     { key: "q", label: "Cancel" },
                 ] })] }));
 };

package/dist/components/SettingsMenu.js

@@ -16,7 +16,7 @@ const settingsMenuItems = [
     },
     {
         key: "gateway-configs",
-        label: "Gateway Configs",
+        label: "AI Gateway Configs",
         description: "Configure API credential proxying",
         icon: "⬡",
         color: colors.success,

package/dist/screens/GatewayConfigDetailScreen.js

@@ -61,23 +61,23 @@ export function GatewayConfigDetailScreen({ gatewayConfigId, }) {
     // Show loading state while fetching or before fetch starts
     if (!config && gatewayConfigId && !error) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: "Gateway Configs" },
+                        { label: "AI Gateway Configs" },
                         { label: "Loading...", active: true },
-                    ] }), _jsx(SpinnerComponent, { message: "Loading gateway config details..." })] }));
+                    ] }), _jsx(SpinnerComponent, { message: "Loading AI gateway config details..." })] }));
     }
     // Show error state if fetch failed
     if (error && !config) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: "Gateway Configs" },
+                        { label: "AI Gateway Configs" },
                         { label: "Error", active: true },
-                    ] }), _jsx(ErrorMessage, { message: "Failed to load gateway config details", error: error })] }));
+                    ] }), _jsx(ErrorMessage, { message: "Failed to load AI gateway config details", error: error })] }));
     }
     // Show error if no config found
     if (!config) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: "Gateway Configs" },
+                        { label: "AI Gateway Configs" },
                         { label: "Not Found", active: true },
-                    ] }), _jsx(ErrorMessage, { message: `Gateway config ${gatewayConfigId || "unknown"} not found`, error: new Error("Gateway config not found") })] }));
+                    ] }), _jsx(ErrorMessage, { message: `AI gateway config ${gatewayConfigId || "unknown"} not found`, error: new Error("AI gateway config not found") })] }));
     }
     // Build detail sections
     const detailSections = [];
@@ -135,14 +135,14 @@ export function GatewayConfigDetailScreen({ gatewayConfigId, }) {
     const operations = [
         {
             key: "edit",
-            label: "Edit Gateway Config",
+            label: "Edit AI Gateway Config",
             color: colors.warning,
             icon: figures.pointer,
             shortcut: "e",
         },
         {
             key: "delete",
-            label: "Delete Gateway Config",
+            label: "Delete AI Gateway Config",
             color: colors.error,
             icon: figures.cross,
             shortcut: "d",
@@ -179,7 +179,7 @@ export function GatewayConfigDetailScreen({ gatewayConfigId, }) {
     const buildDetailLines = (gc) => {
         const lines = [];
         // Core Information
-        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Gateway Config Details" }, "core-title"));
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "AI Gateway Config Details" }, "core-title"));
         lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", gc.id] }, "core-id"));
         lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", gc.name] }, "core-name"));
         if (gc.description) {
@@ -218,8 +218,8 @@ export function GatewayConfigDetailScreen({ gatewayConfigId, }) {
     }
     // Show delete confirmation
     if (showDeleteConfirm && config) {
-        return (_jsx(ConfirmationPrompt, { title: "Delete Gateway Config", message: `Are you sure you want to delete "${config.name || config.id}"?`, details: "This action cannot be undone. Any devboxes using this gateway config will no longer have access to it.", breadcrumbItems: [
-                { label: "Gateway Configs" },
+        return (_jsx(ConfirmationPrompt, { title: "Delete AI Gateway Config", message: `Are you sure you want to delete "${config.name || config.id}"?`, details: "This action cannot be undone. Any devboxes using this AI gateway config will no longer have access to it.", breadcrumbItems: [
+                { label: "AI Gateway Configs" },
                 { label: config.name || config.id },
                 { label: "Delete", active: true },
             ], onConfirm: executeDelete, onCancel: () => setShowDeleteConfirm(false) }));
@@ -227,10 +227,10 @@ export function GatewayConfigDetailScreen({ gatewayConfigId, }) {
     // Show deleting state
     if (deleting) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: "Gateway Configs" },
+                        { label: "AI Gateway Configs" },
                         { label: config.name || config.id },
                         { label: "Deleting...", active: true },
-                    ] }), _jsx(SpinnerComponent, { message: "Deleting gateway config..." })] }));
+                    ] }), _jsx(SpinnerComponent, { message: "Deleting AI gateway config..." })] }));
     }
-    return (_jsx(ResourceDetailPage, { resource: config, resourceType: "Gateway Configs", getDisplayName: (gc) => gc.name || gc.id, getId: (gc) => gc.id, getStatus: () => "active", detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines }));
+    return (_jsx(ResourceDetailPage, { resource: config, resourceType: "AI Gateway Configs", getDisplayName: (gc) => gc.name || gc.id, getId: (gc) => gc.id, getStatus: () => "active", detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines }));
 }

package/dist/screens/SecretDetailScreen.js

@@ -13,6 +13,7 @@ import { SpinnerComponent } from "../components/Spinner.js";
 import { ErrorMessage } from "../components/ErrorMessage.js";
 import { Breadcrumb } from "../components/Breadcrumb.js";
 import { ConfirmationPrompt } from "../components/ConfirmationPrompt.js";
+import { SecretCreatePage } from "../components/SecretCreatePage.js";
 import { colors } from "../utils/theme.js";
 export function SecretDetailScreen({ secretId }) {
     const { goBack } = useNavigation();
@@ -21,6 +22,7 @@ export function SecretDetailScreen({ secretId }) {
     const [secret, setSecret] = React.useState(null);
     const [deleting, setDeleting] = React.useState(false);
     const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+    const [showUpdateForm, setShowUpdateForm] = React.useState(false);
     // Fetch secret from API
     React.useEffect(() => {
         if (secretId && !loading && !secret) {
@@ -108,8 +110,15 @@ export function SecretDetailScreen({ secretId }) {
             },
         ],
     });
-    // Operations available for secrets (only delete - secrets are immutable)
+    // Operations available for secrets
     const operations = [
+        {
+            key: "update",
+            label: "Update Value",
+            color: colors.warning,
+            icon: figures.pointer,
+            shortcut: "u",
+        },
         {
             key: "delete",
             label: "Delete Secret",
@@ -121,6 +130,9 @@ export function SecretDetailScreen({ secretId }) {
     // Handle operation selection
     const handleOperation = async (operation, _resource) => {
         switch (operation) {
+            case "update":
+                setShowUpdateForm(true);
+                break;
             case "delete":
                 // Show confirmation dialog
                 setShowDeleteConfirm(true);
@@ -160,7 +172,7 @@ export function SecretDetailScreen({ secretId }) {
         // Security Notice
         lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Security Notice" }, "security-title"));
         lines.push(_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "Secret values are write-only and cannot be retrieved."] }, "security-notice"));
-        lines.push(_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "To change a secret, delete it and create a new one with the same name."] }, "security-notice2"));
+        lines.push(_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "Use the Update Value operation to change a secret's value."] }, "security-notice2"));
         lines.push(_jsx(Text, { children: " " }, "security-space"));
         // Raw JSON (without value)
         lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
@@ -176,6 +188,18 @@ export function SecretDetailScreen({ secretId }) {
         });
         return lines;
     };
+    // Show update form
+    if (showUpdateForm && secret) {
+        return (_jsx(SecretCreatePage, { onBack: () => setShowUpdateForm(false), onCreate: (updatedSecret) => {
+                // Refresh the secret data
+                setSecret({
+                    ...secret,
+                    ...updatedSecret,
+                    update_time_ms: Date.now(),
+                });
+                setShowUpdateForm(false);
+            }, initialSecret: { id: secret.id, name: secret.name } }));
+    }
     // Show delete confirmation
     if (showDeleteConfirm && secret) {
         return (_jsx(ConfirmationPrompt, { title: "Delete Secret", message: `Are you sure you want to delete "${secret.name}"?`, details: "This action cannot be undone. Any devboxes using this secret will no longer have access to it.", breadcrumbItems: [