5.8.1 Design — work-item mention picker + internal-link chip (+ title link, archived/deleted states)
Type: design · Executor: coding_agent · Repo: motir-core (design assets). Design-first — no blockers.
Produce the three-file design asset for the work-item internal-link surfaces under design/work-items/internal-links.{mock.html,png} + internal-links notes appended to design/work-items/design-notes.md. Composes existing assets — does NOT redraw them (the reuse-axis / design-compose rule): ground the picker in the shipped design/work-items/comments.mock.html mention popup and the chip/relationship grammar in design/work-items/relationships.mock.html + links.mock.html; cite those paths and state this asset does not redesign them.
Surfaces to draw (each from live primitives + --el-* color and shape-semantic tokens only — never Tier-0):
- The unified
@picker — extends the member popup (MentionList) with a work-item section: aCombobox-vocabulary option row = type icon (hue) · key (mono, muted) · title · statusPill. Sectioned "People / Work items" when both match; filter-as-you-type;↑/↓/Enter/Esc+aria-activedescendant(the shipped listbox a11y bar). Empty / short-query ("type to search") / loading / no-results states. - The inline internal-link chip (in rendered body text) — key · title · status badge; hover affordance signalling it opens the quick-view peek. Distinct from the
.mention-chipuser pill (this one carries a status). - State variants of the chip: archived target → muted/dimmed treatment + an "archived" cue; deleted target → strikethrough with the bare key retained; no-access → bare key, no title leak.
- Title link — how a bare
MOTIR-Nin a work item's title renders as a link on the detail header and in the quick-view peek (subtle, doesn't fight the heading weight).
Acceptance criteria
- The three-file set exists (notes +
.mock.htmlbuilt from real primitives + a same-basename.pngPlaywright export, light theme);pnpm format:checkclean (design docs are linted — prettier the assets). - Every state in (1)–(4) is drawn, including archived/deleted/no-access chips and the empty/loading picker states.
design-notes.mdnames each primitive, the--el-*/shape tokens, the copy, AND the access path (the@trigger inside the editor; the chip's peek entry) — and citescomments.mock.html+relationships.mock.html/links.mock.htmlas the composed sources.- Self-review pass: icon viewBox, no nested interactive elements (the chip is a single control), AA contrast on muted/strikethrough states.
Workflow it draws — linked (relates_to, not blocked_by): the picker + autolink behaviour is specified by 5.8.3 (service) and 5.8.5 (editor); the chip states by 5.8.6 (render). Read those descriptions as the spec; do not invent the interaction.
Context refs: design/work-items/comments.mock.html, design/work-items/relationships.mock.html, design/work-items/links.mock.html, design/work-items/design-notes.md, components/ui/markdownEditorMentions.tsx (MentionList), components/ui/markdown-editor.css (.mention-chip).