Motir

Estimate: 35m

The design asset the /issues quick view needs — a peek overlay that shows a work item in a modal without leaving the list, with a clear path to the full detail page. Neither tree.png nor the 2.4 detail design draws this surface, so its code (2.5.19) is blocked on it — the planning-time design gate (notes.html mistake #31), the same gap 2.5.7 / 2.5.9 closed for the List view and the filter popover. Produce, under design/work-items/, a quick-view.mock.html (built from the live design system — components/ui/* + --el-* tokens, preferred so the coding agent composes the same primitives, incl. the existing components/ui/Modal) OR a .pen+PNG, plus a design-notes.md section, covering:

• The row trigger: how a row exposes "quick view". The tree/list rows are already a whole-row link to /issues/[key] (2.5.3 / 2.5.8), so the trigger CANNOT be a <button> nested inside that anchor (no nested interactive elements). Specify the resolution — e.g. a dedicated quick-view icon button in a trailing row-actions cell that sits outside the row link (deliver the row link as a stretched/overlay link, not a wrapping <a>), its hover/focus affordance, tooltip, and whether it shows on hover or always.
• The modal layout: a condensed subset of the 2.4 detail page — type icon + PROD-N identifier + title, the Status Pill, assignee avatar, a description excerpt, and the few key meta fields worth a glance. Decide what the peek shows vs. what stays detail-only (don't rebuild the whole detail page in a modal). Reuse the detail/row vocabulary (IssueTypeIcon · Pill · avatar) — no new visual primitive.
• The prominent "Open full page →" affordance (link/button) that routes to /issues/[key], plus the header identifier — both clearly go to the detail page.
• Close affordances: the × button, Esc, and backdrop click; the focus-trap / return-focus behaviour the Modal primitive already gives.
• The peek's loading state (the item's fields fetch when the modal opens) and a graceful not-found / no-access state (a stale or forbidden key in the URL).
• Works opened from both the Tree and the List view (shared row cells), and the responsive / narrow-width treatment (centered modal vs. full-height sheet on mobile).

Mirror the output convention of the prior design subtasks (2.4.7 / 2.4.8 / 2.5.7 / 2.5.9). Colour only through --el-*; status via Pill tones; type icons take their type hue; AA-safe (finding #35).

Acceptance criteria

• A design/work-items/quick-view.mock.html (or .pen+PNG) + a design-notes.md entry exist, naming the composing primitives (incl. Modal), the condensed field set, the copy, and every state below.
• The row trigger is specified as a NON-nested affordance compatible with the existing whole-row link to /issues/[key] (no <button> inside an <a>), for both Tree and List rows.
• The modal specifies its content, the "Open full page →" link to the detail page, the close affordances, and the loading + not-found/no-access states (multi-panel).
• Reuses the detail/row visual vocabulary — no new visual primitive invented; consistent with tree.png + the 2.4 detail design. Colour flows only through --el-*; AA-safe (finding #35).

Context refs

• The 2.4 detail-page design (design/work-items/detail.* + design-notes.md) — the field vocabulary the peek condenses
• design/work-items/tree.png (+ tree.pen) + list.mock.html (2.5.7) — the row designs the trigger attaches to
• components/ui/Modal (the 2.3 CreateIssueModal + the detail surfaces use it) + components/ui/* primitive inventory + app/globals.css --el-* tiers + the /tokens route