From 954961b26e732491c24a47d15914865bdeb4eea3 Mon Sep 17 00:00:00 2001
From: Christoph Pfoertner <ch.pfoertner@googlemail.com>
Date: Sat, 3 Oct 2026 22:45:07 +0200
Subject: [PATCH] feat(rpg): add day/night ambient lighting, multi-coder NPCs,
 thought bubbles, XP/level system, CI incident alarm, and interactive Kanban
 modal

---
 index.html | 899 ++++++++++++++++++++++++++++++++++++++++++++---------
 server.py  |  66 +++-
 2 files changed, 821 insertions(+), 144 deletions(-)

diff --git a/index.html b/index.html
index f438230..35bb0f4 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,28 @@
       overflow-x: hidden;
     }
 
+    /* Red Alert Banner */
+    #redAlertBanner {
+      display: none;
+      width: 100%;
+      max-width: 1180px;
+      background: #dc2626;
+      color: #fff;
+      font-family: 'Press Start 2P', monospace;
+      font-size: 11px;
+      padding: 8px 14px;
+      margin-bottom: 8px;
+      border-radius: 4px;
+      border: 2px solid #fecaca;
+      text-align: center;
+      animation: alertFlash 1s infinite alternate;
+      box-shadow: 0 0 20px rgba(220, 38, 38, 0.7);
+    }
+    @keyframes alertFlash {
+      0% { opacity: 1; transform: scale(1); }
+      100% { opacity: 0.85; transform: scale(1.005); }
+    }
+
     header {
       width: 100%;
       max-width: 1180px;
@@ -53,6 +75,7 @@
       display: flex;
       align-items: center;
       gap: 12px;
+      flex-wrap: wrap;
     }
 
     h1 {
@@ -83,10 +106,10 @@
     .header-right {
       display: flex;
       align-items: center;
-      gap: 14px;
+      gap: 10px;
     }
 
-    .sound-btn {
+    .header-btn {
       background: #1e2438;
       border: 1px solid #3e4768;
       color: #facc15;
@@ -95,8 +118,11 @@
       font-size: 18px;
       cursor: pointer;
       border-radius: 4px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
     }
-    .sound-btn:hover {
+    .header-btn:hover {
       background: #2b3350;
       border-color: #facc15;
     }
@@ -105,10 +131,10 @@
     .project-select-box {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 6px;
       background: #141724;
       border: 2px solid #38bdf8;
-      padding: 4px 10px;
+      padding: 3px 8px;
       border-radius: 4px;
     }
     .project-select-label {
@@ -121,7 +147,7 @@
       color: #f1f5f9;
       border: 1px solid #334155;
       font-family: 'VT323', monospace;
-      font-size: 19px;
+      font-size: 18px;
       padding: 2px 6px;
       cursor: pointer;
       border-radius: 3px;
@@ -141,9 +167,11 @@
       margin-bottom: 10px;
       max-width: 1180px;
       width: 100%;
+      flex-wrap: wrap;
     }
     .infra-card {
       flex: 1;
+      min-width: 240px;
       background: var(--card-bg);
       border: 2px solid var(--card-border);
       border-radius: 6px;
@@ -154,7 +182,7 @@
     }
     .infra-title {
       font-family: 'Press Start 2P', monospace;
-      font-size: 10px;
+      font-size: 9px;
       display: flex;
       align-items: center;
       gap: 6px;
@@ -165,6 +193,7 @@
     }
     .badge-ok { background: #064e3b; color: #6ee7b7; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-family:'Press Start 2P'; }
     .badge-busy { background: #854d0e; color: #fef08a; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-family:'Press Start 2P'; }
+    .badge-err { background: #7f1d1d; color: #fca5a5; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-family:'Press Start 2P'; animation: pulse 1s infinite; }
 
     .main-container {
       display: flex;
@@ -192,23 +221,23 @@
       cursor: crosshair;
       background: #0e111a;
       width: 100%;
-      height: 520px;
+      height: 440px;
     }
 
     .status-bar {
       background: #090a10;
       border-top: 2px solid #1e2438;
       padding: 6px 12px;
-      font-size: 17px;
+      font-size: 16px;
       color: #94a3b8;
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
 
-    /* Bottom RPG Dialogue / Terminal Box */
+    /* Bottom RPG Dialogue & Task Dispatcher */
     .rpg-terminal-box {
-      margin-top: 8px;
+      margin-top: 4px;
       background: #06070c;
       border: 2px solid #334155;
       border-radius: 4px;
@@ -216,7 +245,7 @@
       font-family: 'VT323', monospace;
       font-size: 18px;
       color: #a5f3fc;
-      max-height: 85px;
+      max-height: 80px;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
@@ -224,6 +253,37 @@
     }
     .rpg-term-prefix { color: #f59e0b; margin-right: 6px; }
 
+    .dispatcher-bar {
+      display: flex;
+      gap: 6px;
+      background: #0a0e1a;
+      border-top: 1px solid #1f293d;
+      padding: 6px 10px;
+    }
+    .dispatcher-input {
+      flex: 1;
+      background: #06070c;
+      border: 1px solid #3b82f6;
+      color: #67e8f9;
+      font-family: 'VT323', monospace;
+      font-size: 19px;
+      padding: 4px 10px;
+      border-radius: 3px;
+      outline: none;
+    }
+    .dispatcher-input::placeholder { color: #475569; }
+    .dispatcher-btn {
+      background: #1e3a8a;
+      border: 1px solid #3b82f6;
+      color: #fff;
+      font-family: 'Press Start 2P', monospace;
+      font-size: 9px;
+      padding: 0 12px;
+      cursor: pointer;
+      border-radius: 3px;
+    }
+    .dispatcher-btn:hover { background: #2563eb; }
+
     /* Sidebar / Inspector */
     .sidebar {
       width: 350px;
@@ -265,8 +325,8 @@
     }
 
     .avatar-preview {
-      width: 42px;
-      height: 42px;
+      width: 44px;
+      height: 44px;
       border: 2px solid #fff;
       border-radius: 4px;
       background: #1f2438;
@@ -277,11 +337,39 @@
       image-rendering: pixelated;
     }
 
+    .rpg-rank-badge {
+      display: inline-block;
+      background: #312e81;
+      color: #c7d2fe;
+      border: 1px solid #6366f1;
+      border-radius: 3px;
+      font-family: 'Press Start 2P', monospace;
+      font-size: 8px;
+      padding: 2px 5px;
+      margin-top: 3px;
+    }
+
+    .xp-bar-container {
+      background: #090a10;
+      border: 1px solid #334155;
+      border-radius: 3px;
+      height: 8px;
+      width: 100%;
+      margin-top: 4px;
+      overflow: hidden;
+    }
+    .xp-bar-fill {
+      background: linear-gradient(90deg, #3b82f6, #10b981);
+      height: 100%;
+      width: 45%;
+      transition: width 0.3s;
+    }
+
     .status-pill {
       display: inline-block;
       padding: 2px 6px;
       border-radius: 3px;
-      font-size: 11px;
+      font-size: 10px;
       font-weight: bold;
       font-family: 'Press Start 2P', monospace;
       margin-top: 2px;
@@ -328,7 +416,7 @@
       border-radius: 4px;
       padding: 5px;
       font-family: 'VT323', monospace;
-      font-size: 18px;
+      font-size: 17px;
       cursor: pointer;
       transition: all 0.1s;
     }
@@ -343,7 +431,7 @@
 
     /* Mini Activity Log */
     .log-box {
-      height: 95px;
+      height: 85px;
       overflow-y: auto;
       background: #090b12;
       padding: 6px;
@@ -358,10 +446,97 @@
       padding-bottom: 2px;
     }
     .log-time { color: #64748b; margin-right: 4px; }
+
+    /* Interactive Retro Modal (Kanban / Server Rack / Coffee) */
+    .modal-overlay {
+      display: none;
+      position: fixed;
+      top: 0; left: 0; width: 100vw; height: 100vh;
+      background: rgba(0, 0, 0, 0.75);
+      z-index: 999;
+      justify-content: center;
+      align-items: center;
+    }
+    .modal-card {
+      background: #0d111d;
+      border: 3px solid #38bdf8;
+      border-radius: 8px;
+      width: 90%;
+      max-width: 780px;
+      max-height: 85vh;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 0 30px rgba(56, 189, 248, 0.4);
+      padding: 16px;
+    }
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 2px solid #1e293b;
+      padding-bottom: 10px;
+      margin-bottom: 12px;
+    }
+    .modal-title {
+      font-family: 'Press Start 2P', monospace;
+      font-size: 12px;
+      color: #38bdf8;
+    }
+    .modal-close {
+      background: #dc2626;
+      color: #fff;
+      border: 1px solid #f87171;
+      font-family: 'Press Start 2P';
+      font-size: 10px;
+      padding: 4px 8px;
+      cursor: pointer;
+    }
+    .modal-content {
+      overflow-y: auto;
+      flex: 1;
+      font-family: 'VT323', monospace;
+      font-size: 18px;
+    }
+
+    /* Kanban Board Columns in Modal */
+    .kanban-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+      gap: 10px;
+    }
+    .kanban-col {
+      background: #141927;
+      border: 1px solid #28314e;
+      border-radius: 4px;
+      padding: 8px;
+      min-height: 200px;
+    }
+    .kanban-col-title {
+      font-family: 'Press Start 2P', monospace;
+      font-size: 9px;
+      margin-bottom: 8px;
+      padding-bottom: 4px;
+      border-bottom: 1px solid #334155;
+    }
+    .kanban-card {
+      background: #1e2438;
+      border: 1px solid #3e486b;
+      border-radius: 3px;
+      padding: 6px;
+      margin-bottom: 6px;
+      font-size: 15px;
+      line-height: 1.2;
+    }
+    .kanban-card:hover { border-color: #38bdf8; }
   </style>
 </head>
 <body>
 
+  <!-- CI Incident Red Alert Banner -->
+  <div id="redAlertBanner">
+    🚨 CI/CD INCIDENT DETECTED! Gitea Actions Build fehlgeschlagen. Coder untersucht Fehlerlogs! 🚨
+  </div>
+
   <header>
     <div class="header-left">
       <h1>🏢 OPENCLAW RETRO HQ <span class="badge-live">LIVE</span></h1>
@@ -374,14 +549,24 @@
           <option value="mainscreen-party-framework">🎉 Mainscreen Party</option>
         </select>
       </div>
+      <!-- Day/Night Ambient Switcher -->
+      <div class="project-select-box" style="border-color:#fbbf24;">
+        <span class="project-select-label" style="color:#fbbf24;">LICHT:</span>
+        <select id="ambientSelect" onchange="onAmbientChange(this.value)">
+          <option value="auto">🔄 Auto (Echtzeit)</option>
+          <option value="day">☀️ Tag (Daylight)</option>
+          <option value="sunset">🌅 Dämmerung</option>
+          <option value="night">🌙 Nacht (Cozy Neon)</option>
+        </select>
+      </div>
     </div>
     <div class="header-right">
-      <button class="sound-btn" onclick="toggleAudio()" id="soundToggle">🔊 8-Bit Audio: ON</button>
+      <button class="header-btn" onclick="toggleAudio()" id="soundToggle">🔊 8-Bit Audio: ON</button>
       <div class="time-display" id="clock">00:00:00</div>
     </div>
   </header>
 
-  <!-- Realtime Infra Health / Queues / Lead Heartbeat -->
+  <!-- Realtime Infra Health / Queues / Token Velocity -->
   <div class="infra-bar">
     <div class="infra-card">
       <div class="infra-title">⚡ BULLMQ QUEUE</div>
@@ -400,29 +585,41 @@
       </div>
     </div>
     <div class="infra-card">
-      <div class="infra-title">🐙 GITEA KANBAN & PRS</div>
+      <div class="infra-title">🐙 GITEA KANBAN & CI</div>
       <div>
         <span class="infra-val" id="giteaPrs">0</span> <span style="font-size:13px; color:#94a3b8">PRs</span> |
-        <span class="infra-val" id="giteaReview" style="color:#ec4899">0</span> <span style="font-size:13px; color:#94a3b8">rev</span> |
         <span class="infra-val" id="giteaWip" style="color:#38bdf8">0</span> <span style="font-size:13px; color:#94a3b8">wip</span> |
         <span class="badge-ok" id="giteaStatus">CONNECTED</span>
       </div>
     </div>
+    <div class="infra-card">
+      <div class="infra-title">🚀 SPEEDOMETER</div>
+      <div>
+        <span class="infra-val" id="tokenSpeed" style="color:#c084fc">0</span> <span style="font-size:13px; color:#94a3b8">tok/s</span> |
+        <span class="badge-ok" id="systemHealthBadge">100% OK</span>
+      </div>
+    </div>
   </div>
 
   <div class="main-container">
     <!-- Viewport / Canvas -->
     <div class="viewport-box">
-      <canvas id="gameCanvas" width="800" height="430"></canvas>
+      <canvas id="gameCanvas" width="800" height="440"></canvas>
       
       <!-- Live Quest / Shell Terminal Box -->
       <div class="rpg-terminal-box" id="rpgTerminal">
         <div><span class="rpg-term-prefix">[QUEST-LOG]</span> Initialisiere OpenClaw Live-HQ...</div>
       </div>
 
+      <!-- Live Quest Dispatcher Bar -->
+      <div class="dispatcher-bar">
+        <input type="text" id="questInput" class="dispatcher-input" placeholder="✨ Neuer Prompt / Task für das Team... (z.B. 'Fix CSS Bug in Navigation')" onkeydown="if(event.key==='Enter') dispatchQuest();">
+        <button class="dispatcher-btn" onclick="dispatchQuest()">DISPATCH QUEST</button>
+      </div>
+
       <div class="status-bar">
-        <span>🖱️ Klicke auf Agenten für Detailinspektion</span>
-        <span id="canvasStats">Active: 0 | Idle: 4</span>
+        <span>🖱️ Klicke auf Agenten, Whiteboard, Kaffeemaschine oder Server-Racks!</span>
+        <span id="canvasStats">Aktiv: 0 | Idle: 4</span>
       </div>
     </div>
 
@@ -439,15 +636,15 @@
 
       <!-- Quick Control / Simulation Sandbox -->
       <div class="panel">
-        <div class="panel-title">LIVE SYNC & STEUERUNG</div>
+        <div class="panel-title">LIVE SYNC & SIMULATION</div>
         <div class="controls-grid">
           <button onclick="resumeLiveSync()" style="grid-column: span 2; background:#065f46; border-color:#34d399; color:#fff;">🔴 LIVE-SYNC REAKTIVIEREN</button>
-          <button onclick="triggerDelegationAnimation()" style="grid-column: span 2; background:#831843; border-color:#db2777; color:#fff;">💾 Teamplay: Lead übergibt Diskette</button>
-          <button onclick="triggerApprovalParty()" style="background:#065f46; border-color:#34d399; color:#fff;">🎉 PR Approved Party</button>
-          <button onclick="simulateEvent('lead', 'DISCORD', 'Beantwortet Discord-Frage von @Christoph')" style="background:#3730a3; border-color:#818cf8; color:#fff;">💬 Discord DM</button>
-          <button onclick="simulateEvent('coder1', 'WORKING', 'Refactoring knowledge-graph auth')">💻 Coder Coden</button>
+          <button onclick="triggerDelegationAnimation()" style="background:#831843; border-color:#db2777; color:#fff;">💾 Lead übergibt Diskette</button>
+          <button onclick="triggerApprovalParty()" style="background:#065f46; border-color:#34d399; color:#fff;">🎉 PR Merge Party (+50 XP)</button>
+          <button onclick="simulateParallelCoders(3)" style="background:#1e3a8a; border-color:#3b82f6; color:#fff;">👥 3x Parallele Coder</button>
+          <button onclick="triggerCiIncident()" style="background:#7f1d1d; border-color:#ef4444; color:#fff;">🚨 CI Incident Alarm</button>
           <button onclick="simulateEvent('reviewer', 'WORKING', 'Auditing Security PR #305')">🔍 QA Review</button>
-          <button onclick="simulateAllIdle()" style="grid-column: span 2;">☕ Alle in Lounge schicken</button>
+          <button onclick="simulateAllIdle()">☕ Kaffeepause</button>
         </div>
       </div>
 
@@ -455,12 +652,23 @@
       <div class="panel">
         <div class="panel-title">LIVE EVENT TICKER</div>
         <div class="log-box" id="eventLog">
-          <div class="log-entry"><span class="log-time">[HQ]</span> Pixel Agent Grid geladen.</div>
+          <div class="log-entry"><span class="log-time">[HQ]</span> Pixel Agent RPG Engine v2.0 bereit.</div>
         </div>
       </div>
     </div>
   </div>
 
+  <!-- Interactive Retro Modal -->
+  <div class="modal-overlay" id="interactiveModal" onclick="closeModal(event)">
+    <div class="modal-card" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <div class="modal-title" id="modalTitle">📋 WHITEBOARD KANBAN</div>
+        <button class="modal-close" onclick="closeModal()">✕ SCHLIESSEN</button>
+      </div>
+      <div class="modal-content" id="modalContent"></div>
+    </div>
+  </div>
+
   <script>
     // Audio Synthesizer (8-Bit Chiptune WebAudio)
     let audioEnabled = true;
@@ -472,7 +680,7 @@
       }
     }
 
-    function play8BitTone(freq, type, duration) {
+    function play8BitTone(freq, type, duration, vol = 0.05) {
       if (!audioEnabled) return;
       try {
         initAudio();
@@ -480,8 +688,8 @@
         const gain = audioCtx.createGain();
         osc.type = type || 'square';
         osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
-        gain.gain.setValueAtTime(0.05, audioCtx.currentTime);
-        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
+        gain.gain.setValueAtTime(vol, audioCtx.currentTime);
+        gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + duration);
         osc.connect(gain);
         gain.connect(audioCtx.destination);
         osc.start();
@@ -494,11 +702,30 @@
       setTimeout(() => play8BitTone(1318.51, 'square', 0.18), 80);
     }
     function soundAlert() {
-      play8BitTone(440, 'sawtooth', 0.1);
-      setTimeout(() => play8BitTone(330, 'sawtooth', 0.15), 100);
+      play8BitTone(600, 'sawtooth', 0.15, 0.08);
+      setTimeout(() => play8BitTone(450, 'sawtooth', 0.2, 0.08), 120);
+      setTimeout(() => play8BitTone(600, 'sawtooth', 0.15, 0.08), 300);
+      setTimeout(() => play8BitTone(450, 'sawtooth', 0.2, 0.08), 420);
     }
     function soundKey() {
-      play8BitTone(300 + Math.random()*200, 'triangle', 0.03);
+      if (Math.random() < 0.3) {
+        play8BitTone(250 + Math.random()*200, 'triangle', 0.02, 0.02);
+      }
+    }
+    function soundCoffee() {
+      play8BitTone(180, 'sawtooth', 0.1, 0.03);
+      setTimeout(() => play8BitTone(220, 'triangle', 0.15, 0.03), 100);
+      setTimeout(() => play8BitTone(160, 'sine', 0.25, 0.04), 220);
+    }
+    function soundArcade() {
+      [523, 659, 784, 1046].forEach((f, i) => {
+        setTimeout(() => play8BitTone(f, 'square', 0.08, 0.06), i * 70);
+      });
+    }
+    function soundLevelUp() {
+      [440, 554, 659, 880, 1108].forEach((f, i) => {
+        setTimeout(() => play8BitTone(f, 'triangle', 0.12, 0.07), i * 80);
+      });
     }
 
     function toggleAudio() {
@@ -506,16 +733,20 @@
       document.getElementById('soundToggle').innerText = audioEnabled ? '🔊 8-Bit Audio: ON' : '🔇 8-Bit Audio: OFF';
     }
 
-    // Canvas Context
+    // Canvas Context & Time
     const canvas = document.getElementById('gameCanvas');
     const ctx = canvas.getContext('2d');
 
     let currentProject = 'camper-knowledge-graph';
+    let ambientMode = 'auto';
     let isLiveSync = true;
     let selectedAgentKey = 'coder1';
+    let isIncidentActive = false;
 
-    // Particle / Confetti System for PR Merges / Celebrations
+    // Confetti & Steam Particle System
     let particles = [];
+    let steamParticles = [];
+
     function spawnConfetti(x, y) {
       for (let i = 0; i < 35; i++) {
         particles.push({
@@ -531,20 +762,36 @@
       soundCoin();
     }
 
-    // Dynamic Rooms & Windows (Day / Night lighting)
+    function spawnSteam(x, y) {
+      for (let i = 0; i < 12; i++) {
+        steamParticles.push({
+          x: x + (Math.random() - 0.5) * 10,
+          y: y,
+          vx: (Math.random() - 0.5) * 0.8,
+          vy: - (Math.random() * 1.5 + 0.8),
+          size: Math.random() * 3 + 2,
+          life: 1.0,
+          color: 'rgba(255,255,255,'
+        });
+      }
+      soundCoffee();
+    }
+
+    // Dynamic Rooms
     const ROOMS = [
       { id: 'dev_lab', x: 20, y: 30, w: 360, h: 240, name: "💻 DEV LAB", floorColor1: "#242d42", floorColor2: "#1e2638", wallColor: "#3b4461", wallTop: "#566288" },
       { id: 'lead_room', x: 400, y: 30, w: 380, h: 240, name: "🏛️ WAR ROOM & KANBAN", floorColor1: "#282a36", floorColor2: "#21232e", wallColor: "#3e4257", wallTop: "#5c627f" },
-      { id: 'break_room', x: 20, y: 290, w: 760, h: 125, name: "☕ AGENT LOUNGE & CAFE", floorColor1: "#382923", floorColor2: "#2d201a", wallColor: "#4f3b33", wallTop: "#6e5449" }
+      { id: 'break_room', x: 20, y: 290, w: 760, h: 135, name: "☕ AGENT LOUNGE & CAFE", floorColor1: "#382923", floorColor2: "#2d201a", wallColor: "#4f3b33", wallTop: "#6e5449" }
     ];
 
     // Furniture Definitions
     const FURNITURE = [
       // Dev Lab
-      { type: 'DESK_DUAL', x: 60, y: 70, id: 'desk_coder1', label: 'Workstation Alpha' },
-      { type: 'DESK_DUAL', x: 220, y: 70, id: 'desk_coder2', label: 'Workstation Beta' },
+      { type: 'DESK_DUAL', x: 50, y: 70, id: 'desk_coder1', label: 'Workstation Alpha' },
+      { type: 'DESK_DUAL', x: 190, y: 70, id: 'desk_coder2', label: 'Workstation Beta' },
+      { type: 'DESK_DUAL', x: 120, y: 155, id: 'desk_coder3', label: 'Pair Desk Gamma' },
       { type: 'WHITEBOARD', x: 130, y: 35, label: 'Gitea Kanban' },
-      { type: 'PLANT', x: 30, y: 210 },
+      { type: 'PLANT', x: 30, y: 220 },
 
       // War Room
       { type: 'LEAD_DESK', x: 420, y: 70, id: 'desk_lead', label: 'Lead Console' },
@@ -570,11 +817,51 @@
       { id: 'couch', name: '🛋️ Powernap', x: 300, y: 345, bubble: '😴 zZz', anim: 'couch' }
     ];
 
-    // Agents
+    // RPG Progression Ranks
+    const RPG_RANKS = [
+      { minXp: 0, title: 'Junior Byte Crusher' },
+      { minXp: 100, title: 'Async Artisan' },
+      { minXp: 250, title: 'Senior Code Wizard' },
+      { minXp: 500, title: 'Principal Architect' },
+      { minXp: 1000, title: '10x Mythic Lead' }
+    ];
+
+    function getAgentXp(id) {
+      try {
+        const val = localStorage.getItem(`rpg_xp_${id}`);
+        return val ? parseInt(val, 10) : 120;
+      } catch(e) { return 120; }
+    }
+
+    function addAgentXp(id, amount) {
+      const current = getAgentXp(id);
+      const next = current + amount;
+      try { localStorage.setItem(`rpg_xp_${id}`, next); } catch(e) {}
+      
+      const oldRank = getRankForXp(current);
+      const newRank = getRankForXp(next);
+      if (newRank.title !== oldRank.title) {
+        soundLevelUp();
+        addLog(`🌟 <b>LEVEL UP!</b> ${agents[id]?.name || id} ist jetzt <b>${newRank.title}</b>!`);
+        appendTerminalLog('LEVEL-UP', `Glückwunsch! ${agents[id]?.name} stieg auf zu: ${newRank.title}`);
+        spawnConfetti(agents[id]?.x || 200, agents[id]?.y || 100);
+      }
+      updateInspector();
+    }
+
+    function getRankForXp(xp) {
+      let r = RPG_RANKS[0];
+      for (let item of RPG_RANKS) {
+        if (xp >= item.minXp) r = item;
+      }
+      return r;
+    }
+
+    // Agents Registry
     const agents = {
       coder1: {
         id: 'coder1',
-        name: 'CKG Coder',
+        name: 'CKG Coder (Alpha)',
         role: 'Fullstack Dev',
         hairColor: '#eab308',
         shirtColor: '#0284c7',
@@ -587,11 +874,13 @@
         targetDesk: 'desk_coder1',
         idleActivityIndex: 0,
         lastActivitySwitch: 0,
-        liveLog: ["Wartet auf BullMQ-Jobs..."]
+        liveLog: ["Wartet auf BullMQ-Jobs..."],
+        speechBubble: null,
+        speechBubbleTime: 0
       },
       coder2: {
         id: 'coder2',
-        name: 'CKG Tester',
+        name: 'CKG Tester (Beta)',
         role: 'E2E & Staging',
         hairColor: '#ef4444',
         shirtColor: '#7c3aed',
@@ -604,7 +893,28 @@
         targetDesk: 'desk_coder2',
         idleActivityIndex: 4,
         lastActivitySwitch: 0,
-        liveLog: ["Staging Check: 200 OK"]
+        liveLog: ["Staging Check: 200 OK"],
+        speechBubble: null,
+        speechBubbleTime: 0
+      },
+      coder3: {
+        id: 'coder3',
+        name: 'CKG Pair Coder (Gamma)',
+        role: 'Subagent Coder',
+        hairColor: '#10b981',
+        shirtColor: '#d97706',
+        pantsColor: '#1e293b',
+        skinColor: '#ffedd5',
+        state: 'IDLE',
+        currentTask: 'Standby für Parallele Turns',
+        lastAction: 'Standby',
+        x: 120, y: 360,
+        targetDesk: 'desk_coder3',
+        idleActivityIndex: 1,
+        lastActivitySwitch: 0,
+        liveLog: ["Subagent Pool bereit"],
+        speechBubble: null,
+        speechBubbleTime: 0
       },
       lead: {
         id: 'lead',
@@ -621,13 +931,15 @@
         targetDesk: 'desk_lead',
         idleActivityIndex: 3,
         lastActivitySwitch: 0,
-        liveLog: ["Heartbeat Standby"]
+        liveLog: ["Heartbeat Standby"],
+        speechBubble: null,
+        speechBubbleTime: 0
       },
       reviewer: {
         id: 'reviewer',
         name: 'CKG Reviewer',
         role: 'Security & QA',
-        hairColor: '#10b981',
+        hairColor: '#a855f7',
         shirtColor: '#dc2626',
         pantsColor: '#1e293b',
         skinColor: '#ffedd5',
@@ -638,12 +950,15 @@
         targetDesk: 'desk_reviewer',
         idleActivityIndex: 0,
         lastActivitySwitch: 0,
-        liveLog: ["Watcher aktiv"]
+        liveLog: ["Watcher aktiv"],
+        speechBubble: null,
+        speechBubbleTime: 0
       }
     };
 
-    // Live Kanban Counts & CI State
+    // Live Kanban & Data cache
     let kanbanState = { planned: 3, ready: 1, in_progress: 0, review: 2, done: 12 };
+    let kanbanItemsCache = { planned: [], ready: [], in_progress: [], review: [], done: [] };
     let giteaCiState = { active_jobs: 0, status: 'PASSING' };
 
     function addLog(text) {
@@ -670,6 +985,11 @@
       fetchLiveStatus();
     }
 
+    function onAmbientChange(val) {
+      ambientMode = val;
+      addLog(`💡 Beleuchtung umgestellt auf: <b>${val.toUpperCase()}</b>`);
+    }
+
     // Live Server Sync
     async function fetchLiveStatus() {
       if (!isLiveSync) return;
@@ -699,21 +1019,38 @@
         const gStatus = document.getElementById('giteaStatus');
         gStatus.innerText = data.gitea.connected ? 'CONNECTED' : 'DISCONNECTED';
         gStatus.className = data.gitea.connected ? 'badge-ok' : 'badge-busy';
+        
         if (data.gitea.kanban_columns) {
           kanbanState = data.gitea.kanban_columns;
-          const revElem = document.getElementById('giteaReview');
-          if (revElem) revElem.innerText = kanbanState.review || 0;
           const wipElem = document.getElementById('giteaWip');
           if (wipElem) wipElem.innerText = kanbanState.in_progress || 0;
         }
+        if (data.gitea.kanban_items) {
+          kanbanItemsCache = data.gitea.kanban_items;
+        }
+
+        // 4. Update CI Status & Red Alert Mode
         if (data.gitea.ci_status !== undefined) {
           giteaCiState = {
             active_jobs: data.gitea.active_ci_jobs || 0,
             status: data.gitea.ci_status || 'PASSING'
           };
+          if (data.gitea.ci_status === 'FAILURE' && !isIncidentActive) {
+            triggerCiIncident();
+          } else if (data.gitea.ci_status !== 'FAILURE' && isIncidentActive) {
+            resolveCiIncident();
+          }
         }
 
-        // 4. Update Agents
+        // 5. Update Metrics (Speedometer)
+        if (data.metrics) {
+          document.getElementById('tokenSpeed').innerText = data.metrics.token_velocity || 0;
+          const hBadge = document.getElementById('systemHealthBadge');
+          hBadge.innerText = `${data.metrics.system_health}% OK`;
+          hBadge.className = (data.metrics.system_health < 100) ? 'badge-err' : 'badge-ok';
+        }
+
+        // 6. Update Agents
         if (data.agents) {
           for (const [key, agentData] of Object.entries(data.agents)) {
             if (agents[key]) {
@@ -725,14 +1062,35 @@
               agents[key].parallelCount = agentData.parallelCount || 0;
               if (agentData.liveLog && agentData.liveLog.length > 0) {
                 agents[key].liveLog = agentData.liveLog;
+                // Periodic speech bubbles from logs
+                const cleanLog = agentData.liveLog[0].replace(/^[🤖⚙️]\s*/, '');
+                agents[key].speechBubble = cleanLog.substring(0, 35) + '...';
               }
 
               if (oldState !== agentData.state) {
                 addLog(`⚡ Live-Update: <b>${agents[key].name}</b> -> <span class="status-pill status-${agentData.state}">${agentData.state}</span>`);
-                if (agentData.state === 'WORKING') play8BitTone(600, 'square', 0.1);
+                if (agentData.state === 'WORKING') {
+                  play8BitTone(600, 'square', 0.1);
+                  addAgentXp(key, 10);
+                }
               }
             }
           }
+
+          // Handle multi-coder dynamic instances
+          const parallelCount = data.agents.coder1?.parallelCount || 0;
+          if (parallelCount >= 2) {
+            agents.coder2.state = 'WORKING';
+            agents.coder2.currentTask = 'Parallele Code-Session (Instance #2)';
+            agents.coder2.lastAction = 'Active Subagent Parallel Turn';
+          }
+          if (parallelCount >= 3) {
+            agents.coder3.state = 'WORKING';
+            agents.coder3.currentTask = 'Parallele Code-Session (Instance #3)';
+            agents.coder3.lastAction = 'Active Subagent Parallel Turn';
+          } else if (parallelCount < 3 && agents.coder3.state === 'WORKING' && !activeTeamSequence) {
+            agents.coder3.state = 'IDLE';
+          }
         }
         updateInspector();
       } catch (err) {
@@ -743,18 +1101,48 @@
     setInterval(fetchLiveStatus, 3000);
     fetchLiveStatus();
 
+    // Dispatch Quest / Create Issue via API
+    async function dispatchQuest() {
+      const input = document.getElementById('questInput');
+      const text = input.value.trim();
+      if (!text) return;
+
+      appendTerminalLog('DISPATCH', `Sende Quest an ${currentProject}: "${text}"...`);
+      addLog(`🚀 <b>Quest dispatch:</b> "${text}"`);
+      play8BitTone(523, 'triangle', 0.1);
+
+      try {
+        const res = await fetch('/api/issue', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ project: currentProject, title: text, body: 'Erstellt via Agent RPG Dashboard Terminal.' })
+        });
+        if (res.ok) {
+          const respData = await res.json();
+          appendTerminalLog('GITEA', `✅ Issue #${respData.issue?.number || 'Neu'} erfolgreich erstellt! Lead übernimmt.`);
+          addLog(`✅ Issue angelegt: #${respData.issue?.number || ''} ${text}`);
+          input.value = '';
+          triggerDelegationAnimation();
+          addAgentXp('lead', 25);
+        } else {
+          appendTerminalLog('GITEA-ERR', 'Fehler beim Erstellen des Issues.');
+        }
+      } catch(e) {
+        appendTerminalLog('ERR', `Verbindungsfehler: ${e.message}`);
+      }
+    }
+
     // Interactive Teamplay Sequences
     let activeTeamSequence = null;
 
     function triggerDelegationAnimation() {
       isLiveSync = false;
-      addLog(`💾 <b>Teamplay:</b> Lead übergibt Diskette mit neuem Task an Coder 1...`);
-      appendTerminalLog('LEAD', 'Issue #306 bereit: Delegiere Implementierung an Coder Alpha');
+      addLog(`💾 <b>Teamplay:</b> Lead übergibt Diskette mit neuem Task an Coder Alpha...`);
+      appendTerminalLog('LEAD', 'Issue bereit: Delegiere Implementierung an Coder Alpha');
 
       agents.lead.state = 'DELEGATING';
-      agents.lead.currentTask = 'Läuft zu Coder 1 und übergibt Task-Diskette';
+      agents.lead.currentTask = 'Läuft zu Coder Alpha und übergibt Task-Diskette';
 
-      // Move Lead to Coder 1 Desk
       activeTeamSequence = {
         type: 'DELEGATE',
         startTime: Date.now(),
@@ -766,12 +1154,56 @@
 
     function triggerApprovalParty() {
       isLiveSync = false;
-      addLog(`🎉 <b>Reviewer:</b> PR #305 Approved! Party im Büro!`);
-      appendTerminalLog('QA', 'Alle CI & Security Checks bestanden! PR #305 gemergt.');
+      addLog(`🎉 <b>Reviewer:</b> PR Approved! Party im Büro! (+50 XP)`);
+      appendTerminalLog('QA', 'Alle CI & Security Checks bestanden! PR gemergt.');
       agents.reviewer.state = 'WORKING';
       agents.reviewer.currentTask = 'Feiert erfolgreichen PR Merge!';
+      
+      // Award XP to all active agents
+      Object.keys(agents).forEach(k => addAgentXp(k, 50));
+
       spawnConfetti(620, 100);
       spawnConfetti(260, 100);
+      spawnConfetti(150, 180);
+      updateInspector();
+    }
+
+    function triggerCiIncident() {
+      isIncidentActive = true;
+      document.getElementById('redAlertBanner').style.display = 'block';
+      soundAlert();
+      addLog(`🚨 <b>RED ALERT:</b> CI Pipeline Failure in ${currentProject}!`);
+      appendTerminalLog('CI-ALARM', 'Workflow Run Failed! Coder & Reviewer schlagen Alarm!');
+      agents.coder1.state = 'ERROR';
+      agents.coder1.currentTask = 'CI Failed! Prüfe Logs und Stacktraces...';
+      updateInspector();
+    }
+
+    function resolveCiIncident() {
+      isIncidentActive = false;
+      document.getElementById('redAlertBanner').style.display = 'none';
+      addLog(`✅ <b>Incident behoben:</b> CI Pipeline läuft wieder grün.`);
+      appendTerminalLog('CI-OK', 'Alle Builds wieder grün.');
+      agents.coder1.state = 'WORKING';
+      updateInspector();
+    }
+
+    function simulateParallelCoders(count) {
+      isLiveSync = false;
+      addLog(`👥 [SIMULATION] ${count}x Parallele Coder-Instanzen gestartet!`);
+      appendTerminalLog('ORCHESTRATOR', `Spawne ${count} parallele Subagent-Coder an Workstations...`);
+      
+      agents.coder1.state = 'WORKING';
+      agents.coder1.currentTask = 'Subagent #1: Implementiere Frontend & Canvas';
+      
+      if (count >= 2) {
+        agents.coder2.state = 'WORKING';
+        agents.coder2.currentTask = 'Subagent #2: Refactoring Backend API & SQLite';
+      }
+      if (count >= 3) {
+        agents.coder3.state = 'WORKING';
+        agents.coder3.currentTask = 'Subagent #3: Running Playwright E2E Tests';
+      }
       updateInspector();
     }
 
@@ -781,7 +1213,7 @@
       if (!agent) return;
       agent.state = state;
       if (task) agent.currentTask = task;
-      if (state === 'WORKING') agent.lastAction = 'Active subprocess tool execution';
+      if (state === 'WORKING') { agent.lastAction = 'Active subprocess tool execution'; addAgentXp(agentKey, 15); }
       else if (state === 'ERROR') { agent.lastAction = 'Exception caught'; soundAlert(); }
       addLog(`[MANUELL] <b>${agent.name}</b>: <span class="status-pill status-${state}">${state}</span> ${task || ''}`);
       appendTerminalLog(agent.name.toUpperCase(), task || state);
@@ -791,6 +1223,7 @@
     function resumeLiveSync() {
       isLiveSync = true;
       activeTeamSequence = null;
+      if (isIncidentActive) resolveCiIncident();
       addLog('🔄 <b>Live-Synchronisation reaktiviert!</b>');
       appendTerminalLog('HQ', 'Echtzeit-Synchronisation aktiv.');
       fetchLiveStatus();
@@ -812,6 +1245,11 @@
       const agent = agents[selectedAgentKey];
       if (!agent) return;
 
+      const xp = getAgentXp(agent.id);
+      const rank = getRankForXp(xp);
+      const nextXpTarget = (rank.minXp === 1000) ? 1500 : (RPG_RANKS.find(r => r.minXp > xp)?.minXp || 1000);
+      const xpPercent = Math.min(100, Math.round((xp / nextXpTarget) * 100));
+
       document.getElementById('inspAgentId').innerText = `#${agent.id.toUpperCase()}`;
       const container = document.getElementById('agentInspector');
       container.innerHTML = `
@@ -822,12 +1260,22 @@
               <div style="position:absolute; top:-12px; left:1px; width:18px; height:6px; background:${agent.hairColor};"></div>
             </div>
           </div>
-          <div>
-            <div style="font-family:'Press Start 2P'; font-size:11px; color:${agent.hairColor}">${agent.name}</div>
-            <div style="font-size:16px; color:#94a3b8">${agent.role}</div>
+          <div style="flex:1">
+            <div style="font-family:'Press Start 2P'; font-size:10px; color:${agent.hairColor}">${agent.name}</div>
+            <div style="font-size:15px; color:#94a3b8">${agent.role}</div>
+            <div class="rpg-rank-badge">⭐ ${rank.title}</div>
           </div>
         </div>
-        <div>Status: <span class="status-pill status-${agent.state}">${agent.state}</span></div>
+
+        <div style="margin-top:6px; font-size:15px; display:flex; justify-content:space-between; color:#94a3b8;">
+          <span>XP: <b style="color:#facc15">${xp}</b> / ${nextXpTarget}</span>
+          <span>${xpPercent}%</span>
+        </div>
+        <div class="xp-bar-container">
+          <div class="xp-bar-fill" style="width:${xpPercent}%"></div>
+        </div>
+
+        <div style="margin-top:6px;">Status: <span class="status-pill status-${agent.state}">${agent.state}</span></div>
         <div class="stat-row"><span>Letzte Aktion:</span><br>${agent.lastAction}</div>
         <div class="stat-row"><span>Aktuelle Aufgabe:</span></div>
         <div class="task-desc">${agent.currentTask}</div>
@@ -838,9 +1286,72 @@
       document.getElementById('canvasStats').innerText = `Aktiv: ${activeCount} | Idle: ${idleCount}`;
     }
 
+    // Modal Manager
+    function openModal(title, htmlContent) {
+      document.getElementById('modalTitle').innerText = title;
+      document.getElementById('modalContent').innerHTML = htmlContent;
+      document.getElementById('interactiveModal').style.display = 'flex';
+      play8BitTone(700, 'triangle', 0.1);
+    }
+    function closeModal(e) {
+      document.getElementById('interactiveModal').style.display = 'none';
+    }
+
+    function showKanbanModal() {
+      let html = `<div class="kanban-grid">`;
+      const cols = [
+        { id: 'planned', name: '📋 PLANNED', color: '#94a3b8' },
+        { id: 'ready', name: '⚡ READY', color: '#facc15' },
+        { id: 'in_progress', name: '💻 IN PROGRESS', color: '#38bdf8' },
+        { id: 'review', name: '🔍 REVIEW / PR', color: '#ec4899' },
+        { id: 'done', name: '✅ DONE', color: '#22c55e' }
+      ];
+
+      cols.forEach(c => {
+        const items = kanbanItemsCache[c.id] || [];
+        html += `
+          <div class="kanban-col">
+            <div class="kanban-col-title" style="color:${c.color}">${c.name} (${items.length})</div>
+            ${items.length === 0 ? '<div style="color:#475569; font-size:14px;">Keine Items</div>' : ''}
+            ${items.map(i => `
+              <div class="kanban-card">
+                <b style="color:#38bdf8;">#${i.number}</b> ${i.title}
+                ${i.is_pr ? '<span style="color:#ec4899; font-size:12px;"> [PR]</span>' : ''}
+              </div>
+            `).join('')}
+          </div>
+        `;
+      });
+      html += `</div>`;
+      openModal(`📋 GITEA KANBAN BOARD (${currentProject})`, html);
+    }
+
+    function showRackModal(type) {
+      let html = `
+        <div style="display:flex; flex-direction:column; gap:10px;">
+          <div style="background:#141724; padding:10px; border-radius:4px; border:1px solid #38bdf8;">
+            <b style="color:#38bdf8;">Station:</b> ${type === 'BULLMQ' ? '⚡ BullMQ Redis/Valkey Message Broker' : '🐙 Gitea Git & Actions CI/CD'}
+          </div>
+          <div><b>Projekt-Scope:</b> ${currentProject}</div>
+          <div><b>Status:</b> ${giteaCiState.status === 'FAILURE' ? '🚨 INCIDENT DETECTED' : '🟢 ALL SYSTEMS OPERATIONAL'}</div>
+          <div><b>Aktive CI Jobs:</b> ${giteaCiState.active_jobs}</div>
+          <div><b>Offene Pull Requests:</b> ${kanbanState.review || 0}</div>
+        </div>
+      `;
+      openModal(type === 'BULLMQ' ? '⚡ BULLMQ BROKER STATUS' : '🐙 GITEA REPOSITORY & CI/CD', html);
+    }
+
     // ================= RENDERING ENGINE ================= //
 
-    function drawRoom(r) {
+    function getAmbientSetting() {
+      if (ambientMode !== 'auto') return ambientMode;
+      const hour = new Date().getHours();
+      if (hour >= 7 && hour < 18) return 'day';
+      if (hour >= 18 && hour < 21) return 'sunset';
+      return 'night';
+    }
+
+    function drawRoom(r, time) {
       // Room Wall Shadow
       ctx.fillStyle = "rgba(0,0,0,0.5)";
       ctx.fillRect(r.x + 4, r.y + 4, r.w, r.h);
@@ -864,6 +1375,13 @@
       ctx.fillStyle = r.wallTop;
       ctx.fillRect(r.x, r.y, r.w, 4);
 
+      // Render Windows on Walls with Day/Sunset/Night View
+      if (r.id === 'dev_lab') {
+        drawWindow(r.x + 280, r.y + 2, 45, 12, time);
+      } else if (r.id === 'lead_room') {
+        drawWindow(r.x + 240, r.y + 2, 45, 12, time);
+      }
+
       ctx.strokeStyle = "#1b2030";
       ctx.lineWidth = 3;
       ctx.strokeRect(r.x, r.y, r.w, r.h);
@@ -881,6 +1399,33 @@
       ctx.fillText(r.name, r.x + 22, r.y + 3);
     }
 
+    function drawWindow(x, y, w, h, time) {
+      const amb = getAmbientSetting();
+      ctx.save();
+      ctx.fillStyle = (amb === 'day') ? '#38bdf8' : (amb === 'sunset' ? '#f97316' : '#0f172a');
+      ctx.fillRect(x, y, w, h);
+      ctx.strokeStyle = '#64748b';
+      ctx.lineWidth = 1;
+      ctx.strokeRect(x, y, w, h);
+
+      if (amb === 'night') {
+        // Pixel stars in window
+        ctx.fillStyle = '#ffffff';
+        if (Math.sin(time * 0.005) > 0) ctx.fillRect(x + 10, y + 3, 2, 2);
+        if (Math.sin(time * 0.007 + 1) > 0) ctx.fillRect(x + 26, y + 6, 2, 2);
+        if (Math.sin(time * 0.004 + 2) > 0) ctx.fillRect(x + 36, y + 4, 1, 1);
+      } else if (amb === 'sunset') {
+        ctx.fillStyle = '#fde047';
+        ctx.fillRect(x + w/2 - 4, y + 4, 8, 8);
+      } else {
+        // Cloud
+        ctx.fillStyle = '#ffffff';
+        const cloudX = x + ((time * 0.01) % w);
+        ctx.fillRect(cloudX, y + 4, 8, 4);
+      }
+      ctx.restore();
+    }
+
     function drawFurniture(f, time) {
       ctx.save();
 
@@ -909,14 +1454,14 @@
         ctx.lineWidth = 1.5;
         ctx.strokeRect(f.x + 1, f.y + 1, w - 2, h - 2);
 
-        // Desk Mat on bottom half
+        // Desk Mat
         ctx.fillStyle = "#111827";
         ctx.fillRect(f.x + 10, f.y + 26, w - 20, 36);
         ctx.strokeStyle = (f.type === 'QA_DESK') ? "#ef4444" : ((f.type === 'LEAD_DESK') ? "#eab308" : "#3b82f6");
         ctx.lineWidth = 1;
         ctx.strokeRect(f.x + 10, f.y + 26, w - 20, 36);
 
-        // TOP SECTION: MONITORS
+        // MONITORS
         ctx.fillStyle = "#64748b";
         ctx.fillRect(f.x + w/2 - 4, f.y + 4, 8, 8);
 
@@ -975,7 +1520,7 @@
         ctx.fillStyle = pcRgb;
         ctx.fillRect(f.x + w - 14, f.y + 10, 8, 8);
 
-        // Keyboard & Mouse on bottom
+        // Keyboard & Mouse
         ctx.fillStyle = "#1e2433";
         ctx.fillRect(f.x + w/2 - 20, f.y + 36, 40, 12);
         for (let k = 0; k < 6; k++) {
@@ -991,7 +1536,7 @@
         ctx.fillStyle = "#78350f";
         ctx.fillRect(f.x + 15, f.y + 37, 7, 3);
 
-        // Chair cushion in front
+        // Chair cushion
         ctx.fillStyle = "#1e293b";
         ctx.fillRect(f.x + w/2 - 18, f.y + h - 6, 36, 14);
 
@@ -1000,22 +1545,20 @@
         ctx.fillText(f.label, f.x + 12, f.y + h + 24);
 
       } else if (f.type === 'WHITEBOARD') {
-        // Realtime Gitea Kanban Board on the Wall!
+        // Realtime Gitea Kanban Board
         const w = 120, h = 54;
         ctx.fillStyle = "#ffffff";
         ctx.fillRect(f.x, f.y, w, h);
-        ctx.strokeStyle = "#64748b";
+        ctx.strokeStyle = "#38bdf8";
         ctx.lineWidth = 2;
         ctx.strokeRect(f.x, f.y, w, h);
 
-        // Header Bar
         ctx.fillStyle = "#1e293b";
         ctx.fillRect(f.x, f.y, w, 12);
         ctx.font = "8px 'Press Start 2P'";
         ctx.fillStyle = "#facc15";
-        ctx.fillText("KANBAN BOARD", f.x + 8, f.y + 9);
+        ctx.fillText("KANBAN (KLICK)", f.x + 4, f.y + 9);
 
-        // 4 Columns: Plan | WIP | Review | Done
         const colW = w / 4;
         const colColors = ["#94a3b8", "#38bdf8", "#ec4899", "#22c55e"];
         const colHeaders = ["PLN", "WIP", "REV", "OK"];
@@ -1036,12 +1579,10 @@
             ctx.stroke();
           }
 
-          // Column Header Label
           ctx.font = "7px 'Press Start 2P'";
           ctx.fillStyle = "#475569";
           ctx.fillText(colHeaders[c], cx + 4, f.y + 21);
 
-          // Draw Mini Sticky Notes
           const count = colCounts[c];
           const stickiesToShow = Math.min(count, 3);
           for (let s = 0; s < stickiesToShow; s++) {
@@ -1051,7 +1592,6 @@
             ctx.strokeRect(cx + 4, f.y + 24 + s * 9, colW - 8, 7);
           }
 
-          // Counter Badge if count > 0
           if (count > 0) {
             ctx.font = "10px 'VT323'";
             ctx.fillStyle = "#0f172a";
@@ -1088,7 +1628,7 @@
         const w = 75, h = 80;
         ctx.fillStyle = "#09121a";
         ctx.fillRect(f.x, f.y, w, h);
-        ctx.strokeStyle = "#38bdf8";
+        ctx.strokeStyle = isIncidentActive ? "#ef4444" : "#38bdf8";
         ctx.lineWidth = 2;
         ctx.strokeRect(f.x, f.y, w, h);
 
@@ -1104,17 +1644,9 @@
         ctx.beginPath(); ctx.arc(f.x + 15, f.y + 40, 4, 0, Math.PI*2); ctx.fill();
         ctx.beginPath(); ctx.arc(f.x + 35, f.y + 46, 4, 0, Math.PI*2); ctx.fill();
         
-        // Gitea CI Indicator
+        // CI Indicator
         const isCiActive = (giteaCiState.active_jobs > 0 || giteaCiState.status === 'BUILDING');
-        let ciColor = "#22c55e"; // Solid Green when idle/passing
-
-        if (isCiActive) {
-          // Blink/pulsate only while a workflow is actively running
-          const ciBlink = Math.sin(time * 0.015) > 0;
-          ciColor = ciBlink ? "#fbbf24" : "#d97706";
-        } else if (giteaCiState.status === 'FAILURE') {
-          ciColor = "#ef4444";
-        }
+        let ciColor = isIncidentActive ? "#ef4444" : ((isCiActive && Math.sin(time*0.015)>0) ? "#fbbf24" : "#22c55e");
 
         ctx.fillStyle = ciColor;
         ctx.fillRect(f.x + 48, f.y + 18, 20, 11);
@@ -1123,18 +1655,11 @@
         ctx.strokeRect(f.x + 48, f.y + 18, 20, 11);
 
         ctx.font = "8px 'Press Start 2P'";
-        ctx.fillStyle = isCiActive ? "#0f172a" : "#ffffff";
+        ctx.fillStyle = "#ffffff";
         ctx.fillText("CI", f.x + 52, f.y + 27);
 
-        // Optional mini job counter indicator if building
-        if (isCiActive && giteaCiState.active_jobs > 0) {
-          ctx.font = "9px 'VT323'";
-          ctx.fillStyle = "#fbbf24";
-          ctx.fillText(`⚡${giteaCiState.active_jobs}`, f.x + 48, f.y + 40);
-        }
-
         ctx.font = "11px 'Press Start 2P'";
-        ctx.fillStyle = "#38bdf8";
+        ctx.fillStyle = isIncidentActive ? "#ef4444" : "#38bdf8";
         ctx.fillText("🐙GITEA", f.x + 4, f.y + h + 14);
 
       } else if (f.type === 'COFFEE_MACHINE') {
@@ -1159,6 +1684,9 @@
         ctx.fillRect(f.x, f.y, 48, 60);
         ctx.fillStyle = "#06b6d4";
         ctx.fillRect(f.x + 6, f.y + 10, 36, 24);
+        ctx.font = "8px 'Press Start 2P'";
+        ctx.fillStyle = "#facc15";
+        ctx.fillText("🎮", f.x + 14, f.y + 26);
 
       } else if (f.type === 'VENDING_MACHINE') {
         ctx.fillStyle = "#1e3a8a";
@@ -1185,18 +1713,16 @@
       let currentActivity = null;
       let isSeated = false;
 
-      // Check if teamplay sequence is directing this agent
+      // Teamplay Delegation sequence
       if (activeTeamSequence && activeTeamSequence.type === 'DELEGATE' && agent.id === 'lead') {
-        // Lead walks to Coder 1 Desk
-        targetX = 135;
+        targetX = 115;
         targetY = 120;
         isSeated = false;
 
         if (Math.hypot(targetX - agent.x, targetY - agent.y) < 6) {
-          // Handover animation
           if (Date.now() - activeTeamSequence.startTime > 3000) {
             agents.coder1.state = 'WORKING';
-            agents.coder1.currentTask = 'Task #306: Implementierung gestartet';
+            agents.coder1.currentTask = 'Task implementieren (Diskette empfangen)';
             spawnConfetti(targetX, targetY);
             activeTeamSequence = null;
             agents.lead.state = 'IDLE';
@@ -1234,6 +1760,11 @@
       } else if (agent.state === 'WORKING' && isSeated) {
         leftArm = Math.sin(time * 0.035) * 3;
         rightArm = -Math.sin(time * 0.035) * 3;
+        soundKey();
+      } else if (agent.state === 'ERROR') {
+        // Hands on head in shock!
+        leftArm = -12;
+        rightArm = -12;
       } else if (agent.state === 'THINKING' && isSeated) {
         rightArm = -8 + Math.sin(time * 0.01) * 2;
       } else if (agent.state === 'IDLE' && currentActivity) {
@@ -1297,7 +1828,6 @@
         ctx.fillRect(px - 4, py + 11 + leftArm, 5, 4);
         ctx.fillRect(px + 19, py + 11 + rightArm, 5, 4);
 
-        // Holding floppy disk during delegation
         if (agent.state === 'DELEGATING') {
           ctx.fillStyle = "#38bdf8"; // Floppy Disk
           ctx.fillRect(px + 21, py + 4, 8, 8);
@@ -1384,17 +1914,30 @@
 
       drawEnhancedStatusBubble(agent, px, py - 28, time, currentActivity);
 
-      ctx.font = "14px 'VT323'";
+      ctx.font = "13px 'VT323'";
       ctx.fillStyle = "#ffffff";
       ctx.textAlign = "center";
-      ctx.fillText(agent.name, px + 10, py + (isSeated ? 46 : 38));
+      ctx.fillText(agent.name.split(' ')[0], px + 10, py + (isSeated ? 46 : 38));
       ctx.textAlign = "left";
 
       ctx.restore();
     }
 
     function drawEnhancedStatusBubble(agent, x, y, time, currentActivity) {
-      if (agent.state === 'DISCORD') {
+      const isSpeechActive = agent.speechBubble && (Math.sin(time * 0.003) > -0.2);
+
+      if (agent.state === 'ERROR' || isIncidentActive) {
+        const shake = (Math.random() - 0.5) * 4;
+        ctx.fillStyle = "#7f1d1d";
+        ctx.fillRect(x - 8 + shake, y - 12, 36, 22);
+        ctx.strokeStyle = "#f87171";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(x - 8 + shake, y - 12, 36, 22);
+        ctx.font = "11px 'Press Start 2P'";
+        ctx.fillStyle = "#fee2e2";
+        ctx.fillText("!CI", x - 2 + shake, y + 4);
+
+      } else if (agent.state === 'DISCORD') {
         const bounce = Math.sin(time * 0.012) * 3;
         ctx.fillStyle = "#4338ca";
         ctx.fillRect(x - 14, y - 12 + bounce, 48, 22);
@@ -1417,21 +1960,26 @@
         ctx.fillText("💾 DELEGATE", x - 6, y + 3 + bounce);
 
       } else if (agent.state === 'WORKING') {
-        const count = agent.parallelCount || 1;
-        const bubbleW = (count > 1) ? 54 : 40;
-        ctx.fillStyle = "#064e3b";
-        ctx.fillRect(x - 10, y - 10, bubbleW, 20);
-        ctx.strokeStyle = (count > 1) ? "#facc15" : "#34d399";
-        ctx.lineWidth = 1.5;
-        ctx.strokeRect(x - 10, y - 10, bubbleW, 20);
-        ctx.font = "10px 'Press Start 2P'";
-        ctx.fillStyle = "#34d399";
-        ctx.fillText("</>", x - 4, y + 4);
-
-        if (count > 1) {
+        if (isSpeechActive && agent.speechBubble) {
+          // Thought bubble with real-time log text
+          ctx.font = "13px 'VT323'";
+          const w = ctx.measureText(agent.speechBubble).width + 14;
+          ctx.fillStyle = "#022c22";
+          ctx.fillRect(x - 10, y - 14, w, 22);
+          ctx.strokeStyle = "#34d399";
+          ctx.lineWidth = 1.5;
+          ctx.strokeRect(x - 10, y - 14, w, 22);
+          ctx.fillStyle = "#6ee7b7";
+          ctx.fillText(`💭 ${agent.speechBubble}`, x - 4, y + 1);
+        } else {
+          ctx.fillStyle = "#064e3b";
+          ctx.fillRect(x - 6, y - 10, 36, 20);
+          ctx.strokeStyle = "#34d399";
+          ctx.lineWidth = 1.5;
+          ctx.strokeRect(x - 6, y - 10, 36, 20);
           ctx.font = "10px 'Press Start 2P'";
-          ctx.fillStyle = "#facc15";
-          ctx.fillText(`x${count}`, x + 24, y + 4);
+          ctx.fillStyle = "#34d399";
+          ctx.fillText("</>", x, y + 4);
         }
 
       } else if (agent.state === 'THINKING') {
@@ -1445,17 +1993,6 @@
         ctx.fillStyle = "#fef08a";
         ctx.fillText("💭 LLM", x - 2, y + 4 + bob);
 
-      } else if (agent.state === 'ERROR') {
-        const shake = (Math.random() - 0.5) * 3;
-        ctx.fillStyle = "#7f1d1d";
-        ctx.fillRect(x - 2 + shake, y - 12, 24, 22);
-        ctx.strokeStyle = "#f87171";
-        ctx.lineWidth = 2;
-        ctx.strokeRect(x - 2 + shake, y - 12, 24, 22);
-        ctx.font = "14px 'Press Start 2P'";
-        ctx.fillStyle = "#fee2e2";
-        ctx.fillText("!", x + 5 + shake, y + 4);
-
       } else if (agent.state === 'IDLE') {
         const bob = Math.sin(time * 0.008) * 2;
         const bubbleTxt = (currentActivity && currentActivity.bubble) ? currentActivity.bubble : '☕ zZz';
@@ -1471,7 +2008,50 @@
       }
     }
 
-    // Click Detection
+    // Ambient Lighting Overlay Engine (Night / Dusk / Day)
+    function drawAmbientLighting(time) {
+      const amb = getAmbientSetting();
+      if (amb === 'day' && !isIncidentActive) return; // Daylight is full bright
+
+      ctx.save();
+      // Red Alert Emergency Sweep
+      if (isIncidentActive) {
+        const sweep = Math.sin(time * 0.008);
+        ctx.fillStyle = `rgba(220, 38, 38, ${0.25 + sweep * 0.15})`;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      } else if (amb === 'sunset') {
+        ctx.fillStyle = 'rgba(249, 115, 22, 0.18)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      } else if (amb === 'night') {
+        // Deep Cozy Night Shadow Mask
+        ctx.fillStyle = 'rgba(6, 10, 25, 0.55)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        // Warm radial light cones cutout around monitors & workstations
+        ctx.globalCompositeOperation = 'lighter';
+        const lights = [
+          { x: 105, y: 105, r: 65, color: 'rgba(56, 189, 248, 0.25)' },
+          { x: 245, y: 105, r: 65, color: 'rgba(52, 211, 153, 0.25)' },
+          { x: 475, y: 105, r: 75, color: 'rgba(250, 204, 21, 0.25)' },
+          { x: 625, y: 105, r: 75, color: 'rgba(244, 63, 94, 0.25)' },
+          { x: 725, y: 75, r: 60, color: 'rgba(251, 191, 36, 0.3)' },
+          { x: 495, y: 335, r: 50, color: 'rgba(6, 182, 212, 0.3)' }
+        ];
+
+        lights.forEach(l => {
+          const grad = ctx.createRadialGradient(l.x, l.y, 10, l.x, l.y, l.r);
+          grad.addColorStop(0, l.color);
+          grad.addColorStop(1, 'rgba(0,0,0,0)');
+          ctx.fillStyle = grad;
+          ctx.beginPath();
+          ctx.arc(l.x, l.y, l.r, 0, Math.PI * 2);
+          ctx.fill();
+        });
+      }
+      ctx.restore();
+    }
+
+    // Click Detection on Agents & Furniture
     canvas.addEventListener('click', (e) => {
       const rect = canvas.getBoundingClientRect();
       const scaleX = canvas.width / rect.width;
@@ -1479,6 +2059,7 @@
       const clickX = (e.clientX - rect.left) * scaleX;
       const clickY = (e.clientY - rect.top) * scaleY;
 
+      // 1. Check Agent clicks
       for (const [key, agent] of Object.entries(agents)) {
         if (
           clickX >= agent.x - 15 &&
@@ -1492,16 +2073,34 @@
           if (agent.liveLog) {
             agent.liveLog.forEach(l => appendTerminalLog(agent.name.toUpperCase(), l));
           }
-          break;
+          return;
         }
       }
+
+      // 2. Check Furniture clicks
+      FURNITURE.forEach(f => {
+        if (f.type === 'WHITEBOARD' && clickX >= f.x && clickX <= f.x + 120 && clickY >= f.y && clickY <= f.y + 60) {
+          showKanbanModal();
+        } else if (f.type === 'COFFEE_MACHINE' && clickX >= f.x && clickX <= f.x + 110 && clickY >= f.y && clickY <= f.y + 50) {
+          spawnSteam(f.x + 35, f.y - 10);
+          addLog(`☕ Frischer Espresso zubereitet! (+5 Energy für alle Agenten)`);
+          appendTerminalLog('COFFEE', 'Espresso-Bar aktiv: Koffeinschub verteilt!');
+        } else if (f.type === 'ARCADE_CAB' && clickX >= f.x && clickX <= f.x + 48 && clickY >= f.y && clickY <= f.y + 60) {
+          soundArcade();
+          spawnConfetti(f.x + 24, f.y + 10);
+          addLog(`🕹️ <b>Highscore geknackt!</b> Flappy Bird Agent Champion!`);
+          appendTerminalLog('ARCADE', 'Neuer Highscore auf dem Arcade-Automaten registriert!');
+        } else if ((f.type === 'BULLMQ_STATION' || f.type === 'GITEA_STATION') && clickX >= f.x && clickX <= f.x + 75 && clickY >= f.y && clickY <= f.y + 80) {
+          showRackModal(f.type === 'BULLMQ' ? 'BULLMQ' : 'GITEA');
+        }
+      });
     });
 
-    // Main Animation Loop with Depth / Y-Sorting & Confetti
+    // Main Animation Loop
     function render(time) {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-      ROOMS.forEach(drawRoom);
+      ROOMS.forEach(r => drawRoom(r, time));
 
       const renderList = [];
       FURNITURE.forEach(f => {
@@ -1532,12 +2131,12 @@
         }
       });
 
-      // Render & Update Confetti Particles
+      // Render Confetti Particles
       for (let i = particles.length - 1; i >= 0; i--) {
         const p = particles[i];
         p.x += p.vx;
         p.y += p.vy;
-        p.vy += 0.15; // gravity
+        p.vy += 0.15;
         p.life -= 0.02;
 
         ctx.fillStyle = p.color;
@@ -1546,6 +2145,24 @@
         if (p.life <= 0) particles.splice(i, 1);
       }
 
+      // Render Steam Particles
+      for (let i = steamParticles.length - 1; i >= 0; i--) {
+        const s = steamParticles[i];
+        s.x += s.vx;
+        s.y += s.vy;
+        s.life -= 0.025;
+
+        ctx.fillStyle = `${s.color}${s.life * 0.6})`;
+        ctx.beginPath();
+        ctx.arc(s.x, s.y, s.size, 0, Math.PI * 2);
+        ctx.fill();
+
+        if (s.life <= 0) steamParticles.splice(i, 1);
+      }
+
+      // Render Ambient Lighting Overlay
+      drawAmbientLighting(time);
+
       requestAnimationFrame(render);
     }
 
diff --git a/server.py b/server.py
index 768e59f..534dbc4 100644
--- a/server.py
+++ b/server.py
@@ -25,6 +25,44 @@ class RealtimeRPGHandler(http.server.SimpleHTTPRequestHandler):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, directory=DIRECTORY, **kwargs)
 
+    def do_POST(self):
+        parsed_url = urllib.parse.urlparse(self.path)
+        if parsed_url.path == '/api/issue':
+            content_length = int(self.headers.get('Content-Length', 0))
+            post_data = self.rfile.read(content_length).decode('utf-8')
+            try:
+                payload = json.loads(post_data)
+                project = payload.get('project', 'camper-knowledge-graph')
+                title = payload.get('title', '').strip()
+                body = payload.get('body', 'Erstellt über Agent RPG Terminal').strip()
+                if not title:
+                    self.send_response(400)
+                    self.end_headers()
+                    self.wfile.write(json.dumps({"error": "Title is required"}).encode('utf-8'))
+                    return
+                
+                req = urllib.request.Request(
+                    f"{GITEA_BASE_URL}/repos/openclaw/{project}/issues",
+                    data=json.dumps({"title": title, "body": body}).encode('utf-8'),
+                    headers={'Authorization': f'token {GITEA_TOKEN}', 'Content-Type': 'application/json'}
+                )
+                with urllib.request.urlopen(req, timeout=3) as resp:
+                    resp_data = json.loads(resp.read().decode())
+                    self.send_response(201)
+                    self.send_header('Content-Type', 'application/json')
+                    self.send_header('Access-Control-Allow-Origin', '*')
+                    self.end_headers()
+                    self.wfile.write(json.dumps({"success": True, "issue": resp_data}).encode('utf-8'))
+            except Exception as e:
+                self.send_response(500)
+                self.send_header('Content-Type', 'application/json')
+                self.send_header('Access-Control-Allow-Origin', '*')
+                self.end_headers()
+                self.wfile.write(json.dumps({"error": str(e)}).encode('utf-8'))
+        else:
+            self.send_response(404)
+            self.end_headers()
+
     def do_GET(self):
         parsed_url = urllib.parse.urlparse(self.path)
         if parsed_url.path == '/api/status':
@@ -66,6 +104,11 @@ class RealtimeRPGHandler(http.server.SimpleHTTPRequestHandler):
                 "ci_status": "PASSING",
                 "connected": True
             },
+            "metrics": {
+                "active_agents": 0,
+                "token_velocity": 0,
+                "system_health": 100
+            },
             "agents": {
                 "coder1": {
                     "name": f"Coder #{target_project[:4].upper()}",
@@ -144,8 +187,9 @@ class RealtimeRPGHandler(http.server.SimpleHTTPRequestHandler):
 
         # 2. Collect Gitea Live PRs & Issues for Whiteboard Kanban strictly for target_project
         try:
-            # Check Gitea Actions API for actively running workflows
+            # Check Gitea Actions API for actively running workflows and recent failure
             active_runs_count = 0
+            latest_run_failed = False
             try:
                 req_runs = urllib.request.Request(
                     f"{GITEA_BASE_URL}/repos/openclaw/{target_project}/actions/runs?limit=10",
@@ -153,14 +197,22 @@ class RealtimeRPGHandler(http.server.SimpleHTTPRequestHandler):
                 )
                 with urllib.request.urlopen(req_runs, timeout=2) as resp:
                     runs_data = json.loads(resp.read().decode())
-                    for r in runs_data.get("workflow_runs", []):
+                    runs = runs_data.get("workflow_runs", [])
+                    for r in runs:
                         if r.get("status") in ["running", "waiting", "queued"]:
                             active_runs_count += 1
+                    if runs and runs[0].get("status") == "completed" and runs[0].get("conclusion") in ["failure", "cancelled"]:
+                        latest_run_failed = True
             except Exception:
                 pass
 
             status["gitea"]["active_ci_jobs"] = active_runs_count
-            status["gitea"]["ci_status"] = "BUILDING" if active_runs_count > 0 else "PASSING"
+            if active_runs_count > 0:
+                status["gitea"]["ci_status"] = "BUILDING"
+            elif latest_run_failed:
+                status["gitea"]["ci_status"] = "FAILURE"
+            else:
+                status["gitea"]["ci_status"] = "PASSING"
 
             # Fetch Open Pull Requests
             req_prs = urllib.request.Request(
@@ -389,6 +441,14 @@ class RealtimeRPGHandler(http.server.SimpleHTTPRequestHandler):
             status["agents"]["reviewer"]["lastAction"] = "Idle / Bereit"
             status["agents"]["reviewer"]["liveLog"] = ["PR Watcher aktiv"]
 
+        status["agents"]["coder_instances"] = coder_sessions
+
+        # Calculate live system metrics
+        active_count = sum(1 for a in status["agents"].values() if isinstance(a, dict) and a.get("state") == "WORKING")
+        status["metrics"]["active_agents"] = active_count
+        status["metrics"]["token_velocity"] = (active_count * 185) + (total_active * 240)
+        status["metrics"]["system_health"] = 90 if status["gitea"]["ci_status"] == "FAILURE" else 100
+
         return status
 
 if __name__ == '__main__':