refactor(ui): share field disclosures and icon action geometry (#8038)

* improvement(emcn): share ordinary action geometry in Button

* improvement(ui): share additional-field disclosures

* fix(ui): preserve tiny actions and use shared sidebar geometry

* improvement(ui): use shared geometry for standard icon actions (#8153)

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

* 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>

* 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

* fix(ui): make closed table sidebars inert and strengthen focus ring

* 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>

* fix(ui): announce code search result changes

* docs(ui): describe shared table sidebar exports

---------

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

Author: 4 people

apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx

@@ -4,14 +4,14 @@ 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
 }
 
 /** 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'

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>

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'>

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>

apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx

@@ -0,0 +1,159 @@
+/**
+ * @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 tally = overlay.querySelector('[aria-live="polite"][aria-atomic="true"]')
+    expect(tally?.textContent).toBe('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()
+
+    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', () => {
+    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)
+  })
+})

apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx

@@ -0,0 +1,100 @@
+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
+        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)]'
+        )}
+      >
+        {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>
+  )
+}

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>

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]')
   })
 

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>

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)