feat: add ability to run multiple agents from one prompt in isolated worktrees (#91)

* feat: WIP multirun implementation * feat(chat): replace MindMap icon with ArrowsMerge * feat(multirun): add base branch selection for worktrees * feat(mobile): add multi-run launcher overlay
2026-01-01 14:59:51 +02:00
parent 2c1c960d5f
commit 10e64b4f90
13 changed files with 1041 additions and 34 deletions
@@ -17,11 +17,15 @@ import { FadeInOnReveal } from './FadeInOnReveal';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { RiCheckLine, RiFileCopyLine, RiChatNewLine, RiArrowGoBackLine } from '@remixicon/react';
+import { ArrowsMerge } from '@/components/icons/ArrowsMerge';
 import type { ContentChangeReason } from '@/hooks/useChatScrollManager';

 import { SimpleMarkdownRenderer } from '../MarkdownRenderer';
 import { useMessageStore } from '@/stores/messageStore';
 import { useSessionStore } from '@/stores/useSessionStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { flattenAssistantTextParts } from '@/lib/messages/messageText';
+import { MULTIRUN_EXECUTION_FORK_PROMPT_META_TEXT } from '@/lib/messages/executionMeta';


 const useMigrationTimer = (
@@ -350,6 +354,7 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
    }, [visibleParts]);

    const createSessionFromAssistantMessage = useSessionStore((state) => state.createSessionFromAssistantMessage);
+    const openMultiRunLauncherWithPrompt = useUIStore((state) => state.openMultiRunLauncherWithPrompt);
    const isLastAssistantInTurn = turnGroupingContext?.isLastAssistantInTurn ?? false;
    const hasStopFinish = messageFinish === 'stop';

@@ -543,6 +548,22 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
        [createSessionFromAssistantMessage, messageId]
    );

+    const handleForkMultiRunClick = React.useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            event.stopPropagation();
+            event.preventDefault();
+
+            const assistantPlanText = flattenAssistantTextParts(assistantTextParts);
+            if (!assistantPlanText.trim()) {
+                return;
+            }
+
+            const prefilledPrompt = `${MULTIRUN_EXECUTION_FORK_PROMPT_META_TEXT}\n\n${assistantPlanText}`;
+            openMultiRunLauncherWithPrompt(prefilledPrompt);
+        },
+        [assistantTextParts, openMultiRunLauncherWithPrompt]
+    );
+
    React.useEffect(() => {
        return () => {
            clearCopyHintTimeout();
@@ -1060,21 +1081,37 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({

    const footerButtons = (
         <>
-             <Tooltip delayDuration={1000}>
-                 <TooltipTrigger asChild>
-                     <Button
-                         type="button"
-                         size="icon"
-                         variant="ghost"
-                         className="h-8 w-8 text-muted-foreground bg-transparent hover:text-foreground hover:!bg-transparent active:!bg-transparent focus-visible:!bg-transparent focus-visible:ring-2 focus-visible:ring-primary/50"
-                         onPointerDown={(event) => event.stopPropagation()}
-                         onClick={handleForkClick}
-                     >
-                         <RiChatNewLine className="h-4 w-4" />
-                     </Button>
-                 </TooltipTrigger>
-                 <TooltipContent sideOffset={6}>Start new session from this answer</TooltipContent>
-             </Tooltip>
+              <Tooltip delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                      <Button
+                          type="button"
+                          size="icon"
+                          variant="ghost"
+                          className="h-8 w-8 text-muted-foreground bg-transparent hover:text-foreground hover:!bg-transparent active:!bg-transparent focus-visible:!bg-transparent focus-visible:ring-2 focus-visible:ring-primary/50"
+                          onPointerDown={(event) => event.stopPropagation()}
+                          onClick={handleForkClick}
+                      >
+                          <RiChatNewLine className="h-4 w-4" />
+                      </Button>
+                  </TooltipTrigger>
+                  <TooltipContent sideOffset={6}>Start new session from this answer</TooltipContent>
+              </Tooltip>
+              <Tooltip delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                      <Button
+                          type="button"
+                          size="icon"
+                          variant="ghost"
+                          className="h-8 w-8 text-muted-foreground bg-transparent hover:text-foreground hover:!bg-transparent active:!bg-transparent focus-visible:!bg-transparent focus-visible:ring-2 focus-visible:ring-primary/50"
+                          onPointerDown={(event) => event.stopPropagation()}
+                          onClick={handleForkMultiRunClick}
+                      >
+                          <ArrowsMerge className="h-4 w-4" />
+                      </Button>
+                  </TooltipTrigger>
+                  <TooltipContent sideOffset={6}>Start new multi-run from this answer</TooltipContent>
+              </Tooltip>
+
             {onCopyMessage && (
                 <Tooltip delayDuration={1000}>
                     <TooltipTrigger asChild>
@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+
+export function ArrowsMerge(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path
+        d="M232.49,192.49l-32,32a12,12,0,0,1-17,0l-32-32a12,12,0,0,1,17-17L180,187V141L128,89,76,141V187l11.51-11.52a12,12,0,0,1,17,17l-32,32a12,12,0,0,1-17,0l-32-32a12,12,0,1,1,17-17L52,187V136a12,12,0,0,1,3.51-8.49L116,67V24a12,12,0,0,1,24,0V67l60.49,60.48A12,12,0,0,1,204,136v51l11.51-11.52a12,12,0,0,1,17,17Z"
+        transform="rotate(180 128 128)"
+      />
+    </svg>
+  );
+}
@@ -8,6 +8,7 @@ import { SessionSidebar } from '@/components/session/SessionSidebar';
 import { SessionDialogs } from '@/components/session/SessionDialogs';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
 import { DiffWorkerProvider } from '@/contexts/DiffWorkerProvider';
+import { MultiRunLauncher } from '@/components/multirun';

 import { useUIStore } from '@/stores/useUIStore';
 import { useUpdateStore } from '@/stores/useUpdateStore';
@@ -26,7 +27,11 @@ export const MainLayout: React.FC = () => {
        setSessionSwitcherOpen,
        isSettingsDialogOpen,
        setSettingsDialogOpen,
+        isMultiRunLauncherOpen,
+        setMultiRunLauncherOpen,
+        multiRunLauncherPrefillPrompt,
    } = useUIStore();
+
    const { isMobile } = useDeviceInfo();
    const [isDesktopRuntime, setIsDesktopRuntime] = React.useState<boolean>(() => {
        if (typeof window === 'undefined') {
@@ -268,12 +273,12 @@ if (measuredInset === 0) {

                {isMobile ? (
                <>
-                    {/* Mobile: Header + content + settings overlay */}
-                    {!isSettingsDialogOpen && <Header />}
+                    {/* Mobile: Header + content + overlays */}
+                    {!(isSettingsDialogOpen || isMultiRunLauncherOpen) && <Header />}
                    <div
                        className={cn(
                            'flex flex-1 overflow-hidden bg-background',
-                            isSettingsDialogOpen && 'hidden'
+                            (isSettingsDialogOpen || isMultiRunLauncherOpen) && 'hidden'
                        )}
                        style={{ paddingTop: 'var(--oc-header-height, 56px)' }}
                    >
@@ -297,6 +302,19 @@ if (measuredInset === 0) {
                        <SessionSidebar mobileVariant />
                    </MobileOverlayPanel>

+                    {/* Mobile multi-run launcher: full screen */}
+                    {isMultiRunLauncherOpen && (
+                        <div className="absolute inset-0 z-10 bg-background header-safe-area">
+                            <ErrorBoundary>
+                                <MultiRunLauncher
+                                    initialPrompt={multiRunLauncherPrefillPrompt}
+                                    onCreated={() => setMultiRunLauncherOpen(false)}
+                                    onCancel={() => setMultiRunLauncherOpen(false)}
+                                />
+                            </ErrorBoundary>
+                        </div>
+                    )}
+
                    {/* Mobile settings: full screen */}
                    {isSettingsDialogOpen && (
                        <div className="absolute inset-0 z-10 bg-background header-safe-area">
@@ -315,7 +333,7 @@ if (measuredInset === 0) {
                    {/* Main content area */}
                    <div className="flex flex-1 flex-col overflow-hidden relative">
                        {/* Normal view: Header + content */}
-                        <div className={cn('absolute inset-0 flex flex-col', isSettingsActive && 'invisible')}>
+                        <div className={cn('absolute inset-0 flex flex-col', (isSettingsActive || isMultiRunLauncherOpen) && 'invisible')}>
                            <Header />
                            <div className="flex flex-1 overflow-hidden bg-background">
                                <main className="flex-1 overflow-hidden bg-background relative">
@@ -330,6 +348,19 @@ if (measuredInset === 0) {
                                </main>
                            </div>
                        </div>
+
+                        {/* Multi-Run Launcher: replaces tabs content only */}
+                        {isMultiRunLauncherOpen && (
+                            <div className={cn('absolute inset-0 z-10', isDesktopRuntime ? 'bg-transparent' : 'bg-background')}>
+                                <ErrorBoundary>
+                                    <MultiRunLauncher
+                                        initialPrompt={multiRunLauncherPrefillPrompt}
+                                        onCreated={() => setMultiRunLauncherOpen(false)}
+                                        onCancel={() => setMultiRunLauncherOpen(false)}
+                                    />
+                                </ErrorBoundary>
+                            </div>
+                        )}
                    </div>

                    {/* Settings view: full screen overlay */}
@@ -0,0 +1,592 @@
+import React from 'react';
+import { RiAddLine, RiCloseLine, RiPlayLine, RiSearchLine } from '@remixicon/react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { ProviderLogo } from '@/components/ui/ProviderLogo';
+import { checkIsGitRepository, getGitBranches } from '@/lib/gitApi';
+import { cn } from '@/lib/utils';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useMultiRunStore } from '@/stores/useMultiRunStore';
+import { useSessionStore } from '@/stores/useSessionStore';
+import type { CreateMultiRunParams, MultiRunModelSelection } from '@/types/multirun';
+
+interface MultiRunLauncherProps {
+  /** Prefill prompt textarea (optional) */
+  initialPrompt?: string;
+  /** Called when multi-run is successfully created */
+  onCreated?: () => void;
+  /** Called when user cancels */
+  onCancel?: () => void;
+}
+
+/** Chip height class - shared between chips and add button */
+const CHIP_HEIGHT_CLASS = 'h-7';
+
+type WorktreeBaseOption = {
+  value: string;
+  label: string;
+  group: 'special' | 'local' | 'remote';
+};
+
+/**
+ * Model selection chip with remove button.
+ */
+const ModelChip: React.FC<{
+  model: MultiRunModelSelection;
+  onRemove: () => void;
+}> = ({ model, onRemove }) => {
+  return (
+    <div className={cn('flex items-center gap-1.5 px-2 rounded-md bg-accent/50 border border-border/30', CHIP_HEIGHT_CLASS)}>
+      <ProviderLogo providerId={model.providerID} className="h-3.5 w-3.5" />
+      <span className="typography-meta font-medium truncate max-w-[140px]">
+        {model.displayName || `${model.providerID}/${model.modelID}`}
+      </span>
+      <button
+        type="button"
+        onClick={onRemove}
+        className="text-muted-foreground hover:text-foreground ml-0.5"
+      >
+        <RiCloseLine className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+};
+
+/**
+ * Model selector for multi-run (allows selecting multiple unique models).
+ */
+const ModelMultiSelect: React.FC<{
+  selectedModels: MultiRunModelSelection[];
+  onAdd: (model: MultiRunModelSelection) => void;
+  onRemove: (index: number) => void;
+}> = ({ selectedModels, onAdd, onRemove }) => {
+  const providers = useConfigStore((state) => state.providers);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
+
+  // Get set of already selected model keys
+  const selectedKeys = React.useMemo(() => {
+    return new Set(selectedModels.map((m) => `${m.providerID}:${m.modelID}`));
+  }, [selectedModels]);
+
+  // Filter models based on search query
+  const filteredProviders = React.useMemo(() => {
+    if (!searchQuery.trim()) return providers;
+
+    const query = searchQuery.toLowerCase();
+    return providers
+      .map((provider) => {
+        const models = Array.isArray(provider.models) ? provider.models : [];
+        const filteredModels = models.filter((model) => {
+          const modelName = (model.name || model.id || '').toString().toLowerCase();
+          const providerName = provider.name.toLowerCase();
+          return modelName.includes(query) || providerName.includes(query);
+        });
+        return { ...provider, models: filteredModels };
+      })
+      .filter((provider) => provider.models.length > 0);
+  }, [providers, searchQuery]);
+
+  // Focus search input when opened
+  React.useEffect(() => {
+    if (isOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  // Close dropdown when clicking outside
+  React.useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setSearchQuery('');
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen]);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1.5 items-center">
+        {/* Add model button (dropdown trigger) */}
+        <div className="relative" ref={dropdownRef}>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className={CHIP_HEIGHT_CLASS}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <RiAddLine className="h-3.5 w-3.5 mr-1" />
+            Add model
+          </Button>
+
+          {isOpen && (
+            <div className="absolute top-full left-0 mt-1 z-50 border border-border/30 rounded-lg overflow-hidden bg-background shadow-lg w-72">
+              {/* Search input */}
+              <div className="p-2 border-b border-border/30">
+                <div className="relative">
+                  <RiSearchLine className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    ref={searchInputRef}
+                    type="text"
+                    placeholder="Search models..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="h-8 pl-8 typography-meta"
+                  />
+                </div>
+              </div>
+
+              {/* Models list */}
+              <ScrollableOverlay
+                outerClassName="max-h-[240px]"
+                className="p-2 space-y-1"
+              >
+                {filteredProviders.length === 0 ? (
+                  <div className="py-4 text-center text-muted-foreground typography-meta">
+                    No models found
+                  </div>
+                ) : (
+                  filteredProviders.map((provider) => {
+                    const models = Array.isArray(provider.models) ? provider.models : [];
+                    if (models.length === 0) return null;
+
+                    return (
+                      <div key={provider.id} className="space-y-0.5">
+                        <div className="flex items-center gap-2 py-1 text-muted-foreground">
+                          <ProviderLogo providerId={provider.id} className="h-3 w-3" />
+                          <span className="typography-micro font-medium uppercase tracking-wider">
+                            {provider.name}
+                          </span>
+                        </div>
+                        {models.map((model) => {
+                          const key = `${provider.id}:${model.id}`;
+                          const isSelected = selectedKeys.has(key);
+
+                          return (
+                            <button
+                              key={model.id as string}
+                              type="button"
+                              disabled={isSelected}
+                              onClick={() => {
+                                onAdd({
+                                  providerID: provider.id,
+                                  modelID: model.id as string,
+                                  displayName: model.name as string || model.id as string,
+                                });
+                                // Don't close dropdown - allow selecting multiple
+                              }}
+                              className={cn(
+                                'w-full text-left px-2 py-1 rounded-md typography-meta transition-colors',
+                                isSelected
+                                  ? 'text-muted-foreground/50 cursor-not-allowed'
+                                  : 'hover:bg-accent/50'
+                              )}
+                            >
+                              {model.name || model.id}
+                              {isSelected && (
+                                <span className="ml-2 text-muted-foreground/50">(selected)</span>
+                              )}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    );
+                  })
+                )}
+              </ScrollableOverlay>
+            </div>
+          )}
+        </div>
+
+        {/* Selected models */}
+        {selectedModels.map((model, index) => (
+          <ModelChip
+            key={`${model.providerID}:${model.modelID}`}
+            model={model}
+            onRemove={() => onRemove(index)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Launcher form for creating a new Multi-Run group.
+ * Replaces the main content area (tabs) with a form.
+ */
+export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
+  initialPrompt,
+  onCreated,
+  onCancel,
+}) => {
+  const [name, setName] = React.useState('');
+  const [prompt, setPrompt] = React.useState(() => initialPrompt ?? '');
+  const [selectedModels, setSelectedModels] = React.useState<MultiRunModelSelection[]>([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const currentDirectory = useDirectoryStore((state) => state.currentDirectory ?? null);
+
+  const [worktreeBaseBranch, setWorktreeBaseBranch] = React.useState<string>('HEAD');
+  const [availableWorktreeBaseBranches, setAvailableWorktreeBaseBranches] = React.useState<WorktreeBaseOption[]>([
+    { value: 'HEAD', label: 'Current (HEAD)', group: 'special' },
+  ]);
+  const [isLoadingWorktreeBaseBranches, setIsLoadingWorktreeBaseBranches] = React.useState(false);
+  const [isGitRepository, setIsGitRepository] = React.useState<boolean | null>(null);
+
+  const createMultiRun = useMultiRunStore((state) => state.createMultiRun);
+  const error = useMultiRunStore((state) => state.error);
+  const clearError = useMultiRunStore((state) => state.clearError);
+
+  React.useEffect(() => {
+    if (typeof initialPrompt === 'string' && initialPrompt.trim().length > 0) {
+      setPrompt((prev) => (prev.trim().length > 0 ? prev : initialPrompt));
+    }
+  }, [initialPrompt]);
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    if (!currentDirectory) {
+      setIsGitRepository(null);
+      setIsLoadingWorktreeBaseBranches(false);
+      setAvailableWorktreeBaseBranches([{ value: 'HEAD', label: 'Current (HEAD)', group: 'special' }]);
+      setWorktreeBaseBranch('HEAD');
+      return;
+    }
+
+    setIsLoadingWorktreeBaseBranches(true);
+    setIsGitRepository(null);
+
+    (async () => {
+      try {
+        const isGit = await checkIsGitRepository(currentDirectory);
+        if (cancelled) return;
+
+        setIsGitRepository(isGit);
+
+        if (!isGit) {
+          setAvailableWorktreeBaseBranches([{ value: 'HEAD', label: 'Current (HEAD)', group: 'special' }]);
+          setWorktreeBaseBranch('HEAD');
+          return;
+        }
+
+        const branches = await getGitBranches(currentDirectory).catch(() => null);
+        if (cancelled) return;
+
+        const worktreeBaseOptions: WorktreeBaseOption[] = [];
+        const headLabel = branches?.current ? `Current (HEAD: ${branches.current})` : 'Current (HEAD)';
+        worktreeBaseOptions.push({ value: 'HEAD', label: headLabel, group: 'special' });
+
+        if (branches) {
+          const localBranches = branches.all
+            .filter((branchName) => !branchName.startsWith('remotes/'))
+            .sort((a, b) => a.localeCompare(b));
+          localBranches.forEach((branchName) => {
+            worktreeBaseOptions.push({ value: branchName, label: branchName, group: 'local' });
+          });
+
+          const remoteBranches = branches.all
+            .filter((branchName) => branchName.startsWith('remotes/'))
+            .map((branchName) => branchName.replace(/^remotes\//, ''))
+            .sort((a, b) => a.localeCompare(b));
+          remoteBranches.forEach((branchName) => {
+            worktreeBaseOptions.push({ value: branchName, label: branchName, group: 'remote' });
+          });
+        }
+
+        setAvailableWorktreeBaseBranches(worktreeBaseOptions);
+        setWorktreeBaseBranch((previous) =>
+          worktreeBaseOptions.some((option) => option.value === previous) ? previous : 'HEAD'
+        );
+      } finally {
+        if (!cancelled) {
+          setIsLoadingWorktreeBaseBranches(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [currentDirectory]);
+
+
+  const handleAddModel = (model: MultiRunModelSelection) => {
+    const key = `${model.providerID}:${model.modelID}`;
+    if (selectedModels.some((m) => `${m.providerID}:${m.modelID}` === key)) {
+      return;
+    }
+    setSelectedModels((prev) => [...prev, model]);
+    clearError();
+  };
+
+  const handleRemoveModel = (index: number) => {
+    setSelectedModels((prev) => prev.filter((_, i) => i !== index));
+    clearError();
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!prompt.trim()) {
+      return;
+    }
+    if (selectedModels.length < 2) {
+      return;
+    }
+
+
+    setIsSubmitting(true);
+    clearError();
+
+    try {
+      const params: CreateMultiRunParams = {
+        name: name.trim(),
+        prompt: prompt.trim(),
+        models: selectedModels,
+        worktreeBaseBranch,
+      };
+
+      const result = await createMultiRun(params);
+       if (result) {
+         if (result.firstSessionId) {
+           useSessionStore.getState().setCurrentSession(result.firstSessionId);
+         }
+
+         // Close launcher
+         onCreated?.();
+       }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const isValid = Boolean(
+    name.trim() && prompt.trim() && selectedModels.length >= 2 && isGitRepository && !isLoadingWorktreeBaseBranches
+  );
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Header - same height as app header (h-12 = 48px) */}
+      <header
+        className="flex h-12 items-center justify-between border-b app-region-drag"
+        style={{ borderColor: 'var(--interactive-border)' }}
+      >
+        <div className="flex items-center gap-3 pl-4">
+          <h1 className="typography-ui-label font-medium">New Multi-Run</h1>
+        </div>
+        {onCancel && (
+          <div className="flex items-center pr-3">
+            <Tooltip delayDuration={500}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={onCancel}
+                  aria-label="Close"
+                  className="inline-flex h-9 w-9 items-center justify-center p-2 text-muted-foreground hover:text-foreground 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</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">
+            {/* 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"
+                required
+              />
+              <p className="typography-micro text-muted-foreground">
+                Used for worktree directory and branch names
+              </p>
+            </div>
+
+            {/* 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>
+              </div>
+
+              <div className="space-y-2">
+                <label
+                  className="typography-meta font-medium text-foreground"
+                  htmlFor="multirun-worktree-base-branch"
+                >
+                  Base branch
+                </label>
+                <Select
+                  value={worktreeBaseBranch}
+                  onValueChange={setWorktreeBaseBranch}
+                  disabled={!isGitRepository || isLoadingWorktreeBaseBranches}
+                >
+                  <SelectTrigger
+                    id="multirun-worktree-base-branch"
+                    size="lg"
+                    className="w-full typography-meta text-foreground"
+                  >
+                    <SelectValue
+                      placeholder={isLoadingWorktreeBaseBranches ? 'Loading branches…' : 'Select a branch'}
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>Default</SelectLabel>
+                      {availableWorktreeBaseBranches
+                        .filter((option) => option.group === 'special')
+                        .map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                    </SelectGroup>
+
+                    {availableWorktreeBaseBranches.some((option) => option.group === 'local') ? (
+                      <>
+                        <SelectSeparator />
+                        <SelectGroup>
+                          <SelectLabel>Local branches</SelectLabel>
+                          {availableWorktreeBaseBranches
+                            .filter((option) => option.group === 'local')
+                            .map((option) => (
+                              <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                              </SelectItem>
+                            ))}
+                        </SelectGroup>
+                      </>
+                    ) : null}
+
+                    {availableWorktreeBaseBranches.some((option) => option.group === 'remote') ? (
+                      <>
+                        <SelectSeparator />
+                        <SelectGroup>
+                          <SelectLabel>Remote branches</SelectLabel>
+                          {availableWorktreeBaseBranches
+                            .filter((option) => option.group === 'remote')
+                            .map((option) => (
+                              <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                              </SelectItem>
+                            ))}
+                        </SelectGroup>
+                      </>
+                    ) : null}
+                  </SelectContent>
+                </Select>
+                <p className="typography-micro text-muted-foreground">
+                  Creates new branches from{' '}
+                  <code className="font-mono text-xs text-muted-foreground">{worktreeBaseBranch || 'HEAD'}</code>.
+                </p>
+                {isGitRepository === false ? (
+                  <p className="typography-micro text-muted-foreground/70">Not in a git repository.</p>
+                ) : null}
+              </div>
+            </div>
+
+            {/* Prompt */}
+            <div className="space-y-2">
+              <label htmlFor="prompt" className="typography-ui-label font-medium text-foreground">
+                Prompt <span className="text-destructive">*</span>
+              </label>
+              <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"
+                required
+              />
+            </div>
+
+            {/* Model selection */}
+            <div className="space-y-2">
+              <label className="typography-ui-label font-medium text-foreground">
+                Models <span className="text-destructive">*</span>
+                <span className="ml-1 font-normal text-muted-foreground">(select at least 2)</span>
+              </label>
+              <ModelMultiSelect
+                selectedModels={selectedModels}
+                onAdd={handleAddModel}
+                onRemove={handleRemoveModel}
+              />
+            </div>
+
+            {/* Error message */}
+            {error && (
+              <div className="px-4 py-3 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive typography-body">
+                {error}
+              </div>
+            )}
+
+            {/* 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...'
+                ) : (
+                  <>
+                    <RiPlayLine className="h-4 w-4 mr-2" />
+                    Start ({selectedModels.length} models)
+                  </>
+                )}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { MultiRunLauncher } from './MultiRunLauncher';
@@ -25,6 +25,7 @@ import {
  RiShare2Line,
 } from '@remixicon/react';
 import { sessionEvents } from '@/lib/sessionEvents';
+import { ArrowsMerge } from '@/components/icons/ArrowsMerge';
 import { formatDirectoryName, formatPathForDisplay, cn } from '@/lib/utils';
 import { useSessionStore } from '@/stores/useSessionStore';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
@@ -139,6 +140,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({

  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
  const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
+  const openMultiRunLauncher = useUIStore((state) => state.openMultiRunLauncher);

  const getSessionsByDirectory = useSessionStore((state) => state.getSessionsByDirectory);
  const currentSessionId = useSessionStore((state) => state.currentSessionId);
@@ -1021,17 +1023,32 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
            </button>

            {isGitRepo ? (
-              <button
-                type="button"
-                onClick={handleOpenWorktreeManager}
-                className={cn(
-                  'inline-flex h-10 w-7 flex-shrink-0 items-center justify-center rounded-xl text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
-                  !isDesktopRuntime && 'bg-sidebar/60 hover:bg-sidebar',
-                )}
-                aria-label="Manage worktrees"
-              >
-                <RiGitRepositoryLine className="h-[1.125rem] w-[1.125rem] translate-y-px" />
-              </button>
+              <>
+                <button
+                  type="button"
+                  onClick={handleOpenWorktreeManager}
+                  className={cn(
+                    'inline-flex h-10 w-7 flex-shrink-0 items-center justify-center rounded-xl text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                    !isDesktopRuntime && 'bg-sidebar/60 hover:bg-sidebar',
+                  )}
+                  aria-label="Manage worktrees"
+                  title="Manage worktrees"
+                >
+                  <RiGitRepositoryLine className="h-[1.125rem] w-[1.125rem] translate-y-px" />
+                </button>
+                <button
+                  type="button"
+                  onClick={openMultiRunLauncher}
+                  className={cn(
+                    'inline-flex h-10 w-7 flex-shrink-0 items-center justify-center rounded-xl text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                    !isDesktopRuntime && 'bg-sidebar/60 hover:bg-sidebar',
+                  )}
+                  aria-label="New Multi-Run"
+                  title="New Multi-Run"
+                >
+                  <ArrowsMerge className="h-[1.125rem] w-[1.125rem] translate-y-px" />
+                </button>
+              </>
            ) : null}
          </div>
        </div>
@@ -408,7 +408,6 @@ export interface RuntimeAPIs {
  diagnostics?: DiagnosticsAPI;
  tools: ToolsAPI;
  editor?: EditorAPI;
-
  worktrees?: WorktreeMetadata[];
 }

@@ -497,3 +496,4 @@ export interface SkillsInstallResponse {
  skipped?: Array<{ skillName: string; reason: string }>;
  error?: SkillsInstallError;
 }
+
@@ -4,5 +4,13 @@ export const EXECUTION_FORK_META_TEXT =
    "if it is a conclusion or summary, your task is to verify it, explain whether you agree or disagree, and correct it if needed. " +
    "Always clearly state what you understand your task to be, and wait for the user's approval of your conclusions before taking any further actions.";

+export const MULTIRUN_EXECUTION_FORK_PROMPT_META_TEXT =
+    "This message bellow comes from an AI agent in another session. I want you to act according to its content: " +
+    "if it is an implementation plan, your task is to implement that plan; " +
+    "if it is a conclusion or summary, your task is to verify it, explain whether you agree or disagree, and correct it if needed; " +
+    "if it is a bug description, find the root cause and fix it. " +
+    "Proceed with actions right away based on your understanding of the task. " +
+    "Here is the content of the message: ";
+
 export const isExecutionForkMetaText = (text: string | null | undefined): boolean =>
    typeof text === 'string' && text.trim() === EXECUTION_FORK_META_TEXT.trim();
@@ -23,7 +23,7 @@ interface SessionActions {
    loadSessions: () => Promise<void>;
    createSession: (title?: string, directoryOverride?: string | null, parentID?: string | null) => Promise<Session | null>;
    deleteSession: (id: string, options?: { archiveWorktree?: boolean; deleteRemoteBranch?: boolean; remoteName?: string }) => Promise<boolean>;
-    deleteSessions: (ids: string[], options?: { archiveWorktree?: boolean; deleteRemoteBranch?: boolean; remoteName?: string }) => Promise<{ deletedIds: string[]; failedIds: string[] }>;
+    deleteSessions: (ids: string[], options?: { archiveWorktree?: boolean; deleteRemoteBranch?: boolean; remoteName?: string; silent?: boolean }) => Promise<{ deletedIds: string[]; failedIds: string[] }>;
    updateSessionTitle: (id: string, title: string) => Promise<void>;
    shareSession: (id: string) => Promise<Session | null>;
    unshareSession: (id: string) => Promise<Session | null>;
@@ -0,0 +1,236 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import type { CreateMultiRunParams, CreateMultiRunResult } from '@/types/multirun';
+import { opencodeClient } from '@/lib/opencode/client';
+import { createWorktree } from '@/lib/git/worktreeService';
+import { checkIsGitRepository } from '@/lib/gitApi';
+import { useSessionStore } from './sessionStore';
+import { useDirectoryStore } from './useDirectoryStore';
+
+/**
+ * Generate a git-safe slug from a string.
+ */
+const toGitSafeSlug = (value: string): string => {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .substring(0, 50);
+};
+
+/**
+ * Generate a model slug from provider and model IDs.
+ */
+const toModelSlug = (providerID: string, modelID: string): string => {
+  const provider = toGitSafeSlug(providerID);
+  const model = toGitSafeSlug(modelID);
+  return `${provider}-${model}`.substring(0, 60);
+};
+
+/**
+ * Generate branch name for a run.
+ * Format: <groupSlug>/<modelSlug>
+ */
+const generateBranchName = (groupSlug: string, modelSlug: string): string => {
+  return `${groupSlug}/${modelSlug}`;
+};
+
+/**
+ * Generate a stable worktree slug for a branch name.
+ * Keeps `.openchamber/<slug>` branch-aligned.
+ */
+const sanitizeWorktreeSlug = (value: string): string => {
+  return value
+    .trim()
+    .replace(/[^A-Za-z0-9._-]+/g, '-')
+    .replace(/^[-_]+|[-_]+$/g, '')
+    .slice(0, 120);
+};
+
+
+const getCurrentDirectory = (): string | null => {
+  return useDirectoryStore.getState().currentDirectory ?? null;
+};
+
+interface MultiRunState {
+  isLoading: boolean;
+  error: string | null;
+}
+
+interface MultiRunActions {
+  /** Create worktrees/sessions and immediately start all runs */
+  createMultiRun: (params: CreateMultiRunParams) => Promise<CreateMultiRunResult | null>;
+  clearError: () => void;
+}
+
+type MultiRunStore = MultiRunState & MultiRunActions;
+
+export const useMultiRunStore = create<MultiRunStore>()(
+  devtools(
+    (set) => ({
+      isLoading: false,
+      error: null,
+
+      createMultiRun: async (params: CreateMultiRunParams) => {
+        const groupName = params.name.trim();
+        const prompt = params.prompt.trim();
+        const { models, agent } = params;
+
+        if (!groupName) {
+          set({ error: 'Group name is required' });
+          return null;
+        }
+
+        if (!prompt) {
+          set({ error: 'Prompt is required' });
+          return null;
+        }
+
+        if (models.length < 2) {
+          set({ error: 'Select at least 2 unique models' });
+          return null;
+        }
+
+        const modelKeys = new Set<string>();
+        for (const model of models) {
+          const key = `${model.providerID}:${model.modelID}`;
+          if (modelKeys.has(key)) {
+            set({ error: `Duplicate model: ${model.providerID}/${model.modelID}` });
+            return null;
+          }
+          modelKeys.add(key);
+        }
+
+        set({ isLoading: true, error: null });
+
+        try {
+          const directory = getCurrentDirectory();
+          if (!directory) {
+            set({ error: 'No directory selected', isLoading: false });
+            return null;
+          }
+
+          const isGit = await checkIsGitRepository(directory);
+          if (!isGit) {
+            set({ error: 'Not in a git repository', isLoading: false });
+            return null;
+          }
+
+          const groupSlug = toGitSafeSlug(groupName);
+          const worktreeBaseBranch =
+            typeof params.worktreeBaseBranch === 'string' && params.worktreeBaseBranch.trim().length > 0
+              ? params.worktreeBaseBranch.trim()
+              : 'HEAD';
+          const startPoint = worktreeBaseBranch !== 'HEAD' ? worktreeBaseBranch : undefined;
+
+          const createdRuns: Array<{
+            sessionId: string;
+            worktreePath: string;
+            providerID: string;
+            modelID: string;
+          }> = [];
+
+          const usedBranches = new Set<string>();
+
+          // 1) Create worktrees + sessions
+          for (const model of models) {
+            const modelSlug = toModelSlug(model.providerID, model.modelID);
+            const branch = generateBranchName(groupSlug, modelSlug);
+
+            if (!branch) {
+              set({ error: 'Branch name is required for worktree creation', isLoading: false });
+              return null;
+            }
+
+            if (usedBranches.has(branch)) {
+              set({ error: `Duplicate branch selected: ${branch}`, isLoading: false });
+              return null;
+            }
+            usedBranches.add(branch);
+
+            const worktreeSlug = sanitizeWorktreeSlug(branch);
+            if (!worktreeSlug) {
+              set({ error: `Invalid branch name: ${branch}`, isLoading: false });
+              return null;
+            }
+
+            try {
+              const worktreeMetadata = await createWorktree({
+                projectDirectory: directory,
+                worktreeSlug,
+                branch,
+                createBranch: true,
+                startPoint,
+              });
+
+              const session = await opencodeClient.withDirectory(
+                worktreeMetadata.path,
+                () => opencodeClient.createSession({ title: `${model.providerID}/${model.modelID}` })
+              );
+
+              useSessionStore.getState().setWorktreeMetadata(session.id, worktreeMetadata);
+
+              createdRuns.push({
+                sessionId: session.id,
+                worktreePath: worktreeMetadata.path,
+                providerID: model.providerID,
+                modelID: model.modelID,
+              });
+            } catch (error) {
+              // Best-effort: allow partial success
+              console.warn('[MultiRun] Failed to create session:', error);
+            }
+          }
+
+          const sessionIds = createdRuns.map((r) => r.sessionId);
+          const firstSessionId = createdRuns[0]?.sessionId ?? null;
+
+          if (sessionIds.length === 0) {
+            set({ error: 'Failed to create any sessions', isLoading: false });
+            return null;
+          }
+
+          // 2) Start all runs with the same prompt.
+          // IMPORTANT: do not await model/agent execution here; only worktree + session creation.
+          void (async () => {
+            try {
+              await Promise.allSettled(
+                createdRuns.map(async (run) => {
+                  try {
+                    await opencodeClient.withDirectory(run.worktreePath, () =>
+                      opencodeClient.sendMessage({
+                        id: run.sessionId,
+                        providerID: run.providerID,
+                        modelID: run.modelID,
+                        text: prompt,
+                        agent,
+                      })
+                    );
+                  } catch (error) {
+                    console.warn('[MultiRun] Failed to start run:', error);
+                  }
+                })
+              );
+            } catch (error) {
+              console.warn('[MultiRun] Failed to start runs:', error);
+            }
+          })();
+
+          set({ isLoading: false });
+          return { sessionIds, firstSessionId };
+        } catch (error) {
+          set({
+            error: error instanceof Error ? error.message : 'Failed to create Multi-Run',
+            isLoading: false,
+          });
+          return null;
+        }
+      },
+
+      clearError: () => {
+        set({ error: null });
+      },
+    }),
+    { name: 'multirun-store' }
+  )
+);
@@ -17,6 +17,8 @@ export type EventStreamStatus =
 interface UIStore {

  theme: 'light' | 'dark' | 'system';
+  isMultiRunLauncherOpen: boolean;
+  multiRunLauncherPrefillPrompt: string;
  isSidebarOpen: boolean;
  sidebarWidth: number;
  hasManuallyResizedLeftSidebar: boolean;
@@ -88,6 +90,9 @@ interface UIStore {
  setDiffLayoutPreference: (mode: 'dynamic' | 'inline' | 'side-by-side') => void;
  setDiffFileLayout: (filePath: string, mode: 'inline' | 'side-by-side') => void;
  setDiffWrapLines: (wrap: boolean) => void;
+  setMultiRunLauncherOpen: (open: boolean) => void;
+  openMultiRunLauncher: () => void;
+  openMultiRunLauncherWithPrompt: (prompt: string) => void;
 }

 export const useUIStore = create<UIStore>()(
@@ -96,6 +101,8 @@ export const useUIStore = create<UIStore>()(
      (set, get) => ({

        theme: 'system',
+        isMultiRunLauncherOpen: false,
+        multiRunLauncherPrefillPrompt: '',
        isSidebarOpen: true,
        sidebarWidth: 264,
        hasManuallyResizedLeftSidebar: false,
@@ -420,7 +427,30 @@ export const useUIStore = create<UIStore>()(
          } else {
            root.classList.add(theme);
          }
-        }
+        },
+
+        setMultiRunLauncherOpen: (open) => {
+          set((state) => ({
+            isMultiRunLauncherOpen: open,
+            multiRunLauncherPrefillPrompt: open ? state.multiRunLauncherPrefillPrompt : '',
+          }));
+        },
+
+        openMultiRunLauncher: () => {
+          set({
+            isMultiRunLauncherOpen: true,
+            multiRunLauncherPrefillPrompt: '',
+            isSessionSwitcherOpen: false,
+          });
+        },
+
+        openMultiRunLauncherWithPrompt: (prompt) => {
+          set({
+            isMultiRunLauncherOpen: true,
+            multiRunLauncherPrefillPrompt: prompt,
+            isSessionSwitcherOpen: false,
+          });
+        },
      }),
      {
        name: 'ui-store',
@@ -0,0 +1,33 @@
+/**
+ * Multi-Run Types
+ *
+ * Multi-Run starts the same prompt against multiple models in parallel,
+ * each in its own git worktree and OpenCode session.
+ */
+
+export interface MultiRunModelSelection {
+  providerID: string;
+  modelID: string;
+  displayName?: string;
+}
+
+export interface CreateMultiRunParams {
+  /** Group name used for worktree directory and branch naming */
+  name: string;
+  /** Prompt sent to all sessions */
+  prompt: string;
+  /** Models to run against (must have at least 2 unique) */
+  models: MultiRunModelSelection[];
+  /** Optional agent to use for all runs */
+  agent?: string;
+
+  /** Base branch for new branches (defaults to `HEAD`). */
+  worktreeBaseBranch?: string;
+}
+
+export interface CreateMultiRunResult {
+  /** Session IDs created successfully (in selection order) */
+  sessionIds: string[];
+  /** First successfully created session ID, if any */
+  firstSessionId: string | null;
+}
@@ -3612,7 +3612,9 @@ async function main(options = {}) {
          const isSymbolicLink = dirent.isSymbolicLink();

          if (!isDirectory && isSymbolicLink) {
-            try {
+
+  try {
+
              const linkStats = await fsPromises.stat(entryPath);
              isDirectory = linkStats.isDirectory();
            } catch {
@@ -4039,6 +4041,7 @@ async function main(options = {}) {
    res.json({ success: true, killedCount });
  });

+
  try {
    // Check if we can reuse an existing OpenCode process from a previous HMR cycle
    syncFromHmrState();
				`@@ -0,0 +1 @@`
				`export { MultiRunLauncher } from './MultiRunLauncher';`