🤖 perf: async workspace name generation for faster UX (#877)

Previously, workspace creation blocked for up to 10s while waiting for
the AI to generate a workspace name. This caused a poor UX where users
had to wait before seeing any result.

## Changes

- Use `generatePlaceholderName()` to create workspace immediately with a
temporary name derived from the user's message (e.g., 'add-user-auth')
- Generate AI name asynchronously in the background via
`generateAndApplyAIName()`
- If AI generation succeeds and differs from placeholder, rename
workspace using existing `rename()` method
- If AI generation or rename fails, gracefully keep the placeholder name

## UX Improvement

| Before | After |
|--------|-------|
| User waits 5-10s for AI name generation | Workspace appears instantly
|
| Loading spinner while blocked | AI name applied seamlessly when ready
|
| Network/API errors block creation | Errors handled gracefully,
placeholder name retained |

The existing `generatePlaceholderName()` function was already
implemented but unused - this change puts it to work.

_Generated with `mux`_

Author: ibetitsmike

src/browser/App.tsx

@@ -576,6 +576,9 @@ function AppInner() {
                   currentMetadata?.name ??
                   selectedWorkspace.namedWorkspacePath?.split("/").pop() ??
                   selectedWorkspace.workspaceId;
+                // Use live metadata path (updates on rename) with fallback to initial path
+                const workspacePath =
+                  currentMetadata?.namedWorkspacePath ?? selectedWorkspace.namedWorkspacePath ?? "";
                 return (
                   <ErrorBoundary
                     workspaceInfo={`${selectedWorkspace.projectName}/${workspaceName}`}
@@ -586,9 +589,10 @@ function AppInner() {
                       projectPath={selectedWorkspace.projectPath}
                       projectName={selectedWorkspace.projectName}
                       branch={workspaceName}
-                      namedWorkspacePath={selectedWorkspace.namedWorkspacePath ?? ""}
+                      namedWorkspacePath={workspacePath}
                       runtimeConfig={currentMetadata?.runtimeConfig}
                       incompatibleRuntime={currentMetadata?.incompatibleRuntime}
+                      status={currentMetadata?.status}
                     />
                   </ErrorBoundary>
                 );
@@ -609,7 +613,13 @@ function AppInner() {
                           onProviderConfig={handleProviderConfig}
                           onReady={handleCreationChatReady}
                           onWorkspaceCreated={(metadata) => {
-                            // Add to workspace metadata map
+                            // IMPORTANT: Add workspace to store FIRST (synchronous) to ensure
+                            // the store knows about it before React processes the state updates.
+                            // This prevents race conditions where the UI tries to access the
+                            // workspace before the store has created its aggregator.
+                            workspaceStore.addWorkspace(metadata);
+
+                            // Add to workspace metadata map (triggers React state update)
                             setWorkspaceMetadata((prev) =>
                               new Map(prev).set(metadata.id, metadata)
                             );

src/browser/components/AIView.tsx

@@ -55,6 +55,8 @@ interface AIViewProps {
   className?: string;
   /** If set, workspace is incompatible (from newer mux version) and this error should be displayed */
   incompatibleRuntime?: string;
+  /** If 'creating', workspace is still being set up (git operations in progress) */
+  status?: "creating";
 }
 
 const AIViewInner: React.FC<AIViewProps> = ({
@@ -65,6 +67,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   namedWorkspacePath,
   runtimeConfig,
   className,
+  status,
 }) => {
   const { api } = useAPI();
   const chatAreaRef = useRef<HTMLDivElement>(null);
@@ -637,6 +640,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
         onStartResize={isReviewTabActive ? startResize : undefined} // Pass resize handler when Review active
         isResizing={isResizing} // Pass resizing state
         onReviewNote={handleReviewNote} // Pass review note handler to append to chat
+        isCreating={status === "creating"} // Workspace still being set up
       />
     </div>
   );

src/browser/components/RightSidebar.tsx

@@ -84,6 +84,8 @@ interface RightSidebarProps {
   isResizing?: boolean;
   /** Callback when user adds a review note from Code Review tab */
   onReviewNote?: (note: string) => void;
+  /** Workspace is still being created (git operations in progress) */
+  isCreating?: boolean;
 }
 
 const RightSidebarComponent: React.FC<RightSidebarProps> = ({
@@ -95,6 +97,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   onStartResize,
   isResizing = false,
   onReviewNote,
+  isCreating = false,
 }) => {
   // Global tab preference (not per-workspace)
   const [selectedTab, setSelectedTab] = usePersistedState<TabType>("right-sidebar-tab", "costs");
@@ -298,6 +301,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                   workspacePath={workspacePath}
                   onReviewNote={onReviewNote}
                   focusTrigger={focusTrigger}
+                  isCreating={isCreating}
                 />
               </div>
             )}

src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx

@@ -45,6 +45,8 @@ interface ReviewPanelProps {
   onReviewNote?: (note: string) => void;
   /** Trigger to focus panel (increment to trigger) */
   focusTrigger?: number;
+  /** Workspace is still being created (git operations in progress) */
+  isCreating?: boolean;
 }
 
 interface ReviewSearchState {
@@ -120,6 +122,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
   workspacePath,
   onReviewNote,
   focusTrigger,
+  isCreating = false,
 }) => {
   const { api } = useAPI();
   const panelRef = useRef<HTMLDivElement>(null);
@@ -191,7 +194,8 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
 
   // Load file tree - when workspace, diffBase, or refreshTrigger changes
   useEffect(() => {
-    if (!api) return;
+    // Skip data loading while workspace is being created
+    if (!api || isCreating) return;
     let cancelled = false;
 
     const loadFileTree = async () => {
@@ -239,11 +243,13 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
     filters.diffBase,
     filters.includeUncommitted,
     refreshTrigger,
+    isCreating,
   ]);
 
   // Load diff hunks - when workspace, diffBase, selected path, or refreshTrigger changes
   useEffect(() => {
-    if (!api) return;
+    // Skip data loading while workspace is being created
+    if (!api || isCreating) return;
     let cancelled = false;
 
     const loadDiff = async () => {
@@ -333,6 +339,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
     filters.includeUncommitted,
     selectedFilePath,
     refreshTrigger,
+    isCreating,
   ]);
 
   // Persist diffBase when it changes
@@ -618,6 +625,17 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
 
+  // Show loading state while workspace is being created
+  if (isCreating) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center p-8 text-center">
+        <div className="mb-4 text-2xl">⏳</div>
+        <p className="text-secondary text-sm">Setting up workspace...</p>
+        <p className="text-secondary mt-1 text-xs">Review will be available once ready</p>
+      </div>
+    );
+  }
+
   return (
     <div
       ref={panelRef}

src/node/runtime/WorktreeRuntime.ts

@@ -177,14 +177,25 @@ export class WorktreeRuntime extends LocalBaseRuntime {
     const newPath = this.getWorkspacePath(projectPath, newName);
 
     try {
-      // Use git worktree move to rename the worktree directory
-      // This updates git's internal worktree metadata correctly
-      using proc = execAsync(`git -C "${projectPath}" worktree move "${oldPath}" "${newPath}"`);
-      await proc.result;
+      // Move the worktree directory (updates git's internal worktree metadata)
+      using moveProc = execAsync(`git -C "${projectPath}" worktree move "${oldPath}" "${newPath}"`);
+      await moveProc.result;
+
+      // Rename the git branch to match the new workspace name
+      // In mux, branch name and workspace name are always kept in sync.
+      // Run from the new worktree path since that's where the branch is checked out.
+      // Best-effort: ignore errors (e.g., branch might have a different name in test scenarios).
+      try {
+        using branchProc = execAsync(`git -C "${newPath}" branch -m "${oldName}" "${newName}"`);
+        await branchProc.result;
+      } catch {
+        // Branch rename failed - this is fine, the directory was still moved
+        // This can happen if the branch name doesn't match the old directory name
+      }
 
       return { success: true, oldPath, newPath };
     } catch (error) {
-      return { success: false, error: `Failed to move worktree: ${getErrorMessage(error)}` };
+      return { success: false, error: `Failed to rename workspace: ${getErrorMessage(error)}` };
     }
   }