Motir

The none-exists case: grep -ci lesson over design/ai-settings/ai-planning-settings.mock.html and design-notes.md returns 0. No lesson UI is drawn, so nothing downstream may be built until it is.

Design against shipped reality — RENDER it first. The AI-planning settings page already exists and ships three setting groups (auto-plan, sprint, planner). Screenshot the running page before drawing anything, and compose the new surface from the primitives it already uses. Do not redraw a stylised stand-in of a page that exists.

Draw the WHOLE surface in one pass, including the states a later story implements — designing this twice is how the two halves acquire different seams:

1. The list — what a row shows: the takeaway, when it was last seen, recurrence count, the axes it applies to. Enough to decide whether to open it, and no more.
2. The detail — the full lesson (title, body, why, howToApply), its axes, its provenance, its dates. The screen that answers "why is the planner telling me this?"
3. The empty state — the common case for weeks, and the moment the feature explains itself. What would appear here, and why.
4. The RETIRED row treatment and the retire affordance — built by a sibling story, drawn here.
5. The ACCESS PATH — draw the door, not just the room. How a person reaches this from the settings surface they are already on: a fourth group on the page, a sub-route, a link. Naming the route in prose is not drawing it.

Ground the copy: this surface is about a mechanism a reader has never seen, so the words carry as much of the design as the layout. Where the sibling setting story's explanation and this surface's copy touch, they must say the same thing.

Deliver the three-file set — design-notes.md + *.mock.html built from the real design system + a same-basename .png — and route colour through element tokens and shape through the semantic shape tokens, never Tier-0 or raw utilities.

Acceptance criteria

• The three-file set lands in design/ai-settings/, same-basename, with design-notes.md naming the primitives, the copy and the access path.
• The shipped AI-planning settings page is rendered and screenshotted first, and the mock composes from its actual markup rather than a redrawn approximation.
• All five elements above are drawn, retired state and retire affordance included.
• The access path is DRAWN — a reader can see how they get here.
• The mock uses components/ui/* primitives and --el-* element tokens; no Tier-0 colours, no raw rounded-*/p-*.
• design-notes.md records what the surface deliberately does NOT do — global lessons are not shown or editable here.
• Lands on a design/* branch.

Context refs

• motir-core design/ai-settings/ai-planning-settings.mock.html, .png, design-notes.md — the existing asset to extend.
• motir-core app/(authed)/settings/project/ai-planning/page.tsx, _components/AiPlanningSettingsEditor.tsx — the shipped surface to render and compose from.
• motir-core components/ui/, app/(authed)/tokens — the primitives and the token specimen.
• MOTIR-3330 — the retire action whose states this draws.
• MOTIR-3331 — the setting whose explanation this copy must agree with.