admin-valentin/agent-ecosystem
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): avoid member model tooltip crash

Browse source
This commit is contained in:
777genius 2026-05-17 00:35:27 +03:00
parent f96d62dc20
commit 3c483745d9
2 changed files with 99 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/renderer/components/team/members/MemberDraftRow.test.tsx
View file

@ -27,18 +27,32 @@ vi.mock('@renderer/components/team/RoleSelect', () => ({
vi.mock('@renderer/components/ui/button', () => ({
Button: ({
children,
className,
onClick,
disabled,
title,
'aria-describedby': ariaDescribedBy,
'aria-label': ariaLabel,
}: {
children: React.ReactNode;
className?: string;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
disabled?: boolean;
title?: string;
'aria-describedby'?: string;
'aria-label'?: string;
}) =>
React.createElement(
'button',
{ type: 'button', onClick, disabled, 'aria-label': ariaLabel },
{
type: 'button',
className,
onClick,
disabled,
title,
'aria-describedby': ariaDescribedBy,
'aria-label': ariaLabel,
},
children
),
}));
@ -204,6 +218,41 @@ describe('MemberDraftRow', () => {
});
});
it('shows model launch issues inline and keeps model controls expandable', () => {
const issueText =
'Member alice uses Anthropic effort "medium", but Haiku 4.5 does not support it in the current runtime.';
const { host, root } = renderMemberDraftRow({
member: createMemberDraft({
id: 'member-1',
name: 'alice',
roleSelection: 'developer',
providerId: 'anthropic',
model: 'claude-haiku-4-5-20251001',
effort: 'medium',
}),
modelIssueText: issueText,
});
const modelButton = host.querySelector<HTMLButtonElement>(
'button[aria-label="anthropic provider, claude-haiku-4-5-20251001"]'
)!;
expect(host.textContent).toContain(issueText);
expect(modelButton.getAttribute('aria-describedby')).toContain('member-member-1-model-issue');
expect(modelButton.parentElement?.getAttribute('title')).toBe(issueText);
act(() => {
modelButton.click();
});
expect(host.textContent).toContain('team-model-selector');
expect(host.textContent).toContain('effort-selector');
act(() => {
root.unmount();
});
});
it('warns custom Anthropic Sonnet teammates about plan/runtime billing when 200K limit is off', () => {
const { host, root } = renderMemberDraftRow({
member: {

95
src/renderer/components/team/members/MemberDraftRow.tsx
View file

@ -247,6 +247,15 @@ export const MemberDraftRow = ({
const currentModelIssueText =
modelIssueText ?? selectedModelUnavailableText ?? selectedModelIssueText ?? null;
const hasModelIssue = Boolean(currentModelIssueText);
const modelButtonDisabled = (lockProviderModel && !canOpenLockedModelPanel) || isRemoved;
const modelButtonTitle =
[currentModelIssueText, modelTooltipText]
.filter((message): message is string => Boolean(message))
.join('\n') || undefined;
const modelIssueDescriptionId = hasModelIssue ? `member-${member.id}-model-issue` : undefined;
const modelHelpDescriptionId = modelTooltipText ? `member-${member.id}-model-help` : undefined;
const modelButtonDescribedBy =
[modelIssueDescriptionId, modelHelpDescriptionId].filter(Boolean).join(' ') || undefined;
const hasCustomProviderOrModel =
!forceInheritedModelSettings && Boolean(member.providerId || member.model?.trim());
const showSonnetExtraUsageWarning =
@ -342,52 +351,46 @@ export const MemberDraftRow = ({
</Button>
) : null}
<div className="w-full min-w-0 space-y-1 sm:w-[150px] sm:min-w-[150px]">
<Tooltip>
<TooltipTrigger asChild>
<span className="inline-flex w-full">
<Button
variant="outline"
size="sm"
className={cn(
'h-8 w-full justify-start gap-1 overflow-hidden text-left',
hasModelIssue &&
'border-red-500/50 bg-red-500/10 text-red-100 hover:border-red-400/60 hover:bg-red-500/15 hover:text-red-50'
)}
aria-label={modelButtonAriaLabel}
disabled={(lockProviderModel && !canOpenLockedModelPanel) || isRemoved}
onClick={() => setModelExpanded((prev) => !prev)}
>
{modelExpanded ? (
<ChevronDown className="size-3.5" />
) : (
<ChevronRight className="size-3.5" />
)}
<ProviderBrandLogo
providerId={effectiveProviderId}
className="size-3.5 shrink-0"
/>
<span className="min-w-0 flex-1 truncate">{modelButtonLabel}</span>
{hasModelIssue ? (
<AlertTriangle className="size-3.5 shrink-0 text-red-300" />
) : null}
</Button>
</span>
</TooltipTrigger>
{modelTooltipText || currentModelIssueText ? (
<TooltipContent side="top" className="max-w-64 text-xs leading-relaxed">
{currentModelIssueText ? (
<p className="text-red-300">{currentModelIssueText}</p>
) : null}
{modelTooltipText ? (
<p
className={currentModelIssueText ? 'mt-1 border-t border-white/10 pt-1' : ''}
>
{modelTooltipText}
</p>
) : null}
</TooltipContent>
) : null}
</Tooltip>
<span className="inline-flex w-full" title={modelButtonTitle}>
<Button
variant="outline"
size="sm"
className={cn(
'h-8 w-full justify-start gap-1 overflow-hidden text-left',
hasModelIssue &&
'border-red-500/50 bg-red-500/10 text-red-100 hover:border-red-400/60 hover:bg-red-500/15 hover:text-red-50'
)}
aria-label={modelButtonAriaLabel}
aria-describedby={modelButtonDescribedBy}
disabled={modelButtonDisabled}
onClick={() => setModelExpanded((prev) => !prev)}
>
{modelExpanded ? (
<ChevronDown className="size-3.5" />
) : (
<ChevronRight className="size-3.5" />
)}
<ProviderBrandLogo providerId={effectiveProviderId} className="size-3.5 shrink-0" />
<span className="min-w-0 flex-1 truncate">{modelButtonLabel}</span>
{hasModelIssue ? (
<AlertTriangle className="size-3.5 shrink-0 text-red-300" />
) : null}
</Button>
</span>
{modelTooltipText ? (
<span id={modelHelpDescriptionId} className="sr-only">
{modelTooltipText}
</span>
) : null}
{currentModelIssueText ? (
<p
id={modelIssueDescriptionId}
className="flex items-start gap-1 text-[10px] leading-snug text-red-300"
>
<AlertTriangle className="mt-0.5 size-3 shrink-0" />
<span>{currentModelIssueText}</span>
</p>
) : null}
</div>
{showWorktreeIsolationControls ? (
<Tooltip>