From 67999dcaae96e22fcd5f9719cdcc37ab4e7ef324 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Fri, 4 Sep 2026 10:05:45 -0700
Subject: [PATCH] Keep attention glyph knockout white when row is selected
 (#18679)

* Simplify palette attention glyph styling

Remove visual styling from the container so the glyph appears as a
lightweight overlay on the row icon, not a selection bubble.

* Keep attention glyph knockout white when row is selected

The glyph now uses a white background (bg-popover) with a ring to create a
visual knockout effect that separates it from the icon. This prevents the
glyph from inheriting the row selection styling, ensuring it stays visible
and distinct regardless of selection state.

* Correct attention glyph knockout color description to popover-colored
---
 .../components/cmd-j/palette-live-status.test.tsx | 15 ++++-----------
 .../src/components/cmd-j/palette-live-status.tsx  | 12 ++----------
 2 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/src/renderer/src/components/cmd-j/palette-live-status.test.tsx b/src/renderer/src/components/cmd-j/palette-live-status.test.tsx
index a2656104d87..3cc6a9077dd 100644
--- a/src/renderer/src/components/cmd-j/palette-live-status.test.tsx
+++ b/src/renderer/src/components/cmd-j/palette-live-status.test.tsx
@@ -451,7 +451,7 @@ describe('palette live status', () => {
     expect(dotLabels()).toEqual(['Needs permission'])
   })
 
-  it('cuts the pip out of the dialog surface, and out of accent when selected', async () => {
+  it('keeps the attention glyph knockout popover-colored when its row is selected', async () => {
     setAgentState('working')
     await act(async () => {
       testRoot.render(
@@ -469,18 +469,11 @@ describe('palette live status', () => {
         </PaletteLiveStatusProvider>
       )
     })
-    const pip = testContainer.querySelector<HTMLElement>('[aria-hidden="true"].rounded-full')
+    const pip = testContainer.querySelector<HTMLElement>('[aria-hidden="true"]')
     expect(pip).not.toBeNull()
-    // Why popover and not background: the CommandDialog surface is --popover (#171717 dark), while
-    // --background is the app canvas (#0a0a0a) — the mismatch punched a dark halo through each row.
     expect(pip?.className).toContain('bg-popover')
     expect(pip?.className).toContain('ring-popover')
-    expect(pip?.className).not.toContain('bg-background')
-    expect(pip?.className).toContain(
-      'group-data-[selected=true]:bg-[var(--jump-palette-selection-surface)]'
-    )
-    expect(pip?.className).toContain(
-      'group-data-[selected=true]:ring-[var(--jump-palette-selection-surface)]'
-    )
+    expect(pip?.className).toContain('rounded-full')
+    expect(pip?.className).not.toContain('group-data-[selected=true]')
   })
 })
diff --git a/src/renderer/src/components/cmd-j/palette-live-status.tsx b/src/renderer/src/components/cmd-j/palette-live-status.tsx
index 432b6c35210..da59663490f 100644
--- a/src/renderer/src/components/cmd-j/palette-live-status.tsx
+++ b/src/renderer/src/components/cmd-j/palette-live-status.tsx
@@ -9,7 +9,6 @@ import {
   buildExplicitEntriesByTabId,
   type TabPaneInputSources
 } from '@/components/sidebar/smart-attention'
-import { cn } from '@/lib/utils'
 import { isExplicitAgentStatusFresh } from '@/lib/agent-status'
 import { getLiveAgentStatusByWorktreeId } from '@/lib/worktree-activity-state'
 import {
@@ -255,15 +254,8 @@ export function PaletteRecentTabStatusDot({
       <span className="relative inline-flex size-3.5 shrink-0 items-center justify-center">
         {fallback}
         <span
-          className={cn(
-            // Why popover, not background: the dialog surface is --popover (#171717 in dark), while
-            // --background is the app canvas (#0a0a0a) — using it punched a dark halo through every
-            // dark-mode row. Selected rows use --jump-palette-selection-surface so the cutout tracks
-            // the stronger keyboard highlight from main.css.
-            'pointer-events-none absolute -right-0.5 -bottom-0.5 flex items-center justify-center rounded-full',
-            'bg-popover ring-2 ring-popover',
-            'group-data-[selected=true]:bg-[var(--jump-palette-selection-surface)] group-data-[selected=true]:ring-[var(--jump-palette-selection-surface)]'
-          )}
+          // The popover-colored knockout separates the glyph from its icon without inheriting row selection.
+          className="pointer-events-none absolute -right-0.5 -bottom-0.5 flex items-center justify-center rounded-full bg-popover ring-2 ring-popover"
           aria-hidden="true"
         >
           <RecentTabAttentionBadgeGlyph badge={badge} />