Motir

Estimate: 40m · Depends on: 6.2.2

The design asset for every 6.3 surface. design/reports/charts.mock.html (4.6.1) designs ONLY the chart visual language + burndown/velocity — the dashboard surface, the two new chart FORMS (donut, two-series difference/area), and the Reports hub + report pages are undesigned (the design-gate NONE-exists case). The "filter missing" widget card + the saved-filter picker vocabulary come from 6.2.2 (carried in dependsOn — inherit, don't redraw). Output: design/reports/dashboard.mock.html + PNG + a design-notes section appended to design/reports/design-notes.md. Built FROM the real design system (the 4.6.1 convention — --el-*/--el-chart-* + shape tokens, shipped Card/Modal/Combobox/EmptyState/ErrorState/Pill + the 2.5 issue-row vocabulary). Render checklist + AA + dark parity. Mirrors: the verified Jira dashboard/gadget grammar; the 4.6.1 chart language for everything chart-shaped.

Specify, panel by panel:

• Dashboards home (/dashboard) — the dashboards list (mine + workspace-shared, owner + access badges), create (name + access), the empty state ("create your first dashboard"), and the switcher between dashboards.
• The dashboard grid — view vs EDIT mode (the Jira split): the column layout picker (1/2/3), widget cards in the Card chrome (title, source line — filter or project name —, the per-type body, the overflow menu: configure / remove), drag affordances + drop targets between/within columns (the 3.2 dnd-kit vocabulary), the 20-widget cap state, and the add-widget picker (the three types with thumbnails + one-line descriptions).
• Widget config panels — per type, driven by the registry editor kinds: the data-source control (saved filter Combobox — the 6.2 list — OR the project; exactly one), filter-results (page size ≤50), distribution (the statistic-type Combobox), created-vs-resolved (period segmented control, days-back stepper, cumulative toggle).
• The widget bodies — filter-results: the compact issue table (fixed columns: key, title, kind glyph, status Pill, priority, assignee avatar; the 2.5 row vocabulary at gadget density) + its pager; distribution: the donut (a NEW chart form in the 4.6.1 language: same frame/legend grammar, counts + percentages in a visible text legend — colour never the sole signal) with a segment-hue note (--el-chart-* growth: a small categorical ramp, dark-parity checked); created-vs-resolved: the two-series difference/area form (created vs resolved lines, the red/green difference fill per the verified mirror, the cumulative variant).
• Widget states — loading skeleton, error (ErrorState), empty (zero matching issues), no-access (the 6.4 per-viewer state: a locked card, no counts), and stale — the "filter missing" degraded card 6.2.2 already designed for exactly this surface: INHERIT it (reference, don't redraw), adding only the in-grid reconfigure affordance.
• Reports hub (/reports) — the grouped index the stub page becomes: the agile group (burndown / velocity / sprint report — link cards into the SHIPPED surfaces, referenced greyed, never redrawn) + the analysis group (created-vs-resolved, status distribution).
• The two report pages — full-form chart + the config controls (the same registry editor kinds as the widget panels, page-level: scope, period/days-back/cumulative; statistic type), the zero-data state, and the a11y visually-hidden data-table note (the 4.6.1 pattern).

Acceptance criteria

• The mockup + PNG + notes exist, composed from shipped primitives + the 4.6.1 chart language; render checklist + AA + dark parity pass (incl. the new categorical donut ramp).
• Panels cover: dashboards home + create + empty, grid view/edit + layouts + drag + cap + add-picker, all three config panels, all three widget bodies, every widget state (loading/error/empty/no-access/stale), the Reports hub, and both report pages.
• design-notes.md names the widget-type ↔ registry editor/renderer mapping (the 6.3.1 UI contract), the new --el-chart-* categorical tokens, the donut + difference-area specs the 6.3.4 primitives build, and records the extension slots (audiences, wallboard, refresh, more gadgets).
• No improvised primitive; token needs recorded.

Context refs

• design/reports/charts.mock.html + design-notes.md (4.6.1) — the chart language + a11y pattern this extends
• design/work-items/saved-filters.mock.html (6.2.2) — the "filter missing" degraded card this surface inherits + the filter-picker vocabulary
• design/work-items/list.mock.html (the issue-row vocabulary the filter-results body compacts); design/boards/ (the dnd drag/drop grammar)
• The verified Jira dashboard/gadget/report facts in the Story 6.3 description
• Findings #35/#54; the design-mockup render checklist; can-render-ui-headless