CUB-61: add BreakroomSceneComponent with 16-bit office layout

- Created BreakroomSceneComponent with CSS Grid layout
- Left side: dev breakroom + 3 desks
- Right side: business breakroom + 3 desks (mirrored)
- Center divider with neon glow effect
- Static background SVG with desks, couches, TVs, banana bowls
- Integration with MinionComponent from CUB-60
- Minions positioned at desks or breakroom based on state
- Updated BreakroomPageComponent to use scene layout
- Collapsible controls panel for demo/testing
- Touch-optimized with 48px minimum targets
- Responsive breakpoints for tablet and mobile
- Accessibility: reduced motion, high contrast support

.gitignore

@@ -0,0 +1 @@
+backend/

frontend/public/scene/breakroom.svg

@@ -0,0 +1,273 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+  <defs>
+    <!-- Floor pattern -->
+    <pattern id="floor-tiles" x="0" y="0" width="64" height="64" patternUnits="userSpaceOnUse">
+      <rect width="64" height="64" fill="#1A1E24"/>
+      <rect width="32" height="32" fill="#1C2027" x="0" y="0"/>
+      <rect width="32" height="32" fill="#1C2027" x="32" y="32"/>
+    </pattern>
+
+    <!-- Desk gradient -->
+    <linearGradient id="desk-top" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#3A4255"/>
+      <stop offset="100%" stop-color="#2D3748"/>
+    </linearGradient>
+
+    <!-- Screen glow -->
+    <linearGradient id="screen-glow" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#38BDF8" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="#38BDF8" stop-opacity="0.02"/>
+    </linearGradient>
+
+    <!-- Couch gradient -->
+    <linearGradient id="couch-fabric" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4A5568"/>
+      <stop offset="100%" stop-color="#2D3748"/>
+    </linearGradient>
+
+    <!-- TV screen glow -->
+    <radialGradient id="tv-glow" cx="50%" cy="50%" r="60%">
+      <stop offset="0%" stop-color="#38BDF8" stop-opacity="0.3"/>
+      <stop offset="100%" stop-color="#0A1628" stop-opacity="0"/>
+    </radialGradient>
+
+    <!-- Banana bowl gradient -->
+    <linearGradient id="bowl-gradient" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#8B7355"/>
+      <stop offset="100%" stop-color="#6B5740"/>
+    </linearGradient>
+  </defs>
+
+  <!-- ===== BACKGROUND ===== -->
+  <rect width="1920" height="1080" fill="url(#floor-tiles)"/>
+
+  <!-- Back wall -->
+  <rect x="0" y="0" width="1920" height="640" fill="#13161A" opacity="0.6"/>
+
+  <!-- Wall trim line -->
+  <rect x="0" y="636" width="1920" height="4" fill="#2D3748"/>
+
+  <!-- ===== CENTER DIVIDER ===== -->
+  <rect x="956" y="0" width="8" height="1080" fill="#2D3748"/>
+  <rect x="958" y="0" width="4" height="1080" fill="#38BDF8" opacity="0.4"/>
+  <!-- Divider glow -->
+  <rect x="948" y="0" width="24" height="1080" fill="url(#screen-glow)" opacity="0.3"/>
+
+  <!-- ===== SIDE LABELS ===== -->
+  <!-- Dev label -->
+  <text x="480" y="52" fill="#38BDF8" font-family="'Inter','Roboto',sans-serif" font-size="28" font-weight="700" text-anchor="middle" letter-spacing="0.1em">DEVELOPMENT</text>
+  <text x="480" y="80" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="16" font-weight="400" text-anchor="middle" letter-spacing="0.05em">Dev Minions</text>
+
+  <!-- Business label -->
+  <text x="1440" y="52" fill="#2DD4BF" font-family="'Inter','Roboto',sans-serif" font-size="28" font-weight="700" text-anchor="middle" letter-spacing="0.1em">BUSINESS</text>
+  <text x="1440" y="80" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="16" font-weight="400" text-anchor="middle" letter-spacing="0.05em">Business Minions</text>
+
+  <!-- ===== DEV SIDE DESKS (3 desks) ===== -->
+  <!-- Desk 1 -->
+  <g transform="translate(60, 300)">
+    <!-- Desk shadow -->
+    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
+    <!-- Desk surface -->
+    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
+    <!-- Desk edge -->
+    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
+    <!-- Laptop -->
+    <g transform="translate(90, 30)">
+      <!-- Screen -->
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
+      <!-- Screen content lines -->
+      <rect x="8" y="10" width="50" height="2" rx="1" fill="#38BDF8" opacity="0.6"/>
+      <rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
+      <rect x="8" y="22" width="42" height="2" rx="1" fill="#38BDF8" opacity="0.5"/>
+      <!-- Screen glow -->
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
+      <!-- Base -->
+      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
+    </g>
+    <!-- Chair -->
+    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
+    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
+  </g>
+
+  <!-- Desk 2 -->
+  <g transform="translate(60, 520)">
+    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
+    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
+    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
+    <g transform="translate(90, 30)">
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
+      <rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
+      <rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
+      <rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
+      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
+    </g>
+    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
+    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
+  </g>
+
+  <!-- Desk 3 -->
+  <g transform="translate(340, 300)">
+    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
+    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
+    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
+    <g transform="translate(90, 30)">
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
+      <rect x="8" y="10" width="50" height="2" rx="1" fill="#38BDF8" opacity="0.6"/>
+      <rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
+      <rect x="8" y="22" width="42" height="2" rx="1" fill="#38BDF8" opacity="0.5"/>
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
+      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
+    </g>
+    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
+    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
+  </g>
+
+  <!-- ===== BUSINESS SIDE DESKS (3 desks, mirrored) ===== -->
+  <!-- Desk 1 -->
+  <g transform="translate(620, 300)">
+    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
+    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
+    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
+    <g transform="translate(90, 30)">
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
+      <rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
+      <rect x="8" y="16" width="35" height="2" rx="1" fill="#F87171" opacity="0.4"/>
+      <rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
+      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
+    </g>
+    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
+    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
+  </g>
+
+  <!-- Desk 2 -->
+  <g transform="translate(620, 520)">
+    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
+    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
+    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
+    <g transform="translate(90, 30)">
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
+      <rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
+      <rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
+      <rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
+      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
+    </g>
+    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
+    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
+  </g>
+
+  <!-- Desk 3 -->
+  <g transform="translate(900, 300)">
+    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
+    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
+    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
+    <g transform="translate(90, 30)">
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
+      <rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
+      <rect x="8" y="16" width="35" height="2" rx="1" fill="#F87171" opacity="0.4"/>
+      <rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
+      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
+      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
+    </g>
+    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
+    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
+  </g>
+
+  <!-- ===== DEV BREAKROOM (bottom-left) ===== -->
+  <!-- Couch -->
+  <g transform="translate(60, 800)">
+    <!-- Couch back -->
+    <rect x="0" y="0" width="280" height="80" rx="12" fill="url(#couch-fabric)" stroke="#4A5568" stroke-width="2"/>
+    <!-- Cushion -->
+    <rect x="10" y="10" width="260" height="60" rx="8" fill="#374151" stroke="#4A5568" stroke-width="1"/>
+    <!-- Cushion dividers -->
+    <rect x="95" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
+    <rect x="185" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
+    <!-- Armrests -->
+    <rect x="0" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
+    <rect x="260" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
+    <!-- Couch label -->
+    <text x="140" y="50" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="12" text-anchor="middle" opacity="0.6">COMFY SOFA</text>
+  </g>
+
+  <!-- TV -->
+  <g transform="translate(400, 780)">
+    <!-- TV frame -->
+    <rect x="0" y="0" width="160" height="100" rx="6" fill="#1A1E24" stroke="#3A4255" stroke-width="2"/>
+    <!-- TV screen -->
+    <rect x="8" y="8" width="144" height="76" rx="4" fill="#0A1628"/>
+    <!-- TV content - code lines -->
+    <rect x="16" y="20" width="80" height="2" rx="1" fill="#38BDF8" opacity="0.5"/>
+    <rect x="16" y="28" width="60" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
+    <rect x="16" y="36" width="90" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
+    <rect x="16" y="44" width="50" height="2" rx="1" fill="#38BDF8" opacity="0.4"/>
+    <rect x="16" y="52" width="70" height="2" rx="1" fill="#F87171" opacity="0.3"/>
+    <!-- TV glow -->
+    <rect x="8" y="8" width="144" height="76" rx="4" fill="url(#tv-glow)" opacity="0.6"/>
+    <!-- TV stand -->
+    <rect x="70" y="100" width="20" height="16" fill="#3A4255"/>
+    <rect x="55" y="112" width="50" height="4" rx="2" fill="#3A4255"/>
+    <!-- TV label -->
+    <text x="80" y="138" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="11" text-anchor="middle" opacity="0.5">MONITOR</text>
+  </g>
+
+  <!-- Banana Bowl (Dev side) -->
+  <g transform="translate(200, 950)">
+    <!-- Bowl -->
+    <ellipse cx="0" cy="0" rx="36" ry="20" fill="url(#bowl-gradient)" stroke="#5A4A3A" stroke-width="2"/>
+    <ellipse cx="0" cy="-4" rx="30" ry="14" fill="#8B7355" opacity="0.6"/>
+    <!-- Bananas -->
+    <path d="M-12,-8 Q-8,-20 -2,-12" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
+    <path d="M2,-10 Q8,-22 14,-10" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
+    <path d="M-6,-14 Q-2,-24 4,-14" fill="#FFEC6E" stroke="#DAA520" stroke-width="1"/>
+    <!-- Label -->
+    <text x="0" y="32" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="10" text-anchor="middle" opacity="0.5">🍌 BANANA BOWL</text>
+  </g>
+
+  <!-- ===== BUSINESS BREAKROOM (bottom-right, mirrored) ===== -->
+  <!-- Couch (mirrored position) -->
+  <g transform="translate(1080, 800)">
+    <rect x="0" y="0" width="280" height="80" rx="12" fill="url(#couch-fabric)" stroke="#4A5568" stroke-width="2"/>
+    <rect x="10" y="10" width="260" height="60" rx="8" fill="#374151" stroke="#4A5568" stroke-width="1"/>
+    <rect x="95" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
+    <rect x="185" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
+    <rect x="0" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
+    <rect x="260" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
+    <text x="140" y="50" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="12" text-anchor="middle" opacity="0.6">COMFY SOFA</text>
+  </g>
+
+  <!-- TV (Business side) -->
+  <g transform="translate(1420, 780)">
+    <rect x="0" y="0" width="160" height="100" rx="6" fill="#1A1E24" stroke="#3A4255" stroke-width="2"/>
+    <rect x="8" y="8" width="144" height="76" rx="4" fill="#0A1628"/>
+    <!-- Business chart content -->
+    <rect x="16" y="60" width="12" height="20" fill="#2DD4BF" opacity="0.5" rx="1"/>
+    <rect x="32" y="45" width="12" height="35" fill="#2DD4BF" opacity="0.6" rx="1"/>
+    <rect x="48" y="35" width="12" height="45" fill="#2DD4BF" opacity="0.7" rx="1"/>
+    <rect x="64" y="50" width="12" height="30" fill="#2DD4BF" opacity="0.5" rx="1"/>
+    <rect x="80" y="40" width="12" height="40" fill="#2DD4BF" opacity="0.6" rx="1"/>
+    <rect x="96" y="55" width="12" height="25" fill="#2DD4BF" opacity="0.4" rx="1"/>
+    <rect x="8" y="8" width="144" height="76" rx="4" fill="url(#tv-glow)" opacity="0.6"/>
+    <rect x="70" y="100" width="20" height="16" fill="#3A4255"/>
+    <rect x="55" y="112" width="50" height="4" rx="2" fill="#3A4255"/>
+    <text x="80" y="138" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="11" text-anchor="middle" opacity="0.5">MONITOR</text>
+  </g>
+
+  <!-- Banana Bowl (Business side) -->
+  <g transform="translate(1220, 950)">
+    <ellipse cx="0" cy="0" rx="36" ry="20" fill="url(#bowl-gradient)" stroke="#5A4A3A" stroke-width="2"/>
+    <ellipse cx="0" cy="-4" rx="30" ry="14" fill="#8B7355" opacity="0.6"/>
+    <path d="M-12,-8 Q-8,-20 -2,-12" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
+    <path d="M2,-10 Q8,-22 14,-10" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
+    <path d="M-6,-14 Q-2,-24 4,-14" fill="#FFEC6E" stroke="#DAA520" stroke-width="1"/>
+    <text x="0" y="32" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="10" text-anchor="middle" opacity="0.5">🍌 BANANA BOWL</text>
+  </g>
+
+  <!-- ===== AMBIENT LIGHTING ===== -->
+  <!-- Dev side ceiling light -->
+  <circle cx="480" cy="0" r="300" fill="url(#tv-glow)" opacity="0.15"/>
+  <!-- Business side ceiling light -->
+  <circle cx="1440" cy="0" r="300" fill="url(#tv-glow)" opacity="0.15"/>
+</svg>

frontend/src/app/components/breakroom-scene/breakroom-scene.component.html

@@ -0,0 +1,224 @@
+<!-- ============================================================================
+  Breakroom Scene — 16-bit Office Layout
+  Per CUB-61: Left=Dev, Right=Business, Center=Divider
+  ============================================================================ -->
+
+<div class="scene">
+  <!-- Background SVG layer -->
+  <div class="scene__background">
+    <img
+      src="scene/breakroom.svg"
+      alt="Breakroom background"
+      class="scene__bg-image"
+      aria-hidden="true"
+    />
+  </div>
+
+  <!-- Center divider line (drawn over the SVG for precise control) -->
+  <div class="scene__divider" aria-hidden="true">
+    <div class="scene__divider-glow"></div>
+    <div class="scene__divider-line"></div>
+  </div>
+
+  <!-- ===== DEV SIDE (Left) ===== -->
+  <section class="scene__side scene__side--dev" aria-label="Dev minion area">
+
+    <!-- Side header -->
+    <header class="scene__side-header">
+      <h2 class="scene__side-title scene__side-title--dev">DEVELOPMENT</h2>
+      <span class="scene__side-subtitle">Dev Minions</span>
+    </header>
+
+    <!-- Desks area (3 desks in grid) -->
+    <div class="scene__desks">
+      @for (deskIndex of [0, 1, 2]; track deskIndex) {
+        <div
+          class="scene__desk"
+          [class.scene__desk--occupied]="!!getDeskOccupant('dev', deskIndex)"
+          [class.scene__desk--empty]="!getDeskOccupant('dev', deskIndex)"
+        >
+          <!-- Desk label -->
+          <span class="scene__desk-label">Desk {{ deskIndex + 1 }}</span>
+
+          <!-- Empty desk indicator -->
+          @if (!getDeskOccupant('dev', deskIndex)) {
+            <div class="scene__desk-empty">
+              <span class="scene__desk-empty-icon">💻</span>
+              <span class="scene__desk-empty-text">Empty</span>
+            </div>
+          }
+
+          <!-- Minion at desk (working or walking) -->
+          @if (getDeskOccupant('dev', deskIndex); as occupant) {
+            <app-minion
+              [agentName]="occupant.agentName"
+              [side]="occupant.side"
+              [deskIndex]="occupant.deskIndex"
+              [state]="occupant.state"
+              [progress]="occupant.progress"
+              [displayName]="occupant.displayName"
+              [currentTask]="occupant.currentTask ?? ''"
+            />
+          }
+        </div>
+      }
+    </div>
+
+    <!-- Dev Breakroom area (idle + returning minions) -->
+    <div class="scene__breakroom scene__breakroom--dev">
+      <header class="scene__breakroom-header">
+        <span class="scene__breakroom-icon">🛋️</span>
+        <span class="scene__breakroom-label">Dev Breakroom</span>
+      </header>
+
+      <!-- Breakroom furniture indicators -->
+      <div class="scene__breakroom-furniture">
+        <div class="scene__furniture-item scene__furniture-item--couch">
+          <span class="scene__furniture-emoji">🛋️</span>
+          <span class="scene__furniture-label">Couch</span>
+        </div>
+        <div class="scene__furniture-item scene__furniture-item--tv">
+          <span class="scene__furniture-emoji">📺</span>
+          <span class="scene__furniture-label">TV</span>
+        </div>
+        <div class="scene__furniture-item scene__furniture-item--bananas">
+          <span class="scene__furniture-emoji">🍌</span>
+          <span class="scene__furniture-label">Bananas</span>
+        </div>
+      </div>
+
+      <!-- Idle minions in breakroom -->
+      <div class="scene__breakroom-minions">
+        @for (minion of devBreakroomMinions(); track minion.agentName) {
+          <app-minion
+            [agentName]="minion.agentName"
+            [side]="minion.side"
+            [deskIndex]="minion.deskIndex"
+            [state]="minion.state"
+            [progress]="minion.progress"
+            [displayName]="minion.displayName"
+          />
+        }
+
+        <!-- Returning minions (walking back to breakroom) -->
+        @for (minion of devReturningMinions(); track minion.agentName) {
+          <app-minion
+            [agentName]="minion.agentName"
+            [side]="minion.side"
+            [deskIndex]="minion.deskIndex"
+            [state]="minion.state"
+            [progress]="minion.progress"
+            [displayName]="minion.displayName"
+          />
+        }
+
+        @if (devBreakroomMinions().length === 0 && devReturningMinions().length === 0) {
+          <div class="scene__breakroom-empty">
+            <span>No minions on break 🍌</span>
+          </div>
+        }
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== BUSINESS SIDE (Right) ===== -->
+  <section class="scene__side scene__side--business" aria-label="Business minion area">
+
+    <!-- Side header -->
+    <header class="scene__side-header">
+      <h2 class="scene__side-title scene__side-title--business">BUSINESS</h2>
+      <span class="scene__side-subtitle">Business Minions</span>
+    </header>
+
+    <!-- Desks area (3 desks in grid) -->
+    <div class="scene__desks">
+      @for (deskIndex of [0, 1, 2]; track deskIndex) {
+        <div
+          class="scene__desk"
+          [class.scene__desk--occupied]="!!getDeskOccupant('business', deskIndex)"
+          [class.scene__desk--empty]="!getDeskOccupant('business', deskIndex)"
+        >
+          <!-- Desk label -->
+          <span class="scene__desk-label">Desk {{ deskIndex + 1 }}</span>
+
+          <!-- Empty desk indicator -->
+          @if (!getDeskOccupant('business', deskIndex)) {
+            <div class="scene__desk-empty">
+              <span class="scene__desk-empty-icon">💻</span>
+              <span class="scene__desk-empty-text">Empty</span>
+            </div>
+          }
+
+          <!-- Minion at desk (working or walking) -->
+          @if (getDeskOccupant('business', deskIndex); as occupant) {
+            <app-minion
+              [agentName]="occupant.agentName"
+              [side]="occupant.side"
+              [deskIndex]="occupant.deskIndex"
+              [state]="occupant.state"
+              [progress]="occupant.progress"
+              [displayName]="occupant.displayName"
+              [currentTask]="occupant.currentTask ?? ''"
+            />
+          }
+        </div>
+      }
+    </div>
+
+    <!-- Business Breakroom area -->
+    <div class="scene__breakroom scene__breakroom--business">
+      <header class="scene__breakroom-header">
+        <span class="scene__breakroom-icon">🛋️</span>
+        <span class="scene__breakroom-label">Business Breakroom</span>
+      </header>
+
+      <!-- Breakroom furniture indicators -->
+      <div class="scene__breakroom-furniture">
+        <div class="scene__furniture-item scene__furniture-item--couch">
+          <span class="scene__furniture-emoji">🛋️</span>
+          <span class="scene__furniture-label">Couch</span>
+        </div>
+        <div class="scene__furniture-item scene__furniture-item--tv">
+          <span class="scene__furniture-emoji">📺</span>
+          <span class="scene__furniture-label">TV</span>
+        </div>
+        <div class="scene__furniture-item scene__furniture-item--bananas">
+          <span class="scene__furniture-emoji">🍌</span>
+          <span class="scene__furniture-label">Bananas</span>
+        </div>
+      </div>
+
+      <!-- Idle minions in breakroom -->
+      <div class="scene__breakroom-minions">
+        @for (minion of businessBreakroomMinions(); track minion.agentName) {
+          <app-minion
+            [agentName]="minion.agentName"
+            [side]="minion.side"
+            [deskIndex]="minion.deskIndex"
+            [state]="minion.state"
+            [progress]="minion.progress"
+            [displayName]="minion.displayName"
+          />
+        }
+
+        <!-- Returning minions -->
+        @for (minion of businessReturningMinions(); track minion.agentName) {
+          <app-minion
+            [agentName]="minion.agentName"
+            [side]="minion.side"
+            [deskIndex]="minion.deskIndex"
+            [state]="minion.state"
+            [progress]="minion.progress"
+            [displayName]="minion.displayName"
+          />
+        }
+
+        @if (businessBreakroomMinions().length === 0 && businessReturningMinions().length === 0) {
+          <div class="scene__breakroom-empty">
+            <span>No minions on break 🍌</span>
+          </div>
+        }
+      </div>
+    </div>
+  </section>
+</div>

frontend/src/app/components/breakroom-scene/breakroom-scene.component.scss

@@ -0,0 +1,536 @@
+// ============================================================================
+// Breakroom Scene Styles — 16-bit Office Scene Layout
+// Per CUB-61: CSS Grid layout, 1920×1080 viewport, touch-optimized
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Layout Constants
+// ---------------------------------------------------------------------------
+$scene-width: 1920px;
+$scene-height: 1080px;
+$divider-width: 4px;
+$desk-count: 3;
+$pixel: 4px;
+
+// ---------------------------------------------------------------------------
+// Colors — Tactical Dark + Retro Accents
+// ---------------------------------------------------------------------------
+$scene-bg: #0D0F12;
+$scene-surface: #13161A;
+$scene-container: #1C2027;
+$scene-container-high: #252B33;
+$scene-outline: #2D3748;
+$scene-on-surface: #E2E8F0;
+$scene-on-surface-variant: #8A9BB0;
+
+$dev-accent: #38BDF8;
+$dev-accent-dim: rgba(56, 189, 248, 0.15);
+$business-accent: #2DD4BF;
+$business-accent-dim: rgba(45, 212, 191, 0.15);
+
+$desk-surface: #1E2430;
+$desk-border: #2D3748;
+$desk-hover: #252B33;
+$breakroom-bg: rgba(45, 212, 191, 0.04);
+
+// ---------------------------------------------------------------------------
+// Animations
+// ---------------------------------------------------------------------------
+@keyframes dividerPulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+@keyframes emptyDeskPulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes slideInFromBottom {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Scene Root — Full viewport container
+// ---------------------------------------------------------------------------
+.scene {
+  position: relative;
+  width: 100%;
+  max-width: $scene-width;
+  height: 100%;
+  min-height: 600px;
+  aspect-ratio: 16 / 9;
+  display: grid;
+  grid-template-columns: 1fr $divider-width 1fr;
+  grid-template-rows: 1fr;
+  overflow: hidden;
+  background-color: $scene-bg;
+  border-radius: var(--cc-card-border-radius, 16px);
+  image-rendering: pixelated;
+}
+
+// ---------------------------------------------------------------------------
+// Background Image Layer
+// ---------------------------------------------------------------------------
+.scene__background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.scene__bg-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.35;
+}
+
+// ---------------------------------------------------------------------------
+// Center Divider — Glowing neon line
+// ---------------------------------------------------------------------------
+.scene__divider {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: $divider-width;
+  height: 100%;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.scene__divider-glow {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(56, 189, 248, 0.08) 0%,
+    rgba(56, 189, 248, 0.25) 20%,
+    rgba(56, 189, 248, 0.25) 80%,
+    rgba(56, 189, 248, 0.08) 100%
+  );
+  filter: blur(6px);
+  animation: dividerPulse 4s ease-in-out infinite;
+}
+
+.scene__divider-line {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: $divider-width;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(56, 189, 248, 0.3) 0%,
+    rgba(56, 189, 248, 0.8) 15%,
+    rgba(56, 189, 248, 0.8) 85%,
+    rgba(56, 189, 248, 0.3) 100%
+  );
+  box-shadow:
+    0 0 8px rgba(56, 189, 248, 0.6),
+    0 0 16px rgba(56, 189, 248, 0.3);
+}
+
+// ---------------------------------------------------------------------------
+// Side Sections — Left (Dev) & Right (Business)
+// ---------------------------------------------------------------------------
+.scene__side {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  gap: 20px;
+  overflow-y: auto;
+
+  &--dev {
+    grid-column: 1;
+    background: linear-gradient(
+      135deg,
+      rgba(56, 189, 248, 0.03) 0%,
+      transparent 60%
+    );
+  }
+
+  &--business {
+    grid-column: 3;
+    background: linear-gradient(
+      135deg,
+      rgba(45, 212, 191, 0.03) 0%,
+      transparent 60%
+    );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Side Header
+// ---------------------------------------------------------------------------
+.scene__side-header {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid $scene-outline;
+}
+
+.scene__side-title {
+  font-family: 'Inter', 'Roboto', sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin: 0;
+
+  &--dev {
+    color: $dev-accent;
+    text-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
+  }
+
+  &--business {
+    color: $business-accent;
+    text-shadow: 0 0 12px rgba(45, 212, 191, 0.4);
+  }
+}
+
+.scene__side-subtitle {
+  font-size: 12px;
+  color: $scene-on-surface-variant;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+// ---------------------------------------------------------------------------
+// Desks Area — 3-column grid
+// ---------------------------------------------------------------------------
+.scene__desks {
+  display: grid;
+  grid-template-columns: repeat($desk-count, 1fr);
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Individual Desk
+// ---------------------------------------------------------------------------
+.scene__desk {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  background-color: $desk-surface;
+  border: 2px solid $desk-border;
+  border-radius: 12px;
+  padding: 12px;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+
+  &--occupied {
+    border-color: $dev-accent;
+    background-color: rgba(56, 189, 248, 0.06);
+    box-shadow: 0 0 12px rgba(56, 189, 248, 0.1);
+  }
+
+  &--empty {
+    border-style: dashed;
+  }
+}
+
+// Business side desk accent
+.scene__side--business .scene__desk--occupied {
+  border-color: $business-accent;
+  background-color: rgba(45, 212, 191, 0.06);
+  box-shadow: 0 0 12px rgba(45, 212, 191, 0.1);
+}
+
+.scene__desk-label {
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: $scene-on-surface-variant;
+  opacity: 0.6;
+}
+
+// Empty desk placeholder
+.scene__desk-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  opacity: 0.4;
+  animation: emptyDeskPulse 3s ease-in-out infinite;
+}
+
+.scene__desk-empty-icon {
+  font-size: 32px;
+}
+
+.scene__desk-empty-text {
+  font-size: 12px;
+  color: $scene-on-surface-variant;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+// ---------------------------------------------------------------------------
+// Breakroom Area (bottom of each side)
+// ---------------------------------------------------------------------------
+.scene__breakroom {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background-color: $breakroom-bg;
+  border: 1px solid $scene-outline;
+  border-radius: 12px;
+  min-height: 200px;
+
+  &--dev {
+    border-top: 2px solid rgba(56, 189, 248, 0.2);
+  }
+
+  &--business {
+    border-top: 2px solid rgba(45, 212, 191, 0.2);
+  }
+}
+
+.scene__breakroom-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.scene__breakroom-icon {
+  font-size: 20px;
+}
+
+.scene__breakroom-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: $scene-on-surface;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+// ---------------------------------------------------------------------------
+// Breakroom Furniture (emoji placeholders)
+// ---------------------------------------------------------------------------
+.scene__breakroom-furniture {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.scene__furniture-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.scene__furniture-emoji {
+  font-size: 16px;
+}
+
+.scene__furniture-label {
+  font-size: 11px;
+  color: $scene-on-surface-variant;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+// ---------------------------------------------------------------------------
+// Breakroom Minions Container
+// ---------------------------------------------------------------------------
+.scene__breakroom-minions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: flex-end;
+  justify-content: center;
+  flex: 1;
+  min-height: 100px;
+  padding: 12px;
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  border: 1px dashed rgba(255, 255, 255, 0.06);
+}
+
+.scene__breakroom-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 24px;
+  color: $scene-on-surface-variant;
+  font-size: 14px;
+  font-style: italic;
+  opacity: 0.6;
+}
+
+// ---------------------------------------------------------------------------
+// Minion slide-in animation
+// ---------------------------------------------------------------------------
+.scene__breakroom-minions app-minion {
+  animation: slideInFromBottom 0.3s ease-out;
+}
+
+.scene__desks app-minion {
+  animation: slideInFromBottom 0.3s ease-out;
+}
+
+// ---------------------------------------------------------------------------
+// Touch optimization
+// ---------------------------------------------------------------------------
+.scene__desk {
+  min-width: 48px;
+  min-height: 48px;
+
+  // Ensure the desk area is touch-friendly
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Responsive — Scale down on smaller viewports
+// ---------------------------------------------------------------------------
+@media (max-width: 1200px) {
+  .scene {
+    aspect-ratio: auto;
+    min-height: 800px;
+  }
+
+  .scene__side {
+    padding: 16px;
+    gap: 12px;
+  }
+
+  .scene__side-title {
+    font-size: 20px;
+  }
+
+  .scene__desks {
+    gap: 12px;
+  }
+
+  .scene__desk {
+    min-height: 140px;
+    padding: 8px;
+  }
+}
+
+@media (max-width: 900px) {
+  .scene {
+    // Switch to single column on mobile
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    aspect-ratio: auto;
+  }
+
+  .scene__divider {
+    display: none;
+  }
+
+  .scene__side {
+    &--dev {
+      grid-column: 1;
+    }
+
+    &--business {
+      grid-column: 1;
+    }
+  }
+
+  .scene__desks {
+    grid-template-columns: repeat($desk-count, 1fr);
+    gap: 8px;
+  }
+
+  .scene__desk {
+    min-height: 120px;
+  }
+}
+
+@media (max-width: 599px) {
+  .scene {
+    border-radius: 0;
+  }
+
+  .scene__side {
+    padding: 12px;
+    gap: 8px;
+  }
+
+  .scene__side-title {
+    font-size: 16px;
+  }
+
+  .scene__desk {
+    min-height: 100px;
+    padding: 6px;
+  }
+
+  .scene__breakroom {
+    padding: 12px;
+    min-height: 140px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Accessibility: Reduced Motion
+// ---------------------------------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .scene__divider-glow {
+    animation: none;
+  }
+
+  .scene__desk-empty {
+    animation: none;
+  }
+
+  .scene__breakroom-minions app-minion,
+  .scene__desks app-minion {
+    animation: none;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// High contrast mode
+// ---------------------------------------------------------------------------
+@media (prefers-contrast: high) {
+  .scene__desk {
+    border-width: 3px;
+  }
+
+  .scene__divider-line {
+    background: $dev-accent;
+    box-shadow: 0 0 16px $dev-accent;
+  }
+
+  .scene__desk-label {
+    opacity: 1;
+  }
+}

frontend/src/app/components/breakroom-scene/breakroom-scene.component.ts

@@ -0,0 +1,115 @@
+// ============================================================================
+// Breakroom Scene Component — 16-bit Office Scene Layout
+// Per CUB-61: Breakroom & Desk Scene Layout
+// ============================================================================
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MinionComponent } from '../minion/minion.component';
+import { MinionStateService } from '../../services/minion-state.service';
+import { MinionData, MinionSide } from '../../models/minion.model';
+
+/**
+ * Configuration for a desk slot in the scene.
+ * Each desk has a fixed position index and assigned side.
+ */
+interface DeskSlot {
+  side: MinionSide;
+  index: number;
+  /** Grid area identifier for CSS Grid placement */
+  gridArea: string;
+}
+
+/**
+ * BreakroomSceneComponent renders the full 16-bit office layout:
+ *
+ * ┌─────────────────┬─────────────────┐
+ * │   DEV SIDE       │  BUSINESS SIDE   │
+ * │                  │                  │
+ * │  [Desk 0] [Desk 2]│[Desk 0] [Desk 2]│
+ * │  [Desk 1]        │[Desk 1]        │
+ * │                  │                  │
+ * │  🛋️ Breakroom   │  🛋️ Breakroom   │
+ * │  📺 TV 🍌 Bowl  │  📺 TV 🍌 Bowl  │
+ * └─────────────────┴─────────────────┘
+ *
+ * Minions are positioned at their assigned desk or in the breakroom
+ * area based on their current state (idle → breakroom, working → desk).
+ */
+@Component({
+  selector: 'app-breakroom-scene',
+  standalone: true,
+  imports: [CommonModule, MinionComponent],
+  templateUrl: './breakroom-scene.component.html',
+  styleUrl: './breakroom-scene.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreakroomSceneComponent {
+  private readonly minionStateService = inject(MinionStateService);
+
+  /** All minion data from the state service */
+  readonly minions = this.minionStateService.minionList;
+
+  /** Dev-side minions (idle or in breakroom) */
+  readonly devBreakroomMinions = computed(() =>
+    this.minions().filter((m) => m.side === 'dev' && m.state === 'idle'),
+  );
+
+  /** Business-side minions (idle or in breakroom) */
+  readonly businessBreakroomMinions = computed(() =>
+    this.minions().filter((m) => m.side === 'business' && m.state === 'idle'),
+  );
+
+  /** Dev-side minions currently at desks (working or walking to desk) */
+  readonly devDeskMinions = computed(() =>
+    this.minions().filter(
+      (m) => m.side === 'dev' && (m.state === 'working' || m.state === 'walking'),
+    ),
+  );
+
+  /** Business-side minions currently at desks (working or walking to desk) */
+  readonly businessDeskMinions = computed(() =>
+    this.minions().filter(
+      (m) =>
+        m.side === 'business' &&
+        (m.state === 'working' || m.state === 'walking'),
+    ),
+  );
+
+  /** Dev-side minions returning to breakroom */
+  readonly devReturningMinions = computed(() =>
+    this.minions().filter((m) => m.side === 'dev' && m.state === 'returning'),
+  );
+
+  /** Business-side minions returning to breakroom */
+  readonly businessReturningMinions = computed(() =>
+    this.minions().filter(
+      (m) => m.side === 'business' && m.state === 'returning',
+    ),
+  );
+
+  /**
+   * Check if a desk slot is occupied.
+   * Returns the minion data if occupied, undefined if empty.
+   */
+  getDeskOccupant(side: MinionSide, deskIndex: number): MinionData | undefined {
+    return this.minions().find(
+      (m) =>
+        m.side === side &&
+        m.deskIndex === deskIndex &&
+        (m.state === 'working' || m.state === 'walking'),
+    );
+  }
+
+  /**
+   * Track minions by agent name for efficient @for rendering.
+   */
+  trackByAgentName(_index: number, minion: MinionData): string {
+    return minion.agentName;
+  }
+}

frontend/src/app/pages/breakroom/breakroom-page.component.html

@@ -1,136 +1,76 @@
 <!-- ============================================================================
-  Breakroom Page — Demo/Test for Minion State & Animation
+  Breakroom Page — Scene layout with demo controls
-  Per CUB-60: Validation page with spawn/transition/reset controls
+  Per CUB-61: Uses BreakroomSceneComponent for the visual layout
   ============================================================================ -->
-<div class="breakroom">
-  <!-- Breakroom area (idle minions) -->
-  <section class="breakroom__zone breakroom__zone--breakroom">
-    <h2 class="breakroom__zone-title">
-      <mat-icon>weekend</mat-icon>
-      Breakroom
-    </h2>
-    <div class="breakroom__minions breakroom__minions--idle">
-      @for (minion of minions(); track minion.agentName) {
-        @if (minion.state === 'idle') {
-          <app-minion
-            [agentName]="minion.agentName"
-            [side]="minion.side"
-            [deskIndex]="minion.deskIndex"
-            [state]="minion.state"
-            [progress]="minion.progress"
-            [displayName]="minion.displayName"
-          />
-        }
-      }
-    </div>
-  </section>
 
-  <!-- Office area (working desks) -->
+<div class="breakroom-page">
-  <section class="breakroom__zone breakroom__zone--office">
+  <!-- Scene layout (full width) -->
-    <div class="breakroom__office-header">
+  <app-breakroom-scene class="breakroom-page__scene" />
-      <h2 class="breakroom__zone-title">
+
-        <mat-icon>computer</mat-icon>
+  <!-- Control panel for testing (collapsible) -->
-        Office
+  <section class="breakroom-page__controls">
+    <header class="breakroom-page__controls-header" (click)="controlsExpanded.set(!controlsExpanded())">
+      <h2 class="breakroom-page__controls-title">
+        <mat-icon>gamepad</mat-icon>
+        Controls
       </h2>
-    </div>
+      <mat-icon>{{ controlsExpanded() ? 'expand_less' : 'expand_more' }}</mat-icon>
+    </header>
 
-    <!-- Dev side -->
+    @if (controlsExpanded()) {
-    <div class="breakroom__desk-row">
+      <p class="breakroom-page__controls-hint">
-      <h3 class="breakroom__desk-label">Dev Desks</h3>
+        Spawn minions and control their state transitions
-      <div class="breakroom__desks">
+      </p>
-        @for (minion of minions(); track minion.agentName) {
+
-          @if (minion.side === 'dev' && (minion.state === 'working' || minion.state === 'walking')) {
+      <div class="breakroom-page__button-grid">
-            <div class="breakroom__desk" [style.--desk-index]="minion.deskIndex">
+        @for (demo of demoMinions; track demo.agentName) {
-              <app-minion
+          <div class="breakroom-page__control-row">
-                [agentName]="minion.agentName"
+            <span class="breakroom-page__agent-name">{{ demo.displayName }}</span>
-                [side]="minion.side"
+            <span class="breakroom-page__agent-side" [class]="'breakroom-page__agent-side--' + demo.side">
-                [deskIndex]="minion.deskIndex"
+              {{ demo.side }}
-                [state]="minion.state"
+            </span>
-                [progress]="minion.progress"
+
-                [displayName]="minion.displayName"
+            @if (!isSpawned(demo.agentName)) {
-                [currentTask]="minion.currentTask ?? ''"
+              <button mat-raised-button color="primary" (click)="spawnMinion(demo)">
-              />
+                <mat-icon>play_arrow</mat-icon>
-            </div>
+                Spawn
-          }
+              </button>
+            } @else {
+              <span class="breakroom-page__state-chip">{{ getStateLabel(demo.agentName) }}</span>
+
+              <button mat-stroked-button
+                [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
+                (click)="completeTask(demo.agentName)">
+                <mat-icon>check_circle</mat-icon>
+                Complete
+              </button>
+
+              <button mat-stroked-button
+                [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
+                (click)="taskError(demo.agentName)">
+                <mat-icon>error</mat-icon>
+                Error
+              </button>
+
+              <button mat-stroked-button
+                [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
+                (click)="bumpProgress(demo.agentName)">
+                <mat-icon>trending_up</mat-icon>
+                +15%
+              </button>
+
+              <button mat-stroked-button color="warn" (click)="resetMinion(demo.agentName)">
+                <mat-icon>replay</mat-icon>
+                Reset
+              </button>
+
+              <button mat-icon-button color="warn" (click)="removeMinion(demo.agentName)">
+                <mat-icon>close</mat-icon>
+              </button>
+            }
+          </div>
         }
       </div>
-    </div>
+    }
-
-    <!-- Business side -->
-    <div class="breakroom__desk-row">
-      <h3 class="breakroom__desk-label">Business Desks</h3>
-      <div class="breakroom__desks">
-        @for (minion of minions(); track minion.agentName) {
-          @if (minion.side === 'business' && (minion.state === 'working' || minion.state === 'walking')) {
-            <div class="breakroom__desk" [style.--desk-index]="minion.deskIndex">
-              <app-minion
-                [agentName]="minion.agentName"
-                [side]="minion.side"
-                [deskIndex]="minion.deskIndex"
-                [state]="minion.state"
-                [progress]="minion.progress"
-                [displayName]="minion.displayName"
-              />
-            </div>
-          }
-        }
-      </div>
-    </div>
-  </section>
-
-  <!-- Control panel for testing -->
-  <section class="breakroom__controls">
-    <h2 class="breakroom__zone-title">
-      <mat-icon>gamepad</mat-icon>
-      Controls
-    </h2>
-    <p class="breakroom__controls-hint">Spawn minions and control their state transitions</p>
-
-    <div class="breakroom__button-grid">
-      @for (demo of demoMinions; track demo.agentName) {
-        <div class="breakroom__control-row">
-          <span class="breakroom__agent-name">{{ demo.displayName }}</span>
-
-          @if (!isSpawned(demo.agentName)) {
-            <button mat-raised-button color="primary" (click)="spawnMinion(demo)">
-              <mat-icon>play_arrow</mat-icon>
-              Spawn
-            </button>
-          } @else {
-            <span class="breakroom__state-chip">{{ getStateLabel(demo.agentName) }}</span>
-
-            <button mat-stroked-button
-              [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
-              (click)="completeTask(demo.agentName)">
-              <mat-icon>check_circle</mat-icon>
-              Complete
-            </button>
-
-            <button mat-stroked-button
-              [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
-              (click)="taskError(demo.agentName)">
-              <mat-icon>error</mat-icon>
-              Error
-            </button>
-
-            <button mat-stroked-button
-              [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
-              (click)="bumpProgress(demo.agentName)">
-              <mat-icon>trending_up</mat-icon>
-              +15%
-            </button>
-
-            <button mat-stroked-button color="warn" (click)="resetMinion(demo.agentName)">
-              <mat-icon>replay</mat-icon>
-              Reset
-            </button>
-
-            <button mat-icon-button color="warn" (click)="removeMinion(demo.agentName)">
-              <mat-icon>close</mat-icon>
-            </button>
-          }
-        </div>
-      }
-    </div>
   </section>
 </div>

frontend/src/app/pages/breakroom/breakroom-page.component.scss

@@ -1,30 +1,55 @@
 // ============================================================================
 // Breakroom Page Styles
-// Per CUB-60: Demo/test page for minion state & animation
+// Per CUB-61: Updated for scene-based layout with collapsible controls
 // ============================================================================
 
-.breakroom {
+.breakroom-page {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 20px;
   padding: var(--cc-section-padding, 24px);
   min-height: 100%;
 }
 
 // ---------------------------------------------------------------------------
-// Zone (breakroom or office area)
+// Scene container
 // ---------------------------------------------------------------------------
-.breakroom__zone {
+.breakroom-page__scene {
+  width: 100%;
+  border-radius: var(--cc-card-border-radius, 16px);
+  overflow: hidden;
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.3),
+    0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+// ---------------------------------------------------------------------------
+// Controls section (collapsible)
+// ---------------------------------------------------------------------------
+.breakroom-page__controls {
   background-color: var(--cc-surface-container);
   border-radius: var(--cc-card-border-radius, 16px);
   padding: var(--cc-card-padding, 20px);
 }
 
-.breakroom__zone-title {
+.breakroom-page__controls-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+  padding: 4px 0;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.breakroom-page__controls-title {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin: 0 0 16px;
+  margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: var(--cc-on-surface);
@@ -36,117 +61,22 @@
   }
 }
 
-// ---------------------------------------------------------------------------
+.breakroom-page__controls-hint {
-// Breakroom zone (idle minions)
-// ---------------------------------------------------------------------------
-.breakroom__zone--breakroom {
-  background: linear-gradient(
-    135deg,
-    var(--cc-surface-container) 0%,
-    rgba(45, 212, 191, 0.06) 100%
-  );
-  min-height: 120px;
-}
-
-.breakroom__minions--idle {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  justify-content: center;
-  min-height: 80px;
-  align-items: flex-end;
-
-  &:empty::after {
-    content: 'No minions on break 🍌';
-    color: var(--cc-on-surface-variant);
-    font-size: 14px;
-    text-align: center;
-    padding: 20px;
-    display: block;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Office zone (working minions)
-// ---------------------------------------------------------------------------
-.breakroom__zone--office {
-  background: linear-gradient(
-    135deg,
-    var(--cc-surface-container) 0%,
-    rgba(56, 189, 248, 0.06) 100%
-  );
-}
-
-.breakroom__desk-row {
-  margin-bottom: 16px;
-}
-
-.breakroom__desk-label {
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--cc-on-surface-variant);
-  margin: 0 0 8px;
-}
-
-.breakroom__desks {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  min-height: 100px;
-  padding: 12px;
-  border: 2px dashed var(--cc-outline);
-  border-radius: 12px;
-  background-color: rgba(0, 0, 0, 0.1);
-  align-items: flex-end;
-
-  &:empty::after {
-    content: 'No minions at their desks 💻';
-    color: var(--cc-on-surface-variant);
-    font-size: 14px;
-    text-align: center;
-    padding: 20px;
-    display: block;
-    width: 100%;
-  }
-}
-
-.breakroom__desk {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  min-width: 90px;
-  min-height: 110px;
-  background-color: var(--cc-surface-container-high);
-  border-radius: 8px;
-  padding: 8px 4px 4px;
-  border: 1px solid var(--cc-outline);
-}
-
-// ---------------------------------------------------------------------------
-// Controls section
-// ---------------------------------------------------------------------------
-.breakroom__controls {
-  background-color: var(--cc-surface-container);
-  border-radius: var(--cc-card-border-radius, 16px);
-  padding: var(--cc-card-padding, 20px);
-}
-
-.breakroom__controls-hint {
   font-size: 13px;
   color: var(--cc-on-surface-variant);
   margin: 0 0 16px;
 }
 
-.breakroom__button-grid {
+// ---------------------------------------------------------------------------
+// Button Grid
+// ---------------------------------------------------------------------------
+.breakroom-page__button-grid {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
-.breakroom__control-row {
+.breakroom-page__control-row {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -157,14 +87,34 @@
   min-height: 48px;
 }
 
-.breakroom__agent-name {
+.breakroom-page__agent-name {
   font-weight: 600;
   font-size: 14px;
   min-width: 60px;
   color: var(--cc-on-surface);
 }
 
-.breakroom__state-chip {
+.breakroom-page__agent-side {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 2px 8px;
+  border-radius: 10px;
+  color: #fff;
+
+  &--dev {
+    background-color: rgba(56, 189, 248, 0.25);
+    color: #38BDF8;
+  }
+
+  &--business {
+    background-color: rgba(45, 212, 191, 0.25);
+    color: #2DD4BF;
+  }
+}
+
+.breakroom-page__state-chip {
   font-size: 12px;
   font-family: var(--cc-font-mono);
   padding: 4px 10px;
@@ -175,8 +125,8 @@
 }
 
 // Button sizing for touch
-.breakroom__control-row .mat-mdc-raised-button,
+.breakroom-page__control-row .mat-mdc-raised-button,
-.breakroom__control-row .mat-mdc-outlined-button {
+.breakroom-page__control-row .mat-mdc-outlined-button {
   min-height: 40px;
   min-width: 48px;
   font-size: 13px;
@@ -193,17 +143,17 @@
 // Responsive
 // ---------------------------------------------------------------------------
 @media (max-width: 599px) {
-  .breakroom {
+  .breakroom-page {
-    padding: 16px;
+    padding: 12px;
-    gap: 16px;
+    gap: 12px;
   }
 
-  .breakroom__control-row {
+  .breakroom-page__control-row {
     flex-wrap: wrap;
     gap: 6px;
   }
 
-  .breakroom__agent-name {
+  .breakroom-page__agent-name {
     min-width: 50px;
   }
 }

frontend/src/app/pages/breakroom/breakroom-page.component.ts

@@ -1,15 +1,14 @@
 // ============================================================================
-// Breakroom Page — Demo/Test Page for Minion State & Animation
+// Breakroom Page — Hosts the BreakroomSceneComponent with demo controls
-// Per CUB-60: Validation page with spawn/transition/reset controls
+// Per CUB-61: Updated to use scene layout with integrated controls
 // ============================================================================
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatChipsModule } from '@angular/material/chips';
-import { MinionComponent } from '../../components/minion/minion.component';
+import { BreakroomSceneComponent } from '../../components/breakroom-scene/breakroom-scene.component';
 import { MinionStateService } from '../../services/minion-state.service';
-import { MinionData } from '../../models/minion.model';
 
 interface DemoMinion {
   agentName: string;
@@ -26,7 +25,7 @@ interface DemoMinion {
     MatButtonModule,
     MatIconModule,
     MatChipsModule,
-    MinionComponent,
+    BreakroomSceneComponent,
   ],
   templateUrl: './breakroom-page.component.html',
   styleUrl: './breakroom-page.component.scss',
@@ -35,15 +34,19 @@ interface DemoMinion {
 export class BreakroomPageComponent {
   protected readonly minionStateService = inject(MinionStateService);
 
+  /** Whether the controls panel is expanded */
+  readonly controlsExpanded = signal(true);
+
   /** Predefined demo minions */
   readonly demoMinions: DemoMinion[] = [
     { agentName: 'otto', displayName: 'Otto', side: 'dev', deskIndex: 0 },
     { agentName: 'rex', displayName: 'Rex', side: 'dev', deskIndex: 1 },
     { agentName: 'dex', displayName: 'Dex', side: 'dev', deskIndex: 2 },
-    { agentName: 'hex', displayName: 'Hex', side: 'dev', deskIndex: 3 },
+    { agentName: 'hex', displayName: 'Hex', side: 'business', deskIndex: 0 },
-    { agentName: 'pip', displayName: 'Pip', side: 'business', deskIndex: 0 },
+    { agentName: 'pip', displayName: 'Pip', side: 'business', deskIndex: 1 },
-    { agentName: 'nano', displayName: 'Nano', side: 'business', deskIndex: 1 },
+    { agentName: 'nano', displayName: 'Nano', side: 'business', deskIndex: 2 },
-    { agentName: 'flip', displayName: 'Flip', side: 'business', deskIndex: 2 },
+    { agentName: 'sketch', displayName: 'Sketch', side: 'dev', deskIndex: 3 },
+    { agentName: 'flip', displayName: 'Flip', side: 'business', deskIndex: 3 },
   ];
 
   /** All minions currently in the state service */