fix(web): fix Mac sidebar toggle position and platform detection (#1002)

- Mac toggle button now fixed at traffic light position in both
  expanded and collapsed states
- Remove toggle from header on Mac (stays in fixed position)
- Add navigator.userAgent fallback for platform detection when
  VITE_DESKTOP_PLATFORM env is not available (dev mode)
- Inject VITE_DESKTOP_PLATFORM into web dev server env

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: lefarcen

apps/web/src/layouts/workspace-layout.tsx

@@ -680,17 +680,12 @@ function WorkspaceLayoutInner() {
         />
       )}
 
-      {/* Collapsed sidebar toggle (desktop client only) */}
-      {!isWindowsDesktopClient && collapsed && (
+      {/* Mac sidebar toggle — fixed next to traffic lights, always visible */}
+      {isMacDesktopClient && (
         <button
           type="button"
           onClick={() => setCollapsed(!collapsed)}
-          className={cn(
-            "fixed h-8 w-8 rounded-lg text-text-tertiary hover:text-text-primary hover:bg-surface-2 transition-colors hidden md:flex items-center justify-center z-50",
-            isMacDesktopClient
-              ? "top-[10px] left-[76px]"
-              : "top-[16px] left-[24px]",
-          )}
+          className="fixed top-[10px] left-[76px] h-8 w-8 rounded-lg text-text-tertiary hover:text-text-primary hover:bg-surface-2 transition-colors hidden md:flex items-center justify-center z-50"
           style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
           title={
             collapsed ? t("layout.expandSidebar") : t("layout.collapseSidebar")
@@ -703,6 +698,18 @@ function WorkspaceLayoutInner() {
           )}
         </button>
       )}
+      {/* Non-mac, non-windows collapsed toggle */}
+      {!isMacDesktopClient && !isWindowsDesktopClient && collapsed && (
+        <button
+          type="button"
+          onClick={() => setCollapsed(!collapsed)}
+          className="fixed top-[16px] left-[24px] h-8 w-8 rounded-lg text-text-tertiary hover:text-text-primary hover:bg-surface-2 transition-colors hidden md:flex items-center justify-center z-50"
+          style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
+          title={t("layout.expandSidebar")}
+        >
+          <PanelLeftOpen size={16} />
+        </button>
+      )}
 
       {isWindowsDesktopClient && (
         <div className="fixed px-2 z-50">
@@ -735,18 +742,14 @@ function WorkspaceLayoutInner() {
         }
       >
         {/* Traffic light clearance (desktop client) */}
-        {!isWindowsDesktopClient && (
-          <div
-            className={cn("shrink-0", isMacDesktopClient ? "h-10" : "h-14")}
-          />
-        )}
+        {!isWindowsDesktopClient && <div className={cn("shrink-0", "h-14")} />}
 
         {/* Header / Brand */}
         {!isWindowsDesktopClient && (
           <div
             className={cn(
               "flex items-center justify-between px-3 pb-2 shrink-0",
-              isMacDesktopClient && "h-12 pl-4 pr-3 pt-0 pb-1",
+              isMacDesktopClient && "px-4 pb-1",
               !isDesktopClient && "border-b border-border py-3 px-4 gap-2.5",
             )}
             style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
@@ -768,14 +771,16 @@ function WorkspaceLayoutInner() {
                       {t("layout.update.badge")}
                     </button>
                   )}
-                  <button
-                    type="button"
-                    onClick={() => setCollapsed(true)}
-                    className="p-1.5 rounded-lg transition-colors text-text-muted hover:text-text-primary hover:bg-surface-3 shrink-0"
-                    title={t("layout.collapseSidebar")}
-                  >
-                    <PanelLeftClose size={14} />
-                  </button>
+                  {!isMacDesktopClient && (
+                    <button
+                      type="button"
+                      onClick={() => setCollapsed(true)}
+                      className="p-1.5 rounded-lg transition-colors text-text-muted hover:text-text-primary hover:bg-surface-3 shrink-0"
+                      title={t("layout.collapseSidebar")}
+                    >
+                      <PanelLeftClose size={14} />
+                    </button>
+                  )}
                 </div>
               </>
             ) : (

apps/web/src/lib/desktop-platform.ts

@@ -1,6 +1,18 @@
 export function getDesktopPlatform(): string | null {
-  const value = import.meta.env.VITE_DESKTOP_PLATFORM;
-  return typeof value === "string" && value.trim().length > 0 ? value : null;
+  // Prefer the build-time env injected by desktop packaging / dev scripts.
+  const envValue = import.meta.env.VITE_DESKTOP_PLATFORM;
+  if (typeof envValue === "string" && envValue.trim().length > 0) {
+    return envValue;
+  }
+  // Fallback: detect at runtime via navigator so dev-mode webviews
+  // (where Vite may not receive the env) still get the correct platform.
+  if (typeof navigator !== "undefined") {
+    const ua = navigator.userAgent.toLowerCase();
+    if (ua.includes("win")) return "win32";
+    if (ua.includes("mac")) return "darwin";
+    if (ua.includes("linux")) return "linux";
+  }
+  return null;
 }
 
 export function isWindowsDesktopPlatform(): boolean {

scripts/dev/src/shared/dev-runtime-config.ts

@@ -215,6 +215,7 @@ export function createWebInjectedEnv(): NodeJS.ProcessEnv {
     WEB_HOST: "127.0.0.1",
     WEB_PORT: String(config.webPort),
     WEB_API_ORIGIN: config.controllerUrl,
+    VITE_DESKTOP_PLATFORM: process.platform,
   };
 }