Share code search overlay across product viewers

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

@@ -0,0 +1,130 @@
+/**
+ * @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('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.className).toContain('h-[23px] w-[94px] 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,98 @@
+import type { ChangeEvent, Ref } from 'react'
+import { Button, ChipInput, cn, Input } 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 chip field; previews and terminal output use the plain field. */
+  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]' />
+      ) : (
+        <Input {...inputProps} className='mr-0.5 h-[23px] w-[94px] text-caption' />
+      )}
+      <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>
+  )
+}

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(