From d583476eed126d98c52b9d55038b8f0dcabb8952 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 12:17:25 -0700
Subject: [PATCH 01/10] improvement(emcn): share ordinary action geometry in
 Button

---
 .claude/rules/emcn-components.md              | 14 +++
 .cursor/rules/emcn-components.mdc             | 14 +++
 .../select-field/select-options-editor.tsx    |  3 +-
 .../components/table-filter/table-filter.tsx  |  3 +-
 .../bulk-action-button/bulk-action-button.tsx |  2 +-
 .../src/components/button/button.test.tsx     | 86 ++++++++++++++++++-
 .../emcn/src/components/button/button.tsx     | 42 +++++++--
 .../composer-action-button.tsx                |  2 +-
 8 files changed, 156 insertions(+), 10 deletions(-)

diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index f02ff3946e5..fd57ee5c00c 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -56,3 +56,17 @@ Declare keyboard intent on the action-owning primitive; never add document-level
 - Use Radix UI primitives for accessibility. Export the component and its `variants` (when using CVA). Document with TSDoc + a usage example.
 
 Color tokens and icon-size conventions are canonical in `.claude/rules/sim-styling.md` — follow it rather than restating.
+
+
+## Ordinary Button action geometry
+
+`Button` retains its existing appearance variants. For square actions use `iconSize`:
+`compact` (24px on the spacing scale), `compact-fixed` (24px), `regular` (28px),
+`roomy` (32px), or `touch` (40px). These values follow the root spacing scale;
+only `compact-fixed` stays fixed when root text is enlarged.
+Use `{ base: 'touch', sm: 'regular' }` for mobile/desktop targets. These props own
+geometry only; colour, radius and SVG stroke continue to come from the selected
+`variant` and `size`. `iconPadding` explicitly overrides the zero-padding geometry.
+Use `shape='round'` for circular actions, or omit it to retain the current radius.
+`size='inline'` is a 20px-high action with caption typography and compact horizontal
+padding. Prefer these supported props to size, padding and radius overrides.
diff --git a/.cursor/rules/emcn-components.mdc b/.cursor/rules/emcn-components.mdc
index 1ac5fc577f8..3f5cd1bf90e 100644
--- a/.cursor/rules/emcn-components.mdc
+++ b/.cursor/rules/emcn-components.mdc
@@ -57,3 +57,17 @@ Declare keyboard intent on the action-owning primitive; never add document-level
 - Use Radix UI primitives for accessibility. Export the component and its `variants` (when using CVA). Document with TSDoc + a usage example.
 
 Color tokens and icon-size conventions are canonical in `.claude/rules/sim-styling.md` — follow it rather than restating.
+
+
+## Ordinary Button action geometry
+
+`Button` retains its existing appearance variants. For square actions use `iconSize`:
+`compact` (24px on the spacing scale), `compact-fixed` (24px), `regular` (28px),
+`roomy` (32px), or `touch` (40px). These values follow the root spacing scale;
+only `compact-fixed` stays fixed when root text is enlarged.
+Use `{ base: 'touch', sm: 'regular' }` for mobile/desktop targets. These props own
+geometry only; colour, radius and SVG stroke continue to come from the selected
+`variant` and `size`. `iconPadding` explicitly overrides the zero-padding geometry.
+Use `shape='round'` for circular actions, or omit it to retain the current radius.
+`size='inline'` is a 20px-high action with caption typography and compact horizontal
+padding. Prefer these supported props to size, padding and radius overrides.
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
index f15e2c82ef6..93f746d7c44 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
@@ -79,7 +79,8 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
             size='sm'
             onClick={() => remove(option.id)}
             iconPadding='sm'
-            className='size-7 shrink-0'
+            iconSize='regular'
+            className='shrink-0'
             aria-label={`Remove ${option.name || 'option'}`}
           >
             <X className='size-[12px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
index 8fe52025569..c005de9d781 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
@@ -383,7 +383,8 @@ const FilterRuleRow = memo(function FilterRuleRow({
         size='sm'
         onClick={() => onRemove(rule.id)}
         iconPadding='sm'
-        className='size-7 shrink-0'
+        iconSize='regular'
+        className='shrink-0'
         aria-label='Remove filter'
       >
         <X className='size-[12px]' />
diff --git a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
index 8088e98f093..e9717c2f7b9 100644
--- a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
+++ b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
@@ -19,7 +19,7 @@ export const bulkActionButtonVariants = cva(
 )
 
 export interface BulkActionButtonProps
-  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize' | 'shape'> {
   /** Accessible name for the icon action; tooltip content is supplied separately. */
   'aria-label': string
   /**
diff --git a/packages/emcn/src/components/button/button.test.tsx b/packages/emcn/src/components/button/button.test.tsx
index c0b4fc35df3..4c8cae79dc0 100644
--- a/packages/emcn/src/components/button/button.test.tsx
+++ b/packages/emcn/src/components/button/button.test.tsx
@@ -1,5 +1,7 @@
-/** @vitest-environment node */
+/** @vitest-environment jsdom */
 /** biome-ignore assist/source/organizeImports: Preserve the documented core/external/UI import order. */
+import { act, createRef } from 'react'
+import { createRoot } from 'react-dom/client'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import { Button } from '@sim/emcn'
@@ -22,6 +24,9 @@ describe('Button iconSize', () => {
   for (const [iconSize, previousClass] of [
     ['compact', 'size-6 p-0'],
     ['compact-fixed', 'size-[24px] p-0'],
+    ['regular', 'size-7 p-0'],
+    ['roomy', 'size-8 p-0'],
+    ['touch', 'size-10 p-0'],
   ] as const) {
     it.each(TREATMENTS)(
       `preserves the ${iconSize} treatment with size=$size and variant=$variant`,
@@ -65,3 +70,82 @@ describe('Button iconSize', () => {
     expect(markup).not.toContain('iconPadding')
   })
 })
+
+describe('Button shared action geometry', () => {
+  it('composes responsive geometry, explicit padding and round shape without changing icon treatment', () => {
+    const markup = renderToStaticMarkup(
+      <Button
+        variant='ghost'
+        size='icon'
+        iconSize={{ base: 'touch', sm: 'regular' }}
+        iconPadding='sm'
+        shape='round'
+        aria-label='Edit'
+      >
+        <svg strokeWidth={1.55} />
+      </Button>
+    )
+    expect(markup).toContain('size-10')
+    expect(markup).toContain('sm:size-7')
+    expect(markup).not.toContain('size-[20px]')
+    expect(markup).toContain('p-1')
+    expect(markup).not.toContain('p-0')
+    expect(markup).toContain('rounded-full')
+    expect(markup).not.toContain('rounded-sm')
+    expect(markup).toContain('[stroke-width:1.25]')
+    expect(markup).toContain('text-[var(--text-icon-muted)]')
+    expect(markup).not.toMatch(/(?:iconSize|iconPadding|shape)=/)
+  })
+
+  it('retains an inline caption size and supports a base-only responsive value', () => {
+    const inline = renderToStaticMarkup(<Button size='inline'>Generate</Button>)
+    expect(inline).toContain('h-[20px]')
+    expect(inline).toContain('text-caption')
+    expect(inline).toContain('px-1.5 py-0')
+    const baseOnly = renderToStaticMarkup(<Button iconSize={{ base: 'roomy' }} aria-label='Run' />)
+    expect(baseOnly).toContain('size-8')
+    expect(baseOnly).not.toContain('sm:size')
+  })
+
+  it('forwards refs and native focus, submission and disabled behavior with responsive sizing', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const ref = createRef<HTMLButtonElement>()
+    let submissions = 0
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const render = (disabled: boolean) =>
+      act(() =>
+        root.render(
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              submissions++
+            }}
+          >
+            <Button
+              ref={ref}
+              type='submit'
+              iconSize={{ base: 'touch', sm: 'regular' }}
+              disabled={disabled}
+              aria-label='Apply'
+            />
+          </form>
+        )
+      )
+    try {
+      render(false)
+      ref.current?.focus()
+      expect(document.activeElement).toBe(ref.current)
+      act(() => ref.current?.click())
+      expect(submissions).toBe(1)
+      render(true)
+      act(() => ref.current?.click())
+      expect(submissions).toBe(1)
+      expect(ref.current?.disabled).toBe(true)
+    } finally {
+      act(() => root.unmount())
+      container.remove()
+    }
+  })
+})
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index bc2d2c6ef66..649c3524432 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -49,10 +49,17 @@ const buttonVariants = cva(
         sm: 'px-1.5 py-1 text-[length:11px]',
         md: 'px-2 py-1.5 text-[length:12px]',
         icon: 'size-[20px] rounded-sm p-0 [&_svg]:[stroke-width:1.25]',
+        inline: 'h-[20px] px-1.5 py-0 text-caption',
       },
       iconSize: {
         compact: 'size-6 p-0',
         'compact-fixed': 'size-[24px] p-0',
+        regular: 'size-7 p-0',
+        roomy: 'size-8 p-0',
+        touch: 'size-10 p-0',
+      },
+      shape: {
+        round: 'rounded-full',
       },
       iconPadding: {
         sm: 'p-1',
@@ -76,18 +83,31 @@ const buttonVariants = cva(
   }
 )
 
+type ButtonIconSize = NonNullable<VariantProps<typeof buttonVariants>['iconSize']>
+
+const responsiveIconSizes = {
+  compact: 'sm:size-6',
+  'compact-fixed': 'sm:size-[24px]',
+  regular: 'sm:size-7',
+  roomy: 'sm:size-8',
+  touch: 'sm:size-10',
+} satisfies Record<ButtonIconSize, string>
+
 export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+    Omit<VariantProps<typeof buttonVariants>, 'iconSize'> {
   /**
    * Square icon-action geometry without changing the selected size's typography,
    * corner radius, icon stroke or color. `compact` follows the spacing scale
    * (24px at the default root font size); `compact-fixed` stays at 24px.
-   * Both remove padding; an explicit iconPadding or className can override it.
+   * Regular, roomy and touch follow the spacing scale (28px, 32px and 40px
+   * at the default root font size). A responsive
+   * value changes geometry at the standard sm breakpoint. All remove padding;
+   * explicit iconPadding or className can override it.
    * Omit to retain the selected size's geometry.
    * @example <Button variant='ghost' iconSize='compact' aria-label='Remove'><X /></Button>
    */
-  iconSize?: VariantProps<typeof buttonVariants>['iconSize']
+  iconSize?: ButtonIconSize | { base: ButtonIconSize; sm?: ButtonIconSize } | null
   /**
    * Symmetric padding for icon actions whose content or layout determines their size.
    * Preserves the selected size's typography, corner radius and icon stroke.
@@ -98,11 +118,23 @@ export interface ButtonProps
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, iconSize, iconPadding, ...props }, ref) => {
+  ({ className, variant, size, iconSize, iconPadding, shape, ...props }, ref) => {
+    const baseIconSize = typeof iconSize === 'object' ? iconSize?.base : iconSize
+    const smIconSize = typeof iconSize === 'object' ? iconSize?.sm : undefined
     return (
       <button
         ref={ref}
-        className={cn(buttonVariants({ variant, size, iconSize, iconPadding }), className)}
+        className={cn(
+          buttonVariants({
+            variant,
+            size,
+            iconSize: baseIconSize,
+            iconPadding,
+            shape,
+          }),
+          smIconSize && responsiveIconSizes[smIconSize],
+          className
+        )}
         {...props}
       />
     )
diff --git a/packages/emcn/src/components/composer-action-button/composer-action-button.tsx b/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
index 0a466fc0544..d10a9e27b1b 100644
--- a/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
+++ b/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
@@ -27,7 +27,7 @@ export const composerActionButtonVariants = cva('rounded-full p-0', {
 })
 
 export interface ComposerActionButtonProps
-  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize' | 'shape'> {
   /** Accessible name for the caller's icon action. */
   'aria-label': string
   /** 28px by default; `sm` retains compact chat's 22px geometry and hover treatment. */

From f472cbb9ad5e60f0cddad58e6f50692137856e74 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 12:51:38 -0700
Subject: [PATCH 02/10] improvement(ui): share additional-field disclosures

---
 .../message/components/file-download.tsx      |  2 +-
 .../chat/components/message/message.tsx       |  2 +-
 .../column-config-sidebar.tsx                 | 19 +++---
 .../enrichments-sidebar/enrichment-config.tsx | 28 ++++----
 .../enrichments-sidebar.tsx                   | 36 ++++-------
 .../table-sidebar-header.tsx                  | 37 +++++++++++
 .../workflow-sidebar/workflow-sidebar.tsx     | 52 +++++----------
 .../panel/components/editor/editor.tsx        | 42 ++++++------
 .../panel/components/toolbar/toolbar.tsx      |  7 +-
 .../w/[workflowId]/components/panel/panel.tsx |  4 +-
 .../field-divider/field-divider.dom.test.tsx  | 64 +++++++++++++++++++
 .../field-divider/field-divider.tsx           | 40 +++++++++++-
 packages/emcn/src/components/index.ts         |  7 +-
 13 files changed, 219 insertions(+), 121 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
 create mode 100644 packages/emcn/src/components/field-divider/field-divider.dom.test.tsx

diff --git a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
index 938ea3f2b3c..0e3c40e1f15 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
@@ -254,7 +254,7 @@ export function ChatFileDownloadAll({ files }: ChatFileDownloadAllProps) {
         variant='ghost-secondary'
         onClick={handleDownloadAll}
         disabled={isDownloading}
-        className='p-0'
+        size='icon'
       >
         {isDownloading ? (
           <Loader className='size-3' animate />
diff --git a/apps/sim/app/(interfaces)/chat/components/message/message.tsx b/apps/sim/app/(interfaces)/chat/components/message/message.tsx
index 9458ed16be7..1b99ccf96cc 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/message.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/message.tsx
@@ -274,7 +274,7 @@ export const ClientChatMessage = memo(function ClientChatMessage({
                       <Button
                         aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}
                         variant='ghost-secondary'
-                        className='p-0'
+                        size='icon'
                         onClick={() => {
                           const contentToCopy =
                             typeof cleanTextContent === 'string'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
index abf3f9391a0..2ad4ebc773b 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
@@ -25,6 +25,10 @@ import {
   FieldError,
   RequiredLabel,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
 import { useAddTableColumn, useUpdateColumn } from '@/hooks/queries/tables'
 import { SelectOptionsEditor } from '../select-field'
 import { columnTypeOptionsForTable } from './column-types'
@@ -263,19 +267,12 @@ function ColumnConfigBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <h2 className='text-[var(--text-primary)] text-small'>Configure column</h2>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
         {/* `disabled` on the fieldset reaches every native control inside,
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
index f411281d21e..e158e4ab159 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
@@ -21,6 +21,10 @@ import type { ColumnDefinition, WorkflowGroup, WorkflowGroupOutput } from '@/lib
 import { columnMatchesRef, getColumnId } from '@/lib/table/column-keys'
 import { deriveOutputColumnName } from '@/lib/table/column-naming'
 import { FieldError } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
 import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
 import {
   useAddWorkflowGroup,
@@ -232,31 +236,21 @@ export function EnrichmentConfig({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <div className='flex min-w-0 items-center gap-1.5'>
-          <Button
-            variant='ghost'
-            size='sm'
+          <TableSidebarHeaderAction
             onClick={onBack}
-            iconPadding='sm'
-            className='size-7 flex-none'
+            className='flex-none'
             aria-label='Back to enrichments'
           >
             <ArrowLeft className='size-[14px]' />
-          </Button>
+          </TableSidebarHeaderAction>
           <OverflowText label={enrichment.name} className='text-[var(--text-primary)] text-small' />
         </div>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7 flex-none'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
         <div className='flex flex-col gap-[9.5px]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
index 0aebd34cb4c..421055477fc 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
@@ -1,9 +1,13 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, ChipInput, cn } from '@sim/emcn'
+import { ChipInput, cn } from '@sim/emcn'
 import { Search, X } from '@sim/emcn/icons'
 import type { ColumnDefinition, WorkflowGroup } from '@/lib/table'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
 import { ALL_ENRICHMENTS } from '@/enrichments'
 import { getEnrichment } from '@/enrichments/registry'
 import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
@@ -71,19 +75,12 @@ function EnrichmentsSidebarBody({
   if (editGroup && !editEnrichment) {
     return (
       <div className='flex h-full flex-col'>
-        <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+        <TableSidebarHeader>
           <h2 className='text-[var(--text-primary)] text-small'>Enrichment</h2>
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={onClose}
-            iconPadding='sm'
-            className='size-7 flex-none'
-            aria-label='Close'
-          >
+          <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
             <X className='size-[14px]' />
-          </Button>
-        </div>
+          </TableSidebarHeaderAction>
+        </TableSidebarHeader>
         <div className='flex flex-1 items-center justify-center px-6 text-center'>
           <p className='text-[var(--text-tertiary)] text-small'>
             This enrichment ("{editGroup.enrichmentId}") is no longer available. Delete the column
@@ -118,19 +115,12 @@ function EnrichmentsSidebarBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <h2 className='text-[var(--text-primary)] text-small'>Enrichments</h2>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7 flex-none'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
       <div className='px-2 pt-3'>
         <ChipInput
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
new file mode 100644
index 00000000000..42e90c9fdd2
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
@@ -0,0 +1,37 @@
+import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
+import { Button, cn } from '@sim/emcn'
+
+interface TableSidebarHeaderProps {
+  children: ReactNode
+}
+
+export function TableSidebarHeader({ children }: TableSidebarHeaderProps) {
+  return (
+    <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      {children}
+    </div>
+  )
+}
+
+interface TableSidebarHeaderActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'aria-label': string
+}
+
+export const TableSidebarHeaderAction = forwardRef<
+  HTMLButtonElement,
+  TableSidebarHeaderActionProps
+>(({ className, ...props }, ref) => (
+  <Button
+    {...props}
+    ref={ref}
+    variant='ghost'
+    size='sm'
+    iconPadding='sm'
+    className={cn(
+      'size-7 focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]',
+      className
+    )}
+  />
+))
+
+TableSidebarHeaderAction.displayName = 'TableSidebarHeaderAction'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index 2c53382bf54..e213befae6c 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -7,7 +7,7 @@ import {
   ChipInput,
   type ComboboxOptionGroup,
   cn,
-  DashedDividerLine,
+  FieldDisclosure,
   FieldDivider,
   Label,
   Loader,
@@ -16,7 +16,7 @@ import {
   Tooltip,
   toast,
 } from '@sim/emcn'
-import { ArrowLeft, ChevronDown, SquareArrowUpRight, X } from '@sim/emcn/icons'
+import { ArrowLeft, SquareArrowUpRight, X } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
@@ -46,6 +46,10 @@ import {
   FieldError,
   RequiredLabel,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { BlockTile } from '@/blocks/block-tile'
 import { useDeployedWorkflowState } from '@/hooks/queries/deployments'
@@ -630,35 +634,25 @@ export function WorkflowSidebarBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <div className='flex min-w-0 items-center gap-1.5'>
           {showBackButton && (
-            <Button
-              variant='ghost'
-              size='sm'
+            <TableSidebarHeaderAction
               onClick={onBack}
-              iconPadding='sm'
-              className='size-7 flex-none'
+              className='flex-none'
               aria-label='Back to enrichments'
             >
               <ArrowLeft className='size-[14px]' />
-            </Button>
+            </TableSidebarHeaderAction>
           )}
           <h2 className='flex min-w-0'>
             <OverflowText label={title} className='text-[var(--text-primary)] text-small' />
           </h2>
         </div>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7 flex-none'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
         {/* Single-output mode renames this column directly. */}
@@ -838,23 +832,9 @@ export function WorkflowSidebarBody({
             )}
             {selectedWorkflowId && (
               <>
-                <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
-                  <DashedDividerLine className='flex-1' />
-                  <button
-                    type='button'
-                    onClick={() => setShowAdvanced((v) => !v)}
-                    className='flex items-center gap-1.5 whitespace-nowrap text-[var(--text-secondary)] text-small hover-hover:text-[var(--text-primary)]'
-                  >
-                    {showAdvanced ? 'Hide additional fields' : 'Show additional fields'}
-                    <ChevronDown
-                      className={cn(
-                        'size-[14px] transition-transform duration-200',
-                        showAdvanced && 'rotate-180'
-                      )}
-                    />
-                  </button>
-                  <DashedDividerLine className='flex-1' />
-                </div>
+                <FieldDisclosure expanded={showAdvanced} onClick={() => setShowAdvanced((v) => !v)}>
+                  {showAdvanced ? 'Hide additional fields' : 'Show additional fields'}
+                </FieldDisclosure>
                 {showAdvanced && (
                   <>
                     <InputMappingSection
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 10e9b3ad76e..54e32639e95 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -1,11 +1,17 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, DashedDividerLine, FieldDivider, Loader, Tooltip } from '@sim/emcn'
+import {
+  Button,
+  DashedDividerLine,
+  FieldDisclosure,
+  FieldDivider,
+  Loader,
+  Tooltip,
+} from '@sim/emcn'
 import {
   BookOpen,
   Check,
-  ChevronDown,
   ChevronUp,
   Lock,
   Pencil,
@@ -470,11 +476,11 @@ export function Editor() {
                   {userPermissions.canAdmin && currentBlock.locked && !isAncestorLocked ? (
                     <Button
                       variant='ghost'
-                      className='p-0'
+                      size='icon'
                       onClick={() => collaborativeBatchToggleLocked([currentBlockId!])}
                       aria-label='Unlock block'
                     >
-                      <Unlock className='size-[14px] text-[var(--text-secondary)]' />
+                      <Unlock className='size-[14px]' />
                     </Button>
                   ) : (
                     <div className='flex items-center justify-center'>
@@ -499,7 +505,7 @@ export function Editor() {
                 <Tooltip.Trigger asChild>
                   <Button
                     variant='ghost'
-                    className='p-0'
+                    size='icon'
                     onClick={isRenaming ? handleSaveRename : handleStartRename}
                     disabled={!canEditBlock}
                     aria-label={isRenaming ? 'Save name' : 'Rename block'}
@@ -538,7 +544,7 @@ export function Editor() {
               <Tooltip.Trigger asChild>
                 <Button
                   variant='ghost'
-                  className='p-0'
+                  size='icon'
                   onClick={handleOpenDocs}
                   aria-label='Open documentation'
                 >
@@ -743,22 +749,14 @@ export function Editor() {
                     })}
 
                     {hasAdditionalFields && canEditBlock && (
-                      <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
-                        <DashedDividerLine className='flex-1' />
-                        <button
-                          type='button'
-                          onClick={handleToggleAdditionalFields}
-                          className='flex items-center gap-1.5 whitespace-nowrap text-[var(--text-secondary)] text-small hover-hover:text-[var(--text-primary)]'
-                        >
-                          {displayAdvancedOptions
-                            ? 'Hide additional fields'
-                            : 'Show additional fields'}
-                          <ChevronDown
-                            className={`size-[14px] transition-transform duration-200 ${displayAdvancedOptions ? 'rotate-180' : ''}`}
-                          />
-                        </button>
-                        <DashedDividerLine className='flex-1' />
-                      </div>
+                      <FieldDisclosure
+                        expanded={displayAdvancedOptions}
+                        onClick={handleToggleAdditionalFields}
+                      >
+                        {displayAdvancedOptions
+                          ? 'Hide additional fields'
+                          : 'Show additional fields'}
+                      </FieldDisclosure>
                     )}
                     {hasAdditionalFields && !canEditBlock && displayAdvancedOptions && (
                       <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index 09ede00b538..27f4ee1ed93 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -875,12 +875,7 @@ export const Toolbar = memo(
           <h2 className='text-[var(--text-primary)] text-sm'>Toolbar</h2>
           <div className='flex shrink-0 items-center gap-2'>
             {!isSearchActive ? (
-              <Button
-                variant='ghost'
-                className='p-0'
-                aria-label='Search toolbar'
-                onClick={focusSearch}
-              >
+              <Button variant='ghost' size='icon' aria-label='Search toolbar' onClick={focusSearch}>
                 <Search className='size-[14px]' />
               </Button>
             ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index b26c5ac8ccd..72d27a82b7e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -915,7 +915,7 @@ export const Panel = memo(function Panel() {
                     <Button
                       aria-label='New Chat'
                       variant='ghost'
-                      className='p-0'
+                      size='icon'
                       onClick={handleCopilotNewChat}
                     >
                       <Plus className='size-[14px]' />
@@ -928,7 +928,7 @@ export const Panel = memo(function Panel() {
                       }}
                     >
                       <DropdownMenuTrigger asChild>
-                        <Button variant='ghost' className='p-0' aria-label='Chat history'>
+                        <Button variant='ghost' size='icon' aria-label='Chat history'>
                           <BubbleChatDelay className='size-[14px]' />
                         </Button>
                       </DropdownMenuTrigger>
diff --git a/packages/emcn/src/components/field-divider/field-divider.dom.test.tsx b/packages/emcn/src/components/field-divider/field-divider.dom.test.tsx
new file mode 100644
index 00000000000..ed3a624673d
--- /dev/null
+++ b/packages/emcn/src/components/field-divider/field-divider.dom.test.tsx
@@ -0,0 +1,64 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { FieldDisclosure } from './field-divider'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+afterEach(() => {
+  act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+})
+
+describe('FieldDisclosure', () => {
+  it('leaves expansion to the caller and does not submit its surrounding form', () => {
+    const onClick = vi.fn()
+    const onSubmit = vi.fn((event) => event.preventDefault())
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+    const render = (expanded: boolean, disabled = false) => (
+      <form onSubmit={onSubmit}>
+        <FieldDisclosure
+          expanded={expanded}
+          disabled={disabled}
+          onClick={onClick}
+          aria-controls='additional-fields'
+        >
+          {expanded ? 'Hide additional fields' : 'Show additional fields'}
+        </FieldDisclosure>
+        <div id='additional-fields' hidden={!expanded}>
+          Additional fields
+        </div>
+      </form>
+    )
+    act(() => root?.render(render(false)))
+    const button = container.querySelector('button')!
+    expect(button.getAttribute('aria-expanded')).toBe('false')
+    expect(button.getAttribute('aria-controls')).toBe('additional-fields')
+    act(() => {
+      button.focus()
+      button.click()
+    })
+    expect(document.activeElement).toBe(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(button.getAttribute('aria-expanded')).toBe('false')
+
+    act(() => root?.render(render(true)))
+    expect(button.getAttribute('aria-expanded')).toBe('true')
+    expect(button.textContent).toBe('Hide additional fields')
+    expect(container.querySelector<HTMLElement>('#additional-fields')?.hidden).toBe(false)
+
+    act(() => root?.render(render(true, true)))
+    act(() => button.click())
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/emcn/src/components/field-divider/field-divider.tsx b/packages/emcn/src/components/field-divider/field-divider.tsx
index 7408a21360f..4b15d867f80 100644
--- a/packages/emcn/src/components/field-divider/field-divider.tsx
+++ b/packages/emcn/src/components/field-divider/field-divider.tsx
@@ -1,4 +1,6 @@
+import { ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
+import { Button, type ButtonProps } from '../button/button'
 
 const DASHED_DIVIDER_STYLE = {
   backgroundImage:
@@ -54,4 +56,40 @@ function FieldDivider({ className, subblockMarker = false, ...props }: FieldDivi
   )
 }
 
-export { DashedDividerLine, FieldDivider }
+export interface FieldDisclosureProps
+  extends Pick<ButtonProps, 'onClick' | 'disabled' | 'aria-controls' | 'children'> {
+  expanded: boolean
+}
+
+/**
+ * Controlled disclosure between field groups. The caller owns the label,
+ * expanded state and fields; this supplies the divider lines and rotating chevron.
+ *
+ * @example
+ * <FieldDisclosure expanded={expanded} onClick={onToggle}>
+ *   {expanded ? 'Hide additional fields' : 'Show additional fields'}
+ * </FieldDisclosure>
+ */
+function FieldDisclosure({ expanded, children, ...props }: FieldDisclosureProps) {
+  return (
+    <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
+      <DashedDividerLine className='flex-1' />
+      <Button
+        {...props}
+        type='button'
+        variant='ghost'
+        size={null}
+        aria-expanded={expanded}
+        className='gap-1.5 whitespace-nowrap p-0 text-small focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+      >
+        {children}
+        <ChevronDown
+          className={cn('size-[14px] transition-transform duration-200', expanded && 'rotate-180')}
+        />
+      </Button>
+      <DashedDividerLine className='flex-1' />
+    </div>
+  )
+}
+
+export { DashedDividerLine, FieldDisclosure, FieldDivider }
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 8a6c0391020..aa3313646f2 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -154,7 +154,12 @@ export {
   dropdownMenuRowClass,
 } from './dropdown-menu/dropdown-menu'
 export { Expandable, ExpandableContent } from './expandable/expandable'
-export { DashedDividerLine, FieldDivider } from './field-divider/field-divider'
+export {
+  DashedDividerLine,
+  FieldDisclosure,
+  type FieldDisclosureProps,
+  FieldDivider,
+} from './field-divider/field-divider'
 export { Info } from './info/info'
 export {
   InfoCard,

From 2365885c5258986910d7a1692b248e5f8cc8cd83 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 13:12:49 -0700
Subject: [PATCH 03/10] fix(ui): preserve tiny actions and use shared sidebar
 geometry

---
 .../chat/components/message/components/file-download.tsx  | 2 +-
 .../app/(interfaces)/chat/components/message/message.tsx  | 2 +-
 .../table-sidebar-header/table-sidebar-header.tsx         | 3 ++-
 .../components/panel/components/editor/editor.tsx         | 8 ++++----
 .../components/panel/components/toolbar/toolbar.tsx       | 7 ++++++-
 .../w/[workflowId]/components/panel/panel.tsx             | 4 ++--
 6 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
index 0e3c40e1f15..938ea3f2b3c 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
@@ -254,7 +254,7 @@ export function ChatFileDownloadAll({ files }: ChatFileDownloadAllProps) {
         variant='ghost-secondary'
         onClick={handleDownloadAll}
         disabled={isDownloading}
-        size='icon'
+        className='p-0'
       >
         {isDownloading ? (
           <Loader className='size-3' animate />
diff --git a/apps/sim/app/(interfaces)/chat/components/message/message.tsx b/apps/sim/app/(interfaces)/chat/components/message/message.tsx
index 1b99ccf96cc..9458ed16be7 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/message.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/message.tsx
@@ -274,7 +274,7 @@ export const ClientChatMessage = memo(function ClientChatMessage({
                       <Button
                         aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}
                         variant='ghost-secondary'
-                        size='icon'
+                        className='p-0'
                         onClick={() => {
                           const contentToCopy =
                             typeof cleanTextContent === 'string'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
index 42e90c9fdd2..87ca0356ea0 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
@@ -26,9 +26,10 @@ export const TableSidebarHeaderAction = forwardRef<
     ref={ref}
     variant='ghost'
     size='sm'
+    iconSize='regular'
     iconPadding='sm'
     className={cn(
-      'size-7 focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]',
+      'focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]',
       className
     )}
   />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 54e32639e95..61bd02da17b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -476,11 +476,11 @@ export function Editor() {
                   {userPermissions.canAdmin && currentBlock.locked && !isAncestorLocked ? (
                     <Button
                       variant='ghost'
-                      size='icon'
+                      className='p-0'
                       onClick={() => collaborativeBatchToggleLocked([currentBlockId!])}
                       aria-label='Unlock block'
                     >
-                      <Unlock className='size-[14px]' />
+                      <Unlock className='size-[14px] text-[var(--text-secondary)]' />
                     </Button>
                   ) : (
                     <div className='flex items-center justify-center'>
@@ -505,7 +505,7 @@ export function Editor() {
                 <Tooltip.Trigger asChild>
                   <Button
                     variant='ghost'
-                    size='icon'
+                    className='p-0'
                     onClick={isRenaming ? handleSaveRename : handleStartRename}
                     disabled={!canEditBlock}
                     aria-label={isRenaming ? 'Save name' : 'Rename block'}
@@ -544,7 +544,7 @@ export function Editor() {
               <Tooltip.Trigger asChild>
                 <Button
                   variant='ghost'
-                  size='icon'
+                  className='p-0'
                   onClick={handleOpenDocs}
                   aria-label='Open documentation'
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index 27f4ee1ed93..09ede00b538 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -875,7 +875,12 @@ export const Toolbar = memo(
           <h2 className='text-[var(--text-primary)] text-sm'>Toolbar</h2>
           <div className='flex shrink-0 items-center gap-2'>
             {!isSearchActive ? (
-              <Button variant='ghost' size='icon' aria-label='Search toolbar' onClick={focusSearch}>
+              <Button
+                variant='ghost'
+                className='p-0'
+                aria-label='Search toolbar'
+                onClick={focusSearch}
+              >
                 <Search className='size-[14px]' />
               </Button>
             ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 72d27a82b7e..b26c5ac8ccd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -915,7 +915,7 @@ export const Panel = memo(function Panel() {
                     <Button
                       aria-label='New Chat'
                       variant='ghost'
-                      size='icon'
+                      className='p-0'
                       onClick={handleCopilotNewChat}
                     >
                       <Plus className='size-[14px]' />
@@ -928,7 +928,7 @@ export const Panel = memo(function Panel() {
                       }}
                     >
                       <DropdownMenuTrigger asChild>
-                        <Button variant='ghost' size='icon' aria-label='Chat history'>
+                        <Button variant='ghost' className='p-0' aria-label='Chat history'>
                           <BubbleChatDelay className='size-[14px]' />
                         </Button>
                       </DropdownMenuTrigger>

From 7bf8fe33556e9113df43be870e3618250ab6bf27 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com>
Date: Tue, 22 Sep 2026 13:27:38 -0700
Subject: [PATCH 04/10] improvement(ui): use shared geometry for standard icon
 actions (#8153)

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
---
 .../components/input/public-chat-action-button.tsx     |  4 ++--
 apps/sim/app/playground/page.tsx                       |  4 ++--
 .../file-viewer/rich-markdown-editor/image.tsx         |  4 +++-
 .../rich-markdown-editor/menus/toolbar-button.test.tsx |  3 ++-
 .../rich-markdown-editor/menus/toolbar-button.tsx      | 10 ++++------
 .../components/mic-button/mic-button.test.tsx          |  2 +-
 .../user-input/components/mic-button/mic-button.tsx    | 10 ++++------
 7 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx b/apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx
index 838051a1817..0ac57babb30 100644
--- a/apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx
@@ -4,7 +4,7 @@ import { Button } from '@sim/emcn'
 interface PublicChatActionButtonProps
   extends Omit<
     ComponentProps<typeof Button>,
-    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'className'
+    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'className' | 'shape'
   > {
   variant: 'primary' | 'quiet'
   'aria-label': string
@@ -12,6 +12,6 @@ interface PublicChatActionButtonProps
 
 /** Public chat's circular composer action, retaining its primary and quiet palettes. */
 export const PublicChatActionButton = forwardRef<HTMLButtonElement, PublicChatActionButtonProps>(
-  (props, ref) => <Button {...props} ref={ref} className='size-[28px] rounded-full p-0' />
+  (props, ref) => <Button {...props} ref={ref} iconSize='regular' shape='round' />
 )
 PublicChatActionButton.displayName = 'PublicChatActionButton'
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index fa5a295eacd..53e470b84d1 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -172,7 +172,7 @@ export default function PlaygroundPage() {
                   aria-label='Go back'
                   variant='ghost'
                   onClick={() => router.back()}
-                  className='size-8 p-0'
+                  iconSize='roomy'
                 >
                   <ArrowLeft className='size-4' />
                 </Button>
@@ -187,7 +187,7 @@ export default function PlaygroundPage() {
                   aria-label={isDarkMode ? 'Light mode' : 'Dark mode'}
                   variant='default'
                   onClick={toggleDarkMode}
-                  className='size-8 p-0'
+                  iconSize='roomy'
                 >
                   {isDarkMode ? <Sun className='size-4' /> : <Moon className='size-4' />}
                 </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx
index d6623e648d6..24897d1edfa 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx
@@ -282,9 +282,11 @@ export function ResizableImageView({ node, selected, editor, getPos }: ReactNode
           type='button'
           variant='ghost'
           size='icon'
+          iconSize={{ base: 'touch', sm: 'roomy' }}
+          iconPadding='sm'
           aria-label='Resize image'
           onPointerDown={startResize}
-          className='absolute right-0 bottom-0 flex size-10 cursor-nwse-resize touch-none items-end justify-end p-1 sm:size-8'
+          className='absolute right-0 bottom-0 cursor-nwse-resize touch-none items-end justify-end'
         >
           <span className='size-3 rounded-[3px] border border-[var(--bg)] bg-[var(--brand-secondary)]' />
         </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.test.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.test.tsx
index 340a43c1e50..4ce6c90a039 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.test.tsx
@@ -41,7 +41,8 @@ describe('ToolbarButton', () => {
     )
 
     const button = host.querySelector('button[aria-label="Add to Chat"]')
-    expect(button?.className).toContain('size-[28px]')
+    expect(button?.classList.contains('size-10')).toBe(true)
+    expect(button?.classList.contains('sm:size-7')).toBe(true)
     expect(button?.querySelector('svg')?.className.baseVal).toContain('size-[12px]')
   })
 
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx
index 4bdcb5b19d8..7d2aa9f6a58 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx
@@ -1,5 +1,5 @@
 import type { ComponentType, SVGProps } from 'react'
-import { Button, cn, Tooltip } from '@sim/emcn'
+import { Button, Tooltip } from '@sim/emcn'
 
 interface ToolbarButtonProps {
   /** Any SVG icon component, e.g. from `@sim/emcn/icons`. */
@@ -28,17 +28,15 @@ export function ToolbarButton({
       <Tooltip.Trigger asChild>
         <Button
           type='button'
-          variant={isActive ? 'active' : 'ghost'}
+          variant={isActive ? 'active' : 'quiet'}
           size='icon'
+          iconSize={{ base: 'touch', sm: 'regular' }}
           aria-label={label}
           aria-pressed={isActive}
           disabled={disabled}
           onPointerDown={(event) => event.preventDefault()}
           onClick={onClick}
-          className={cn(
-            'size-10 focus-visible:bg-[var(--surface-hover)] sm:size-[28px]',
-            !isActive && 'hover-hover:bg-[var(--surface-hover)]'
-          )}
+          className='focus-visible:bg-[var(--surface-hover)]'
         >
           <Icon className={iconSize === 'compact' ? 'size-[12px]' : 'size-[14px]'} />
         </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.test.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.test.tsx
index 8364c6d1fc1..96094c31efb 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.test.tsx
@@ -72,7 +72,7 @@ describe('MicButton', () => {
     const waveform = container.querySelector('svg[viewBox="0 0 18 18"]')
     const bars = waveform?.querySelectorAll('line')
 
-    expect(button?.className).toContain('size-[28px]')
+    expect(button?.classList.contains('size-7')).toBe(true)
     expect(button?.className).toContain('overflow-hidden')
     expect(button?.className).toContain('rounded-full')
     expect(waveform?.classList.contains('size-[18px]')).toBe(true)
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx
index 2e2b6a51cae..452d8d26f8f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx
@@ -89,15 +89,13 @@ export const MicButton = memo(function MicButton({
       <Tooltip.Trigger asChild>
         <Button
           type='button'
-          variant={isListening ? 'active' : 'ghost'}
+          variant={isListening ? 'active' : 'quiet'}
+          iconSize='regular'
+          shape='round'
           onClick={onToggle}
           aria-label={isListening ? 'Stop listening' : 'Voice input'}
           aria-pressed={isListening}
-          className={cn(
-            'relative size-[28px] overflow-hidden rounded-full p-0 transition-[background-color,color,scale] duration-150 ease-out active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100',
-            !isListening &&
-              'text-[var(--text-icon)] hover-hover:bg-[var(--surface-hover)] hover-hover:text-[var(--text-icon)]'
-          )}
+          className='relative overflow-hidden transition-[background-color,color,scale] duration-150 ease-out active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100'
         >
           <span
             className={cn(

From f64118f8ed4a7a6e7aec743f3dd058d4298694f7 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com>
Date: Thu, 24 Sep 2026 15:20:15 -0700
Subject: [PATCH 05/10] refactor(ui): centralize overlay action buttons in EMCN
 (#7990)

* refactor(ui): centralize overlay action buttons in EMCN

* improvement(ui): share workflow preview actions (#8065)

* improvement(ui): share workflow preview actions

* improvement(ui): reuse inline and overlay workflow actions

* refactor(emcn): share Code.Viewer appearances (#8238)

* Add shared Code.Viewer appearances for product surfaces

* Test flat virtualized Code.Viewer terminal chrome

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

* Share table sidebar shell and scroll body (#8249)

* Share table sidebar shell and scroll body

* test(tables): cover shared sidebar dialog state

* test(tables): preserve sidebar scroll state

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

* Keep workflow preview values readable (#8256)

* fix(ui): keep preview values readable and restore version tint

* fix(ui): keep preview file actions inert

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Co-authored-by: Waleed <walif6@gmail.com>

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Co-authored-by: Waleed <walif6@gmail.com>
---
 .../components/trace-view/trace-view.tsx      |  16 ++-
 .../components/log-details/log-details.tsx    |  16 ++-
 .../workflow-mcp-servers.tsx                  |   2 +-
 .../column-config-sidebar.tsx                 |  20 ++-
 .../enrichments-sidebar/enrichment-config.tsx |   5 +-
 .../enrichments-sidebar.tsx                   |  14 +--
 .../components/table-sidebar-layout.test.tsx  |  65 ++++++++++
 .../components/table-sidebar-layout.tsx       |  41 ++++++
 .../workflow-sidebar/workflow-sidebar.tsx     |  55 ++++----
 .../deploy-modal/components/api/api.tsx       |   6 +-
 .../general/components/versions.tsx           |  12 +-
 .../components/general/general.tsx            |  10 +-
 .../condition-input/condition-input.tsx       |   1 +
 .../components/eval-input/eval-input.tsx      |   1 +
 .../components/file-upload/file-upload.tsx    |  12 +-
 .../grouped-checkbox-list.tsx                 |   2 +-
 .../components/long-input/long-input.tsx      |   1 +
 .../messages-input/messages-input.tsx         |   1 +
 .../components/short-input/short-input.tsx    |   1 +
 .../components/slider-input/slider-input.tsx  |   5 +-
 .../components/starter/input-format.tsx       |   1 +
 .../components/tool-input/tool-input.tsx      |   1 +
 .../editor/components/sub-block/sub-block.tsx |   4 +-
 .../panel/components/editor/editor.tsx        |  22 ++--
 .../components/output-panel/output-panel.tsx  |   3 +-
 .../preview-editor/preview-editor.tsx         | 100 +++++----------
 .../preview-readonly-styles.test.tsx          |  90 ++++++++++++++
 .../preview-editor/preview-readonly-styles.ts |  27 ++++
 .../workflow/workflow-preview-action.tsx      |  33 +++++
 .../emcn/src/components/code/code.test.tsx    |  89 ++++++++++++-
 packages/emcn/src/components/code/code.tsx    |  25 +++-
 packages/emcn/src/components/index.ts         |   5 +
 .../overlay-action-button.test.tsx            | 117 ++++++++++++++++++
 .../overlay-action-button.tsx                 |  49 ++++++++
 packages/emcn/src/index.ts                    |   1 +
 .../src/lib/code-hover-card.tsx               |   3 +-
 36 files changed, 663 insertions(+), 193 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.test.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.ts
 create mode 100644 apps/sim/components/workflow/workflow-preview-action.tsx
 create mode 100644 packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx
 create mode 100644 packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
index 6b5f0a54988..b9ae284b385 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
@@ -15,6 +15,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Duplicate,
+  OverlayActionButton,
   Search as SearchIcon,
   Tooltip,
   useCopyToClipboard,
@@ -494,7 +495,8 @@ function DetailCodeSection({
             <Code.Viewer
               code={jsonString}
               language='json'
-              className='max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!'
+              appearance='inspection'
+              className='max-w-full [word-break:break-all]'
               wrapText
               searchQuery={isSearchActive ? searchQuery : undefined}
               currentMatchIndex={currentMatchIndex}
@@ -504,39 +506,35 @@ function DetailCodeSection({
               <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <Button
+                    <OverlayActionButton
                       aria-label={copied ? 'Copied' : 'Copy'}
                       type='button'
-                      variant='default'
                       onClick={(e) => {
                         e.stopPropagation()
                         handleCopy()
                       }}
-                      className='size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                     >
                       {copied ? (
                         <Check className='size-[10px] text-[var(--text-success)]' />
                       ) : (
                         <Clipboard className='size-[10px]' />
                       )}
-                    </Button>
+                    </OverlayActionButton>
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
                 </Tooltip.Root>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <Button
+                    <OverlayActionButton
                       aria-label='Search'
                       type='button'
-                      variant='default'
                       onClick={(e) => {
                         e.stopPropagation()
                         activateSearch()
                       }}
-                      className='size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                     >
                       <Search className='size-[10px]' />
-                    </Button>
+                    </OverlayActionButton>
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top'>Search</Tooltip.Content>
                 </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
index b3a28c53f71..59164f6d861 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -28,6 +28,7 @@ import {
   Duplicate,
   Eye,
   handleKeyboardActivation,
+  OverlayActionButton,
   Redo,
   Search as SearchIcon,
   Tooltip,
@@ -158,7 +159,8 @@ export const WorkflowOutputSection = memo(
           <Code.Viewer
             code={jsonString}
             language='json'
-            className='max-h-[300px] min-h-0 max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!'
+            appearance='inspection'
+            className='max-h-[300px] min-h-0 max-w-full [word-break:break-all]'
             wrapText
             searchQuery={isSearchActive ? searchQuery : undefined}
             currentMatchIndex={currentMatchIndex}
@@ -169,39 +171,35 @@ export const WorkflowOutputSection = memo(
             <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Button
+                  <OverlayActionButton
                     aria-label={copied ? 'Copied' : 'Copy'}
                     type='button'
-                    variant='default'
                     onClick={(e) => {
                       e.stopPropagation()
                       handleCopy()
                     }}
-                    className='size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                   >
                     {copied ? (
                       <Check className='size-[10px] text-[var(--text-success)]' />
                     ) : (
                       <Clipboard className='size-[10px]' />
                     )}
-                  </Button>
+                  </OverlayActionButton>
                 </Tooltip.Trigger>
                 <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
               </Tooltip.Root>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Button
+                  <OverlayActionButton
                     aria-label='Search'
                     type='button'
-                    variant='default'
                     onClick={(e) => {
                       e.stopPropagation()
                       activateSearch()
                     }}
-                    className='size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                   >
                     <Search className='size-[10px]' />
-                  </Button>
+                  </OverlayActionButton>
                 </Tooltip.Trigger>
                 <Tooltip.Content side='top'>Search</Tooltip.Content>
               </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index c0bbd87f022..2c498f71f6b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -607,7 +607,7 @@ function ServerDetailView({
                               : 'json'
                         }
                         wrapText
-                        className='min-h-0! rounded-sm border border-[var(--border-1)]'
+                        className='min-h-0!'
                       />
                       {activeConfigTab === 'cursor' && (
                         <a
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
index 2ad4ebc773b..a1db5e3daf5 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
@@ -5,7 +5,6 @@ import {
   Button,
   ChipCombobox,
   ChipInput,
-  cn,
   FieldDivider,
   Label,
   Switch,
@@ -29,6 +28,10 @@ import {
   TableSidebarHeader,
   TableSidebarHeaderAction,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
+import {
+  TableSidebarScrollBody,
+  TableSidebarShell,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout'
 import { useAddTableColumn, useUpdateColumn } from '@/hooks/queries/tables'
 import { SelectOptionsEditor } from '../select-field'
 import { columnTypeOptionsForTable } from './column-types'
@@ -100,18 +103,11 @@ export function ColumnConfigSidebar(props: ColumnConfigSidebarProps) {
   // different column / mode remounts and re-seeds state from props.
   const open = props.config !== null
   return (
-    <aside
-      role='dialog'
-      aria-label='Configure column'
-      className={cn(
-        'absolute top-0 right-0 bottom-0 z-[var(--z-modal)] flex w-[400px] flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)] transition-transform duration-200 ease-out',
-        open ? 'translate-x-0 shadow-overlay' : 'translate-x-full'
-      )}
-    >
+    <TableSidebarShell open={open} aria-label='Configure column'>
       {props.config && (
         <ColumnConfigBody key={configKey(props.config)} {...props} config={props.config} />
       )}
-    </aside>
+    </TableSidebarShell>
   )
 }
 
@@ -274,7 +270,7 @@ function ColumnConfigBody({
         </TableSidebarHeaderAction>
       </TableSidebarHeader>
 
-      <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
+      <TableSidebarScrollBody>
         {/* `disabled` on the fieldset reaches every native control inside,
             including the comboboxes' trigger buttons; `contents` keeps the
             existing layout. Values stay readable and selectable. */}
@@ -383,7 +379,7 @@ function ColumnConfigBody({
             </>
           )}
         </fieldset>
-      </div>
+      </TableSidebarScrollBody>
 
       <div className='flex items-center justify-end gap-2 border-[var(--border)] border-t px-2 py-3'>
         <Button variant='default' size='sm' onClick={onClose}>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
index e158e4ab159..2cbf1f8c564 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
@@ -25,6 +25,7 @@ import {
   TableSidebarHeader,
   TableSidebarHeaderAction,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
+import { TableSidebarScrollBody } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout'
 import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
 import {
   useAddWorkflowGroup,
@@ -252,7 +253,7 @@ export function EnrichmentConfig({
         </TableSidebarHeaderAction>
       </TableSidebarHeader>
 
-      <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
+      <TableSidebarScrollBody>
         <div className='flex flex-col gap-[9.5px]'>
           <Label className='flex items-baseline gap-1.5 whitespace-nowrap pl-0.5'>Inputs</Label>
           {enrichment.inputs.length === 0 ? (
@@ -362,7 +363,7 @@ export function EnrichmentConfig({
             />
           </>
         )}
-      </div>
+      </TableSidebarScrollBody>
 
       <div className='flex items-center justify-end gap-2 border-[var(--border)] border-t px-2 py-3'>
         <Button variant='default' size='sm' onClick={onClose}>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
index 421055477fc..22a0134a7f2 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
@@ -1,13 +1,14 @@
 'use client'
 
 import { useState } from 'react'
-import { ChipInput, cn } from '@sim/emcn'
+import { ChipInput } from '@sim/emcn'
 import { Search, X } from '@sim/emcn/icons'
 import type { ColumnDefinition, WorkflowGroup } from '@/lib/table'
 import {
   TableSidebarHeader,
   TableSidebarHeaderAction,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
+import { TableSidebarShell } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout'
 import { ALL_ENRICHMENTS } from '@/enrichments'
 import { getEnrichment } from '@/enrichments/registry'
 import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
@@ -31,16 +32,9 @@ interface EnrichmentsSidebarProps {
  */
 export function EnrichmentsSidebar({ open, ...rest }: EnrichmentsSidebarProps) {
   return (
-    <aside
-      role='dialog'
-      aria-label='Enrichments'
-      className={cn(
-        'absolute top-0 right-0 bottom-0 z-[var(--z-modal)] flex w-[400px] flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)] transition-transform duration-200 ease-out',
-        open ? 'translate-x-0 shadow-overlay' : 'translate-x-full'
-      )}
-    >
+    <TableSidebarShell open={open} aria-label='Enrichments'>
       {open && <EnrichmentsSidebarBody {...rest} />}
-    </aside>
+    </TableSidebarShell>
   )
 }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx
new file mode 100644
index 00000000000..a9b03496744
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx
@@ -0,0 +1,65 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import {
+  TableSidebarScrollBody,
+  TableSidebarShell,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout'
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+describe('table sidebar layout', () => {
+  it('keeps the labeled dialog and its form mounted while the sidebar slides closed', () => {
+    function render(open: boolean) {
+      act(() => {
+        root.render(
+          <TableSidebarShell open={open} aria-label='Configure workflow'>
+            <TableSidebarScrollBody>
+              <input aria-label='Workflow name' defaultValue='Existing workflow' />
+            </TableSidebarScrollBody>
+          </TableSidebarShell>
+        )
+      })
+    }
+
+    render(true)
+    const dialog = container.querySelector<HTMLElement>('[role="dialog"]')!
+    const input = container.querySelector<HTMLInputElement>('input')!
+    const scrollBody = input.parentElement!
+    expect(dialog.getAttribute('aria-label')).toBe('Configure workflow')
+    expect(dialog.classList.contains('translate-x-0')).toBe(true)
+    expect(dialog.classList.contains('shadow-overlay')).toBe(true)
+
+    input.value = 'Edited workflow'
+    scrollBody.scrollTop = 64
+    render(false)
+    expect(container.querySelector('[role="dialog"]')).toBe(dialog)
+    expect(container.querySelector('input')).toBe(input)
+    expect(input.value).toBe('Edited workflow')
+    expect(input.parentElement).toBe(scrollBody)
+    expect(scrollBody.scrollTop).toBe(64)
+    expect(dialog.classList.contains('translate-x-full')).toBe(true)
+    expect(dialog.classList.contains('shadow-overlay')).toBe(false)
+
+    render(true)
+    expect(dialog.classList.contains('translate-x-0')).toBe(true)
+    expect(input.value).toBe('Edited workflow')
+    expect(scrollBody.scrollTop).toBe(64)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx
new file mode 100644
index 00000000000..7315df41c52
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx
@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+
+interface TableSidebarShellProps {
+  open: boolean
+  'aria-label': string
+  children: ReactNode
+}
+
+/** The shared sliding shell for table configuration sidebars. */
+export function TableSidebarShell({
+  open,
+  children,
+  'aria-label': ariaLabel,
+}: TableSidebarShellProps) {
+  return (
+    <aside
+      role='dialog'
+      aria-label={ariaLabel}
+      className={cn(
+        'absolute top-0 right-0 bottom-0 z-[var(--z-modal)] flex w-[400px] flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)] transition-transform duration-200 ease-out',
+        open ? 'translate-x-0 shadow-overlay' : 'translate-x-full'
+      )}
+    >
+      {children}
+    </aside>
+  )
+}
+
+interface TableSidebarScrollBodyProps {
+  children: ReactNode
+}
+
+/** The scrolling form area shared by column, workflow, and enrichment settings. */
+export function TableSidebarScrollBody({ children }: TableSidebarScrollBodyProps) {
+  return (
+    <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
+      {children}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index e213befae6c..672fe326307 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -6,19 +6,18 @@ import {
   ChipCombobox,
   ChipInput,
   type ComboboxOptionGroup,
-  cn,
   FieldDisclosure,
   FieldDivider,
   Label,
   Loader,
   OverflowText,
   Switch,
-  Tooltip,
   toast,
 } from '@sim/emcn'
 import { ArrowLeft, SquareArrowUpRight, X } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
 import type {
   AddWorkflowGroupBodyInput,
@@ -50,6 +49,10 @@ import {
   TableSidebarHeader,
   TableSidebarHeaderAction,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
+import {
+  TableSidebarScrollBody,
+  TableSidebarShell,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout'
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { BlockTile } from '@/blocks/block-tile'
 import { useDeployedWorkflowState } from '@/hooks/queries/deployments'
@@ -150,18 +153,11 @@ interface BlockOutputGroup {
 export function WorkflowSidebar(props: WorkflowSidebarProps) {
   const open = props.config !== null
   return (
-    <aside
-      role='dialog'
-      aria-label='Configure workflow'
-      className={cn(
-        'absolute top-0 right-0 bottom-0 z-[var(--z-modal)] flex w-[400px] flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)] transition-transform duration-200 ease-out',
-        open ? 'translate-x-0 shadow-overlay' : 'translate-x-full'
-      )}
-    >
+    <TableSidebarShell open={open} aria-label='Configure workflow'>
       {props.config && (
         <WorkflowSidebarBody key={configKey(props.config)} {...props} config={props.config} />
       )}
-    </aside>
+    </TableSidebarShell>
   )
 }
 
@@ -654,7 +650,7 @@ export function WorkflowSidebarBody({
         </TableSidebarHeaderAction>
       </TableSidebarHeader>
 
-      <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
+      <TableSidebarScrollBody>
         {/* Single-output mode renames this column directly. */}
         {isEditOutputMode && (
           <>
@@ -711,27 +707,18 @@ export function WorkflowSidebarBody({
                       />
                     </div>
                     {!isEnrichment && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Button
-                            aria-label='Open workflow'
-                            type='button'
-                            variant='ghost'
-                            onClick={() =>
-                              window.open(
-                                `/workspace/${workspaceId}/w/${selectedWorkflowId}`,
-                                '_blank',
-                                'noopener,noreferrer'
-                              )
-                            }
-                            iconSize='compact-fixed'
-                            className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
-                          >
-                            <SquareArrowUpRight className='size-[12px]' />
-                          </Button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content side='top'>Open workflow</Tooltip.Content>
-                      </Tooltip.Root>
+                      <WorkflowPreviewAction
+                        aria-label='Open workflow'
+                        onClick={() =>
+                          window.open(
+                            `/workspace/${workspaceId}/w/${selectedWorkflowId}`,
+                            '_blank',
+                            'noopener,noreferrer'
+                          )
+                        }
+                      >
+                        <SquareArrowUpRight className='size-[12px]' />
+                      </WorkflowPreviewAction>
                     )}
                   </>
                 ) : (
@@ -849,7 +836,7 @@ export function WorkflowSidebarBody({
             )}
           </>
         )}
-      </div>
+      </TableSidebarScrollBody>
 
       <div className='flex items-center justify-end gap-2 border-[var(--border)] border-t px-2 py-3'>
         <Button variant='default' size='sm' onClick={onClose}>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
index e7be57bc069..f864671f000 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -493,7 +493,7 @@ console.log(limits);`
           code={getSyncCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='min-h-0! rounded-sm border border-[var(--border-1)]'
+          className='min-h-0!'
         />
       </div>
 
@@ -533,7 +533,7 @@ console.log(limits);`
           code={getStreamCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='min-h-0! rounded-sm border border-[var(--border-1)]'
+          className='min-h-0!'
         />
       </div>
 
@@ -579,7 +579,7 @@ console.log(limits);`
             code={getAsyncCommand()}
             language={LANGUAGE_SYNTAX[language]}
             wrapText
-            className='min-h-0! rounded-sm border border-[var(--border-1)]'
+            className='min-h-0!'
           />
         </div>
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
index 2245b6a3647..8c2f754da9f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -231,7 +231,7 @@ export function Versions({
               className={cn(
                 'flex h-[36px] cursor-pointer items-center px-4 transition-colors duration-100',
                 isSelected
-                  ? 'bg-[color-mix(in_srgb,var(--accent)_10%,transparent)] hover-hover:bg-[color-mix(in_srgb,var(--accent)_15%,transparent)]'
+                  ? 'bg-[color-mix(in_srgb,hsl(var(--accent))_10%,transparent)] hover-hover:bg-[color-mix(in_srgb,hsl(var(--accent))_15%,transparent)]'
                   : 'hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--border)]'
               )}
               onClick={() => handleRowClick(v.version)}
@@ -329,12 +329,8 @@ export function Versions({
                   <Tooltip.Trigger asChild>
                     <Button
                       aria-label={v.description ? 'Edit description' : 'Add description'}
-                      variant='ghost'
-                      iconPadding='sm'
-                      className={cn(
-                        !v.description &&
-                          'text-[var(--text-quaternary)] hover-hover:text-[var(--text-tertiary)]'
-                      )}
+                      variant={v.description ? 'ghost' : 'ghost-secondary'}
+                      size='inline'
                       onClick={(e) => {
                         e.stopPropagation()
                         handleOpenDescriptionModal(v.version)
@@ -359,7 +355,7 @@ export function Versions({
                     <Button
                       aria-label='Version actions'
                       variant='ghost'
-                      iconPadding='sm'
+                      size='inline'
                       disabled={isPromotingVersion}
                       onClick={(e) => e.stopPropagation()}
                     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
index 231ea553c16..b38f2324a58 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -2,7 +2,6 @@
 
 import { useId, useState } from 'react'
 import {
-  Button,
   ChipButtonGroup,
   ChipButtonGroupItem,
   ChipConfirmModal,
@@ -12,6 +11,7 @@ import {
   cn,
   Expand,
   Label,
+  OverlayActionButton,
   Skeleton,
   Tooltip,
 } from '@sim/emcn'
@@ -241,15 +241,15 @@ export function GeneralDeploy({
                 </div>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <Button
+                    <OverlayActionButton
                       aria-label='See preview'
                       type='button'
-                      variant='default'
+                      size='md'
                       onClick={() => setShowExpandedPreview(true)}
-                      className='absolute right-[8px] bottom-2 z-10 size-[28px] cursor-pointer bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
+                      className='absolute right-[8px] bottom-2 z-10'
                     >
                       <Expand className='size-[14px]' />
-                    </Button>
+                    </OverlayActionButton>
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top'>See preview</Tooltip.Content>
                 </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index 5169f4697fd..c71ae2bc46f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -1114,6 +1114,7 @@ export function ConditionInput({
                       overlayRefs.current.delete(block.id)
                     }
                   }}
+                  data-preview-full-opacity={isPreview || undefined}
                   className={cn(
                     'pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-3 py-2 font-sans text-sm',
                     (isPreview || disabled) && 'opacity-50'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index 6c659aff3dc..5fd799386d0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -197,6 +197,7 @@ export function EvalInput({
                   className='text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50'
                 />
                 <div
+                  data-preview-full-opacity={isPreview || undefined}
                   className={cn(
                     'pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm',
                     (isPreview || disabled) && 'opacity-50'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index e9ae9d5c8a3..ebef131255b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -215,12 +215,13 @@ function SingleFileSelector({
         iconSize='compact'
         className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10'
         onClick={onClear}
-        disabled={isDeleting}
+        disabled={disabled || isDeleting}
+        data-preview-full-opacity={disabled || undefined}
       >
         {isDeleting ? (
           <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
         ) : (
-          <X className='size-4 opacity-50 hover-hover:opacity-100' />
+          <X className='size-4 opacity-50 hover-hover:opacity-100' data-preview-full-opacity />
         )}
       </Button>
     </div>
@@ -770,12 +771,13 @@ export function FileUpload({
           iconSize='compact'
           className='-translate-y-1/2 absolute top-1/2 right-[4px]'
           onClick={(e) => handleRemoveFile(file, e)}
-          disabled={isDeleting}
+          disabled={disabled || isPreview || isDeleting}
+          data-preview-full-opacity={isPreview || undefined}
         >
           {isDeleting ? (
             <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
           ) : (
-            <X className='size-4 opacity-50' />
+            <X className='size-4 opacity-50' data-preview-full-opacity />
           )}
         </Button>
       </div>
@@ -972,7 +974,7 @@ export function FileUpload({
           onOpenChange={(open) => {
             if (open) void refetchWorkspaceFiles()
           }}
-          disabled={disabled}
+          disabled={disabled || isPreview}
           isLoading={loadingWorkspaceFiles}
           formatFileSize={formatFileSize}
           truncateMiddle={truncateMiddle}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index d385a77ab71..b503433c4af 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -123,7 +123,7 @@ export function GroupedCheckboxList({
         )}
       >
         <span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
-          <ManageWorkspace className='size-4 shrink-0 opacity-50' />
+          <ManageWorkspace className='size-4 shrink-0 opacity-50' data-preview-full-opacity />
           <span className='truncate'>Configure PII Types</span>
         </span>
         <SelectedCountDisplay
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index e25ac99312f..46bcc0052ae 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -376,6 +376,7 @@ export function LongInput({
               />
               <div
                 ref={overlayRef}
+                data-preview-full-opacity={isPreview || undefined}
                 className={cn(
                   'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 font-sans text-sm',
                   (isPreview || disabled) && 'opacity-50',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index 3dcdd9347b8..86f038ce58f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -547,6 +547,7 @@ export function MessagesInput({
       {currentMessages.map((message, index) => (
         <div
           key={messageIdsRef.current[index] ?? `fallback-${index}`}
+          data-preview-full-opacity={isPreview || undefined}
           className={cn(
             'relative flex w-full flex-col rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] transition-colors dark:bg-[var(--surface-5)]',
             disabled && 'opacity-50'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index f74ffd665ae..666dad6182b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -393,6 +393,7 @@ export const ShortInput = memo(function ShortInput({
                 />
                 <div
                   ref={overlayRef}
+                  data-preview-full-opacity={isPreview || undefined}
                   className={cn(
                     'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 pr-3 font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
                     (isPreview || disabled) && 'opacity-50',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slider-input/slider-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slider-input/slider-input.tsx
index 7a5cb41d9cb..5627e8121fc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slider-input/slider-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slider-input/slider-input.tsx
@@ -61,7 +61,10 @@ export function SliderInput({
   const isDisabled = isPreview || disabled
 
   return (
-    <div className={cn('relative pt-2 pb-[22px]', isDisabled && 'opacity-50')}>
+    <div
+      data-preview-full-opacity={isPreview || undefined}
+      className={cn('relative pt-2 pb-[22px]', isDisabled && 'opacity-50')}
+    >
       <Slider
         value={[normalizedValue]}
         min={min}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index ab93a862a07..03ff345193e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -725,6 +725,7 @@ export function FieldFormat({
                         ref={(el) => {
                           if (el) descriptionOverlayRefs.current[field.id] = el
                         }}
+                        data-preview-full-opacity={isPreview || undefined}
                         style={{ scrollbarWidth: 'none' }}
                         className={cn(
                           'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
index 54b7d751123..adecacf7d6a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -1634,6 +1634,7 @@ export const ToolInput = memo(function ToolInput({
               onDrop={(e) => handleDrop(e, toolIndex)}
             >
               <div
+                data-preview-full-opacity={isPreview || undefined}
                 className={cn(
                   'flex items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]',
                   (isCustomTool || hasToolBody) && 'cursor-pointer',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 4795928d1c6..ee2ae17ce60 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -302,7 +302,8 @@ const renderLabel = (
             {!wandState.isSearchActive ? (
               <Button
                 variant='active'
-                className='-my-1 h-5 py-0 text-xs'
+                size='inline'
+                className='-my-1'
                 onClick={wandState.onSearchClick}
               >
                 Generate
@@ -1244,6 +1245,7 @@ function SubBlockComponent({
       onMouseDown={handleMouseDown}
       data-workflow-search-subblock-id={config.id}
       data-workflow-search-canonical-id={config.canonicalParamId ?? config.id}
+      data-preview-readonly={(isPreview && !disabled) || undefined}
       className='subblock-content flex flex-col gap-2.5'
     >
       {renderLabel(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 61bd02da17b..9222584ba9e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -24,6 +24,7 @@ import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
 import { isMcpRuntimeReference } from '@/lib/mcp/operation-policy'
 import { resolveMcpBlockConfig } from '@/lib/mcp/workflow-config'
 import { captureEvent } from '@/lib/posthog/client'
@@ -610,21 +611,12 @@ export function Editor() {
                                 lightweight
                               />
                             </div>
-                            <Tooltip.Root>
-                              <Tooltip.Trigger asChild>
-                                <Button
-                                  aria-label='Open workflow'
-                                  type='button'
-                                  variant='ghost'
-                                  onClick={handleOpenChildWorkflow}
-                                  iconSize='compact-fixed'
-                                  className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
-                                >
-                                  <SquareArrowUpRight className='size-[12px]' />
-                                </Button>
-                              </Tooltip.Trigger>
-                              <Tooltip.Content side='top'>Open workflow</Tooltip.Content>
-                            </Tooltip.Root>
+                            <WorkflowPreviewAction
+                              aria-label='Open workflow'
+                              onClick={handleOpenChildWorkflow}
+                            >
+                              <SquareArrowUpRight className='size-[12px]' />
+                            </WorkflowPreviewAction>
                           </>
                         ) : (
                           <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index 7eb787be542..daa24590d8e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -66,7 +66,8 @@ const OutputCodeContent = React.memo(function OutputCodeContent({
       code={code}
       showGutter
       language={language}
-      className='m-0 min-h-full rounded-none border-0 bg-[var(--bg)] dark:bg-[var(--bg)]'
+      appearance='flat'
+      className='m-0 min-h-full'
       paddingLeft={8}
       gutterStyle={{ backgroundColor: 'transparent' }}
       wrapText={wrapText}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index c7c6880bf90..bba86b895e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -12,6 +12,7 @@ import {
   Input,
   Label,
   OverflowText,
+  OverlayActionButton,
   Tooltip,
 } from '@sim/emcn'
 import {
@@ -29,6 +30,7 @@ import {
 import { formatDuration } from '@sim/utils/formatting'
 import { ReactFlowProvider } from '@xyflow/react'
 import { useParams } from 'next/navigation'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
 import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
 import {
   buildCanonicalIndexForSurface,
@@ -41,6 +43,7 @@ import {
 import { DELETED_WORKFLOW_LABEL } from '@/lib/workflows/workflow-labels'
 import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components'
 import { PreviewContextMenu } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-context-menu'
+import { READONLY_PREVIEW_STYLES } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles'
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow'
 import { getBlock } from '@/blocks'
 import { BlockTile } from '@/blocks/block-tile'
@@ -52,31 +55,6 @@ import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import { useContextMenu } from '@/hooks/use-context-menu'
 import type { BlockState, Loop, Parallel, WorkflowState } from '@/stores/workflows/workflow/types'
 
-/**
- * CSS override to show full opacity and prevent interaction in readonly preview mode.
- * Extracted to avoid duplicating the style block in multiple places.
- */
-const READONLY_PREVIEW_STYLES = `
-  .readonly-preview,
-  .readonly-preview * {
-    cursor: default !important;
-  }
-  .readonly-preview [disabled],
-  .readonly-preview [data-disabled],
-  .readonly-preview input,
-  .readonly-preview textarea,
-  .readonly-preview [role="combobox"],
-  .readonly-preview [role="slider"],
-  .readonly-preview [role="switch"],
-  .readonly-preview [role="checkbox"] {
-    opacity: 1 !important;
-    pointer-events: none;
-  }
-  .readonly-preview .opacity-50 {
-    opacity: 1 !important;
-  }
-`
-
 /**
  * Format a value for display as JSON string
  */
@@ -604,7 +582,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
   return (
     <div className='flex-1 overflow-y-auto overflow-x-hidden pt-2 pb-2'>
       {/* Type Selection - matches SubflowEditor */}
-      <div>
+      <div data-preview-readonly>
         <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
           {isLoop ? 'Loop Type' : 'Parallel Type'}
         </Label>
@@ -627,7 +605,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
         </Label>
 
         {isCountMode ? (
-          <div>
+          <div data-preview-readonly>
             <Input
               type='text'
               value={iterations.toString()}
@@ -1224,7 +1202,8 @@ function PreviewEditorContent({
                   <Code.Viewer
                     code={formatValueAsJson(executionData.input)}
                     language='json'
-                    className='max-h-[300px] min-h-0 max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!'
+                    appearance='inspection'
+                    className='max-h-[300px] min-h-0 max-w-full [word-break:break-all]'
                     wrapText={wrapText}
                     searchQuery={isSearchActive ? searchQuery : undefined}
                     currentMatchIndex={currentMatchIndex}
@@ -1235,22 +1214,20 @@ function PreviewEditorContent({
                     <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
-                          <Button
+                          <OverlayActionButton
                             aria-label={copiedSection === 'input' ? 'Copied' : 'Copy'}
                             type='button'
-                            variant='ghost'
                             onClick={(e) => {
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.input), 'input')
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             {copiedSection === 'input' ? (
                               <Check className='size-[10px] text-[var(--text-success)]' />
                             ) : (
                               <Clipboard className='size-[10px]' />
                             )}
-                          </Button>
+                          </OverlayActionButton>
                         </Tooltip.Trigger>
                         <Tooltip.Content side='top'>
                           {copiedSection === 'input' ? 'Copied' : 'Copy'}
@@ -1258,18 +1235,16 @@ function PreviewEditorContent({
                       </Tooltip.Root>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
-                          <Button
+                          <OverlayActionButton
                             aria-label='Search'
                             type='button'
-                            variant='ghost'
                             onClick={(e) => {
                               e.stopPropagation()
                               activateSearch()
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             <Search className='size-[10px]' />
-                          </Button>
+                          </OverlayActionButton>
                         </Tooltip.Trigger>
                         <Tooltip.Content side='top'>Search</Tooltip.Content>
                       </Tooltip.Root>
@@ -1295,8 +1270,9 @@ function PreviewEditorContent({
                   <Code.Viewer
                     code={formatValueAsJson(executionData.output)}
                     language='json'
+                    appearance='inspection'
                     className={cn(
-                      'max-h-[300px] min-h-0 max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!',
+                      'max-h-[300px] min-h-0 max-w-full [word-break:break-all]',
                       executionData.status === 'error' && 'text-[var(--text-error)]'
                     )}
                     wrapText={wrapText}
@@ -1309,22 +1285,20 @@ function PreviewEditorContent({
                     <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
-                          <Button
+                          <OverlayActionButton
                             aria-label={copiedSection === 'output' ? 'Copied' : 'Copy'}
                             type='button'
-                            variant='ghost'
                             onClick={(e) => {
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.output), 'output')
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             {copiedSection === 'output' ? (
                               <Check className='size-[10px] text-[var(--text-success)]' />
                             ) : (
                               <Clipboard className='size-[10px]' />
                             )}
-                          </Button>
+                          </OverlayActionButton>
                         </Tooltip.Trigger>
                         <Tooltip.Content side='top'>
                           {copiedSection === 'output' ? 'Copied' : 'Copy'}
@@ -1332,18 +1306,16 @@ function PreviewEditorContent({
                       </Tooltip.Root>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
-                          <Button
+                          <OverlayActionButton
                             aria-label='Search'
                             type='button'
-                            variant='ghost'
                             onClick={(e) => {
                               e.stopPropagation()
                               activateSearch()
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             <Search className='size-[10px]' />
-                          </Button>
+                          </OverlayActionButton>
                         </Tooltip.Trigger>
                         <Tooltip.Content side='top'>Search</Tooltip.Content>
                       </Tooltip.Root>
@@ -1387,31 +1359,18 @@ function PreviewEditorContent({
                             cursorStyle='grab'
                           />
                         </div>
-                        <Tooltip.Root>
-                          <Tooltip.Trigger asChild>
-                            <Button
-                              aria-label={
-                                isExecutionMode && onDrillDown
-                                  ? 'Expand workflow'
-                                  : 'Open in new tab'
-                              }
-                              type='button'
-                              variant='ghost'
-                              onClick={handleExpandChildWorkflow}
-                              iconSize='compact-fixed'
-                              className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
-                            >
-                              {isExecutionMode && onDrillDown ? (
-                                <Expand className='size-[12px]' />
-                              ) : (
-                                <SquareArrowUpRight className='size-[12px]' />
-                              )}
-                            </Button>
-                          </Tooltip.Trigger>
-                          <Tooltip.Content side='top'>
-                            {isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'}
-                          </Tooltip.Content>
-                        </Tooltip.Root>
+                        <WorkflowPreviewAction
+                          aria-label={
+                            isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'
+                          }
+                          onClick={handleExpandChildWorkflow}
+                        >
+                          {isExecutionMode && onDrillDown ? (
+                            <Expand className='size-[12px]' />
+                          ) : (
+                            <SquareArrowUpRight className='size-[12px]' />
+                          )}
+                        </WorkflowPreviewAction>
                       </>
                     ) : (
                       <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
@@ -1450,7 +1409,6 @@ function PreviewEditorContent({
                           ...subBlockValues,
                           __canonicalModes: canonicalModeOverrides,
                         }}
-                        disabled={true}
                       />
                       {index < visibleSubBlocks.length - 1 && (
                         <FieldDivider
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.test.tsx
new file mode 100644
index 00000000000..92ae2d8f16d
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.test.tsx
@@ -0,0 +1,90 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('next/navigation', () => ({ useParams: () => ({ workspaceId: 'workspace-1' }) }))
+vi.mock('@/hooks/use-webhook-management', () => ({
+  useWebhookManagement: () => ({ webhookUrl: null }),
+}))
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value',
+  () => ({ useSubBlockValue: () => [undefined, vi.fn()] })
+)
+
+import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block'
+import { READONLY_PREVIEW_STYLES } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles'
+import type { SubBlockConfig } from '@/blocks/types'
+
+const config: SubBlockConfig = { id: 'enabled', type: 'switch', title: 'Enabled' }
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+describe('workflow preview read-only appearance', () => {
+  it('shows a preview value at full opacity while retaining the disabled interaction state', () => {
+    act(() =>
+      root.render(
+        <>
+          <style>{`button[disabled] { opacity: 0.5; } ${READONLY_PREVIEW_STYLES}`}</style>
+          <div className='readonly-preview'>
+            <div data-testid='preview'>
+              <SubBlock
+                blockId='block-1'
+                config={config}
+                isPreview
+                subBlockValues={{ enabled: { value: true } }}
+              />
+              <div data-preview-readonly>
+                <button type='button' disabled>
+                  Remove file
+                </button>
+              </div>
+            </div>
+            <div data-testid='disabled'>
+              <SubBlock blockId='block-1' config={config} disabled />
+            </div>
+          </div>
+        </>
+      )
+    )
+
+    const preview = container.querySelector('[data-testid="preview"]')!
+    const previewSwitch = preview.querySelector('[role="switch"]') as HTMLButtonElement
+    const disabled = container.querySelector('[data-testid="disabled"]')!
+    const disabledSwitch = disabled.querySelector('[role="switch"]') as HTMLButtonElement
+
+    expect(preview.querySelector('[data-preview-readonly]')).not.toBeNull()
+    expect(previewSwitch.hasAttribute('disabled')).toBe(true)
+    expect(previewSwitch.getAttribute('aria-checked')).toBe('true')
+    expect(getComputedStyle(previewSwitch).opacity).toBe('1')
+    expect(getComputedStyle(previewSwitch).pointerEvents).toBe('none')
+    const removeButton = preview.querySelector('button:not([role="switch"])') as HTMLButtonElement
+    expect(getComputedStyle(removeButton).pointerEvents).toBe('none')
+    expect(getComputedStyle(removeButton).opacity).toBe('0.5')
+
+    act(() => {
+      previewSwitch.click()
+      previewSwitch.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
+    })
+    expect(previewSwitch.getAttribute('aria-checked')).toBe('true')
+
+    expect(disabled.querySelector('[data-preview-readonly]')).toBeNull()
+    expect(disabledSwitch.hasAttribute('disabled')).toBe(true)
+    expect(getComputedStyle(disabledSwitch).opacity).toBe('0.5')
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.ts b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.ts
new file mode 100644
index 00000000000..3fe8107450f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles.ts
@@ -0,0 +1,27 @@
+/**
+ * Keep preview fields noninteractive while showing intentionally read-only controls
+ * and their marked value overlays at full opacity in both preview sections.
+ */
+export const READONLY_PREVIEW_STYLES = `
+  .readonly-preview,
+  .readonly-preview * {
+    cursor: default !important;
+  }
+  .readonly-preview [data-preview-readonly] :is(
+    input,
+    textarea,
+    [role="combobox"],
+    [role="slider"],
+    [role="switch"],
+    [role="checkbox"]
+  ) {
+    opacity: 1 !important;
+    pointer-events: none;
+  }
+  .readonly-preview [data-preview-readonly] :is(button, [role="button"]) {
+    pointer-events: none;
+  }
+  .readonly-preview [data-preview-readonly] [data-preview-full-opacity] {
+    opacity: 1 !important;
+  }
+`
diff --git a/apps/sim/components/workflow/workflow-preview-action.tsx b/apps/sim/components/workflow/workflow-preview-action.tsx
new file mode 100644
index 00000000000..96ee8275afd
--- /dev/null
+++ b/apps/sim/components/workflow/workflow-preview-action.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { type ComponentProps, forwardRef } from 'react'
+import { OverlayActionButton, Tooltip } from '@sim/emcn'
+
+interface WorkflowPreviewActionProps
+  extends Omit<
+    ComponentProps<typeof OverlayActionButton>,
+    'size' | 'type' | 'className' | 'shape'
+  > {
+  'aria-label': string
+}
+
+/** Overlay corner action shared by embedded workflow previews. */
+export const WorkflowPreviewAction = forwardRef<HTMLButtonElement, WorkflowPreviewActionProps>(
+  ({ 'aria-label': label, ...props }, ref) => (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <OverlayActionButton
+          {...props}
+          ref={ref}
+          type='button'
+          aria-label={label}
+          size='md'
+          className='absolute right-[6px] bottom-1.5 z-10'
+        />
+      </Tooltip.Trigger>
+      <Tooltip.Content side='top'>{label}</Tooltip.Content>
+    </Tooltip.Root>
+  )
+)
+
+WorkflowPreviewAction.displayName = 'WorkflowPreviewAction'
diff --git a/packages/emcn/src/components/code/code.test.tsx b/packages/emcn/src/components/code/code.test.tsx
index ebe7d5b1ea6..f9b249ab21c 100644
--- a/packages/emcn/src/components/code/code.test.tsx
+++ b/packages/emcn/src/components/code/code.test.tsx
@@ -1,10 +1,10 @@
 /**
  * @vitest-environment jsdom
  */
-import { act } from 'react'
+import { act, createRef } from 'react'
 import { sleep } from '@sim/utils/helpers'
 import { createRoot, type Root } from 'react-dom/client'
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Code } from './code'
 
 let root: Root | null = null
@@ -12,6 +12,14 @@ let host: HTMLDivElement | null = null
 
 beforeEach(() => {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+  )
   host = document.createElement('div')
   document.body.appendChild(host)
   root = createRoot(host)
@@ -20,6 +28,7 @@ beforeEach(() => {
 afterEach(() => {
   if (root) act(() => root?.unmount())
   host?.remove()
+  vi.unstubAllGlobals()
   root = null
   host = null
 })
@@ -60,3 +69,79 @@ describe('Code.Viewer workflow references', () => {
     expect(host?.querySelector('[data-search-match]')?.textContent).toBe('result')
   })
 })
+
+describe('Code.Viewer appearances', () => {
+  for (const virtualized of [false, true]) {
+    it(`applies the inspection surface to ${virtualized ? 'virtualized' : 'standard'} output`, async () => {
+      await act(async () => {
+        root?.render(
+          <Code.Viewer
+            code='{"result": true}'
+            language='json'
+            showGutter
+            virtualized={virtualized}
+            appearance='inspection'
+            className='max-h-[300px]'
+          />
+        )
+        await sleep(1)
+      })
+
+      const viewer = host?.firstElementChild
+      expect(viewer?.classList.contains('rounded-md')).toBe(true)
+      expect(viewer?.classList.contains('border-0')).toBe(true)
+      expect(viewer?.classList.contains('bg-[var(--surface-4)]!')).toBe(true)
+      expect(viewer?.classList.contains('dark:bg-[var(--surface-3)]!')).toBe(true)
+      expect(viewer?.classList.contains('max-h-[300px]')).toBe(true)
+    })
+  }
+
+  it('keeps the flat viewer separate from the default code container', async () => {
+    await act(async () => {
+      root?.render(
+        <>
+          <Code.Viewer code='default' />
+          <Code.Viewer code='flat' appearance='flat' />
+        </>
+      )
+      await sleep(1)
+    })
+
+    const [defaultViewer, flatViewer] = Array.from(host?.children ?? [])
+    expect(defaultViewer.classList.contains('rounded-sm')).toBe(true)
+    expect(flatViewer.classList.contains('rounded-none')).toBe(true)
+    expect(flatViewer.classList.contains('bg-[var(--bg)]')).toBe(true)
+    expect(flatViewer.classList.contains('dark:bg-[var(--bg)]')).toBe(true)
+    expect(flatViewer.textContent).toContain('flat')
+  })
+
+  it('applies flat chrome on the virtualized gutter path used by the terminal', async () => {
+    const contentRef = createRef<HTMLDivElement>()
+    await act(async () => {
+      root?.render(
+        <Code.Viewer
+          code={'first line\nsecond line'}
+          language='json'
+          appearance='flat'
+          className='m-0 min-h-full'
+          showGutter
+          virtualized
+          wrapText
+          paddingLeft={8}
+          contentRef={contentRef}
+        />
+      )
+      await sleep(1)
+    })
+
+    const viewer = host?.firstElementChild
+    expect(contentRef.current).toBe(viewer)
+    expect(viewer?.classList.contains('rounded-none')).toBe(true)
+    expect(viewer?.classList.contains('border-0')).toBe(true)
+    expect(viewer?.classList.contains('bg-[var(--bg)]')).toBe(true)
+    expect(viewer?.classList.contains('dark:bg-[var(--bg)]')).toBe(true)
+    expect(viewer?.classList.contains('overflow-x-hidden')).toBe(true)
+    expect(viewer?.classList.contains('min-h-full')).toBe(true)
+    expect(viewer?.classList.contains('rounded-sm')).toBe(false)
+  })
+})
diff --git a/packages/emcn/src/components/code/code.tsx b/packages/emcn/src/components/code/code.tsx
index 2e540301caa..2f0a42a5781 100644
--- a/packages/emcn/src/components/code/code.tsx
+++ b/packages/emcn/src/components/code/code.tsx
@@ -13,6 +13,7 @@ import {
 import { escapeRegExp } from '@sim/utils/string'
 import { findWorkflowReferenceTokens } from '@sim/utils/workflow-references'
 import { useVirtualizer } from '@tanstack/react-virtual'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { ChevronRight } from '../../icons'
 import { cn } from '../../lib/cn'
 import './code.css'
@@ -856,6 +857,18 @@ function applySearchHighlightingToLine(
  */
 type CodeViewerDensity = 'default' | 'compact'
 
+/** Container appearances shared by the standard and virtualized viewers. */
+export const codeViewerAppearanceVariants = cva('', {
+  variants: {
+    appearance: {
+      default: '',
+      inspection: 'rounded-md border-0 bg-[var(--surface-4)]! dark:bg-[var(--surface-3)]!',
+      flat: 'rounded-none border-0 bg-[var(--bg)] dark:bg-[var(--bg)]',
+    },
+  },
+  defaultVariants: { appearance: 'default' },
+})
+
 interface CodeViewerProps {
   /** Code content to display */
   code: string
@@ -865,6 +878,8 @@ interface CodeViewerProps {
   language?: 'javascript' | 'json' | 'python' | 'bash' | 'toml'
   /** Additional CSS classes for the container */
   className?: string
+  /** Container appearance for code inspected in logs/previews or on flat surfaces. */
+  appearance?: NonNullable<VariantProps<typeof codeViewerAppearanceVariants>['appearance']>
   /** Visual density for read-only code. */
   density?: CodeViewerDensity
   /** Highlight Sim `{{ENV}}` and `<block.output>` references with the platform accent. */
@@ -948,6 +963,7 @@ type ViewerInnerProps = {
   language: 'javascript' | 'json' | 'python' | 'bash' | 'toml'
   /** Additional CSS classes for the container */
   className?: string
+  appearance: NonNullable<CodeViewerProps['appearance']>
   /** Visual density for read-only code. */
   density: CodeViewerDensity
   highlightWorkflowReferences: boolean
@@ -978,6 +994,7 @@ const VirtualizedViewerInner = memo(function VirtualizedViewerInner({
   showGutter,
   language,
   className,
+  appearance,
   density,
   highlightWorkflowReferences,
   paddingLeft,
@@ -1147,6 +1164,7 @@ const VirtualizedViewerInner = memo(function VirtualizedViewerInner({
         wrapText ? 'overflow-x-hidden' : 'overflow-x-auto',
         'overflow-y-auto',
         'dark:bg-[var(--code-bg)]',
+        codeViewerAppearanceVariants({ appearance }),
         className
       )}
       style={{ height: containerHeight }}
@@ -1196,6 +1214,7 @@ const ViewerInner = memo(function ViewerInner({
   showGutter,
   language,
   className,
+  appearance,
   density,
   highlightWorkflowReferences,
   paddingLeft,
@@ -1309,7 +1328,7 @@ const ViewerInner = memo(function ViewerInner({
   // Grid-based rendering for gutter alignment (works with wrap)
   if (showGutter) {
     return (
-      <Container className={className}>
+      <Container className={cn(codeViewerAppearanceVariants({ appearance }), className)}>
         <Content className='code-editor-theme' editorRef={contentRef}>
           <div
             style={{
@@ -1370,7 +1389,7 @@ const ViewerInner = memo(function ViewerInner({
 
   // Simple display without gutter
   return (
-    <Container className={className}>
+    <Container className={cn(codeViewerAppearanceVariants({ appearance }), className)}>
       <Content className='code-editor-theme' editorRef={contentRef}>
         <pre
           className={cn(
@@ -1417,6 +1436,7 @@ function Viewer({
   showGutter = false,
   language = 'json',
   className,
+  appearance = 'default',
   density = 'default',
   highlightWorkflowReferences = false,
   paddingLeft = 0,
@@ -1434,6 +1454,7 @@ function Viewer({
     showGutter,
     language,
     className,
+    appearance,
     density,
     highlightWorkflowReferences,
     paddingLeft,
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index aa3313646f2..2436b32f65d 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -202,6 +202,11 @@ export {
   overflowTextClipClass,
   overflowTextFadeClass,
 } from './overflow-text/overflow-text'
+export {
+  OverlayActionButton,
+  type OverlayActionButtonProps,
+  overlayActionButtonVariants,
+} from './overlay-action-button/overlay-action-button'
 export {
   Popover,
   PopoverAnchor,
diff --git a/packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx b/packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx
new file mode 100644
index 00000000000..cd1ecca1876
--- /dev/null
+++ b/packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx
@@ -0,0 +1,117 @@
+/** @vitest-environment jsdom */
+import { act, createRef, type ReactNode } from 'react'
+import { Button, OverlayActionButton, Tooltip } from '@sim/emcn'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(children: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(children))
+  return container
+}
+
+afterEach(() => {
+  if (root) act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+  vi.useRealTimers()
+})
+
+/** Pre-migration recipes from log details and the deployment preview. */
+const PREVIOUS = [
+  {
+    name: 'default 20px adaptive action',
+    props: {},
+    variant: 'default',
+    className:
+      'size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]',
+  },
+  {
+    name: '28px adaptive action',
+    props: { size: 'md' },
+    variant: 'default',
+    className:
+      'size-[28px] cursor-pointer bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]',
+  },
+] as const
+
+describe('OverlayActionButton', () => {
+  it.each(PREVIOUS)('preserves the previous $name markup', ({ props, variant, className }) => {
+    const view = mount(
+      <>
+        <Button variant={variant} aria-label='Copy' className={`${className} shrink-0`}>
+          <svg className='size-[10px]' aria-hidden='true' />
+        </Button>
+        <OverlayActionButton {...props} aria-label='Copy' className='shrink-0'>
+          <svg className='size-[10px]' aria-hidden='true' />
+        </OverlayActionButton>
+      </>
+    )
+    const [previous, current] = view.querySelectorAll('button')
+    /** The old border-1 token aliases border; class order changes when recipes are composed. */
+    for (const button of [previous, current]) {
+      button.className = button.className
+        .replaceAll('--border-1', '--border')
+        .split(/\s+/)
+        .sort()
+        .join(' ')
+    }
+    expect(current.outerHTML).toBe(previous.outerHTML)
+  })
+
+  it('forwards refs and native props through a tooltip and suppresses disabled clicks', () => {
+    vi.useFakeTimers()
+    const ref = createRef<HTMLButtonElement>()
+    const onClick = vi.fn()
+    const onKeyDown = vi.fn()
+    const action = (disabled: boolean) => (
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <OverlayActionButton
+            ref={ref}
+            type='button'
+            aria-label='Copy'
+            data-action='copy'
+            disabled={disabled}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+          />
+        </Tooltip.Trigger>
+        <Tooltip.Content>Copy output</Tooltip.Content>
+      </Tooltip.Root>
+    )
+    const view = mount(action(false))
+    const button = view.querySelector('button')
+    if (!button) throw new Error('Button did not render')
+    expect(view.querySelectorAll('button')).toHaveLength(1)
+    expect(ref.current).toBe(button)
+    expect(button.type).toBe('button')
+    expect(button.dataset.action).toBe('copy')
+    expect(button.getAttribute('aria-label')).toBe('Copy')
+    act(() =>
+      button.dispatchEvent(
+        new MouseEvent('pointerover', { bubbles: true, clientX: 200, clientY: 200 })
+      )
+    )
+    expect(document.querySelector('[role="tooltip"]')?.textContent).toBe('Copy output')
+    act(() => button.focus())
+    expect(document.activeElement).toBe(button)
+    const keyEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+    act(() => button.dispatchEvent(keyEvent))
+    expect(onKeyDown).toHaveBeenCalledTimes(1)
+    expect(onKeyDown.mock.calls[0][0].nativeEvent).toBe(keyEvent)
+    act(() => button.click())
+    expect(onClick).toHaveBeenCalledTimes(1)
+    act(() => root?.render(action(true)))
+    expect(button.disabled).toBe(true)
+    act(() => button.click())
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx b/packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx
new file mode 100644
index 00000000000..6a2f52fc4f0
--- /dev/null
+++ b/packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx
@@ -0,0 +1,49 @@
+import { forwardRef } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/cn'
+import { Button, type ButtonProps } from '../button/button'
+
+/** Transparent, bordered icon action over code or preview content. */
+export const overlayActionButtonVariants = cva(
+  'cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-5)] hover-hover:border-[var(--border)]',
+  {
+    variants: {
+      size: {
+        sm: 'size-[20px]',
+        md: 'size-[28px]',
+      },
+    },
+    defaultVariants: { size: 'sm' },
+  }
+)
+
+export interface OverlayActionButtonProps
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
+  /** Accessible name for the icon action; tooltip content is supplied separately. */
+  'aria-label': string
+  /** 20px by default; `md` provides the 28px preview action. */
+  size?: NonNullable<VariantProps<typeof overlayActionButtonVariants>['size']>
+}
+
+/**
+ * Icon action floating over content. Owns geometry, border, blur and hover treatment;
+ * callers supply positioning, icons, labels and command behavior.
+ * Hover uses surface-3 in light mode and surface-5 in dark mode.
+ * Forwards the native button ref and props for tooltip `asChild` composition.
+ * Native form behavior is inherited from Button; pass `type` when it must be explicit.
+ *
+ * @example <OverlayActionButton aria-label='Copy' type='button' onClick={onCopy}><Clipboard className='size-[10px]' /></OverlayActionButton>
+ */
+export const OverlayActionButton = forwardRef<HTMLButtonElement, OverlayActionButtonProps>(
+  ({ size, className, ...props }, ref) => (
+    <Button
+      {...props}
+      ref={ref}
+      variant='ghost'
+      size='md'
+      className={cn(overlayActionButtonVariants({ size }), className)}
+    />
+  )
+)
+
+OverlayActionButton.displayName = 'OverlayActionButton'
diff --git a/packages/emcn/src/index.ts b/packages/emcn/src/index.ts
index f89fbb7afd2..b93ac265881 100644
--- a/packages/emcn/src/index.ts
+++ b/packages/emcn/src/index.ts
@@ -15,6 +15,7 @@ export {
   CODE_LINE_HEIGHT_PX,
   Code,
   calculateGutterWidth,
+  codeViewerAppearanceVariants,
   getCodeEditorProps,
 } from './components/code/code'
 export {
diff --git a/packages/workflow-renderer/src/lib/code-hover-card.tsx b/packages/workflow-renderer/src/lib/code-hover-card.tsx
index afc74d47cd4..7ab3d35fb1a 100644
--- a/packages/workflow-renderer/src/lib/code-hover-card.tsx
+++ b/packages/workflow-renderer/src/lib/code-hover-card.tsx
@@ -181,7 +181,8 @@ export function CodeHoverCard({ preview, className, children }: CodeHoverCardPro
           density='compact'
           paddingLeft={8}
           highlightWorkflowReferences
-          className='max-h-[min(16rem,calc(100vh-2rem))] min-h-0 overflow-x-hidden rounded-none border-0 bg-[var(--bg)] shadow-none dark:bg-[var(--bg)]'
+          appearance='flat'
+          className='max-h-[min(16rem,calc(100vh-2rem))] min-h-0 overflow-x-hidden shadow-none'
         />
       </PopoverContent>
     </Popover>

From 4a3986bed6d6693b2d251bceb34c352fd35681a7 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com>
Date: Thu, 24 Sep 2026 15:20:35 -0700
Subject: [PATCH 06/10] improvement(ui): reuse shared button and focus
 treatments (#8187)

* improvement(ui): reuse shared button and focus treatments

* fix(emcn): include outline reset in muted focus ring
---
 .../message-container/message-container.tsx   |  3 ++-
 .../message/components/file-download.tsx      |  2 +-
 .../app/workspace/[workspaceId]/home/home.tsx |  4 ++--
 .../table-sidebar-header.tsx                  |  8 +++-----
 .../components/sidebar-row-actions.tsx        |  4 ++--
 .../src/components/button/button.test.tsx     | 20 +++++++++++++++++++
 .../emcn/src/components/button/button.tsx     |  7 ++++++-
 .../field-divider/field-divider.tsx           |  3 ++-
 .../emcn/src/components/slider/slider.tsx     |  8 +++++++-
 .../emcn/src/components/switch/switch.tsx     |  4 +++-
 packages/emcn/src/index.ts                    |  1 +
 packages/emcn/src/lib/focus-ring.ts           |  3 +++
 12 files changed, 52 insertions(+), 15 deletions(-)
 create mode 100644 packages/emcn/src/lib/focus-ring.ts

diff --git a/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx b/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
index 9a355614557..b9dd835af01 100644
--- a/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
@@ -72,7 +72,8 @@ export function ChatMessageContainer({
           <Button
             onClick={scrollToBottom}
             size='sm'
-            className='gap-1 rounded-full px-3 shadow-medium'
+            shape='round'
+            className='gap-1 px-3 shadow-medium'
           >
             <ArrowDown className='size-3.5' />
             <span className='sr-only'>Scroll to bottom</span>
diff --git a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
index 938ea3f2b3c..10a96947a0f 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
@@ -172,7 +172,7 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
         variant='default'
         onClick={handleDownload}
         disabled={isDownloading}
-        className='group flex h-auto w-[200px] gap-2 rounded-lg px-3 py-2'
+        className='group flex w-[200px] gap-2 rounded-lg px-3 py-2'
       >
         <div className='flex size-8 shrink-0 items-center justify-center'>{renderIcon()}</div>
         <div className='min-w-0 flex-1 text-left'>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index be6316624d4..882b972cfba 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -775,11 +775,11 @@ function HomeContent({ chatId, userName, userId }: HomeProps) {
         className={cn('z-30', RESOURCE_HEADER_CLASSES.overlay, RESOURCE_HEADER_CLASSES.endPosition)}
       >
         <Button
-          variant='ghost'
+          variant='quiet'
           size={null}
           type='button'
           onClick={isResourceCollapsed ? expandResource : collapseResource}
-          className="after:-translate-x-1/2 after:-translate-y-1/2 relative size-[var(--resource-header-toggle-size)] rounded-[8px] after:absolute after:top-1/2 after:left-1/2 after:size-[var(--resource-header-toggle-hit-size)] after:content-[''] hover-hover:bg-[var(--surface-active)]"
+          className="after:-translate-x-1/2 after:-translate-y-1/2 relative size-[var(--resource-header-toggle-size)] rounded-[8px] after:absolute after:top-1/2 after:left-1/2 after:size-[var(--resource-header-toggle-hit-size)] after:content-['']"
           aria-label={resourceToggleLabel}
         >
           <span className='relative'>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
index 87ca0356ea0..f51e9298a44 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
@@ -1,5 +1,5 @@
 import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
-import { Button, cn } from '@sim/emcn'
+import { Button } from '@sim/emcn'
 
 interface TableSidebarHeaderProps {
   children: ReactNode
@@ -28,10 +28,8 @@ export const TableSidebarHeaderAction = forwardRef<
     size='sm'
     iconSize='regular'
     iconPadding='sm'
-    className={cn(
-      'focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]',
-      className
-    )}
+    focusRing='muted'
+    className={className}
   />
 ))
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx
index f8faef2fac9..a993b0903ad 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx
@@ -1,5 +1,5 @@
 import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
-import { cn } from '@sim/emcn'
+import { cn, mutedFocusRingClass } from '@sim/emcn'
 
 interface SidebarRowActionsProps {
   children: ReactNode
@@ -62,7 +62,7 @@ export const SidebarRowAction = forwardRef<HTMLButtonElement, SidebarRowActionPr
       {...props}
       ref={ref}
       type='button'
-      className='flex size-[18px] items-center justify-center rounded-sm focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+      className={cn('flex size-[18px] items-center justify-center rounded-sm', mutedFocusRingClass)}
     />
   )
 )
diff --git a/packages/emcn/src/components/button/button.test.tsx b/packages/emcn/src/components/button/button.test.tsx
index 4c8cae79dc0..77132168d0d 100644
--- a/packages/emcn/src/components/button/button.test.tsx
+++ b/packages/emcn/src/components/button/button.test.tsx
@@ -107,6 +107,26 @@ describe('Button shared action geometry', () => {
     expect(baseOnly).not.toContain('sm:size')
   })
 
+  it('offers the existing muted keyboard ring without changing the default', () => {
+    const before = renderToStaticMarkup(
+      <Button
+        variant='ghost'
+        size='sm'
+        className='focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+      >
+        Open
+      </Button>
+    )
+    const after = renderToStaticMarkup(
+      <Button variant='ghost' size='sm' focusRing='muted'>
+        Open
+      </Button>
+    )
+    expect(normalizeClasses(after)).toBe(normalizeClasses(before))
+    expect(after).not.toContain('focusRing=')
+    expect(renderToStaticMarkup(<Button>Open</Button>)).not.toContain('focus-visible:ring-2')
+  })
+
   it('forwards refs and native focus, submission and disabled behavior with responsive sizing', () => {
     const container = document.createElement('div')
     document.body.appendChild(container)
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index cc93c956b25..cb919931304 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -1,6 +1,7 @@
 import { type ButtonHTMLAttributes, forwardRef } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
+import { mutedFocusRingClass } from '../../lib/focus-ring'
 
 /**
  * `size='icon'` is the square 20px icon-only button — a chip field's trailing
@@ -61,6 +62,9 @@ const buttonVariants = cva(
       shape: {
         round: 'rounded-full',
       },
+      focusRing: {
+        muted: mutedFocusRingClass,
+      },
       iconPadding: {
         sm: 'p-1',
         md: 'p-1.5',
@@ -118,7 +122,7 @@ export interface ButtonProps
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, iconSize, iconPadding, shape, ...props }, ref) => {
+  ({ className, variant, size, iconSize, iconPadding, shape, focusRing, ...props }, ref) => {
     const baseIconSize = typeof iconSize === 'object' ? iconSize?.base : iconSize
     const smIconSize = typeof iconSize === 'object' ? iconSize?.sm : undefined
     return (
@@ -131,6 +135,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             iconSize: baseIconSize,
             iconPadding,
             shape,
+            focusRing,
           }),
           smIconSize && responsiveIconSizes[smIconSize],
           className
diff --git a/packages/emcn/src/components/field-divider/field-divider.tsx b/packages/emcn/src/components/field-divider/field-divider.tsx
index 4b15d867f80..9e11f4b5a10 100644
--- a/packages/emcn/src/components/field-divider/field-divider.tsx
+++ b/packages/emcn/src/components/field-divider/field-divider.tsx
@@ -79,8 +79,9 @@ function FieldDisclosure({ expanded, children, ...props }: FieldDisclosureProps)
         type='button'
         variant='ghost'
         size={null}
+        focusRing='muted'
         aria-expanded={expanded}
-        className='gap-1.5 whitespace-nowrap p-0 text-small focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+        className='gap-1.5 whitespace-nowrap p-0 text-small'
       >
         {children}
         <ChevronDown
diff --git a/packages/emcn/src/components/slider/slider.tsx b/packages/emcn/src/components/slider/slider.tsx
index 7dd386a0599..b3c1b313889 100644
--- a/packages/emcn/src/components/slider/slider.tsx
+++ b/packages/emcn/src/components/slider/slider.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react'
 import * as SliderPrimitive from '@radix-ui/react-slider'
 import { cn } from '../../lib/cn'
+import { mutedFocusRingClass } from '../../lib/focus-ring'
 
 interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {}
 
@@ -30,7 +31,12 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       <SliderPrimitive.Track className='relative h-[6px] w-full grow overflow-hidden rounded-[20px] bg-[var(--border-1)] transition-colors'>
         <SliderPrimitive.Range className='absolute h-full bg-[var(--text-primary)]' />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className='relative block size-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-xs transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]' />
+      <SliderPrimitive.Thumb
+        className={cn(
+          'relative block size-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-xs transition-colors before:absolute before:inset-[-15px] before:content-[""]',
+          mutedFocusRingClass
+        )}
+      />
     </SliderPrimitive.Root>
   )
 )
diff --git a/packages/emcn/src/components/switch/switch.tsx b/packages/emcn/src/components/switch/switch.tsx
index 1d5b0c8be9c..ed8e455e9f4 100644
--- a/packages/emcn/src/components/switch/switch.tsx
+++ b/packages/emcn/src/components/switch/switch.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react'
 import * as SwitchPrimitives from '@radix-ui/react-switch'
 import { cn } from '../../lib/cn'
+import { mutedFocusRingClass } from '../../lib/focus-ring'
 
 /**
  * Switch component styled to match Sim's design system.
@@ -16,7 +17,8 @@ const Switch = React.memo(
     <SwitchPrimitives.Root
       disabled={disabled}
       className={cn(
-        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        mutedFocusRingClass,
         className
       )}
       {...props}
diff --git a/packages/emcn/src/index.ts b/packages/emcn/src/index.ts
index b93ac265881..1bab126444f 100644
--- a/packages/emcn/src/index.ts
+++ b/packages/emcn/src/index.ts
@@ -53,5 +53,6 @@ export { usePrefersReducedMotion } from './hooks/use-prefers-reduced-motion'
 export { useScrollEdges } from './hooks/use-scroll-edges'
 export * from './icons'
 export { cn } from './lib/cn'
+export { mutedFocusRingClass } from './lib/focus-ring'
 export { handleKeyboardActivation, isKeyboardActivation } from './lib/keyboard'
 export { bindPreviewHorizontalWheel, bindPreviewWheelZoom } from './lib/preview-wheel-zoom'
diff --git a/packages/emcn/src/lib/focus-ring.ts b/packages/emcn/src/lib/focus-ring.ts
new file mode 100644
index 00000000000..b9e02a74dd2
--- /dev/null
+++ b/packages/emcn/src/lib/focus-ring.ts
@@ -0,0 +1,3 @@
+/** Opt-in ring for controls on `--surface-2`; ordinary Button focus remains unchanged. */
+export const mutedFocusRingClass =
+  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'

From 084ce5afd717c1202a947c2a37da92a0443fa11a Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Thu, 24 Sep 2026 15:55:34 -0700
Subject: [PATCH 07/10] fix(ui): make closed table sidebars inert and
 strengthen focus ring

---
 .../components/table-sidebar-layout.test.tsx  |  3 ++
 .../components/table-sidebar-layout.tsx       |  1 +
 .../src/components/button/button.test.tsx     |  4 +-
 .../overlay-action-button.test.tsx            | 46 ++++++++++---------
 .../overlay-action-button.tsx                 |  2 +-
 packages/emcn/src/lib/focus-ring.ts           |  2 +-
 6 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx
index a9b03496744..b1f0a09b495 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx
@@ -45,6 +45,7 @@ describe('table sidebar layout', () => {
     expect(dialog.getAttribute('aria-label')).toBe('Configure workflow')
     expect(dialog.classList.contains('translate-x-0')).toBe(true)
     expect(dialog.classList.contains('shadow-overlay')).toBe(true)
+    expect(dialog.hasAttribute('inert')).toBe(false)
 
     input.value = 'Edited workflow'
     scrollBody.scrollTop = 64
@@ -56,9 +57,11 @@ describe('table sidebar layout', () => {
     expect(scrollBody.scrollTop).toBe(64)
     expect(dialog.classList.contains('translate-x-full')).toBe(true)
     expect(dialog.classList.contains('shadow-overlay')).toBe(false)
+    expect(dialog.hasAttribute('inert')).toBe(true)
 
     render(true)
     expect(dialog.classList.contains('translate-x-0')).toBe(true)
+    expect(dialog.hasAttribute('inert')).toBe(false)
     expect(input.value).toBe('Edited workflow')
     expect(scrollBody.scrollTop).toBe(64)
   })
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx
index 7315df41c52..728d6e4c410 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx
@@ -17,6 +17,7 @@ export function TableSidebarShell({
     <aside
       role='dialog'
       aria-label={ariaLabel}
+      inert={!open}
       className={cn(
         'absolute top-0 right-0 bottom-0 z-[var(--z-modal)] flex w-[400px] flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)] transition-transform duration-200 ease-out',
         open ? 'translate-x-0 shadow-overlay' : 'translate-x-full'
diff --git a/packages/emcn/src/components/button/button.test.tsx b/packages/emcn/src/components/button/button.test.tsx
index 77132168d0d..5761c2852c2 100644
--- a/packages/emcn/src/components/button/button.test.tsx
+++ b/packages/emcn/src/components/button/button.test.tsx
@@ -107,12 +107,12 @@ describe('Button shared action geometry', () => {
     expect(baseOnly).not.toContain('sm:size')
   })
 
-  it('offers the existing muted keyboard ring without changing the default', () => {
+  it('offers the shared keyboard ring without changing the default', () => {
     const before = renderToStaticMarkup(
       <Button
         variant='ghost'
         size='sm'
-        className='focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+        className='focus-visible:ring-2 focus-visible:ring-[var(--text-icon)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
       >
         Open
       </Button>
diff --git a/packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx b/packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx
index cd1ecca1876..1ddbac6fd41 100644
--- a/packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx
+++ b/packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx
@@ -43,28 +43,32 @@ const PREVIOUS = [
 ] as const
 
 describe('OverlayActionButton', () => {
-  it.each(PREVIOUS)('preserves the previous $name markup', ({ props, variant, className }) => {
-    const view = mount(
-      <>
-        <Button variant={variant} aria-label='Copy' className={`${className} shrink-0`}>
-          <svg className='size-[10px]' aria-hidden='true' />
-        </Button>
-        <OverlayActionButton {...props} aria-label='Copy' className='shrink-0'>
-          <svg className='size-[10px]' aria-hidden='true' />
-        </OverlayActionButton>
-      </>
-    )
-    const [previous, current] = view.querySelectorAll('button')
-    /** The old border-1 token aliases border; class order changes when recipes are composed. */
-    for (const button of [previous, current]) {
-      button.className = button.className
-        .replaceAll('--border-1', '--border')
-        .split(/\s+/)
-        .sort()
-        .join(' ')
+  it.each(PREVIOUS)(
+    'preserves the previous $name visual treatment',
+    ({ props, variant, className }) => {
+      const view = mount(
+        <>
+          <Button variant={variant} aria-label='Copy' className={`${className} shrink-0`}>
+            <svg className='size-[10px]' aria-hidden='true' />
+          </Button>
+          <OverlayActionButton {...props} aria-label='Copy' className='shrink-0'>
+            <svg className='size-[10px]' aria-hidden='true' />
+          </OverlayActionButton>
+        </>
+      )
+      const [previous, current] = view.querySelectorAll('button')
+      /** The old border-1 token aliases border; its hover border repeats the resting border. */
+      for (const button of [previous, current]) {
+        button.className = button.className
+          .replaceAll('--border-1', '--border')
+          .split(/\s+/)
+          .filter((token) => token !== 'hover-hover:border-[var(--border)]')
+          .sort()
+          .join(' ')
+      }
+      expect(current.outerHTML).toBe(previous.outerHTML)
     }
-    expect(current.outerHTML).toBe(previous.outerHTML)
-  })
+  )
 
   it('forwards refs and native props through a tooltip and suppresses disabled clicks', () => {
     vi.useFakeTimers()
diff --git a/packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx b/packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx
index 6a2f52fc4f0..fd82dbcdab6 100644
--- a/packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx
+++ b/packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx
@@ -5,7 +5,7 @@ import { Button, type ButtonProps } from '../button/button'
 
 /** Transparent, bordered icon action over code or preview content. */
 export const overlayActionButtonVariants = cva(
-  'cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-5)] hover-hover:border-[var(--border)]',
+  'cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-5)]',
   {
     variants: {
       size: {
diff --git a/packages/emcn/src/lib/focus-ring.ts b/packages/emcn/src/lib/focus-ring.ts
index b9e02a74dd2..1e4cad1543c 100644
--- a/packages/emcn/src/lib/focus-ring.ts
+++ b/packages/emcn/src/lib/focus-ring.ts
@@ -1,3 +1,3 @@
 /** Opt-in ring for controls on `--surface-2`; ordinary Button focus remains unchanged. */
 export const mutedFocusRingClass =
-  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--text-icon)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'

From bb028dd6a9f3f3c8e3831db460563f67e1a6f92f Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com>
Date: Thu, 24 Sep 2026 16:11:04 -0700
Subject: [PATCH 08/10] Carry code search overlay into the live EMCN stack
 (#8275)

* refactor(ui): share code search overlay controls

* refactor(emcn): own compact code search field chrome

* test(ui): cover floating compact code search

* refactor(emcn): compose compact search from shared chip surface

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
---
 .../code-search-overlay.test.tsx              | 154 ++++++++++++++++++
 .../code-search-overlay.tsx                   |  98 +++++++++++
 .../components/trace-view/trace-view.tsx      |  72 ++------
 .../components/log-details/log-details.tsx    |  64 ++------
 .../components/output-panel/output-panel.tsx  |  69 ++------
 .../preview-editor/preview-editor.tsx         |  58 ++-----
 .../src/components/chip-input/chip-input.tsx  |  34 +++-
 packages/emcn/src/components/index.ts         |   2 +-
 8 files changed, 336 insertions(+), 215 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx
new file mode 100644
index 00000000000..49505d3a9d5
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx
@@ -0,0 +1,154 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, createRef } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  CodeSearchOverlay,
+  type CodeSearchOverlayProps,
+} from '@/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay'
+
+let host: HTMLDivElement
+let root: Root
+const inputRef = createRef<HTMLInputElement>()
+
+const callbacks = {
+  onQueryChange: vi.fn(),
+  onPrevious: vi.fn(),
+  onNext: vi.fn(),
+  onClose: vi.fn(),
+}
+const parentClick = vi.fn()
+
+function renderOverlay(props: Partial<CodeSearchOverlayProps> = {}) {
+  act(() =>
+    root.render(
+      <div onClick={parentClick}>
+        <CodeSearchOverlay
+          className='top-0 right-0'
+          inputKind='chip'
+          inputRef={inputRef}
+          query='error'
+          matchCount={3}
+          currentMatchIndex={1}
+          {...callbacks}
+          {...props}
+        />
+      </div>
+    )
+  )
+  const overlay = host.firstElementChild?.firstElementChild as HTMLDivElement
+  const input = overlay.querySelector('input') as HTMLInputElement
+  return { overlay, input }
+}
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.clearAllMocks()
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+})
+
+describe('CodeSearchOverlay', () => {
+  it('shares the floating chrome and routes query, navigation, and close actions', () => {
+    const { overlay, input } = renderOverlay()
+    expect(overlay.className).toContain('h-[34px]')
+    expect(overlay.className).toContain('rounded-sm bg-[var(--surface-1)]')
+    expect(overlay.className).toContain('top-0 right-0')
+    expect(overlay.getAttribute('role')).toBe('presentation')
+    expect(inputRef.current).toBe(input)
+    expect(input.getAttribute('aria-label')).toBe('Search code')
+    expect(input.value).toBe('error')
+    expect(overlay.textContent).toContain('2/3')
+
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+    act(() => {
+      setter?.call(input, 'failed')
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+    expect(callbacks.onQueryChange).toHaveBeenCalledWith('failed')
+    act(() => {
+      overlay.querySelector<HTMLButtonElement>('[aria-label="Previous match"]')?.click()
+      overlay.querySelector<HTMLButtonElement>('[aria-label="Next match"]')?.click()
+      overlay.querySelector<HTMLButtonElement>('[aria-label="Close search"]')?.click()
+    })
+    expect(callbacks.onPrevious).toHaveBeenCalledTimes(1)
+    expect(callbacks.onNext).toHaveBeenCalledTimes(1)
+    expect(callbacks.onClose).toHaveBeenCalledTimes(1)
+    expect(parentClick).not.toHaveBeenCalled()
+  })
+
+  it('keeps preview search compact in a floating overlay with a usable input ref', () => {
+    const { overlay, input } = renderOverlay({
+      inputKind: 'plain',
+      className: 'top-10 right-[8px]',
+    })
+    expect(overlay.getAttribute('role')).toBe('presentation')
+    expect(overlay.className).toContain('top-10 right-[8px]')
+    expect(overlay.hasAttribute('data-toolbar-root')).toBe(false)
+    expect(input.parentElement?.className).toContain('h-[23px]')
+    expect(inputRef.current).toBe(input)
+
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+    act(() => {
+      setter?.call(input, 'preview')
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      overlay.querySelector<HTMLButtonElement>('[aria-label="Next match"]')?.click()
+    })
+    expect(callbacks.onQueryChange).toHaveBeenCalledWith('preview')
+    expect(callbacks.onNext).toHaveBeenCalledTimes(1)
+    expect(parentClick).not.toHaveBeenCalled()
+  })
+
+  it('retains the attached terminal edge, marker, wider tally, and disabled navigation', () => {
+    const { overlay, input } = renderOverlay({
+      appearance: 'attached',
+      inputKind: 'plain',
+      className: 'top-[30px] right-[8px]',
+      query: '',
+      matchCount: 0,
+      currentMatchIndex: 0,
+    })
+    expect(overlay.className).toContain('rounded-b-[4px] border-t-0 bg-[var(--bg)]')
+    expect(overlay.getAttribute('data-toolbar-root')).toBe('true')
+    expect(overlay.getAttribute('data-search-active')).toBe('true')
+    expect(overlay.hasAttribute('role')).toBe(false)
+    expect(input.parentElement?.className).toContain('h-[23px]')
+    expect(input.parentElement?.className).toContain('w-[94px]')
+    expect(input.className).toContain('text-caption')
+    expect(overlay.textContent).toContain('No results')
+    expect(overlay.querySelector('span.w-\\[58px\\]')).not.toBeNull()
+    const previous = overlay.querySelector<HTMLButtonElement>('[aria-label="Previous match"]')
+    const next = overlay.querySelector<HTMLButtonElement>('[aria-label="Next match"]')
+    const close = overlay.querySelector<HTMLButtonElement>('[aria-label="Close search"]')
+    expect(previous?.disabled).toBe(true)
+    expect(next?.disabled).toBe(true)
+    expect(close?.disabled).toBe(false)
+    expect(previous?.className).toContain('-m-1.5')
+    expect(previous?.querySelector('svg')?.getAttribute('class')).toContain('size-[14px]')
+    act(() => {
+      previous?.click()
+      next?.click()
+      close?.click()
+    })
+    expect(callbacks.onPrevious).not.toHaveBeenCalled()
+    expect(callbacks.onNext).not.toHaveBeenCalled()
+    expect(callbacks.onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows the compact no-results tally for other code panels', () => {
+    const { overlay } = renderOverlay({ matchCount: 0, currentMatchIndex: 0 })
+    expect(overlay.textContent).toContain('0/0')
+    expect(overlay.getAttribute('data-toolbar-root')).toBeNull()
+    expect(
+      overlay.querySelector<HTMLButtonElement>('[aria-label="Previous match"]')?.disabled
+    ).toBe(true)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx
new file mode 100644
index 00000000000..5c741d1b300
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx
@@ -0,0 +1,98 @@
+import type { ChangeEvent, Ref } from 'react'
+import { Button, ChipInput, cn } from '@sim/emcn'
+import { ArrowDown, ArrowUp, X } from '@sim/emcn/icons'
+
+export interface CodeSearchOverlayProps {
+  /** The attached terminal panel has a joined lower edge and wider result tally. */
+  appearance?: 'floating' | 'attached'
+  /** Position relative to the owning code panel. */
+  className: string
+  /** Logs use the 30px chip field; previews and terminal output use compact search. */
+  inputKind: 'chip' | 'plain'
+  inputRef: Ref<HTMLInputElement>
+  query: string
+  onQueryChange: (query: string) => void
+  matchCount: number
+  currentMatchIndex: number
+  onPrevious: () => void
+  onNext: () => void
+  onClose: () => void
+}
+
+/** Shared controls for searching a Code.Viewer without owning its search state. */
+export function CodeSearchOverlay({
+  appearance = 'floating',
+  className,
+  inputKind,
+  inputRef,
+  query,
+  onQueryChange,
+  matchCount,
+  currentMatchIndex,
+  onPrevious,
+  onNext,
+  onClose,
+}: CodeSearchOverlayProps) {
+  const attached = appearance === 'attached'
+  const inputProps = {
+    ref: inputRef,
+    type: 'text',
+    value: query,
+    onChange: (event: ChangeEvent<HTMLInputElement>) => onQueryChange(event.target.value),
+    placeholder: 'Search...',
+    'aria-label': 'Search code',
+  } as const
+  const actionProps = {
+    type: 'button' as const,
+    variant: 'ghost' as const,
+    iconPadding: attached ? ('md' as const) : ('sm' as const),
+    className: attached ? '-m-1.5' : undefined,
+  }
+  const iconClass = attached ? 'size-[14px]' : 'size-[12px]'
+
+  return (
+    <div
+      role={attached ? undefined : 'presentation'}
+      className={cn(
+        'absolute z-30 flex h-[34px] items-center gap-1.5 border border-[var(--border)] px-1.5 shadow-xs',
+        attached ? 'rounded-b-[4px] border-t-0 bg-[var(--bg)]' : 'rounded-sm bg-[var(--surface-1)]',
+        className
+      )}
+      onClick={(event) => event.stopPropagation()}
+      data-toolbar-root={attached ? true : undefined}
+      data-search-active={attached ? true : undefined}
+    >
+      {inputKind === 'chip' ? (
+        <ChipInput {...inputProps} className='mr-0.5 w-[94px]' />
+      ) : (
+        <ChipInput {...inputProps} appearance='compactSearch' className='mr-0.5 w-[94px]' />
+      )}
+      <span
+        className={cn(
+          attached ? 'w-[58px] text-xs' : 'min-w-[45px] text-center text-xs',
+          matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
+        )}
+      >
+        {matchCount > 0
+          ? `${currentMatchIndex + 1}/${matchCount}`
+          : attached
+            ? 'No results'
+            : '0/0'}
+      </span>
+      <Button
+        {...actionProps}
+        onClick={onPrevious}
+        disabled={matchCount === 0}
+        aria-label='Previous match'
+      >
+        <ArrowUp className={iconClass} />
+      </Button>
+      <Button {...actionProps} onClick={onNext} disabled={matchCount === 0} aria-label='Next match'>
+        <ArrowDown className={iconClass} />
+      </Button>
+      <Button {...actionProps} onClick={onClose} aria-label='Close search'>
+        <X className={iconClass} />
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
index b9ae284b385..eab5ed975ac 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
@@ -20,19 +20,11 @@ import {
   Tooltip,
   useCopyToClipboard,
 } from '@sim/emcn'
-import {
-  ArrowDown,
-  ArrowUp,
-  Check,
-  ChevronsDownUp,
-  ChevronsUpDown,
-  Clipboard,
-  Search,
-  X,
-} from '@sim/emcn/icons'
+import { Check, ChevronsDownUp, ChevronsUpDown, Clipboard, Search } from '@sim/emcn/icons'
 import { formatDuration } from '@sim/utils/formatting'
 import { createPortal } from 'react-dom'
 import type { TraceSpan } from '@/lib/logs/types'
+import { CodeSearchOverlay } from '@/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay'
 import {
   adjustBgForContrast,
   formatCostAmount,
@@ -542,54 +534,18 @@ function DetailCodeSection({
             )}
           </div>
           {isSearchActive && (
-            <div
-              role='presentation'
-              className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-xs'
-              onClick={(e) => e.stopPropagation()}
-            >
-              <ChipInput
-                ref={searchInputRef}
-                type='text'
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder='Search...'
-                className='mr-0.5 w-[94px]'
-              />
-              <span
-                className={cn(
-                  'min-w-[45px] text-center text-xs',
-                  matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-                )}
-              >
-                {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
-              </span>
-              <Button
-                variant='ghost'
-                iconPadding='sm'
-                onClick={goToPreviousMatch}
-                disabled={matchCount === 0}
-                aria-label='Previous match'
-              >
-                <ArrowUp className='size-[12px]' />
-              </Button>
-              <Button
-                variant='ghost'
-                iconPadding='sm'
-                onClick={goToNextMatch}
-                disabled={matchCount === 0}
-                aria-label='Next match'
-              >
-                <ArrowDown className='size-[12px]' />
-              </Button>
-              <Button
-                variant='ghost'
-                iconPadding='sm'
-                onClick={closeSearch}
-                aria-label='Close search'
-              >
-                <X className='size-[12px]' />
-              </Button>
-            </div>
+            <CodeSearchOverlay
+              className='top-0 right-0'
+              inputKind='chip'
+              inputRef={searchInputRef}
+              query={searchQuery}
+              onQueryChange={setSearchQuery}
+              matchCount={matchCount}
+              currentMatchIndex={currentMatchIndex}
+              onPrevious={goToPreviousMatch}
+              onNext={goToNextMatch}
+              onClose={closeSearch}
+            />
           )}
           {typeof document !== 'undefined' &&
             createPortal(
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
index 59164f6d861..dc169dd44f5 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -15,7 +15,6 @@ import {
   Badge,
   Button,
   Chip,
-  ChipInput,
   ChipModalTabs,
   Code,
   cn,
@@ -35,8 +34,6 @@ import {
   useCopyToClipboard,
 } from '@sim/emcn'
 import {
-  ArrowDown,
-  ArrowUp,
   Check,
   ChevronUp,
   Clipboard,
@@ -60,6 +57,7 @@ import { filterHiddenOutputKeys } from '@/lib/logs/execution/trace-spans/trace-s
 import type { TraceSpan } from '@/lib/logs/types'
 import { sendMothershipMessage } from '@/lib/mothership/events'
 import { DELETED_WORKFLOW_LABEL } from '@/lib/workflows/workflow-labels'
+import { CodeSearchOverlay } from '@/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay'
 /**
  * Deep imports on purpose: importing these back through the parent `logs/components`
  * barrel forms a parent->child cycle that would keep the barrel edge to the snapshot
@@ -209,54 +207,18 @@ export const WorkflowOutputSection = memo(
 
         {/* Search Overlay */}
         {isSearchActive && (
-          <div
-            role='presentation'
-            className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-xs'
-            onClick={(e) => e.stopPropagation()}
-          >
-            <ChipInput
-              ref={searchInputRef}
-              type='text'
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder='Search...'
-              className='mr-0.5 w-[94px]'
-            />
-            <span
-              className={cn(
-                'min-w-[45px] text-center text-xs',
-                matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-              )}
-            >
-              {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
-            </span>
-            <Button
-              variant='ghost'
-              iconPadding='sm'
-              onClick={goToPreviousMatch}
-              disabled={matchCount === 0}
-              aria-label='Previous match'
-            >
-              <ArrowUp className='size-[12px]' />
-            </Button>
-            <Button
-              variant='ghost'
-              iconPadding='sm'
-              onClick={goToNextMatch}
-              disabled={matchCount === 0}
-              aria-label='Next match'
-            >
-              <ArrowDown className='size-[12px]' />
-            </Button>
-            <Button
-              variant='ghost'
-              iconPadding='sm'
-              onClick={closeSearch}
-              aria-label='Close search'
-            >
-              <X className='size-[12px]' />
-            </Button>
-          </div>
+          <CodeSearchOverlay
+            className='top-0 right-0'
+            inputKind='chip'
+            inputRef={searchInputRef}
+            query={searchQuery}
+            onQueryChange={setSearchQuery}
+            matchCount={matchCount}
+            currentMatchIndex={currentMatchIndex}
+            onPrevious={goToPreviousMatch}
+            onNext={goToNextMatch}
+            onClose={closeSearch}
+          />
         )}
 
         {/* Context Menu - rendered in portal to avoid transform/overflow clipping */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index daa24590d8e..743a822da77 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -5,7 +5,6 @@ import {
   Button,
   Code,
   cn,
-  Input,
   Popover,
   PopoverContent,
   PopoverItem,
@@ -13,8 +12,6 @@ import {
   Tooltip,
 } from '@sim/emcn'
 import {
-  ArrowDown,
-  ArrowUp,
   Check,
   Clipboard,
   Download,
@@ -26,6 +23,7 @@ import {
 } from '@sim/emcn/icons'
 import Link from 'next/link'
 import { AgentStreamThinkingChrome } from '@/components/agent-stream/agent-stream-chrome'
+import { CodeSearchOverlay } from '@/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay'
 import {
   OutputContextMenu,
   StructuredOutput,
@@ -493,58 +491,19 @@ export const OutputPanel = React.memo(function OutputPanel({
 
         {/* Search Overlay */}
         {isOutputSearchActive && (
-          <div
-            className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--bg)] px-1.5 shadow-xs'
-            onClick={(e) => e.stopPropagation()}
-            data-toolbar-root
-            data-search-active='true'
-          >
-            <Input
-              ref={outputSearchInputRef}
-              type='text'
-              value={outputSearchQuery}
-              onChange={(e) => setOutputSearchQuery(e.target.value)}
-              placeholder='Search...'
-              className='mr-0.5 h-[23px] w-[94px] text-caption'
-            />
-            <span
-              className={cn(
-                'w-[58px] text-xs',
-                matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-              )}
-            >
-              {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : 'No results'}
-            </span>
-            <Button
-              variant='ghost'
-              onClick={goToPreviousMatch}
-              aria-label='Previous match'
-              iconPadding='md'
-              className='-m-1.5'
-              disabled={matchCount === 0}
-            >
-              <ArrowUp className='size-[14px]' />
-            </Button>
-            <Button
-              variant='ghost'
-              onClick={goToNextMatch}
-              aria-label='Next match'
-              iconPadding='md'
-              className='-m-1.5'
-              disabled={matchCount === 0}
-            >
-              <ArrowDown className='size-[14px]' />
-            </Button>
-            <Button
-              variant='ghost'
-              onClick={closeOutputSearch}
-              aria-label='Close search'
-              iconPadding='md'
-              className='-m-1.5'
-            >
-              <X className='size-[14px]' />
-            </Button>
-          </div>
+          <CodeSearchOverlay
+            appearance='attached'
+            className='top-[30px] right-[8px]'
+            inputKind='plain'
+            inputRef={outputSearchInputRef}
+            query={outputSearchQuery}
+            onQueryChange={setOutputSearchQuery}
+            matchCount={matchCount}
+            currentMatchIndex={currentMatchIndex}
+            onPrevious={goToPreviousMatch}
+            onNext={goToNextMatch}
+            onClose={closeOutputSearch}
+          />
         )}
 
         {/* Content */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index bba86b895e8..debd78b8257 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -16,8 +16,6 @@ import {
   Tooltip,
 } from '@sim/emcn'
 import {
-  ArrowDown,
-  ArrowUp,
   Check,
   ChevronDown,
   ChevronUp,
@@ -41,6 +39,7 @@ import {
   isToolInputOnlySubBlock,
 } from '@/lib/workflows/subblocks/visibility'
 import { DELETED_WORKFLOW_LABEL } from '@/lib/workflows/workflow-labels'
+import { CodeSearchOverlay } from '@/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay'
 import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components'
 import { PreviewContextMenu } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-context-menu'
 import { READONLY_PREVIEW_STYLES } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles'
@@ -1454,49 +1453,18 @@ function PreviewEditorContent({
 
       {/* Search Overlay */}
       {isSearchActive && (
-        <div
-          role='presentation'
-          className='absolute top-10 right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-xs'
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Input
-            ref={searchInputRef}
-            type='text'
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder='Search...'
-            className='mr-0.5 h-[23px] w-[94px] text-caption'
-          />
-          <span
-            className={cn(
-              'min-w-[45px] text-center text-xs',
-              matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-            )}
-          >
-            {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
-          </span>
-          <Button
-            variant='ghost'
-            iconPadding='sm'
-            onClick={goToPreviousMatch}
-            disabled={matchCount === 0}
-            aria-label='Previous match'
-          >
-            <ArrowUp className='size-[12px]' />
-          </Button>
-          <Button
-            variant='ghost'
-            iconPadding='sm'
-            onClick={goToNextMatch}
-            disabled={matchCount === 0}
-            aria-label='Next match'
-          >
-            <ArrowDown className='size-[12px]' />
-          </Button>
-          <Button variant='ghost' iconPadding='sm' onClick={closeSearch} aria-label='Close search'>
-            <X className='size-[12px]' />
-          </Button>
-        </div>
+        <CodeSearchOverlay
+          className='top-10 right-[8px]'
+          inputKind='plain'
+          inputRef={searchInputRef}
+          query={searchQuery}
+          onQueryChange={setSearchQuery}
+          matchCount={matchCount}
+          currentMatchIndex={currentMatchIndex}
+          onPrevious={goToPreviousMatch}
+          onNext={goToNextMatch}
+          onClose={closeSearch}
+        />
       )}
 
       {/* Context Menu */}
diff --git a/packages/emcn/src/components/chip-input/chip-input.tsx b/packages/emcn/src/components/chip-input/chip-input.tsx
index 444cbb1704a..78aef8658b9 100644
--- a/packages/emcn/src/components/chip-input/chip-input.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.tsx
@@ -14,6 +14,8 @@
  * same 1.5 gap as `Chip`. It shares the chip-field chrome with
  * {@link ChipTextarea}, shows no focus ring — keep the surface calm and rely on
  * the caret for focus. Pass `error` to swap the border to the error token.
+ * `appearance='compactSearch'` owns the existing 23px code-search field
+ * treatment without changing the 30px chip default.
  *
  * @example
  * ```tsx
@@ -27,12 +29,28 @@
  * ```
  */
 import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
 import { chipFieldSurfaceClass, chipFieldTextClass, chipGeometryClass } from '../chip/chip-chrome'
 
 type ChipInputIcon = React.ComponentType<{ className?: string }>
 
-export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+/** The compact search field keeps the existing code-viewer input geometry. */
+export const chipInputVariants = cva('', {
+  variants: {
+    appearance: {
+      chip: '',
+      compactSearch: `${chipFieldSurfaceClass} h-[23px] items-center rounded-sm px-2 dark:bg-[var(--surface-5)]`,
+    },
+  },
+  defaultVariants: { appearance: 'chip' },
+})
+
+export interface ChipInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof chipInputVariants> {
+  /** The default chip field or the compact code-search field. */
+  appearance?: VariantProps<typeof chipInputVariants>['appearance']
   /** Leading icon component (e.g. `Search` from `@sim/emcn/icons`). Rendered at 14px in `--text-icon`, with the chip's 1.5 gap. */
   icon?: ChipInputIcon
   /** Custom leading content, such as a color swatch. Takes precedence over `icon`. */
@@ -54,6 +72,7 @@ export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
 export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
   (
     {
+      appearance = 'chip',
       className,
       inputClassName,
       icon: Icon,
@@ -69,8 +88,9 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
     <div
       className={cn(
         'flex w-full',
-        chipGeometryClass,
-        chipFieldSurfaceClass,
+        appearance === 'chip' && chipGeometryClass,
+        appearance === 'chip' && chipFieldSurfaceClass,
+        chipInputVariants({ appearance }),
         error && 'border-[var(--text-error)]',
         disabled && 'opacity-50',
         className
@@ -83,8 +103,12 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
         type={type}
         disabled={disabled}
         className={cn(
-          '-ml-1 h-full w-full bg-transparent indent-1 disabled:cursor-not-allowed',
-          chipFieldTextClass,
+          appearance === 'compactSearch'
+            ? 'h-full w-full touch-manipulation scroll-pr-1 bg-transparent font-sans text-[var(--text-primary)] text-caption outline-hidden [letter-spacing:inherit] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed'
+            : cn(
+                '-ml-1 h-full w-full bg-transparent indent-1 disabled:cursor-not-allowed',
+                chipFieldTextClass
+              ),
           inputClassName
         )}
         {...props}
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 2436b32f65d..28da4499541 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -64,7 +64,7 @@ export {
   ChipEmailsInput,
   type ChipEmailsInputProps,
 } from './chip-emails-input/chip-emails-input'
-export { ChipInput, type ChipInputProps } from './chip-input/chip-input'
+export { ChipInput, type ChipInputProps, chipInputVariants } from './chip-input/chip-input'
 export {
   type ChipConfirmAction,
   type ChipConfirmDefaultAction,

From cc2699ef523d5dcb863dd0857e05f741c6663418 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Thu, 24 Sep 2026 16:20:35 -0700
Subject: [PATCH 09/10] fix(ui): announce code search result changes

---
 .../code-search-overlay/code-search-overlay.test.tsx         | 5 +++++
 .../components/code-search-overlay/code-search-overlay.tsx   | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx
index 49505d3a9d5..a3b16c21c7f 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx
@@ -67,6 +67,8 @@ describe('CodeSearchOverlay', () => {
     expect(input.getAttribute('aria-label')).toBe('Search code')
     expect(input.value).toBe('error')
     expect(overlay.textContent).toContain('2/3')
+    const tally = overlay.querySelector('[aria-live="polite"][aria-atomic="true"]')
+    expect(tally?.textContent).toBe('2/3')
 
     const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
     act(() => {
@@ -83,6 +85,9 @@ describe('CodeSearchOverlay', () => {
     expect(callbacks.onNext).toHaveBeenCalledTimes(1)
     expect(callbacks.onClose).toHaveBeenCalledTimes(1)
     expect(parentClick).not.toHaveBeenCalled()
+
+    renderOverlay({ matchCount: 0, currentMatchIndex: 0 })
+    expect(tally?.textContent).toBe('0/0')
   })
 
   it('keeps preview search compact in a floating overlay with a usable input ref', () => {
diff --git a/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx
index 5c741d1b300..19247f1dfc7 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx
@@ -68,6 +68,8 @@ export function CodeSearchOverlay({
         <ChipInput {...inputProps} appearance='compactSearch' className='mr-0.5 w-[94px]' />
       )}
       <span
+        aria-live='polite'
+        aria-atomic='true'
         className={cn(
           attached ? 'w-[58px] text-xs' : 'min-w-[45px] text-center text-xs',
           matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'

From 9c29e806e2899c053008c5c4968954c8cb4f4070 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Thu, 24 Sep 2026 16:25:20 -0700
Subject: [PATCH 10/10] docs(ui): describe shared table sidebar exports

---
 .../components/table-sidebar-header/table-sidebar-header.tsx    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
index f51e9298a44..99892eb15fb 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
@@ -5,6 +5,7 @@ interface TableSidebarHeaderProps {
   children: ReactNode
 }
 
+/** Shared header row for table configuration sidebars. */
 export function TableSidebarHeader({ children }: TableSidebarHeaderProps) {
   return (
     <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
@@ -17,6 +18,7 @@ interface TableSidebarHeaderActionProps extends ButtonHTMLAttributes<HTMLButtonE
   'aria-label': string
 }
 
+/** Button treatment for actions in a table sidebar header. */
 export const TableSidebarHeaderAction = forwardRef<
   HTMLButtonElement,
   TableSidebarHeaderActionProps