refactor(ui): close out post-#520 renderer surface polish

Summary

This issue started as a renderer CSS ownership campaign after #520. That structural work is complete, and the high-frequency chat, tool, and sidebar surfaces have since gone through multiple visual and behavioral passes.

The remaining job is no longer "polish every listed surface." It is an evidence-driven closure audit on current main: inspect the small set of surfaces that still lack a complete visual record, fix only concrete defects, and record a pass when no change is needed.

This body supersedes the original PR0–PR7 plan and the blanket Phase C requirement that every surface must produce a visual-change PR.

Current state

Audited against main at 8637d9f3 on 2026-07-12.

Complete

Area	Landed work
CSS ownership and governance	#586, #588, #589, #591, #593
Chat message, typography, prose, attachments, and width	#612, #616, #620, #626, #670, #711, #719
Streaming, thinking, tool presentation, and run→done feedback	#636, #647, #680, #712, #717, #721
Sidebar rhythm and list-row language	#652, with later detail fixes in #673
Shared product primitives and broad surface convergence	#596, #600, #605, #613, #622, #649, #651, #659, #667, #668, #681, #686, #689, #690, #692, #696, #701, #703, #704, #706, #722, #723, #724

The old reasoning panel is also no longer a remaining surface: #636 retired reasoning-panel.css and replaced it with the unified chat-timeline deep-thinking disclosure.

Remaining evidence gaps

These are audit candidates, not assumed defects:

Surface	Why it remains	States to inspect
Artifact pane + browser panel	The original Phase B tool slice included artifact/browser polish, but later work completed the tool trow and lifecycle seam without a comparable end-to-end artifact/browser pass.	collapsed/expanded, list overflow, loading, empty, error, deleted, unsupported and oversized previews, toolbar actions, browser navigation/loading/error, narrow layout
Composer	#584 established the main design and later PRs fixed individual states, but there is no explicit post-#584 combined-state review.	empty chat, active stream, first-token wait, permission wait, attachment, disabled/pending controls, narrow layout
Prompt anchor rail	Implemented in #563; no later surface polish or dedicated visual fixture.	long transcript, active marker, keyboard focus, preview overflow, 990px viewport
Deep Research	Structurally separated in #591 and behavior-covered, but not visually re-reviewed as a standalone surface.	empty, workflow/progress, evidence/report, error, long content, narrow layout
Model switcher	Functional and reduced-motion behavior is covered, but the relocated surface has no dedicated visual closeout.	search, no results, pending switch, long provider/model names, thinking-level flyout, keyboard/focus, reduced motion
Overlays and shared empty states	Command palette, Search, and Help have later convergence work; the remaining error/hero, runtime permission, confirm, toast-stack, and shared empty-state combinations lack one closure record.	open/close focus behavior, keyboard dismissal, destructive and disabled states, long copy, stacked notifications, narrow viewport
Content surface / theme glass	#690 corrected the main content background, but the shell/material relationship has not been recorded as a complete cross-theme pass.	light/dark/system theme, content vs chrome hierarchy, transparent/material fallback, focused/unfocused window where observable

Closure method

Audit the candidates above on the latest main, using the deterministic visual-smoke fixtures where they cover the state and CDP against the live app where cascade, layout, focus, or computed style is the question.
Record one row per candidate in a closing comment: exercised state, theme/viewport, result, evidence, and any follow-up.
Open a code PR only for a concrete, reproducible defect. A passing surface gets evidence, not a cosmetic diff made to satisfy the checklist.
Keep fixes surface-scoped and choose the lowest verification layer that locks the failure:
- renderer↔main user journey: Playwright E2E;
- cascade/layout/style invariant: computed-style or DOM contract;
- pixel-level appearance: screenshot fixture, including the viewport/state that exposes the problem;
- interaction behavior: keyboard, focus, loading, empty, error, disabled, and reduced-motion checks as applicable.
Do not combine unrelated cleanup, token redesign, or new component migrations with closure fixes.

Acceptance criteria

Every remaining evidence-gap row has a recorded pass or a concrete finding against current main.
Artifact/browser, the unfinished part of the original Phase B scope, has an explicit final verdict.
Relevant surfaces are checked in light and dark themes at 1280px and 990px; animated surfaces also cover reduced motion.
Keyboard/focus, overflow, loading, empty, error, disabled, and state-transition behavior are checked where the surface exposes them.
Confirmed defects are fixed and verified, or moved to a separately scoped issue with the reproduction and rationale preserved.
The final closure comment links the evidence and records any surface that could not be exercised.
The latest main CI is green at closure.

Out of scope

Redesigning token values or starting another global aesthetic pass.
Migrating components only for consistency when no user-facing or maintenance defect exists.
Extracting all TSX/CVA styling into CSS.
Treating screenshots alone as proof of interaction, accessibility, or cascade correctness.
Expanding product scope under the label of polish.

Closing principle

The campaign is done when the remaining uncertainty is removed, not when every renderer surface has been changed. A verified no-change result is a valid completion outcome.

fix(ui-css): drop unlayered form font reset so font utilities reach f…

fix(ui): menu highlight uses neutral state bg, not accent (#579)

feat(ui): icon-only turn footer with meta tooltip; merge retry into r…

refactor(ui): composer toolbar redesign — Select pickers, unified tri…

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

refactor(ui): extend typography/line-height converge contracts to TSX (…

refactor(ui): relocate settings CSS into per-surface files (#546 PR1) (…

refactor(ui): relocate sidebar/onboarding/composer CSS into per-surfa…

refactor(ui): relocate chat message body CSS into chat-message.css (#546

refactor(ui): split Markdown prose onto a reusable .maka-prose layer (#…

refactor(ui): relocate chat message body CSS into chat-message.css (#546

refactor(ui): split Markdown prose onto a reusable .maka-prose layer (#…

refactor(ui): chat message body → chat-message.css + .maka-prose layer (

fix(ui): give BrowserPanel a narrow bottom-sheet layout (#546) (#818)

docs(ui): correct BrowserPanel narrow-layout comment to reflect #824 (#…

@990

#546 closure audit — recorded against main @ `80952ec0`

Row	Result	Evidence	Follow-up
Composer	2 concrete defects fixed	#821 (branch-picker `min-height` tokenized + added to `control-height-converge`), #822 (permission-mode Select disabled during permission wait)	—
Artifact pane + browser panel	BrowserPanel narrow bottom-sheet; Artifact pane already fixture-covered	#818 (≤990px bottom sheet + `min-height` contract); `artifact-pane`/`artifact-errors`/`artifact-preview-*` fixtures cover the pane	#819 (browser visual-smoke fixture), #824 (both-present + short-window shared-height)
Prompt anchor rail	Source-reviewed pass	Source review — z-index low-tier (`--z-panel-action:4`), global `*:focus-visible` ring, reduced-motion via global guard, IntersectionObserver active-tracking, `CSS.escape` safe	No fixture (rail renders only with ≥3 user prompts; fixtures max 2) — runtime states (long transcript / active marker / preview overflow @990 / keyboard focus) not exercised; P3: no overflow strategy for very long transcripts
Deep Research	Source-reviewed pass	Static hero, tokenized responsive grid (`auto-fit minmax(180px,1fr)`), `minmax(0,1fr)+min-width:0` overflow guard, chip hint 2-line clamp, semantic `ol/ul/h2`, no animations	No fixture (no Deep Research session in fixtures); static + responsive → low runtime risk
Model switcher	Source-reviewed pass	search/no-results/pending/long-name ellipsis/thinking-level flyout/keyboard focus (global ring)/reduced-motion (explicit + global); functional + reduced-motion already test-covered	No fixture; P3: long model name + thinking-level tag in the 180px nowrap value span → tag may be ellipsized
Overlays + shared empty states	Covered surfaces have fixtures + prior convergence; uncovered overlays source-reviewed pass	`command-palette-open`/`sidebar-search-modal-open`/`connection-error`/`first-run`/`settings-*` fixtures; source review of keyboard-help/toast/permission-dialog/empty-state/error-boundary (Base UI Dialog/AlertDialog focus-trap/Esc/restoration, destructive variants, redaction, overflow guards)	No fixture for the uncovered overlays
Content surface / theme glass	Source-reviewed pass	#690 content-surface-contrast in place: content=`--background` vs chrome=`--surface-canvas`+vibrancy; light/dark/system; darwin transparent+vibrancy+`backdrop-filter`, non-darwin opaque fallback; unfocus dim via OS	—

CI: main @ 80952ec0 green (typecheck/test/e2e).

Surfaces not exercised at runtime (no fixture): Prompt anchor rail, Deep Research hero, Model switcher popup states, keyboard-help, toast/confirm, permission-dialog, content-surface/theme-glass cross-theme. Source review found no P0–P2; runtime visual verification (light/dark × 1280/990 + reduced motion) deferred to follow-up fixtures.

Follow-up issues: #819 (BrowserPanel visual-smoke fixture), #824 (both-present + short-window shared-height — P2 regression introduced by #818, reproduction preserved). Two P3s recorded above (prompt-rail long-transcript overflow; model-switcher thinking-tag ellipsis) — not filed as separate issues.

Closing per #546's closing principle: remaining uncertainty removed; verified no-change results recorded; confirmed defects fixed (#821/#822/#818) or moved to a separately-scoped issue (#824); surfaces that could not be exercised recorded.

fix(ui): scale auxiliary panels to dvh when both open at narrow widths

fix(ui): reserve chat height when both auxiliary panels open at narro…

fix(desktop): move segmented control to the ui type tier

refactor(ui): govern segmented chrome as maka-segmented with hover/fo…

Navigation Menu

Repository navigation

refactor(ui): close out post-#520 renderer surface polish #546

Summary

Current state

Complete

Remaining evidence gaps

Closure method

Acceptance criteria

Out of scope

Closing principle

30 remaining items

#546 closure audit — recorded against main @ `80952ec0`

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

refactor(ui): close out post-#520 renderer surface polish #546

Description

Summary

Current state

Complete

Remaining evidence gaps

Closure method

Acceptance criteria

Out of scope

Closing principle

Activity

30 remaining items

Astro-Han commented on Jul 12, 2026

#546 closure audit — recorded against main @ 80952ec0

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

#546 closure audit — recorded against main @ `80952ec0`