feat: distinguish safe CLI evidence in artifact rail

Author: Gini

src/components/ComputerTimeline.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { activityPreviewFor, artifactRailItems, causalVisualItemsFor, defaultComputerItem, evidenceItemId, filterItemsByRun, formatDuration, matchesRailQuery, runIdsFor, terminalActivityFor, virtualRailRange, type ComputerItem } from './computer-timeline-activity'
+import { activityPreviewFor, artifactRailItems, causalVisualItemsFor, commandFor, defaultComputerItem, evidenceItemId, filterItemsByRun, formatDuration, matchesRailQuery, runIdsFor, terminalActivityFor, virtualRailRange, type ComputerItem } from './computer-timeline-activity'
 import type { RuntimeEvent } from '../types'
 
 const event = (id: string, type: string, payload: Record<string, unknown>, content?: string): RuntimeEvent => ({
@@ -71,6 +71,14 @@ describe('Computer timeline terminal inspection', () => {
     expect(activityPreviewFor({ input: { operation: 'write', paths: ['src/App.tsx', 'src/index.css'], api_key: 'do-not-show' } })).toBe('write · src/App.tsx, src/index.css')
   })
 
+  it('projects a CLI command without exposing credentials or host paths', () => {
+    const command = commandFor({ command: 'API_KEY=not-for-the-rail node /Users/operator/project/build.mjs --token top-secret' })
+    expect(command).toBe('API_KEY=<redacted> node <host-path> --token=<redacted>')
+    const activity = terminalActivityFor({ id: 'command', kind: 'terminal', title: 'Bash', createdAt: '2026-07-16T00:00:00.000Z', payload: { input: { command: 'pwd' } } }, [])
+    expect(activity.command).toBe('pwd')
+    expect(activity.workspaceLabel).toBe('Sandbox workspace')
+  })
+
   it('folds a completed tool result into its originating rail card without changing evidence order', () => {
     const started: ComputerItem = { id: 'tool-start', kind: 'terminal', eventType: 'tool_call_started', title: 'Read', createdAt: '2026-07-16T00:00:00.000Z', eventHash: 'start-hash', payload: { toolUseId: 'tool-1', input: { path: 'README.md' } } }
     const completed: ComputerItem = { id: 'tool-finish', kind: 'terminal', eventType: 'tool_call_completed', title: 'Read complete', createdAt: '2026-07-16T00:00:01.000Z', eventHash: 'finish-hash', payload: { toolUseId: 'tool-1' } }

src/components/ComputerTimeline.tsx

@@ -10,7 +10,8 @@ const withCacheBust = (uri: string, value: number) => `${uri}${uri.includes('?')
 const ArtifactRailEntry = ({ item, previousRunId, index, selected, total, events, onMove }: { item: ComputerItem; previousRunId?: string; index: number; selected: boolean; total: number; events: TaskSnapshot['events']; onMove: (index: number) => void }) => {
   const activity = item.kind === 'terminal' ? terminalActivityFor(item, events) : undefined
   const elapsed = formatDuration(activity?.durationMs)
-  return <div className="computer-rail-entry">{item.runId && item.runId !== previousRunId && <div className="computer-run-marker">Run {item.runId.slice(-6)}</div>}<button className={selected ? 'selected' : ''} aria-current={selected ? 'true' : undefined} onClick={() => onMove(index)} aria-label={`${item.title}, event ${index + 1} of ${total}`}><span>{iconFor(item)}</span><div><strong>{item.title}</strong>{item.activityPreview && <code title={item.activityPreview}>{item.activityPreview}</code>}{item.relatedEventIds?.length ? <small className={activity?.failed ? 'computer-pair-status failed' : 'computer-pair-status'}>{activity?.failed ? 'failed' : `complete${elapsed ? ` · ${elapsed}` : ''}`}</small> : <small>{new Date(item.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}</small>}</div>{item.kind === 'screenshot' && item.uri && !item.live && <img className="computer-rail-thumbnail" src={item.uri} alt="" loading="lazy" />}</button></div>
+  const title = activity?.command ? `CLI command · ${item.title}` : item.title
+  return <div className="computer-rail-entry">{item.runId && item.runId !== previousRunId && <div className="computer-run-marker">Run {item.runId.slice(-6)}</div>}<button className={selected ? 'selected' : ''} aria-current={selected ? 'true' : undefined} onClick={() => onMove(index)} aria-label={`${title}, event ${index + 1} of ${total}`}><span>{iconFor(item)}</span><div><strong>{title}</strong>{item.activityPreview && <code title={item.activityPreview}>{item.activityPreview}</code>}{item.relatedEventIds?.length ? <small className={activity?.failed ? 'computer-pair-status failed' : 'computer-pair-status'}>{activity?.failed ? 'failed' : `complete${elapsed ? ` · ${elapsed}` : ''}`}</small> : <small>{new Date(item.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}</small>}</div>{item.kind === 'screenshot' && item.uri && !item.live && <img className="computer-rail-thumbnail" src={item.uri} alt="" loading="lazy" />}</button></div>
 }
 
 export const ComputerTimeline = ({ task }: { task: TaskSnapshot }) => {
@@ -145,7 +146,7 @@ export const ComputerTimeline = ({ task }: { task: TaskSnapshot }) => {
       {active?.kind === 'slide' && <div className="computer-file"><Presentation size={28} /><strong>{active.detail ?? active.title}</strong><span>Deck evidence is preserved. Open the Files tab to download the PPTX or inspect the rendered viewer.</span></div>}
       {active?.kind === 'approval' && <div className="computer-file"><CheckCircle2 size={28} /><strong>{active.title}</strong><span>{active.detail ?? 'Approval evidence is recorded separately from the browser and can be verified in the task history.'}</span></div>}
       {(active?.kind === 'file' || active?.kind === 'diff') && <div className="computer-file"><FileCode2 size={28} /><strong>{active.detail ?? active.title}</strong><span>{active.kind === 'diff' ? 'Open the Code tab to inspect the recorded version change.' : 'Open the Files or Code tab to inspect this artifact.'}</span></div>}
-      {active?.kind === 'terminal' && <div className="computer-terminal"><div className="computer-terminal-meta"><span>{active.title}</span>{terminalActivity?.failed ? <b>tool error</b> : <em>{terminalActivity?.durationMs !== undefined ? `completed in ${formatDuration(terminalActivity.durationMs)}` : 'recorded activity'}</em>}</div>{active.payload?.browserTool === true && <small className="computer-browser-evidence">Governed browser evidence · sandbox only</small>}{terminalActivity?.request !== undefined && <section><label>Request</label><pre><code>{formatInspectable(terminalActivity.request)}</code></pre></section>}{terminalActivity?.output && <section><label>{terminalActivity.failed ? 'Error output' : 'Result'}</label><pre><code>{formatInspectable(terminalActivity.output)}</code></pre></section>}{relatedVisuals.length > 0 && <div className="computer-checkpoints"><span>{relatedVisuals.length} causal visual checkpoint{relatedVisuals.length === 1 ? '' : 's'}</span><div className="computer-checkpoint-gallery">{relatedVisuals.map((visual, index) => <button key={visual.id} onClick={() => inspectVisual(visual.id)} aria-label={`Inspect visual checkpoint ${index + 1} for ${active.title}`}><img src={withCacheBust(visual.uri ?? '', frame)} alt={`Checkpoint ${index + 1}: ${visual.title}`} loading="lazy" /><small>Frame {index + 1} · #{visual.sequence ?? '—'}</small></button>)}</div></div>}{terminalActivity?.toolUseId && <small>Tool call {terminalActivity.toolUseId.slice(-8)} · correlated with its paired result and visual checkpoints in this run.</small>}</div>}
+      {active?.kind === 'terminal' && <div className="computer-terminal"><div className="computer-terminal-meta"><span>{terminalActivity?.command ? `CLI command · ${active.title}` : active.title}</span>{terminalActivity?.failed ? <b>tool error</b> : <em>{terminalActivity?.durationMs !== undefined ? `completed in ${formatDuration(terminalActivity.durationMs)}` : 'recorded activity'}</em>}</div>{active.payload?.browserTool === true && <small className="computer-browser-evidence">Governed browser evidence · sandbox only</small>}{terminalActivity?.command ? <section><label>Command · {terminalActivity.workspaceLabel}</label><pre><code>$ {terminalActivity.command}</code></pre></section> : terminalActivity?.request !== undefined && <section><label>Request</label><pre><code>{formatInspectable(terminalActivity.request)}</code></pre></section>}{terminalActivity?.output && <section><label>{terminalActivity.failed ? 'Error output' : terminalActivity.command ? 'Command output' : 'Result'}</label><pre><code>{formatInspectable(terminalActivity.output)}</code></pre></section>}{relatedVisuals.length > 0 && <div className="computer-checkpoints"><span>{relatedVisuals.length} causal visual checkpoint{relatedVisuals.length === 1 ? '' : 's'}</span><div className="computer-checkpoint-gallery">{relatedVisuals.map((visual, index) => <button key={visual.id} onClick={() => inspectVisual(visual.id)} aria-label={`Inspect visual checkpoint ${index + 1} for ${active.title}`}><img src={withCacheBust(visual.uri ?? '', frame)} alt={`Checkpoint ${index + 1}: ${visual.title}`} loading="lazy" /><small>Frame {index + 1} · #{visual.sequence ?? '—'}</small></button>)}</div></div>}{terminalActivity?.toolUseId && <small>Tool call {terminalActivity.toolUseId.slice(-8)} · correlated with its paired result and visual checkpoints in this run.</small>}</div>}
     </section>
   </div>
 }

src/components/computer-timeline-activity.ts

@@ -20,11 +20,25 @@ export type ComputerItem = {
 
 const redactedKeys = new Set(['api_key', 'apikey', 'authorization', 'password', 'secret', 'token'])
 
+const redactCommand = (command: string) => command
+  .replace(/\b(authorization|api[_-]?key|token|password|secret)\s*=\s*([^\s'"`]+)/gi, '$1=<redacted>')
+  .replace(/(--(?:api[-_]?key|token|password|secret))(?:=|\s+)([^\s'"`]+)/gi, '$1=<redacted>')
+  .replace(/\bBearer\s+[^\s'"`]+/gi, 'Bearer <redacted>')
+  .replace(/\/(?:Users|home)\/[^\s'"`]+/g, '<host-path>')
+
+const recordValue = (value: unknown) => value && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : undefined
+
+export const commandFor = (value: unknown) => {
+  const input = recordValue(value)
+  return typeof input?.command === 'string' ? redactCommand(input.command) : undefined
+}
+
 const compactValue = (value: unknown): string | undefined => {
   if (typeof value === 'string') return value.length > 104 ? `${value.slice(0, 101)}…` : value
   if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined
   const input = value as Record<string, unknown>
-  if (typeof input.command === 'string') return `$ ${input.command.length > 100 ? `${input.command.slice(0, 97)}…` : input.command}`
+  const command = commandFor(input)
+  if (command) return `$ ${command.length > 100 ? `${command.slice(0, 97)}…` : command}`
   const operation = typeof input.operation === 'string' ? input.operation : undefined
   const paths = Array.isArray(input.paths) ? input.paths.filter((path): path is string => typeof path === 'string').slice(0, 2) : []
   if (operation) return `${operation}${paths.length ? ` · ${paths.join(', ')}` : ''}`
@@ -114,12 +128,17 @@ export const terminalActivityFor = (item: ComputerItem, events: RuntimeEvent[])
   const toolUseId = typeof item.payload?.toolUseId === 'string' ? item.payload.toolUseId : undefined
   const paired = toolUseId ? events.find((event) => event.id !== item.id && event.type === 'tool_call_completed' && event.payload.toolUseId === toolUseId) : undefined
   const request = item.payload?.input ?? paired?.payload.input
+  const command = commandFor(request)
   // A start event often contains a human-readable request summary. Prefer the
   // paired terminal result so the unified rail card reads request → outcome.
   const output = item.eventType === 'tool_call_started' ? paired?.content : item.detail ?? paired?.content
   const failed = item.payload?.isError === true || paired?.payload.isError === true
   const elapsed = paired && item.eventType === 'tool_call_started' ? Date.parse(paired.createdAt) - Date.parse(item.createdAt) : undefined
-  return { request, output, failed, toolUseId, durationMs: elapsed !== undefined && Number.isFinite(elapsed) && elapsed >= 0 ? elapsed : undefined }
+  return {
+    request, output, failed, toolUseId, command,
+    workspaceLabel: command ? 'Sandbox workspace' : undefined,
+    durationMs: elapsed !== undefined && Number.isFinite(elapsed) && elapsed >= 0 ? elapsed : undefined,
+  }
 }
 
 export const causalVisualItemsFor = (eventId: string, items: ComputerItem[]) => items.filter((item) => item.kind === 'screenshot' && item.payload?.causedByEventId === eventId)