Skip to content

refactor(ui): split chat-header.css into single-surface files (#546 PR2) - #586

Merged
Astro-Han merged 1 commit into
mainfrom
refactor/546-pr2-chat-header-split
Jul 6, 2026
Merged

refactor(ui): split chat-header.css into single-surface files (#546 PR2)#586
Astro-Han merged 1 commit into
mainfrom
refactor/546-pr2-chat-header-split

Conversation

@Astro-Han

Copy link
Copy Markdown
Contributor

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

New file Content moved
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-modal
error.css .maka-error-* + .maka-fake-backend-banner
hero.css .maka-hero base + all of chat-message.css (it was 100% empty-state hero, 0 message selectors)

Plus one cross-file move:

  • The composer streaming top-sweep (.maka-composer-inner[data-streaming="true"]::before + @keyframes maka-processing-sweep) moves from chat-header.css into composer.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.css is 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.css now point at palette.css):

  • radius-nesting-contract.maka-palette-input-wrap label
  • renderer-important-audit-contract.maka-palette-input-wrap input:focus allowlist entry
  • menu-highlight-recipe-contract — doc comment

Not 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 @keyframes preserved (incl. maka-processing-sweep). Selector prelude + declaration body matched per rule.

Contracts green. npm run -w @maka/desktop test2134 pass / 0 fail, including:

  • renderer-tailwind-compile-contract (compiles the full styles.css import tree)
  • composer-container-single-source-contract (streaming ::before carries [data-streaming], so it's excluded from the rest-state single-source count — unaffected by the move)
  • all converge contracts (typography, radius, spacing, control-height, box-shadow, letter-spacing, font-weight, z-index, focus-ring)
  • the three filename-pinned contracts above, updated

npm run -w @maka/desktop typecheck clean.

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

  • The composer streaming snippet is the only rule whose cascade position shifts (it was in chat-header.css, imported before composer.css; now it's inside composer.css). Its selector .maka-composer-inner[data-streaming="true"]::before has no competing rule today (the old tool-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.css shows as a git rename (72% similarity); the remainder is the .maka-hero base rule moved in from chat-header.css.

Checklist

  • Scope matches the PR title and excludes unrelated changes
  • Verification lists commands/results
  • User-facing impact: none (zero visual change)
  • Risk: none beyond a pure relocate; rollback is a single revert
  • UI changes: screenshots N/A — rule-equivalence proof + contracts (justified above)

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).
@Astro-Han
Astro-Han merged commit 38cfd85 into main Jul 6, 2026
3 checks passed
@Astro-Han
Astro-Han deleted the refactor/546-pr2-chat-header-split branch July 6, 2026 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant