Motir

Estimate: 40m · Depends on: 3.2.1

The design asset every UI subtask of this story builds against. The 3.2.1 board mockup drew the Kanban surface only — it has NO sprint header, NO points summary, NO no-active-sprint empty state, and NO complete-sprint affordance, i.e. those Scrum surfaces are unspecified, which under the design gate means NO design exists. So this subtask produces it FIRST (mirrors 1.0.5 / 1.2.1 / 1.3.3 / 1.5.1, the 3.2.1 board design it extends, and the 3.3.1 swimlanes/WIP extension). Output: design/boards/scrum.mock.html (an HTML mockup built from the real design system — components/ui/* + the --el-* tokens, so a coding agent has no Pencil→code gap) + a PNG export + an extension of design/boards/design-notes.md (a "Scrum board (Story 4.5)" section) naming the composing primitives, copy, and placement. --el-* only (no Tier-0 --color-*); shape via the element shape tokens; AA-safe; Jira/Linear scrum boards as the mirror.

This is chrome over the EXISTING board — draw the header + states, REUSE the 3.2/3.3 board body. Do NOT redraw columns, cards, drag states, swimlanes, or WIP — show them as the reused board beneath the new header (reference, don't re-spec). The net-new surfaces:

Specify, panel by panel:

• Sprint header — above the board: the sprint name (+ a state chip), the goal (one line, truncated with a reveal/tooltip for the full text), the date range + time remaining ("5 days remaining" / "Ends Jun 14" / an "Ended" overdue treatment), and the points summary — committed / completed / remaining as labelled numbers (text+number, never colour alone — finding #35). Reuse shipped primitives (Pill for the state chip, the card/heading type scale, Tooltip for the goal reveal); do not invent a header widget. Note the header is a labelled landmark.
• Per-column point totals — the Jira "sprint health" per-column point pill in the reused column header (e.g. a muted 8 pts); specify where it sits relative to the 3.2.1 card-count badge + the 3.3 WIP slot so the three coexist without crowding.
• Complete-sprint entry point — the button position in the header. Make explicit in the notes that the complete-sprint FLOW (confirm + carry-over + report) is Story 4.4; this asset specifies only the entry point's placement/label, and 4.5 reuses 4.4's flow (or renders the button as a seam 4.4 wires — the 3.2 Filter-seam pattern).
• No-active-sprint empty state — the board area replaced by an EmptyState: an icon, "No active sprint", a one-line explainer, and a CTA to the Backlog (Story 4.2). Draw it distinct from the 3.2.6 empty-board ("No issues") state — this is "no sprint", not "no issues".
• Points-degradation + states — the header when points are unestimated (figures show "—", not NaN); the loading header (skeleton) over the 3.2.2 board scaffold; the overdue / "Ended" sprint treatment.

Acceptance criteria

• design/boards/scrum.mock.html + a PNG export + a "Scrum board (Story 4.5)" section in design/boards/design-notes.md exist; the mockup is built from components/ui/* + --el-*/element-shape tokens only (no Tier-0 --color-*, no raw rounded-*/p-* for control shape), passes the render checklist (icon viewBox, no nested buttons, prettier), and is AA-safe.
• The mockup draws: the sprint header (name + state chip + goal-with-reveal + date range + time remaining + committed/completed/remaining points), the per-column point total pill coexisting with the 3.2.1 count badge + 3.3 WIP slot, the complete-sprint entry-point placement, the no-active-sprint EmptyState (CTA → Backlog, visually distinct from the 3.2.6 no-issues state), and the unestimated ("—") + overdue ("Ended") + loading states.
• design-notes.md names each composing primitive (Pill, Tooltip, EmptyState, the heading scale, the column-header slots), states that the complete-sprint FLOW is Story 4.4 (this asset is the entry point only), states that the burndown CHART is Story 4.6 (the header shows numeric remaining + a chart seam), and documents the header-landmark + not-colour-alone (finding #35) rules.
• The asset REUSES (references, does not redraw) the 3.2/3.3 board body; it specifies only the sprint chrome + scrum-specific states.

Context refs

• design/boards/board.mock.html + design-notes.md (3.2.1) — the base board this extends (column header slots, the reserved controls/WIP slots, the empty/loading/error states to reference)
• design/boards/swimlanes-wip.mock.html + the "Swimlanes + WIP (Story 3.3)" notes (3.3.1) — the column-header slot layout the point-total pill must coexist with
• components/ui/* (Pill, Tooltip, EmptyState, Button) + the heading type scale — the primitives to compose for the header
• app/globals.css --el-* + element-shape tokens; the /tokens specimen route
• Jira / Linear scrum-board active-sprint view as the mirror; finding #35 (not colour-alone), #54 (use the palette)