From c7627f64ceb58c6e607095b36de0242b184ec282 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 12:53:04 -0700
Subject: [PATCH 1/2] improvement(ui): share browser toolbar actions

---
 .../browser-session/browser-downloads.tsx     | 11 +++---
 .../browser-session/browser-session.tsx       | 34 +++++--------------
 .../browser-toolbar-button.tsx                | 28 +++++++++++++++
 3 files changed, 41 insertions(+), 32 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
index ed3ae9e2eb1..a694dc21271 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import type { BrowserDownloadInfo } from '@sim/desktop-bridge'
 import {
-  Button,
   cn,
   DropdownMenu,
   DropdownMenuContent,
@@ -18,6 +17,7 @@ import {
   showBrowserDownloadInFolder,
   showBrowserDownloadsMenu,
 } from '@/lib/browser-agent/transport'
+import { BrowserToolbarButton } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button'
 
 /** Aggregate byte progress for the toolbar rail; unknown-size downloads are ignored. */
 export function aggregateDownloadPercent(downloads: BrowserDownloadInfo[]): number | null {
@@ -127,14 +127,11 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
       }}
     >
       <DropdownMenuTrigger asChild>
-        <Button
+        <BrowserToolbarButton
           ref={buttonRef}
-          type='button'
-          variant='ghost-secondary'
-          size='sm'
           aria-label={label}
           title={label}
-          className='relative size-[30px] shrink-0 overflow-hidden p-0'
+          className='relative overflow-hidden'
           onClick={() => setHasUnviewedCompletion(false)}
         >
           {hasActiveDownloads ? (
@@ -160,7 +157,7 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
               />
             </span>
           )}
-        </Button>
+        </BrowserToolbarButton>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end' sideOffset={5} className='w-[320px]'>
         <DropdownMenuLabel>Downloads</DropdownMenuLabel>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
index f3aa734a126..a7c82cf5069 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
@@ -16,7 +16,6 @@ import type {
   DesktopAppearanceTheme,
 } from '@sim/desktop-bridge'
 import {
-  Button,
   ChipConfirmModal,
   ChipInput,
   chipVariants,
@@ -82,6 +81,7 @@ import {
   useBrowserPanelOcclusion,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-panel-occlusion'
 import { BrowserThemeNotice } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-theme-notice'
+import { BrowserToolbarButton } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button'
 import {
   buildOmniboxSuggestions,
   googleSearchUrl,
@@ -1034,38 +1034,26 @@ export function BrowserSession({
     <div ref={panelRef} className='flex h-full flex-col overflow-hidden'>
       <div className='relative shrink-0 border-[var(--border)] border-b bg-[var(--bg)]'>
         <div className='flex items-center gap-1 px-2.5 py-1.5'>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          <BrowserToolbarButton
             aria-label='Back'
             disabled={!pageState?.canGoBack}
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('back', {}, scopeId)}
           >
             <ArrowLeft className='size-[14px]' />
-          </Button>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          </BrowserToolbarButton>
+          <BrowserToolbarButton
             aria-label='Forward'
             disabled={!pageState?.canGoForward}
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('forward', {}, scopeId)}
           >
             <ArrowRight className='size-[14px]' />
-          </Button>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          </BrowserToolbarButton>
+          <BrowserToolbarButton
             aria-label='Reload page'
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('reload', {}, scopeId)}
           >
             <RefreshCw className='size-[14px]' />
-          </Button>
+          </BrowserToolbarButton>
           {/* URL bar: Enter navigates the agent browser. */}
           <Popover
             open={suggestionsOpen}
@@ -1266,17 +1254,13 @@ export function BrowserSession({
               }}
             >
               <DropdownMenuTrigger asChild>
-                <Button
+                <BrowserToolbarButton
                   ref={fillButtonRef}
-                  type='button'
-                  variant='ghost-secondary'
-                  size='sm'
                   aria-label='Fill a saved password'
                   title='Fill a saved password'
-                  className='size-[30px] shrink-0 p-0'
                 >
                   <Key className='size-[14px]' />
-                </Button>
+                </BrowserToolbarButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent align='end' sideOffset={5} className='w-[240px]'>
                 {fillOptions.map((credential) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx
new file mode 100644
index 00000000000..1093f6ad5ac
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { type ComponentProps, forwardRef } from 'react'
+import { Button, cn } from '@sim/emcn'
+
+interface BrowserToolbarButtonProps
+  extends Omit<
+    ComponentProps<typeof Button>,
+    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'type'
+  > {
+  'aria-label': string
+}
+
+/** Browser navigation and utility action; forwards menu-anchor refs and native events. */
+export const BrowserToolbarButton = forwardRef<HTMLButtonElement, BrowserToolbarButtonProps>(
+  ({ className, ...props }, ref) => (
+    <Button
+      {...props}
+      ref={ref}
+      type='button'
+      variant='ghost-secondary'
+      size='sm'
+      className={cn('size-[30px] shrink-0 p-0', className)}
+    />
+  )
+)
+
+BrowserToolbarButton.displayName = 'BrowserToolbarButton'

From c26c5dff2952a776c80bc24e76eeee468bb821e3 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 13:14:05 -0700
Subject: [PATCH 2/2] refactor(ui): remove redundant browser action client
 boundary

---
 .../components/browser-session/browser-toolbar-button.tsx       | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx
index 1093f6ad5ac..7636639eccc 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import { type ComponentProps, forwardRef } from 'react'
 import { Button, cn } from '@sim/emcn'