Add custom title bar for Windows

[lintowe]

Screenshots

• Before (without custom title bar)

• After (with custom Windows title bar)

Testing

• bun fmt
• bun lint
• bun typecheck

---

Note

Medium Risk
Switches Windows Electron windows to a frameless configuration with a native title bar overlay and adds platform-specific header/layout logic; regressions could affect window controls, drag regions, and header spacing on Windows.

Overview
Adds a Windows-specific custom title bar for the Electron desktop app by making Windows windows frameless and configuring titleBarOverlay (theme-aware colors/height), keeping macOS/Linux on the existing inset title bar.

Introduces a reusable DesktopTitleBar component and updates chat, settings, sidebar, and diff panel headers to use Windows-aware layouts (including reserving space for native window controls overlay and avoiding drag regions where appropriate). Also adds OS/electron CSS variants and boot-time platform classes plus windowControlsOverlay-driven --desktop-titlebar-height syncing, and throttles desktop theme syncing via requestAnimationFrame.

^{Reviewed by Cursor Bugbot for commit 8c340d0. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add custom title bar for Windows in the desktop app

• Adds a frameless window with a native title bar overlay on Windows, styled to match the app theme, while retaining the existing hiddenInset style on macOS/Linux.
• Introduces a new DesktopTitleBar component used across chat, settings, and empty-state views on Windows, replacing the previous draggable header bars.
• Adds isWindowsElectron env flag and CSS custom variants (electron, desktop-windows, etc.) so styles and components can branch per platform.
• Syncs overlay color with the active theme via syncAllWindowsTitleBarOverlays(), called on theme change and OS theme updates.
• Extracts ChatHeaderActions from ChatHeader so action controls can be embedded in the new title bar on Windows.
• Behavioral Change: On Windows, windows are now frameless with a native overlay; the sidebar, diff panel, and chat headers reserve space for the 138px native window controls area.

^{Macroscope summarized 8c340d0.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR adds a new Windows-specific custom title bar feature, introducing a new DesktopTitleBar component and platform-specific styling across multiple views. As a new user-facing feature with new UI components, it warrants human review despite being well-scoped to Windows platform support.

^{You can customize Macroscope's approvability policy. Learn more.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c5106ffe-7ae6-4662-ad66-f5174c78ba71

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 8c340d0. Configure here.}

[cursor]

Container query self-reference prevents responsive gap

Low Severity

The @container/header-actions declaration and the @3xl/header-actions:gap-3 query are now on the same element in ChatHeaderActions. Per the CSS Container Queries spec, an element cannot query its own container context — only ancestor containers are eligible. Previously, @container/header-actions was on the outer ChatHeader wrapper div, and the @3xl/header-actions:gap-3 was on the inner actions div (a child). After the refactor, both live on the same div, so the gap-3 at the @3xl breakpoint will never activate. Child component queries (e.g. in GitActionsControl and ProjectScriptsControl) still work correctly since they remain descendants of the container.

 

^{Reviewed by Cursor Bugbot for commit 8c340d0. Configure here.}