MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-141

2.7.1 Design — the type + executor picker on the create modal + the detail rail

Done
Description

Estimate: 40m

Type: design (the planning-time design gate, Principle #13 + the design-reference rule). The picker UI (2.7.4) depends on this card; without it the new type/executor element would be improvised onto two existing surfaces, which is forbidden (notes.html #31).

Produce the design asset for the work-item type + executor picker under motir-core/design/work-items/. Author it as a *.mock.html mockup built from the real design system (the shipped components/ui/* primitives + the --el-* colour tokens + the [data-display-style] shape tokens) — NOT a .pen. The HTML route is preferred when a coding agent produces the design (no translation gap; the reviewer sees the actual tokens). A PNG export is optional; the .mock.html is the source of truth (MOTIR.md § Design-reference rule).

Mirror (VERIFIED — Atlassian). In Jira the issue-type control IS the kind hierarchy and routing-who is the ASSIGNEE field (an AI agent "shows up as an assignee"). Motir adds a NEW, separate type+executor control alongside the existing kind/assignee affordances — draw it so it reads as a sibling of the type-icon area, NOT a replacement for kind. The per-type hue mirrors the shipped IssueTypeIcon treatment (a per-kind hue already exists — extend the same idea to the ten TYPE members via --el-type-*-style tokens).

Surfaces to draw (multi-panel board, EVERY panel — the multi-panel rule, mistake #31):

  • Panel 1 — the type picker on the CREATE MODAL. A dropdown / combobox offering exactly the ten taxonomy members (code, design, test, content, research, review, decision, deploy, manual, chore), each row a per-type hued chip + label. Show that it appears only when the chosen KIND is a leaf (task/subtask/bug) and is ABSENT for epic/story. Show the empty/unset state (type may be left null).
  • Panel 2 — the executor control + the default-seeding behaviour. The coding_agent | human toggle/segmented control sitting next to the type picker, and the COPY/affordance showing that choosing a type SEEDS the executor from the default map (e.g. code → coding_agent, manual → human) while leaving it overridable. Draw both the agent-selected and human-selected states.
  • Panel 3 — the type chip + executor indicator on the DETAIL RAIL. How a typed item reads on the issue detail: a type chip (hued, like an IssueTypeIcon-adjacent chip) + a compact executor indicator (an agent vs person glyph), each inline-EDITABLE (click → the same picker). Show a leaf WITH a type and a leaf with type = null (the "set a type" affordance).
  • Panel 4 — the ten-type legend + hue map. A reference panel showing every type member with its hue + its executor default, so the palette is decided once (the per-type --el-type-* role each chip uses — AA contrast: hue in the chip BACKGROUND with --el-text-strong, finding #35; never a page-level tint).

Also write design/work-items/design-notes.md naming the exact primitives used per surface (the Combobox/DropdownMenu, Pill/ chip, the segmented control, IssueTypeIcon adjacency), the exact copy strings (the ten labels + the executor labels + the "set a type" empty copy), the placement decisions on each surface, the per---el-* colour role for each element (incl. each per-type hue + the executor glyph colours), and a "primitives composed (no hand-rolling)" checklist (the design-notes.md convention 1.3.3 / 1.5.1 / 7.0.1 established).

Branch. design/PROD-2.7.1-type-executor-picker. The design/* prefix gate skips CI E2E + the Vercel preview deploy (MOTIR.md § Plan-seed Workflow) — this PR only edits design/work-items/**, no app code.

Acceptance criteria

  • motir-core/design/work-items/type-executor-picker.mock.html exists, renders the four panels above, and references ONLY --el-* tokens + [data-display-style] shape tokens (no Tier-0 --color-*, no hand-rolled spacing — the motir-core/CLAUDE.md § colour / shape rules).
  • motir-core/design/work-items/design-notes.md exists, names every primitive composed + every copy string + the per-element --el-* role (incl. the ten per-type hues + the executor-default behaviour).
  • The mock shows the type picker as LEAF-ONLY (absent for epic/story), the type-null/unset state, the executor default-seeding-then-override behaviour, and the editable detail-rail chip + indicator.
  • The mockup composes ONLY shipped primitives (Combobox / DropdownMenu, Pill, the segmented control, IssueTypeIcon) — if a genuinely new primitive is needed, that is a NEW design/ subtask, not a code workaround.

Context refs

  • motir-core/design/work-items/ — the existing design area for the create modal + detail rail (mirror its layout + design-notes.md shape; the picker is a NEW element ON these surfaces).
  • motir-core/components/issues/IssueTypeIcon.tsx — the per-KIND hue pattern the per-TYPE hue extends (--el-type-*).
  • motir-core/components/ui/Pill.tsx, the DropdownMenu/Combobox primitive, the segmented-control primitive — the composable surface.
  • motir-core/app/globals.css — the --el-* colour + [data-display-style] shape tokens (the swap layer the mock references; the per-type hue tier is added here in 2.7.4).
Status
Done
Type
Sub-task