refactor(ui): split chat-header.css into single-surface files (#546 PR2) - #586
Merged
Conversation
Phase A relocation — zero visual change. chat-header.css held six unrelated
surfaces; each now converges into one correctly-named file:
- toast.css <- .maka-toast-* (viewport, card, variants, enter/exit)
- palette.css <- .maka-palette-* + shared .maka-shortcut-* kbd primitive
- help.css <- .maka-help-* + .maka-confirm-modal
- error.css <- .maka-error-* + .maka-fake-backend-banner
- hero.css <- .maka-hero base + all of chat-message.css (was 100% hero)
- composer.css <- streaming top-sweep (.maka-composer-inner[data-streaming])
moved next to the card chrome it decorates
chat-message.css was 100% empty-state hero with zero message selectors, so it
folds into hero.css (PR4 will repopulate it with the chat bubble). What
remains in chat-header.css is the header bar itself plus the chat shell
layout (.maka-chat-shell / chatViewport / chatContent / chat-jump-bottom).
Verified relocate-only: the multiset of CSS rules across the original
(chat-header + chat-message + composer) is byte-identical to the new layout
(204 rules, 0 lost / 0 added, all 5 keyframes preserved). All CSS converge
contracts and the tailwind compile contract stay green (2134 desktop tests).
Three contracts that pin selectors to chat-header.css by filename now point
at palette.css: radius-nesting-contract (.maka-palette-input-wrap),
renderer-important-audit-contract (.maka-palette-input-wrap input:focus),
menu-highlight-recipe-contract (doc comment).
7 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Phase A relocation pass (zero visual change) for
chat-header.css, which held six unrelated surfaces. Each surface now converges into one correctly-named file, per the #546 PR2 plan.Why
Refs #546. The post-#520 audit found
chat-header.css(972 lines) mixing 6 roles: toast / palette / help+confirm / error+fake-banner / hero / chat-header chrome. You can't polish a surface whose styles are scattered, so this PR relocates first (one surface, one file), with no visual change, governed by the converge-contract pattern established in #584.Scope
Split out of
chat-header.css(+chat-message.css):toast.css.maka-toast-*(viewport, card, variants, icon/copy/action/close, enter/exit keyframes)palette.css.maka-palette-*+ the shared.maka-shortcut-*kbd primitive (densest user is the palette)help.css.maka-help-*+.maka-confirm-modalerror.css.maka-error-*+.maka-fake-backend-bannerhero.css.maka-herobase + all ofchat-message.css(it was 100% empty-state hero, 0 message selectors)Plus one cross-file move:
.maka-composer-inner[data-streaming="true"]::before+@keyframes maka-processing-sweep) moves fromchat-header.cssintocomposer.css, next to the card chrome (rest / focus) it decorates.What remains in
chat-header.css: the header bar itself (.maka-chat-header, status cluster, alert/status pills) + the chat shell layout (.maka-chat-shell/chatViewport/chatContent/chat-jump-bottom). The chat shell is a distinct surface not named in the PR2 scope, so it's left for a later PR rather than moved to an unspecified target.chat-message.cssis deleted — it was 100% hero content. PR4 will repopulate it when the chat bubble is extracted from TSX into CSS.Contract follow-ups (filename pins that pointed at
chat-header.cssnow point atpalette.css):radius-nesting-contract—.maka-palette-input-wraplabelrenderer-important-audit-contract—.maka-palette-input-wrap input:focusallowlist entrymenu-highlight-recipe-contract— doc commentNot included: any polish, token, or selector-value change. No TSX touched.
Verification
Relocate-only proof. The multiset of CSS rules across the original (
chat-header.css+chat-message.css+composer.css) is byte-identical to the new layout — 204 rules, 0 lost / 0 added, all 5@keyframespreserved (incl.maka-processing-sweep). Selector prelude + declaration body matched per rule.Contracts green.
npm run -w @maka/desktop test→ 2134 pass / 0 fail, including:renderer-tailwind-compile-contract(compiles the fullstyles.cssimport tree)composer-container-single-source-contract(streaming::beforecarries[data-streaming], so it's excluded from the rest-state single-source count — unaffected by the move)npm run -w @maka/desktop typecheckclean.Screenshots: not attached. This is a pure CSS relocation with proven rule-equivalence, so there is no visual delta to capture. The repo's own guidance is that the screenshot harness fixes viewport/seed and state-dependent regressions slip through it; the rule-equivalence proof + converge contracts are stronger evidence of zero visual change here. Dual-theme screenshot verification can be added on request.
User-facing impact
None. Zero visual change by construction.
Reviewer notes
chat-header.css, imported beforecomposer.css; now it's insidecomposer.css). Its selector.maka-composer-inner[data-streaming="true"]::beforehas no competing rule today (the oldtool-output.css::before { content: none }reset was already removed), so moving it later in the cascade only strengthens it — no visual change.chat-message.css → hero.cssshows as a git rename (72% similarity); the remainder is the.maka-herobase rule moved in fromchat-header.css.Checklist