feat(vscode) Agent Manager (#87)
* Add Agent Manager * Basic Mock UP * Fix Comand naming Ctrl+P Uses Category to group * Move the UI in views * Agent Manager Landing Page * Fix attachment buig * Change Session Name for multi run to incoporate groupSlug * First running UI * Fix Max Model Multi Run * Rework Agent Group detection * ignore false positives with ' ' in it * Simplify Logic * remove unused dropdowns * Clean up * Update Changelog
This commit is contained in:
wienans
@@ -0,0 +1,207 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
RiGitBranchLine,
|
||||
RiArrowDownSLine,
|
||||
RiCheckLine,
|
||||
} from '@remixicon/react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
||||
import { useAgentGroupsStore, type AgentGroup, type AgentGroupSession } from '@/stores/useAgentGroupsStore';
|
||||
import { useSessionStore } from '@/stores/useSessionStore';
|
||||
import { ChatContainer } from '@/components/chat/ChatContainer';
|
||||
import { ChatErrorBoundary } from '@/components/chat/ChatErrorBoundary';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
|
||||
interface AgentGroupDetailProps {
|
||||
group: AgentGroup;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const AgentGroupDetail: React.FC<AgentGroupDetailProps> = ({
|
||||
group,
|
||||
className,
|
||||
}) => {
|
||||
const { selectedSessionId, selectSession } = useAgentGroupsStore();
|
||||
const { setCurrentSession, currentSessionId } = useSessionStore();
|
||||
|
||||
// Find the currently selected session
|
||||
const selectedSession = React.useMemo(() => {
|
||||
if (!selectedSessionId) return group.sessions[0] ?? null;
|
||||
return group.sessions.find((s) => s.id === selectedSessionId) ?? group.sessions[0] ?? null;
|
||||
}, [group.sessions, selectedSessionId]);
|
||||
|
||||
// When selecting a session, switch to that OpenCode session
|
||||
// NOTE: We intentionally do NOT change the global directory here to avoid
|
||||
// re-triggering loadGroups() which would cause groups to disappear
|
||||
const handleSessionSelect = React.useCallback((session: AgentGroupSession) => {
|
||||
selectSession(session.id);
|
||||
|
||||
// Switch to the OpenCode session
|
||||
setCurrentSession(session.id);
|
||||
}, [selectSession, setCurrentSession]);
|
||||
|
||||
// Auto-select first session when group changes and sync OpenCode session
|
||||
React.useEffect(() => {
|
||||
if (group.sessions.length > 0) {
|
||||
const session = selectedSessionId
|
||||
? group.sessions.find((s) => s.id === selectedSessionId) ?? group.sessions[0]
|
||||
: group.sessions[0];
|
||||
|
||||
if (session) {
|
||||
// Always ensure the OpenCode session is synced
|
||||
if (session.id !== currentSessionId) {
|
||||
setCurrentSession(session.id);
|
||||
}
|
||||
|
||||
// Update selection if not already selected
|
||||
if (!selectedSessionId) {
|
||||
selectSession(session.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [group.name, group.sessions, selectedSessionId, currentSessionId, selectSession, setCurrentSession]);
|
||||
|
||||
// Check if the current OpenCode session matches the selected agent group session
|
||||
const isSessionSynced = selectedSession?.id === currentSessionId;
|
||||
|
||||
return (
|
||||
<div className={cn('flex h-full flex-col bg-background', className)}>
|
||||
{/* Header */}
|
||||
<div className="flex-shrink-0 border-b border-border/30 px-4 py-3">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h1 className="typography-heading-lg text-foreground truncate">{group.name}</h1>
|
||||
<div className="flex items-center gap-2 mt-1 typography-meta text-muted-foreground">
|
||||
<span>{group.sessionCount} model{group.sessionCount !== 1 ? 's' : ''}</span>
|
||||
<span>·</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<RiGitBranchLine className="h-3.5 w-3.5" />
|
||||
{selectedSession?.worktreeMetadata?.label || selectedSession?.branch || 'No branch'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model Selector Dropdown */}
|
||||
{group.sessions.length > 0 && (
|
||||
<div className="mt-3">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between h-10 px-3"
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{selectedSession && (
|
||||
<>
|
||||
<ProviderLogo
|
||||
providerId={selectedSession.providerId}
|
||||
className="h-5 w-5 flex-shrink-0"
|
||||
/>
|
||||
<span className="truncate typography-body">
|
||||
{selectedSession.modelId}
|
||||
</span>
|
||||
{selectedSession.instanceNumber > 1 && (
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
#{selectedSession.instanceNumber}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<RiArrowDownSLine className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-[var(--radix-dropdown-menu-trigger-width)]">
|
||||
{group.sessions.map((session) => (
|
||||
<DropdownMenuItem
|
||||
key={session.id}
|
||||
onClick={() => handleSessionSelect(session)}
|
||||
className="flex items-center gap-2 py-2"
|
||||
>
|
||||
<ProviderLogo
|
||||
providerId={session.providerId}
|
||||
className="h-5 w-5 flex-shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="truncate typography-body">
|
||||
{session.modelId}
|
||||
</span>
|
||||
{session.instanceNumber > 1 && (
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
#{session.instanceNumber}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{session.branch && (
|
||||
<div className="flex items-center gap-1 typography-micro text-muted-foreground/60">
|
||||
<RiGitBranchLine className="h-3 w-3" />
|
||||
<span className="truncate">{session.worktreeMetadata?.label || session.branch}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{selectedSession?.id === session.id && (
|
||||
<RiCheckLine className="h-4 w-4 text-primary flex-shrink-0" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Chat Content */}
|
||||
<div className="flex-1 min-h-0">
|
||||
{selectedSession ? (
|
||||
isSessionSynced ? (
|
||||
<ChatErrorBoundary sessionId={selectedSession.id}>
|
||||
<ChatContainer />
|
||||
</ChatErrorBoundary>
|
||||
) : (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Info banner about the worktree */}
|
||||
<div className="px-4 py-2 bg-muted/30 border-b border-border/30">
|
||||
<div className="flex items-center gap-2 typography-meta text-muted-foreground">
|
||||
<ProviderLogo providerId={selectedSession.providerId} className="h-4 w-4" />
|
||||
<span className="font-medium text-foreground">
|
||||
{selectedSession.displayLabel}
|
||||
</span>
|
||||
<span>·</span>
|
||||
<span className="font-mono text-xs truncate">
|
||||
{selectedSession.path}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading or no session state */}
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center p-8">
|
||||
<p className="typography-body text-muted-foreground mb-2">
|
||||
Loading session for <span className="font-medium text-foreground">{selectedSession.displayLabel}</span>
|
||||
</p>
|
||||
<p className="typography-micro text-muted-foreground/60">
|
||||
Session ID: {selectedSession.id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<p className="typography-body text-muted-foreground">
|
||||
No sessions in this group
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,322 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
RiAddCircleLine,
|
||||
RiCloseLine,
|
||||
RiFileImageLine,
|
||||
RiFileLine,
|
||||
RiGitBranchLine,
|
||||
RiHourglassFill,
|
||||
RiSendPlane2Line,
|
||||
} from '@remixicon/react';
|
||||
import { toast } from 'sonner';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||
import { ModelMultiSelect, generateInstanceId, type ModelSelectionWithId } from '@/components/multirun/ModelMultiSelect';
|
||||
import { BranchSelector, useBranchOptions } from '@/components/multirun/BranchSelector';
|
||||
import type { CreateMultiRunParams, MultiRunFileAttachment } from '@/types/multirun';
|
||||
|
||||
/** Max file size in bytes (10MB) */
|
||||
const MAX_FILE_SIZE = 10 * 1024 * 1024;
|
||||
/** Max number of concurrent runs */
|
||||
const MAX_MODELS = 5;
|
||||
|
||||
/** Attached file for agent manager */
|
||||
interface AttachedFile {
|
||||
id: string;
|
||||
filename: string;
|
||||
mimeType: string;
|
||||
size: number;
|
||||
dataUrl: string;
|
||||
}
|
||||
|
||||
interface AgentManagerEmptyStateProps {
|
||||
className?: string;
|
||||
/** Called when the user submits to create a new agent group */
|
||||
onCreateGroup?: (params: CreateMultiRunParams) => void;
|
||||
/** Indicates if a group creation is in progress */
|
||||
isCreating?: boolean;
|
||||
}
|
||||
|
||||
export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
|
||||
className,
|
||||
onCreateGroup,
|
||||
isCreating = false,
|
||||
}) => {
|
||||
const [groupName, setGroupName] = React.useState('');
|
||||
const [prompt, setPrompt] = React.useState('');
|
||||
const [selectedModels, setSelectedModels] = React.useState<ModelSelectionWithId[]>([]);
|
||||
const [baseBranch, setBaseBranch] = React.useState('HEAD');
|
||||
const [attachedFiles, setAttachedFiles] = React.useState<AttachedFile[]>([]);
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
||||
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
const textareaRef = React.useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const currentDirectory = useDirectoryStore((state) => state.currentDirectory ?? null);
|
||||
const { isGitRepository, isLoading: isLoadingBranches } = useBranchOptions(currentDirectory);
|
||||
|
||||
const handleAddModel = React.useCallback((model: ModelSelectionWithId) => {
|
||||
if (selectedModels.length >= MAX_MODELS) {
|
||||
return;
|
||||
}
|
||||
setSelectedModels((prev) => [...prev, model]);
|
||||
}, [selectedModels.length]);
|
||||
|
||||
const handleRemoveModel = React.useCallback((index: number) => {
|
||||
setSelectedModels((prev) => prev.filter((_, i) => i !== index));
|
||||
}, []);
|
||||
|
||||
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: AttachedFile = {
|
||||
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));
|
||||
};
|
||||
|
||||
// Use either local submitting state or external isCreating prop
|
||||
const isSubmittingOrCreating = isSubmitting || isCreating;
|
||||
|
||||
const isValid = Boolean(
|
||||
groupName.trim() &&
|
||||
prompt.trim() &&
|
||||
selectedModels.length >= 1 &&
|
||||
isGitRepository &&
|
||||
!isLoadingBranches
|
||||
);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!isValid || isSubmittingOrCreating) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const models = selectedModels.map(({ providerID, modelID, displayName }) => ({
|
||||
providerID,
|
||||
modelID,
|
||||
displayName,
|
||||
}));
|
||||
|
||||
const files: MultiRunFileAttachment[] | undefined = attachedFiles.length > 0
|
||||
? attachedFiles.map((f) => ({
|
||||
mime: f.mimeType,
|
||||
filename: f.filename,
|
||||
url: f.dataUrl,
|
||||
}))
|
||||
: undefined;
|
||||
|
||||
onCreateGroup?.({
|
||||
name: groupName.trim(),
|
||||
prompt: prompt.trim(),
|
||||
models,
|
||||
worktreeBaseBranch: baseBranch,
|
||||
files,
|
||||
});
|
||||
|
||||
// Reset form on success
|
||||
setGroupName('');
|
||||
setPrompt('');
|
||||
setSelectedModels([]);
|
||||
setAttachedFiles([]);
|
||||
setBaseBranch('HEAD');
|
||||
} catch (error) {
|
||||
console.error('Failed to create agent group:', error);
|
||||
toast.error('Failed to create agent group');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col items-center justify-center h-full w-full p-4', className)}>
|
||||
<form onSubmit={handleSubmit} className="w-full max-w-2xl space-y-4">
|
||||
{/* Group Name Input */}
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="group-name" className="typography-ui-label font-medium text-foreground">
|
||||
Group Name
|
||||
</label>
|
||||
<Input
|
||||
id="group-name"
|
||||
value={groupName}
|
||||
onChange={(e) => setGroupName(e.target.value)}
|
||||
placeholder="e.g. feature-auth, bugfix-login"
|
||||
className="typography-body"
|
||||
/>
|
||||
<p className="typography-micro text-muted-foreground">
|
||||
Used for worktree directory and branch naming
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Branch Selection */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="typography-ui-label font-medium text-foreground flex items-center gap-1.5">
|
||||
<RiGitBranchLine className="h-4 w-4 text-muted-foreground" />
|
||||
Base Branch
|
||||
</label>
|
||||
<BranchSelector
|
||||
directory={currentDirectory}
|
||||
value={baseBranch}
|
||||
onChange={setBaseBranch}
|
||||
/>
|
||||
<p className="typography-micro text-muted-foreground">
|
||||
Creates new branches from <code className="font-mono text-xs">{baseBranch}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Model Selection */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="typography-ui-label font-medium text-foreground">
|
||||
Models
|
||||
</label>
|
||||
<ModelMultiSelect
|
||||
selectedModels={selectedModels}
|
||||
onAdd={handleAddModel}
|
||||
onRemove={handleRemoveModel}
|
||||
minModels={1}
|
||||
addButtonLabel="Add model"
|
||||
maxModels={5}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Chat Input Style Prompt */}
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="prompt" className="typography-ui-label font-medium text-foreground">
|
||||
Prompt
|
||||
</label>
|
||||
<div className="rounded-xl border border-border/60 bg-input/10 dark:bg-input/30 overflow-hidden">
|
||||
{/* Text Area */}
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
id="prompt"
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
placeholder="Ask anything..."
|
||||
className="min-h-[100px] max-h-[300px] resize-none border-0 bg-transparent px-4 py-3 typography-markdown focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
/>
|
||||
|
||||
{/* Attached Files Display */}
|
||||
{attachedFiles.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 px-3 pb-2">
|
||||
{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>
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* Footer Controls */}
|
||||
<div className="flex items-center justify-between px-3 py-2 border-t border-border/40">
|
||||
{/* Left Controls - Attachments */}
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={handleFileSelect}
|
||||
accept="*/*"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground transition-colors"
|
||||
aria-label="Add attachment"
|
||||
>
|
||||
<RiAddCircleLine className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Right Controls - Model Count */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
{selectedModels.length} model{selectedModels.length !== 1 ? 's' : ''} selected
|
||||
</span>
|
||||
</div>
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isValid || isSubmittingOrCreating}
|
||||
className={cn(
|
||||
'flex items-center justify-center text-muted-foreground transition-none outline-none focus:outline-none flex-shrink-0',
|
||||
isValid
|
||||
? 'text-primary hover:text-primary'
|
||||
: 'opacity-30'
|
||||
)}
|
||||
aria-label="Start Agent Group"
|
||||
>
|
||||
{isSubmittingOrCreating ? (
|
||||
<RiHourglassFill className="h-[18px] w-[18px] animate-spin" />
|
||||
) : (
|
||||
<RiSendPlane2Line className="h-[18px] w-[18px]" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,231 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
RiAddLine,
|
||||
RiArrowDownSLine,
|
||||
RiMore2Line,
|
||||
RiSearchLine,
|
||||
RiGitBranchLine,
|
||||
} from '@remixicon/react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useAgentGroupsStore, type AgentGroup } from '@/stores/useAgentGroupsStore';
|
||||
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||
|
||||
const formatRelativeTime = (timestamp: number): string => {
|
||||
const now = Date.now();
|
||||
const diff = now - timestamp;
|
||||
|
||||
const minutes = Math.floor(diff / (60 * 1000));
|
||||
const hours = Math.floor(diff / (60 * 60 * 1000));
|
||||
const days = Math.floor(diff / (24 * 60 * 60 * 1000));
|
||||
|
||||
if (minutes < 1) return 'now';
|
||||
if (minutes < 60) return `${minutes}m`;
|
||||
if (hours < 24) return `${hours}h`;
|
||||
return `${days}d`;
|
||||
};
|
||||
|
||||
interface AgentGroupItemProps {
|
||||
group: AgentGroup;
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
}
|
||||
|
||||
const AgentGroupItem: React.FC<AgentGroupItemProps> = ({ group, isSelected, onSelect }) => {
|
||||
const [menuOpen, setMenuOpen] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group relative flex items-center rounded-md px-1.5 py-1.5 cursor-pointer',
|
||||
isSelected ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6',
|
||||
)}
|
||||
onClick={onSelect}
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex min-w-0 flex-1 flex-col gap-0.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
|
||||
>
|
||||
<span className="truncate typography-ui-label font-normal text-foreground">
|
||||
{group.name}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="typography-micro text-muted-foreground/60 flex items-center gap-1">
|
||||
<RiGitBranchLine className="h-3 w-3" />
|
||||
{group.sessionCount} model{group.sessionCount !== 1 ? 's' : ''}
|
||||
</span>
|
||||
<span className="typography-micro text-muted-foreground/60">
|
||||
{formatRelativeTime(group.lastActive)}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-1.5 self-stretch">
|
||||
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'inline-flex h-3.5 w-[18px] items-center justify-center rounded-md text-muted-foreground transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
|
||||
'opacity-0 group-hover:opacity-100',
|
||||
menuOpen && 'opacity-100',
|
||||
)}
|
||||
aria-label="Group menu"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<RiMore2Line className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="min-w-[140px]">
|
||||
<DropdownMenuItem className="text-destructive focus:text-destructive">
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface AgentManagerSidebarProps {
|
||||
className?: string;
|
||||
selectedGroupName?: string | null;
|
||||
onGroupSelect?: (groupName: string) => void;
|
||||
onNewAgent?: () => void;
|
||||
}
|
||||
|
||||
export const AgentManagerSidebar: React.FC<AgentManagerSidebarProps> = ({
|
||||
className,
|
||||
selectedGroupName,
|
||||
onGroupSelect,
|
||||
onNewAgent,
|
||||
}) => {
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
const [showAll, setShowAll] = React.useState(false);
|
||||
|
||||
const { groups, isLoading, loadGroups } = useAgentGroupsStore();
|
||||
const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
|
||||
|
||||
// Load groups when directory changes
|
||||
React.useEffect(() => {
|
||||
if (currentDirectory) {
|
||||
loadGroups();
|
||||
}
|
||||
}, [currentDirectory, loadGroups]);
|
||||
|
||||
const MAX_VISIBLE = 5;
|
||||
|
||||
const filteredGroups = React.useMemo(() => {
|
||||
if (!searchQuery.trim()) return groups;
|
||||
const query = searchQuery.toLowerCase();
|
||||
return groups.filter(group =>
|
||||
group.name.toLowerCase().includes(query)
|
||||
);
|
||||
}, [searchQuery, groups]);
|
||||
|
||||
const visibleGroups = showAll ? filteredGroups : filteredGroups.slice(0, MAX_VISIBLE);
|
||||
const remainingCount = filteredGroups.length - MAX_VISIBLE;
|
||||
|
||||
return (
|
||||
<div className={cn('flex h-full flex-col bg-background/50 dark:bg-neutral-900/80 text-foreground border-r border-border/30', className)}>
|
||||
{/* Search Input */}
|
||||
<div className="px-2.5 pt-3 pb-2">
|
||||
<div className="relative">
|
||||
<RiSearchLine className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search Agent Groups..."
|
||||
className="pl-8 h-8 rounded-lg border-border/40 bg-background/50 typography-meta"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New Agent Button */}
|
||||
<div className="px-2.5 pb-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start gap-2 h-8"
|
||||
onClick={onNewAgent}
|
||||
>
|
||||
<RiAddLine className="h-4 w-4" />
|
||||
<span className="typography-ui-label">New Agent Group</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Agent Groups Section Header */}
|
||||
<div className="px-2.5 py-1.5 flex items-center gap-1">
|
||||
<RiArrowDownSLine className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="typography-micro font-medium text-muted-foreground uppercase tracking-wider">
|
||||
Agent Groups
|
||||
</span>
|
||||
{isLoading && (
|
||||
<span className="typography-micro text-muted-foreground/50 ml-auto">
|
||||
Loading...
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Group List */}
|
||||
<ScrollableOverlay
|
||||
outerClassName="flex-1 min-h-0"
|
||||
className="space-y-0.5 px-2.5 pb-2"
|
||||
>
|
||||
{visibleGroups.map((group) => (
|
||||
<AgentGroupItem
|
||||
key={group.name}
|
||||
group={group}
|
||||
isSelected={selectedGroupName === group.name}
|
||||
onSelect={() => onGroupSelect?.(group.name)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Show More Link */}
|
||||
{!showAll && remainingCount > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAll(true)}
|
||||
className="mt-1 flex items-center justify-start rounded-md px-1.5 py-0.5 text-left typography-micro text-muted-foreground/70 hover:text-foreground hover:underline"
|
||||
>
|
||||
... More ({remainingCount})
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Show Less Link */}
|
||||
{showAll && filteredGroups.length > MAX_VISIBLE && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAll(false)}
|
||||
className="mt-1 flex items-center justify-start rounded-md px-1.5 py-0.5 text-left typography-micro text-muted-foreground/70 hover:text-foreground hover:underline"
|
||||
>
|
||||
Show less
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!isLoading && filteredGroups.length === 0 && (
|
||||
<div className="py-4 text-center">
|
||||
<p className="typography-meta text-muted-foreground">
|
||||
{searchQuery.trim() ? 'No groups found' : 'No agent groups yet'}
|
||||
</p>
|
||||
{!searchQuery.trim() && (
|
||||
<p className="typography-micro text-muted-foreground/60 mt-1">
|
||||
Create a new agent group to get started
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ScrollableOverlay>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { AgentManagerSidebar } from './AgentManagerSidebar';
|
||||
import { AgentManagerEmptyState } from './AgentManagerEmptyState';
|
||||
import { AgentGroupDetail } from './AgentGroupDetail';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useAgentGroupsStore } from '@/stores/useAgentGroupsStore';
|
||||
import { useMultiRunStore } from '@/stores/useMultiRunStore';
|
||||
import type { CreateMultiRunParams } from '@/types/multirun';
|
||||
|
||||
interface AgentManagerViewProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const AgentManagerView: React.FC<AgentManagerViewProps> = ({ className }) => {
|
||||
const {
|
||||
selectedGroupName,
|
||||
selectGroup,
|
||||
getSelectedGroup,
|
||||
loadGroups,
|
||||
} = useAgentGroupsStore();
|
||||
|
||||
const { createMultiRun, isLoading: isCreatingMultiRun } = useMultiRunStore();
|
||||
|
||||
const handleGroupSelect = React.useCallback((groupName: string) => {
|
||||
selectGroup(groupName);
|
||||
}, [selectGroup]);
|
||||
|
||||
const handleNewAgent = React.useCallback(() => {
|
||||
// Clear selection to show the empty state / new agent form
|
||||
selectGroup(null);
|
||||
}, [selectGroup]);
|
||||
|
||||
const handleCreateGroup = React.useCallback(async (params: CreateMultiRunParams) => {
|
||||
toast.info(`Creating agent group "${params.name}" with ${params.models.length} model(s)...`);
|
||||
|
||||
const result = await createMultiRun(params);
|
||||
|
||||
if (result) {
|
||||
toast.success(`Agent group "${params.name}" created with ${result.sessionIds.length} session(s)`);
|
||||
// Reload groups to pick up the new worktrees and sessions
|
||||
await loadGroups();
|
||||
// Select the newly created group
|
||||
selectGroup(params.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').substring(0, 50));
|
||||
} else {
|
||||
const error = useMultiRunStore.getState().error;
|
||||
toast.error(error || 'Failed to create agent group');
|
||||
}
|
||||
}, [createMultiRun, loadGroups, selectGroup]);
|
||||
|
||||
const selectedGroup = getSelectedGroup();
|
||||
|
||||
return (
|
||||
<div className={cn('flex h-full w-full bg-background', className)}>
|
||||
{/* Left Sidebar - Agent Groups List */}
|
||||
<div className="w-64 flex-shrink-0">
|
||||
<AgentManagerSidebar
|
||||
selectedGroupName={selectedGroupName}
|
||||
onGroupSelect={handleGroupSelect}
|
||||
onNewAgent={handleNewAgent}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{selectedGroup ? (
|
||||
<AgentGroupDetail group={selectedGroup} />
|
||||
) : (
|
||||
<AgentManagerEmptyState
|
||||
onCreateGroup={handleCreateGroup}
|
||||
isCreating={isCreatingMultiRun}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
export { AgentManagerView } from './AgentManagerView';
|
||||
export { AgentManagerSidebar } from './AgentManagerSidebar';
|
||||
export { AgentManagerEmptyState } from './AgentManagerEmptyState';
|
||||
Reference in New Issue
Block a user