fix(browser): make address bar icon hover visible (#41438)

src/renderer/src/components/browser-pane/assemble-chrome/browser-address-chips.fixture.tsx

@@ -0,0 +1,34 @@
+import { useRef } from 'react'
+import { defineFixture } from '../../../component-fixtures/component-fixture'
+import { ArtifactPublishButton } from '../../artifacts/ArtifactPublishButton'
+import BrowserAddressBar from './BrowserAddressBar'
+import { BrowserOpenSourceFileButton } from './browser-address-chips'
+
+function AddressBar(): React.JSX.Element {
+  const inputRef = useRef<HTMLInputElement>(null)
+  return (
+    <BrowserAddressBar
+      pageId="address-icons"
+      value="file:///workspace/report.html"
+      inputRef={inputRef}
+      onChange={() => {}}
+      onSubmit={() => {}}
+      onNavigate={() => {}}
+      trailing={
+        <>
+          <BrowserOpenSourceFileButton onOpen={() => {}} />
+          <ArtifactPublishButton
+            sourceKey="/workspace/report.html"
+            size="icon-xs"
+            variant="muted-field-icon"
+            createRequest={async () => {
+              throw new Error('Preview only')
+            }}
+          />
+        </>
+      }
+    />
+  )
+}
+
+export const addressIcons = defineFixture({ width: 560, render: () => <AddressBar /> })

src/renderer/src/components/browser-pane/assemble-chrome/browser-address-chips.tsx

@@ -94,7 +94,13 @@ export function BrowserOpenSourceFileButton({ onOpen }: { onOpen: () => void }):
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <Button type="button" size="icon-xs" variant="ghost" aria-label={label} onClick={onOpen}>
+        <Button
+          type="button"
+          size="icon-xs"
+          variant="muted-field-icon"
+          aria-label={label}
+          onClick={onOpen}
+        >
           <FileCode2 className="size-3.5" />
         </Button>
       </TooltipTrigger>

src/renderer/src/components/browser-pane/assemble-chrome/browser-page-toolbar.tsx

@@ -198,6 +198,7 @@ export function BrowserPageToolbar({
                 <ArtifactPublishButton
                   sourceKey={shareableArtifactFile.filePath}
                   size="icon-xs"
+                  variant="muted-field-icon"
                   createRequest={() => readBrowserHtmlArtifactRequest(currentBrowserUrl)}
                 />
               ) : null}

src/renderer/src/components/ui/button.tsx

@@ -19,6 +19,9 @@ const buttonVariants = cva(
         'orchestration-tab': `${outlineButtonClasses} border-(--crew-border) bg-(--crew-surface) text-card-foreground shadow-floating dark:border-(--crew-border) dark:bg-(--crew-surface) dark:hover:bg-accent dark:hover:text-accent-foreground`,
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        // Keep icon states visible on muted fields, which share accent's light-theme fill.
+        'muted-field-icon':
+          'text-muted-foreground hover:bg-foreground/[0.08] hover:text-foreground focus-visible:bg-foreground/[0.08] focus-visible:text-foreground aria-expanded:bg-foreground/[0.08] aria-expanded:text-foreground data-[state=open]:bg-foreground/[0.08] data-[state=open]:text-foreground',
         // The head queued card's Steer: ghost, filled as the primary while the composer previews Steer queued.
         'queued-head-steer':
           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 [[data-native-chat-root]:has([data-native-chat-steer-preview=steer-queued])_&]:bg-primary [[data-native-chat-root]:has([data-native-chat-steer-preview=steer-queued])_&]:text-primary-foreground',