cp dines

Author: dines-rl

.cursor/worktrees.json

@@ -0,0 +1,5 @@
+{
+  "setup-worktree": [
+    "npm install"
+  ]
+}

package-lock.json

@@ -71,6 +71,7 @@
     "ink-big-text": "^2.0.0",
     "ink-gradient": "^3.0.0",
     "ink-link": "^5.0.0",
+    "ink-spawn": "^0.1.4",
     "ink-spinner": "^5.0.0",
     "ink-text-input": "^6.0.0",
     "react": "19.2.0",

package.json

@@ -19,10 +19,6 @@ import { ActionsPopup } from "../../components/ActionsPopup.js";
 import { getDevboxUrl } from "../../utils/url.js";
 import { useViewportHeight } from "../../hooks/useViewportHeight.js";
 import { exitAlternateScreen } from "../../utils/screen.js";
-import {
-  runSSHSession,
-  type SSHSessionConfig,
-} from "../../utils/sshSession.js";
 import { colors } from "../../utils/theme.js";
 
 interface ListOptions {
@@ -35,13 +31,11 @@ const MAX_CACHE_SIZE = 10; // Limit cache to 10 pages to prevent memory leaks
 
 const ListDevboxesUI = ({
   status,
-  onSSHRequest,
   focusDevboxId,
   onBack,
   onExit,
 }: {
   status?: string;
-  onSSHRequest?: (config: SSHSessionConfig) => void;
   focusDevboxId?: string;
   onBack?: () => void;
   onExit?: () => void;
@@ -220,8 +214,8 @@ const ListDevboxesUI = ({
           (devbox: any) => {
             if (devbox?.blueprint_id) {
               const bpId = String(devbox.blueprint_id);
-              const truncated = bpId.slice(0, 10);
-              const text = `blueprint:${truncated}`;
+              const truncated = bpId.slice(0, 16);
+              const text = `${truncated}`;
               // Cap source text to absolute maximum
               return text.length > 30 ? text.substring(0, 27) + "..." : text;
             }
@@ -776,7 +770,6 @@ const ListDevboxesUI = ({
         ]}
         initialOperation={selectedOp?.key}
         skipOperationsMenu={true}
-        onSSHRequest={onSSHRequest}
       />
     );
   }
@@ -787,7 +780,6 @@ const ListDevboxesUI = ({
       <DevboxDetailPage
         devbox={selectedDevbox}
         onBack={() => setShowDetails(false)}
-        onSSHRequest={onSSHRequest}
       />
     );
   }
@@ -971,8 +963,6 @@ export async function listDevboxes(
 ) {
   const executor = createExecutor(options);
 
-  let sshSessionConfig: SSHSessionConfig | null = null;
-
   await executor.executeList(
     async () => {
       const client = executor.getClient();
@@ -984,29 +974,8 @@ export async function listDevboxes(
       });
     },
     () => (
-      <ListDevboxesUI
-        status={options.status}
-        focusDevboxId={focusDevboxId}
-        onSSHRequest={(config) => {
-          sshSessionConfig = config;
-        }}
-      />
+      <ListDevboxesUI status={options.status} focusDevboxId={focusDevboxId} />
     ),
     DEFAULT_PAGE_SIZE,
   );
-
-  // If SSH was requested, handle it now after Ink has exited
-  if (sshSessionConfig) {
-    const result = await runSSHSession(sshSessionConfig);
-
-    if (result.shouldRestart) {
-      console.log(`\nSSH session ended. Returning to CLI...\n`);
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      // Restart the list view with the devbox ID to focus on
-      await listDevboxes(options, result.returnToDevboxId);
-    } else {
-      process.exit(result.exitCode);
-    }
-  }
 }

src/commands/devbox/list.tsx

@@ -1,39 +1,30 @@
 import React from "react";
 import { render } from "ink";
-import { runSSHSession, type SSHSessionConfig } from "../utils/sshSession.js";
 import { enterAlternateScreen, exitAlternateScreen } from "../utils/screen.js";
 
 import { Router } from "../router/Router.js";
 import { NavigationProvider } from "../store/navigationStore.js";
 import type { ScreenName } from "../store/navigationStore.js";
 
-interface AppProps {
-  onSSHRequest: (config: SSHSessionConfig) => void;
-  initialScreen?: ScreenName;
-  focusDevboxId?: string;
-}
-
-function AppInner({
-  onSSHRequest,
-}: {
-  onSSHRequest: (config: SSHSessionConfig) => void;
-}) {
+function AppInner() {
   // NavigationProvider already handles initialScreen and initialParams
   // No need for useEffect here - provider sets state on mount
-  return <Router onSSHRequest={onSSHRequest} />;
+  return <Router />;
 }
 
 function App({
-  onSSHRequest,
   initialScreen = "menu",
   focusDevboxId,
-}: AppProps) {
+}: {
+  initialScreen?: ScreenName;
+  focusDevboxId?: string;
+}) {
   return (
     <NavigationProvider
       initialScreen={initialScreen}
       initialParams={focusDevboxId ? { focusDevboxId } : {}}
     >
-      <AppInner onSSHRequest={onSSHRequest} />
+      <AppInner />
     </NavigationProvider>
   );
 }
@@ -43,60 +34,27 @@ export async function runMainMenu(
   focusDevboxId?: string,
 ) {
   // Enter alternate screen buffer for fullscreen experience (like top/vim)
-  enterAlternateScreen();
-
-  let sshSessionConfig: SSHSessionConfig | null = null;
-  let shouldContinue = true;
-  let currentInitialScreen = initialScreen;
-  let currentFocusDevboxId = focusDevboxId;
-
-  while (shouldContinue) {
-    sshSessionConfig = null;
-
-    try {
-      const { waitUntilExit } = render(
-        <App
-          key={`app-${currentInitialScreen}-${currentFocusDevboxId}`}
-          onSSHRequest={(config) => {
-            sshSessionConfig = config;
-          }}
-          initialScreen={currentInitialScreen}
-          focusDevboxId={currentFocusDevboxId}
-        />,
-        {
-          patchConsole: false,
-          exitOnCtrlC: false,
-        },
-      );
-      await waitUntilExit();
-      shouldContinue = false;
-    } catch (error) {
-      console.error("Error in menu:", error);
-      shouldContinue = false;
-    }
-
-    // If SSH was requested, handle it now after Ink has exited
-    if (sshSessionConfig) {
-      const result = await runSSHSession(sshSessionConfig);
-
-      if (result.shouldRestart) {
-        console.log(`\nSSH session ended. Returning to menu...\n`);
-        await new Promise((resolve) => setTimeout(resolve, 500));
-
-        currentInitialScreen = "devbox-list";
-        currentFocusDevboxId = result.returnToDevboxId;
-        shouldContinue = true;
-      } else {
-        shouldContinue = false;
-      }
-    }
+  //enterAlternateScreen();
+
+  try {
+    const { waitUntilExit } = render(
+      <App
+        key={`app-${initialScreen}-${focusDevboxId}`}
+        initialScreen={initialScreen}
+        focusDevboxId={focusDevboxId}
+      />,
+      {
+        patchConsole: false,
+        exitOnCtrlC: false,
+      },
+    );
+    await waitUntilExit();
+  } catch (error) {
+    console.error("Error in menu:", error);
   }
 
-  // Disable synchronous updates
-  // disableSynchronousUpdates();
-
   // Exit alternate screen buffer
-  exitAlternateScreen();
+  //exitAlternateScreen();
 
   process.exit(0);
 }

src/commands/menu.tsx

@@ -7,9 +7,9 @@ import { SpinnerComponent } from "./Spinner.js";
 import { ErrorMessage } from "./ErrorMessage.js";
 import { SuccessMessage } from "./SuccessMessage.js";
 import { Breadcrumb } from "./Breadcrumb.js";
-import type { SSHSessionConfig } from "../utils/sshSession.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useNavigation } from "../store/navigationStore.js";
 import {
   getDevboxLogs,
   execCommand,
@@ -41,7 +41,6 @@ interface DevboxActionsMenuProps {
   initialOperation?: string; // Operation to execute immediately
   initialOperationIndex?: number; // Index of the operation to select
   skipOperationsMenu?: boolean; // Skip showing operations menu and execute immediately
-  onSSHRequest?: (config: SSHSessionConfig) => void; // Callback when SSH is requested
 }
 
 export const DevboxActionsMenu = ({
@@ -54,9 +53,8 @@ export const DevboxActionsMenu = ({
   initialOperation,
   initialOperationIndex = 0,
   skipOperationsMenu = false,
-  onSSHRequest,
 }: DevboxActionsMenuProps) => {
-  const { exit } = useApp();
+  const { navigate, currentScreen, params } = useNavigation();
   const [loading, setLoading] = React.useState(false);
   const [selectedOperation, setSelectedOperation] = React.useState(
     initialOperationIndex,
@@ -561,24 +559,22 @@ export const DevboxActionsMenu = ({
             devbox.launch_parameters?.user_parameters?.username || "user";
           const env = process.env.RUNLOOP_ENV?.toLowerCase();
           const sshHost = env === "dev" ? "ssh.runloop.pro" : "ssh.runloop.ai";
-          const proxyCommand = `openssl s_client -quiet -verify_quiet -servername %h -connect ${sshHost}:443 2>/dev/null`;
+          // macOS openssl doesn't support -verify_quiet, use compatible flags
+          // servername should be %h (target hostname) - SSH will replace %h with the actual hostname from the SSH command
+          // This matches the reference implementation where servername is the target hostname
+          const proxyCommand = `openssl s_client -quiet -servername %h -connect ${sshHost}:443 2>/dev/null`;
 
-          const sshConfig: SSHSessionConfig = {
+          // Navigate to SSH session screen
+          navigate("ssh-session", {
             keyPath,
             proxyCommand,
             sshUser,
             url: sshKey.url,
             devboxId: devbox.id,
             devboxName: devbox.name || devbox.id,
-          };
-
-          // Notify parent that SSH is requested
-          if (onSSHRequest) {
-            onSSHRequest(sshConfig);
-            exit();
-          } else {
-            setOperationError(new Error("SSH session handler not configured"));
-          }
+            returnScreen: currentScreen,
+            returnParams: params,
+          });
           break;
 
         case "logs":

src/components/DevboxActionsMenu.tsx

@@ -7,14 +7,12 @@ import { MetadataDisplay } from "./MetadataDisplay.js";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { DevboxActionsMenu } from "./DevboxActionsMenu.js";
 import { getDevboxUrl } from "../utils/url.js";
-import type { SSHSessionConfig } from "../utils/sshSession.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 
 interface DevboxDetailPageProps {
   devbox: any;
   onBack: () => void;
-  onSSHRequest?: (config: SSHSessionConfig) => void;
 }
 
 // Format time ago in a succinct way
@@ -42,7 +40,6 @@ const formatTimeAgo = (timestamp: number): string => {
 export const DevboxDetailPage = ({
   devbox: initialDevbox,
   onBack,
-  onSSHRequest,
 }: DevboxDetailPageProps) => {
   const isMounted = React.useRef(true);
 
@@ -602,7 +599,6 @@ export const DevboxDetailPage = ({
         ]}
         initialOperation={selectedOp?.key}
         skipOperationsMenu={true}
-        onSSHRequest={onSSHRequest}
       />
     );
   }