BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add variant support across model selection and multi-run components

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-01-08 17:01:24 +02:00
parent ab731fdc79
commit 4b0ae1d95f
8 changed files with 106 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+3
View File
@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
## [Unreleased]
- Added support for model variants (thinking effort)
## [1.4.4] - 2026-01-08
- Agent Manager / Multi Run: select agent per worktree session (thanks to @wienans).
packages/ui/src/components/chat/message/MessageHeader.tsx
+7 -3
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { RiBrainAi3Line, RiUser3Line } from '@remixicon/react';
import { RiAiAgentLine, RiBrainAi3Line, RiUser3Line } from '@remixicon/react';
import { cn } from '@/lib/utils';
import { getAgentColor } from '@/lib/agentColors';
import { FadeInOnReveal } from './FadeInOnReveal';
@@ -60,19 +60,22 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
{!isUser && agentName && (
<div
className={cn(
'flex items-center gap-1 px-1.5 py-0 rounded',
'flex items-center gap-1 px-1.5 py-0 rounded cursor-default',
'agent-badge typography-meta',
'hover:bg-[rgb(from_var(--agent-color-bg)_r_g_b_/_0.1)] hover:border-[rgb(from_var(--agent-color)_r_g_b_/_0.2)]',
getAgentColor(agentName).class
)}
>
<RiAiAgentLine className="h-3 w-3 flex-shrink-0" />
<span className="font-medium">{agentName}</span>
</div>
)}
{!isUser && variant && (
<div
className={cn(
'flex items-center gap-1 px-1.5 py-0 rounded',
'flex items-center gap-1 px-1.5 py-0 rounded cursor-default',
'agent-badge typography-meta',
'hover:bg-[rgb(from_var(--agent-color-bg)_r_g_b_/_0.1)] hover:border-[rgb(from_var(--agent-color)_r_g_b_/_0.2)]',
variant === 'Default' ? undefined : 'agent-info'
)}
style={
@@ -84,6 +87,7 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
: undefined
}
>
<RiBrainAi3Line className="h-3 w-3 flex-shrink-0" />
<span className="font-medium">{variant.length > 0 ? variant[0].toLowerCase() + variant.slice(1) : variant}</span>
</div>
)}
packages/ui/src/components/multirun/ModelMultiSelect.tsx
+68 -16
View File
@@ -1,7 +1,8 @@
import React from 'react';
import { RiAddLine, RiCloseLine, RiSearchLine, RiStarFill, RiTimeLine } from '@remixicon/react';
import { RiAddLine, RiBrainAi3Line, RiCloseLine, RiSearchLine, RiStarFill, RiTimeLine } from '@remixicon/react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { ProviderLogo } from '@/components/ui/ProviderLogo';
import { cn } from '@/lib/utils';
@@ -18,6 +19,7 @@ export interface ModelSelectionWithId {
providerID: string;
modelID: string;
displayName?: string;
variant?: string;
instanceId: string;
}
@@ -26,6 +28,7 @@ export interface ModelSelection {
providerID: string;
modelID: string;
displayName?: string;
variant?: string;
}
// eslint-disable-next-line react-refresh/only-export-components -- Utility is tightly coupled with ModelMultiSelect
@@ -85,11 +88,12 @@ export interface ModelMultiSelectProps {
selectedModels: ModelSelectionWithId[];
onAdd: (model: ModelSelectionWithId) => void;
onRemove: (index: number) => void;
onUpdate?: (index: number, model: ModelSelectionWithId) => void;
/** Minimum models required (shows validation hint) */
minModels?: number;
/** Label for the add button */
addButtonLabel?: string;
/** Whether to show the selected chips inline */
/** Whether to show the selected chips */
showChips?: boolean;
/** Maximum models allowed */
maxModels?: number;
@@ -102,6 +106,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
selectedModels,
onAdd,
onRemove,
onUpdate,
minModels,
addButtonLabel = 'Add model',
showChips = true,
@@ -462,20 +467,67 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
</div>
{/* Selected models */}
{showChips && selectedModels.map((model, index) => {
const key = `${model.providerID}:${model.modelID}`;
const totalSameModel = modelCounts.get(key) || 1;
const instanceIndex = getInstanceIndex(model);
return (
<ModelChip
key={model.instanceId}
model={model}
instanceIndex={instanceIndex}
totalSameModel={totalSameModel}
onRemove={() => onRemove(index)}
/>
);
})}
{showChips && selectedModels.length > 0 && (
<div className="flex flex-col gap-2 w-full">
{selectedModels.map((model, index) => {
const key = `${model.providerID}:${model.modelID}`;
const totalSameModel = modelCounts.get(key) || 1;
const instanceIndex = getInstanceIndex(model);
const provider = providers.find((p) => p.id === model.providerID);
const providerModel = provider?.models.find((m: Record<string, unknown>) => (m as { id?: string }).id === model.modelID) as
| { variants?: Record<string, unknown> }
| undefined;
const variantKeys = providerModel?.variants ? Object.keys(providerModel.variants) : [];
const hasVariants = variantKeys.length > 0;
const DEFAULT_VARIANT_VALUE = '__default__';
const variantValue = model.variant ?? DEFAULT_VARIANT_VALUE;
return (
<div key={model.instanceId} className="flex items-center gap-2 min-w-0">
<ModelChip
model={model}
instanceIndex={instanceIndex}
totalSameModel={totalSameModel}
onRemove={() => onRemove(index)}
/>
{hasVariants && (
<Select
value={variantValue}
onValueChange={(value) => {
if (!onUpdate) return;
const nextVariant = value === DEFAULT_VARIANT_VALUE ? undefined : value;
onUpdate(index, { ...model, variant: nextVariant });
}}
>
<SelectTrigger size="chip" className="px-2 gap-1.5 rounded-md bg-accent/50 border-border/30 hover:bg-accent/60 typography-meta font-medium text-foreground">
<RiBrainAi3Line
className={cn(
'h-3.5 w-3.5 flex-shrink-0',
variantValue === DEFAULT_VARIANT_VALUE ? 'text-muted-foreground' : 'text-[color:var(--status-info)]'
)}
/>
<SelectValue placeholder="Thinking" />
</SelectTrigger>
<SelectContent fitContent>
<SelectItem value={DEFAULT_VARIANT_VALUE} className="pr-2 [&>span:first-child]:hidden">
Default
</SelectItem>
{variantKeys.map((variant) => (
<SelectItem key={variant} value={variant} className="pr-2 [&>span:first-child]:hidden">
{variant}
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
);
})}
</div>
)}
</div>
{/* Validation hint */}
packages/ui/src/components/multirun/MultiRunLauncher.tsx
+5
View File
@@ -174,6 +174,10 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
clearError();
};
const handleUpdateModel = React.useCallback((index: number, model: ModelSelectionWithId) => {
setSelectedModels((prev) => prev.map((item, i) => (i === index ? model : item)));
}, []);
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files;
if (!files) return;
@@ -533,6 +537,7 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
selectedModels={selectedModels}
onAdd={handleAddModel}
onRemove={handleRemoveModel}
onUpdate={handleUpdateModel}
minModels={2}
maxModels={MAX_MODELS}
/>
packages/ui/src/components/ui/select.tsx
+2 -2
View File
@@ -31,14 +31,14 @@ function SelectTrigger({
children,
...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
size?: "sm" | "default" | "lg"
size?: "sm" | "default" | "lg" | "chip"
}) {
return (
<SelectPrimitive.Trigger
data-slot="select-trigger"
data-size={size}
className={cn(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none focus-visible:outline-none hover:bg-muted data-[state=open]:bg-muted focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=sm]:h-6 data-[size=lg]:h-8 data-[size=lg]:py-1.5 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none focus-visible:outline-none hover:bg-muted data-[state=open]:bg-muted focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=sm]:h-6 data-[size=lg]:h-8 data-[size=lg]:py-1.5 data-[size=chip]:h-7 data-[size=chip]:py-1 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
packages/ui/src/components/views/agent-manager/AgentManagerEmptyState.tsx
+7 -1
View File
@@ -146,6 +146,10 @@ export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
setSelectedModels((prev) => prev.filter((_, i) => i !== index));
}, []);
const handleUpdateModel = React.useCallback((index: number, model: ModelSelectionWithId) => {
setSelectedModels((prev) => prev.map((item, i) => (i === index ? model : item)));
}, []);
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files;
if (!files) return;
@@ -214,10 +218,11 @@ export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
setIsSubmitting(true);
try {
const models = selectedModels.map(({ providerID, modelID, displayName }) => ({
const models = selectedModels.map(({ providerID, modelID, displayName, variant }) => ({
providerID,
modelID,
displayName,
variant,
}));
const files: MultiRunFileAttachment[] | undefined = attachedFiles.length > 0
@@ -394,6 +399,7 @@ export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
selectedModels={selectedModels}
onAdd={handleAddModel}
onRemove={handleRemoveModel}
onUpdate={handleUpdateModel}
minModels={1}
addButtonLabel="Add model"
maxModels={5}
packages/ui/src/stores/useMultiRunStore.ts
+13 -10
View File
@@ -150,6 +150,7 @@ export const useMultiRunStore = create<MultiRunStore>()(
worktreePath: string;
providerID: string;
modelID: string;
variant?: string;
}> = [];
const commandsToRun = setupCommands?.filter((cmd) => cmd.trim().length > 0) ?? [];
@@ -214,6 +215,7 @@ export const useMultiRunStore = create<MultiRunStore>()(
worktreePath: worktreeMetadata.path,
providerID: model.providerID,
modelID: model.modelID,
variant: model.variant,
});
} catch (error) {
@@ -276,16 +278,17 @@ export const useMultiRunStore = create<MultiRunStore>()(
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,
files: filesForMessage,
})
);
await opencodeClient.withDirectory(run.worktreePath, () =>
opencodeClient.sendMessage({
id: run.sessionId,
providerID: run.providerID,
modelID: run.modelID,
variant: run.variant,
text: prompt,
agent,
files: filesForMessage,
})
);
} catch (error) {
console.warn('[MultiRun] Failed to start run:', error);
}
packages/ui/src/types/multirun.ts
+1
View File
@@ -9,6 +9,7 @@ export interface MultiRunModelSelection {
providerID: string;
modelID: string;
displayName?: string;
variant?: string;
}
export interface MultiRunFileAttachment {