Skip to content

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

Closed

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).

Activity

  1. added 20 commits that reference this issue on Jun 28, 2026
  2. Astro-Han commented on Jun 29, 2026

    @Astro-Han
    ContributorAuthor

    Closing: the conversation-flow display migration is complete. All six display slices landed on main — PR1 #334 (Bubble/Message), PR2 #337 (Marker), PR3a #348 (ToolOutputStream/LiveIndicator), PR3b #350 (ToolActivity), PR3c #355 (ToolErrorBanner→Alert), PR4 #362 (preview surfaces + previewVariants). The titled goal — govern the chat conversation-flow display (bubbles / status·tool markers / tool·result·preview surfaces) onto @maka/ui primitives with zero visual change — is fully delivered, with a per-slice cascade/computed-style test net.

    The two trailing items were always scoped outside this issue's goal (Later / Next component after this batch) and are not part of the conversation-flow display layer:

    • Composer — input-side component (CSS in styles/composer.css + a chunk in tool-output.css). The genuine last bespoke chat surface; worth a follow-up governance slice using the same literalize pattern. To be tracked separately.
    • MessageScroller — scroll/virtualization behavior; deferred. Its overlay-scroll-area primitive is in this issue's own 'no-equivalent / stays hand-written' out-of-scope list, so there is little shell to migrate and any change would be behavioral (no zero-visual safety net). Revisit only if a concrete scroll need arises.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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