From 7c0aa85c3b933d20cfc85862c914ccc6c5854923 Mon Sep 17 00:00:00 2001
From: David Liu <davidliu02k@gmail.com>
Date: Thu, 16 Apr 2026 15:39:59 -0700
Subject: [PATCH 1/3] feat: macOS Electron custom titlebar with drag regions
 and sidebar safe-zone

Switch titleBarStyle to hiddenInset on macOS so web content fills the
full window and the traffic-light buttons (close/minimize/maximize)
overlay the top-left corner.

Sidebar adjustments:
- Hide the sidebar logo/title on all Electron platforms (desktop clients
  show identity in the dock/taskbar; web version keeps the logo)
- Add 68px left padding on macOS to clear the traffic-light buttons
- Add 32px top padding in the collapsed sidebar strip on macOS
- Mark sidebar header and main content header as -webkit-app-region:drag
  so the window is draggable; interactive children use no-drag
- Place drag-region CSS outside @layer to avoid Tailwind cascade issues

Detection uses navigator.userAgent (Chromium injects "Electron/x.y.z"
unconditionally) rather than preload-dependent window.isElectron, which
can miss if the module evaluates before contextBridge is wired.

Made-with: Cursor
---
 electron/main.mjs                             |  2 +-
 .../view/subcomponents/MainContentHeader.tsx  | 13 ++++--
 .../view/subcomponents/SidebarCollapsed.tsx   | 12 ++++--
 .../view/subcomponents/SidebarHeader.tsx      | 42 ++++++++++++-------
 src/index.css                                 | 18 +++++++-
 5 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/electron/main.mjs b/electron/main.mjs
index aff4e274..42bc4119 100644
--- a/electron/main.mjs
+++ b/electron/main.mjs
@@ -738,7 +738,7 @@ function createWindow(baseUrl) {
     backgroundColor: '#0b1220',
     autoHideMenuBar: !isMac,
     icon: iconPath,
-    titleBarStyle: 'default',
+    titleBarStyle: isMac ? 'hiddenInset' : 'default',
     webPreferences: {
       contextIsolation: true,
       sandbox: true,
diff --git a/src/components/main-content/view/subcomponents/MainContentHeader.tsx b/src/components/main-content/view/subcomponents/MainContentHeader.tsx
index c0ec3490..8088bb68 100644
--- a/src/components/main-content/view/subcomponents/MainContentHeader.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentHeader.tsx
@@ -13,9 +13,15 @@ export default function MainContentHeader({
   onMenuClick,
 }: MainContentHeaderProps) {
   return (
-    <div className="bg-background border-b border-border/60 px-3 sm:px-4 pwa-header-safe flex-shrink-0">
+    /*
+     * electron-drag: makes the header bar a window drag handle on macOS.
+     * Interactive children (title area with potential buttons, tab switcher)
+     * use electron-no-drag to restore normal pointer events inside the drag
+     * region. The trailing empty flex-1 div stays draggable as dead space.
+     */
+    <div className="bg-background border-b border-border/60 px-3 sm:px-4 pwa-header-safe flex-shrink-0 electron-drag">
       <div className="flex items-center gap-3 py-1.5 sm:py-2">
-        <div className="flex items-center gap-2 min-w-0 flex-1">
+        <div className="flex items-center gap-2 min-w-0 flex-1 electron-no-drag">
           {isMobile && <MobileMenuButton onMenuClick={onMenuClick} />}
           <MainContentTitle
             activeTab={activeTab}
@@ -25,7 +31,7 @@ export default function MainContentHeader({
           />
         </div>
 
-        <div className="hidden sm:flex justify-center flex-1">
+        <div className="hidden sm:flex justify-center flex-1 electron-no-drag">
           {selectedProject && activeTab !== 'dashboard' && activeTab !== 'trash' && (
             <MainContentTabSwitcher
               activeTab={activeTab}
@@ -35,6 +41,7 @@ export default function MainContentHeader({
           )}
         </div>
 
+        {/* Empty right spacer — stays as drag region */}
         <div className="flex-1 hidden sm:block" />
       </div>
     </div>
diff --git a/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx b/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
index 1f191f69..58c46d48 100644
--- a/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
@@ -18,14 +18,18 @@ export default function SidebarCollapsed({
   onShowVersionModal,
   t,
 }: SidebarCollapsedProps) {
+  const isMacDesktop = typeof navigator !== 'undefined'
+    && /Electron/.test(navigator.userAgent) && /Macintosh/.test(navigator.userAgent);
+
   return (
     <div
-      className="h-full flex flex-col items-center pt-3 pb-3 gap-1 bg-background/80 backdrop-blur-sm w-12"
+      className="h-full flex flex-col items-center pb-3 gap-1 bg-background/80 backdrop-blur-sm w-12 electron-drag"
+      style={{ paddingTop: isMacDesktop ? '32px' : '12px' }}
     >
       {/* Expand button with brand logo */}
       <button
         onClick={onExpand}
-        className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
+        className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group electron-no-drag"
         aria-label={t('common:versionUpdate.ariaLabels.showSidebar')}
         title={t('common:versionUpdate.ariaLabels.showSidebar')}
       >
@@ -37,7 +41,7 @@ export default function SidebarCollapsed({
       {/* Settings */}
       <button
         onClick={onShowSettings}
-        className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
+        className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group electron-no-drag"
         aria-label={t('actions.settings')}
         title={t('actions.settings')}
       >
@@ -48,7 +52,7 @@ export default function SidebarCollapsed({
       {updateAvailable && (
         <button
           onClick={onShowVersionModal}
-          className="relative w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors"
+          className="relative w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors electron-no-drag"
           aria-label={t('common:versionUpdate.ariaLabels.updateAvailable')}
           title={t('common:versionUpdate.ariaLabels.updateAvailable')}
         >
diff --git a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
index 6fe56f86..84fa9ad5 100644
--- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
@@ -55,24 +55,38 @@ export default function SidebarHeader({
     </div>
   );
 
+  // UA detection — Chromium always injects "Electron/x.y.z" into the user
+  // agent regardless of preload/contextBridge, so this is unconditionally
+  // reliable.  Module-level detection via window.isElectron can miss if the
+  // bundle evaluates before the preload wires contextBridge values.
+  const isDesktopApp = typeof navigator !== 'undefined' && /Electron/.test(navigator.userAgent);
+  const isMacDesktop = isDesktopApp && /Macintosh/.test(navigator.userAgent);
+
   return (
     <div className="flex-shrink-0">
       {/* Desktop header */}
-      <div className="hidden md:block px-3 pt-3 pb-2">
-        <div className="flex items-center justify-between gap-2">
-          {IS_PLATFORM ? (
-            <a
-              href="https://github.com/OpenLAIR/dr-claw"
-              className="flex items-center gap-2.5 min-w-0 hover:opacity-80 transition-opacity"
-              title={t('tooltips.viewEnvironments')}
-            >
-              <LogoBlock />
-            </a>
-          ) : (
-            <LogoBlock />
+      <div className="hidden md:block px-3 pt-3 pb-2 electron-drag">
+        <div
+          className="flex items-center gap-2"
+          style={{ paddingLeft: isMacDesktop ? '68px' : '0px' }}
+        >
+          {!isDesktopApp && (
+            IS_PLATFORM ? (
+              <a
+                href="https://github.com/OpenLAIR/dr-claw"
+                className="flex items-center gap-2.5 min-w-0 hover:opacity-80 transition-opacity electron-no-drag"
+                title={t('tooltips.viewEnvironments')}
+              >
+                <LogoBlock />
+              </a>
+            ) : (
+              <div className="min-w-0">
+                <LogoBlock />
+              </div>
+            )
           )}
 
-          <div className="flex items-center gap-0.5 flex-shrink-0">
+          <div className="flex items-center gap-0.5 flex-shrink-0 ml-auto electron-no-drag">
             <Button
               type="button"
               variant="ghost"
@@ -113,7 +127,7 @@ export default function SidebarHeader({
 
         {/* Search bar */}
         {!isLoading && (
-          <div className="mt-2.5 space-y-2">
+          <div className="mt-2.5 space-y-2 electron-no-drag">
             {projectsCount > 0 && (
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground/50 pointer-events-none" />
diff --git a/src/index.css b/src/index.css
index 3c1438f7..44da46ef 100644
--- a/src/index.css
+++ b/src/index.css
@@ -699,7 +699,7 @@
     padding-bottom: env(safe-area-inset-bottom);
   }
   
-  /* PWA specific header adjustments - uses CSS variables for consistency */
+/* PWA specific header adjustments - uses CSS variables for consistency */
   .pwa-header-safe {
     padding-top: var(--header-base-padding);
   }
@@ -905,3 +905,19 @@
     transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
   }
 }
+
+/* -----------------------------------------------------------------------
+ * Electron: custom title bar drag regions — placed OUTSIDE @layer so these
+ * rules are not subject to Tailwind cascade-layer priority.
+ * -webkit-app-region: drag  → window drag handle
+ * -webkit-app-region: no-drag → interactive elements inside a drag region
+ * ----------------------------------------------------------------------- */
+.electron-drag {
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+.electron-no-drag {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+

From a7c346128b7c53ae436d2414a50fddd56062043b Mon Sep 17 00:00:00 2001
From: David Liu <davidliu02k@gmail.com>
Date: Thu, 16 Apr 2026 15:40:12 -0700
Subject: [PATCH 2/3] feat: macOS dock icon with native squircle shape and
 proper sizing

Overhaul the icon build pipeline so the macOS dock icon matches native
app icons (Chrome, Finder, etc.) in shape and visual weight.

Icon build script (scripts/build-electron-icons.mjs):
- Generate icon-dock.png with squircle-rounded corners (~22.37% radius
  per Apple HIG) via sharp dest-in compositing with an SVG mask
- Size artwork to 82% of canvas with transparent padding, matching the
  visual weight of system icons
- Fix .iconset sizes to the exact set iconutil expects (16/32/128/256/512
  + @2x retina), removing invalid 64x64 and standalone 1024x1024 entries
- Add iconutil --convert icns step for .icns generation on macOS

Electron main process (electron/main.mjs):
- Only set dock icon in dev mode (no .app bundle); packaged builds rely
  on the bundled .icns which gets native squircle masking from macOS
- Use the pre-masked icon-dock.png instead of the raw square icon.png

Made-with: Cursor
---
 electron/main.mjs                | 17 +++++---
 scripts/build-electron-icons.mjs | 68 +++++++++++++++++++++++++++-----
 2 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/electron/main.mjs b/electron/main.mjs
index 42bc4119..478f65fc 100644
--- a/electron/main.mjs
+++ b/electron/main.mjs
@@ -847,11 +847,18 @@ function createWindow(baseUrl) {
 
 async function boot() {
   try {
-    const iconPath = path.join(resolveAppRoot(), 'build', 'icon.png');
-    if (isMac && fs.existsSync(iconPath)) {
-      const dockIcon = nativeImage.createFromPath(iconPath);
-      if (!dockIcon.isEmpty()) {
-        app.dock.setIcon(dockIcon);
+    if (isMac) {
+      // In packaged builds the bundled .icns gets the macOS squircle mask
+      // automatically, so skip the runtime override.  In dev mode there's no
+      // .app bundle, so set the dock icon from the pre-masked PNG.
+      if (!app.isPackaged) {
+        const dockIconPath = path.join(resolveAppRoot(), 'build', 'icon-dock.png');
+        if (fs.existsSync(dockIconPath)) {
+          const dockIcon = nativeImage.createFromPath(dockIconPath);
+          if (!dockIcon.isEmpty()) {
+            app.dock.setIcon(dockIcon);
+          }
+        }
       }
     }
 
diff --git a/scripts/build-electron-icons.mjs b/scripts/build-electron-icons.mjs
index 9fb88601..720605b1 100644
--- a/scripts/build-electron-icons.mjs
+++ b/scripts/build-electron-icons.mjs
@@ -1,5 +1,7 @@
+import { execFileSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
+import process from 'node:process';
 import sharp from 'sharp';
 import pngToIco from 'png-to-ico';
 
@@ -7,34 +9,80 @@ const projectRoot = process.cwd();
 const buildDir = path.join(projectRoot, 'build');
 const iconsetDir = path.join(buildDir, 'icon.iconset');
 const sourceIcon = path.join(projectRoot, 'public', 'dr-claw.png');
+const isMac = process.platform === 'darwin';
 
-const macIconSizes = [
-  16, 32, 64, 128, 256, 512, 1024,
-];
-
+// iconutil requires exactly these base sizes — each gets a @2x retina variant.
+// 512@2x = 1024x1024, which is the largest size in the .iconset.
+const macIconSizes = [16, 32, 128, 256, 512];
 const winIconSizes = [16, 24, 32, 48, 64, 128, 256];
 
+// macOS squircle corner radius ≈ 22.37% of icon size (Apple HIG continuous curve).
+const MAC_CORNER_RATIO = 0.2237;
+
+/**
+ * Create a rounded-rectangle (squircle) mask as an SVG buffer.
+ * When composited with `dest-in`, the source image is clipped to this shape.
+ */
+function squircleMask(size) {
+  const r = Math.round(size * MAC_CORNER_RATIO);
+  return Buffer.from(
+    `<svg width="${size}" height="${size}">` +
+    `<rect x="0" y="0" width="${size}" height="${size}" rx="${r}" ry="${r}" fill="white"/>` +
+    `</svg>`,
+  );
+}
+
 await fs.promises.rm(iconsetDir, { recursive: true, force: true });
 await fs.promises.mkdir(iconsetDir, { recursive: true });
 await fs.promises.mkdir(buildDir, { recursive: true });
 
+// --- macOS .iconset (raw squares — macOS applies its own mask to .icns) -------
 for (const size of macIconSizes) {
   const baseName = `icon_${size}x${size}`;
-  const outputPath = path.join(iconsetDir, `${baseName}.png`);
-  await sharp(sourceIcon).resize(size, size).png().toFile(outputPath);
+  await sharp(sourceIcon).resize(size, size).png().toFile(path.join(iconsetDir, `${baseName}.png`));
+  await sharp(sourceIcon).resize(size * 2, size * 2).png().toFile(path.join(iconsetDir, `${baseName}@2x.png`));
+}
 
-  if (size <= 512) {
-    const retinaPath = path.join(iconsetDir, `${baseName}@2x.png`);
-    await sharp(sourceIcon).resize(size * 2, size * 2).png().toFile(retinaPath);
+// --- macOS .icns via iconutil (macOS only) ------------------------------------
+if (isMac) {
+  const icnsPath = path.join(buildDir, 'icon.icns');
+  try {
+    execFileSync('iconutil', ['--convert', 'icns', iconsetDir, '--output', icnsPath]);
+  } catch (err) {
+    console.warn('iconutil failed (non-macOS host?) — skipping .icns generation:', err.message);
   }
 }
 
+// --- Generic icon.png for BrowserWindow (Windows/Linux taskbar) ---------------
 await sharp(sourceIcon).resize(512, 512).png().toFile(path.join(buildDir, 'icon.png'));
 
+// --- macOS dock icon with squircle corners (used by app.dock.setIcon) ---------
+// Native macOS icons have ~18% padding around the artwork inside the dock tile.
+// We resize the artwork to ~82% of the canvas and center it on a transparent
+// background so the icon matches the visual weight of Finder, Safari, etc.
+const dockCanvas = 512;
+const dockArtwork = Math.round(dockCanvas * 0.82);
+const dockOffset = Math.round((dockCanvas - dockArtwork) / 2);
+
+const artwork = await sharp(sourceIcon).resize(dockArtwork, dockArtwork).png().toBuffer();
+const maskedArtwork = await sharp(artwork)
+  .composite([{ input: squircleMask(dockArtwork), blend: 'dest-in' }])
+  .png()
+  .toBuffer();
+
+await sharp({
+  create: { width: dockCanvas, height: dockCanvas, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+})
+  .composite([{ input: maskedArtwork, left: dockOffset, top: dockOffset }])
+  .png()
+  .toFile(path.join(buildDir, 'icon-dock.png'));
+
+// --- Windows .ico -------------------------------------------------------------
 const icoBuffer = await pngToIco(
   await Promise.all(
     winIconSizes.map(async (size) => sharp(sourceIcon).resize(size, size).png().toBuffer()),
   ),
 );
-
 await fs.promises.writeFile(path.join(buildDir, 'icon.ico'), icoBuffer);
+
+console.log('Electron icons built → build/{icon.png, icon-dock.png, icon.ico, icon.icns, icon.iconset/}');

From d62ff191fc46581af735cf449a8ca6226e70309e Mon Sep 17 00:00:00 2001
From: David Liu <davidliu02k@gmail.com>
Date: Thu, 16 Apr 2026 15:40:19 -0700
Subject: [PATCH 3/3] feat: patch Electron.app Info.plist for dev dock label

In dev mode the macOS dock shows "Electron" because the label comes from
the Electron.app bundle's Info.plist, not app.setName(). Patch
CFBundleName and CFBundleDisplayName via PlistBuddy before launching the
Electron binary so the dock reads "Dr. Claw" during development.
Production builds are unaffected (electron-builder sets these).

Made-with: Cursor
---
 electron/cli.mjs | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/electron/cli.mjs b/electron/cli.mjs
index c207370c..1334f579 100644
--- a/electron/cli.mjs
+++ b/electron/cli.mjs
@@ -1,4 +1,4 @@
-import { spawn } from 'node:child_process';
+import { execFileSync, spawn } from 'node:child_process';
 import crossSpawn from 'cross-spawn';
 import fs from 'node:fs';
 import path from 'node:path';
@@ -102,6 +102,34 @@ function parseBuilderArgs(args) {
   return builderArgs;
 }
 
+/**
+ * Patch the local Electron.app's Info.plist so the macOS dock shows
+ * "Dr. Claw" instead of "Electron" during development.  Only runs on macOS;
+ * no-ops silently on other platforms.
+ */
+function patchElectronPlistForDev() {
+  if (process.platform !== 'darwin') return;
+
+  const plistPath = path.join(
+    projectRoot, 'node_modules/electron/dist/Electron.app/Contents/Info.plist',
+  );
+  if (!fs.existsSync(plistPath)) return;
+
+  const productName = 'Dr. Claw';
+  try {
+    for (const key of ['CFBundleName', 'CFBundleDisplayName']) {
+      execFileSync('/usr/libexec/PlistBuddy', ['-c', `Set :${key} ${productName}`, plistPath]);
+    }
+  } catch {
+    // PlistBuddy "Set" fails if the key doesn't exist — try "Add" instead.
+    try {
+      execFileSync('/usr/libexec/PlistBuddy', [
+        '-c', `Add :CFBundleDisplayName string ${productName}`, plistPath,
+      ]);
+    } catch { /* best-effort */ }
+  }
+}
+
 async function main() {
   if (command === 'prepare') {
     await prepareElectronRuntime();
@@ -110,6 +138,7 @@ async function main() {
 
   if (command === 'dev') {
     await prepareNodeDevRuntime();
+    patchElectronPlistForDev();
     await run(npmBin(), ['run', 'build']);
     await run(npxBin(), ['electron', 'electron/main.mjs']);
     return;