Moderator identity — the picker, v3
The owner’s review of iteration 2, drawn (3 Oct 2026). In the grid a name the system is not sure of wears the dotted surround, as a proposed tag does; there are no ticks in the grid. Clicking a name opens the picker, where the green tick marks the current answer — the dotted most-likely name, or the name already chosen — and the selection starts on it, so Enter says yes. The other names are possibles. Typing m2 or a name jumps to it; Tab goes to the field to introduce someone new. A first line switches the role for a speaker the pipeline put in the wrong one. Each picker is drawn twice: in the web view, and as a native Mac popover.
The cast is iteration 2’s. Ward handover app — round 2: Teams named the moderator Martin B Storey in sessions 1–2 and Kerri Ng in 3, with Jane Smith observing in 3; sessions 4–6 were dropped in by hand. The researcher’s Mac account name is Martin Storey. Every word in the artefacts is a shipped locale key except those in the string plan at the end.
A name in the Sessions grid
V1Dotted until someone says yes
Session 1’s moderator, whom Teams named; and session 4’s, whom nothing named.
Yes, someone else, or someone new
V2First open — the selection is on the ticked, dotted name
Click Martin B Storey in the grid. The picker opens on the Moderator segment; the green tick and the selection are both on the proposed name. Enter: yes, and the picker closes.
The tick is the yes, as on a tag. It sits in the menu’s shipped check gutter, in front of the dotted most-likely name. With the selection already on it, saying yes is click, Enter. The dotted surround in the list matches the grid’s, so the reader sees which name is the system’s guess.
The other names are possibles. People this study already knows in this role — not proposed, just available. Clicking one (or moving to it and pressing Enter) chooses it instead.
One tick, only here. The grid has none; the picker has exactly one, on the current answer. That’s Me keeps its own symbol (a person, in the accent colour) so the green tick is never doing two jobs.
V3Second time round — the choice is solid, and still ticked
Reopen the picker on a slot already confirmed. The tick and the selection are on the chosen name, now solid. Pick another name to change your mind.
Dotted only until the first yes. Picking the dotted name confirms it and it turns solid, in the list and in the grid. From then on nothing in this slot is dotted: whichever name the researcher picks is simply their current answer, solid, ticked next time the picker opens.
Mistakes are cheap. Choosing a different row moves the tick, and the badge in the grid follows. Nothing else in the study changes.
V4Typing to jump — m2, or a name
With the picker open, type m2, or ker. The selection jumps to Kerri Ng; Enter chooses her. The tick stays on Martin until Enter.
Type-select, as in any Mac list. Codes and names both match: m2 or ker land on the same row. Nothing is filtered away — v1 lists are short (fewer than ten names, fewer than three moderators), so the list just moves the selection. Filtering a long list is the later search-as-you-type extension.
Selection is not choice. The highlight shows where Enter will land; the tick shows the current answer. They part company only while the researcher is deciding.
V5Tab into the field — someone new
Tab from the list to the field and type. Enter introduces Mike Alvarez as a moderator, assigns him to this session, and closes the picker.
The hint follows the role — New moderator, New participant, New observer — one key per role, so each language can inflect it.
Typing in the list jumps; typing in the field creates. The two never mix, which is why the field is reached by Tab rather than by just typing.
V6Opened on an unknown moderator
Session 4: nothing named the moderator. No tick, because there is no answer yet; the selection starts on the first known moderator.
No tick until there is an answer. The list is all possibles. With fewer than three moderators in most studies, starting on the first one makes the common case click, Enter — but it is a guess the picker should not be making on the system’s behalf; see the questions.
V7Misidentified — switching the role
The pipeline called this speaker the moderator; the researcher knows it was a participant. The Participant segment lists the study’s participants.
Only when the role is wrong. The picker opens on the speaker’s own role; nobody touches the segments when the pipeline got it right. That’s Me is absent on the Participant segment.
This is the expensive one. Choosing p4 moves the speaker out of the moderator slot: their code changes, their turns become quotable, and quotes and stars keyed by the old code follow. The plan measured a role change as touching seven things (design-people §J).
C1Real NSSegmentedControl, rows and NSTextField, beside their CSS twins
Rendered by a throwaway Swift probe (AppKit, macOS 27.0, @2x, light and dark). The CSS twin draws exactly the same content with the calibrated SF ladder.
What is measured, and where it comes from. Type: the calibrated tokens-desktop.css ladder (Type Parity Inspector, macOS 26.4.1 @2x) — the probe confirms segmented controls, rows and fields all use the 13pt system font, which is --bn-text-label at --bn-text-label-lh. Selected-row blue: NSColor.selectedContentBackgroundColor, read from AppKit — #0064E1 light, #0059D1 dark, deliberately not the accent #007AFF the first draft used. Tick green: NSColor.systemGreen, #34C759 / #30D158. Placeholder and separator: the system's own alpha-black/white, which --bn-colour-muted and --bn-colour-border approximate.
What is sampled, so approximate. The segmented control has no named system colour, so its track and selected segment are pixel samples of the render (device RGB, window not key): the light track equals --bn-nav-selection-bg exactly; the dark one does not. On macOS 27 the selected segment is a grey pill, not the white raised one the first draft drew.
What is not measured at all. The popover’s own corner radius, arrow and material (a real NSPopover draws a translucent material the web cannot sample), the focus-halo width, and how the controls look in a key window rather than an inactive one. Those need a probe that presents a real popover in a key window.
1. Web or native. The grid lives in the web view, so a web popover works in the browser, the export and the Mac app with one implementation. A native NSPopover feels more like the Mac and needs the bridge the search work just built. NSMenu is the wrong primitive: it does not host a field or a segmented control comfortably. Recommendation: the web popover first.
2. Fixing a spelling. Clicking a name now opens the picker, so the grid no longer edits names in place. Where does “Martin B Storey” become “Martin Storey”? Options: the pencil stays for spelling only; or the picker’s field edits the ticked person when one is selected.
3. Opening on an unknown slot (V6). Selection on the first known moderator (fast), or on nothing so Enter does nothing until the researcher moves (no accidental guess)?
4. “I don’t know who it was.” Is a row needed to put a slot back to m?, or is that too rare to earn one?
5. Role changes (V7). Ship the Participant and Observer segments with the first picker, or after, with the undo a recode needs?
6. Participant list scope. All study participants, this session’s first, or this session’s only?
String plan
| Key | English (owner to confirm) | Status |
|---|---|---|
sessions.speakerPlaceholder.{moderator,participant,observer} | Moderator · Participant · Observer | shipped — the segment labels |
people.thatsMe | That’s Me ({{name}}) | new (already planned) |
people.new.{moderator,participant,observer} | New moderator · New participant · New observer | new — replaces the planned single people.newModerator |
Inventory — what is new
- Three segments on the shipped
.dimension-toggle: one divider rule (the shipped one is:first-child, two segments only). - A proposed name:
.bn-speaker-editable-name.proposed, muted, ink on hover. - The dotted surround on a person badge: one dashed ring round the split badge, as
.badge-proposeddraws on a tag. - The green tick in the shipped check gutter, in the shipped accept colour (
--bn-colour-positive). - The picker box: the shipped
.export-dropdown-menuanchored to a badge, plus a head row (the segments) and a field row (the shipped.tag-input-box). - The person glyph for That’s Me, drawn in-house for the web.
- The Mac popover in Part 2 is an approximation of AppKit; it is not CSS that would ship.
Three states, no controls. Proposed: the dotted surround round the whole badge, as on a proposed tag, and the name in grey. Confirmed: a plain badge, the name in solid ink. Unknown:
m?and the shipped grey italic Moderator, unchanged. Nothing in the grid asks a question.Clicking the name or the badge opens the picker (Part 2). That is where yes is said. Hover darkens a proposed name to show it will respond.