fix: preserve editable keyboard navigation in rail

Author: Gini

docs/IMPLEMENTATION-LOG.md

@@ -66,6 +66,7 @@
 - Reworked the deck workspace into a review surface rather than an outline list: compact visual slide cards, position-aware previous/next controls, a focused deck canvas, and per-slide notes that open directly in the evidence-bound source editor. These are visual outline thumbnails, not an assertion that the PPTX itself has been rendered to images.
 - Corrected compact tool-card causality in the Computer rail: a visual checkpoint tied to a folded tool-result event now appears with its originating tool card, while retaining the separate immutable screenshot card in chronological order. This closes a mixed-stream review gap without collapsing or rewriting the underlying evidence.
 - Added bounded text snippets to generated source/deliverable cards in the Computer rail. The API refuses inputs and evidence paths, recognizes text artifacts only, caps eligible files at 64 KiB and returned excerpts at 12,000 characters; the client applies the rail redactor again before display. This makes the rail more useful for file review without converting it into a workspace mount.
+- Kept the artifact-rail keyboard model review-safe: Arrow/Home/End navigation works on the rail, but does not intercept caret or selection behavior in the evidence search field, run selectors, textareas, or content-editable controls.
 - Replaced opaque click-to-cycle runtime selection with a server-derived readiness picker. It identifies the task boundary and availability for Safe demo, native Claude Agent SDK, ONEComputer sandbox, and remote runtime without exposing server credentials; unavailable remote/sandbox choices cannot be submitted, while the API remains the authority for enforcement.
 - Added a read-only task Settings workspace tab. It gathers the runtime/boundary, gateway-attestation, approval, artifact-contract, and attached-context record in one reviewable place while deliberately excluding credentials, VTI Wallet keys, provider controls, and X11/VNC/CDP channels.
 - Modernized generated Website/App/Game projects with Tailwind 4’s Vite integration and a minimal typed component foundation (`Button` plus `cn`). Static validation now verifies the foundation is present; installing or running third-party dependencies remains reserved for a controlled sandbox build gate.

src/components/ComputerTimeline.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { activityPreviewFor, artifactRailItems, causalVisualItemsFor, commandFor, compareRunArtifacts, defaultComputerItem, evidenceItemId, filterItemsByRun, formatDuration, formatInspectable, matchesRailQuery, presentationItems, railCardTypeFor, runIdsFor, runLabel, summarizeRunEvidence, terminalActivityFor, virtualRailRange, visualEvidenceStateFor, type ComputerItem } from './computer-timeline-activity'
+import { activityPreviewFor, artifactRailItems, causalVisualItemsFor, commandFor, compareRunArtifacts, defaultComputerItem, evidenceItemId, filterItemsByRun, formatDuration, formatInspectable, matchesRailQuery, presentationItems, railCardTypeFor, runIdsFor, runLabel, summarizeRunEvidence, terminalActivityFor, timelineNavigationAllowedFor, virtualRailRange, visualEvidenceStateFor, type ComputerItem } from './computer-timeline-activity'
 import type { RuntimeEvent } from '../types'
 
 const event = (id: string, type: string, payload: Record<string, unknown>, content?: string): RuntimeEvent => ({
@@ -141,6 +141,14 @@ describe('Computer timeline terminal inspection', () => {
     expect(virtualRailRange(3, 0, 340)).toEqual({ start: 0, end: 3 })
   })
 
+  it('reserves arrow and home/end controls for the rail without stealing editable-field navigation', () => {
+    expect(timelineNavigationAllowedFor('div')).toBe(true)
+    expect(timelineNavigationAllowedFor('input')).toBe(false)
+    expect(timelineNavigationAllowedFor('textarea')).toBe(false)
+    expect(timelineNavigationAllowedFor('select')).toBe(false)
+    expect(timelineNavigationAllowedFor('div', true)).toBe(false)
+  })
+
   it('searches only projected rail metadata', () => {
     const item: ComputerItem = { id: 'browser-event', kind: 'terminal', title: 'browser_navigate', detail: 'Opened the approved reference', activityPreview: 'https://example.com/docs', createdAt: '2026-07-16T00:00:00.000Z' }
     expect(matchesRailQuery(item, 'navigate')).toBe(true)

src/components/ComputerTimeline.tsx

@@ -1,7 +1,7 @@
 import { ArrowLeft, ArrowRight, CheckCircle2, Eye, FileCode2, Pause, Play, Presentation, Radio, ShieldCheck, TerminalSquare, Wrench } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react'
 import type { PresentationPanel, TaskSnapshot } from '../types'
-import { artifactRailItems, causalVisualItemsFor, compareRunArtifacts, defaultComputerItem, evidenceItemId, filterItemsByRun, formatDuration, formatInspectable, matchesRailQuery, presentationItems, railCardTypeFor, runIdsFor, runLabel, summarizeRunEvidence, terminalActivityFor, virtualRailRange, visualEvidenceStateFor, type ComputerItem } from './computer-timeline-activity'
+import { artifactRailItems, causalVisualItemsFor, compareRunArtifacts, defaultComputerItem, evidenceItemId, filterItemsByRun, formatDuration, formatInspectable, matchesRailQuery, presentationItems, railCardTypeFor, runIdsFor, runLabel, summarizeRunEvidence, terminalActivityFor, timelineNavigationAllowedFor, virtualRailRange, visualEvidenceStateFor, type ComputerItem } from './computer-timeline-activity'
 
 const iconFor = (item: ComputerItem) => item.kind === 'terminal' ? <TerminalSquare size={13} /> : item.kind === 'screenshot' ? <Eye size={13} /> : item.kind === 'preview' ? <Radio size={13} /> : item.kind === 'slide' ? <Presentation size={13} /> : item.kind === 'approval' ? <ShieldCheck size={13} /> : <FileCode2 size={13} />
 const RAIL_ROW_HEIGHT = 68
@@ -170,6 +170,8 @@ export const ComputerTimeline = ({ task }: { task: TaskSnapshot }) => {
     persistEvidenceReference(railItems[index], 'all')
   }
   const onTimelineKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    const target = event.target instanceof HTMLElement ? event.target : undefined
+    if (event.altKey || event.ctrlKey || event.metaKey || !timelineNavigationAllowedFor(target?.tagName, target?.isContentEditable)) return
     if (event.key === 'ArrowLeft') { event.preventDefault(); move(selected - 1) }
     if (event.key === 'ArrowRight') { event.preventDefault(); move(selected + 1) }
     if (event.key === 'Home') { event.preventDefault(); move(0) }

src/components/computer-timeline-activity.ts

@@ -71,6 +71,9 @@ export const formatDuration = (milliseconds: number | undefined) => {
   return `${Math.floor(milliseconds / 60_000)}m ${Math.round((milliseconds % 60_000) / 1_000)}s`
 }
 
+/** Do not steal caret, select-menu, or editable-content navigation from the reviewer. */
+export const timelineNavigationAllowedFor = (tagName: string | undefined, isContentEditable = false) => !isContentEditable && !['INPUT', 'TEXTAREA', 'SELECT'].includes(tagName?.toUpperCase() ?? '')
+
 export const virtualRailRange = (count: number, scrollTop: number, viewportHeight: number, rowHeight = 68, overscan = 12) => {
   if (count <= 0) return { start: 0, end: 0 }
   const visibleStart = Math.floor(Math.max(0, scrollTop) / rowHeight)