feat(multirun): allow selecting the same model multiple times for comparison

Add file attachment support to multi-run launcher
Show instance indices for duplicate model selections

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { RiAddLine, RiCheckLine, RiCloseLine, RiPlayLine, RiSearchLine, RiStarFill, RiTimeLine } from '@remixicon/react';
+import { RiAddLine, RiAttachment2, RiCloseLine, RiFileImageLine, RiFileLine, RiPlayLine, RiSearchLine, RiStarFill, RiTimeLine } from '@remixicon/react';
+import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -27,6 +28,25 @@ import { useModelLists } from '@/hooks/useModelLists';
 import type { CreateMultiRunParams, MultiRunModelSelection } from '@/types/multirun';
 import type { ModelMetadata } from '@/types';
 
+/** Max file size in bytes (10MB) */
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+/** Attached file for multi-run (simplified from sessionStore's AttachedFile) */
+interface MultiRunAttachedFile {
+  id: string;
+  filename: string;
+  mimeType: string;
+  size: number;
+  dataUrl: string;
+}
+
+/** UI-only type with instanceId for React keys and duplicate tracking */
+type ModelSelectionWithId = MultiRunModelSelection & { instanceId: string };
+
+const generateInstanceId = (): string => {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+};
+
 interface MultiRunLauncherProps {
   /** Prefill prompt textarea (optional) */
   initialPrompt?: string;
@@ -47,16 +67,22 @@ type WorktreeBaseOption = {
 
 /**
  * Model selection chip with remove button.
+ * Shows instance index (e.g., "(2)") when same model is selected multiple times.
  */
 const ModelChip: React.FC<{
-  model: MultiRunModelSelection;
+  model: ModelSelectionWithId;
+  instanceIndex: number;
+  totalSameModel: number;
   onRemove: () => void;
-}> = ({ model, onRemove }) => {
+}> = ({ model, instanceIndex, totalSameModel, onRemove }) => {
+  const displayName = model.displayName || `${model.providerID}/${model.modelID}`;
+  const label = totalSameModel > 1 ? `${displayName} (${instanceIndex})` : displayName;
+
   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}`}
+        {label}
       </span>
       <button
         type="button"
@@ -88,11 +114,11 @@ const formatTokens = (value?: number | null) => {
 };
 
 /**
- * Model selector for multi-run (allows selecting multiple unique models).
+ * Model selector for multi-run (allows selecting same model multiple times).
  */
 const ModelMultiSelect: React.FC<{
-  selectedModels: MultiRunModelSelection[];
+  selectedModels: ModelSelectionWithId[];
-  onAdd: (model: MultiRunModelSelection) => void;
+  onAdd: (model: ModelSelectionWithId) => void;
   onRemove: (index: number) => void;
 }> = ({ selectedModels, onAdd, onRemove }) => {
   const { providers, modelsMetadata } = useConfigStore();
@@ -104,9 +130,22 @@ const ModelMultiSelect: React.FC<{
   const dropdownRef = React.useRef<HTMLDivElement>(null);
   const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
 
-  // Get set of already selected model keys
+  // Count occurrences of each model for display purposes
-  const selectedKeys = React.useMemo(() => {
+  const modelCounts = React.useMemo(() => {
-    return new Set(selectedModels.map((m) => `${m.providerID}:${m.modelID}`));
+    const counts = new Map<string, number>();
+    for (const m of selectedModels) {
+      const key = `${m.providerID}:${m.modelID}`;
+      counts.set(key, (counts.get(key) || 0) + 1);
+    }
+    return counts;
+  }, [selectedModels]);
+
+  // Get instance index for a specific model selection
+  const getInstanceIndex = React.useCallback((model: ModelSelectionWithId): number => {
+    const sameModels = selectedModels.filter(
+      m => m.providerID === model.providerID && m.modelID === model.modelID
+    );
+    return sameModels.findIndex(m => m.instanceId === model.instanceId) + 1;
   }, [selectedModels]);
 
   const getModelMetadata = (provId: string, modId: string): ModelMetadata | undefined => {
@@ -207,7 +246,7 @@ const ModelMultiSelect: React.FC<{
     isHighlighted: boolean
   ) => {
     const key = `${providerID}:${modelID}`;
-    const isSelected = selectedKeys.has(key);
+    const selectionCount = modelCounts.get(key) || 0;
     const metadata = getModelMetadata(providerID, modelID);
     const contextTokens = formatTokens(metadata?.limit?.context);
 
@@ -216,23 +255,19 @@ const ModelMultiSelect: React.FC<{
         key={`${keyPrefix}-${key}`}
         ref={(el) => { itemRefs.current[flatIndex] = el; }}
         type="button"
-        disabled={isSelected}
         onClick={() => {
           onAdd({
             providerID,
             modelID,
             displayName: (model.name as string) || modelID,
+            instanceId: generateInstanceId(),
           });
           // Don't close dropdown - allow selecting multiple
         }}
         onMouseEnter={() => setSelectedIndex(flatIndex)}
         className={cn(
           'w-full text-left px-2 py-1.5 rounded-md typography-meta transition-colors flex items-center gap-2',
-          isSelected
+          isHighlighted ? 'bg-accent' : 'hover:bg-accent/50'
-            ? 'text-muted-foreground/50 cursor-not-allowed bg-accent/20'
-            : isHighlighted
-              ? 'bg-accent'
-              : 'hover:bg-accent/50'
         )}
       >
         <div className="flex items-center gap-1.5 flex-1 min-w-0">
@@ -245,8 +280,10 @@ const ModelMultiSelect: React.FC<{
             </span>
           )}
         </div>
-        {isSelected && (
+        {selectionCount > 0 && (
-          <RiCheckLine className="h-4 w-4 text-primary flex-shrink-0" />
+          <span className="typography-micro text-muted-foreground flex-shrink-0">
+            ×{selectionCount}
+          </span>
         )}
       </button>
     );
@@ -309,11 +346,12 @@ const ModelMultiSelect: React.FC<{
                 e.preventDefault();
                 e.stopPropagation();
                 const selectedItem = flatModelList[selectedIndex];
-                if (selectedItem && !selectedKeys.has(`${selectedItem.providerID}:${selectedItem.modelID}`)) {
+                if (selectedItem) {
                   onAdd({
                     providerID: selectedItem.providerID,
                     modelID: selectedItem.modelID,
                     displayName: (selectedItem.model.name as string) || selectedItem.modelID,
+                    instanceId: generateInstanceId(),
                   });
                 }
               } else if (e.key === 'Escape') {
@@ -418,13 +456,20 @@ const ModelMultiSelect: React.FC<{
         </div>
 
         {/* Selected models */}
-        {selectedModels.map((model, index) => (
+        {selectedModels.map((model, index) => {
-          <ModelChip
+          const key = `${model.providerID}:${model.modelID}`;
-            key={`${model.providerID}:${model.modelID}`}
+          const totalSameModel = modelCounts.get(key) || 1;
-            model={model}
+          const instanceIndex = getInstanceIndex(model);
-            onRemove={() => onRemove(index)}
+          return (
-          />
+            <ModelChip
-        ))}
+              key={model.instanceId}
+              model={model}
+              instanceIndex={instanceIndex}
+              totalSameModel={totalSameModel}
+              onRemove={() => onRemove(index)}
+            />
+          );
+        })}
       </div>
     </div>
   );
@@ -441,8 +486,10 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
 }) => {
   const [name, setName] = React.useState('');
   const [prompt, setPrompt] = React.useState(() => initialPrompt ?? '');
-  const [selectedModels, setSelectedModels] = React.useState<MultiRunModelSelection[]>([]);
+  const [selectedModels, setSelectedModels] = React.useState<ModelSelectionWithId[]>([]);
+  const [attachedFiles, setAttachedFiles] = React.useState<MultiRunAttachedFile[]>([]);
   const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
 
   const currentDirectory = useDirectoryStore((state) => state.currentDirectory ?? null);
   const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
@@ -561,11 +608,7 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
   }, [currentDirectory]);
 
 
-  const handleAddModel = (model: MultiRunModelSelection) => {
+  const handleAddModel = (model: ModelSelectionWithId) => {
-    const key = `${model.providerID}:${model.modelID}`;
-    if (selectedModels.some((m) => `${m.providerID}:${m.modelID}` === key)) {
-      return;
-    }
     setSelectedModels((prev) => [...prev, model]);
     clearError();
   };
@@ -575,6 +618,55 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
     clearError();
   };
 
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+
+    let attachedCount = 0;
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      if (file.size > MAX_FILE_SIZE) {
+        toast.error(`File "${file.name}" is too large (max 10MB)`);
+        continue;
+      }
+
+      try {
+        const dataUrl = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result as string);
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+        });
+
+        const newFile: MultiRunAttachedFile = {
+          id: generateInstanceId(),
+          filename: file.name,
+          mimeType: file.type || 'application/octet-stream',
+          size: file.size,
+          dataUrl,
+        };
+
+        setAttachedFiles((prev) => [...prev, newFile]);
+        attachedCount++;
+      } catch (error) {
+        console.error('File attach failed', error);
+        toast.error(`Failed to attach "${file.name}"`);
+      }
+    }
+
+    if (attachedCount > 0) {
+      toast.success(`Attached ${attachedCount} file${attachedCount > 1 ? 's' : ''}`);
+    }
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleRemoveFile = (id: string) => {
+    setAttachedFiles((prev) => prev.filter((f) => f.id !== id));
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -590,11 +682,23 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
     clearError();
 
     try {
+      // 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);
+      
+      // Convert attached files to the format expected by the store
+      const filesForStore = attachedFiles.map((f) => ({
+        mime: f.mimeType,
+        filename: f.filename,
+        url: f.dataUrl,
+      }));
+
       const params: CreateMultiRunParams = {
         name: name.trim(),
         prompt: prompt.trim(),
-        models: selectedModels,
+        models: modelsForStore,
         worktreeBaseBranch,
+        files: filesForStore.length > 0 ? filesForStore : undefined,
       };
 
       const result = await createMultiRun(params);
@@ -776,6 +880,64 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
               />
             </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>
+                
+                {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"
+                  >
+                    {file.mimeType.startsWith('image/') ? (
+                      <RiFileImageLine className="h-3.5 w-3.5 text-muted-foreground" />
+                    ) : (
+                      <RiFileLine className="h-3.5 w-3.5 text-muted-foreground" />
+                    )}
+                    <span className="truncate max-w-[120px]" 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"
+                    >
+                      <RiCloseLine className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+
             {/* Model selection */}
             <div className="space-y-2">
               <label className="typography-ui-label font-medium text-foreground">

packages/ui/src/stores/useMultiRunStore.ts

@@ -74,7 +74,7 @@ export const useMultiRunStore = create<MultiRunStore>()(
       createMultiRun: async (params: CreateMultiRunParams) => {
         const groupName = params.name.trim();
         const prompt = params.prompt.trim();
-        const { models, agent } = params;
+        const { models, agent, files } = params;
 
         if (!groupName) {
           set({ error: 'Group name is required' });
@@ -87,20 +87,10 @@ export const useMultiRunStore = create<MultiRunStore>()(
         }
 
         if (models.length < 2) {
-          set({ error: 'Select at least 2 unique models' });
+          set({ error: 'Select at least 2 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 {
@@ -130,24 +120,34 @@ export const useMultiRunStore = create<MultiRunStore>()(
             modelID: string;
           }> = [];
 
-          const usedBranches = new Set<string>();
+          // Count occurrences of each model to handle duplicates
+          const modelCounts = new Map<string, number>();
+          for (const model of models) {
+            const key = `${model.providerID}:${model.modelID}`;
+            modelCounts.set(key, (modelCounts.get(key) || 0) + 1);
+          }
+
+          // Track current index per model during iteration
+          const modelIndexes = new Map<string, number>();
 
           // 1) Create worktrees + sessions
           for (const model of models) {
+            const key = `${model.providerID}:${model.modelID}`;
+            const count = modelCounts.get(key) || 1;
+            const index = (modelIndexes.get(key) || 0) + 1;
+            modelIndexes.set(key, index);
+
             const modelSlug = toModelSlug(model.providerID, model.modelID);
-            const branch = generateBranchName(groupSlug, modelSlug);
+            // Append index only when same model is selected multiple times
+            const branch = count > 1
+              ? generateBranchName(groupSlug, `${modelSlug}-${index}`)
+              : 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 });
@@ -192,6 +192,14 @@ export const useMultiRunStore = create<MultiRunStore>()(
 
           // 2) Start all runs with the same prompt.
           // IMPORTANT: do not await model/agent execution here; only worktree + session creation.
+          // Convert files to the format expected by sendMessage
+          const filesForMessage = files?.map((f) => ({
+            type: 'file' as const,
+            mime: f.mime,
+            filename: f.filename,
+            url: f.url,
+          }));
+
           void (async () => {
             try {
               await Promise.allSettled(
@@ -204,6 +212,7 @@ export const useMultiRunStore = create<MultiRunStore>()(
                         modelID: run.modelID,
                         text: prompt,
                         agent,
+                        files: filesForMessage,
                       })
                     );
                   } catch (error) {

packages/ui/src/types/multirun.ts

@@ -11,18 +11,28 @@ export interface MultiRunModelSelection {
   displayName?: string;
 }
 
+export interface MultiRunFileAttachment {
+  /** MIME type of the file */
+  mime: string;
+  /** Original filename */
+  filename: string;
+  /** Data URL (base64 encoded) */
+  url: 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 to run against (must have at least 2) */
   models: MultiRunModelSelection[];
   /** Optional agent to use for all runs */
   agent?: string;
-
   /** Base branch for new branches (defaults to `HEAD`). */
   worktreeBaseBranch?: string;
+  /** Files to attach to all runs */
+  files?: MultiRunFileAttachment[];
 }
 
 export interface CreateMultiRunResult {