@runloop/rl-cli 1.9.0 → 1.10.0

package/README.md

@@ -92,8 +92,8 @@ rli devbox suspend <id>                  # Suspend a devbox
 rli devbox resume <id>                   # Resume a suspended devbox
 rli devbox shutdown <id>                 # Shutdown a devbox
 rli devbox ssh <id>                      # SSH into a devbox
-rli devbox scp <id> <src> <dst>          # Copy files to/from a devbox using scp
-rli devbox rsync <id> <src> <dst>        # Sync files to/from a devbox using rsync
+rli devbox scp <src> <dst>               # Copy files to/from a devbox using scp...
+rli devbox rsync <src> <dst>             # Sync files to/from a devbox using rsy...
 rli devbox tunnel <id> <ports>           # Create a port-forwarding tunnel to a ...
 rli devbox read <id>                     # Read a file from a devbox using the API
 rli devbox write <id>                    # Write a file to a devbox using the API

package/dist/commands/devbox/list.js

@@ -304,8 +304,10 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
     const startIndex = currentPage * PAGE_SIZE;
     const endIndex = startIndex + devboxes.length;
     // Filter operations based on devbox status
+    const hasTunnel = !!(selectedDevbox?.tunnel && selectedDevbox.tunnel.tunnel_key);
     const operations = selectedDevbox
-        ? allOperations.filter((op) => {
+        ? allOperations
+            .filter((op) => {
             const devboxStatus = selectedDevbox.status;
             if (devboxStatus === "suspended") {
                 return op.key === "resume" || op.key === "logs";
@@ -319,6 +321,20 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
                 return op.key !== "resume";
             }
             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;
         })
         : allOperations;
     const closePopup = React.useCallback(() => {

package/dist/commands/devbox/rsync.js

@@ -1,62 +1,90 @@
 /**
  * Rsync files to/from devbox command
+ *
+ * Supports standard rsync-like syntax where the devbox ID (dbx_*) is used as a hostname:
+ *   rli devbox rsync dbx_abc123:/remote/path ./local/path          # download
+ *   rli devbox rsync ./local/path dbx_abc123:/remote/path          # upload
+ *   rli devbox rsync root@dbx_abc123:/remote/path ./local/path     # explicit user
+ *
+ * If no user is specified for a remote path, the devbox's configured user is used.
+ * Paths without a dbx_ hostname are treated as local paths.
  */
-import { exec } from "child_process";
+import { execFile } from "child_process";
 import { promisify } from "util";
-import { getClient } from "../../utils/client.js";
 import { output, outputError } from "../../utils/output.js";
-import { getSSHKey, getProxyCommand, checkSSHTools } from "../../utils/ssh.js";
-const execAsync = promisify(exec);
-export async function rsyncFiles(devboxId, options) {
+import { getProxyCommand, checkSSHTools } from "../../utils/ssh.js";
+import { parseSCPPath, resolveRemote } from "./scp.js";
+const execFileAsync = promisify(execFile);
+/**
+ * Build the rsync command for a single-remote transfer (local <-> devbox).
+ */
+export function buildRsyncCommand(opts) {
+    // Rsync re-splits the -e value on whitespace internally, so the
+    // ProxyCommand (which contains spaces) must be single-quoted.
+    const sshTransport = `ssh -i ${opts.sshInfo.keyfilePath} -o 'ProxyCommand=${opts.proxyCommand}' -o StrictHostKeyChecking=no`;
+    const rsyncCommand = [
+        "rsync",
+        "-vrz", // v: verbose, r: recursive, z: compress
+        "-e",
+        sshTransport,
+    ];
+    if (opts.rsyncOptions) {
+        rsyncCommand.push(...opts.rsyncOptions.split(" "));
+    }
+    // Build src argument
+    if (opts.parsedSrc.isRemote) {
+        const user = opts.parsedSrc.user || opts.defaultUser;
+        rsyncCommand.push(`${user}@${opts.sshInfo.url}:${opts.parsedSrc.path}`);
+    }
+    else {
+        rsyncCommand.push(opts.parsedSrc.path);
+    }
+    // Build dst argument
+    if (opts.parsedDst.isRemote) {
+        const user = opts.parsedDst.user || opts.defaultUser;
+        rsyncCommand.push(`${user}@${opts.sshInfo.url}:${opts.parsedDst.path}`);
+    }
+    else {
+        rsyncCommand.push(opts.parsedDst.path);
+    }
+    return rsyncCommand;
+}
+export async function rsyncFiles(src, dst, options) {
     try {
         // Check if SSH tools are available
         const sshToolsAvailable = await checkSSHTools();
         if (!sshToolsAvailable) {
             outputError("SSH tools (ssh, rsync, openssl) are not available on this system");
         }
-        const client = getClient();
-        // Get devbox details to determine user
-        const devbox = await client.devboxes.retrieve(devboxId);
-        const user = devbox.launch_parameters?.user_parameters?.username || "user";
-        // Get SSH key
-        const sshInfo = await getSSHKey(devboxId);
-        if (!sshInfo) {
-            outputError("Failed to create SSH key");
-        }
-        const proxyCommand = getProxyCommand();
-        const sshOptions = `-i ${sshInfo.keyfilePath} -o ProxyCommand='${proxyCommand}' -o StrictHostKeyChecking=no`;
-        const rsyncCommand = [
-            "rsync",
-            "-vrz", // v: verbose, r: recursive, z: compress
-            "-e",
-            `"ssh ${sshOptions}"`,
-        ];
-        if (options.rsyncOptions) {
-            rsyncCommand.push(...options.rsyncOptions.split(" "));
-        }
-        // Handle remote paths (starting with :)
-        if (options.src.startsWith(":")) {
-            rsyncCommand.push(`${user}@${sshInfo.url}:${options.src.slice(1)}`);
-            rsyncCommand.push(options.dst);
+        const parsedSrc = parseSCPPath(src);
+        const parsedDst = parseSCPPath(dst);
+        if (!parsedSrc.isRemote && !parsedDst.isRemote) {
+            outputError("At least one of src or dst must be a remote devbox path (e.g. dbx_<id>:/path)");
         }
-        else {
-            rsyncCommand.push(options.src);
-            if (options.dst.startsWith(":")) {
-                rsyncCommand.push(`${user}@${sshInfo.url}:${options.dst.slice(1)}`);
-            }
-            else {
-                rsyncCommand.push(options.dst);
-            }
+        if (parsedSrc.isRemote && parsedDst.isRemote) {
+            outputError("Devbox-to-devbox rsync is not supported. Only one side can be a remote devbox path.");
         }
-        await execAsync(rsyncCommand.join(" "));
+        const devboxId = parsedSrc.isRemote ? parsedSrc.host : parsedDst.host;
+        const remote = await resolveRemote(devboxId);
+        const proxyCommand = getProxyCommand();
+        const rsyncCommand = buildRsyncCommand({
+            sshInfo: remote.sshInfo,
+            proxyCommand,
+            parsedSrc,
+            parsedDst,
+            defaultUser: remote.defaultUser,
+            rsyncOptions: options.rsyncOptions,
+        });
+        const [cmd, ...args] = rsyncCommand;
+        await execFileAsync(cmd, args);
         // Default: just output the destination for easy scripting
         if (!options.output || options.output === "text") {
-            console.log(options.dst);
+            console.log(dst);
         }
         else {
             output({
-                source: options.src,
-                destination: options.dst,
+                source: src,
+                destination: dst,
             }, { format: options.output, defaultFormat: "json" });
         }
     }

package/dist/commands/devbox/scp.js

@@ -1,64 +1,205 @@
 /**
  * SCP files to/from devbox command
+ *
+ * Supports standard SCP-like syntax where the devbox ID (dbx_*) is used as a hostname:
+ *   rli devbox scp dbx_abc123:/remote/path ./local/path          # download
+ *   rli devbox scp ./local/path dbx_abc123:/remote/path          # upload
+ *   rli devbox scp root@dbx_abc123:/remote/path ./local/path     # explicit user
+ *   rli devbox scp dbx_src:/file dbx_dst:/file                   # devbox-to-devbox
+ *
+ * If no user is specified for a remote path, the devbox's configured user is used.
+ * Paths without a dbx_ hostname are treated as local paths.
+ *
+ * Devbox-to-devbox transfers use scp -3 to route data through the local machine,
+ * with a temporary SSH config so each devbox uses its own key.
  */
-import { exec } from "child_process";
+import { execFile } from "child_process";
 import { promisify } from "util";
+import { writeFile, unlink } from "fs/promises";
+import { join } from "path";
+import { tmpdir } from "os";
+import { randomUUID } from "crypto";
 import { getClient } from "../../utils/client.js";
 import { output, outputError } from "../../utils/output.js";
-import { getSSHKey, getProxyCommand, checkSSHTools } from "../../utils/ssh.js";
-const execAsync = promisify(exec);
-export async function scpFiles(devboxId, options) {
+import { getSSHKey, getProxyCommand, checkSSHTools, } from "../../utils/ssh.js";
+const execFileAsync = promisify(execFile);
+/**
+ * Parse an SCP-style path into its components.
+ *
+ * Supported formats:
+ *   user@dbx_id:path  -> remote with explicit user
+ *   dbx_id:path       -> remote with default user
+ *   /local/path       -> local (absolute)
+ *   ./relative        -> local (relative)
+ *   filename          -> local (bare filename, no colon)
+ */
+export function parseSCPPath(input) {
+    // Match [user@]host:path where host is a devbox ID (dbx_*).
+    // This avoids false positives on local paths that happen to contain colons.
+    const match = input.match(/^(?:([^@/:]+)@)?(dbx_[^@/:]+):(.*)$/);
+    if (match) {
+        return {
+            user: match[1] || undefined,
+            host: match[2],
+            path: match[3],
+            isRemote: true,
+        };
+    }
+    return { path: input, isRemote: false };
+}
+/**
+ * Resolve a devbox ID to its SSH info and default user.
+ */
+export async function resolveRemote(devboxId) {
+    const client = getClient();
+    const devbox = await client.devboxes.retrieve(devboxId);
+    const defaultUser = devbox.launch_parameters?.user_parameters?.username || "user";
+    const sshInfo = await getSSHKey(devboxId);
+    if (!sshInfo) {
+        throw new Error(`Failed to create SSH key for ${devboxId}`);
+    }
+    return { devboxId, defaultUser, sshInfo };
+}
+/**
+ * Build the SCP command for a single-remote transfer (local <-> devbox).
+ */
+export function buildSCPCommand(opts) {
+    const scpCommand = [
+        "scp",
+        "-i",
+        opts.sshInfo.keyfilePath,
+        "-o",
+        `ProxyCommand=${opts.proxyCommand}`,
+        "-o",
+        "StrictHostKeyChecking=no",
+    ];
+    if (opts.scpOptions) {
+        scpCommand.push(...opts.scpOptions.split(" "));
+    }
+    // Build src argument
+    if (opts.parsedSrc.isRemote) {
+        const user = opts.parsedSrc.user || opts.defaultUser;
+        scpCommand.push(`${user}@${opts.sshInfo.url}:${opts.parsedSrc.path}`);
+    }
+    else {
+        scpCommand.push(opts.parsedSrc.path);
+    }
+    // Build dst argument
+    if (opts.parsedDst.isRemote) {
+        const user = opts.parsedDst.user || opts.defaultUser;
+        scpCommand.push(`${user}@${opts.sshInfo.url}:${opts.parsedDst.path}`);
+    }
+    else {
+        scpCommand.push(opts.parsedDst.path);
+    }
+    return scpCommand;
+}
+/**
+ * Build the SCP command for a dual-remote transfer (devbox -> devbox).
+ * Uses scp -3 to route data through the local machine and a temporary
+ * SSH config file so each devbox resolves to its own key/proxy.
+ */
+export function buildDualRemoteSCPCommand(opts) {
+    const scpCommand = [
+        "scp",
+        "-3",
+        "-F",
+        opts.sshConfigPath,
+        "-o",
+        "StrictHostKeyChecking=no",
+    ];
+    if (opts.scpOptions) {
+        scpCommand.push(...opts.scpOptions.split(" "));
+    }
+    const srcUser = opts.parsedSrc.user || opts.srcRemote.defaultUser;
+    scpCommand.push(`${srcUser}@${opts.srcRemote.sshInfo.url}:${opts.parsedSrc.path}`);
+    const dstUser = opts.parsedDst.user || opts.dstRemote.defaultUser;
+    scpCommand.push(`${dstUser}@${opts.dstRemote.sshInfo.url}:${opts.parsedDst.path}`);
+    return scpCommand;
+}
+/**
+ * Generate a temporary SSH config file for dual-remote transfers.
+ * Maps each devbox URL to its identity file and proxy command.
+ */
+export function generateSCPConfig(remotes, proxyCommand) {
+    return remotes
+        .map((r) => `Host ${r.sshInfo.url}\n` +
+        `  IdentityFile ${r.sshInfo.keyfilePath}\n` +
+        `  ProxyCommand ${proxyCommand}\n` +
+        `  StrictHostKeyChecking no`)
+        .join("\n\n");
+}
+export async function scpFiles(src, dst, options) {
     try {
         // Check if SSH tools are available
         const sshToolsAvailable = await checkSSHTools();
         if (!sshToolsAvailable) {
             outputError("SSH tools (ssh, scp, openssl) are not available on this system");
         }
-        const client = getClient();
-        // Get devbox details to determine user
-        const devbox = await client.devboxes.retrieve(devboxId);
-        const user = devbox.launch_parameters?.user_parameters?.username || "user";
-        // Get SSH key
-        const sshInfo = await getSSHKey(devboxId);
-        if (!sshInfo) {
-            outputError("Failed to create SSH key");
+        const parsedSrc = parseSCPPath(src);
+        const parsedDst = parseSCPPath(dst);
+        if (!parsedSrc.isRemote && !parsedDst.isRemote) {
+            outputError("At least one of src or dst must be a remote devbox path (e.g. dbx_<id>:/path)");
         }
         const proxyCommand = getProxyCommand();
-        const scpCommand = [
-            "scp",
-            "-i",
-            sshInfo.keyfilePath,
-            "-o",
-            `ProxyCommand=${proxyCommand}`,
-            "-o",
-            "StrictHostKeyChecking=no",
-        ];
-        if (options.scpOptions) {
-            scpCommand.push(...options.scpOptions.split(" "));
-        }
-        // Handle remote paths (starting with :)
-        if (options.src.startsWith(":")) {
-            scpCommand.push(`${user}@${sshInfo.url}:${options.src.slice(1)}`);
-            scpCommand.push(options.dst);
-        }
-        else {
-            scpCommand.push(options.src);
-            if (options.dst.startsWith(":")) {
-                scpCommand.push(`${user}@${sshInfo.url}:${options.dst.slice(1)}`);
+        let scpCommand;
+        if (parsedSrc.isRemote && parsedDst.isRemote) {
+            // Both sides are remote devboxes — resolve both in parallel
+            const [srcRemote, dstRemote] = await Promise.all([
+                resolveRemote(parsedSrc.host),
+                resolveRemote(parsedDst.host),
+            ]);
+            // Write a temporary SSH config so scp can find the right key per host
+            const configContent = generateSCPConfig([srcRemote, dstRemote], proxyCommand);
+            const configPath = join(tmpdir(), `rli-scp-${randomUUID()}.conf`);
+            const configHeader = "# Temporary SSH config generated by `rli devbox scp` for a dual-remote transfer.\n" +
+                "# Safe to delete.\n\n";
+            await writeFile(configPath, configHeader + configContent, {
+                mode: 0o600,
+            });
+            try {
+                scpCommand = buildDualRemoteSCPCommand({
+                    srcRemote,
+                    dstRemote,
+                    proxyCommand,
+                    parsedSrc,
+                    parsedDst,
+                    sshConfigPath: configPath,
+                    scpOptions: options.scpOptions,
+                });
+                const [cmd, ...args] = scpCommand;
+                await execFileAsync(cmd, args);
             }
-            else {
-                scpCommand.push(options.dst);
+            finally {
+                // Clean up the temp SSH config file.
+                // Note: SSH key files in ~/.runloop/ssh_keys/ are intentionally kept —
+                // they're shared across rli commands (ssh, scp, etc.).
+                await unlink(configPath).catch(() => { });
             }
         }
-        await execAsync(scpCommand.join(" "));
+        else {
+            // Single remote — one side is local
+            const devboxId = parsedSrc.isRemote ? parsedSrc.host : parsedDst.host;
+            const remote = await resolveRemote(devboxId);
+            scpCommand = buildSCPCommand({
+                sshInfo: remote.sshInfo,
+                proxyCommand,
+                parsedSrc,
+                parsedDst,
+                defaultUser: remote.defaultUser,
+                scpOptions: options.scpOptions,
+            });
+            const [cmd, ...args] = scpCommand;
+            await execFileAsync(cmd, args);
+        }
         // Default: just output the destination for easy scripting
         if (!options.output || options.output === "text") {
-            console.log(options.dst);
+            console.log(dst);
         }
         else {
             output({
-                source: options.src,
-                destination: options.dst,
+                source: src,
+                destination: dst,
             }, { format: options.output, defaultFormat: "json" });
         }
     }

package/dist/commands/gateway-config/create.js

@@ -3,32 +3,41 @@
  */
 import { getClient } from "../../utils/client.js";
 import { output, outputError } from "../../utils/output.js";
+import { validateGatewayConfig } from "../../utils/gatewayConfigValidation.js";
 export async function createGatewayConfig(options) {
     try {
         const client = getClient();
-        // Validate auth type
-        const authType = options.authType.toLowerCase();
-        if (authType !== "bearer" && authType !== "header") {
-            outputError("Invalid auth type. Must be 'bearer' or 'header'");
+        // Validate that exactly one auth type is specified
+        if (options.bearerAuth && options.headerAuth) {
+            outputError("Cannot specify both --bearer-auth and --header-auth. Choose one.");
             return;
         }
-        // Validate auth key is provided for header type
-        if (authType === "header" && !options.authKey) {
-            outputError("--auth-key is required when auth-type is 'header'");
+        // Default to bearer if neither is specified
+        const authType = options.headerAuth ? "header" : "bearer";
+        // Validate all fields using shared validation
+        const validation = validateGatewayConfig({
+            name: options.name,
+            endpoint: options.endpoint,
+            authType,
+            authKey: options.headerAuth,
+        }, { requireName: true, requireEndpoint: true });
+        if (!validation.valid) {
+            outputError(validation.errors.join("\n"));
             return;
         }
+        const { sanitized } = validation;
         // Build auth mechanism
         const authMechanism = {
-            type: authType,
+            type: sanitized.authType,
         };
-        if (authType === "header" && options.authKey) {
-            authMechanism.key = options.authKey;
+        if (sanitized.authType === "header" && sanitized.authKey) {
+            authMechanism.key = sanitized.authKey;
         }
         const config = await client.gatewayConfigs.create({
-            name: options.name,
-            endpoint: options.endpoint,
+            name: sanitized.name,
+            endpoint: sanitized.endpoint,
             auth_mechanism: authMechanism,
-            description: options.description,
+            description: options.description?.trim() || undefined,
         });
         // Default: just output the ID for easy scripting
         if (!options.output || options.output === "text") {

package/dist/commands/gateway-config/get.js

@@ -1,12 +1,15 @@
 /**
- * Get gateway config command
+ * Get gateway config command - supports lookup by ID or name
  */
-import { getClient } from "../../utils/client.js";
+import { getGatewayConfigByIdOrName } from "../../services/gatewayConfigService.js";
 import { output, outputError } from "../../utils/output.js";
 export async function getGatewayConfig(options) {
     try {
-        const client = getClient();
-        const config = await client.gatewayConfigs.retrieve(options.id);
+        const config = await getGatewayConfigByIdOrName(options.id);
+        if (!config) {
+            outputError(`Gateway config not found: ${options.id}`);
+            return;
+        }
         output(config, { format: options.output, defaultFormat: "json" });
     }
     catch (error) {

package/dist/commands/gateway-config/list.js

@@ -138,13 +138,13 @@ const ListGatewayConfigsUI = ({ onBack, onExit, }) => {
         },
         {
             key: "edit",
-            label: "Edit Gateway Config",
+            label: "Edit AI Gateway Config",
             color: colors.warning,
             icon: figures.pointer,
         },
         {
             key: "delete",
-            label: "Delete Gateway Config",
+            label: "Delete AI Gateway Config",
             color: colors.error,
             icon: figures.cross,
         },
@@ -205,7 +205,7 @@ const ListGatewayConfigsUI = ({ onBack, onExit, }) => {
             switch (operationKey) {
                 case "delete":
                     await client.gatewayConfigs.delete(config.id);
-                    setOperationResult(`Gateway config "${config.name}" deleted successfully`);
+                    setOperationResult(`AI gateway config "${config.name}" deleted successfully`);
                     break;
             }
         }
@@ -375,8 +375,8 @@ const ListGatewayConfigsUI = ({ onBack, onExit, }) => {
     });
     // Delete confirmation
     if (showDeleteConfirm && selectedConfig) {
-        return (_jsx(ConfirmationPrompt, { title: "Delete Gateway Config", message: `Are you sure you want to delete "${selectedConfig.name}"?`, 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 "${selectedConfig.name}"?`, 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: selectedConfig.name || selectedConfig.id },
                 { label: "Delete", active: true },
             ], onConfirm: () => {
@@ -393,7 +393,7 @@ const ListGatewayConfigsUI = ({ onBack, onExit, }) => {
         const operationLabel = operations.find((o) => o.key === executingOperation)?.label ||
             "Operation";
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: "Gateway Configs" },
+                        { label: "AI Gateway Configs" },
                         {
                             label: selectedConfig?.name || selectedConfig?.id || "Config",
                         },
@@ -405,10 +405,10 @@ const ListGatewayConfigsUI = ({ onBack, onExit, }) => {
         const operationLabel = operations.find((o) => o.key === executingOperation)?.label ||
             "Operation";
         const messages = {
-            delete: "Deleting gateway config...",
+            delete: "Deleting AI gateway config...",
         };
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: "Gateway Configs" },
+                        { label: "AI Gateway Configs" },
                         { label: selectedConfig.name || selectedConfig.id },
                         { label: operationLabel, active: true },
                     ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || "Please wait..." })] }));
@@ -434,14 +434,14 @@ const ListGatewayConfigsUI = ({ onBack, onExit, }) => {
     }
     // Loading state
     if (loading && configs.length === 0) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Gateway Configs", active: true }] }), _jsx(SpinnerComponent, { message: "Loading gateway configs..." })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "AI Gateway Configs", active: true }] }), _jsx(SpinnerComponent, { message: "Loading AI gateway configs..." })] }));
     }
     // Error state
     if (error) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Gateway Configs", active: true }] }), _jsx(ErrorMessage, { message: "Failed to list gateway configs", error: error })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "AI Gateway Configs", active: true }] }), _jsx(ErrorMessage, { message: "Failed to list AI gateway configs", error: error })] }));
     }
     // Main list view
-    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Gateway Configs", active: true }] }), _jsx(SearchBar, { searchMode: search.searchMode, searchQuery: search.searchQuery, submittedSearchQuery: search.submittedSearchQuery, resultCount: totalCount, onSearchChange: search.setSearchQuery, onSearchSubmit: search.submitSearch, placeholder: "Search gateway configs..." }), !showPopup && (_jsx(Table, { data: configs, keyExtractor: (config) => config.id, selectedIndex: selectedIndex, title: `gateway_configs[${totalCount}]`, columns: columns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No gateway configs found. Press [c] to create one."] }) })), !showPopup && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_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 ", totalCount] }), search.submittedSearchQuery && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.warning, children: ["Filtered: \"", search.submittedSearchQuery, "\""] })] }))] })), showPopup && selectedConfigItem && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedConfigItem, operations: operations.map((op) => ({
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "AI Gateway Configs", active: true }] }), _jsx(SearchBar, { searchMode: search.searchMode, searchQuery: search.searchQuery, submittedSearchQuery: search.submittedSearchQuery, resultCount: totalCount, onSearchChange: search.setSearchQuery, onSearchSubmit: search.submitSearch, placeholder: "Search AI gateway configs..." }), !showPopup && (_jsx(Table, { data: configs, keyExtractor: (config) => config.id, selectedIndex: selectedIndex, title: `gateway_configs[${totalCount}]`, columns: columns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No AI gateway configs found. Press [c] to create one."] }) })), !showPopup && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_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 ", totalCount] }), search.submittedSearchQuery && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.warning, children: ["Filtered: \"", search.submittedSearchQuery, "\""] })] }))] })), showPopup && selectedConfigItem && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedConfigItem, operations: operations.map((op) => ({
                         key: op.key,
                         label: op.label,
                         color: op.color,