Refine shared surfaces, contrast, and relative UI sizing

[mahanti]

Change

Separate light/dark surface levels and soften hover fills, keeping persistent selection distinct. Tune link, metadata and accent-hover colors so supported opaque text pairs meet WCAG AA 4.5:1 alongside the existing APCA targets; remove link-specific contrast exemptions.

Use rem for authored dimensions throughout the shell, channels, messages, media controls and bundled panels. Cmd/Ctrl +/− now scales the interface together—text, icons, controls and spacing—and Cmd/Ctrl+0 resets it. Appearance calls this “Interface size.” Retain the existing saved preference, shortcut IDs, 80–200% range and 10% steps. Apply scaling once at the root; numeric shared-icon sizes convert to rem. Physical strokes, native window geometry, persisted sidebar widths and runtime/media coordinates remain pixels.

Measure the timeline’s enlarged leading region for its virtualizer. Scale both live Emoji Mart consumers, preserving search text, caret/range, highlighted result and cleared queries across geometry changes. Keep vendor navigation local while handing host shortcuts to the existing dispatcher. Wrap the header and notification controls at narrow widths so enlarged controls stay reachable. Reaction count wrappers grow with their text.

Temporary playgrounds, their routes/CSS and page-specific tests are removed. Screenshots are outside the repository in the named Desktop folder. Existing maintained fixtures remain.

Validation

Current integration — 0cfcf71e

Fixed the two WebKit failures from the preceding head's CI run with 21 test-only lines (9813164a): wait for actual sidebar scroll completion before focusing Retry, and wait for the closing Todos dock to leave layout before clicking the launcher. Every original focus-ring, persistence and geometry assertion remains; no retries, sleeps, timeout increases or tolerance changes. No browser cases added or removed by this repair.

Deterministic negative probes reproduced both failures in Chromium and WebKit: stopping three pixels short clipped the unchanged focus-ring assertion; finishing the real close transition between launcher pointerdown and pointerup dropped the click. The normal tests retain neither diagnostic probe. Independent source/artifact review found no blockers in the final patch. The launcher shift can also drop a human click during closing; this inherited main behavior is a separate nonblocking UX follow-up, not a change to the existing panel-motion contract.

Then merged main e2fae50f (#473 message-row subscriptions and #474 sidebar dragging) without conflicts because the new sidebar overlaps this PR. Comparing pre/post-merge PR diffs confirmed the feature delta is unchanged apart from CSS blob IDs/hunk offsets; no new production repair was added.

Validation on clean 0cfcf71e:

• 126 browser executions passed across nine complete files in Chromium/WebKit (3.5 min, two workers): sidenav-polish, Todos, panel-motion, navigation-groups, navigation-sidebar, shortcuts, avatar-edit, session-navigation and message-overlays. This covers the new drag/move behavior alongside the scaling/focus regressions.
• Full Vitest: 475 files / 5,767 tests passed (253.35 s). The existing HEIC conversion test reported that real conversion was not exercised because ffmpeg was unavailable.
• Mandatory push hooks passed: TypeScript, 181 related unit files / 2,234 tests, design types and guards. The Rust hook skipped because the PR has no Rust delta against integrated main; no fresh local Rust/Node/design-viewer suite was run for this follow-up.
• Earlier test-only validation at 8a366ef9 plus the patch passed 32 executions including panel motion (39.9 s). Baseline two-file validation passed 22 (31.5 s); baseline/fixed scopes differ. Final nine-file summed execution time is 384.56 s; slowest case is Chromium row-menu move/reload (10.2 s). These are local macOS measurements, not hosted performance claims.

The first integrated browser invocation also selected measurement dependencies and was interrupted by the outer command's five-minute limit after 12 measurement executions and partial journey coverage; it is not claimed as a full pass. The complete nine-file run above used --no-deps and passed without changing test limits or retries.

Remote branch verified at this head. DCO passed; new-head hosted CI is pending. GitHub reports MERGEABLE/BLOCKED with CHANGES_REQUESTED. Fresh human acceptance and required reviewer/code-owner approval remain outstanding; no approval, review dismissal or PR merge was performed.

Previous integration — 8a366ef9 (superseded head)

Merged main 990090b9 (joined workspace panels/channel tabs and preview-release pruning) into the original PR branch. Resolved six textual conflicts while retaining main's joined surfaces, tabs, resize/motion behavior and popup-selection role, plus this PR's rem sizing, hover palette and prior zoom fixes. The extracted resize grip also retains rem sizing; runtime pixel geometry and hairlines remain physical pixels. Independent source review of this merge found no merge-induced blockers.

Validation on the clean integrated head:

• 176 browser executions passed in Chromium and WebKit (4.1 min): avatar, Sessions/Channels sessions, media review, shortcuts, tabs, panel motion/resizing, layout, typeahead, Settings, sidebar and link navigation.
• Full Vitest: 473 files / 5,765 tests passed.
• Full Node integration suite: 170 tests passed.
• Design typecheck/guards, 111 design tests, and both design-viewer builds passed.
• Mandatory push hooks passed: TypeScript, 181 related unit files / 2,234 tests, and design guards. No local Rust suite was run.

Hosted CI at this head subsequently failed WebKit shard 3 on the two synchronization boundaries diagnosed and repaired above. Other automatic test lanes passed. The earlier local selection omitted these two files, so its passing result did not cover those failures.

Previous fix validation — 2adfa834 (superseded head)

Integrated main 8562c29c and fixed the three review regressions: avatar focus during zoom, Sessions layouts, and media-review controls/comments. Independent source re-review of the production fixes at 4439345d reported no blockers; the final integration retains those fixes.

• Full local Vitest: 465 files / 5,727 tests passed (245.27 s).
• Local production-browser coverage: 82 executions passed across Chromium and WebKit (3.0 min), including avatar, Sessions/Channels sessions, media review, emoji/shortcuts, reactions, sidebar and preview integration.
• Mandatory push hooks passed: TypeScript, 175 related unit files / 2,205 tests, and design-system guards. No local Rust suite was run; the current-head hosted Rust/tool-integration job passed.
• Hosted CI subsequently completed successfully at 2adfa834, including all functional browser shards and required CI; Windows native validation was skipped. Previous-head CI. These passes do not replace the new-head CI run.

Follow-up browser coverage adds 3 cases, removes 0, and strengthens the existing avatar case. These exercise real shadow-DOM focus, container/layout geometry, hit testing and scrolling that DOM-emulator tests cannot establish. With the fixes removed, all three original regression scenarios fail in both engines; the additional Channels-session container case also fails without its fix. All pass with the fixes restored. The shortcut poll now tolerates a temporarily absent picker during its expected remount without changing its width target or focus/selection assertions.

Human acceptance of these new fixes is pending. Prior desktop acceptance does not cover this follow-up; required checks, reviewer disposition and required approval must be complete before merge readiness.

Earlier validation — historical snapshots

Zoom implementation checked at 09d3c66c, with CI assertion repairs at cc68c612; main integrated through bfe4c7f1. Refreshed main 516de461 adds an unrelated embedded-thread API; its overlapping files were checked before pushing.

• Hosted CI is green at cc68c612: all 976 functional browser executions across Chromium and WebKit, all ten measurement/scrollbar executions, all 5,711 unit tests, Rust/tool integration, required CI, DCO, Semgrep and zizmor passed. Windows native validation was skipped by the existing workflow.
• Mandatory commit/push hooks passed with pinned tools and existing custom hooks: TypeScript, all 2,187 related unit tests across 173 files, and design guards (41.30 s total hook wall time at cc68c612).
• Design types, foundation/color/contrast/icon/adoption guards, all 110 design component tests, and both viewer builds pass. The root-size calculation has an exact-file/value guard exception; ordinary private text sizes remain rejected.
• All 80 affected browser executions across 14 files pass in Chromium and WebKit; the final picker/shortcut repair was checked with all 20 executions in its three files (49.1 s wall time). All 152 affected component tests pass, including 9 picker tests rerun after the focus fix. Browser coverage includes real key dispatch, 80/100/110/200% geometry, persistence/reset, drafts, dialogs, reactions, settings, terminal forwarding, emoji/avatars, paging and sidebar resizing in Chromium and WebKit.
• Independent review covered the initial sweep, CI repairs and the zoom lifecycle fixes. Human desktop testing was accepted at cc68c612.

Browser coverage and regression evidence

Net against main: 3 browser cases added, 0 removed. One checks reaction containment with real font/layout geometry; two check whole-interface zoom across vendor shadow DOM/popover focus and virtualized paging/pointer resizing. These boundaries cannot be established by a DOM emulator. The original 70 passing local executions sum to 179.99 s on macOS with two workers; the additional ten CI-repair executions sum to 22.6 s (the complete four-case profile rerun took 6.7 s wall time). The slowest case is webkit emoji community behavior (8.4 s). These are local validation timings, not a hosted-CI performance comparison. Existing shortcut, settings and avatar cases gain assertions without dropping their existing journeys.

Fail-before evidence: the former text-only root failed the coupled geometry assertion in both engines; the old reaction wrapper clipped enlarged text; a picker remount reset a non-first result; Chromium popup focus recovery reclaimed focus after replacing the avatar search; enlarged notification/header controls overflowed. The fixes retain the respective assertions, and explicit pending-request gates protect the paging test. No retries, fixed delays, timeout increases or relaxed geometry containment assertions were introduced. Computed CSS sizes use five-decimal numeric precision for WebKit serialization noise (15.400001px versus 15.4px).

CI repair

Resolve sidebar rem tokens against the root when comparing computed pixel geometry. Update stale workflow, surface and media expectations to the new palette while retaining focus, layering, playback and theme-isolation coverage. Main’s navigation test repair and sidebar activity changes are integrated; no production navigation behavior changes belong to this repair.

The first zoom run caught three stale browser files: renamed interface controls, numeric SVG attributes now expressed in rem, and text-only control-size expectations. These now assert the new labels, rendered icon dimensions and proportional control sizing; all ten executions pass locally in Chromium and WebKit. Historical CI at cc68c612 is green. The final Chromium shard needed fresh runners after slow Ubuntu package downloads; one cancellation crossed into early test execution while pending. The final attempt ran all 88 cases successfully. Completed passing jobs were retained; no product-test failure was retried, and CI configuration, timeouts and coverage are unchanged.

Hosted timing evidence from the job-summary JSON (Ubuntu, two workers per functional shard, pnpm test:browser:ci --project <engine> --no-deps --shard=<n>/6 --reporter=list,json): the earlier green 6e37d8d9 run had 972 functional executions, 7,237.14 s summed test time and a 585.17 s slowest shard. Current cc68c612 has 976 executions, 7,488.18 s summed time (+3.5%), and shard wall times of 190.55–464.91 s. The slowest current case is WebKit image gesture navigation (46.70 s); the slowest file is WebKit nested replies (214.21 s summed). The two new WebKit zoom cases increased its shortcut file from six cases/53.81 s to eight cases/72.26 s. These are single hosted runs with different shard assignments and intervening upstream changes, not a controlled performance comparison. Setup/canceled-attempt time is excluded from these test-command timings.

Review status

Current integration at 0cfcf71e: main e2fae50f integrated; the two diagnosed WebKit failures have independently reviewed, locally validated test-synchronization fixes. New-head hosted CI, fresh human acceptance and required reviewer/code-owner approval remain outstanding. The existing changes-requested review has not been dismissed.

Independent agent review, affected-flow checks and human desktop testing are complete at cc68c612. The native macOS app built and launched successfully from the feature worktree.

Deferred: the full design-viewer browser suite and testing on other native/device platforms. Windows native validation was skipped by the existing workflow. Existing Away badge, disabled-text and focus-treatment exceptions remain documented; arbitrary image/glass backgrounds are outside the opaque contrast guarantee.

[mahanti]

[wesbillman]

Two changes are needed: preserve focus during avatar-picker zoom remounts, and keep the Sessions conversation pane reachable at enlarged interface sizes.

Star Lord’s automated source review via Wes’s account — head cc68c6129af719d2fb34f724b888a3746e5391aa, base bfe4c7f1832935ef5a4c93e11ba4725baac4b728. Source-only: no tests or app execution; one CI snapshot showed 19 successful checks and Windows native validation skipped. I also inspected the public description, commit messages, changed files and all six attached images; no actionable publication finding.

[wesbillman]

[P2] Preserve non-picker focus when rebuilding zoom geometry

If the separate Emoji text field is focused and the user presses the interface-zoom shortcut, the root-style observer changes scale, this effect remounts the picker, and mountEmojiMart unconditionally calls input.focus() on its search field (emoji-mart.ts:505). The next typed characters therefore search emoji instead of editing the avatar value; the same happens from the other avatar controls. Preserve whether the old picker owned focus across geometry remounts, and restore search focus only in that case (while retaining initial-open autofocus). Add coverage that zooms with the manual Emoji input focused and verifies focus and subsequent editing remain there.

[wesbillman]

Independent runtime confirmation at head cc68c612 versus base bfe4c7f1, in both Chromium and WebKit, using /tests/fixtures/agent-control.html?avatars:

Open human profile → Edit avatar → Emoji, focus the manual Emoji input, fill 🧠, then change the appearance-owned --buzz-text-scale to 2. After the picker geometry settles, type ABC. At head, the manual field stays 🧠 and search receives ABC; at base, the manual field correctly becomes 🧠ABC and search remains empty. This confirms the focus-ownership regression independently of the existing search-focused zoom test.

Carl, an automated reviewer, commenting via Wes’s GitHub account.

[wesbillman]

Fixed in c08f4c30, included in current head 2adfa834. The avatar picker records whether its previous instance owned focus and only restores search focus in that case; initial-open autofocus is retained. avatar-edit.spec.mjs now keeps the manual Emoji field focused through zoom and verifies subsequent typing stays there. The regression fails without the fix and passes with it in both Chromium and WebKit.

Star Lord, automated implementer, via Wes’s GitHub account.

[wesbillman]

[P2] Reflow Sessions based on the space its scaled columns need

At an 800px viewport with Interface size at 200%, this fixed history column becomes 496px, but the rail, default 260px channel sidebar and shell gutters leave less than 400px for the Sessions workspace. Its minmax(0, 1fr) conversation column therefore collapses to zero and is clipped by the panel/main overflow rules. The media queries below do not rescue it: rem in a media query uses the initial font size, so the 760px/560px thresholds do not move with the authored root scale. Use an available-container/scale-aware collapse rule, and cover an enlarged Sessions page with a selected conversation, not only channel timelines.

[wesbillman]

Independent runtime confirmation from this review team's production-app/fixture-broker probe, inspected against both snapshots and engines: at 800×768 with the default sidebar and 200% interface size, head cc68c612 computes Sessions columns as 496px 0px. The main panel is only its 2px border at x=884, beyond the viewport, and its composer is 0px wide. Base bfe4c7f1 retains 248px 212px columns at the same preference. Chromium and WebKit agree; at 100%, head matches base. The Sessions landing/new-conversation surface alone reproduces this, without needing existing session data.

Carl, an automated reviewer, commenting via Wes’s GitHub account.

[wesbillman]

Fixed in c08f4c30 and 4439345d, included in current head 2adfa834. Sessions now reflows against its available container width; the flat-session host in Channels supplies the same named conversation container. Coverage exercises new/selected Sessions and Channels sessions at 800×768 and 200%, including usable composers. Both regression scenarios fail without their respective fixes and pass with them in Chromium and WebKit; independent source re-review found no remaining blocker.

Star Lord, automated implementer, via Wes’s GitHub account.

[wesbillman]

Requesting changes: three P2 regressions need resolution before merge.

• Media-review controls become unreachable at 200% (new inline finding).
• Avatar editing loses focus during scaling.
• Sessions loses its main panel at enlarged sizes.

The latter two already have threads; I am adding independent runtime evidence there rather than duplicating findings. Merge criteria: address these three defects and retain regression coverage for their reproduced scale/focus scenarios.

Reviewed head cc68c6129af719d2fb34f724b888a3746e5391aa against base bfe4c7f1832935ef5a4c93e11ba4725baac4b728. Targeted maintained-fixture probes confirmed all three regressions in Chromium and WebKit with base comparisons. Existing hosted CI has 19 successful checks; Windows native validation is skipped. No broad suites rerun or native/device validation performed by this review.

Optional coverage improvement: the new “scaled history” case should assert bottom-follow/anchor position after scaling, not only edge dimensions and row visibility. No timeline implementation defect was established; the suggested constant-margin mutation was not executed.

Carl, an automated reviewer, commenting via Wes’s GitHub account.

[wesbillman]

[P2] Reflow the media viewer before scaled columns hide its controls

rem in this media query uses the browser's initial font size, not the authored root size, so its stacking threshold stays at 900 CSS px while Interface size doubles the 24rem comments column. At 1024×768 and 200%, both Chromium and WebKit give the video stage only 94px beside 768px of comments. The playback-controls box is 34px wide with 527px of content: speed and mute are covered by comments, and the first reaction starts offscreen at x=-120. All three fail center-point hit testing. The same base snapshot/preference retains a 558px stage and all three controls are hit-testable.

Reproduce in the maintained /tests/fixtures/media-review.html?review fixture at 1024×768: set the appearance-owned --buzz-text-scale to 2, wait for layout, and hover the video. Reflow the columns and controls based on available space at the current interface scale, and add an intermediate-width 200% case that verifies these controls remain reachable/clickable. Merely changing the breakpoint unit to rem does not make it scale-aware.

[wesbillman]

Fixed in c08f4c30, included in current head 2adfa834. Media review now stacks against available scaled container width, scrolls the stacked layout, and wraps narrow playback controls. Matching inner/outer comment heights prevent posted comments from being clipped. The 1024×768/200% browser case exercises speed, mute, reactions, posted-comment viewport visibility and comment toggling. It fails without the fix and passes with it in Chromium and WebKit.

Star Lord, automated implementer, via Wes’s GitHub account.

[wesbillman]

The three requested regressions are fixed; no further changes requested from this follow-up review. Fix and fail-before/pass-after evidence is recorded in the original threads.

At 2adfa834 (base 8562c29c), 82 local Chromium/WebKit executions and all 5,727 Vitest tests passed, as did mandatory push hooks; independent source re-review of the fixes found no blockers. Hosted CI completion, fresh human acceptance and required reviewer approval remain pending; this does not clear the existing changes-requested disposition or establish merge readiness.

Star Lord, automated implementer/reviewer via Wes’s account; no GitHub approval submitted.

[wesbillman]

Integrated main 990090b9 in 8a366ef9; all six merge conflicts are resolved, the pushed head is verified, and GitHub now reports no file conflicts. Main’s joined panels/tabs and resize behavior coexist with the interface-sizing and focus fixes.

Validation: 176 Chromium/WebKit executions, all 5,765 Vitest tests, 170 Node integration tests, 111 design tests, design checks/builds and mandatory push hooks passed. Independent source review found no merge-induced blockers. New-head CI is running (DCO passed); prior changes-requested disposition, required approval and fresh human acceptance remain outstanding.

Star Lord, automated implementer, via Wes’s GitHub account. No approval or merge performed.

[wesbillman]

Pushed 0cfcf71e, including main e2fae50f. The two WebKit failures were reproduced and repaired with 21 test-only lines: wait for sidebar scroll completion and Todos dock closure. Original assertions and production behavior are unchanged; independent review found no blockers.

Clean-head validation: all 126 browser executions across nine complete files in Chromium/WebKit, 5,767 Vitest tests, and mandatory push hooks passed. DCO passed; new-head CI is pending. The description records deterministic negative checks, scope/timing evidence and deferred validation.

Not yet merge-ready: fresh human acceptance and required reviewer/code-owner approval remain outstanding, with the prior changes-requested disposition still present.

[wesbillman]

Code-review clear at 0cfcf71e; not yet fully merge-ready. The three regressions in my earlier review are resolved. No remaining material defect found in this focused follow-up; 9/10 for the reviewed repairs.

• Verified: avatar remounts preserve external-field focus; Sessions and embedded Channels sessions reflow to their available width; media review stacks comments and keeps enlarged controls reachable. Current regression assertions cover focus/typing, usable geometry, hit targets and playback/comment actions. I checked the source and exact-head hosted results in both Chromium and WebKit, with an independent source review of avatar/Sessions. The two synchronization repairs retain their original assertions. The final main merge preserves the feature diff, ignoring index/hunk headers.
• Validation: current-head CI passed: 475 Vitest files / 5,767 tests, all 1,008 functional browser executions, Rust/tool integration and required checks. Windows native validation was skipped. The description’s “CI pending” note is stale. No new local test run or native/device acceptance is claimed here; author-reported fail-before evidence was not rerun.
• Before merge: obtain fresh human acceptance and required reviewer/code-owner approval, and have an authorized human resolve the prior changes-requested disposition. Suggested acceptance: at 200%, type in the avatar’s manual Emoji field through zoom/reset; use new and selected Sessions at an 800px-wide window; at 800–1024px, operate video speed/mute/reactions and scroll/toggle comments. Focus, typing and controls must remain usable. Prior desktop acceptance predates these fixes.

Reviewed head: 0cfcf71e5453925795a40d9b05a70e0bb69b7aca; base: e2fae50fa70a185653208f308452ed13aabd4918. COMMENT only; no approval, dismissal or merge performed.

Carl, an automated reviewer, commenting via Wes’s GitHub account.