From fd25e5732f7ff1c02a49fe268731403f2a6bcdfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Sat, 30 May 2026 18:57:55 +0800
Subject: [PATCH] fix: hide message actions after pointer clicks #642

Message action controls stay visible through focus-within for keyboard navigation, but pointer clicks left the copy/fork buttons focused after the mouse moved away. Release pointer focus on message actions so hover controls return to their quiet state while keeping Tab focus behavior intact.

Constraint: Message actions use focus-within for keyboard accessibility and should not remove that path.
Rejected: Remove focus-within reveal | would regress keyboard users who tab to copy or fork.
Confidence: high
Scope-risk: narrow
Directive: Keep pointer-only blur scoped to message action controls; do not remove focus-within without a replacement keyboard affordance.
Tested: cd desktop && bun run test src/components/chat/MessageList.test.tsx --run
Tested: bun run check:desktop
Not-tested: Live Tauri manual hover smoke
Related: #642
---
 .../src/components/chat/MessageActionBar.tsx  |  2 ++
 .../src/components/chat/MessageList.test.tsx  | 27 +++++++++++++++++++
 desktop/src/components/shared/CopyButton.tsx  |  5 +++-
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/desktop/src/components/chat/MessageActionBar.tsx b/desktop/src/components/chat/MessageActionBar.tsx
index 47647272..a0d09102 100644
--- a/desktop/src/components/chat/MessageActionBar.tsx
+++ b/desktop/src/components/chat/MessageActionBar.tsx
@@ -52,6 +52,7 @@ export function MessageActionBar({
             label={copyLabel}
             displayLabel={<Copy size={13} strokeWidth={2.2} aria-hidden="true" />}
             displayCopiedLabel={<Check size={13} strokeWidth={2.4} aria-hidden="true" />}
+            onPointerUp={(event) => event.currentTarget.blur()}
             className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-transparent text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-brand)]/30 hover:bg-[var(--color-surface-container-low)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)]/35"
           />
         ) : null}
@@ -62,6 +63,7 @@ export function MessageActionBar({
             disabled={branchAction.loading}
             aria-label={branchAction.label}
             title={branchAction.label}
+            onPointerUp={(event) => event.currentTarget.blur()}
             className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-transparent text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-brand)]/30 hover:bg-[var(--color-surface-container-low)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)]/35 disabled:cursor-wait disabled:opacity-60"
           >
             <GitFork size={13} strokeWidth={2.2} aria-hidden="true" />
diff --git a/desktop/src/components/chat/MessageList.test.tsx b/desktop/src/components/chat/MessageList.test.tsx
index a67f1404..8f225fc6 100644
--- a/desktop/src/components/chat/MessageList.test.tsx
+++ b/desktop/src/components/chat/MessageList.test.tsx
@@ -1580,6 +1580,33 @@ describe('MessageList nested tool calls', () => {
     )
   })
 
+  it('releases pointer focus from message actions after clicking copy', () => {
+    useChatStore.setState({
+      sessions: {
+        [ACTIVE_TAB]: makeSessionState({
+          messages: [
+            {
+              id: 'assistant-1',
+              type: 'assistant_text',
+              content: '离开 hover 后操作条应该恢复隐藏。',
+              timestamp: 1,
+            },
+          ],
+        }),
+      },
+    })
+
+    render(<MessageList />)
+
+    const copyButton = screen.getByRole('button', { name: 'Copy reply' })
+    copyButton.focus()
+    expect(document.activeElement).toBe(copyButton)
+
+    fireEvent.pointerUp(copyButton)
+
+    expect(document.activeElement).not.toBe(copyButton)
+  })
+
   it('adds selected user message text to the composer context', async () => {
     useChatStore.setState({
       sessions: {
diff --git a/desktop/src/components/shared/CopyButton.tsx b/desktop/src/components/shared/CopyButton.tsx
index a5ae0972..1bd33588 100644
--- a/desktop/src/components/shared/CopyButton.tsx
+++ b/desktop/src/components/shared/CopyButton.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, type ReactNode } from 'react'
+import { useEffect, useState, type PointerEventHandler, type ReactNode } from 'react'
 import { copyTextToClipboard } from '../chat/clipboard'
 
 type Props = {
@@ -8,6 +8,7 @@ type Props = {
   displayLabel?: ReactNode
   displayCopiedLabel?: ReactNode
   className?: string
+  onPointerUp?: PointerEventHandler<HTMLButtonElement>
 }
 
 export function CopyButton({
@@ -17,6 +18,7 @@ export function CopyButton({
   displayLabel,
   displayCopiedLabel,
   className = '',
+  onPointerUp,
 }: Props) {
   const [copied, setCopied] = useState(false)
 
@@ -48,6 +50,7 @@ export function CopyButton({
     <button
       type="button"
       onClick={handleCopy}
+      onPointerUp={onPointerUp}
       className={className}
       aria-label={currentLabel}
       title={currentLabel}