Transcript: the journey chain or the timeline, in one sticky slot

Iteration 2. A split control at the end of the sticky row. Click the button half to swap the journey chain for the session timeline; open the pulldown half to choose how much timeline (sections and speakers, plus sentiment, plus themes). When the row is narrow, the button shows only its icon.

Artefact: real --bn-* tokens and shipped classes; only what would ship Commentary: not the product

Mockup controls Appearance Palette Window height Content width

1 · Live: scroll the transcript, use the control, click the timeline

The frame is the content column at the height and width chosen above. Scroll inside it. Click Timeline, or open its pulldown and pick a detail. Click a flag, the speaker lane or a sentiment bar, or drag the blue window. The width control exercises the header's container query only: the transcript grid's own breakpoints follow the real window, so they don't move.

Transcript, Session 3: livenew: split control · menu · window · player mark

p1Rosa

Scroll or click to see what the page would do.

The control: a split button, the Mac's pull-down-with-default

The button half does the common thing (chain ↔ timeline); the pulldown holds the choices. That's the shape of a Mac split button (a SwiftUI Menu with a primaryAction, Mail's Reply / Reply All). It's drawn as two segments of the house segmented control, .dimension-toggle, so it needs no new control vocabulary.

Button: icon + "Timeline". Pressed, it takes .dimension-btn.active as shipped (hover tint, body ink, emphasis weight; accent text fails AA at 12 px) and only the icon turns accent. Below a 720 px row (a container query, so it follows the sidebars, not the window) the label goes and the icon stays.

Pulldown: the Export menu's classes and check gutter. The first group is the same toggle, said in words (both strings shipped). The second picks the detail; picking one also turns the timeline on, since that's plainly what was meant.

Does a marker track scroll? A range does, a playhead doesn't

Reading is a range, not a moment, so scroll moves a reading window: the time from the paragraph under the header to the last one on screen, interpolated within each, once per frame. It uses the minimap's viewport tokens, and dragging it scrolls the page as the minimap's does. The current section's flag stays raised, by the chain's rule (the last waypoint above the header's bottom + 8 px).

The playhead stays a player thing: the thin hover cursor is the shipped one; a heavier accent mark with a head shows the player's time, only while media plays. Press Play: PlayerContext already centres the playing paragraph, so the window follows the player without new code.

A click scrolls, never navigates

Flag: the chain's own handleIndexClick.
Speaker lane: resolveSegmentForSeconds, the resolver #t- deep links already use, with the anchor flash.
Sentiment bar: straight to its quote; no popover, since the quote is on the page.
The URL takes #t-<s> by replaceState. The readout under the frame shows what would be written.

Opening it keeps your place

The header grows; scrollTop is compensated so the paragraph under the header is still under it, and --bn-journey-header-height is re-measured (the mode and the detail join that effect's deps). Changing the detail keeps your place the same way.

2 · The split control, in each state

The right end of the sticky row. Top two rows: a wide row, light then dark. Third row: a narrow row (under 720 px), icon only. Last: the pulldown open.

Words

Shipped: "Session timeline" (sessions.tapestry.label) names the group and is the button's tooltip; the menu's first group is "User journey" (sessions.colJourney) and "Session timeline"; the hints are the lane labels (quotes.sections, sessions.speakerPlaceholder.*, sessions.colSentiment, quotes.themes).
New, for the owner to write: the button's "Timeline", the chevron's name ("Timeline detail" here), and the three details: "Compact", "Standard", "Full".

The details are named by how much they show, not by a lane count: "3 lanes" is our geometry, not the researcher's question. The hint says what each adds.

On the Mac

The View menu mirrors it: Show / Hide Session Timeline with the SF Symbol, then a Timeline Detail ▸ submenu with Compact, Standard and Full, enabled on a transcript and greyed elsewhere. No keyboard shortcut proposed (shortcuts are earned).

Keyboard

Two Tab stops (button, chevron). The chevron opens the menu with Return, Space or ↓; arrows move, Return picks, Esc closes and gives focus back to the chevron. The menu items are menuitemradio, as the Export menu's burn-subtitles row is a menuitemcheckbox.

3 · The glyph: an SF Symbol and its Lucide pair

Lucide is drawn here at 40, 20 and 14 px (14 is what the control uses). SF Symbols are named, not drawn: a browser engine never draws them (house rule, design-icon-system.md).

Recommended: `timeline.selection` ↔ `gallery-horizontal`

SF Symbols has no Gantt chart. I rendered every timeline-ish symbol on this Mac (macOS 27, from the system's own catalogue). timeline.selection is Apple's own timeline glyph: a filmstrip frame held between two trim handles, ▶▮◀. It's what Photos and QuickTime trim with, our welcome screen already calls the tapestry a "video-editing style timeline", and the fat state is a range held on a timeline. First shipped 2020, so macOS 11, well inside the 15.0 floor.

Lucide's gallery-horizontal is its silhouette twin: a frame between two uprights. On its own Lucide calls it a gallery, but beside the word "Timeline", and as the twin of the Mac's glyph, it reads right.

Rejected

chart-gantt ↔ calendar.day.timeline.left, iteration 1's pair. Rendered, the SF glyph is a calendar day view (an event with a now-line), and the two don't look alike.
align-start-vertical ↔ align.horizontal.left: an exact shape match (an axis, two bars), but both mean "align left" on their own platforms, and on the Mac it would sit beside real alignment commands.

Check the SF half in the SF Symbols app: search "timeline".

4 · How tall each detail is

Each frame is the sticky slot alone at the live frame's width, same reading window, same current section. The bars measure each against the window height chosen above; the tick is one third.

5 · What's new, and what isn't

Thing	Status	Notes
`.bn-timeline-split` + `__more`, `__label`	new CSS, small	Spacing, icon sizes and the pressed icon colour on top of the shipped `.dimension-toggle` / `.dimension-btn`; a container query on the header for the icon-only row.
`.bn-timeline-menu-hint`	new CSS, one rule	Inside the shipped `.export-dropdown-*` menu.
`.bn-transcript-journey-header--timeline`, `.bn-transcript-timeline`	new CSS	Wrap rule plus slot; one 0.15 s fade, off under reduced motion.
`.bn-tp-window`, `.bn-tp-player`	new marks	The minimap's `--bn-minimap-viewport-*` tokens; accent. No new colour.
`Icon` concept `timeline`	new, one line	Lucide `gallery-horizontal` ↔ SF `timeline.selection`; one row in the concept map in `design-icon-system.md`.
Strings	web: 5 new Mac: 3 new	Web: "Timeline", "Timeline detail", "Compact", "Standard", "Full". Mac View menu: "Show Session Timeline", "Hide Session Timeline", "Timeline Detail" (the details shared with the web). Owner-written, then 21 locales.
`SessionTapestry`	reused	New props, roughly: `lanes`, `window`, `current`, `player`, and `onJump` wired to scrolling; sentiment bars jump instead of opening a popover when the host says so.
Chain, header, transcript, gutter, segmented control, menu	unchanged	All drawn here from the verbatim CSS.
Open	owner	Remembered how? (`localStorage` doesn't survive quitting the Mac app: forget on quit, or a native mirror like the subtitle prefs.) A session with no sections still has a timeline, so the control stays. Export: `/tapestry` is embedded, so it works offline; the hover thumbnail stays serve-only.