refactor: simplify CreationControls props by passing nameState object

Replace 6 individual name-related props with single WorkspaceNameState object.
Reduces indirection and keeps component interface cleaner.

Author: ammar-agent

src/browser/components/ChatInput/CreationControls.tsx

@@ -5,6 +5,7 @@ import { RuntimeIconSelector } from "../RuntimeIconSelector";
 import { Loader2, Wand2 } from "lucide-react";
 import { cn } from "@/common/lib/utils";
 import { Tooltip, TooltipWrapper } from "../Tooltip";
+import type { WorkspaceNameState } from "@/browser/hooks/useWorkspaceName";
 
 interface CreationControlsProps {
   branches: string[];
@@ -13,25 +14,12 @@ interface CreationControlsProps {
   runtimeMode: RuntimeMode;
   defaultRuntimeMode: RuntimeMode;
   sshHost: string;
-  /** Called when user clicks a runtime icon to select it (does not persist) */
   onRuntimeModeChange: (mode: RuntimeMode) => void;
-  /** Called when user checks "Default for project" checkbox (persists) */
   onSetDefaultRuntime: (mode: RuntimeMode) => void;
-  /** Called when user changes SSH host */
   onSshHostChange: (host: string) => void;
   disabled: boolean;
-  /** Workspace name state */
-  workspaceName: string;
-  /** Whether name is being generated */
-  isGeneratingName: boolean;
-  /** Whether auto-generation is enabled */
-  autoGenerateName: boolean;
-  /** Name generation error */
-  nameError: string | null;
-  /** Called when auto-generate checkbox changes */
-  onAutoGenerateChange: (enabled: boolean) => void;
-  /** Called when user types in the name field */
-  onNameChange: (name: string) => void;
+  /** Workspace name generation state and actions */
+  nameState: WorkspaceNameState;
 }
 
 /**
@@ -45,26 +33,26 @@ export function CreationControls(props: CreationControlsProps) {
   const showTrunkBranchSelector =
     props.branches.length > 0 && props.runtimeMode !== RUNTIME_MODE.LOCAL;
 
-  const { onNameChange, onAutoGenerateChange } = props;
+  const { nameState } = props;
 
   const handleNameChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      onNameChange(e.target.value);
+      nameState.setName(e.target.value);
     },
-    [onNameChange]
+    [nameState]
   );
 
   // Clicking into the input disables auto-generation so user can edit
   const handleInputFocus = useCallback(() => {
-    if (props.autoGenerateName) {
-      onAutoGenerateChange(false);
+    if (nameState.autoGenerate) {
+      nameState.setAutoGenerate(false);
     }
-  }, [props.autoGenerateName, onAutoGenerateChange]);
+  }, [nameState]);
 
   // Toggle auto-generation via wand button
   const handleWandClick = useCallback(() => {
-    onAutoGenerateChange(!props.autoGenerateName);
-  }, [props.autoGenerateName, onAutoGenerateChange]);
+    nameState.setAutoGenerate(!nameState.autoGenerate);
+  }, [nameState]);
 
   return (
     <div className="flex flex-col gap-2">
@@ -77,19 +65,19 @@ export function CreationControls(props: CreationControlsProps) {
           <input
             id="workspace-name"
             type="text"
-            value={props.workspaceName}
+            value={nameState.name}
             onChange={handleNameChange}
             onFocus={handleInputFocus}
-            placeholder={props.isGeneratingName ? "Generating..." : "workspace-name"}
+            placeholder={nameState.isGenerating ? "Generating..." : "workspace-name"}
             disabled={props.disabled}
             className={cn(
               "bg-separator text-foreground border-border-medium focus:border-accent h-6 w-full rounded border px-2 pr-6 text-xs focus:outline-none disabled:opacity-50",
-              props.nameError && "border-red-500"
+              nameState.error && "border-red-500"
             )}
           />
           {/* Magic wand / loading indicator - vertically centered */}
           <div className="absolute inset-y-0 right-0 flex items-center pr-1.5">
-            {props.isGeneratingName ? (
+            {nameState.isGenerating ? (
               <Loader2 className="text-accent h-3.5 w-3.5 animate-spin" />
             ) : (
               <TooltipWrapper inline>
@@ -98,26 +86,26 @@ export function CreationControls(props: CreationControlsProps) {
                   onClick={handleWandClick}
                   disabled={props.disabled}
                   className="flex h-full items-center disabled:opacity-50"
-                  aria-label={props.autoGenerateName ? "Disable auto-naming" : "Enable auto-naming"}
+                  aria-label={nameState.autoGenerate ? "Disable auto-naming" : "Enable auto-naming"}
                 >
                   <Wand2
                     className={cn(
                       "h-3.5 w-3.5 transition-colors",
-                      props.autoGenerateName
+                      nameState.autoGenerate
                         ? "text-accent"
                         : "text-muted-foreground opacity-50 hover:opacity-75"
                     )}
                   />
                 </button>
                 <Tooltip className="tooltip" align="center">
-                  {props.autoGenerateName ? "Auto-naming enabled" : "Click to enable auto-naming"}
+                  {nameState.autoGenerate ? "Auto-naming enabled" : "Click to enable auto-naming"}
                 </Tooltip>
               </TooltipWrapper>
             )}
           </div>
         </div>
         {/* Error display - inline */}
-        {props.nameError && <span className="text-xs text-red-500">{props.nameError}</span>}
+        {nameState.error && <span className="text-xs text-red-500">{nameState.error}</span>}
       </div>
 
       {/* Second row: Runtime, Branch, SSH */}

src/browser/components/ChatInput/index.tsx

@@ -1193,7 +1193,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           projectName={props.projectName}
           isSending={creationState.isSending || isSending}
           workspaceName={
-            creationState.isSending || isSending ? creationState.workspaceName : undefined
+            creationState.isSending || isSending ? creationState.nameState.name : undefined
           }
         />
       )}
@@ -1404,12 +1404,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                 onSetDefaultRuntime={creationState.setDefaultRuntimeMode}
                 onSshHostChange={creationState.setSshHost}
                 disabled={creationState.isSending || isSending}
-                workspaceName={creationState.workspaceName}
-                isGeneratingName={creationState.isGeneratingName}
-                autoGenerateName={creationState.autoGenerateName}
-                nameError={creationState.nameError}
-                onAutoGenerateChange={creationState.setAutoGenerateName}
-                onNameChange={creationState.setWorkspaceName}
+                nameState={creationState.nameState}
               />
             )}
           </div>

src/browser/components/ChatInput/useCreationWorkspace.ts

@@ -19,7 +19,7 @@ import type { Toast } from "@/browser/components/ChatInputToast";
 import { createErrorToast } from "@/browser/components/ChatInputToasts";
 import { useAPI } from "@/browser/contexts/API";
 import type { ImagePart } from "@/common/orpc/types";
-import { useWorkspaceName } from "@/browser/hooks/useWorkspaceName";
+import { useWorkspaceName, type WorkspaceNameState } from "@/browser/hooks/useWorkspaceName";
 
 interface UseCreationWorkspaceOptions {
   projectPath: string;
@@ -69,18 +69,8 @@ interface UseCreationWorkspaceReturn {
   setToast: (toast: Toast | null) => void;
   isSending: boolean;
   handleSend: (message: string, imageParts?: ImagePart[]) => Promise<boolean>;
-  /** Workspace name state */
-  workspaceName: string;
-  /** Whether name is being generated */
-  isGeneratingName: boolean;
-  /** Whether auto-generation is enabled */
-  autoGenerateName: boolean;
-  /** Name generation error */
-  nameError: string | null;
-  /** Set auto-generation enabled */
-  setAutoGenerateName: (enabled: boolean) => void;
-  /** Set workspace name (for manual entry) */
-  setWorkspaceName: (name: string) => void;
+  /** Workspace name generation state and actions (for CreationControls) */
+  nameState: WorkspaceNameState;
 }
 
 /**
@@ -254,12 +244,7 @@ export function useCreationWorkspace({
     setToast,
     isSending,
     handleSend,
-    // Workspace name state
-    workspaceName: workspaceNameState.name,
-    isGeneratingName: workspaceNameState.isGenerating,
-    autoGenerateName: workspaceNameState.autoGenerate,
-    nameError: workspaceNameState.error,
-    setAutoGenerateName: workspaceNameState.setAutoGenerate,
-    setWorkspaceName: workspaceNameState.setName,
+    // Workspace name state (for CreationControls)
+    nameState: workspaceNameState,
   };
 }

src/browser/hooks/useWorkspaceName.ts

@@ -8,7 +8,8 @@ export interface UseWorkspaceNameOptions {
   debounceMs?: number;
 }
 
-export interface UseWorkspaceNameReturn {
+/** State and actions for workspace name generation, suitable for passing to components */
+export interface WorkspaceNameState {
   /** The generated or manually entered name */
   name: string;
   /** Whether name generation is in progress */
@@ -21,6 +22,9 @@ export interface UseWorkspaceNameReturn {
   setAutoGenerate: (enabled: boolean) => void;
   /** Set manual name (for when auto-generate is off) */
   setName: (name: string) => void;
+}
+
+export interface UseWorkspaceNameReturn extends WorkspaceNameState {
   /** Wait for any pending generation to complete */
   waitForGeneration: () => Promise<string>;
 }