fix(ui): avoid member model tooltip crash

src/renderer/components/team/members/MemberDraftRow.test.tsx

@@ -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: {

src/renderer/components/team/members/MemberDraftRow.tsx

@@ -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>
+            <span className="inline-flex w-full" title={modelButtonTitle}>
-              <TooltipTrigger asChild>
+              <Button
-                <span className="inline-flex w-full">
+                variant="outline"
-                  <Button
+                size="sm"
-                    variant="outline"
+                className={cn(
-                    size="sm"
+                  'h-8 w-full justify-start gap-1 overflow-hidden text-left',
-                    className={cn(
+                  hasModelIssue &&
-                      'h-8 w-full justify-start gap-1 overflow-hidden text-left',
+                    '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'
-                      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}
-                    aria-label={modelButtonAriaLabel}
+                disabled={modelButtonDisabled}
-                    disabled={(lockProviderModel && !canOpenLockedModelPanel) || isRemoved}
+                onClick={() => setModelExpanded((prev) => !prev)}
-                    onClick={() => setModelExpanded((prev) => !prev)}
+              >
-                  >
+                {modelExpanded ? (
-                    {modelExpanded ? (
+                  <ChevronDown className="size-3.5" />
-                      <ChevronDown className="size-3.5" />
+                ) : (
-                    ) : (
+                  <ChevronRight className="size-3.5" />
-                      <ChevronRight className="size-3.5" />
+                )}
-                    )}
+                <ProviderBrandLogo providerId={effectiveProviderId} className="size-3.5 shrink-0" />
-                    <ProviderBrandLogo
+                <span className="min-w-0 flex-1 truncate">{modelButtonLabel}</span>
-                      providerId={effectiveProviderId}
+                {hasModelIssue ? (
-                      className="size-3.5 shrink-0"
+                  <AlertTriangle className="size-3.5 shrink-0 text-red-300" />
-                    />
+                ) : null}
-                    <span className="min-w-0 flex-1 truncate">{modelButtonLabel}</span>
+              </Button>
-                    {hasModelIssue ? (
+            </span>
-                      <AlertTriangle className="size-3.5 shrink-0 text-red-300" />
+            {modelTooltipText ? (
-                    ) : null}
+              <span id={modelHelpDescriptionId} className="sr-only">
-                  </Button>
+                {modelTooltipText}
-                </span>
+              </span>
-              </TooltipTrigger>
+            ) : null}
-              {modelTooltipText || currentModelIssueText ? (
+            {currentModelIssueText ? (
-                <TooltipContent side="top" className="max-w-64 text-xs leading-relaxed">
+              <p
-                  {currentModelIssueText ? (
+                id={modelIssueDescriptionId}
-                    <p className="text-red-300">{currentModelIssueText}</p>
+                className="flex items-start gap-1 text-[10px] leading-snug text-red-300"
-                  ) : null}
+              >
-                  {modelTooltipText ? (
+                <AlertTriangle className="mt-0.5 size-3 shrink-0" />
-                    <p
+                <span>{currentModelIssueText}</span>
-                      className={currentModelIssueText ? 'mt-1 border-t border-white/10 pt-1' : ''}
+              </p>
-                    >
+            ) : null}
-                      {modelTooltipText}
-                    </p>
-                  ) : null}
-                </TooltipContent>
-              ) : null}
-            </Tooltip>
           </div>
           {showWorktreeIsolationControls ? (
             <Tooltip>