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
This commit is contained in:
committed by
GitHub
parent
2c1c960d5f
commit
10e64b4f90
@@ -17,11 +17,15 @@ import { FadeInOnReveal } from './FadeInOnReveal';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||||
import { RiCheckLine, RiFileCopyLine, RiChatNewLine, RiArrowGoBackLine } from '@remixicon/react';
|
import { RiCheckLine, RiFileCopyLine, RiChatNewLine, RiArrowGoBackLine } from '@remixicon/react';
|
||||||
|
import { ArrowsMerge } from '@/components/icons/ArrowsMerge';
|
||||||
import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
|
import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
|
||||||
|
|
||||||
import { SimpleMarkdownRenderer } from '../MarkdownRenderer';
|
import { SimpleMarkdownRenderer } from '../MarkdownRenderer';
|
||||||
import { useMessageStore } from '@/stores/messageStore';
|
import { useMessageStore } from '@/stores/messageStore';
|
||||||
import { useSessionStore } from '@/stores/useSessionStore';
|
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 = (
|
const useMigrationTimer = (
|
||||||
@@ -350,6 +354,7 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
|
|||||||
}, [visibleParts]);
|
}, [visibleParts]);
|
||||||
|
|
||||||
const createSessionFromAssistantMessage = useSessionStore((state) => state.createSessionFromAssistantMessage);
|
const createSessionFromAssistantMessage = useSessionStore((state) => state.createSessionFromAssistantMessage);
|
||||||
|
const openMultiRunLauncherWithPrompt = useUIStore((state) => state.openMultiRunLauncherWithPrompt);
|
||||||
const isLastAssistantInTurn = turnGroupingContext?.isLastAssistantInTurn ?? false;
|
const isLastAssistantInTurn = turnGroupingContext?.isLastAssistantInTurn ?? false;
|
||||||
const hasStopFinish = messageFinish === 'stop';
|
const hasStopFinish = messageFinish === 'stop';
|
||||||
|
|
||||||
@@ -543,6 +548,22 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
|
|||||||
[createSessionFromAssistantMessage, messageId]
|
[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(() => {
|
React.useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
clearCopyHintTimeout();
|
clearCopyHintTimeout();
|
||||||
@@ -1060,21 +1081,37 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
|
|||||||
|
|
||||||
const footerButtons = (
|
const footerButtons = (
|
||||||
<>
|
<>
|
||||||
<Tooltip delayDuration={1000}>
|
<Tooltip delayDuration={1000}>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
size="icon"
|
size="icon"
|
||||||
variant="ghost"
|
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"
|
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()}
|
onPointerDown={(event) => event.stopPropagation()}
|
||||||
onClick={handleForkClick}
|
onClick={handleForkClick}
|
||||||
>
|
>
|
||||||
<RiChatNewLine className="h-4 w-4" />
|
<RiChatNewLine className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent sideOffset={6}>Start new session from this answer</TooltipContent>
|
<TooltipContent sideOffset={6}>Start new session from this answer</TooltipContent>
|
||||||
</Tooltip>
|
</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 && (
|
{onCopyMessage && (
|
||||||
<Tooltip delayDuration={1000}>
|
<Tooltip delayDuration={1000}>
|
||||||
<TooltipTrigger asChild>
|
<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 { SessionDialogs } from '@/components/session/SessionDialogs';
|
||||||
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
|
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
|
||||||
import { DiffWorkerProvider } from '@/contexts/DiffWorkerProvider';
|
import { DiffWorkerProvider } from '@/contexts/DiffWorkerProvider';
|
||||||
|
import { MultiRunLauncher } from '@/components/multirun';
|
||||||
|
|
||||||
import { useUIStore } from '@/stores/useUIStore';
|
import { useUIStore } from '@/stores/useUIStore';
|
||||||
import { useUpdateStore } from '@/stores/useUpdateStore';
|
import { useUpdateStore } from '@/stores/useUpdateStore';
|
||||||
@@ -26,7 +27,11 @@ export const MainLayout: React.FC = () => {
|
|||||||
setSessionSwitcherOpen,
|
setSessionSwitcherOpen,
|
||||||
isSettingsDialogOpen,
|
isSettingsDialogOpen,
|
||||||
setSettingsDialogOpen,
|
setSettingsDialogOpen,
|
||||||
|
isMultiRunLauncherOpen,
|
||||||
|
setMultiRunLauncherOpen,
|
||||||
|
multiRunLauncherPrefillPrompt,
|
||||||
} = useUIStore();
|
} = useUIStore();
|
||||||
|
|
||||||
const { isMobile } = useDeviceInfo();
|
const { isMobile } = useDeviceInfo();
|
||||||
const [isDesktopRuntime, setIsDesktopRuntime] = React.useState<boolean>(() => {
|
const [isDesktopRuntime, setIsDesktopRuntime] = React.useState<boolean>(() => {
|
||||||
if (typeof window === 'undefined') {
|
if (typeof window === 'undefined') {
|
||||||
@@ -268,12 +273,12 @@ if (measuredInset === 0) {
|
|||||||
|
|
||||||
{isMobile ? (
|
{isMobile ? (
|
||||||
<>
|
<>
|
||||||
{/* Mobile: Header + content + settings overlay */}
|
{/* Mobile: Header + content + overlays */}
|
||||||
{!isSettingsDialogOpen && <Header />}
|
{!(isSettingsDialogOpen || isMultiRunLauncherOpen) && <Header />}
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex flex-1 overflow-hidden bg-background',
|
'flex flex-1 overflow-hidden bg-background',
|
||||||
isSettingsDialogOpen && 'hidden'
|
(isSettingsDialogOpen || isMultiRunLauncherOpen) && 'hidden'
|
||||||
)}
|
)}
|
||||||
style={{ paddingTop: 'var(--oc-header-height, 56px)' }}
|
style={{ paddingTop: 'var(--oc-header-height, 56px)' }}
|
||||||
>
|
>
|
||||||
@@ -297,6 +302,19 @@ if (measuredInset === 0) {
|
|||||||
<SessionSidebar mobileVariant />
|
<SessionSidebar mobileVariant />
|
||||||
</MobileOverlayPanel>
|
</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 */}
|
{/* Mobile settings: full screen */}
|
||||||
{isSettingsDialogOpen && (
|
{isSettingsDialogOpen && (
|
||||||
<div className="absolute inset-0 z-10 bg-background header-safe-area">
|
<div className="absolute inset-0 z-10 bg-background header-safe-area">
|
||||||
@@ -315,7 +333,7 @@ if (measuredInset === 0) {
|
|||||||
{/* Main content area */}
|
{/* Main content area */}
|
||||||
<div className="flex flex-1 flex-col overflow-hidden relative">
|
<div className="flex flex-1 flex-col overflow-hidden relative">
|
||||||
{/* Normal view: Header + content */}
|
{/* 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 />
|
<Header />
|
||||||
<div className="flex flex-1 overflow-hidden bg-background">
|
<div className="flex flex-1 overflow-hidden bg-background">
|
||||||
<main className="flex-1 overflow-hidden bg-background relative">
|
<main className="flex-1 overflow-hidden bg-background relative">
|
||||||
@@ -330,6 +348,19 @@ if (measuredInset === 0) {
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
{/* Settings view: full screen overlay */}
|
{/* 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,
|
RiShare2Line,
|
||||||
} from '@remixicon/react';
|
} from '@remixicon/react';
|
||||||
import { sessionEvents } from '@/lib/sessionEvents';
|
import { sessionEvents } from '@/lib/sessionEvents';
|
||||||
|
import { ArrowsMerge } from '@/components/icons/ArrowsMerge';
|
||||||
import { formatDirectoryName, formatPathForDisplay, cn } from '@/lib/utils';
|
import { formatDirectoryName, formatPathForDisplay, cn } from '@/lib/utils';
|
||||||
import { useSessionStore } from '@/stores/useSessionStore';
|
import { useSessionStore } from '@/stores/useSessionStore';
|
||||||
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||||
@@ -139,6 +140,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
|
|||||||
|
|
||||||
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
|
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
|
||||||
const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
|
const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
|
||||||
|
const openMultiRunLauncher = useUIStore((state) => state.openMultiRunLauncher);
|
||||||
|
|
||||||
const getSessionsByDirectory = useSessionStore((state) => state.getSessionsByDirectory);
|
const getSessionsByDirectory = useSessionStore((state) => state.getSessionsByDirectory);
|
||||||
const currentSessionId = useSessionStore((state) => state.currentSessionId);
|
const currentSessionId = useSessionStore((state) => state.currentSessionId);
|
||||||
@@ -1021,17 +1023,32 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
{isGitRepo ? (
|
{isGitRepo ? (
|
||||||
<button
|
<>
|
||||||
type="button"
|
<button
|
||||||
onClick={handleOpenWorktreeManager}
|
type="button"
|
||||||
className={cn(
|
onClick={handleOpenWorktreeManager}
|
||||||
'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',
|
className={cn(
|
||||||
!isDesktopRuntime && 'bg-sidebar/60 hover:bg-sidebar',
|
'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"
|
)}
|
||||||
>
|
aria-label="Manage worktrees"
|
||||||
<RiGitRepositoryLine className="h-[1.125rem] w-[1.125rem] translate-y-px" />
|
title="Manage worktrees"
|
||||||
</button>
|
>
|
||||||
|
<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}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -408,7 +408,6 @@ export interface RuntimeAPIs {
|
|||||||
diagnostics?: DiagnosticsAPI;
|
diagnostics?: DiagnosticsAPI;
|
||||||
tools: ToolsAPI;
|
tools: ToolsAPI;
|
||||||
editor?: EditorAPI;
|
editor?: EditorAPI;
|
||||||
|
|
||||||
worktrees?: WorktreeMetadata[];
|
worktrees?: WorktreeMetadata[];
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -497,3 +496,4 @@ export interface SkillsInstallResponse {
|
|||||||
skipped?: Array<{ skillName: string; reason: string }>;
|
skipped?: Array<{ skillName: string; reason: string }>;
|
||||||
error?: SkillsInstallError;
|
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. " +
|
"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.";
|
"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 =>
|
export const isExecutionForkMetaText = (text: string | null | undefined): boolean =>
|
||||||
typeof text === 'string' && text.trim() === EXECUTION_FORK_META_TEXT.trim();
|
typeof text === 'string' && text.trim() === EXECUTION_FORK_META_TEXT.trim();
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ interface SessionActions {
|
|||||||
loadSessions: () => Promise<void>;
|
loadSessions: () => Promise<void>;
|
||||||
createSession: (title?: string, directoryOverride?: string | null, parentID?: string | null) => Promise<Session | null>;
|
createSession: (title?: string, directoryOverride?: string | null, parentID?: string | null) => Promise<Session | null>;
|
||||||
deleteSession: (id: string, options?: { archiveWorktree?: boolean; deleteRemoteBranch?: boolean; remoteName?: string }) => Promise<boolean>;
|
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>;
|
updateSessionTitle: (id: string, title: string) => Promise<void>;
|
||||||
shareSession: (id: string) => Promise<Session | null>;
|
shareSession: (id: string) => Promise<Session | null>;
|
||||||
unshareSession: (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 {
|
interface UIStore {
|
||||||
|
|
||||||
theme: 'light' | 'dark' | 'system';
|
theme: 'light' | 'dark' | 'system';
|
||||||
|
isMultiRunLauncherOpen: boolean;
|
||||||
|
multiRunLauncherPrefillPrompt: string;
|
||||||
isSidebarOpen: boolean;
|
isSidebarOpen: boolean;
|
||||||
sidebarWidth: number;
|
sidebarWidth: number;
|
||||||
hasManuallyResizedLeftSidebar: boolean;
|
hasManuallyResizedLeftSidebar: boolean;
|
||||||
@@ -88,6 +90,9 @@ interface UIStore {
|
|||||||
setDiffLayoutPreference: (mode: 'dynamic' | 'inline' | 'side-by-side') => void;
|
setDiffLayoutPreference: (mode: 'dynamic' | 'inline' | 'side-by-side') => void;
|
||||||
setDiffFileLayout: (filePath: string, mode: 'inline' | 'side-by-side') => void;
|
setDiffFileLayout: (filePath: string, mode: 'inline' | 'side-by-side') => void;
|
||||||
setDiffWrapLines: (wrap: boolean) => void;
|
setDiffWrapLines: (wrap: boolean) => void;
|
||||||
|
setMultiRunLauncherOpen: (open: boolean) => void;
|
||||||
|
openMultiRunLauncher: () => void;
|
||||||
|
openMultiRunLauncherWithPrompt: (prompt: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useUIStore = create<UIStore>()(
|
export const useUIStore = create<UIStore>()(
|
||||||
@@ -96,6 +101,8 @@ export const useUIStore = create<UIStore>()(
|
|||||||
(set, get) => ({
|
(set, get) => ({
|
||||||
|
|
||||||
theme: 'system',
|
theme: 'system',
|
||||||
|
isMultiRunLauncherOpen: false,
|
||||||
|
multiRunLauncherPrefillPrompt: '',
|
||||||
isSidebarOpen: true,
|
isSidebarOpen: true,
|
||||||
sidebarWidth: 264,
|
sidebarWidth: 264,
|
||||||
hasManuallyResizedLeftSidebar: false,
|
hasManuallyResizedLeftSidebar: false,
|
||||||
@@ -420,7 +427,30 @@ export const useUIStore = create<UIStore>()(
|
|||||||
} else {
|
} else {
|
||||||
root.classList.add(theme);
|
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',
|
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();
|
const isSymbolicLink = dirent.isSymbolicLink();
|
||||||
|
|
||||||
if (!isDirectory && isSymbolicLink) {
|
if (!isDirectory && isSymbolicLink) {
|
||||||
try {
|
|
||||||
|
try {
|
||||||
|
|
||||||
const linkStats = await fsPromises.stat(entryPath);
|
const linkStats = await fsPromises.stat(entryPath);
|
||||||
isDirectory = linkStats.isDirectory();
|
isDirectory = linkStats.isDirectory();
|
||||||
} catch {
|
} catch {
|
||||||
@@ -4039,6 +4041,7 @@ async function main(options = {}) {
|
|||||||
res.json({ success: true, killedCount });
|
res.json({ success: true, killedCount });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Check if we can reuse an existing OpenCode process from a previous HMR cycle
|
// Check if we can reuse an existing OpenCode process from a previous HMR cycle
|
||||||
syncFromHmrState();
|
syncFromHmrState();
|
||||||
|
|||||||
Reference in New Issue
Block a user