From f180a1b0858d366d413c1c2a81c48798ef0e25b0 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Sat, 19 Sep 2026 14:20:50 -0700
Subject: [PATCH] improvement(ui): centralize tab strip action geometry

---
 .../hero-resource-panel.tsx                   | 16 ++---
 .../add-resource-dropdown.tsx                 | 15 ++---
 .../resource-content/resource-content.tsx     | 63 ++++++-------------
 .../resource-tabs/resource-tab-controls.ts    |  7 ---
 .../resource-tabs/resource-tabs.tsx           |  8 +--
 packages/emcn/src/components/index.ts         |  1 +
 .../components/tab-strip/tab-strip-action.tsx | 29 +++++++++
 .../tab-strip/tab-strip.dom.test.tsx          | 36 ++++++++++-
 .../src/components/tab-strip/tab-strip.tsx    | 12 ++--
 9 files changed, 100 insertions(+), 87 deletions(-)
 create mode 100644 packages/emcn/src/components/tab-strip/tab-strip-action.tsx

diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx
index bb8d64f5d8f..cc03a9ae5b5 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx
@@ -9,6 +9,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   TabStrip,
+  TabStripAction,
   type TabStripItem,
   Tooltip,
 } from '@sim/emcn'
@@ -25,7 +26,6 @@ import type { LeadRecord } from '@/app/(landing)/tables/components/tables-record
 import { TablesRecordsTable } from '@/app/(landing)/tables/components/tables-records-preview/tables-records-table'
 import {
   RESOURCE_HEADER_CLASSES,
-  RESOURCE_TAB_ICON_BUTTON_CLASS,
   RESOURCE_TAB_ICON_CLASS,
   resourceTabWidthClass,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
@@ -133,15 +133,14 @@ export function HeroResourcePanel({
     activeId === 'workflow' ? (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Button
+          <TabStripAction
             type='button'
             variant='subtle'
             onClick={onRunWorkflow}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
             aria-label='Run workflow'
           >
             <PlayOutline className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
+          </TabStripAction>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>Run workflow</Tooltip.Content>
       </Tooltip.Root>
@@ -162,14 +161,9 @@ export function HeroResourcePanel({
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <DropdownMenuTrigger asChild>
-                  <Button
-                    type='button'
-                    variant='subtle'
-                    className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-                    aria-label='Add resource'
-                  >
+                  <TabStripAction type='button' variant='subtle' aria-label='Add resource'>
                     <Plus className={RESOURCE_TAB_ICON_CLASS} />
-                  </Button>
+                  </TabStripAction>
                 </DropdownMenuTrigger>
               </Tooltip.Trigger>
               <Tooltip.Content side='bottom'>Add resource</Tooltip.Content>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
index 3f6b6dbbe62..e3712297bdc 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
@@ -2,7 +2,6 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
 import {
-  Button,
   cn,
   DropdownMenu,
   DropdownMenuContent,
@@ -14,6 +13,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   NATIVE_SURFACE_OCCLUSION_PREPARE_EVENT,
+  TabStripAction,
   Tooltip,
 } from '@sim/emcn'
 import { Folder, Plus } from '@sim/emcn/icons'
@@ -30,10 +30,7 @@ import {
   byResourceMenuOrder,
   getResourceConfig,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
-import {
-  RESOURCE_TAB_ICON_BUTTON_CLASS,
-  RESOURCE_TAB_ICON_CLASS,
-} from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
+import { RESOURCE_TAB_ICON_CLASS } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
 import type {
   MothershipResource,
   MothershipResourceType,
@@ -676,13 +673,9 @@ export function AddResourceDropdown({
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
           <DropdownMenuTrigger asChild>
-            <Button
-              variant='subtle'
-              className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-              aria-label='Add resource tab'
-            >
+            <TabStripAction variant='subtle' aria-label='Add resource tab'>
               <Plus className={RESOURCE_TAB_ICON_CLASS} />
-            </Button>
+            </TabStripAction>
           </DropdownMenuTrigger>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
index a3d8cecd74e..8def5c3398c 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, OverflowText, PlayOutline, Skeleton, Tooltip, toast } from '@sim/emcn'
+import { OverflowText, PlayOutline, Skeleton, TabStripAction, Tooltip, toast } from '@sim/emcn'
 import {
   Download,
   FileX,
@@ -36,10 +36,7 @@ import type { BrowserPanelOverlayController } from '@/app/workspace/[workspaceId
 import { BrowserSession } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session'
 import { GenericResourceContent } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/generic-resource-content'
 import { TerminalSession } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/terminal-session/terminal-session'
-import {
-  RESOURCE_TAB_ICON_BUTTON_CLASS,
-  RESOURCE_TAB_ICON_CLASS,
-} from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
+import { RESOURCE_TAB_ICON_CLASS } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
 import { hasRenderableFilePreviewContent } from '@/app/workspace/[workspaceId]/home/hooks/preview'
 import type {
   GenericResourceData,
@@ -465,14 +462,9 @@ export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWor
     <>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Button
-            variant='subtle'
-            onClick={handleOpenWorkflow}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-            aria-label='Open workflow'
-          >
+          <TabStripAction variant='subtle' onClick={handleOpenWorkflow} aria-label='Open workflow'>
             <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
+          </TabStripAction>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>
           <p>Open workflow</p>
@@ -480,11 +472,10 @@ export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWor
       </Tooltip.Root>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Button
+          <TabStripAction
             variant='subtle'
             onClick={() => void handleRun()}
             disabled={isRunButtonDisabled}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
             aria-label={isExecuting ? 'Stop workflow' : 'Run workflow'}
           >
             {isExecuting ? (
@@ -492,7 +483,7 @@ export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWor
             ) : (
               <PlayOutline className={RESOURCE_TAB_ICON_CLASS} />
             )}
-          </Button>
+          </TabStripAction>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>
           <p>{isExecuting ? 'Stop' : 'Run workflow'}</p>
@@ -520,14 +511,13 @@ export function EmbeddedKnowledgeBaseActions({
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        <Button
+        <TabStripAction
           variant='subtle'
           onClick={handleOpenKnowledgeBase}
-          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
           aria-label='Open knowledge base'
         >
           <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-        </Button>
+        </TabStripAction>
       </Tooltip.Trigger>
       <Tooltip.Content side='bottom'>
         <p>Open knowledge base</p>
@@ -562,14 +552,9 @@ function EmbeddedTableActions({ workspaceId, tableId }: EmbeddedTableActionsProp
     <>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Button
-            variant='subtle'
-            onClick={handleOpenTable}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-            aria-label='Open table'
-          >
+          <TabStripAction variant='subtle' onClick={handleOpenTable} aria-label='Open table'>
             <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
+          </TabStripAction>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>
           <p>Open table</p>
@@ -577,14 +562,13 @@ function EmbeddedTableActions({ workspaceId, tableId }: EmbeddedTableActionsProp
       </Tooltip.Root>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Button
+          <TabStripAction
             variant='subtle'
             onClick={() => void handleExport()}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
             aria-label='Export table as CSV'
           >
             <Download className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
+          </TabStripAction>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>
           <p>Export CSV</p>
@@ -639,14 +623,9 @@ function EmbeddedFileActions({
     <>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Button
-            variant='subtle'
-            onClick={handleOpenInFiles}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-            aria-label='Open in files'
-          >
+          <TabStripAction variant='subtle' onClick={handleOpenInFiles} aria-label='Open in files'>
             <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
+          </TabStripAction>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>
           <p>Open in files</p>
@@ -654,15 +633,14 @@ function EmbeddedFileActions({
       </Tooltip.Root>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Button
+          <TabStripAction
             variant='subtle'
             onClick={() => void handleDownload()}
             disabled={!file}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
             aria-label='Download file'
           >
             <Download className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
+          </TabStripAction>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>
           <p>Download</p>
@@ -896,14 +874,9 @@ export function EmbeddedLogActions({ workspaceId, logId }: EmbeddedLogActionsPro
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        <Button
-          variant='subtle'
-          onClick={handleOpenInLogs}
-          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-          aria-label='Open in logs'
-        >
+        <TabStripAction variant='subtle' onClick={handleOpenInLogs} aria-label='Open in logs'>
           <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-        </Button>
+        </TabStripAction>
       </Tooltip.Trigger>
       <Tooltip.Content side='bottom'>
         <p>Open in logs</p>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
index 43931efbff9..8507e6beafb 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
@@ -1,10 +1,3 @@
-/**
- * Icon-only controls in the resource header — add, preview mode, the per-resource
- * actions — fill the tab strip's control band, so they match the strip's own
- * new-tab button and the panel's collapse toggle and the header reads as one row.
- */
-export const RESOURCE_TAB_ICON_BUTTON_CLASS = 'size-[var(--tab-strip-band,30px)] shrink-0 p-0'
-
 export const RESOURCE_TAB_ICON_CLASS = 'size-[16px] text-[var(--text-icon)]'
 
 /** Shared geometry for the resource header and controls positioned over it. */
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 71f94b3b37b..e3f73406f8c 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -10,9 +10,9 @@ import {
   useState,
 } from 'react'
 import {
-  Button,
   cn,
   TabStrip,
+  TabStripAction,
   type TabStripDragContext,
   type TabStripItem,
   type TabStripSelectionSource,
@@ -41,7 +41,6 @@ import { useTerminalCloseConfirmation } from '@/app/workspace/[workspaceId]/home
 import { getResourceConfig } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
 import {
   RESOURCE_HEADER_CLASSES,
-  RESOURCE_TAB_ICON_BUTTON_CLASS,
   RESOURCE_TAB_ICON_CLASS,
   resourceTabWidthClass,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
@@ -545,14 +544,13 @@ export function ResourceTabs({
     previewMode && onCyclePreviewMode ? (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Button
+          <TabStripAction
             variant='subtle'
             onClick={onCyclePreviewMode}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
             aria-label='Cycle preview mode'
           >
             <PreviewModeIcon mode={previewMode} className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
+          </TabStripAction>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>
           <p>{PREVIEW_MODE_LABELS[previewMode]}</p>
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index c7c2204968a..bd96f788378 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -239,6 +239,7 @@ export {
   tabStripItemSelector,
   tabStripWheelPosition,
 } from './tab-strip/tab-strip'
+export { TabStripAction, type TabStripActionProps } from './tab-strip/tab-strip-action'
 export {
   Table,
   TableBody,
diff --git a/packages/emcn/src/components/tab-strip/tab-strip-action.tsx b/packages/emcn/src/components/tab-strip/tab-strip-action.tsx
new file mode 100644
index 00000000000..5026fe44fcb
--- /dev/null
+++ b/packages/emcn/src/components/tab-strip/tab-strip-action.tsx
@@ -0,0 +1,29 @@
+import { forwardRef } from 'react'
+import { cn } from '../../lib/cn'
+import { Button, type ButtonProps } from '../button/button'
+
+export interface TabStripActionProps
+  extends Omit<ButtonProps, 'size' | 'iconSize' | 'iconPadding'> {
+  /** Accessible name for the icon action. */
+  'aria-label': string
+  /** Keeps the Button text scale without applying its separate icon geometry. */
+  size?: Exclude<ButtonProps['size'], 'icon'>
+}
+
+/**
+ * Icon action sized to its tab strip's control band, defaulting to 30px.
+ * Callers retain the Button variant, icon, tooltip and action behavior.
+ *
+ * @example <TabStripAction variant='subtle' aria-label='Export' onClick={onExport}><Download /></TabStripAction>
+ */
+export const TabStripAction = forwardRef<HTMLButtonElement, TabStripActionProps>(
+  ({ className, ...props }, ref) => (
+    <Button
+      {...props}
+      ref={ref}
+      className={cn('size-[var(--tab-strip-band,30px)] shrink-0 p-0', className)}
+    />
+  )
+)
+
+TabStripAction.displayName = 'TabStripAction'
diff --git a/packages/emcn/src/components/tab-strip/tab-strip.dom.test.tsx b/packages/emcn/src/components/tab-strip/tab-strip.dom.test.tsx
index dd89997c515..ac2a5c785bc 100644
--- a/packages/emcn/src/components/tab-strip/tab-strip.dom.test.tsx
+++ b/packages/emcn/src/components/tab-strip/tab-strip.dom.test.tsx
@@ -1,10 +1,12 @@
 /**
  * @vitest-environment jsdom
  */
-import { act, type ReactNode } from 'react'
+import { act, createRef, type ReactNode } from 'react'
+import { Slot } from '@radix-ui/react-slot'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { TabStrip, type TabStripItem } from './tab-strip'
+import { TabStripAction } from './tab-strip-action'
 
 let root: Root | null = null
 let container: HTMLDivElement | null = null
@@ -62,6 +64,38 @@ function scrollRow(): HTMLDivElement {
 }
 
 describe('TabStrip interactions', () => {
+  it('forwards action refs and native props through slotted triggers', () => {
+    const ref = createRef<HTMLButtonElement>()
+    const onTrigger = vi.fn()
+    const onAction = vi.fn()
+    const renderAction = (disabled = false) => (
+      <Slot onClick={onTrigger} data-state='closed'>
+        <TabStripAction ref={ref} aria-label='Export' disabled={disabled} onClick={onAction}>
+          Export
+        </TabStripAction>
+      </Slot>
+    )
+    mount(renderAction())
+    const button = ref.current
+    expect(button).toBe(container?.querySelector('button'))
+    expect(button?.type).toBe('submit')
+    expect(button?.getAttribute('data-state')).toBe('closed')
+    expect(button?.getAttribute('aria-label')).toBe('Export')
+    act(() => {
+      button?.focus()
+      button?.click()
+    })
+    expect(document.activeElement).toBe(button)
+    expect(onTrigger).toHaveBeenCalledTimes(1)
+    expect(onAction).toHaveBeenCalledTimes(1)
+
+    act(() => root?.render(renderAction(true)))
+    act(() => button?.click())
+    expect(ref.current).toBe(button)
+    expect(onAction).toHaveBeenCalledTimes(1)
+    expect(onTrigger).toHaveBeenCalledTimes(1)
+  })
+
   it('uses one keyboard tab stop and exposes tab semantics', () => {
     mount(renderStrip(tabs))
 
diff --git a/packages/emcn/src/components/tab-strip/tab-strip.tsx b/packages/emcn/src/components/tab-strip/tab-strip.tsx
index 466e17a1a08..ad39ae8f21e 100644
--- a/packages/emcn/src/components/tab-strip/tab-strip.tsx
+++ b/packages/emcn/src/components/tab-strip/tab-strip.tsx
@@ -20,6 +20,7 @@ import { cn } from '../../lib/cn'
 import { Button } from '../button/button'
 import { overflowTextClipClass, overflowTextFadeClass } from '../overflow-text/overflow-text'
 import { Tooltip } from '../tooltip/tooltip'
+import { TabStripAction } from './tab-strip-action'
 
 const DRAG_EDGE_ZONE = 40
 const DRAG_SCROLL_SPEED = 8
@@ -236,7 +237,7 @@ interface TabStripBaseProps {
     id: string,
     drag: TabStripDragContext
   ) => void
-  /** In-flow controls pinned to the far end, past the tabs and the new-tab slot. */
+  /** In-flow controls pinned to the far end; use `TabStripAction` for band-sized icon actions. */
   endActions?: ReactNode
   /**
    * Out-of-flow content that has to live inside the strip — a context menu
@@ -967,20 +968,17 @@ export function TabStrip({
       ) : onNew ? (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
-            <Button
+            <TabStripAction
               type='button'
               variant='ghost-secondary'
               size='sm'
               aria-label={newTabLabel}
-              className={cn(
-                'size-[var(--tab-strip-band,30px)] shrink-0 p-0',
-                variant === 'attached' && 'mb-px'
-              )}
+              className={variant === 'attached' ? 'mb-px' : undefined}
               disabled={atLimit}
               onClick={onNew}
             >
               <Plus className='size-[14px]' />
-            </Button>
+            </TabStripAction>
           </Tooltip.Trigger>
           <Tooltip.Content side='bottom'>
             {atLimit ? `Maximum of ${maxTabs} tabs` : newTabLabel}