feat(devbox): allow tunnel config interactive, show tunnel in info (#102)

## Description

<!-- Provide a brief description of your changes -->
<img width="392" height="272" alt="Screenshot 2026-02-05 at 10 00 37 AM"
src="https://github.com/user-attachments/assets/e5758699-0199-432b-a49c-c95910d22942"
/>
<img width="859" height="443" alt="Screenshot 2026-02-05 at 9 59 21 AM"
src="https://github.com/user-attachments/assets/e638d9f7-568d-4ff4-821d-3b8dc2919038"
/>



**Note:** PR titles should follow [Conventional
Commits](https://www.conventionalcommits.org/) format (e.g.,
`feat(devbox): add support for custom env vars` or `fix(snapshot):
resolve pagination issue`) as they are used for automatic release notes
generation.

## Type of Change

<!-- Mark the relevant option with an 'x' -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update
- [ ] Code refactoring
- [ ] Performance improvement
- [ ] Test updates

## Related Issues

<!-- Link to related issues using #issue-number -->
Closes #

## Changes Made

<!-- Describe the changes in detail -->

## Testing

<!-- Describe how you tested your changes -->

- [ ] I have tested locally
- [ ] I have added/updated tests
- [ ] All existing tests pass

## Checklist

- [ ] My code follows the code style of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have updated the documentation accordingly
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published

## Screenshots (if applicable)

<!-- Add screenshots to help explain your changes -->

## Additional Notes

<!-- Any additional information that reviewers should know -->

---------

Co-authored-by: Alexander Dines <alex@runloop.ai>

Author: ross-rl

src/commands/devbox/list.tsx

@@ -428,28 +428,46 @@ const ListDevboxesUI = ({
   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) => {
-        const devboxStatus = selectedDevbox.status;
-
-        if (devboxStatus === "suspended") {
-          return op.key === "resume" || op.key === "logs";
-        }
-
-        if (
-          devboxStatus !== "running" &&
-          devboxStatus !== "provisioning" &&
-          devboxStatus !== "initializing"
-        ) {
-          return op.key === "logs";
-        }
-
-        if (devboxStatus === "running") {
-          return op.key !== "resume";
-        }
-
-        return op.key === "logs" || op.key === "delete";
-      })
+    ? allOperations
+        .filter((op) => {
+          const devboxStatus = selectedDevbox.status;
+
+          if (devboxStatus === "suspended") {
+            return op.key === "resume" || op.key === "logs";
+          }
+
+          if (
+            devboxStatus !== "running" &&
+            devboxStatus !== "provisioning" &&
+            devboxStatus !== "initializing"
+          ) {
+            return op.key === "logs";
+          }
+
+          if (devboxStatus === "running") {
+            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(() => {

src/components/DevboxActionsMenu.tsx

@@ -25,6 +25,7 @@ import {
   createSSHKey,
 } from "../services/devboxService.js";
 import { StreamingLogsViewer } from "./StreamingLogsViewer.js";
+import { DevboxView } from "@runloop/api-client/resources/devboxes.mjs";
 
 type Operation =
   | "exec"
@@ -39,7 +40,7 @@ type Operation =
   | null;
 
 interface DevboxActionsMenuProps {
-  devbox: any;
+  devbox: DevboxView;
   onBack: () => void;
   breadcrumbItems?: Array<{ label: string; active?: boolean }>;
   initialOperation?: string; // Operation to execute immediately
@@ -196,32 +197,48 @@ export const DevboxActionsMenu = ({
   ];
 
   // Filter operations based on devbox status
+  const hasTunnel = !!(devbox?.tunnel && devbox.tunnel.tunnel_key);
   const operations = devbox
-    ? allOperations.filter((op) => {
-        const status = devbox.status;
+    ? allOperations
+        .filter((op) => {
+          const status = devbox.status;
 
-        // When suspended: logs and resume
-        if (status === "suspended") {
-          return op.key === "resume" || op.key === "logs";
-        }
+          // When suspended: logs and resume
+          if (status === "suspended") {
+            return op.key === "resume" || op.key === "logs";
+          }
 
-        // When not running (shutdown, failure, etc): only logs
-        if (
-          status !== "running" &&
-          status !== "provisioning" &&
-          status !== "initializing"
-        ) {
-          return op.key === "logs";
-        }
+          // When not running (shutdown, failure, etc): only logs
+          if (
+            status !== "running" &&
+            status !== "provisioning" &&
+            status !== "initializing"
+          ) {
+            return op.key === "logs";
+          }
 
-        // When running: everything except resume
-        if (status === "running") {
-          return op.key !== "resume";
-        }
+          // When running: everything except resume
+          if (status === "running") {
+            return op.key !== "resume";
+          }
 
-        // Default for transitional states (provisioning, initializing)
-        return op.key === "logs" || op.key === "delete";
-      })
+          // 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;
+        })
     : allOperations;
 
   // Auto-execute operations that don't need input (except delete which needs confirmation)

src/components/DevboxCreatePage.tsx

@@ -62,6 +62,7 @@ type FormField =
   | "metadata"
   | "source"
   | "network_policy_id"
+  | "tunnel_auth_mode"
   | "gateways";
 
 // Gateway configuration for devbox
@@ -97,6 +98,7 @@ interface FormData {
   blueprint_id: string;
   snapshot_id: string;
   network_policy_id: string;
+  tunnel_auth_mode: "none" | "open" | "authenticated";
   gateways: GatewaySpec[];
 }
 
@@ -110,6 +112,7 @@ const resourceSizes = [
   "XX_LARGE",
   "CUSTOM_SIZE",
 ] as const;
+const tunnelAuthModes = ["none", "open", "authenticated"] as const;
 
 export const DevboxCreatePage = ({
   onBack,
@@ -130,6 +133,7 @@ export const DevboxCreatePage = ({
     blueprint_id: initialBlueprintId || "",
     snapshot_id: initialSnapshotId || "",
     network_policy_id: "",
+    tunnel_auth_mode: "none",
     gateways: [],
   });
   const [metadataKey, setMetadataKey] = React.useState("");
@@ -259,6 +263,12 @@ export const DevboxCreatePage = ({
       type: "picker",
       placeholder: "Select a network policy...",
     },
+    {
+      key: "tunnel_auth_mode",
+      label: "Tunnel (optional)",
+      type: "select",
+      placeholder: "none",
+    },
     {
       key: "gateways",
       label: "AI Gateway Configs (optional)",
@@ -290,6 +300,13 @@ export const DevboxCreatePage = ({
     currentField === "resource_size",
   );
 
+  const handleTunnelNav = useFormSelectNavigation(
+    formData.tunnel_auth_mode,
+    tunnelAuthModes,
+    (value) => setFormData({ ...formData, tunnel_auth_mode: value }),
+    currentField === "tunnel_auth_mode",
+  );
+
   const handleSourceTypeNav = useFormSelectNavigation(
     sourceTypeToggle,
     sourceTypes,
@@ -395,6 +412,7 @@ export const DevboxCreatePage = ({
       // Handle select field navigation using shared hooks
       if (handleArchitectureNav(input, key)) return;
       if (handleResourceSizeNav(input, key)) return;
+      if (handleTunnelNav(input, key)) return;
       if (handleSourceTypeNav(input, key)) return;
 
       // Navigation (up/down arrows and tab/shift+tab)
@@ -865,6 +883,13 @@ export const DevboxCreatePage = ({
         createParams.gateways = gateways;
       }
 
+      // Add tunnel configuration if not "none"
+      if (formData.tunnel_auth_mode !== "none") {
+        createParams.tunnel = {
+          auth_mode: formData.tunnel_auth_mode,
+        };
+      }
+
       const devbox = await client.devboxes.create(createParams);
       setResult(devbox);
     } catch (err) {
@@ -1461,14 +1486,22 @@ export const DevboxCreatePage = ({
 
           if (field.type === "select") {
             const value = fieldData as string;
+            let options: readonly string[];
+            if (field.key === "architecture") {
+              options = architectures;
+            } else if (field.key === "resource_size") {
+              options = resourceSizes;
+            } else if (field.key === "tunnel_auth_mode") {
+              options = tunnelAuthModes;
+            } else {
+              options = [];
+            }
             return (
               <FormSelect
                 key={field.key}
                 label={field.label}
                 value={value || ""}
-                options={
-                  field.key === "architecture" ? architectures : resourceSizes
-                }
+                options={options}
                 onChange={(newValue) =>
                   setFormData({ ...formData, [field.key]: newValue })
                 }