feat: instant draft-first worktree creation and multi-run launcher redesign (#741)

## Summary

- **Instant worktree creation from chat draft**: selecting "+ New worktree" in the draft branch selector immediately creates a session draft and bootstraps the worktree in the background — no modal interruption
- **Redesigned multi-run launcher**: compact 2-column grid layout in a right-sized dialog with scroll shadow, sticky footer, tooltips replacing verbose descriptions, and project icons in the selector
- **Branch selector aligned across surfaces**: multi-run and agent manager branch pickers now use the shared git store and match NewWorktreeDialog behavior (same default resolution cascade, no synthetic HEAD option, all branches shown)
- **Opaque model multi-select dropdown**: fixes text bleed-through on translucent backgrounds by compositing `--surface-elevated` over `--surface-background`
- **"+ New" inline button in sidebar worktree headers** for faster worktree creation

## Why

Worktree creation was behind modal flow that interrupted the user's train of thought. The draft-first approach lets users start typing immediately while the worktree bootstraps. The multi-run launcher had an oversized form layout with redundant explanations, and its branch picker behaved differently from the main worktree dialog - causing confusion about which branches were available and what the default was.

packages/ui/src/components/views/GitView.tsx

@@ -60,7 +60,7 @@ import { BranchIntegrationSection, type OperationLogEntry } from './git/BranchIn
 import type { GitRemote } from '@/lib/gitApi';
 import { getRootBranch } from '@/lib/worktrees/worktreeStatus';
 import { cn } from '@/lib/utils';
-import { generateCommitMessage as generateSessionCommitMessage } from '@/lib/gitApi';
+import { generateCommitMessage as generateSessionCommitMessage, getGitWorktreeBootstrapStatus } from '@/lib/gitApi';
 
 type SyncAction = 'fetch' | 'pull' | 'push' | null;
 type CommitAction = 'commit' | 'commitAndPush' | null;
@@ -223,11 +223,14 @@ const normalizePath = (value?: string | null): string =>
 export const GitView: React.FC = () => {
   const { git } = useRuntimeAPIs();
   const currentDirectory = useEffectiveDirectory();
+  const [worktreeBootstrapStatus, setWorktreeBootstrapStatus] = React.useState<'pending' | 'ready' | 'failed' | null>(null);
+  const [isWaitingForGitRefreshAfterBootstrap, setIsWaitingForGitRefreshAfterBootstrap] = React.useState(false);
   const {
     currentSessionId,
     worktreeMetadata: worktreeMap,
     availableWorktrees,
     newSessionDraft,
+    setDraftBootstrapPendingDirectory,
   } = useSessionStore();
   const normalizedCurrentDirectory = normalizePath(currentDirectory);
   const inferredWorktreeMetadata = React.useMemo(() => {
@@ -287,6 +290,78 @@ export const GitView: React.FC = () => {
   const openContextDiff = useUIStore((state) => state.openContextDiff);
   const navigateToDiff = useUIStore((state) => state.navigateToDiff);
   const setRightSidebarOpen = useUIStore((state) => state.setRightSidebarOpen);
+  const previousBootstrapStatusRef = React.useRef<'pending' | 'ready' | 'failed' | null>(null);
+
+  React.useEffect(() => {
+    if (!currentDirectory) {
+      setWorktreeBootstrapStatus(null);
+      setIsWaitingForGitRefreshAfterBootstrap(false);
+      return;
+    }
+
+    let cancelled = false;
+    let timeoutId: number | null = null;
+
+    const poll = async () => {
+      try {
+        const next = await getGitWorktreeBootstrapStatus(currentDirectory);
+        if (cancelled) {
+          return;
+        }
+        setWorktreeBootstrapStatus(next.status);
+        if (next.status === 'pending') {
+          timeoutId = window.setTimeout(() => {
+            void poll();
+          }, 500);
+        }
+      } catch {
+        if (!cancelled) {
+          setWorktreeBootstrapStatus(null);
+        }
+      }
+    };
+
+    void poll();
+
+    return () => {
+      cancelled = true;
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [currentDirectory]);
+
+  React.useEffect(() => {
+    const previous = previousBootstrapStatusRef.current;
+    previousBootstrapStatusRef.current = worktreeBootstrapStatus;
+
+    if (!currentDirectory || !git) {
+      return;
+    }
+
+    if (previous === 'pending' && worktreeBootstrapStatus === 'ready') {
+      setIsWaitingForGitRefreshAfterBootstrap(true);
+      void fetchAll(currentDirectory, git).finally(() => {
+        window.setTimeout(() => {
+          setIsWaitingForGitRefreshAfterBootstrap(false);
+        }, 1200);
+      });
+    }
+
+    if (worktreeBootstrapStatus === 'failed') {
+      setDraftBootstrapPendingDirectory(null);
+      setIsWaitingForGitRefreshAfterBootstrap(false);
+    }
+  }, [currentDirectory, fetchAll, git, setDraftBootstrapPendingDirectory, worktreeBootstrapStatus]);
+
+  const normalizedDraftBootstrapPendingDirectory = normalizePath(newSessionDraft?.bootstrapPendingDirectory ?? null);
+  const isDraftBootstrapPendingForCurrentDirectory = Boolean(
+    currentDirectory && normalizedDraftBootstrapPendingDirectory && normalizedDraftBootstrapPendingDirectory === normalizePath(currentDirectory)
+  );
+  const isPendingWorktreeSetup = Boolean(
+    currentDirectory && (worktreeBootstrapStatus === 'pending' || isDraftBootstrapPendingForCurrentDirectory)
+  );
+  const shouldHideNotGitState = isPendingWorktreeSetup || isWaitingForGitRefreshAfterBootstrap;
 
   const initialSnapshot = React.useMemo(() => {
     if (!currentDirectory) return null;
@@ -1829,6 +1904,20 @@ export const GitView: React.FC = () => {
   }
 
   if (isGitRepo === false) {
+    if (shouldHideNotGitState) {
+      return (
+        <div className="flex h-full flex-col items-center justify-center px-4 text-center">
+          <RiLoader4Line className="mb-3 size-6 animate-spin text-muted-foreground" />
+          <p className="typography-ui-label font-semibold text-foreground">
+            Worktree setup is in progress
+          </p>
+          <p className="typography-meta mt-1 text-muted-foreground">
+            Git tools will appear as soon as the new worktree is ready.
+          </p>
+        </div>
+      );
+    }
+
     return (
       <div className="flex h-full flex-col items-center justify-center px-4 text-center">
         <RiGitBranchLine className="mb-3 size-6 text-muted-foreground" />

packages/ui/src/components/views/MultiRunWindow.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { RiCloseLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { MultiRunLauncher } from '@/components/multirun';
+
+interface MultiRunWindowProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initialPrompt?: string;
+}
+
+export const MultiRunWindow: React.FC<MultiRunWindowProps> = ({
+  open,
+  onOpenChange,
+  initialPrompt,
+}) => {
+  const descriptionId = React.useId();
+
+  const hasOpenFloatingMenu = React.useCallback(() => {
+    if (typeof document === 'undefined') {
+      return false;
+    }
+
+    return Boolean(
+      document.querySelector('[data-slot="dropdown-menu-content"][data-state="open"], [data-slot="select-content"][data-state="open"]')
+    );
+  }, []);
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay
+          className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
+        />
+        <DialogPrimitive.Content
+          aria-describedby={descriptionId}
+          onInteractOutside={(event) => {
+            if (hasOpenFloatingMenu()) {
+              event.preventDefault();
+            }
+          }}
+          className={cn(
+            'fixed z-50 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
+            'w-[90vw] max-w-[720px] h-[680px] max-h-[85vh]',
+            'flex flex-col rounded-xl border shadow-none overflow-hidden',
+            'bg-background'
+          )}
+        >
+          <div className="absolute right-0.5 top-0.5 z-50">
+            <button
+              type="button"
+              onClick={() => onOpenChange(false)}
+              aria-label="Close multi-run"
+              className="inline-flex h-7 w-7 items-center justify-center rounded-md p-0.5 text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+            >
+              <RiCloseLine className="h-5 w-5" />
+            </button>
+          </div>
+          <DialogPrimitive.Description id={descriptionId} className="sr-only">
+            OpenChamber Multi-Run window.
+          </DialogPrimitive.Description>
+          <MultiRunLauncher
+            initialPrompt={initialPrompt}
+            onCreated={() => onOpenChange(false)}
+            onCancel={() => onOpenChange(false)}
+            isWindowed
+          />
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+};

packages/ui/src/components/views/SettingsWindow.tsx

@@ -30,18 +30,13 @@ export const SettingsWindow: React.FC<SettingsWindowProps> = ({ open, onOpenChan
       <DialogPrimitive.Portal>
         <DialogPrimitive.Overlay
           className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
-          onPointerDown={(event) => {
-            event.stopPropagation();
-            if (hasOpenFloatingMenu()) {
-              return;
-            }
-            onOpenChange(false);
-          }}
         />
         <DialogPrimitive.Content
           aria-describedby={descriptionId}
-          onPointerDownOutside={(event) => {
-            event.preventDefault();
+          onInteractOutside={(event) => {
+            if (hasOpenFloatingMenu()) {
+              event.preventDefault();
+            }
           }}
           className={cn(
             'fixed z-50 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',

packages/ui/src/components/views/agent-manager/AgentManagerEmptyState.tsx

@@ -57,7 +57,7 @@ export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
   const [prompt, setPrompt] = React.useState('');
   const [selectedModels, setSelectedModels] = React.useState<ModelSelectionWithId[]>([]);
   const [selectedAgent, setSelectedAgent] = React.useState<string>('');
-  const [baseBranch, setBaseBranch] = React.useState('HEAD');
+  const [baseBranch, setBaseBranch] = React.useState('');
   const [attachedFiles, setAttachedFiles] = React.useState<AttachedFile[]>([]);
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [setupCommands, setSetupCommands] = React.useState<string[]>([]);
@@ -206,6 +206,7 @@ export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
     groupName.trim() && 
     prompt.trim() && 
     selectedModels.length >= 1 && 
+    baseBranch &&
     isGitRepository && 
     !isLoadingBranches
   );

packages/ui/src/components/views/index.ts

@@ -6,3 +6,4 @@ export { TerminalView } from './TerminalView';
 export { FilesView } from './FilesView';
 export { SettingsView } from './SettingsView';
 export { SettingsWindow } from './SettingsWindow';
+export { MultiRunWindow } from './MultiRunWindow';