{leftToolbarTools
.filter(tool => !tool.hidden)
@@ -250,7 +253,10 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
{visiblePaneTools.length > 0 && (
{visiblePaneTools.map(tool => (
@@ -260,7 +266,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
{visibleSystemTools.map(tool => (
diff --git a/apps/desktop/src/app/shell/titlebar-icon.tsx b/apps/desktop/src/app/shell/titlebar-icon.tsx
new file mode 100644
index 0000000000..9c2e98495b
--- /dev/null
+++ b/apps/desktop/src/app/shell/titlebar-icon.tsx
@@ -0,0 +1,19 @@
+import { Codicon } from '@/components/ui/codicon'
+import { cn } from '@/lib/utils'
+
+import { titlebarIconSizeCss } from './titlebar'
+
+/** Titlebar-cluster glyph — 13.9px inline (see titlebarIconSizeCss). */
+export function TitlebarIcon({
+ className,
+ name,
+ size = titlebarIconSizeCss(),
+ spinning
+}: {
+ className?: string
+ name: string
+ size?: number | string
+ spinning?: boolean
+}) {
+ return
+}
diff --git a/apps/desktop/src/app/shell/titlebar.test.ts b/apps/desktop/src/app/shell/titlebar.test.ts
index 8b6f2d8678..2b650ba9da 100644
--- a/apps/desktop/src/app/shell/titlebar.test.ts
+++ b/apps/desktop/src/app/shell/titlebar.test.ts
@@ -2,11 +2,29 @@ import { describe, expect, it } from 'vitest'
import {
TITLEBAR_CONTROL_OFFSET_X,
+ TITLEBAR_CONTROL_SIZE,
TITLEBAR_EDGE_INSET,
TITLEBAR_FALLBACK_WINDOW_BUTTON_X,
- titlebarControlsPosition
+ TITLEBAR_ICON_SIZE,
+ TITLEBAR_MAC_TRAFFIC_LIGHTS_Y_NUDGE,
+ titlebarControlsPosition,
+ titlebarControlsYNudge,
+ titlebarIconSizeCss,
+ titlebarToolsWidthCss
} from './titlebar'
+describe('titlebar sizing', () => {
+ it('uses 24×24 hit targets and 13.9px glyphs', () => {
+ expect(TITLEBAR_CONTROL_SIZE).toBe(24)
+ expect(TITLEBAR_ICON_SIZE).toBe(13.9)
+ expect(titlebarIconSizeCss()).toBe('13.9px')
+ })
+
+ it('reserves width from abutting hit targets only', () => {
+ expect(titlebarToolsWidthCss(4)).toBe('calc(4 * var(--titlebar-control-size))')
+ })
+})
+
describe('titlebarControlsPosition', () => {
it('offsets controls from visible traffic lights', () => {
expect(titlebarControlsPosition({ x: 24, y: 10 }).left).toBe(24 + TITLEBAR_CONTROL_OFFSET_X)
@@ -24,3 +42,17 @@ describe('titlebarControlsPosition', () => {
expect(titlebarControlsPosition(undefined).left).toBe(TITLEBAR_FALLBACK_WINDOW_BUTTON_X + TITLEBAR_CONTROL_OFFSET_X)
})
})
+
+describe('titlebarControlsYNudge', () => {
+ it('nudges the left cluster on macOS when traffic lights are visible', () => {
+ expect(titlebarControlsYNudge({ x: 24, y: 10 })).toBe(TITLEBAR_MAC_TRAFFIC_LIGHTS_Y_NUDGE)
+ })
+
+ it('stays flat on Windows/Linux and macOS fullscreen', () => {
+ expect(titlebarControlsYNudge(null)).toBe('0px')
+ })
+
+ it('nudges while macOS window-button position is still unknown', () => {
+ expect(titlebarControlsYNudge(undefined)).toBe(TITLEBAR_MAC_TRAFFIC_LIGHTS_Y_NUDGE)
+ })
+})
diff --git a/apps/desktop/src/app/shell/titlebar.ts b/apps/desktop/src/app/shell/titlebar.ts
index 20fbba1736..63e902d3bf 100644
--- a/apps/desktop/src/app/shell/titlebar.ts
+++ b/apps/desktop/src/app/shell/titlebar.ts
@@ -2,22 +2,51 @@ import type { HermesConnection } from '@/global'
export const TITLEBAR_HEIGHT = 34
export const MACOS_TRAFFIC_LIGHTS_HEIGHT = 14
-export const TITLEBAR_ICON_SIZE = 12
+/** Titlebar tool hit target (both axes). */
+export const TITLEBAR_CONTROL_SIZE = 24
+/** Codicon glyph box in titlebar clusters — optical match to traffic-light row. */
+export const TITLEBAR_ICON_SIZE = 13.9
+export const TITLEBAR_ICON_BADGE_SCALE = 0.65
export const TITLEBAR_CONTROL_OFFSET_X = 74
-export const TITLEBAR_CONTROL_HEIGHT = 22
+export const TITLEBAR_CONTROL_HEIGHT = TITLEBAR_CONTROL_SIZE
export const TITLEBAR_CONTROLS_TOP = (TITLEBAR_HEIGHT - TITLEBAR_CONTROL_HEIGHT) / 2
+
+/** Inline font-size for titlebar Codicons — beats unlayered codicon.css `font: 16px`. */
+export function titlebarIconSizeCss(scale = 1): string {
+ return `${TITLEBAR_ICON_SIZE * scale}px`
+}
export const TITLEBAR_FALLBACK_WINDOW_BUTTON_X = 24
// Edge inset used when no left-side native controls take up that space —
// Windows/Linux (native overlay is on the right) and macOS fullscreen
// (traffic lights are hidden). Matches the right-cluster's 0.75rem padding.
export const TITLEBAR_EDGE_INSET = 14
+// macOS traffic-light row only: nudge the left toolbar cluster down to sit on
+// the same optical center as the native buttons. null windowButtonPosition means
+// Windows/Linux (controls on the right) or macOS fullscreen (lights hidden).
+export const TITLEBAR_MAC_TRAFFIC_LIGHTS_Y_NUDGE = 'calc(var(--spacing) * 0.9)'
+
+export function titlebarControlsYNudge(
+ windowButtonPosition: HermesConnection['windowButtonPosition'] | undefined
+): string {
+ return windowButtonPosition !== null ? TITLEBAR_MAC_TRAFFIC_LIGHTS_Y_NUDGE : '0px'
+}
+
// Titlebar palette only. All sizing/radius/cursor/centering come from the
// shared