fix(ui-chat,web): align work detail labels and Bash snapshot

apps/web/tests/minimal-preset.snapshot.ts

@@ -19,7 +19,7 @@ import {
   webSnapshotMode,
   type WebScaffold,
 } from './scaffold.ts'
-import { newEnglishPage, saveFailureShot } from './support.ts'
+import { expandOwningTurnProcess, newEnglishPage, saveFailureShot } from './support.ts'
 
 const SNAPSHOT_DIR = fileURLToPath(new URL('../../../snapshots/web/minimal-preset', import.meta.url))
 const FIXTURE = join(SNAPSHOT_DIR, 'session.v3.jsonl')
@@ -154,6 +154,8 @@ describe('minimal agent preset', () => {
     await expect.poll(() => process.getAttribute('aria-expanded')).toBe('true')
 
     const row = page.locator('[data-sample="bash"]').first()
+    await expect.poll(() => row.isVisible()).toBe(false)
+    await expandOwningTurnProcess(page, row)
     await row.waitFor({ timeout: 15_000 })
     await expect.poll(() => row.getAttribute('aria-expanded')).toBe('false')
     await row.click()

packages/client/ui-chat/src/client/settings/TranscriptViewRow.tsx

@@ -22,11 +22,13 @@ export type TranscriptViewRowProps =
   & PropsLocale<'chat'>
   & InjectFace<TranscriptViewRowInjected>
 
-const OPTIONS: readonly { id: TranscriptViewMode; label: ChatKey }[] = [
-  { id: 'compact', label: 'settings.transcript.compact' },
-  { id: 'detailed', label: 'settings.transcript.detailed' },
-  { id: 'expanded', label: 'settings.transcript.expanded' },
-]
+const LABELS = {
+  compact: 'settings.transcript.compact',
+  detailed: 'settings.transcript.detailed',
+  expanded: 'settings.transcript.expanded',
+} as const satisfies Record<TranscriptViewMode, ChatKey>
+
+const OPTIONS: readonly TranscriptViewMode[] = ['compact', 'detailed', 'expanded']
 
 /**
  * Render the completed-Turn transcript mode selector.
@@ -35,14 +37,13 @@ const OPTIONS: readonly { id: TranscriptViewMode; label: ChatKey }[] = [
  */
 export function TranscriptViewRow({ useTranscriptView, setTranscriptView, t }: TranscriptViewRowProps) {
   const mode = useTranscriptView(value => value)
-  const selectedLabel = `settings.transcript.${mode}` as const
   return (
     <PreferenceRow
       title={t('settings.transcript.title')}
       description={t('settings.transcript.description')}
       value={mode}
-      selectedLabel={t(selectedLabel)}
-      options={OPTIONS.map(option => ({ id: option.id, label: t(option.label) }))}
+      selectedLabel={t(LABELS[mode])}
+      options={OPTIONS.map(id => ({ id, label: t(LABELS[id]) }))}
       onSelect={(value) => { setTranscriptView(value as TranscriptViewMode) }}
     />
   )

snapshots/web/minimal-preset/ui.expected.md

@@ -7,10 +7,10 @@
   - tablist:
     - tab "Chat" [selected]
     - tab "Trajectory"
-- button "System prompt"
 - text: "Use the bash tool to run exactly: printf 'MINIMAL_BASH_CARD_OK\\n'. Then reply exactly MINIMAL_PRESET_REQUEST_OK and stop. {{clock}}"
 - button "Copy"
-- button "1 tool call" [expanded]
+- button "Took {{duration}}" [expanded]
+- button "Ran commands" [expanded]
 - button "Bash printf 'MINIMAL_BASH_CARD_OK\\n'" [expanded]
 - text: "IN { \"command\": \"printf 'MINIMAL_BASH_CARD_OK\\\\n'\" } OUT MINIMAL_BASH_CARD_OK [Command finished with exit code 0]"
 - button "Inspect"