Motir

Estimate: 45m

The design asset for every issue-view surface this story adds. NONE exists: detail.pen predates all three features, and — rung-2 fact — the codebase has no multi-select input primitive (Combobox is single-select; the only multi-select vocabulary is the filter bar's OptionRow rows). Output: design/work-items/labels-components-watch.mock.html + PNG + a design-notes section. Render checklist + AA + dark parity. Mirrors: the Jira issue-view Labels / Components fields and the verified eye-icon watch control.

Specify, panel by panel:

• The multi-select chip picker (the new components/ui primitive 5.4.8 builds — design it ONCE, generically: labels, components, and future Epic-6 facets all compose it): a FieldCard-embedded control showing value chips (label text · remove ×) + a type-to-filter input; the anchored listbox reuses the OptionRow vocabulary (option rows + trailing Check, aria-multiselectable); keyboard-complete (type/↑↓/Enter toggles, Backspace removes the last chip, Esc closes). Chips are --radius-badge — neutral by default (what Components uses), with an optional per-value tint.
• Labels rail card — the picker with the create-row ("Create 'perf-q3'" when no match, the folksonomy affordance), coloured chips (the recorded less-enterprise deviation: tint auto-assigned by name hash into the six --el-tint-* pastels, --el-text-strong text per finding #35; option rows carry the tint swatch dot), the no-spaces inline error, the empty placeholder, the per-issue-cap state, and the read-only (viewer) chip-only rendering.
• Components rail card — the same picker WITHOUT a create-row (admin-managed taxonomy: options come from the project's components; an empty project shows "No components defined" + a quiet admin-page link for admins), chips with the component glyph; read-only state.
• Watch control — the eye + count in the detail header's right group (beside Edit — the shipped ml-auto cluster): watching vs not-watching states (filled vs outline + the count), hover/focus, the W shortcut hint (tooltip). Watchers popover anchored to it: the watcher list (Avatar · name, paged "Show more"), your own row marked, the admin-only add-watcher row (the member-picker vocabulary) + per-row remove for admins, the inline no-view-access error, and the viewer (no-manage) variant.
• States — loading skeletons for the two cards; the optimistic count bump; light + dark.

Acceptance criteria

• The mockup + PNG + notes exist, composed from shipped primitives + the token tiers; render checklist + AA + dark parity pass.
• Panels cover: the generic chip picker (closed/open/typing/keyboard states), labels card (create-row, no-spaces error, cap, empty, read-only), components card (no create-row, empty-project, read-only), the watch control (both states + count) and the watchers popover (list, paged, admin add/remove, inline error, non-admin variant).
• design-notes.md names the primitive's generic API surface (5.4.8 + Epic-6 reuse), the OptionRow vocabulary reuse, the label-colour decision (auto name-hash tint — the recorded deviation), and the header placement (the ml-auto cluster).
• No improvised primitive beyond the ONE designed here; token needs recorded.

Context refs

• design/work-items/ notes + detail.pen (rail + header grammar); CoreFieldsPanel FieldCard + the header ml-auto cluster (issues/[key]/page.tsx)
• IssueFilterBar OptionRow (the multi-select vocabulary) + Combobox (the listbox a11y bar)
• The verified mirror behaviours (eye+count, folksonomy create) + the label-colour deviation in the Story 5.4 description
• Findings #35/#54; the design-mockup render checklist