Give each view its own surface and the report one device picker (refs #439) - #484

The Xcode-style per-view shell — the first of #439's two final PRs. A1 gave the
report a summary header, A2 gave the tree Xcode's outline; this dissolves the
three-pane shell those still sat inside.

A3b follows with the filters and #460.

What changed

Per-view surface ownership. Tests and Logs each own the whole content area
below the tabs, toolbar included. Views are the outer level and runs nest
inside them, so a run contributes a tests_<id> slice and a logs_<id> slice
and each view is one contiguous region a tab can point aria-controls at.

That also fixes a live collision. Every run used to emit id="logs",
id="logs-header" and id="logs-iframe", so a report built from two bundles
emitted each of them twice; the page only behaved because the duplicates sat
inside a hidden pane.

Device selection moves to a header picker. A1's "Devices & Configurations"
card stated each run's split and could not act on it; the sidebar could act and
stated nothing. They are one control now: every option is a button carrying the
outcome glyph, the destination, the proportional bar, the same spoken tally and
the model. It lives in the title band rather than the summary band because the
band stands down for the Logs view (A2) and every run has its own log.

Attachments become per-view. A2's ≤700px bottom sheet generalises to every
width and moves inside the Tests view. There is no placeholder state: a sheet
with nothing in it is not in the layout, so the report stops spending 400px of
a 1440px window on the words "No Selected Attachment". Nothing
attachment-shaped exists while Logs is showing.

What that reclaims, measured on a single-device run at 1440px: a 200px device
sidebar plus a 400px attachment pane, ~42% of the window (audit findings 1 and
3).

Navigation parity — everything the sidebar did

The sidebar could do four things. All four are in the picker, and two of them
are better:

Pinned by RunSummaryTests.testThePickerCarriesEverythingTheDeviceSidebarDid
and by seven browser tests in visual/tests/shell.spec.ts driving a new
two-bundle fixture (report-multi.html) — the case the sidebar existed for and
the only one on which "switch destination" can be caught doing the wrong thing.
(Two more in tokens.spec.ts measure contrast on it; the run number an option
carries only exists on a several-run report.)

ReproducibilityTests' duplicate-bundle case (one bundle passed twice) stays
green and gets stronger: a device handle must now address exactly one slice
per view, which covers the log panes the old single-selector check could not
see.

Run numbers. An option carries Run N when the report holds more than
one run. Two runs can have byte-identical destination fields — a bundle merged
with itself, or two bundles recorded on one simulator, which is exactly what
ReproducibilityTests' duplicate-bundle case is built from — and without a
number the picker offers two options a reader cannot tell apart whenever the
tallies also match. It sits inside the label rather than beside it, so the
collapsed summary carries it too: a picker that can only disambiguate while it
is open is not telling the reader which run they are reading. Derived from the
run's index, never read from a bundle, so it agrees across backends by
construction. real-picker-1440-*.png shows it on a genuine two-bundle
report where both runs are the same simulator.

Dropped deliberately: the sidebar's Identifier: line. Since #430 it has
carried the report's own element handle — a 32-character path digest — rather
than the destination's identifier, so it named nothing a reader can use or
match against anything outside the page. The handle is still there, in
data-device and the ids it addresses, as machinery rather than content.

RunDestination.status went with the markup. It was hardcoded .unknown
behind a standing TODO, and the sidebar's icon rule drew nothing at all for
that case — so every device card in every report ever rendered showed a blank
status cell. The picker states the real outcome, from Run.status, which is
the value the bars are already built from.

JS rewiring

This is the PR the restyle-don't-rewire constraint was saving itself for, so
the scripts are restructured rather than worked around. Three groups of state,
one writer each: showView(), selectDevice(), selectListItem() /
openAttachment().

• Tests/Logs become a real tablist. They were two <li onclick> no
  keyboard could reach.
• The status filters become a radiogroup of buttons with aria-checked.
  The five filter functions are unchanged in what they do; only their scope
  moved, from the shell's per-run pane to the per-view slice. A3b upgrades
  them.
• The preview eye becomes a real <button>. It was the report's most
  consequential control and had no keyboard path at all. Its focus ring and its
  mask are separate elements because a CSS mask clips everything its element
  paints, outline included.
• One attachment handler for all five kinds, taking the element, with
  data-kind written by the template that already knows. The old script split
  the path on . and read the last piece — which cannot work for the data:
  URIs inline mode emits, and did not work for .png either, because the
  extension list was probed with indexOf(...) > 0 and png sits at index 0.
  Clicking the eye always worked; selecting the row that held it sent a PNG to
  the download branch. Pinned by a new inline-mode browser test.
• The tree claims the arrow keys only while it is the thing being read.
  Before this nothing in the page could take focus, so a document-level handler
  could not collide with anything; now it can.
• Switching view moves focus off any element inside the panel being hidden,
  which the browser would otherwise drop to <body>.

Every test that pinned the old contract is updated, each for a stated reason,
in the file it lives in: CoreTests and SanityTests (the filter pills are
buttons in a radiogroup), ReproducibilityTests (the device selector, and one
slice per view), RunSummaryTests (device rows are picker options),
SummarySeamTests (the escaping assertion follows the filename to the
attribute it lands in), HTMLEscapingTests (destination fields moved from the
band to the picker, so the region-scoped check moved with them), and the three
browser specs.

Keyboard and accessibility

• Roving focus for the tablist and each filter group, so Tab steps past a
  toolbar in one press rather than through five pills.
• <details> for the picker, so the disclosure is the browser's: focusable,
  announced as expanded or collapsed, correct with no script. Escape closes it
  and returns focus to the summary. No aria-label on the summary — one would
  replace the destination name with the word "Device".
• The axe gate runs in four states now — as opened, picker open, sheet
  open, Logs — each asserting its own precondition in A2's pattern. Three
  permanent panes became surfaces that come and go, and a one-state gate would
  have gone green while seeing none of them.

375px

There is no longer a second layout to fold into. No sidebar to become a strip,
no attachment pane to convert into a sheet (the sheet is the treatment at every
width), no resizers to hide, and none of the three !important rules that
existed to beat a dragged pixel width. What is left in the query is spacing,
indentation and two caps.

What a reader gives up at 375px, stated plainly: the picker's summary truncates
to the destination name, the digest's suite column drops under the message, and
the ring shrinks. Nothing becomes unreachable — which was not true before, when
the device strip and the tree competed for the same column.

The picker's "Device" label is clipped rather than removed at that width, so
the control keeps its accessible name while giving back the 44px.

Colour

--color-bg-sidebar is renamed --color-bg-chrome. The values are unchanged
in both themes, so every status figure A1 and A2 measured against it carries
over unrecomputed; only the name moved, because the sidebars it was named for
no longer exist.

One new token. --color-border-control is sized to clear the 3:1 non-text
floor on the ground it is drawn on, because the boundary of the picker's
summary and of the sheet's Close button is part of what says "this is a
button". The sheet's other borders outline regions — a card, a row hairline —
which 1.4.11 scopes out as decoration, since the thing they bound is identified
by its own content.

Contrast

Every pairing A3a introduces, computed before it was used. All 30 clear their
floor; the tightest is 3.24:1 against a 3.0:1 floor.

Tightest three: Picker summary — border (graphic) at 3.24:1 against a 3.0:1 floor; Sheet Close — border (graphic) at 3.24:1 against a 3.0:1 floor; Picker option, current — fill vs panel (graphic) at 3.25:1 against a 3.0:1 floor

Machine-checked as well: visual/tests/tokens.spec.ts discovers every text
pairing from the live cascade in both themes and holds it to the AA floor. It
now does that with every shell surface open and over both fixtures,
which is not a tidy-up — the walk can only read what is in the layout, and A3a
turned three permanent panes into surfaces that come and go. The picker's panel
sits inside a closed <details>; opening it caught a real defect this PR
introduced and shipped in an earlier draft: the run number on the selected
option kept its muted colour on the accent fill, at 1.31:1 light and 1.73:1
dark. The single-run fixture could not have caught it either, because the run
number is only rendered when a report holds several runs.

Screenshots

1440 and 375, light and dark, in orca-artifacts/a3a-shell/: the Tests view,
the Logs view, the picker open, the attachment sheet open, and the picker on a
two-bundle report.

Deviations from the option-A mockup

• The mockup has no view tabs and no device picker. It renders one run as a
  single scrolling column. A report can hold several runs, so the shell it
  draws is not a shell a real report can use; the picker and the tabs are what
  the mockup left for this PR.
• Attachments are a sheet, not inline under their activity. The mockup
  draws an inline player. Inline would put a 40vh video inside the tree between
  two test rows — the problem A2 already had to bound .screenshot-flow for —
  and the task's brief is A2's bottom-sheet pattern generalised.
• No elapsed offsets on activity rows. Unchanged from A2 and for the same
  reason, stated more precisely than before: ParsedActivity does carry an
  optional start, and both readers populate it. What no backend supplies is
  a finish time — so what is missing is per-activity duration, not the
  timestamp itself. An offset renderable on only some rows would still be the
  wrong trade, and this is A2's accepted deviation either way, not a new one.
• The summary band keeps its ring and legend at full size. The mockup's
  header is tighter; shrinking A1's band is a change to A1's work, not this
  PR's.

Verification

• swift test — 177 tests, 0 failures, 3 skipped (the two env-gated capture
  tests and the standing JUnit drift skip from CoreTests.testRetryFunctionalityJunit expectations drift with Xcode version #378), on both legs
  (default/auto and XCHR_RESULT_READER=modern).
• DifferentialTests green: the shell is shared template text, so both
  backends render it identically and the allow-list is untouched. Both legs
  run.
• visual — 38 Playwright tests, 0 failures: the four axe states, both
  contrast themes over both fixtures, the token checks, the filter and digest
  behaviour, the shell suite, and both render modes.
• swiftformat --lint clean; no new SwiftLint warnings.
• Masked duration shapes untouched — (N.NNs) in the tree and
  <span class="summary-duration">(9.00s)</span> in the header, both still
  asserted against KnownLossMasker.

Review findings, fixed

The xhigh review approved with findings. The three behaviour and layout ones
are fixed in this branch, each with a gate that was mutation-tested to prove
it bites:

• A stale .selected survived a destination round-trip. selectDevice
  dropped the script's handle on the selected row without removing the class,
  so the row came back from a hidden run still painted and the next selection
  added a second fill instead of moving the first. Gated by a destination round-trip leaves exactly one row highlighted, counting document-wide,
  since a stale fill inside a hidden run is what a scoped count cannot see.

• Choosing a destination by keyboard dropped focus to <body>. Closing
  the <details> takes the activated option out of the layout — the failure
  showView already guards against for the view tabs, and the reason Escape
  refocuses the summary. The choose path lands in the same place: the control
  the reader opened, still in the layout, and just renamed to what they chose.
  Guarded on the picker actually holding focus, so boot and the digest jump do
  not steal it. The keyboard test now chooses as well as opening and escaping,
  and reads focus after two settled frames — an immediate read false-passes.

• The title band overflowed 375px with a real destination name. "iPhone 17
  Pro Max 26.2 Run 1" put the summary's right edge at 405px in a 375px window,
  and since body is overflow: hidden the chevron, the border's end and the
  tail of the name were cut off rather than scrolled to. text-overflow never
  engaged because the picker is a flex item whose automatic minimum held it at
  the width of a name that does not wrap; min-width: 0 waives it. The run's
  status glyph was absorbing the squeeze — 24px to nothing, being the one item
  in the row with no content to protect it — and is now flex: none.

  The gate that missed this measured the short synthetic name, so the new one
  asserts its own precondition: the destination it measures must be at least
  as long as the real one that found the defect, or the test fails as
  uninformative rather than passing on a name that fits. That is the A2
  axe-gate lesson applied to a layout gate.

• The substitution-order comment was inverted. A chain of replacements
  fills the placeholders an earlier replacement inserted, so putting
  [[DEVICE_IDENTIFIER]] last made it reachable from a destination name
  rather than protecting it from one. The identifier — the one machine-derived
  value in the chain — now goes first, and pickerHTML fills its options
  before its summary for the same reason. No XSS was reachable either way.
  PlaceholderOrderTests pins both orders and the boundary they do not move:
  two of the picker's placeholders carry test-plan text and no order protects
  both, so [[CURRENT_DEVICE]] stays reachable — deliberately, since what it
  inserts is a label rather than the panel of buttons the opposite order
  handed out. Closing the class outright means single-pass substitution across
  the whole HTML seam, which every template shares and which predates this
  PR; that is a follow-up, not this one.

• The evidence screenshots are re-shot. The two real-picker-1440-*.png
  files showed the pre-fix contrast defect this PR narrates as caught and
  fixed; so did the four multi-picker-* files, and every 375px file showed
  the overflow above. All 22 are regenerated from this branch's build.

Refs #439.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Redesigned reports with dedicated Tests and Logs views.
  • Added a device picker for switching between runs and destinations.
  • Added per-view filtering, run navigation, and synchronized test/log content.
  • Added on-demand attachment previews in an accessible sheet, including inline media support.

• Accessibility & Usability

  • Improved keyboard navigation, focus management, screen-reader labels, and responsive layouts.
  • Updated light and dark themes, status indicators, scrolling, and narrow-screen behavior.