fix(terminal): expose selected row state and use absolute imports

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/terminal-row-button.test.tsx

@@ -6,9 +6,11 @@ import { BlockTileView } from '@sim/workflow-renderer'
 import { createRoot, type Root } from 'react-dom/client'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  StatusDisplay,
+  TerminalRowButton,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components'
 import { ROW_STYLES } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
-import { StatusDisplay } from './status-display'
-import { TerminalRowButton } from './terminal-row-button'
 
 let root: Root
 let host: HTMLDivElement
@@ -43,6 +45,7 @@ describe('TerminalRowButton', () => {
     const button = host.querySelector('button')!
     expect(button.type).toBe('button')
     expect(button.getAttribute('aria-expanded')).toBe('true')
+    expect(button.getAttribute('aria-pressed')).toBe('true')
     expect(button.getAttribute('data-entry-id')).toBe('entry-1')
     expect(button.className).toBe(ROW_STYLES.rowSelected)
     act(() => button.focus())
@@ -59,9 +62,17 @@ describe('TerminalRowButton', () => {
     const button = host.querySelector('button')!
     expect(button.className).toBe(ROW_STYLES.row)
     expect(button.hasAttribute('aria-expanded')).toBe(false)
+    expect(button.hasAttribute('aria-pressed')).toBe(false)
     expect(button.textContent).toBe('Block output')
   })
 
+  it('exposes the unselected state only for selectable rows', () => {
+    act(() => {
+      root.render(<TerminalRowButton selected={false}>Other output</TerminalRowButton>)
+    })
+    expect(host.querySelector('button')?.getAttribute('aria-pressed')).toBe('false')
+  })
+
   it('keeps the running status inline inside a native button', () => {
     const html = renderToStaticMarkup(
       <TerminalRowButton>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/terminal-row-button.tsx

@@ -2,14 +2,15 @@ import type { ButtonHTMLAttributes } from 'react'
 import { cn } from '@sim/emcn'
 import { ROW_STYLES } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
 
-export interface TerminalRowButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface TerminalRowButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-pressed'> {
   /** Use the selected chip surface for the active output row. */
   selected?: boolean
 }
 
 /** Native terminal row action with the established EMCN chip surface. */
 export function TerminalRowButton({
-  selected = false,
+  selected,
   className,
   onClick,
   type,
@@ -19,6 +20,7 @@ export function TerminalRowButton({
     <button
       type={type ?? 'button'}
       className={cn(selected ? ROW_STYLES.rowSelected : ROW_STYLES.row, className)}
+      aria-pressed={selected}
       onClick={(event) => {
         event.stopPropagation()
         onClick?.(event)