Session timeline — a Study tools slot

D is the chosen storyboard, built; A–C below are the candidates it was assembled from. Looping illustrations for a new slot in the Welcome window’s Study tools cell, teaching the timeline that opens under each Sessions row. Each frame is the cell at 800 pt of Welcome content (cell 490 pt, slot 458 pt). The illustration is drawn with the shipped tapestry stylesheet and the component’s own geometry. Words dashed in gold are new copy for the owner, not shipped keys.

Artefact — what ships Commentary — why

D · Unfurl, read, quote — the shipped template, at the Welcome window’s real slot sizes

Each frame below loads the exact HTML the app builds (WelcomeIllustrationHTML.timeline), extracted from the Swift source with its interpolations filled. Frames play in turn, like the baton in the app; the dark / Edo buttons at the top rebuild them.

Spiral · window at natural width (760) · slot 433 × 205

Study tools

Session timeline

Video-editing style timeline of each interview: what happened, when

Read a session →

Spiral · 680 · slot 383 × 150

Study tools

Session timeline

Video-editing style timeline of each interview: what happened, when

Read a session →

Spiral · narrowest before stacking (600) · slot 334 × 105

Study tools

Session timeline

Video-editing style timeline of each interview: what happened, when

Read a session →

Stacked · 590 · slot 558 × 240

Study tools

Session timeline

Video-editing style timeline of each interview: what happened, when

Read a session →

Stacked · narrowest (290) · slot 258 × 240

Study tools

Session timeline

Video-editing style timeline of each interview: what happened, when

Read a session →

What is shipped CSS and what is liberty. Colours, type, lanes, flags, marks, theme spans, ticks and the popover are session-tapestry.css, badge.css and the tokens, inlined verbatim through WelcomeTimelineCSS.swift (a generated file with a drift test). The timeline is drawn zoomed in, about 2.2 slots wide and never coarser than 2.5 s/px, so the clips carry their speaker codes and the timeline never fits its frame: reading it means swiping.

Liberties. Zoomed in, so the timeline is wider than the frame. One theme row (the lens packs three). 34 pt of air above and below the sentiment axis (the lens uses 41 and 40). A one-row crop of the Sessions grid stands in for the real row. The scrollbar is drawn, because a programmatic scroll does not reliably show macOS’s overlay bar. The whole picture scales down, never up, when the slot is shorter than its natural height; the logical width grows by the same factor, so a short slot shows more of the session rather than a smaller copy of the same crop.
Read beat. The pointer parks on the speaker lane and stays still, as a hand on a trackpad does. Each swipe slides the timeline under it with momentum, and the overlay scroller shows; the playhead is whatever moment is under the pointer, so each section’s flag rises as its section slides in, then holds for 0.8 s (absolute, not stretched by the group tempo).
Quote. A Delight mark in the last section, so the popover opens above the axis line and overlays the Themes lane, as in the lens.

A · The unfurl — the row opens and the session lays itself out

Welcome ▸ Study tools · candidate A

Study tools

Session timeline

Open a session’s timeline to see who spoke, how it felt, and where each theme ran.

Read a session →

Teaches that it exists and where it is. A pointer clicks the chevron in the session’s ID cell, the row and slice take the shared tint, then the lanes fill in reading order: speaker clips sweep left to right in their scene colours, section flags drop, sentiment marks grow up or down from the axis, and theme spans draw.

The only candidate that shows the way in. The chevron sits in the ID cell, not in its own column, and it is small; this is the thing a first-time user would otherwise miss.
Slot height, measured: 224 (row 28, slice 174, scroll padding). The tallest cap in the pool today is ingest at 196. The rest frame is the open slice, so the cell does not jump.
Says nothing about what a click does. The timeline’s second job, jumping to the transcript, goes untaught.

B · Read and jump — the open timeline, under a pointer

Welcome ▸ Study tools · candidate B

Study tools

Session timeline

Follow a whole session at a glance — click any moment to open the transcript there.

Read a session →

Teaches the interaction. The pointer runs along the speaker lane: the playhead follows, the nearest timecode lights in accent blue, and each section’s flag raises in full as it passes. It then drops to a mark and clicks; the quote pops up under it, and the pointer rests on the popover, which takes its hover tint.

Every state shown is shipped CSS: .bn-tp-playhead, .bn-tp-tick.near, .bn-tp-flag.raised, .bn-tp-bar.sel, .bn-tp-popover:hover.
Slot height, measured: 232. The slice alone is 190; the popover, which overlaps the themes lane as in the app and is cut to two lines, hangs 39 pt below it.
Never shows the chevron, so the reader learns what the timeline does and not where it lives. The line has to carry “open a session”.

C · Open, then a quote — A’s first half, B’s last beat

Welcome ▸ Study tools · candidate C

Study tools

Session timeline

Open a session’s timeline to see who spoke and how it felt — click a mark to read the quote.

Read a session →

Both jobs, one loop. The chevron opens the slice as in A, but the lanes arrive together rather than one by one. The pointer then goes straight to a positive mark and clicks it, and the quote appears. No sweep.

Teaches the way in and the payoff, which is a quote: the thing every other slot in the pool is also about.
Slot height, measured: 252, the tallest of the three. The popover sits under a positive mark, so it opens just below the axis; under a negative mark it would run up to 26 pt further down.
Loop length about 7 s at tempo, close to Clips. The playhead sweep is dropped; hovering is the least discoverable part and the cheapest to leave to the app.

Open calls

Call	Options	Lean
CTA destination	No docs page owns the timeline (grep of `docs-src/` for “timeline” is empty). (1) `read-transcripts.html`, the page about where a click lands; (2) write a short `session-timeline.html` in the website repo; (3) withhold the CTA, as the Focus slot is stuck on.	(2). A slot whose link lands on a page that does not mention the thing teaches nothing.
Position in the pool	After Ingest (what you get back), after Video clips (the other video-first tool), or first.	After Video clips: the clip colours are what was on screen, and the two slots read as one family.
Clip colour	Scene colours (a video project) or the neutral greys an audio-only or pre-0.35 project shows.	Scene colours. Greys make the speaker lane read as a disabled control.
Renderer	Webview with the shipped `session-tapestry.css` + tokens inlined, or native SwiftUI.	Webview. As with the Focus slot, a SwiftUI rebuild would fork a second copy of rules the CSS owns.
Slot height	All three exceed ingest’s 196. Levers, cheapest first: drop the Sessions row (−28, loses the way in); one theme row is already taken; shorten the sentiment lane’s 41 pt air above and below the axis (a fork from the shipped geometry); draw the popover beside the mark rather than under it (a fork from the shipped component).	Accept the height if C wins. Stacked mode already sizes to the tallest slot, and the spiral’s slot is 81–205 pt, so the illustration will self-scale below its cap there like the others.
Theme rows	The app packs up to three; the illustration draws one.	One. Three rows would add 44 pt for no extra lesson.

String plan

Key	en	Status
`desktop.welcome.home.tools.timeline.title`	Session timeline	Lift of `common:sessions.tapestry.label` — already translated in 21 locales, reviewed. Reuse the value, new key (different surface).
`….tools.timeline.text`	Video-editing style timeline of each interview: what happened, when	Owner’s line (9 Oct 2026). No em dash, en dash or semicolon, so `WelcomeClauseFit` has no clause to drop and a narrow cell falls straight to an ellipsis. At 67 characters it is short enough that this should not bite.
`….tools.timeline.link`	Read a session	New, owner-written, depends on the CTA call.
lane labels, sentiment badge	Sections · Moderator · Participant · Sentiment · Themes · Delight	Shipped: `quotes.sections`, `sessions.speakerPlaceholder.`, `sessions.colSentiment`, `quotes.themes`, `enums:sentiment.`. Passed in through `stringsBlock`.
`desktop.welcome.examples.timeline*`	section names, two theme names, one quote	New example content, like `clipName1–3`: the participant’s words and the analysis’s names are content, so they are keys. 7 strings.