Motir

The surface itself, on the AI-planning settings page — the feature-finishing card, and the first point at which a person can actually do this.

Start from the design asset, not from this description: open design/ai-settings/, read the .mock.html source rather than only the .png, and match its layout, its copy and the primitives it names. Where the mock is unspecified about a detail inside a surface it draws, fall to the named primitive; where it does not depict an element at all, that is a design gap to surface, not to improvise.

Build the list, the detail, the empty state and the access path the design settles. The retired row treatment is drawn but not wired here — a sibling story adds the action; this card renders whatever state the data already carries, so the two do not fight over the same markup.

Reuse, do not re-invent. Compose from components/ui/* primitives, route colour through --el-* element tokens and shape through the semantic shape tokens — never Tier-0 --color-* or raw rounded-md / p-2. The surrounding page is built this way and a hand-rolled container will read as a different product.

Copy lands in both catalogs, en and zh, under the existing aiPlanning.* namespace.

Acceptance criteria

• List, detail, empty state and access path match the design asset; the PR names the asset and any place it was fallen back from, with the rung used.
• Rows show what the design specifies and no more; the detail shows the lesson's full text, its axes, its provenance and its dates.
• The empty state renders for a project with no lessons and says what would appear there.
• Retired rows render in their designed treatment from existing data; no retire action is added here.
• Only components/ui/* primitives and element/shape tokens — no Tier-0 colours, no raw utilities.
• Copy in en and zh; the catalog-parity gate passes.
• A "How to test" section in the PR body: the route, the sign-in and role precondition, the seed that makes the list non-empty, and what to click and see for each criterion including the empty state.
• Unit tests for the components' states; the assembled walk belongs to the E2E card.

Context refs

• motir-core design/ai-settings/ — the asset; read the .mock.html source and every panel, not just the render.
• motir-core app/(authed)/settings/project/ai-planning/page.tsx, _components/AiPlanningSettingsEditor.tsx — the page this lands in and its i18n namespace.
• motir-core components/ui/, app/(authed)/tokens — the primitives and the token specimen.
• MOTIR-3332 — the design this is built to.
• MOTIR-3337 — the route it reads from.