cp dines

Author: dines-rl

src/cli.ts

@@ -79,12 +79,9 @@ const devbox = program
   .description("Manage devboxes")
   .alias("d")
   .action(async () => {
-    // Open interactive devbox list when no subcommand provided
-    const { runInteractiveCommand } = await import(
-      "./utils/interactiveCommand.js"
-    );
-    const { listDevboxes } = await import("./commands/devbox/list.js");
-    await runInteractiveCommand(() => listDevboxes({ output: "interactive" }));
+    // Open interactive devbox list using the Router architecture
+    const { runMainMenu } = await import("./commands/menu.js");
+    await runMainMenu("devbox-list");
   });
 
 devbox
@@ -350,12 +347,9 @@ const snapshot = program
   .description("Manage devbox snapshots")
   .alias("snap")
   .action(async () => {
-    // Open interactive snapshot list when no subcommand provided
-    const { runInteractiveCommand } = await import(
-      "./utils/interactiveCommand.js"
-    );
-    const { listSnapshots } = await import("./commands/snapshot/list.js");
-    await runInteractiveCommand(() => listSnapshots({ output: "interactive" }));
+    // Open interactive snapshot list using the Router architecture
+    const { runMainMenu } = await import("./commands/menu.js");
+    await runMainMenu("snapshot-list");
   });
 
 snapshot
@@ -415,14 +409,9 @@ const blueprint = program
   .description("Manage blueprints")
   .alias("bp")
   .action(async () => {
-    // Open interactive blueprint list when no subcommand provided
-    const { runInteractiveCommand } = await import(
-      "./utils/interactiveCommand.js"
-    );
-    const { listBlueprints } = await import("./commands/blueprint/list.js");
-    await runInteractiveCommand(() =>
-      listBlueprints({ output: "interactive" }),
-    );
+    // Open interactive blueprint list using the Router architecture
+    const { runMainMenu } = await import("./commands/menu.js");
+    await runMainMenu("blueprint-list");
   });
 
 blueprint

src/commands/devbox/list.tsx

@@ -13,13 +13,13 @@ import { formatTimeAgo } from "../../components/ResourceListView.js";
 import { createExecutor } from "../../utils/CommandExecutor.js";
 import { DevboxDetailPage } from "../../components/DevboxDetailPage.js";
 import { DevboxCreatePage } from "../../components/DevboxCreatePage.js";
-import { DevboxActionsMenu } from "../../components/DevboxActionsMenu.js";
 import { ResourceActionsMenu } from "../../components/ResourceActionsMenu.js";
 import { ActionsPopup } from "../../components/ActionsPopup.js";
 import { getDevboxUrl } from "../../utils/url.js";
 import { useViewportHeight } from "../../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../../hooks/useExitOnCtrlC.js";
 import { colors } from "../../utils/theme.js";
+import { useDevboxStore } from "../../store/devboxStore.js";
 
 interface ListOptions {
   status?: string;
@@ -31,14 +31,14 @@ const MAX_CACHE_SIZE = 10; // Limit cache to 10 pages to prevent memory leaks
 
 const ListDevboxesUI = ({
   status,
-  focusDevboxId,
   onBack,
   onExit,
+  onNavigateToDetail,
 }: {
   status?: string;
-  focusDevboxId?: string;
   onBack?: () => void;
   onExit?: () => void;
+  onNavigateToDetail?: (devboxId: string) => void;
 }) => {
   const { exit: inkExit } = useApp();
   const [initialLoading, setInitialLoading] = React.useState(true);
@@ -56,11 +56,13 @@ const ListDevboxesUI = ({
   const [searchMode, setSearchMode] = React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState("");
   const [totalCount, setTotalCount] = React.useState(0);
-  const [hasMore, setHasMore] = React.useState(false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const pageCache = React.useRef<Map<number, any[]>>(new Map());
   const lastIdCache = React.useRef<Map<number, string>>(new Map());
 
+  // Get devbox store setter to sync data for detail screen
+  const setDevboxesInStore = useDevboxStore((state) => state.setDevboxes);
+
   // Calculate overhead for viewport height:
   // - Breadcrumb (3 lines + marginBottom): 4 lines
   // - Search bar (if visible, 1 line + marginBottom): 2 lines
@@ -334,17 +336,8 @@ const ListDevboxesUI = ({
     [],
   );
 
-  // Check if we need to focus on a specific devbox after returning from SSH
-  React.useEffect(() => {
-    if (focusDevboxId && devboxes.length > 0 && !initialLoading) {
-      // Find the devbox in the current page
-      const devboxIndex = devboxes.findIndex((d) => d.id === focusDevboxId);
-      if (devboxIndex !== -1) {
-        setSelectedIndex(devboxIndex);
-        setShowDetails(true);
-      }
-    }
-  }, [devboxes, initialLoading, focusDevboxId]);
+  // NOTE: focusDevboxId auto-navigation removed - now handled by Router in DevboxListScreen
+  // The Router will navigate directly to devbox-detail screen instead of relying on internal state
 
   // Clear cache when search query changes
   React.useEffect(() => {
@@ -446,16 +439,22 @@ const ListDevboxesUI = ({
         // Extract data immediately and create defensive copies
         // This breaks all reference chains to the SDK's internal objects
         if (page.devboxes && Array.isArray(page.devboxes)) {
-          // Copy ONLY the fields we need - don't hold entire SDK objects
+          // Deep copy all fields to avoid SDK references
           page.devboxes.forEach((d: any) => {
-            pageDevboxes.push({
-              id: d.id,
-              name: d.name,
-              status: d.status,
-              create_time_ms: d.create_time_ms,
-              blueprint_id: d.blueprint_id,
-              entitlements: d.entitlements ? { ...d.entitlements } : undefined,
-            });
+            const plain: any = {};
+            for (const key in d) {
+              const value = d[key];
+              if (value === null || value === undefined) {
+                plain[key] = value;
+              } else if (Array.isArray(value)) {
+                plain[key] = [...value];
+              } else if (typeof value === "object") {
+                plain[key] = JSON.parse(JSON.stringify(value));
+              } else {
+                plain[key] = value;
+              }
+            }
+            pageDevboxes.push(plain);
           });
         } else {
           console.error(
@@ -466,7 +465,6 @@ const ListDevboxesUI = ({
 
         // Extract metadata before releasing page reference
         const totalCount = page.total_count || pageDevboxes.length;
-        const hasMore = page.has_more || false;
 
         // CRITICAL: Explicitly null out page reference to help GC
         // The Page object holds references to client, response, and options
@@ -477,7 +475,6 @@ const ListDevboxesUI = ({
 
         // Update pagination metadata
         setTotalCount(totalCount);
-        setHasMore(hasMore);
 
         // Cache the page data and last ID
         if (pageDevboxes.length > 0) {
@@ -499,6 +496,9 @@ const ListDevboxesUI = ({
         // Update devboxes for current page
         // React will handle efficient re-rendering - no need for manual comparison
         setDevboxes(pageDevboxes);
+
+        // Also update the store so DevboxDetailScreen can access the data
+        setDevboxesInStore(pageDevboxes);
       } catch (err) {
         if (isMounted) {
           setError(err as Error);
@@ -632,7 +632,12 @@ const ListDevboxesUI = ({
       setCurrentPage(currentPage - 1);
       setSelectedIndex(0);
     } else if (key.return) {
-      setShowDetails(true);
+      // Use Router navigation if callback provided, otherwise use internal state
+      if (onNavigateToDetail && selectedDevbox) {
+        onNavigateToDetail(selectedDevbox.id);
+      } else {
+        setShowDetails(true);
+      }
     } else if (input === "a") {
       setShowPopup(true);
       setSelectedOperation(0);
@@ -726,13 +731,18 @@ const ListDevboxesUI = ({
       })
     : allOperations;
 
-  // CRITICAL: Aggressive memory cleanup when switching views to prevent heap exhaustion
+  // CRITICAL: Memory cleanup when switching views
+  // Only clear LOCAL component state, NOT the store (store is needed by detail screen)
   React.useEffect(() => {
     if (showDetails || showActions || showCreate) {
-      // Immediately clear list data when navigating away to free memory
-      setDevboxes([]);
+      // Clear local list data only when using internal navigation
+      // When using Router navigation (onNavigateToDetail), the component will unmount
+      // so this cleanup is not needed
+      if (!onNavigateToDetail) {
+        setDevboxes([]);
+      }
     }
-  }, [showDetails, showActions, showCreate]);
+  }, [showDetails, showActions, showCreate, onNavigateToDetail]);
 
   // Create view
   if (showCreate) {
@@ -741,7 +751,7 @@ const ListDevboxesUI = ({
         onBack={() => {
           setShowCreate(false);
         }}
-        onCreate={(devbox) => {
+        onCreate={() => {
           // Refresh the list after creation
           setShowCreate(false);
           // The list will auto-refresh via the polling effect
@@ -954,10 +964,7 @@ const ListDevboxesUI = ({
 // Export the UI component for use in the main menu
 export { ListDevboxesUI };
 
-export async function listDevboxes(
-  options: ListOptions,
-  focusDevboxId?: string,
-) {
+export async function listDevboxes(options: ListOptions) {
   const executor = createExecutor(options);
 
   await executor.executeList(
@@ -970,9 +977,7 @@ export async function listDevboxes(
         limit: DEFAULT_PAGE_SIZE,
       });
     },
-    () => (
-      <ListDevboxesUI status={options.status} focusDevboxId={focusDevboxId} />
-    ),
+    () => <ListDevboxesUI status={options.status} />,
     DEFAULT_PAGE_SIZE,
   );
 }

src/components/DevboxDetailPage.tsx

@@ -10,7 +10,6 @@ import { getDevboxUrl } from "../utils/url.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
-import { useNavigation, type ScreenName, type RouteParams } from "../store/navigationStore.js";
 import { getDevbox } from "../services/devboxService.js";
 
 interface DevboxDetailPageProps {

src/screens/DevboxDetailScreen.tsx

@@ -6,35 +6,90 @@ import React from "react";
 import { useNavigation } from "../store/navigationStore.js";
 import { useDevboxStore } from "../store/devboxStore.js";
 import { DevboxDetailPage } from "../components/DevboxDetailPage.js";
+import { getDevbox } from "../services/devboxService.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
 
 interface DevboxDetailScreenProps {
   devboxId?: string;
 }
 
-export function DevboxDetailScreen({
-  devboxId,
-}: DevboxDetailScreenProps) {
+export function DevboxDetailScreen({ devboxId }: DevboxDetailScreenProps) {
   const { goBack } = useNavigation();
   const devboxes = useDevboxStore((state) => state.devboxes);
+  const setDevboxesInStore = useDevboxStore((state) => state.setDevboxes);
 
-  // Find devbox in store first, otherwise we'd need to fetch it
-  const devbox = devboxes.find((d) => d.id === devboxId);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<Error | null>(null);
+  const [fetchedDevbox, setFetchedDevbox] = React.useState<any>(null);
 
-  // Navigate back if devbox not found - must be in useEffect, not during render
+  // Find devbox in store first
+  const devboxFromStore = devboxes.find((d) => d.id === devboxId);
+
+  // Fetch devbox from API if not in store
   React.useEffect(() => {
-    if (!devbox) {
-      goBack();
+    if (!devboxFromStore && devboxId && !loading && !fetchedDevbox) {
+      setLoading(true);
+      setError(null);
+
+      getDevbox(devboxId)
+        .then((devbox) => {
+          setFetchedDevbox(devbox);
+          // Cache it in store for future access
+          setDevboxesInStore([devbox]);
+          setLoading(false);
+        })
+        .catch((err) => {
+          setError(err as Error);
+          setLoading(false);
+        });
     }
-  }, [devbox, goBack]);
+  }, [devboxFromStore, devboxId, loading, fetchedDevbox, setDevboxesInStore]);
+
+  // Use devbox from store or fetched devbox
+  const devbox = devboxFromStore || fetchedDevbox;
+
+  // Show loading state while fetching
+  if (loading) {
+    return (
+      <>
+        <Breadcrumb
+          items={[{ label: "Devboxes" }, { label: "Loading...", active: true }]}
+        />
+        <SpinnerComponent message="Loading devbox details..." />
+      </>
+    );
+  }
+
+  // Show error state if fetch failed
+  if (error) {
+    return (
+      <>
+        <Breadcrumb
+          items={[{ label: "Devboxes" }, { label: "Error", active: true }]}
+        />
+        <ErrorMessage message="Failed to load devbox details" error={error} />
+      </>
+    );
+  }
 
-  if (!devbox) {
-    return null;
+  // Show error if no devbox found and not loading
+  if (!devbox && !loading) {
+    return (
+      <>
+        <Breadcrumb
+          items={[{ label: "Devboxes" }, { label: "Not Found", active: true }]}
+        />
+        <ErrorMessage
+          message={`Devbox ${devboxId || "unknown"} not found`}
+          error={
+            new Error("Devbox not found in cache and could not be fetched")
+          }
+        />
+      </>
+    );
   }
 
-  return (
-    <DevboxDetailPage
-      devbox={devbox}
-      onBack={goBack}
-    />
-  );
+  return <DevboxDetailPage devbox={devbox} onBack={goBack} />;
 }