Motir

Estimate: 40m

The design asset every UI subtask of this story builds against. detail.pen draws ONLY the Activity placeholder ("Activity" / "Comments coming in Epic 5") — the thread, composer, mention popup, and every comment state are whole elements NO design specifies, which under the design gate == no design exists, so this subtask produces it FIRST (mirrors 1.0.5 / 1.2.1 / 1.3.3 / 1.5.1 and the sibling HTML-mockup design subtasks 2.4.8 / 2.5.7 / 4.6.1). Output: design/work-items/comments.mock.html (built from the real design system — components/ui/* + --el-* colour + element-semantic shape tokens, no Pencil→code gap) + a PNG export + a new section in design/work-items/design-notes.md naming primitives, copy, and placement. Passes the design-mockup render checklist (render + screenshot every panel; icon viewBoxes; no nested interactive elements; prettier; AA). Mirror: the Jira Cloud issue-view Activity section (threaded comments, GA 2025).

Specify, panel by panel:

• Placement — the comments stream INSIDE the existing Activity section card (the ContentSectionCard grammar, after Relationships — where the placeholder sits today). A filter seam in the section header (Comments active; History as the documented 5.5 extension slot, drawn disabled the way 2.5.3 drew the view-switcher seam) + the sort toggle (oldest/newest-first, default oldest — per-user, the Jira shape).
• Comment row — initial-letter Avatar · author name · relative time (absolute on hover/title) · the "Edited" tag (muted, after the time) · the rendered Markdown body (MarkdownView, mention chips inline) · quiet row actions (Reply on roots; Edit/Delete per the permission matrix — drawn present/absent by role). Replies indent ONE level under their root (single-level threading); a long thread collapses its middle behind "Show more replies" (the Jira auto-collapse).
• Composer — the MarkdownEditor primitive (2.3.5) in a compact comment mode with placeholder copy, a primary Comment button (disabled while empty/submitting) + ghost Cancel when editing; the edit-in-place state (composer replaces the row body, Save/Cancel); the reply composer (indented under the thread, the replied-to author pre-mentioned as a chip — the Jira auto-tag).
• Mention popup — typing @ anchors a member listbox at the caret: the Combobox option-row vocabulary (Avatar · name · secondary email · keyboard-navigable, aria-activedescendant), filtered as you type, fed by the viewable-member candidates. The mention chip as rendered in a posted body (accent-tinted, AA-safe — hue in the tint background, --el-text-strong text, finding #35).
• Pagination — "Show more comments (N older)" at the thread's older edge (position flips with the sort direction) + the total count in the section header; the loading skeleton rows; the empty state ("No comments yet — start the conversation", never blank); the ErrorState.
• Destructive + restricted states — the delete confirm popover (naming the reply count on a root: "Also deletes N replies — comments can't be restored", the hard-delete truth); the viewer (read-only) state: thread visible, NO composer, a quiet "You have view-only access" line (the 6.4 read-only grammar).

Acceptance criteria

• design/work-items/comments.mock.html + PNG + the design-notes section exist; built from components/ui/* + --el-*/element-shape tokens only (no Tier-0 --color-*, no raw rounded-*/fixed control padding); passes the render checklist; AA-safe; light + dark parity.
• Panels cover: placement in the Activity card (+ the History filter seam for 5.5 + sort toggle), the comment row (Edited tag, role-dependent actions), single-level replies + "Show more replies", the composer (new/edit/reply with pre-mentioned author), the mention popup + posted mention chip, "Show more comments (N older)" + count, loading / empty / error, the delete confirm naming the reply count, and the viewer read-only state.
• design-notes.md names the composing primitives (ContentSectionCard, Avatar, MarkdownEditor, MarkdownView, the Combobox listbox vocabulary, Pill/chip treatment), the copy strings, the oldest-first default, and documents the History seam as Story 5.5's slot + the padlock (per-comment visibility) as a deliberate non-feature (team-managed Jira parity).
• No improvised primitive: every element composes the shipped design system; the mention chip + any new --el-* token need is recorded in the notes for 5.1.4/5.1.5 to add.

Context refs

• design/work-items/detail.pen + detail.png — the Activity placeholder this fills; design/work-items/design-notes.md — the area conventions + where the new section goes
• components/ui/MarkdownEditor.tsx (2.3.5), MarkdownView, Avatar, Combobox (option-row vocabulary), ContentSectionCard, Modal/popover confirm patterns
• The Jira Cloud issue-view Activity section (threaded comments GA 2025; "Show more comments"; Edited tag; oldest-first default + toggle) — the mirror surface
• Findings #35 (AA: hue in tint bg + strong text), #54 (use the palette); the design-mockup render checklist memory