fix(ui): unify chat tooltips and preserve overlay interactions

- Remove duplicate native tooltips from command and message actions
- Use styled tooltips and accessible labels for message buttons
- Keep interactive tooltips open when entering the overlay
- Prevent tooltip clicks from toggling the parent command card
- Cover hover persistence, click isolation, and accessible labels

Author: wsp1911

design-system/packages/ui/src/components/Tooltip/Tooltip.tsx

@@ -357,7 +357,11 @@ export function Tooltip({
     const onEnter = (event: MouseEvent) => {
       if (trigger === "hover" || trigger === "hover-focus") showTooltip(event);
     };
-    const onLeave = () => {
+    const onLeave = (event: MouseEvent) => {
+      // React can deliver the portal's mouse-enter before this native
+      // mouse-leave. Do not restart the hide timer when entering the tooltip.
+      if (interactive && event.relatedTarget instanceof Node
+        && tooltipRef.current?.contains(event.relatedTarget)) return;
       if (trigger === "hover-focus" && element.contains(element.ownerDocument.activeElement)) return;
       if (trigger === "hover" || trigger === "hover-focus") scheduleHideTooltip();
     };
@@ -384,7 +388,7 @@ export function Tooltip({
       element.removeEventListener("focusout", onBlur);
       element.removeEventListener("click", onClick);
     };
-  }, [externalTriggerRef, hideTooltip, scheduleHideTooltip, showTooltip, trigger, visible]);
+  }, [externalTriggerRef, hideTooltip, interactive, scheduleHideTooltip, showTooltip, trigger, visible]);
 
   // A measured text slot can mount after focus has already reached its owner.
   // Only replay focus/virtual activation on a transition, not on visibility updates.
@@ -504,6 +508,8 @@ export function Tooltip({
           data-openbitfun-interactive={interactive ? "true" : "false"}
           data-openbitfun-state={isShown ? "visible" : undefined}
           data-instant={instantRef.current || undefined}
+          // Portal clicks still bubble through the React tree to the owning control.
+          onClick={(event) => event.stopPropagation()}
           onMouseEnter={interactive ? () => {
             if (hideTimeoutRef.current) {
               clearTimeout(hideTimeoutRef.current);

design-system/packages/ui/src/flow-chat/tool-cards/CommandToolCard.tsx

@@ -218,7 +218,6 @@ export function CommandToolCard({
                 data-openbitfun-part="command"
                 data-empty={resolvedCommand ? "false" : "true"}
                 data-testid={commandTestId}
-                title={resolvedCommand ?? undefined}
               ><OverflowText>
                 {resolvedCommand ?? emptyCommand}
               </OverflowText></code>

src/web-ui/src/flow_chat/components/modern/UserMessageItem.test.tsx

@@ -592,9 +592,11 @@ describe('UserMessageItem steering tag', () => {
     const editButton = container.querySelector<HTMLButtonElement>('.user-message-item__edit-btn');
 
     expect(rollbackButton?.disabled).toBe(true);
-    expect(rollbackButton?.title).toContain(`message.rollbackDisabled${reason}`);
+    expect(rollbackButton?.getAttribute('aria-label')).toContain(`message.rollbackDisabled${reason}`);
+    expect(rollbackButton?.hasAttribute('title')).toBe(false);
     expect(editButton?.disabled).toBe(true);
-    expect(editButton?.title).toContain(`message.editDisabled${reason}`);
+    expect(editButton?.getAttribute('aria-label')).toContain(`message.editDisabled${reason}`);
+    expect(editButton?.hasAttribute('title')).toBe(false);
   });
 
   it('hides the edit button when the panel context disables user message editing', () => {

src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx

@@ -669,21 +669,24 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
           )}
           {!isEditing && (
             <div className="user-message-item__actions" data-openbitfun-component="user-message-item" data-openbitfun-part="actions">
-              <button
-                className={`user-message-item__copy-btn ${copied ? 'copied' : ''}`}
-                onClick={handleCopy}
-                title={copied ? t('message.copyFailed') : t('message.copy')}
-              >
-                {copied ? <Icon name="check-line" size="sm" /> : <Icon name="duplicate" size="sm" />}
-              </button>
+              <Tooltip content={copied ? t('message.copied') : t('message.copy')}>
+                <button
+                  type="button"
+                  className={`user-message-item__copy-btn ${copied ? 'copied' : ''}`}
+                  onClick={handleCopy}
+                  aria-label={copied ? t('message.copied') : t('message.copy')}
+                >
+                  {copied ? <Icon name="check-line" size="sm" /> : <Icon name="duplicate" size="sm" />}
+                </button>
+              </Tooltip>
               {canShowEditAction && (
                 <Tooltip content={canEdit ? t('message.edit') : editDisabledReason}>
                   <button
                     type="button"
                     className="user-message-item__edit-btn"
                     onClick={handleBeginEdit}
                     disabled={!canEdit}
-                    title={canEdit ? t('message.edit') : editDisabledReason}
+                    aria-label={canEdit ? t('message.edit') : editDisabledReason}
                   >
                     <Icon name="edit" size="sm" />
                   </button>
@@ -704,7 +707,7 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
                     className="user-message-item__rollback-btn"
                     onClick={handleRollback}
                     disabled={!canRollback}
-                    title={rollbackTooltip}
+                    aria-label={rollbackTooltip}
                   >
                     {sessionMutation?.kind === 'rollback' && sessionMutation.targetTurnId === turnId ? (
                       <Loader2 size={14} className="user-message-item__rollback-spinner" />

src/web-ui/src/shared/ui/OverflowText.test.tsx

@@ -4,6 +4,7 @@ import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { ListboxOption, OverflowText, Select, Tooltip } from '@openbitfun/ui';
+import { CommandToolCard } from '@openbitfun/ui/flow-chat';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -74,6 +75,41 @@ describe('overflow text full-content access', () => {
     expect(button.getAttribute('aria-describedby')).toBe('help');
   });
 
+  it('keeps the command tooltip open when portal enter precedes native trigger leave', () => {
+    render(<CommandToolCard action="Run" command={longLabel} emptyCommand="Empty" isExpanded={false} status="completed" />);
+    expect(host.querySelector('[title]')).toBeNull();
+    const label = host.querySelector('[data-openbitfun-part="command"] [data-overflow]')!;
+    const trigger = label.closest('[data-overflow-trigger]') ?? label;
+    hover(trigger);
+    reveal();
+    const popup = tooltip()!;
+    expect(popup.textContent).toBe(longLabel);
+    act(() => {
+      popup.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, relatedTarget: trigger }));
+      trigger.dispatchEvent(new MouseEvent('mouseleave', { relatedTarget: popup }));
+    });
+    act(() => vi.advanceTimersByTime(1000));
+    expect(tooltip()).toBe(popup);
+    act(() => popup.dispatchEvent(new MouseEvent('mouseout', { bubbles: true, relatedTarget: document.body })));
+    act(() => vi.advanceTimersByTime(500));
+    expect(tooltip()).toBeNull();
+  });
+
+  it('does not toggle the command card when clicking inside its tooltip', () => {
+    const onToggle = vi.fn();
+    render(<CommandToolCard action="Run" command={longLabel} emptyCommand="Empty"
+      isExpanded={false} status="completed" output="Output" onToggle={onToggle} />);
+    const label = host.querySelector<HTMLElement>('[data-openbitfun-part="command"] [data-overflow]')!;
+    hover(label.closest('[data-overflow-trigger]') ?? label);
+    reveal();
+    const popup = tooltip()!;
+    act(() => popup.querySelector<HTMLElement>('[data-openbitfun-part="body"]')!.click());
+    expect(onToggle).not.toHaveBeenCalled();
+    expect(tooltip()).toBe(popup);
+    act(() => label.click());
+    expect(onToggle).toHaveBeenCalledOnce();
+  });
+
   it('reveals rich labels and plain-text arrays without waiting for a marquee', () => {
     render(<button data-overflow-trigger>
       <OverflowText>Run <strong>independent tasks</strong> concurrently whenever possible</OverflowText>