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/multirun/AgentSelector.tsx

@@ -7,6 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
 import { useConfigStore } from '@/stores/useConfigStore';
 
 export interface AgentSelectorProps {
@@ -85,7 +86,14 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
       <SelectTrigger
         id={id}
         size="lg"
-        className={className ?? 'max-w-full typography-meta text-foreground'}
+        className={cn(
+          'max-w-full typography-meta text-foreground !border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70 data-[state=open]:!bg-[var(--interactive-active)]/70',
+          className,
+        )}
+        style={{
+          backdropFilter: 'blur(10px)',
+          WebkitBackdropFilter: 'blur(10px)',
+        }}
       >
         <SelectValue placeholder="Select an agent" />
       </SelectTrigger>

packages/ui/src/components/multirun/BranchSelector.tsx

@@ -9,8 +9,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { checkIsGitRepository, getGitBranches } from '@/lib/gitApi';
-import { resolveRootTrackingRemote } from '@/lib/worktrees/worktreeCreate';
+import { useGitStore, useGitBranches } from '@/stores/useGitStore';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import { getRootBranch } from '@/lib/worktrees/worktreeStatus';
+
+/** localStorage key matching NewWorktreeDialog */
+const LAST_SOURCE_BRANCH_KEY = 'oc:lastWorktreeSourceBranch';
 
 export type WorktreeBaseOption = {
   value: string;
@@ -34,125 +38,60 @@ export interface BranchSelectorProps {
 }
 
 export interface BranchSelectorState {
-  branches: WorktreeBaseOption[];
+  localBranches: string[];
+  remoteBranches: string[];
   isLoading: boolean;
   isGitRepository: boolean | null;
 }
 
-const parseTrackingRemote = (tracking: string | null | undefined): string | null => {
-  const value = String(tracking || '').trim().replace(/^remotes\//, '');
-  if (!value) {
-    return null;
-  }
-  const slashIndex = value.indexOf('/');
-  if (slashIndex <= 0) {
-    return null;
-  }
-  return value.slice(0, slashIndex);
-};
-
 /**
  * Hook to load available git branches for a directory.
+ * Uses the shared useGitStore (same as NewWorktreeDialog).
  */
 // eslint-disable-next-line react-refresh/only-export-components -- Hook is tightly coupled with BranchSelector
 export function useBranchOptions(directory: string | null): BranchSelectorState {
-  const [branches, setBranches] = React.useState<WorktreeBaseOption[]>([
-    { value: 'HEAD', label: 'Current (HEAD)', group: 'special' },
-  ]);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isGitRepository, setIsGitRepository] = React.useState<boolean | null>(null);
+  const { git } = useRuntimeAPIs();
+  const branches = useGitBranches(directory);
+  const isLoading = useGitStore((state) => state.isLoadingBranches);
+  const fetchBranches = useGitStore((state) => state.fetchBranches);
 
+  // Fetch branches if not cached
   React.useEffect(() => {
-    let cancelled = false;
+    if (!directory || !git) return;
+    if (branches?.all) return; // Already cached
+    void fetchBranches(directory, git);
+  }, [directory, git, branches?.all, fetchBranches]);
 
-    if (!directory) {
-      setIsGitRepository(null);
-      setIsLoading(false);
-      setBranches([{ value: 'HEAD', label: 'Current (HEAD)', group: 'special' }]);
-      return;
-    }
+  // Compute local and remote branch lists (same as NewWorktreeDialog)
+  const localBranches = React.useMemo(() => {
+    if (!branches?.all) return [];
+    return branches.all
+      .filter((branchName: string) => !branchName.startsWith('remotes/'))
+      .sort();
+  }, [branches]);
 
-    setIsLoading(true);
-    setIsGitRepository(null);
+  const remoteBranches = React.useMemo(() => {
+    if (!branches?.all) return [];
+    return branches.all
+      .filter((branchName: string) => branchName.startsWith('remotes/'))
+      .map((branchName: string) => branchName.replace(/^remotes\//, ''))
+      .sort();
+  }, [branches]);
 
-    (async () => {
-      try {
-        const isGit = await checkIsGitRepository(directory);
-        if (cancelled) return;
+  // isGitRepository: true if we got branches, false if fetch returned empty, null if not yet loaded
+  const isGitRepository = React.useMemo<boolean | null>(() => {
+    if (!directory) return null;
+    if (isLoading) return null;
+    if (!branches) return null;
+    return Boolean(branches.all);
+  }, [directory, isLoading, branches]);
 
-        setIsGitRepository(isGit);
-
-        if (!isGit) {
-          setBranches([{ value: 'HEAD', label: 'Current (HEAD)', group: 'special' }]);
-          return;
-        }
-
-        const branchData = await getGitBranches(directory).catch(() => null);
-        if (cancelled) return;
-
-        const rootTrackingRemote = await resolveRootTrackingRemote(directory).catch(() => null);
-        if (cancelled) return;
-
-        const worktreeBaseOptions: WorktreeBaseOption[] = [];
-        const headLabel = branchData?.current ? `Current (HEAD: ${branchData.current})` : 'Current (HEAD)';
-        worktreeBaseOptions.push({ value: 'HEAD', label: headLabel, group: 'special' });
-
-        if (branchData) {
-          const localBranches = branchData.all
-            .filter((branchName) => !branchName.startsWith('remotes/'))
-            .filter((branchName) => {
-              if (!rootTrackingRemote) {
-                return true;
-              }
-              const tracking = branchData.branches?.[branchName]?.tracking;
-              const trackingRemote = parseTrackingRemote(tracking);
-              if (!trackingRemote) {
-                return true;
-              }
-              return trackingRemote === rootTrackingRemote;
-            })
-            .sort((a, b) => a.localeCompare(b));
-          localBranches.forEach((branchName) => {
-            worktreeBaseOptions.push({ value: branchName, label: branchName, group: 'local' });
-          });
-
-          const remoteBranches = branchData.all
-            .filter((branchName) => branchName.startsWith('remotes/'))
-            .map((branchName) => branchName.replace(/^remotes\//, ''))
-            .filter((branchName) => {
-              if (!rootTrackingRemote) {
-                return true;
-              }
-              const slashIndex = branchName.indexOf('/');
-              if (slashIndex <= 0) {
-                return false;
-              }
-              return branchName.slice(0, slashIndex) === rootTrackingRemote;
-            })
-            .sort((a, b) => a.localeCompare(b));
-          remoteBranches.forEach((branchName) => {
-            worktreeBaseOptions.push({ value: branchName, label: branchName, group: 'remote' });
-          });
-        }
-
-        setBranches(worktreeBaseOptions);
-      } finally {
-        if (!cancelled) {
-          setIsLoading(false);
-        }
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [directory]);
-
-  return { branches, isLoading, isGitRepository };
+  return { localBranches, remoteBranches, isLoading, isGitRepository };
 }
 
 /**
- * Branch selector dropdown for selecting a base branch for worktree creation.
+ * Branch selector dropdown for selecting a source branch for worktree creation.
+ * Matches the NewWorktreeDialog source branch selector exactly.
  */
 export const BranchSelector: React.FC<BranchSelectorProps> = ({
   directory,
@@ -162,23 +101,46 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
   disabled,
   id,
 }) => {
-  const { branches, isLoading, isGitRepository } = useBranchOptions(directory);
-  const selectedLabel = React.useMemo(() => {
-    return branches.find((option) => option.value === value)?.label ?? null;
-  }, [branches, value]);
+  const { localBranches, remoteBranches, isLoading, isGitRepository } = useBranchOptions(directory);
+  const allBranches = React.useMemo(
+    () => [...localBranches, ...remoteBranches.map(b => `remotes/${b}`)],
+    [localBranches, remoteBranches],
+  );
 
-  // Update value if it's no longer valid
+  // Resolve default source branch (same priority as NewWorktreeDialog)
   React.useEffect(() => {
-    const isValid = branches.some((option) => option.value === value);
-    if (!isValid && branches.length > 0) {
-      onChange('HEAD');
-    }
-  }, [branches, value, onChange]);
+    if (disabled || isLoading || allBranches.length === 0) return;
+    // If current value is valid, keep it
+    if (value && allBranches.includes(value)) return;
+
+    const resolve = async () => {
+      try {
+        const rootBranch = directory ? await getRootBranch(directory).catch(() => null) : null;
+        const saved = localStorage.getItem(LAST_SOURCE_BRANCH_KEY);
+
+        if (saved && allBranches.includes(saved)) {
+          onChange(saved);
+        } else if (rootBranch && allBranches.includes(rootBranch)) {
+          onChange(rootBranch);
+        } else if (allBranches.includes('main')) {
+          onChange('main');
+        } else if (allBranches.includes('master')) {
+          onChange('master');
+        } else if (allBranches[0]) {
+          onChange(allBranches[0]);
+        }
+      } catch {
+        // ignore
+      }
+    };
+
+    void resolve();
+  }, [allBranches, directory, disabled, isLoading, onChange, value]);
 
   const isDisabled = disabled || !isGitRepository || isLoading;
 
   return (
-    <div className="space-y-2">
+    <div>
       <Select
         value={value}
         onValueChange={onChange}
@@ -187,62 +149,51 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
         <SelectTrigger
           id={id}
           size="lg"
-          className={className ?? 'max-w-full typography-meta text-foreground'}
+          className={className ?? 'w-fit typography-meta text-foreground'}
         >
-          {selectedLabel ? (
-            <SelectValue>{selectedLabel}</SelectValue>
-          ) : (
-            <SelectValue placeholder={isLoading ? 'Loading branches…' : 'Select a branch'} />
-          )}
+          <SelectValue placeholder={isLoading ? 'Loading branches…' : 'Select source branch...'} />
         </SelectTrigger>
-        <SelectContent fitContent>
-          <SelectGroup>
-            <SelectLabel>Default</SelectLabel>
-            {branches
-              .filter((option) => option.group === 'special')
-              .map((option) => (
-                <SelectItem key={option.value} value={option.value} className="w-auto whitespace-nowrap">
-                  {option.label}
-                </SelectItem>
-              ))}
-          </SelectGroup>
-
-          {branches.some((option) => option.group === 'local') ? (
+        <SelectContent className="max-h-[280px] max-w-[320px]">
+          {isLoading ? (
+            <div className="px-2 py-4 text-center typography-meta text-muted-foreground">
+              Loading branches...
+            </div>
+          ) : localBranches.length === 0 && remoteBranches.length === 0 ? (
+            <div className="px-2 py-4 text-center typography-meta text-muted-foreground">
+              No branches found
+            </div>
+          ) : (
             <>
-              <SelectSeparator />
-              <SelectGroup>
-                <SelectLabel>Local branches</SelectLabel>
-                {branches
-                  .filter((option) => option.group === 'local')
-                  .map((option) => (
-                    <SelectItem key={option.value} value={option.value} className="w-auto whitespace-nowrap">
-                      {option.label}
+              {localBranches.length > 0 && (
+                <SelectGroup>
+                  <SelectLabel className="font-semibold text-foreground">Local branches</SelectLabel>
+                  {localBranches.map((branch) => (
+                    <SelectItem key={branch} value={branch} className="whitespace-normal break-all">
+                      {branch}
                     </SelectItem>
                   ))}
-              </SelectGroup>
-            </>
-          ) : null}
-
-          {branches.some((option) => option.group === 'remote') ? (
-            <>
-              <SelectSeparator />
-              <SelectGroup>
-                <SelectLabel>Remote branches</SelectLabel>
-                {branches
-                  .filter((option) => option.group === 'remote')
-                  .map((option) => (
-                    <SelectItem key={option.value} value={option.value} className="w-auto whitespace-nowrap">
-                      {option.label}
+                </SelectGroup>
+              )}
+              {localBranches.length > 0 && remoteBranches.length > 0 && (
+                <SelectSeparator />
+              )}
+              {remoteBranches.length > 0 && (
+                <SelectGroup>
+                  <SelectLabel className="font-semibold text-foreground">Remote branches</SelectLabel>
+                  {remoteBranches.map((branch) => (
+                    <SelectItem key={`remotes/${branch}`} value={`remotes/${branch}`} className="whitespace-normal break-all">
+                      {branch}
                     </SelectItem>
                   ))}
-              </SelectGroup>
+                </SelectGroup>
+              )}
             </>
-          ) : null}
+          )}
         </SelectContent>
       </Select>
-      
+
       {isGitRepository === false && (
-        <p className="typography-micro text-muted-foreground/70">Not in a git repository.</p>
+        <p className="typography-micro text-muted-foreground/70 mt-2">Not in a git repository.</p>
       )}
     </div>
   );

packages/ui/src/components/multirun/ModelMultiSelect.tsx

@@ -97,6 +97,8 @@ export interface ModelMultiSelectProps {
   showChips?: boolean;
   /** Maximum models allowed */
   maxModels?: number;
+  /** Optional className for add model trigger button */
+  addButtonClassName?: string;
 }
 
 /**
@@ -111,6 +113,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
   addButtonLabel = 'Add model',
   showChips = true,
   maxModels,
+  addButtonClassName,
 }) => {
   const { providers, modelsMetadata } = useConfigStore();
   const { favoriteModelsList, recentModelsList } = useModelLists();
@@ -201,15 +204,29 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
 
   const hasResults = filteredFavorites.length > 0 || filteredRecents.length > 0 || filteredProviders.length > 0;
 
-  // Calculate available height when dropdown opens
+  // Calculate available height: space above trigger within visible area
   React.useEffect(() => {
-    if (isOpen && triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
-      // Space above trigger minus padding from top edge
-      const spaceAbove = rect.top - 100;
-      // Cap at 400px max, minimum 150px
-      setAvailableHeight(Math.max(150, Math.min(400, spaceAbove)));
+    if (!isOpen || !triggerRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+
+    // Find the nearest dialog or overflow ancestor to constrain within
+    let container: HTMLElement | null = triggerRef.current.parentElement;
+    while (container) {
+      if (container.getAttribute('role') === 'dialog' || container.hasAttribute('data-scroll-shadow')) {
+        break;
+      }
+      const style = getComputedStyle(container);
+      if (style.overflow === 'auto' || style.overflow === 'hidden' || style.overflowY === 'auto' || style.overflowY === 'hidden') {
+        break;
+      }
+      container = container.parentElement;
     }
+
+    const topBound = container ? container.getBoundingClientRect().top : 0;
+    const spaceAbove = triggerRect.top - topBound - 16;
+    // Cap: min 150, max 300
+    setAvailableHeight(Math.max(150, Math.min(300, spaceAbove)));
   }, [isOpen]);
 
   // Focus search input when opened
@@ -308,7 +325,15 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
             type="button"
             variant="outline"
             size="sm"
-            className={CHIP_HEIGHT_CLASS}
+            className={cn(
+              CHIP_HEIGHT_CLASS,
+              '!border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70',
+              addButtonClassName,
+            )}
+            style={{
+              backdropFilter: 'blur(10px)',
+              WebkitBackdropFilter: 'blur(10px)',
+            }}
             onClick={() => setIsOpen(!isOpen)}
           >
             <RiAddLine className="h-3.5 w-3.5 mr-1" />
@@ -379,7 +404,12 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
             let currentFlatIndex = 0;
 
             return (
-              <div style={{ backgroundColor: 'var(--surface-elevated)' }} className="absolute bottom-full left-0 mb-1 z-50 border border-border/30 rounded-xl overflow-hidden shadow-none w-[min(380px,calc(100vw-2rem))] flex flex-col">
+              <div
+                className="absolute bottom-full left-0 mb-1 z-50 w-[min(380px,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] flex flex-col overflow-hidden rounded-xl border border-border/50 shadow-lg"
+                style={{
+                  background: 'linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))',
+                }}
+              >
                 {/* Search input */}
                 <div className="p-2 border-b border-border/40">
                   <div className="relative">
@@ -411,10 +441,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
                     {/* Favorites Section */}
                     {filteredFavorites.length > 0 && (
                       <>
-                        <div
-                          style={{ backgroundColor: 'var(--surface-elevated)' }}
-                          className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30"
-                        >
+                        <div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider sticky top-0 z-10 -mx-1 flex items-center gap-2 border-b border-border/30 px-3 py-1.5 [background:linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))]">
                           <RiStarFill className="h-4 w-4 text-primary" />
                           Favorites
                         </div>
@@ -429,10 +456,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
                     {filteredRecents.length > 0 && (
                       <>
                         {filteredFavorites.length > 0 && <div className="h-px bg-border/40 my-1" />}
-                        <div
-                          style={{ backgroundColor: 'var(--surface-elevated)' }}
-                          className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30"
-                        >
+                        <div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider sticky top-0 z-10 -mx-1 flex items-center gap-2 border-b border-border/30 px-3 py-1.5 [background:linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))]">
                           <RiTimeLine className="h-4 w-4" />
                           Recent
                         </div>
@@ -452,7 +476,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
                     {filteredProviders.map((provider, index) => (
                       <React.Fragment key={provider.id}>
                         {index > 0 && <div className="h-px bg-border/40 my-1" />}
-                        <div style={{ backgroundColor: 'var(--surface-elevated)' }} className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30">
+                        <div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider sticky top-0 z-10 -mx-1 flex items-center gap-2 border-b border-border/30 px-3 py-1.5 [background:linear-gradient(var(--surface-elevated),var(--surface-elevated)),linear-gradient(var(--surface-background),var(--surface-background))]">
                           <ProviderLogo
                             providerId={provider.id}
                             className="h-4 w-4 flex-shrink-0"
@@ -513,7 +537,14 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
                         onUpdate(index, { ...model, variant: nextVariant });
                       }}
                     >
-                      <SelectTrigger size="chip" className="px-2 gap-1.5 rounded-md bg-interactive-selection/20 border-border/30 hover:bg-interactive-hover/30 typography-meta font-medium text-foreground">
+                      <SelectTrigger
+                        size="chip"
+                        className="px-2 gap-1.5 rounded-md !border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70 typography-meta font-medium text-foreground"
+                        style={{
+                          backdropFilter: 'blur(10px)',
+                          WebkitBackdropFilter: 'blur(10px)',
+                        }}
+                      >
                         <RiBrainAi3Line
                           className={cn(
                             'h-3.5 w-3.5 flex-shrink-0',

packages/ui/src/components/multirun/MultiRunLauncher.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import { RiAddLine, RiArrowDownSLine, RiAttachment2, RiCloseLine, RiFileImageLine, RiFileLine } from '@remixicon/react';
+import { RiAddLine, RiArrowDownSLine, RiAttachment2, RiCloseLine, RiFileImageLine, RiFileLine, RiFolderLine, RiInformationLine, RiTerminalLine } from '@remixicon/react';
 import { toast } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { cn } from '@/lib/utils';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { ScrollShadow } from '@/components/ui/ScrollShadow';
+import { cn, formatDirectoryName } from '@/lib/utils';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { useMultiRunStore } from '@/stores/useMultiRunStore';
 import { useSessionStore } from '@/stores/useSessionStore';
@@ -18,6 +20,9 @@ import { ModelMultiSelect, generateInstanceId, type ModelSelectionWithId } from
 import { BranchSelector, useBranchOptions } from './BranchSelector';
 import { AgentSelector } from './AgentSelector';
 import { isDesktopShell } from '@/lib/desktop';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { PROJECT_ICON_MAP, PROJECT_COLOR_MAP, getProjectIconImageUrl } from '@/lib/projectMeta';
+import type { ProjectEntry } from '@/lib/api/types';
 
 /** Max file size in bytes (10MB) */
 const MAX_FILE_SIZE = 10 * 1024 * 1024;
@@ -41,16 +46,49 @@ interface MultiRunLauncherProps {
   onCreated?: () => void;
   /** Called when user cancels */
   onCancel?: () => void;
+  /** Rendered inside dialog window with no local header */
+  isWindowed?: boolean;
 }
 
+/** Info tooltip - small icon that shows helper text on hover */
+const InfoTip: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <Tooltip delayDuration={200}>
+    <TooltipTrigger asChild>
+      <button type="button" tabIndex={-1} className="inline-flex items-center justify-center text-muted-foreground/50 hover:text-muted-foreground transition-colors">
+        <RiInformationLine className="h-3.5 w-3.5" />
+      </button>
+    </TooltipTrigger>
+    <TooltipContent side="top" className="max-w-[240px]">
+      {children}
+    </TooltipContent>
+  </Tooltip>
+);
+
+/** Compact field label */
+const FieldLabel: React.FC<{
+  htmlFor?: string;
+  required?: boolean;
+  children: React.ReactNode;
+  info?: React.ReactNode;
+}> = ({ htmlFor, required, children, info }) => (
+  <div className="flex items-center gap-1.5">
+    <label htmlFor={htmlFor} className="typography-meta font-medium text-foreground">
+      {children}
+      {required && <span className="text-destructive ml-0.5">*</span>}
+    </label>
+    {info && info}
+  </div>
+);
+
 /**
  * Launcher form for creating a new Multi-Run group.
- * Replaces the main content area (tabs) with a form.
+ * Compact, centered card layout with adaptive grid.
  */
 export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
   initialPrompt,
   onCreated,
   onCancel,
+  isWindowed = false,
 }) => {
   const [name, setName] = React.useState('');
   const [prompt, setPrompt] = React.useState(() => initialPrompt ?? '');
@@ -64,6 +102,7 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
   const fileInputRef = React.useRef<HTMLInputElement>(null);
 
   const currentDirectory = useDirectoryStore((state) => state.currentDirectory ?? null);
+  const homeDirectory = useDirectoryStore((state) => state.homeDirectory ?? null);
   
   const vscodeWorkspaceFolder = React.useMemo(() => {
     if (typeof window === 'undefined') {
@@ -75,13 +114,72 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
 
   // Get project directory for setup commands
   const activeProjectId = useProjectsStore((state) => state.activeProjectId);
+  const setActiveProjectIdOnly = useProjectsStore((state) => state.setActiveProjectIdOnly);
   const projects = useProjectsStore((state) => state.projects);
-  const projectRef = React.useMemo<ProjectRef | null>(() => {
+  const [selectedProjectId, setSelectedProjectId] = React.useState<string | null>(() => activeProjectId ?? null);
+
+  React.useEffect(() => {
     if (activeProjectId) {
-      const project = projects.find((p) => p.id === activeProjectId);
-      if (project?.path) {
-        return { id: project.id, path: project.path };
-      }
+      setSelectedProjectId(activeProjectId);
+      return;
+    }
+    if (!selectedProjectId && projects.length > 0) {
+      setSelectedProjectId(projects[0].id);
+    }
+  }, [activeProjectId, projects, selectedProjectId]);
+
+  const selectedProject = React.useMemo(() => {
+    if (!selectedProjectId) {
+      return null;
+    }
+    return projects.find((project) => project.id === selectedProjectId) ?? null;
+  }, [projects, selectedProjectId]);
+
+  const selectedProjectDirectory = selectedProject?.path ?? currentDirectory;
+
+  const handleProjectChange = React.useCallback((projectId: string) => {
+    setSelectedProjectId(projectId);
+    if (projectId !== activeProjectId) {
+      setActiveProjectIdOnly(projectId);
+    }
+  }, [activeProjectId, setActiveProjectIdOnly]);
+
+  const { currentTheme } = useThemeSystem();
+
+  const renderProjectLabel = React.useCallback((project: ProjectEntry) => {
+    const displayLabel = project.label?.trim() || formatDirectoryName(project.path, homeDirectory);
+    const imageUrl = getProjectIconImageUrl(
+      { id: project.id, iconImage: project.iconImage ?? null },
+      {
+        themeVariant: currentTheme.metadata.variant,
+        iconColor: currentTheme.colors.surface.foreground,
+      },
+    );
+    const ProjectIcon = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
+    const iconColor = project.color ? PROJECT_COLOR_MAP[project.color] : undefined;
+
+    return (
+      <span className="inline-flex min-w-0 items-center gap-1.5">
+        {imageUrl ? (
+          <span
+            className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center overflow-hidden rounded-[3px]"
+            style={project.iconBackground ? { backgroundColor: project.iconBackground } : undefined}
+          >
+            <img src={imageUrl} alt="" className="h-full w-full object-contain" draggable={false} />
+          </span>
+        ) : ProjectIcon ? (
+          <ProjectIcon className="h-3.5 w-3.5 shrink-0" style={iconColor ? { color: iconColor } : undefined} />
+        ) : (
+          <RiFolderLine className="h-3.5 w-3.5 shrink-0 text-muted-foreground/80" style={iconColor ? { color: iconColor } : undefined} />
+        )}
+        <span className="truncate">{displayLabel}</span>
+      </span>
+    );
+  }, [homeDirectory, currentTheme.metadata.variant, currentTheme.colors.surface.foreground]);
+
+  const projectRef = React.useMemo<ProjectRef | null>(() => {
+    if (selectedProject?.path) {
+      return { id: selectedProject.id, path: selectedProject.path };
     }
 
     const base = currentDirectory ?? vscodeWorkspaceFolder;
@@ -90,7 +188,7 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
     }
 
     return { id: `path:${base}`, path: base };
-  }, [activeProjectId, projects, currentDirectory, vscodeWorkspaceFolder]);
+  }, [selectedProject, currentDirectory, vscodeWorkspaceFolder]);
 
   const [isDesktopApp, setIsDesktopApp] = React.useState<boolean>(() => {
     if (typeof window === 'undefined') {
@@ -193,8 +291,8 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
   }, [onCancel]);
 
   // Use the BranchSelector hook for branch state management
-  const [worktreeBaseBranch, setWorktreeBaseBranch] = React.useState<string>('HEAD');
-  const { isLoading: isLoadingWorktreeBaseBranches, isGitRepository } = useBranchOptions(currentDirectory);
+  const [worktreeBaseBranch, setWorktreeBaseBranch] = React.useState<string>('');
+  const { isLoading: isLoadingWorktreeBaseBranches, isGitRepository } = useBranchOptions(selectedProjectDirectory);
 
   const createMultiRun = useMultiRunStore((state) => state.createMultiRun);
   const error = useMultiRunStore((state) => state.error);
@@ -311,6 +409,10 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
     clearError();
 
     try {
+      if (selectedProjectId && selectedProjectId !== activeProjectId) {
+        setActiveProjectIdOnly(selectedProjectId);
+      }
+
       // Strip instanceId before passing to store (UI-only field)
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const modelsForStore: MultiRunModelSelection[] = selectedModels.map(({ instanceId: _instanceId, ...rest }) => rest);
@@ -350,254 +452,275 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
   };
 
   const isValid = Boolean(
-    name.trim() && prompt.trim() && selectedModels.length >= 2 && isGitRepository && !isLoadingWorktreeBaseBranches
+    name.trim() && prompt.trim() && selectedModels.length >= 2 && worktreeBaseBranch && isGitRepository && !isLoadingWorktreeBaseBranches
   );
 
+  const configuredSetupCount = setupCommands.filter(cmd => cmd.trim()).length;
+
   return (
-    <div className="flex flex-col h-full bg-background">
-      {/* Header - same height as app header (h-12 = 48px) */}
-      <header
-        onMouseDown={handleDragStart}
-        className={cn(
-          'relative flex h-12 items-center justify-center border-b app-region-drag select-none',
-          desktopHeaderPaddingClass,
-          macosHeaderSizeClass,
-        )}
-        style={{ borderColor: 'var(--interactive-border)' }}
-      >
-        <h1 className="typography-ui-label font-medium">New Multi-Run</h1>
-        {onCancel && (
-          <div className="absolute right-0 flex items-center pr-3">
-            <Tooltip delayDuration={500}>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={onCancel}
-                  aria-label="Close (Esc)"
-                  className="inline-flex h-9 w-9 items-center justify-center p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary app-region-no-drag"
-                >
-                  <RiCloseLine className="h-5 w-5" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Close (Esc)</p>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        )}
-      </header>
-
-      {/* Content with chat-column max-width */}
-      <div className="flex-1 overflow-auto">
-        <div className="chat-column py-6">
-          <form onSubmit={handleSubmit} className="space-y-6" data-keyboard-avoid="true">
-            {/* Group name (required) */}
-            <div className="space-y-2">
-              <label htmlFor="group-name" className="typography-ui-label font-medium text-foreground">
-                Group name <span className="text-destructive">*</span>
-              </label>
-              <Input
-                id="group-name"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="e.g. feature-auth, bugfix-login"
-                className="typography-body max-w-full sm:max-w-xs"
-                required
-              />
-              <p className="typography-micro text-muted-foreground">
-                Used for worktree directory and branch names
-              </p>
+    <form onSubmit={handleSubmit} className="flex flex-col h-full bg-background" data-keyboard-avoid="true">
+      {!isWindowed ? (
+        <header
+          onMouseDown={handleDragStart}
+          className={cn(
+            'relative flex h-12 shrink-0 items-center justify-center border-b app-region-drag select-none',
+            desktopHeaderPaddingClass,
+            macosHeaderSizeClass,
+          )}
+          style={{ borderColor: 'var(--interactive-border)' }}
+        >
+          <h1 className="typography-ui-label font-medium">New Multi-Run</h1>
+          {onCancel && (
+            <div className="absolute right-0 flex items-center pr-3">
+              <Tooltip delayDuration={500}>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={onCancel}
+                    aria-label="Close (Esc)"
+                    className="inline-flex h-9 w-9 items-center justify-center p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary app-region-no-drag"
+                  >
+                    <RiCloseLine className="h-5 w-5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Close (Esc)</p>
+                </TooltipContent>
+              </Tooltip>
             </div>
+          )}
+        </header>
+      ) : null}
 
-            {/* Worktree creation */}
-            <div className="space-y-3">
-              <div className="space-y-1">
-                <p className="typography-ui-label font-medium text-foreground">Worktrees</p>
-                <p className="typography-micro text-muted-foreground">
-                  Create one worktree per model by creating a new branch from a base branch.
-                </p>
+      {/* Scrollable content */}
+      <ScrollShadow className="flex-1 min-h-0 overflow-auto" size={64} hideTopShadow>
+        <div className="mx-auto w-full max-w-2xl px-4 sm:px-6 py-5">
+          <div className="flex flex-col gap-5">
+
+            {/* ── Config grid: 2-column on sm+, single column on narrow ── */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-3">
+              {/* Project */}
+              <div className="flex flex-col gap-1">
+                <FieldLabel htmlFor="multirun-project" required>Project</FieldLabel>
+                {projects.length > 0 ? (
+                  <Select
+                    value={selectedProjectId ?? undefined}
+                    onValueChange={handleProjectChange}
+                  >
+                    <SelectTrigger id="multirun-project" size="lg" className="w-fit max-w-full">
+                      {selectedProject ? (
+                        <SelectValue>{renderProjectLabel(selectedProject)}</SelectValue>
+                      ) : (
+                        <SelectValue placeholder="Select project" />
+                      )}
+                    </SelectTrigger>
+                    <SelectContent fitContent>
+                      {projects.map((project) => (
+                        <SelectItem key={project.id} value={project.id} className="max-w-[24rem]">
+                          {renderProjectLabel(project)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <p className="typography-micro text-muted-foreground py-2">Add a project first.</p>
+                )}
               </div>
 
-              <div className="space-y-2">
-                <label
-                  className="typography-meta font-medium text-foreground"
+              {/* Group name */}
+              <div className="flex flex-col gap-1">
+                <FieldLabel
+                  htmlFor="group-name"
+                  required
+                  info={<InfoTip>Used for worktree directory and branch names</InfoTip>}
+                >
+                  Group name
+                </FieldLabel>
+                <Input
+                  id="group-name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="feature-auth, bugfix-login"
+                  className="typography-meta w-full"
+                  required
+                />
+              </div>
+
+              {/* Base branch */}
+              <div className="flex flex-col gap-1">
+                <FieldLabel
                   htmlFor="multirun-worktree-base-branch"
+                  info={<InfoTip>New branch created from this base per model</InfoTip>}
                 >
                   Base branch
-                </label>
+                </FieldLabel>
                 <BranchSelector
-                  directory={currentDirectory}
+                  directory={selectedProjectDirectory}
                   value={worktreeBaseBranch}
                   onChange={setWorktreeBaseBranch}
                   id="multirun-worktree-base-branch"
                 />
-                <p className="typography-micro text-muted-foreground">
-                  Creates new branches from{' '}
-                  <code className="font-mono text-xs text-muted-foreground">{worktreeBaseBranch || 'HEAD'}</code>.
-                </p>
               </div>
 
-              {/* Setup commands collapsible */}
-              <Collapsible open={isSetupCommandsOpen} onOpenChange={setIsSetupCommandsOpen}>
-                <CollapsibleTrigger className="w-full flex items-center justify-between py-1 hover:bg-[var(--interactive-hover)] rounded-md px-1 -mx-1 transition-colors">
-                  <p className="typography-ui-label font-medium text-foreground">
-                    Setup commands
-                    {setupCommands.filter(cmd => cmd.trim()).length > 0 && (
-                      <span className="font-normal text-muted-foreground/70">
-                        {' '}({setupCommands.filter(cmd => cmd.trim()).length} configured)
-                      </span>
-                    )}
-                  </p>
-                  <RiArrowDownSLine className={cn(
-                    'h-4 w-4 text-muted-foreground transition-transform duration-200',
-                    isSetupCommandsOpen && 'rotate-180'
-                  )} />
-                </CollapsibleTrigger>
-                <CollapsibleContent>
-                  <div className="pt-2 space-y-2">
-                    <p className="typography-micro text-muted-foreground/70">
-                      Commands run in each new worktree. Use <code className="font-mono text-xs">$ROOT_PROJECT_PATH</code> for project root.
-                    </p>
-                    {isLoadingSetupCommands ? (
-                      <p className="typography-meta text-muted-foreground/70">Loading...</p>
-                    ) : (
-                      <div className="space-y-1.5">
-                        {setupCommands.map((command, index) => (
-                          <div key={index} className="flex gap-2">
-                            <Input
-                              value={command}
-                              onChange={(e) => {
-                                const newCommands = [...setupCommands];
-                                newCommands[index] = e.target.value;
-                                setSetupCommands(newCommands);
-                              }}
-                              placeholder="e.g., bun install"
-                              className="h-8 flex-1 font-mono text-xs"
-                            />
-                            <button
-                              type="button"
-                              onClick={() => {
-                                const newCommands = setupCommands.filter((_, i) => i !== index);
-                                setSetupCommands(newCommands);
-                              }}
-                              className="flex-shrink-0 flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                              aria-label="Remove command"
-                            >
-                              <RiCloseLine className="h-4 w-4" />
-                            </button>
-                          </div>
-                        ))}
-                        <button
-                          type="button"
-                          onClick={() => setSetupCommands([...setupCommands, ''])}
-                          className="flex items-center gap-1.5 typography-meta text-muted-foreground hover:text-foreground transition-colors"
-                        >
-                          <RiAddLine className="h-3.5 w-3.5" />
-                          Add command
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                </CollapsibleContent>
-              </Collapsible>
+              {/* Agent */}
+              <div className="flex flex-col gap-1">
+                <FieldLabel
+                  htmlFor="multirun-agent"
+                  info={<InfoTip>Agent used for all runs. Defaults to your configured agent.</InfoTip>}
+                >
+                  Agent
+                </FieldLabel>
+                <AgentSelector
+                  value={selectedAgent}
+                  onChange={setSelectedAgent}
+                  id="multirun-agent"
+                />
+              </div>
             </div>
 
-            {/* Agent selection */}
-            <div className="space-y-2">
-              <label
-                className="typography-ui-label font-medium text-foreground"
-                htmlFor="multirun-agent"
-              >
-                Agent
-              </label>
-              <AgentSelector
-                value={selectedAgent}
-                onChange={setSelectedAgent}
-                id="multirun-agent"
-              />
-              <p className="typography-micro text-muted-foreground">
-                Defaults to your configured default agent.
-              </p>
-            </div>
+            {/* ── Setup commands (collapsible, full width) ── */}
+            <Collapsible open={isSetupCommandsOpen} onOpenChange={setIsSetupCommandsOpen}>
+              <CollapsibleTrigger className="w-full flex items-center gap-2 py-1.5 px-2 -mx-2 rounded-lg hover:bg-[var(--interactive-hover)]/50 transition-colors group">
+                <RiTerminalLine className="h-3.5 w-3.5 text-muted-foreground/70" />
+                <span className="typography-meta font-medium text-muted-foreground group-hover:text-foreground transition-colors">
+                  Setup commands
+                </span>
+                {configuredSetupCount > 0 && (
+                  <span
+                    className="inline-flex items-center justify-center h-4 min-w-4 px-1 rounded-full typography-micro font-medium"
+                    style={{
+                      backgroundColor: 'var(--primary-base)',
+                      color: 'var(--primary-foreground)',
+                      fontSize: '0.625rem',
+                      lineHeight: 1,
+                    }}
+                  >
+                    {configuredSetupCount}
+                  </span>
+                )}
+                <RiArrowDownSLine className={cn(
+                  'h-3.5 w-3.5 text-muted-foreground/50 transition-transform duration-200 ml-auto',
+                  isSetupCommandsOpen && 'rotate-180'
+                )} />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="pt-2 space-y-1.5">
+                  {isLoadingSetupCommands ? (
+                    <p className="typography-meta text-muted-foreground/70 px-2">Loading...</p>
+                  ) : (
+                    <>
+                      {setupCommands.map((command, index) => (
+                        <div key={index} className="flex gap-1.5">
+                          <Input
+                            value={command}
+                            onChange={(e) => {
+                              const newCommands = [...setupCommands];
+                              newCommands[index] = e.target.value;
+                              setSetupCommands(newCommands);
+                            }}
+                            placeholder="bun install"
+                            className="h-8 flex-1 font-mono text-xs"
+                          />
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const newCommands = setupCommands.filter((_, i) => i !== index);
+                              setSetupCommands(newCommands);
+                            }}
+                            className="flex-shrink-0 flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                            aria-label="Remove command"
+                          >
+                            <RiCloseLine className="h-3.5 w-3.5" />
+                          </button>
+                        </div>
+                      ))}
+                      <button
+                        type="button"
+                        onClick={() => setSetupCommands([...setupCommands, ''])}
+                        className="flex items-center gap-1 typography-meta text-muted-foreground hover:text-foreground transition-colors px-1"
+                      >
+                        <RiAddLine className="h-3 w-3" />
+                        Add command
+                      </button>
+                    </>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
 
-            {/* Prompt */}
-            <div className="space-y-2">
-              <label htmlFor="prompt" className="typography-ui-label font-medium text-foreground">
-                Prompt <span className="text-destructive">*</span>
-              </label>
+            {/* ── Prompt ── */}
+            <div className="flex flex-col gap-1.5">
+              <FieldLabel htmlFor="prompt" required>Prompt</FieldLabel>
               <Textarea
                 id="prompt"
                 value={prompt}
                 onChange={(e) => setPrompt(e.target.value)}
                 placeholder="Enter the prompt to send to all models..."
-                className="typography-body min-h-[120px] max-h-[400px] resize-none overflow-y-auto field-sizing-content"
+                className="typography-meta min-h-[100px] max-h-[300px] resize-none overflow-y-auto field-sizing-content"
                 required
               />
-            </div>
 
-            {/* File attachments */}
-            <div className="space-y-2">
-              <div className="flex items-center gap-2">
-                <label className="typography-ui-label font-medium text-foreground">
-                  Attachments
-                </label>
-                <span className="typography-micro text-muted-foreground">(optional, same files for all runs)</span>
-              </div>
-              
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                className="hidden"
-                onChange={handleFileSelect}
-                accept="*/*"
-              />
-              
-              <div className="flex flex-wrap gap-2 items-center">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-7"
-                  onClick={() => fileInputRef.current?.click()}
-                >
-                  <RiAttachment2 className="h-3.5 w-3.5 mr-1.5" />
-                  Attach files
-                </Button>
-                
+              {/* File attachments inline */}
+              <div className="flex flex-wrap items-center gap-1.5">
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  multiple
+                  className="hidden"
+                  onChange={handleFileSelect}
+                  accept="*/*"
+                />
+                <Tooltip delayDuration={300}>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => fileInputRef.current?.click()}
+                      className="inline-flex items-center gap-1 h-6 px-2 rounded-md typography-micro text-muted-foreground hover:text-foreground hover:bg-[var(--interactive-hover)]/50 transition-colors"
+                    >
+                      <RiAttachment2 className="h-3 w-3" />
+                      Attach
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Same files sent to all runs</TooltipContent>
+                </Tooltip>
+
                 {attachedFiles.map((file) => (
                   <div
                     key={file.id}
-                    className="inline-flex items-center gap-1.5 px-2 py-1 bg-muted/30 border border-border/30 rounded-md typography-meta"
+                    className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md typography-micro border"
+                    style={{
+                      backgroundColor: 'var(--surface-elevated)',
+                      borderColor: 'var(--interactive-border)',
+                    }}
                   >
                     {file.mimeType.startsWith('image/') ? (
-                      <RiFileImageLine className="h-3.5 w-3.5 text-muted-foreground" />
+                      <RiFileImageLine className="h-3 w-3 text-muted-foreground" />
                     ) : (
-                      <RiFileLine className="h-3.5 w-3.5 text-muted-foreground" />
+                      <RiFileLine className="h-3 w-3 text-muted-foreground" />
                     )}
-                    <span className="truncate max-w-[120px]" title={file.filename}>
+                    <span className="truncate max-w-[100px]" title={file.filename}>
                       {file.filename}
                     </span>
-                    <span className="text-muted-foreground text-xs">
-                      ({file.size < 1024 ? `${file.size}B` : file.size < 1024 * 1024 ? `${(file.size / 1024).toFixed(1)}KB` : `${(file.size / (1024 * 1024)).toFixed(1)}MB`})
-                    </span>
                     <button
                       type="button"
                       onClick={() => handleRemoveFile(file.id)}
-                      className="text-muted-foreground hover:text-destructive ml-0.5"
+                      className="text-muted-foreground hover:text-destructive"
                     >
-                      <RiCloseLine className="h-3.5 w-3.5" />
+                      <RiCloseLine className="h-3 w-3" />
                     </button>
                   </div>
                 ))}
               </div>
             </div>
 
-            {/* Model selection */}
-            <div className="space-y-2">
-              <label className="typography-ui-label font-medium text-foreground">
-                Models <span className="text-destructive">*</span>
-              </label>
+            {/* ── Models ── */}
+            <div className="flex flex-col gap-1.5">
+              <FieldLabel
+                required
+                info={<InfoTip>Select 2–{MAX_MODELS} models. Same model can be added multiple times.</InfoTip>}
+              >
+                Models
+              </FieldLabel>
               <ModelMultiSelect
                 selectedModels={selectedModels}
                 onAdd={handleAddModel}
@@ -608,38 +731,48 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
               />
             </div>
 
-            {/* Error message */}
+            {/* ── Error ── */}
             {error && (
-              <div className="px-4 py-3 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive typography-body">
+              <div
+                className="px-3 py-2 rounded-lg typography-meta"
+                style={{
+                  backgroundColor: 'var(--status-error-background)',
+                  color: 'var(--status-error)',
+                  borderWidth: 1,
+                  borderColor: 'var(--status-error-border)',
+                }}
+              >
                 {error}
               </div>
             )}
+          </div>
+        </div>
+      </ScrollShadow>
 
-            {/* Action buttons */}
-            <div className="flex items-center justify-end gap-3 pt-4">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={onCancel}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                disabled={!isValid || isSubmitting}
-              >
-                {isSubmitting ? (
-                  'Creating...'
-                ) : (
-                  <>
-                    Start ({selectedModels.length} models)
-                  </>
-                )}
-              </Button>
-            </div>
-          </form>
+      {/* ── Fixed footer ── */}
+      <div className="shrink-0 px-4 sm:px-6 py-3">
+        <div className="mx-auto w-full max-w-2xl flex items-center justify-end gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            size="sm"
+            disabled={!isValid || isSubmitting}
+          >
+            {isSubmitting ? (
+              'Creating...'
+            ) : (
+              <>Start ({selectedModels.length} models)</>
+            )}
+          </Button>
         </div>
       </div>
-    </div>
+    </form>
   );
 };