🤖 Add useNewWorkspaceOptions hook for consistent runtime management

ammar-agent · ammar-agent · commit 0aa029af661f · 2025-10-26T12:51:36.000-05:00
- Create useNewWorkspaceOptions hook to manage runtime preferences with localStorage
- Refactor NewWorkspaceModal to use the hook instead of direct state management
- Update /new command to use saved runtime preference when -r flag not provided
- Eliminate duplication between modal and command-line workspace creation

Hook provides:
- Automatic loading of saved runtime preferences
- Consistent state management (runtimeMode + sshHost)
- Helper method getRuntimeString() for IPC calls
- Single source of truth for runtime preference logic

Now both NewWorkspaceModal and /new command respect saved preferences,
ensuring consistent behavior across all workspace creation paths.
diff --git a/src/components/NewWorkspaceModal.tsx b/src/components/NewWorkspaceModal.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useId, useState } from "react";
 import { Modal, ModalInfo, ModalActions, CancelButton, PrimaryButton } from "./Modal";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
 import { formatNewCommand } from "@/utils/chatCommands";
-import { getRuntimeKey } from "@/constants/storage";
+import { useNewWorkspaceOptions } from "@/hooks/useNewWorkspaceOptions";
 
 interface NewWorkspaceModalProps {
   isOpen: boolean;
@@ -31,13 +31,15 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
 }) => {
   const [branchName, setBranchName] = useState("");
   const [trunkBranch, setTrunkBranch] = useState(defaultTrunkBranch ?? branches[0] ?? "");
-  const [runtimeMode, setRuntimeMode] = useState<"local" | "ssh">("local");
-  const [sshHost, setSshHost] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const infoId = useId();
   const hasBranches = branches.length > 0;
 
+  // Load runtime preferences from localStorage for this project
+  const [runtimeOptions, setRuntimeOptions] = useNewWorkspaceOptions(projectPath, isOpen);
+  const { runtimeMode, sshHost, getRuntimeString } = runtimeOptions;
+
   useEffect(() => {
     setError(loadErrorMessage ?? null);
   }, [loadErrorMessage]);
@@ -59,30 +61,10 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
     });
   }, [branches, defaultTrunkBranch, hasBranches]);
 
-  // Load saved runtime preference when modal opens
-  useEffect(() => {
-    if (isOpen && projectPath) {
-      const runtimeKey = getRuntimeKey(projectPath);
-      const savedRuntime = localStorage.getItem(runtimeKey);
-      if (savedRuntime) {
-        // Parse the saved runtime string (format: "ssh <host>" or undefined for local)
-        if (savedRuntime.startsWith("ssh ")) {
-          const host = savedRuntime.substring(4).trim();
-          setRuntimeMode("ssh");
-          setSshHost(host);
-        } else {
-          setRuntimeMode("local");
-          setSshHost("");
-        }
-      }
-    }
-  }, [isOpen, projectPath]);
-
   const handleCancel = () => {
     setBranchName("");
     setTrunkBranch(defaultTrunkBranch ?? branches[0] ?? "");
-    setRuntimeMode("local");
-    setSshHost("");
+    setRuntimeOptions("local", "");
     setError(loadErrorMessage ?? null);
     onClose();
   };
@@ -119,14 +101,13 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
     setError(null);
 
     try {
-      // Build runtime string if SSH selected
-      const runtime = runtimeMode === "ssh" ? `ssh ${sshHost.trim()}` : undefined;
+      // Get runtime string from hook helper
+      const runtime = getRuntimeString();
 
       await onAdd(trimmedBranchName, normalizedTrunkBranch, runtime);
       setBranchName("");
       setTrunkBranch(defaultTrunkBranch ?? branches[0] ?? "");
-      setRuntimeMode("local");
-      setSshHost("");
+      setRuntimeOptions("local", "");
       onClose();
     } catch (err) {
       const message = err instanceof Error ? err.message : "Failed to create workspace";
@@ -225,7 +206,8 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
             id="runtimeMode"
             value={runtimeMode}
             onChange={(event) => {
-              setRuntimeMode(event.target.value as "local" | "ssh");
+              const newMode = event.target.value as "local" | "ssh";
+              setRuntimeOptions(newMode, newMode === "local" ? "" : sshHost);
               setError(null);
             }}
             disabled={isLoading}
@@ -243,7 +225,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
               type="text"
               value={sshHost}
               onChange={(event) => {
-                setSshHost(event.target.value);
+                setRuntimeOptions("ssh", event.target.value);
                 setError(null);
               }}
               placeholder="hostname or user@hostname"
diff --git a/src/hooks/useNewWorkspaceOptions.ts b/src/hooks/useNewWorkspaceOptions.ts
@@ -0,0 +1,80 @@
+import { useState, useEffect } from "react";
+import { getRuntimeKey } from "@/constants/storage";
+
+export interface WorkspaceRuntimeOptions {
+  runtimeMode: "local" | "ssh";
+  sshHost: string;
+  /**
+   * Returns the runtime string for IPC calls (format: "ssh <host>" or undefined for local)
+   */
+  getRuntimeString: () => string | undefined;
+}
+
+/**
+ * Hook to manage workspace creation runtime options with localStorage persistence.
+ * Loads saved runtime preference for a project and provides consistent state management.
+ * 
+ * @param projectPath - Path to the project (used as key for localStorage)
+ * @param enabled - Whether to load saved preferences (default: true)
+ * @returns Runtime options state and setter
+ */
+export function useNewWorkspaceOptions(
+  projectPath: string | null | undefined,
+  enabled = true
+): [WorkspaceRuntimeOptions, (mode: "local" | "ssh", host?: string) => void] {
+  const [runtimeMode, setRuntimeMode] = useState<"local" | "ssh">("local");
+  const [sshHost, setSshHost] = useState("");
+
+  // Load saved runtime preference when projectPath changes
+  useEffect(() => {
+    if (!enabled || !projectPath) {
+      // Reset to defaults when disabled or no project
+      setRuntimeMode("local");
+      setSshHost("");
+      return;
+    }
+
+    const runtimeKey = getRuntimeKey(projectPath);
+    const savedRuntime = localStorage.getItem(runtimeKey);
+    
+    if (savedRuntime) {
+      // Parse the saved runtime string (format: "ssh <host>" or undefined for local)
+      if (savedRuntime.startsWith("ssh ")) {
+        const host = savedRuntime.substring(4).trim();
+        setRuntimeMode("ssh");
+        setSshHost(host);
+      } else {
+        setRuntimeMode("local");
+        setSshHost("");
+      }
+    } else {
+      // No saved preference, use defaults
+      setRuntimeMode("local");
+      setSshHost("");
+    }
+  }, [projectPath, enabled]);
+
+  // Setter for updating both mode and host
+  const setRuntimeOptions = (mode: "local" | "ssh", host?: string) => {
+    setRuntimeMode(mode);
+    setSshHost(host ?? "");
+  };
+
+  // Helper to get runtime string for IPC calls
+  const getRuntimeString = (): string | undefined => {
+    if (runtimeMode === "ssh") {
+      const trimmedHost = sshHost.trim();
+      return trimmedHost ? `ssh ${trimmedHost}` : undefined;
+    }
+    return undefined;
+  };
+
+  return [
+    {
+      runtimeMode,
+      sshHost,
+      getRuntimeString,
+    },
+    setRuntimeOptions,
+  ];
+}
diff --git a/src/utils/chatCommands.ts b/src/utils/chatCommands.ts
@@ -15,6 +15,7 @@ import type { Toast } from "@/components/ChatInputToast";
 import type { ParsedCommand } from "@/utils/slashCommands/types";
 import { applyCompactionOverrides } from "@/utils/messages/compactionOptions";
 import { resolveCompactionModel } from "@/utils/messages/compactionModelPreference";
+import { getRuntimeKey } from "@/constants/storage";
 
 // ============================================================================
 // Workspace Creation
@@ -92,8 +93,18 @@ export async function createNewWorkspace(
     effectiveTrunk = recommendedTrunk ?? "main";
   }
 
+  // Use saved runtime preference if not explicitly provided
+  let effectiveRuntime = options.runtime;
+  if (effectiveRuntime === undefined) {
+    const runtimeKey = getRuntimeKey(options.projectPath);
+    const savedRuntime = localStorage.getItem(runtimeKey);
+    if (savedRuntime) {
+      effectiveRuntime = savedRuntime;
+    }
+  }
+
   // Parse runtime config if provided
-  const runtimeConfig = parseRuntimeString(options.runtime, options.workspaceName);
+  const runtimeConfig = parseRuntimeString(effectiveRuntime, options.workspaceName);
 
   const result = await window.api.workspace.create(
     options.projectPath,
