Skip to content

feat(ui): govern chat conversation-flow display onto @maka/ui Base UI primitives #332

Description

@Astro-Han

Context

The renderer's interactive primitives (packages/ui/src/primitives/*) are already on the shadcn Base UI + Tailwind substrate (cva, data-slot, @base-ui/react). The chat conversation-flow display layer is the last bespoke island: packages/ui/src/components.tsx (MessageBody ~L4441, TurnSummary ~L4618, TurnView ~L4697, ToolActivity ~L6165) renders hand-written maka-* classNames whose CSS is spread across: styles/tool-output.css, styles/tool-stream.css, chat selectors in maka-tokens.css, .maka-turn-* in styles/settings/models.css (model-catalog preview), and .maka-bubble-truncated in styles/reasoning-panel.css. (styles/chat-message.css is the empty/hero state, not the main flow.)

Goal: migrate the conversation flow (bubbles, status/tool markers, tool/result/preview surfaces) onto a small set of @maka/ui chat primitives (Message/Bubble/Marker/Attachment), retiring the bespoke shell CSS, with zero visual change. This is governance (one substrate + a test net), not a redesign; the visual refresh is a separate follow-up.

Invariants (every slice)

  • Zero visual change, locked by computed-style/cascade contract tests + before/after screenshots.
  • Keep the neutral user-bubble token path (--chat-user-bg / --user-message-bubble); never switch it to primary/accent.
  • Replace only the bubble/row shell. Markdown prose under .maka-bubble-assistant (task lists, code blocks, tables, blockquotes, links; maka-tokens.css:1088+) is OUT of scope and must be preserved. Do not touch .messages (chat scroll container).
  • No change to runtime, streaming, Markdown rendering, permission, turn model, tool output, attachment IPC.
  • New primitives live in packages/ui/src/primitives/chat* and are exported from packages/ui/src/index.ts; do not grow the components.tsx sink.
  • Each slice deletes its retired CSS. scripts/check-dead-css.mjs --check only scans styles/ + reference-shell.css (NOT maka-tokens.css); the renderer-style-pruning-contract test does reach tokens via styles.css imports. Lean on contract tests + manual grep of maka-tokens.css.

Slices (flat PRs off main, landed in order)

Next component after this batch

  • Composer — input-side component. CSS spans styles/composer.css AND a chunk in styles/tool-output.css.

Out of scope (stays hand-written)

Design tokens (maka-tokens.css), Markdown prose, feature-page layout CSS (sidebar / settings / module-pages / onboarding / etc.), and no-equivalent primitives (overlay-scroll-area, frame, kbd, skeleton, spinner, empty, alert, input-group).

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions