🤖 feat: auto-generate workspace names before creation

- Add frontend name generation with debounced AI calls
- New useWorkspaceName hook with auto-generate checkbox control
- Frontend creates workspace with generated name, then sends message
- Remove legacy backend async name generation flow
- Simplify sendMessage to require workspaceId (no more null for creation)
- Remove createForFirstMessage, generateAndApplyAIName, placeholder names
- Backend uses preferred small models (Haiku, Codex-mini) for generation

_Generated with mux_

Author: ammar-agent

src/browser/components/ChatInput/CreationCenterContent.tsx

@@ -3,29 +3,23 @@ import React from "react";
 interface CreationCenterContentProps {
   projectName: string;
   isSending: boolean;
-  inputPreview?: string;
+  workspaceName?: string;
 }
 
 /**
  * Center content displayed during workspace creation
- * Shows either a loading state with the user's prompt or welcome message
+ * Shows either a loading state with the workspace name or welcome message
  */
 export function CreationCenterContent(props: CreationCenterContentProps) {
-  // Truncate long prompts for preview display
-  const truncatedPreview =
-    props.inputPreview && props.inputPreview.length > 150
-      ? props.inputPreview.slice(0, 150) + "..."
-      : props.inputPreview;
-
   return (
     <div className="flex flex-1 items-center justify-center">
       {props.isSending ? (
         <div className="max-w-xl px-8 text-center">
           <div className="bg-accent mb-4 inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent"></div>
           <h2 className="text-foreground mb-2 text-lg font-medium">Creating workspace</h2>
-          {truncatedPreview && (
+          {props.workspaceName && (
             <p className="text-muted text-sm leading-relaxed">
-              Generating name for &ldquo;{truncatedPreview}&rdquo;
+              Creating <code className="bg-separator rounded px-1">{props.workspaceName}</code>
             </p>
           )}
         </div>
@@ -34,7 +28,7 @@ export function CreationCenterContent(props: CreationCenterContentProps) {
           <h1 className="text-foreground mb-4 text-2xl font-semibold">{props.projectName}</h1>
           <p className="text-muted text-sm leading-relaxed">
             Describe what you want to build. A new workspace will be created with an automatically
-            generated branch name. Configure runtime and model options below.
+            generated name. Configure runtime and model options below.
           </p>
         </div>
       )}

src/browser/components/ChatInput/CreationControls.tsx

@@ -1,7 +1,9 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { RUNTIME_MODE, type RuntimeMode } from "@/common/types/runtime";
 import { Select } from "../Select";
 import { RuntimeIconSelector } from "../RuntimeIconSelector";
+import { Loader2 } from "lucide-react";
+import { cn } from "@/common/lib/utils";
 
 interface CreationControlsProps {
   branches: string[];
@@ -17,61 +19,126 @@ interface CreationControlsProps {
   /** 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;
 }
 
 /**
  * Additional controls shown only during workspace creation
  * - Trunk branch selector (which branch to fork from) - hidden for Local runtime
  * - Runtime mode (Local, Worktree, SSH)
+ * - Workspace name (auto-generated with manual override)
  */
 export function CreationControls(props: CreationControlsProps) {
   // Local runtime doesn't need a trunk branch selector (uses project dir as-is)
   const showTrunkBranchSelector =
     props.branches.length > 0 && props.runtimeMode !== RUNTIME_MODE.LOCAL;
 
+  const { onNameChange } = props;
+  const handleNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onNameChange(e.target.value);
+    },
+    [onNameChange]
+  );
+
   return (
-    <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
-      {/* Runtime Selector - icon-based with tooltips */}
-      <RuntimeIconSelector
-        value={props.runtimeMode}
-        onChange={props.onRuntimeModeChange}
-        defaultMode={props.defaultRuntimeMode}
-        onSetDefault={props.onSetDefaultRuntime}
-        disabled={props.disabled}
-      />
+    <div className="flex flex-col gap-2">
+      {/* First row: Runtime, Branch, SSH */}
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+        {/* Runtime Selector - icon-based with tooltips */}
+        <RuntimeIconSelector
+          value={props.runtimeMode}
+          onChange={props.onRuntimeModeChange}
+          defaultMode={props.defaultRuntimeMode}
+          onSetDefault={props.onSetDefaultRuntime}
+          disabled={props.disabled}
+        />
+
+        {/* Trunk Branch Selector - hidden for Local runtime */}
+        {showTrunkBranchSelector && (
+          <div
+            className="flex items-center gap-1"
+            data-component="TrunkBranchGroup"
+            data-tutorial="trunk-branch"
+          >
+            <label htmlFor="trunk-branch" className="text-muted text-xs">
+              From:
+            </label>
+            <Select
+              id="trunk-branch"
+              value={props.trunkBranch}
+              options={props.branches}
+              onChange={props.onTrunkBranchChange}
+              disabled={props.disabled}
+              className="max-w-[120px]"
+            />
+          </div>
+        )}
 
-      {/* Trunk Branch Selector - hidden for Local runtime */}
-      {showTrunkBranchSelector && (
-        <div
-          className="flex items-center gap-1"
-          data-component="TrunkBranchGroup"
-          data-tutorial="trunk-branch"
-        >
-          <label htmlFor="trunk-branch" className="text-muted text-xs">
-            From:
-          </label>
-          <Select
-            id="trunk-branch"
-            value={props.trunkBranch}
-            options={props.branches}
-            onChange={props.onTrunkBranchChange}
+        {/* SSH Host Input - after From selector */}
+        {props.runtimeMode === RUNTIME_MODE.SSH && (
+          <input
+            type="text"
+            value={props.sshHost}
+            onChange={(e) => props.onSshHostChange(e.target.value)}
+            placeholder="user@host"
             disabled={props.disabled}
-            className="max-w-[120px]"
+            className="bg-separator text-foreground border-border-medium focus:border-accent w-32 rounded border px-1 py-0.5 text-xs focus:outline-none disabled:opacity-50"
           />
+        )}
+      </div>
+
+      {/* Second row: Workspace name with auto-generate checkbox */}
+      <div className="flex items-center gap-2" data-component="WorkspaceNameGroup">
+        <label htmlFor="workspace-name" className="text-muted text-xs whitespace-nowrap">
+          Name:
+        </label>
+        <div className="relative max-w-xs flex-1">
+          <input
+            id="workspace-name"
+            type="text"
+            value={props.workspaceName}
+            onChange={handleNameChange}
+            placeholder={props.isGeneratingName ? "Generating..." : "workspace-name"}
+            disabled={props.disabled || props.autoGenerateName}
+            className={cn(
+              "bg-separator text-foreground border-border-medium focus:border-accent w-full rounded border px-2 py-0.5 pr-6 text-xs focus:outline-none disabled:opacity-50",
+              props.nameError && "border-red-500"
+            )}
+          />
+          {/* Loading indicator when generating */}
+          {props.isGeneratingName && (
+            <div className="absolute top-1/2 right-1 -translate-y-1/2">
+              <Loader2 className="text-muted h-3 w-3 animate-spin" />
+            </div>
+          )}
         </div>
-      )}
+        {/* Auto-generate checkbox */}
+        <label className="text-muted flex items-center gap-1 text-[10px] whitespace-nowrap">
+          <input
+            type="checkbox"
+            checked={props.autoGenerateName}
+            onChange={(e) => props.onAutoGenerateChange(e.target.checked)}
+            disabled={props.disabled}
+            className="h-3 w-3"
+          />
+          auto
+        </label>
+      </div>
 
-      {/* SSH Host Input - after From selector */}
-      {props.runtimeMode === RUNTIME_MODE.SSH && (
-        <input
-          type="text"
-          value={props.sshHost}
-          onChange={(e) => props.onSshHostChange(e.target.value)}
-          placeholder="user@host"
-          disabled={props.disabled}
-          className="bg-separator text-foreground border-border-medium focus:border-accent w-32 rounded border px-1 py-0.5 text-xs focus:outline-none disabled:opacity-50"
-        />
-      )}
+      {/* Error display */}
+      {props.nameError && <div className="text-xs text-red-500">{props.nameError}</div>}
     </div>
   );
 }

src/browser/components/ChatInput/index.tsx

@@ -244,12 +244,14 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       ? {
           projectPath: props.projectPath,
           onWorkspaceCreated: props.onWorkspaceCreated,
+          message: input,
         }
       : {
           // Dummy values for workspace variant (never used)
           projectPath: "",
           // eslint-disable-next-line @typescript-eslint/no-empty-function
           onWorkspaceCreated: () => {},
+          message: "",
         }
   );
 
@@ -1190,7 +1192,9 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         <CreationCenterContent
           projectName={props.projectName}
           isSending={creationState.isSending || isSending}
-          inputPreview={creationState.isSending || isSending ? input : undefined}
+          workspaceName={
+            creationState.isSending || isSending ? creationState.workspaceName : undefined
+          }
         />
       )}
 
@@ -1400,6 +1404,12 @@ 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}
               />
             )}
           </div>