From c5efd8fd57a36935f6b11057cab96781d0ace3ce Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:40:19 -0700
Subject: [PATCH] [eric] desktop: fullscreen card collapses its traffic lights
 to one exit control (native lights own that corner)

---
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  2 +-
 .../app/pages/Dashboard/cards/BrowserCard.tsx |  1 +
 .../Dashboard/cards/DashboardViewCard.tsx     |  2 +-
 .../app/pages/Dashboard/cards/NoteCard.tsx    |  2 +-
 .../pages/Dashboard/cards/WindowControls.tsx  | 30 ++++++++++++++++++-
 5 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 5436279d..4f6d461c 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -1071,7 +1071,7 @@ const AgentCard: React.FC<Props> = ({
             onPointerDown={(e) => e.stopPropagation()}
             sx={{ display: 'flex', alignItems: 'center', mr: 0.75, flexShrink: 0 }}
           >
-            <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+            <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={isFullscreen} />
           </Box>
           <Box
             sx={{
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 74312337..e821a4dd 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -1000,6 +1000,7 @@ const BrowserCard: React.FC<Props> = ({
             onMinimize={handleMinimize}
             onTile={onTile}
             tiled={!!tileZone}
+            fullscreen={tileZone === 'fullscreen'}
           />
         </Box>
         <Box
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index 627e961d..6da0a007 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -557,7 +557,7 @@ const DashboardViewCard: React.FC<Props> = ({
         }}
       >
         <Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, mr: 0.25 }}>
-          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
         </Box>
         {!isMinimized && <GridViewRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
         <Typography
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index 809baa99..267b3c9f 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -342,7 +342,7 @@ const NoteCard: React.FC<Props> = ({
         }}
       >
         <Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center' }}>
-          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
         </Box>
         {isMinimized && (
           <Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 392c7b29..73291ea9 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -1,5 +1,6 @@
 import React, { useRef, useState } from 'react';
 import Box from '@mui/material/Box';
+import FullscreenExitRoundedIcon from '@mui/icons-material/FullscreenExitRounded';
 import { TILE_ZONES } from './tileZones';
 
 interface WindowControlsProps {
@@ -7,6 +8,9 @@ interface WindowControlsProps {
   onMinimize: () => void;
   onTile: (zone: string) => void; // a TILE_ZONES key, or 'restore'
   tiled?: boolean;
+  // Full size view: the native macOS lights sit right above this corner, so a second dot cluster
+  // reads as double chrome; collapse to ONE exit control and let the natives own window ops.
+  fullscreen?: boolean;
 }
 
 // macOS-style traffic lights on every card = the "AI OS" window feel. Grey at rest so a canvas
@@ -50,13 +54,37 @@ export const ARC_CHIP_SX: Record<string, unknown> = {
   '.osw-pill-host:hover & .osw-window-lights > :nth-of-type(3)': { transform: 'translate(calc(-50% + 11px), calc(-50% + 5px)) scale(1)', opacity: 1, transitionDelay: '80ms' },
 };
 
-function WindowControls({ onClose, onMinimize, onTile, tiled }: WindowControlsProps): React.ReactElement {
+function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen }: WindowControlsProps): React.ReactElement {
   const [menuOpen, setMenuOpen] = useState(false);
   const closeTimer = useRef<number | null>(null);
   const openMenu = (): void => { if (closeTimer.current) window.clearTimeout(closeTimer.current); setMenuOpen(true); };
   const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 180); };
   const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); };
 
+  if (fullscreen) {
+    return (
+      <Box className="osw-window-lights" onPointerDown={stop} sx={{ display: 'flex', alignItems: 'center', flex: 'none' }}>
+        <Box
+          component="button"
+          type="button"
+          aria-label="Exit full screen"
+          title="Exit full screen (Esc)"
+          onClick={(e: React.MouseEvent) => { e.stopPropagation(); onTile('restore'); }}
+          onPointerDown={stop}
+          sx={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            width: 22, height: 22, p: 0, border: 'none', borderRadius: '6px',
+            background: 'transparent', color: 'inherit', opacity: 0.65, cursor: 'pointer',
+            transition: 'opacity 120ms, background 120ms',
+            '&:hover': { opacity: 1, background: 'rgba(136,136,136,0.18)' },
+          }}
+        >
+          <FullscreenExitRoundedIcon sx={{ fontSize: 16 }} />
+        </Box>
+      </Box>
+    );
+  }
+
   const btn = (color: string, symbol: string, onClick: () => void, label: string): React.ReactElement => (
     <Box component="button" type="button" aria-label={label}
       onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClick(); }} onPointerDown={stop} sx={dotSx(color)}>