fix: updated UI to macosx conventions

tests/ipc/handlers.test.ts

@@ -19,6 +19,9 @@ vi.mock('electron', () => ({
   app: {
     quit: vi.fn(),
   },
+  BrowserWindow: {
+    fromWebContents: vi.fn(),
+  },
   ipcMain: {
     handle: vi.fn((channel: string, handler: (...args: any[]) => Promise<any>) => {
       registeredHandlers.set(channel, handler);
@@ -1344,6 +1347,25 @@ describe('IPC Handlers', () => {
       });
     });
 
+    describe('app:getTitleBarMetrics', () => {
+      it('should return dynamic macOS title bar left inset from native window button position', async () => {
+        const { BrowserWindow } = await import('electron');
+        const sender = {};
+        const event = { sender };
+
+        vi.mocked(BrowserWindow.fromWebContents).mockReturnValue({
+          getWindowButtonPosition: vi.fn(() => ({ x: 14, y: 14 })),
+        } as unknown as ReturnType<typeof BrowserWindow.fromWebContents>);
+
+        const result = await invokeHandlerWithEvent(event, 'app:getTitleBarMetrics');
+
+        expect(BrowserWindow.fromWebContents).toHaveBeenCalledWith(sender);
+        expect(result).toEqual({
+          macosLeftInset: 78,
+        });
+      });
+    });
+
     describe('app:triggerMenuAction', () => {
       it('should forward custom titlebar action to renderer menu channel', async () => {
         const send = vi.fn();

tests/renderer/components/WindowTitleBar.test.tsx

@@ -5,13 +5,53 @@ import { WindowTitleBar } from '../../../src/renderer/components/WindowTitleBar/
 import { useAppStore } from '../../../src/renderer/store';
 
 describe('WindowTitleBar', () => {
+  const originalNavigatorPlatform = navigator.platform;
+
   beforeEach(() => {
+    Object.defineProperty(navigator, 'platform', {
+      value: originalNavigatorPlatform,
+      configurable: true,
+    });
+
     useAppStore.setState({
       sidebarVisible: true,
       panelVisible: false,
     });
   });
 
+  it('applies a macOS class to the title bar root for platform-specific spacing', () => {
+    Object.defineProperty(navigator, 'platform', {
+      value: 'MacIntel',
+      configurable: true,
+    });
+
+    render(<WindowTitleBar />);
+
+    expect(screen.getByTestId('window-titlebar')).toHaveClass('is-mac');
+  });
+
+  it('sets macOS title bar inset CSS variable from dynamic native metrics', async () => {
+    Object.defineProperty(navigator, 'platform', {
+      value: 'MacIntel',
+      configurable: true,
+    });
+
+    const getTitleBarMetrics = vi.fn().mockResolvedValue({ macosLeftInset: 102 });
+    window.electronAPI.app = {
+      ...(window.electronAPI.app || {}),
+      getTitleBarMetrics,
+    };
+
+    render(<WindowTitleBar />);
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(getTitleBarMetrics).toHaveBeenCalled();
+    expect(document.documentElement.style.getPropertyValue('--bds-titlebar-macos-left-inset')).toBe('102px');
+  });
+
   it('renders a right-side sidebar toggle button and toggles store state', () => {
     render(<WindowTitleBar />);