copilotoffice 1.0.3 → 1.1.0

package/dist/game.bundle.js

@@ -140044,6 +140044,18 @@ var CopilotOffice = (() => {
     CORE_AGENT_IDS.clear();
     for (const a of AGENTS) CORE_AGENT_IDS.add(a.id);
   }
+  function restoreSeatedReserveAgents(seatedAgents) {
+    const valid = [];
+    for (const seated of seatedAgents) {
+      const reserveConfig = RESERVE_AGENTS[seated.deskId];
+      if (!reserveConfig || reserveConfig.id !== seated.agentId) continue;
+      valid.push(seated);
+      if (!AGENTS.find((a) => a.id === seated.agentId)) {
+        AGENTS.push(reserveConfig);
+      }
+    }
+    return valid;
+  }
   var FLEET_NAMES, FLEET_COLORS, FLEET_SEAT_POSITIONS, ARTHUR_FLEET_SEAT_INDEX, FLEET_AGENTS, RESERVE_AGENTS, SHOW_ARCHITECT_IN_DEFAULT_OFFICE, CORE_AGENT_IDS, RESERVE_AGENT_DESK, AGENTS, DEFAULT_AGENTS, DEFAULT_RESERVE_MAP, RANDOM_POOL_CONFIGS, RANDOM_SPRITE_COUNT, CORE_POSITIONS, RESERVE_DESK_IDS, RESERVE_POSITIONS, ROLE_TITLES;
   var init_agents = __esm({
     "src/config/agents.ts"() {
@@ -148603,10 +148615,17 @@ WARNING: This link could potentially be dangerous`)) {
           this.resizeHandler = null;
           this.resizeObserver = null;
           this.refitTimers = [];
+          this.refitGeneration = 0;
           this.attachedOfficeId = null;
           this.isReadOnly = false;
           this.isReplaying = false;
           this.launchMode = "copilot";
+          this.pendingInputLine = "";
+          this.awaitingSessionIdRefresh = false;
+          this.sessionRefreshCommandTimer = null;
+          this.sessionRefreshExpiryTimer = null;
+          this.currentSessionTitle = null;
+          this.isEditingSessionTitle = false;
           this.scene = scene;
           this.inputManager = inputManager;
           this.getOfficeId = getOfficeId;
@@ -148635,6 +148654,11 @@ WARNING: This link could potentially be dangerous`)) {
 [Process exited with code ${exitCode}]`);
               }
             });
+            window.copilotBridge.onSessionMetaUpdated((agentId, meta) => {
+              if (agentId === this.currentAgentId) {
+                this.updateSessionTitleDisplay(meta?.title || null);
+              }
+            });
           }
         }
         /**
@@ -148647,7 +148671,84 @@ WARNING: This link could potentially be dangerous`)) {
           this.setupTerminalListeners();
           console.log("[TerminalOverlay] Re-attached terminal IPC listeners");
         }
-        parseSessionId(_data) {
+        clearSessionRefreshTimers() {
+          if (this.sessionRefreshCommandTimer) {
+            clearTimeout(this.sessionRefreshCommandTimer);
+            this.sessionRefreshCommandTimer = null;
+          }
+          if (this.sessionRefreshExpiryTimer) {
+            clearTimeout(this.sessionRefreshExpiryTimer);
+            this.sessionRefreshExpiryTimer = null;
+          }
+        }
+        scheduleSessionIdRefresh(agentId) {
+          if (!window.copilotBridge) return;
+          const officeId = this.getActiveOfficeId();
+          this.awaitingSessionIdRefresh = true;
+          this.clearSessionRefreshTimers();
+          const el = this.spriteCardElement?.querySelector(".session-id-display");
+          if (el) {
+            el.textContent = "syncing...";
+          }
+          this.sessionRefreshCommandTimer = setTimeout(() => {
+            this.sessionRefreshCommandTimer = null;
+            void window.copilotBridge.terminalWrite(officeId, agentId, "/session\r").catch(() => {
+            });
+          }, 400);
+          this.sessionRefreshExpiryTimer = setTimeout(() => {
+            this.sessionRefreshExpiryTimer = null;
+            this.awaitingSessionIdRefresh = false;
+            this.updateSessionDisplay();
+          }, 12e3);
+        }
+        parseSessionId(data) {
+          if (!this.awaitingSessionIdRefresh || !this.currentAgentId || !window.copilotBridge) return;
+          const match = data.match(/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i);
+          if (!match) return;
+          const nextSessionId = match[0].toLowerCase();
+          this.awaitingSessionIdRefresh = false;
+          this.clearSessionRefreshTimers();
+          this.sessionId = nextSessionId;
+          this.updateSessionDisplay();
+          const officeId = this.getActiveOfficeId();
+          void window.copilotBridge.setSessionId(officeId, this.currentAgentId, nextSessionId).catch(() => {
+          });
+        }
+        getActiveOfficeId() {
+          return this.attachedOfficeId ?? this.getOfficeId();
+        }
+        clearRefitTimers() {
+          for (const timer of this.refitTimers) {
+            clearTimeout(timer);
+          }
+          this.refitTimers.length = 0;
+        }
+        resolveTerminalDimensions() {
+          if (!this.terminal || !this.fitAddon) return null;
+          this.fitAddon.fit();
+          const proposed = this.fitAddon.proposeDimensions();
+          const fallbackCols = this.terminal.cols || 80;
+          const fallbackRows = this.terminal.rows || 24;
+          const colsRaw = proposed?.cols ?? fallbackCols;
+          const rowsRaw = proposed?.rows ?? fallbackRows;
+          if (!Number.isFinite(colsRaw) || !Number.isFinite(rowsRaw)) return null;
+          const cols = Math.max(2, Math.floor(colsRaw));
+          const rows = Math.max(1, Math.floor(rowsRaw));
+          return { cols, rows };
+        }
+        fitAndResizeTerminal(options) {
+          if (!this.terminal || !this.fitAddon) return null;
+          const dims = this.resolveTerminalDimensions();
+          if (!dims) return null;
+          const agentId = options?.agentId ?? this.currentAgentId;
+          if (!agentId || !window.copilotBridge) return dims;
+          const officeId = options?.officeId ?? this.getActiveOfficeId();
+          void window.copilotBridge.terminalResize(officeId, agentId, dims.cols, dims.rows).catch(() => {
+          });
+          if (options?.refreshVisibleRows) {
+            this.terminal.refresh(0, Math.max(0, dims.rows - 1));
+          }
+          return dims;
         }
         acknowledgeCompletedWork(officeId, agentId) {
           if (agentId === "pc-terminal") return;
@@ -148663,6 +148764,88 @@ WARNING: This link could potentially be dangerous`)) {
             el.onclick = () => this.copySessionId();
           }
         }
+        updateSessionTitleDisplay(title) {
+          this.currentSessionTitle = title && title.trim().length > 0 ? title : null;
+          if (this.isEditingSessionTitle) return;
+          const el = this.spriteCardElement?.querySelector(".session-title-display");
+          if (!el) return;
+          if (this.currentSessionTitle) {
+            el.textContent = this.currentSessionTitle;
+            el.title = this.currentSessionTitle;
+            el.style.color = "#c8d4ff";
+            return;
+          }
+          el.textContent = "Untitled session";
+          el.title = "Click to set title";
+          el.style.color = "#77839f";
+        }
+        async startSessionTitleEdit() {
+          if (this.isReadOnly || !this.currentAgentId || this.isEditingSessionTitle || !this.spriteCardElement || !window.copilotBridge?.setSessionMeta) return;
+          const titleEl = this.spriteCardElement.querySelector(".session-title-display");
+          if (!titleEl) return;
+          this.isEditingSessionTitle = true;
+          const previousTitle = this.currentSessionTitle || "";
+          const input = document.createElement("input");
+          input.type = "text";
+          input.value = previousTitle;
+          input.maxLength = 120;
+          input.className = "session-title-input";
+          input.style.cssText = `
+      width: min(520px, 52vw);
+      max-width: 100%;
+      background: #101629;
+      color: #dbe6ff;
+      border: 1px solid #3f5c92;
+      border-radius: 6px;
+      padding: 6px 10px;
+      font-size: 15px;
+      font-weight: 700;
+      font-family: 'Cascadia Code', Consolas, monospace;
+      line-height: 1.25;
+      outline: none;
+    `;
+          titleEl.replaceWith(input);
+          input.focus();
+          input.select();
+          const agentId = this.currentAgentId;
+          let finalized = false;
+          const finalize = async (save) => {
+            if (finalized) return;
+            finalized = true;
+            const nextTitle = save ? input.value.trim() : previousTitle;
+            if (save) {
+              try {
+                await withTimeout(
+                  window.copilotBridge.setSessionMeta(this.getActiveOfficeId(), agentId, { title: nextTitle }),
+                  IPC_TIMEOUT,
+                  "setSessionMeta"
+                );
+              } catch (error) {
+                console.warn("[TerminalOverlay] Failed to save session title", error);
+              }
+            }
+            this.isEditingSessionTitle = false;
+            this.currentSessionTitle = nextTitle || null;
+            if (!input.isConnected || !this.spriteCardElement) {
+              this.updateSessionTitleDisplay(this.currentSessionTitle);
+              return;
+            }
+            input.replaceWith(titleEl);
+            this.updateSessionTitleDisplay(this.currentSessionTitle);
+          };
+          input.addEventListener("keydown", (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              void finalize(true);
+            } else if (event.key === "Escape") {
+              event.preventDefault();
+              void finalize(false);
+            }
+          });
+          input.addEventListener("blur", () => {
+            void finalize(true);
+          });
+        }
         async show(agent, onClose, options) {
           const previousAgentId = this.currentAgentId;
           const previousOfficeId = this.attachedOfficeId ?? this.getOfficeId();
@@ -148674,24 +148857,26 @@ WARNING: This link could potentially be dangerous`)) {
           this.isReadOnly = options?.readOnly ?? false;
           this.launchMode = options?.launchMode ?? "copilot";
           this.attachedOfficeId = this.getOfficeId();
+          const officeId = this.getActiveOfficeId();
           this.currentAgent = agent;
           if (!this.container) {
             this.createContainer();
           }
           const inceptionBadge = agent.id === "admin" ? " \u{1F3AD} INCEPTION MODE" : "";
-          let sessionTitleHtml = "";
+          let sessionTitle = null;
           if (window.copilotBridge?.getSessionMeta) {
             try {
-              const meta = await window.copilotBridge.getSessionMeta(this.getOfficeId(), agent.id);
+              const meta = await window.copilotBridge.getSessionMeta(officeId, agent.id);
               if (meta?.title) {
-                sessionTitleHtml = ` <span style="color: #aab; font-size: 15px;">\u2014 ${meta.title.replace(/</g, "&lt;")}</span>`;
+                sessionTitle = meta.title;
               }
             } catch (_) {
             }
           }
+          const sessionTitleHtml = sessionTitle ? ` <span style="color: #aab; font-size: 15px;">\u2014 ${sessionTitle.replace(/</g, "&lt;")}</span>` : "";
           if (this.headerElement) {
             const readOnlyBadge = this.isReadOnly ? ' <span style="color: #ffb86c; font-size: 12px; background: #332200; padding: 2px 8px; border-radius: 4px;">\u{1F512} READ-ONLY</span>' : "";
-            const shortcutsText = this.isReadOnly ? "[F10] Close  [Ctrl+F] Fullscreen" : "[F10] Close  [Ctrl+Shift+N] New Session  [Ctrl+F] Fullscreen";
+            const shortcutsText = this.isReadOnly ? "[F10] Close  [Ctrl+F] Fullscreen" : "[F10] Close  [/new or Ctrl+Shift+N] New Session  [Ctrl+F] Fullscreen";
             const headerLabel = this.isReadOnly ? `\u{1F4DC} Meeting with ${agent.name}` : `\u{1F4AC} Talking to ${agent.name}`;
             this.headerElement.innerHTML = `
         <div style="display: flex; align-items: center; gap: 15px;">
@@ -148714,6 +148899,8 @@ WARNING: This link could potentially be dangerous`)) {
           if (this.container) {
             this.container.style.display = "flex";
           }
+          this.awaitingSessionIdRefresh = false;
+          this.clearSessionRefreshTimers();
           if (this.spriteCardElement) {
             this.spriteCardElement.style.display = "flex";
           }
@@ -148727,27 +148914,39 @@ WARNING: This link could potentially be dangerous`)) {
             agentNameDisplay.textContent = agent.name;
             agentNameDisplay.style.color = colorHex;
           }
+          const agentDescriptionDisplay = this.spriteCardElement?.querySelector(".agent-description-display");
+          if (agentDescriptionDisplay) {
+            agentDescriptionDisplay.textContent = agent.description;
+          }
+          this.updateSessionTitleDisplay(sessionTitle);
           this.drawAgentSprite(agent);
+          this.pendingInputLine = "";
+          this.awaitingSessionIdRefresh = false;
+          this.clearSessionRefreshTimers();
+          this.clearRefitTimers();
+          this.refitGeneration += 1;
           if (!this.terminal) {
             this.createTerminal();
           } else {
             this.isReplaying = true;
+            this.terminal.reset();
             this.terminal.clear();
           }
           this.sessionId = null;
           if (window.copilotBridge) {
             try {
               const exists = await withTimeout(
-                window.copilotBridge.terminalExists(this.getOfficeId(), agent.id),
+                window.copilotBridge.terminalExists(officeId, agent.id),
                 IPC_TIMEOUT,
                 "terminalExists"
               );
               if (!exists) {
                 this.isReplaying = false;
-                await this.startNewSession(agent.id, agent.workingDir || officeManager.getCurrentWorkingDirectory());
+                await this.startNewSession(agent.id, agent.workingDir || officeManager.getCurrentWorkingDirectory(), officeId);
               } else {
+                this.fitAndResizeTerminal({ officeId, agentId: agent.id });
                 const attachResult = await withTimeout(
-                  window.copilotBridge.terminalAttach(this.getOfficeId(), agent.id),
+                  window.copilotBridge.terminalAttach(officeId, agent.id),
                   IPC_TIMEOUT,
                   "terminalAttach"
                 );
@@ -148758,7 +148957,7 @@ WARNING: This link could potentially be dangerous`)) {
                 this.isReplaying = false;
                 this.scene.game.events.emit("agent:reattached", agent.id);
                 const savedId = await withTimeout(
-                  window.copilotBridge.getSessionId(this.getOfficeId(), agent.id),
+                  window.copilotBridge.getSessionId(officeId, agent.id),
                   IPC_TIMEOUT,
                   "getSessionId"
                 );
@@ -148806,18 +149005,20 @@ WARNING: This link could potentially be dangerous`)) {
             }
           }, 50);
         }
-        async startNewSession(agentId, workingDir) {
+        async startNewSession(agentId, workingDir, officeId) {
+          this.awaitingSessionIdRefresh = false;
+          this.clearSessionRefreshTimers();
           this.sessionId = null;
           this.updateSessionDisplay();
           const el = this.spriteCardElement?.querySelector(".session-id-display");
           if (el) {
             el.textContent = "starting...";
           }
-          this.fitAddon?.fit();
-          const dims = this.fitAddon?.proposeDimensions();
+          const targetOfficeId = officeId ?? this.getActiveOfficeId();
+          const dims = this.fitAndResizeTerminal({ officeId: targetOfficeId, agentId });
           const result = await withTimeout(
             this.launchMode === "shell" ? window.copilotBridge.terminalStart(
-              this.getOfficeId(),
+              targetOfficeId,
               agentId,
               workingDir,
               dims?.cols,
@@ -148825,7 +149026,7 @@ WARNING: This link could potentially be dangerous`)) {
               void 0,
               "shell"
             ) : window.copilotBridge.terminalStart(
-              this.getOfficeId(),
+              targetOfficeId,
               agentId,
               workingDir,
               dims?.cols,
@@ -148842,15 +149043,7 @@ WARNING: This link could potentially be dangerous`)) {
           }
         }
         fetchSessionId(agentId) {
-          if (window.copilotBridge && !this.sessionId) {
-            const el = this.spriteCardElement?.querySelector(".session-id-display");
-            if (el) {
-              el.textContent = "fetching...";
-            }
-            setTimeout(() => {
-              window.copilotBridge.terminalWrite(this.getOfficeId(), agentId, "/session\r");
-            }, 200);
-          }
+          this.scheduleSessionIdRefresh(agentId);
         }
         createContainer() {
           this.container = document.createElement("div");
@@ -148925,8 +149118,8 @@ WARNING: This link could potentially be dangerous`)) {
           this.spriteCardElement.id = "sprite-card";
           this.spriteCardElement.style.cssText = `
       width: 100%;
-      background: #1a1a2e;
-      border-top: 1px solid #3a5a8a;
+      background: #13131f;
+      border-top: 1px solid #252540;
       font-family: 'Cascadia Code', Consolas, monospace;
       font-size: 14px;
       color: #888;
@@ -148934,7 +149127,7 @@ WARNING: This link could potentially be dangerous`)) {
       flex-shrink: 0;
       justify-content: space-between;
       align-items: center;
-      padding: 15px 30px;
+      padding: 16px 24px;
       box-sizing: border-box;
       position: relative;
       z-index: 10001;
@@ -148947,13 +149140,32 @@ WARNING: This link could potentially be dangerous`)) {
       gap: 20px;
     `;
           agentDisplay.innerHTML = `
-      <canvas class="agent-sprite-canvas" width="32" height="34" style="image-rendering: pixelated; width: 160px; height: 170px; border-radius: 8px;"></canvas>
-      <div style="display: flex; flex-direction: column; gap: 5px;">
-        <span class="agent-name-display" style="font-weight: bold; font-size: 28px;"></span>
-        <span style="color: #666; font-size: 12px;">Session ID: <span class="session-id-display" style="color: #4a9eff; cursor: pointer;">--</span></span>
+      <div style="width: 72px; background: #2a2a40; border: 1px solid #3a3a58; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;">
+        <canvas class="agent-sprite-canvas" width="32" height="34" style="image-rendering: pixelated; width: 64px; height: 68px; display: block;"></canvas>
+      </div>
+      <div style="display: flex; flex-direction: column; gap: 4px; min-width: 0;">
+        <span class="agent-name-display" style="font-weight: 700; font-size: 18px; color: #dde;"></span>
+        <span class="agent-description-display" style="color: #778; font-size: 13px; line-height: 1.25;"></span>
+        <span class="session-title-display" style="color: #c8d4ff; font-size: 14px; font-weight: 700; line-height: 1.25; cursor: text; max-width: min(520px, 52vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Untitled session</span>
+        <span style="color: #666; font-size: 11px;">Session ID: <span class="session-id-display" style="color: #4a9eff; cursor: pointer;">--</span></span>
       </div>
     `;
           this.spriteCardElement.appendChild(agentDisplay);
+          const sessionTitleDisplay = this.spriteCardElement.querySelector(".session-title-display");
+          if (sessionTitleDisplay) {
+            sessionTitleDisplay.onclick = () => {
+              void this.startSessionTitleEdit();
+            };
+            sessionTitleDisplay.onkeydown = (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                void this.startSessionTitleEdit();
+              }
+            };
+            sessionTitleDisplay.tabIndex = 0;
+            sessionTitleDisplay.setAttribute("role", "button");
+            sessionTitleDisplay.setAttribute("aria-label", "Edit session title");
+          }
           const controlsColumn = document.createElement("div");
           controlsColumn.style.cssText = `
       display: flex;
@@ -148979,28 +149191,28 @@ WARNING: This link could potentially be dangerous`)) {
       white-space: nowrap;
     `;
           const historyBtn = document.createElement("button");
-          historyBtn.textContent = "\u{1F4DC} Session History";
+          historyBtn.textContent = "Session History";
           historyBtn.style.cssText = btnStyle;
           historyBtn.onmouseover = () => historyBtn.style.background = "#3a4a5a";
           historyBtn.onmouseout = () => historyBtn.style.background = "#2a3a4a";
           historyBtn.onclick = () => this.toggleSessionHistory(historyBtn);
           buttonGrid.appendChild(historyBtn);
           const newSessionBtn = document.createElement("button");
-          newSessionBtn.textContent = "\u{1F504} New Session";
+          newSessionBtn.textContent = "New Session";
           newSessionBtn.style.cssText = btnStyle;
           newSessionBtn.onmouseover = () => newSessionBtn.style.background = "#3a4a5a";
           newSessionBtn.onmouseout = () => newSessionBtn.style.background = "#2a3a4a";
           newSessionBtn.onclick = () => this.handleNewSession();
           buttonGrid.appendChild(newSessionBtn);
           const clearHistoryBtn = document.createElement("button");
-          clearHistoryBtn.textContent = "\u{1F5D1}\uFE0F Clear History";
+          clearHistoryBtn.textContent = "Clear History";
           clearHistoryBtn.style.cssText = btnStyle;
           clearHistoryBtn.onmouseover = () => clearHistoryBtn.style.background = "#3a4a5a";
           clearHistoryBtn.onmouseout = () => clearHistoryBtn.style.background = "#2a3a4a";
           clearHistoryBtn.onclick = () => this.handleClearHistory();
           buttonGrid.appendChild(clearHistoryBtn);
           const closeSessionBtn = document.createElement("button");
-          closeSessionBtn.textContent = "\u23F9 Close Session";
+          closeSessionBtn.textContent = "Close Session";
           closeSessionBtn.style.cssText = btnStyle + "color: #ff8888;";
           closeSessionBtn.onmouseover = () => {
             closeSessionBtn.style.background = "#4a2a2a";
@@ -149011,7 +149223,7 @@ WARNING: This link could potentially be dangerous`)) {
           closeSessionBtn.onclick = () => this.handleCloseSession();
           buttonGrid.appendChild(closeSessionBtn);
           this.fullscreenBtn = document.createElement("button");
-          this.fullscreenBtn.textContent = this.isFullWidth ? "\u26F6 Half" : "\u26F6 Fullscreen";
+          this.fullscreenBtn.textContent = this.isFullWidth ? "Half Width" : "Full Width";
           this.fullscreenBtn.style.cssText = btnStyle + "color: #88ccff;";
           this.fullscreenBtn.onmouseover = () => {
             if (this.fullscreenBtn) this.fullscreenBtn.style.background = "#2a3a5a";
@@ -149023,7 +149235,7 @@ WARNING: This link could potentially be dangerous`)) {
           this.fullscreenBtn.title = "Toggle fullscreen (Ctrl+F)";
           buttonGrid.appendChild(this.fullscreenBtn);
           const refreshFocusBtn = document.createElement("button");
-          refreshFocusBtn.textContent = "\u{1F3AF} Refresh Focus";
+          refreshFocusBtn.textContent = "Refresh Focus";
           refreshFocusBtn.style.cssText = btnStyle + "color: #88ffaa;";
           refreshFocusBtn.onmouseover = () => {
             refreshFocusBtn.style.background = "#2a4a3a";
@@ -149031,8 +149243,8 @@ WARNING: This link could potentially be dangerous`)) {
           refreshFocusBtn.onmouseout = () => {
             refreshFocusBtn.style.background = "#2a3a4a";
           };
-          refreshFocusBtn.onclick = () => this.focusTerminal();
-          refreshFocusBtn.title = "Re-focus terminal input when typing stops working";
+          refreshFocusBtn.onclick = () => this.refreshFocusAndGeometry();
+          refreshFocusBtn.title = "Re-focus terminal and force geometry self-heal";
           buttonGrid.appendChild(refreshFocusBtn);
           this.mobileKeyboardBtn = document.createElement("button");
           this.mobileKeyboardBtn.textContent = "\u2328 Open Keyboard";
@@ -149083,8 +149295,13 @@ WARNING: This link could potentially be dangerous`)) {
         }
         async handleNewSession() {
           if (!this.currentAgentId || !this.currentAgent || this.isReadOnly) return;
+          this.awaitingSessionIdRefresh = false;
+          this.clearSessionRefreshTimers();
           const officeId = this.attachedOfficeId ?? this.getOfficeId();
           console.log(`[TerminalOverlay] handleNewSession: agent=${this.currentAgentId}, office=${officeId}`);
+          this.clearRefitTimers();
+          this.refitGeneration += 1;
+          this.pendingInputLine = "";
           this.terminal?.clear();
           this.terminal?.writeln("\x1B[33m[Starting new session...]\x1B[0m\r\n");
           await withTimeout(
@@ -149097,8 +149314,8 @@ WARNING: This link could potentially be dangerous`)) {
           if (el) el.textContent = "starting...";
           this.sessionId = null;
           this.updateSessionDisplay();
-          this.fitAddon?.fit();
-          const dims = this.fitAddon?.proposeDimensions();
+          this.updateSessionTitleDisplay(null);
+          const dims = this.fitAndResizeTerminal({ officeId, agentId: this.currentAgentId });
           const result = await withTimeout(
             this.launchMode === "shell" ? window.copilotBridge.terminalStart(
               officeId,
@@ -149138,6 +149355,7 @@ WARNING: This link could potentially be dangerous`)) {
             if (result.success && result.sessionId) {
               this.sessionId = result.sessionId;
               this.updateSessionDisplay();
+              this.updateSessionTitleDisplay(null);
             }
           } catch {
           }
@@ -149240,9 +149458,6 @@ WARNING: This link could potentially be dangerous`)) {
       .xterm-viewport {
         background-color: #0a0a14 !important;
       }
-      .xterm-screen {
-        height: 100%;
-      }
       #terminal-container .xterm {
         height: 100%;
       }
@@ -149286,10 +149501,12 @@ WARNING: This link could potentially be dangerous`)) {
           this.fitAddon = new import_addon_fit.FitAddon();
           this.terminal.loadAddon(this.fitAddon);
           this.terminal.open(this.terminalDiv);
-          this.fitAddon.fit();
+          this.fitAndResizeTerminal();
           this.terminal.attachCustomKeyEventHandler((event) => {
-            if ((event.ctrlKey || event.metaKey) && event.key === "v" && event.type === "keydown") {
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "v" && event.type === "keydown") {
               if (this.isReadOnly) return false;
+              event.preventDefault();
+              event.stopPropagation();
               navigator.clipboard.readText().then((text) => {
                 if (text) this.terminal.paste(text);
               }).catch((err) => {
@@ -149301,8 +149518,34 @@ WARNING: This link could potentially be dangerous`)) {
           });
           this.terminal.onData((data) => {
             if (this.isReadOnly) return;
-            if (this.currentAgentId && window.copilotBridge) {
-              window.copilotBridge.terminalWrite(this.getOfficeId(), this.currentAgentId, data);
+            if (!this.currentAgentId || !window.copilotBridge) return;
+            let outbound = "";
+            let shouldStartSlashNewSession = false;
+            for (const ch of data) {
+              if (ch === "\r" || ch === "\n") {
+                const command = this.pendingInputLine.trim();
+                this.pendingInputLine = "";
+                if (command === "/new") {
+                  shouldStartSlashNewSession = true;
+                }
+                outbound += ch;
+                continue;
+              }
+              if (ch === "\x7F") {
+                this.pendingInputLine = this.pendingInputLine.slice(0, -1);
+                outbound += ch;
+                continue;
+              }
+              if (ch >= " ") {
+                this.pendingInputLine += ch;
+              }
+              outbound += ch;
+            }
+            if (outbound.length > 0) {
+              window.copilotBridge.terminalWrite(this.getOfficeId(), this.currentAgentId, outbound);
+            }
+            if (shouldStartSlashNewSession) {
+              this.fetchSessionId(this.currentAgentId);
             }
           });
           this.resizeHandler = () => {
@@ -149370,18 +149613,27 @@ WARNING: This link could potentially be dangerous`)) {
           officePanel.style.width = "50%";
           terminalPanel.style.width = "50%";
         }
+        refreshFocusAndGeometry() {
+          this.clearRefitTimers();
+          this.refitGeneration += 1;
+          this.fitAndResizeTerminal({ refreshVisibleRows: true });
+          this.focusTerminal();
+          this.debouncedRefit();
+        }
         /** Re-fit xterm after panel resize and notify PTY of new dimensions.
          *  Multi-stage: immediate → 150ms → 350ms to catch late layout shifts. */
         debouncedRefit() {
           if (!this.fitAddon || !this.terminal || !this.currentAgentId) return;
-          for (const t of this.refitTimers) clearTimeout(t);
-          this.refitTimers.length = 0;
+          const generation = ++this.refitGeneration;
+          const agentId = this.currentAgentId;
+          const officeId = this.getActiveOfficeId();
+          this.clearRefitTimers();
           const doFit = () => {
-            this.fitAddon?.fit();
-            const dims = this.fitAddon?.proposeDimensions();
-            if (dims && window.copilotBridge && this.currentAgentId) {
-              window.copilotBridge.terminalResize(this.getOfficeId(), this.currentAgentId, dims.cols, dims.rows);
-            }
+            if (!this.isVisible) return;
+            if (generation !== this.refitGeneration) return;
+            if (this.currentAgentId !== agentId) return;
+            if (this.getActiveOfficeId() !== officeId) return;
+            this.fitAndResizeTerminal({ officeId, agentId });
           };
           requestAnimationFrame(() => {
             doFit();
@@ -149405,14 +149657,8 @@ WARNING: This link could potentially be dangerous`)) {
         }
         applySpriteCardResponsiveStyles() {
           if (!this.spriteCardElement) return;
-          const isMobile = window.__copilotOfficeMobileModeActive?.() === true;
-          if (isMobile) {
-            this.spriteCardElement.style.minHeight = "416px";
-            this.spriteCardElement.style.padding = "39px";
-            return;
-          }
           this.spriteCardElement.style.minHeight = "";
-          this.spriteCardElement.style.padding = "15px 30px";
+          this.spriteCardElement.style.padding = "16px 24px";
         }
         updateMobileKeyboardButtonVisibility() {
           if (!this.mobileKeyboardBtn) return;
@@ -149467,8 +149713,8 @@ WARNING: This link could potentially be dangerous`)) {
         setTerminalFocusVisual(focused) {
           this.isFocused = focused;
           if (this.spriteCardElement && this.spriteCardElement.style.display !== "none") {
-            this.spriteCardElement.style.background = focused ? "#1a1a2e" : "#111118";
-            this.spriteCardElement.style.borderTopColor = focused ? "#3a5a8a" : "#2a2a3a";
+            this.spriteCardElement.style.background = focused ? "#13131f" : "#101019";
+            this.spriteCardElement.style.borderTopColor = focused ? "#252540" : "#1c1c2f";
           }
         }
         setupKeyboardHandler() {
@@ -149483,6 +149729,9 @@ WARNING: This link could potentially be dangerous`)) {
           this.updateMobileKeyboardButtonVisibility();
           this.isVisible = false;
           this.isReadOnly = false;
+          this.pendingInputLine = "";
+          this.awaitingSessionIdRefresh = false;
+          this.clearSessionRefreshTimers();
           this.closeHistoryPopover();
           this.restorePanelLayout();
           this.inputManager.deactivateTerminalF10();
@@ -149521,8 +149770,9 @@ WARNING: This link could potentially be dangerous`)) {
           return false;
         }
         destroy() {
-          for (const t of this.refitTimers) clearTimeout(t);
-          this.refitTimers.length = 0;
+          this.clearRefitTimers();
+          this.awaitingSessionIdRefresh = false;
+          this.clearSessionRefreshTimers();
           if (this.resizeHandler) {
             window.removeEventListener("resize", this.resizeHandler);
             this.resizeHandler = null;
@@ -150477,8 +150727,11 @@ WARNING: This link could potentially be dangerous`)) {
       "use strict";
       DESKTOP_DASHBOARD_TYPOGRAPHY = {
         cardTitle: "15px",
+        cardTitleLg: "18px",
         cardDescription: "11px",
         statusText: "11px",
+        statusPanelText: "13px",
+        statusPanelIcon: "26px",
         statusDot: "8px",
         elapsed: "10px",
         badge: "10px",
@@ -150489,14 +150742,18 @@ WARNING: This link could potentially be dangerous`)) {
         taskSummary: "10px",
         sessionLabel: "9px",
         sessionTitle: "13px",
+        sessionTitleLg: "15px",
         sessionButton: "11px",
         emptyState: "11px",
         arthurHint: "10px"
       };
       MOBILE_DASHBOARD_TYPOGRAPHY = {
         cardTitle: "19px",
+        cardTitleLg: "24px",
         cardDescription: "15px",
         statusText: "16px",
+        statusPanelText: "18px",
+        statusPanelIcon: "34px",
         statusDot: "11px",
         elapsed: "14px",
         badge: "13px",
@@ -150507,6 +150764,7 @@ WARNING: This link could potentially be dangerous`)) {
         taskSummary: "14px",
         sessionLabel: "13px",
         sessionTitle: "17px",
+        sessionTitleLg: "20px",
         sessionButton: "14px",
         emptyState: "14px",
         arthurHint: "14px"
@@ -150538,6 +150796,7 @@ WARNING: This link could potentially be dangerous`)) {
         display: flex;
         align-items: center;
         gap: 12px;
+        min-height: 108px;
       ">
         <div style="
           width: 64px;
@@ -150626,11 +150885,11 @@ WARNING: This link could potentially be dangerous`)) {
           padding: 0 4px;
           box-shadow: 0 1px 4px rgba(0,0,0,0.4);
         ">${unread}</div>` : "";
-            const elapsedHtml = elapsed ? `<span data-elapsed-agent="${agent.id}" style="color: #8a8; font-size: ${t.elapsed}; margin-left: 8px;">\u23F1 ${elapsed}</span>` : "";
-            const queueHtml = toolCount > 1 ? `<span style="
+            const elapsedHtml = elapsed ? `<div data-elapsed-agent="${agent.id}" style="color: #8a8; font-size: ${t.elapsed}; margin-top: 4px;">\u23F1 ${elapsed}</div>` : "";
+            const queueHtml = toolCount > 1 ? `<div style="
         background: #334; color: #aac; font-size: ${t.queue};
-        padding: 1px 6px; border-radius: 8px; margin-left: 6px;
-      ">${toolCount} tools</span>` : "";
+        padding: 2px 8px; border-radius: 8px; margin-top: 4px;
+      ">${toolCount} tools queued</div>` : "";
             let toolPipelineHtml = "";
             if (tools.length > 0) {
               const toolRows = tools.map((t2, i) => {
@@ -150686,12 +150945,19 @@ WARNING: This link could potentially be dangerous`)) {
         ">
           <div style="font-size: ${t.sessionLabel}; color: #3a3a5a; text-transform: uppercase; letter-spacing: 0.5px;">Session Info</div>
           <div class="session-title-display" data-agent="${agent.id}" style="
-            font-weight: bold; color: ${metaTitle ? "#ccd" : "#444"}; font-size: ${t.sessionTitle};
+            font-weight: bold; color: ${metaTitle ? "#ccd" : "#444"}; font-size: ${t.sessionTitleLg};
             cursor: text; min-height: 18px; line-height: 1.4;
             overflow: hidden; text-overflow: ellipsis;
             display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
           " title="${metaTitle ? metaTitle.replace(/"/g, "&quot;") : "Click to set title"}">${metaTitle || "Untitled session"}</div>
-          <div style="display: flex; justify-content: flex-end; margin-top: 2px;">
+          <button class="session-new-btn" data-agent="${agent.id}" style="
+            margin-top: 2px;
+            align-self: flex-start;
+            background: #2a3a4a; border: 1px solid #4a5a6a; color: #a9cff7;
+            font-size: ${t.sessionButton}; padding: 4px 10px; border-radius: 4px;
+            cursor: pointer; transition: background 0.15s, border-color 0.15s;
+          " title="Start a new session for this agent">\u{1F504} New Session</button>
+          <div style="display: flex; justify-content: flex-end;">
             <button class="session-edit-btn" data-agent="${agent.id}" style="
               background: none; border: 1px solid #333; color: #667;
               font-size: ${t.sessionButton}; padding: 2px 8px; border-radius: 4px;
@@ -150725,46 +150991,60 @@ WARNING: This link could potentially be dangerous`)) {
           align-items: flex-start;
           gap: 14px;
           position: relative;
-          min-height: 200px;
+          min-height: 236px;
         ">
           ${badgeHtml}
-          <div style="
-            flex-shrink: 0;
-            width: 72px;
-            background: ${colorHex}22;
-            border: 1px solid ${colorHex}44;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-            align-self: flex-start;
-            margin-top: 4px;
-          ">
-            <canvas
-              id="overview-sprite-${agent.id}"
-              width="32" height="34"
-              style="image-rendering: pixelated; width: 64px; height: 68px; display: block;"
-            ></canvas>
+          <div style="flex-shrink: 0; width: 96px; display: flex; flex-direction: column; align-items: stretch; gap: 10px;">
+            <div style="
+              width: 96px;
+              background: ${colorHex}22;
+              border: 1px solid ${colorHex}44;
+              border-radius: 10px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              overflow: hidden;
+              align-self: flex-start;
+              padding: 6px 0;
+            ">
+              <canvas
+                id="overview-sprite-${agent.id}"
+                width="32" height="34"
+                style="image-rendering: pixelated; width: 72px; height: 76px; display: block;"
+              ></canvas>
+            </div>
+            <div style="
+              border: 1px solid ${statusDot}66;
+              background: ${statusDot}22;
+              border-radius: 10px;
+              padding: 8px 6px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              text-align: center;
+              min-height: 96px;
+              justify-content: center;
+            ">
+              <div style="font-size: ${t.statusPanelIcon}; line-height: 1;">${statusIcon}</div>
+              <div style="
+                margin-top: 6px;
+                font-size: ${t.statusPanelText};
+                color: ${statusDot};
+                line-height: 1.15;
+                font-weight: 700;
+                white-space: normal;
+                word-break: break-word;
+              ">${statusLabel}</div>
+              ${elapsedHtml}
+              ${queueHtml}
+            </div>
           </div>
           <div style="flex: 3; min-width: 0; display: flex; flex-direction: column; gap: 4px;">
             <div>
-              <div style="font-weight: bold; color: #dde; font-size: ${t.cardTitle};">${agent.name}</div>
+              <div style="font-weight: bold; color: #dde; font-size: ${t.cardTitleLg};">${agent.name}</div>
               <div style="color: #778; font-size: ${t.cardDescription}; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">${agent.description}</div>
             </div>
             <div>
-              <div style="display: flex; align-items: center; flex-wrap: wrap; margin-top: 4px;">
-                <div style="
-                  font-size: ${t.statusText};
-                  color: ${statusDot};
-                  display: flex; align-items: center; gap: 4px;
-                ">
-                  <span style="font-size: ${t.statusDot};">\u25CF</span>
-                  <span>${statusIcon} ${statusLabel}</span>
-                </div>
-                ${elapsedHtml}
-                ${queueHtml}
-              </div>
               ${taskSummaryHtml}
             </div>
             ${toolPipelineHtml}
@@ -150795,6 +151075,10 @@ WARNING: This link could potentially be dangerous`)) {
           context.emitOpenTerminal(agentId);
         },
         handleMetaPanelClick(target, agentId, context) {
+          if (target.closest(".session-new-btn")) {
+            context.startNewSession(agentId);
+            return;
+          }
           if (target.closest(".session-edit-btn") || target.closest(".session-title-display")) {
             context.startSessionMetaEdit(agentId);
           }
@@ -150896,7 +151180,7 @@ WARNING: This link could potentially be dangerous`)) {
           background: ${bgColor};
           border: 1.5px solid ${borderColor};
           border-radius: 10px;
-          padding: 14px 16px;
+          padding: 18px 16px;
           margin-bottom: 8px;
           cursor: ${cursor};
           transition: border-color 0.15s;
@@ -150904,6 +151188,7 @@ WARNING: This link could potentially be dangerous`)) {
           align-items: flex-start;
           gap: 12px;
           position: relative;
+          min-height: 124px;
         ">
           <div style="
             flex-shrink: 0;
@@ -153555,12 +153840,8 @@ WARNING: This link could potentially be dangerous`)) {
           if (this.currentLayout === "default") {
             const officeId = officeManager.currentOfficeId;
             if (officeId) {
-              const seatedAgents = officeManager.getSeatedAgents(officeId);
-              for (const { deskId, agentId } of seatedAgents) {
-                const reserveConfig = RESERVE_AGENTS[deskId];
-                if (!reserveConfig || reserveConfig.id !== agentId) continue;
-                if (AGENTS.find((a) => a.id === agentId)) continue;
-                AGENTS.push(reserveConfig);
+              const restoredSeatedAgents = restoreSeatedReserveAgents(officeManager.getSeatedAgents(officeId));
+              for (const { deskId, agentId } of restoredSeatedAgents) {
                 const desk = this.desks.find((d) => d.agentId === deskId);
                 if (desk) {
                   desk.agentId = agentId;
@@ -155443,165 +155724,1005 @@ WARNING: This link could potentially be dangerous`)) {
     }
   });
 
-  // src/main.ts
-  var require_main = __commonJS({
-    "src/main.ts"() {
-      var import_phaser10 = __toESM(require_phaser());
-      init_BootScene();
-      init_OfficeScene();
-      init_MeetingScene();
-      init_officeManager();
-      init_agents();
-      init_responsiveLayout();
-      init_layouts();
-      init_ToastNotification();
-      init_NotificationService();
-      init_SettingsPanel();
-      init_SpriteCustomizerPanel();
-      init_SpriteGenerator();
-      officeManager.ensureDefaultOffice();
-      function getCurrentLayout() {
-        return officeManager.currentOffice?.config.layout ?? "default";
-      }
-      function getCurrentAgents() {
-        return getLayout(getCurrentLayout()).agents;
-      }
-      function getCurrentAgentTools() {
-        return officeManager.currentOffice?.agentTools || /* @__PURE__ */ new Map();
-      }
-      function normalizeToolName(toolName) {
-        return (toolName ?? "").trim().toLowerCase().replace(/[\s-]+/g, "_");
-      }
-      function isAskUserTool(toolName, status) {
-        const normalized = normalizeToolName(toolName);
-        if (normalized === "ask_user" || normalized === "askuser") return true;
-        const statusText = (status ?? "").toLowerCase();
-        return statusText.includes("waiting for your answer") || statusText.includes("waiting on user input");
-      }
-      function isDonePendingAck(status) {
-        return !!status?.completionPendingAck;
-      }
-      var selectedAgentId = null;
-      var phaserGameRef;
-      var debugMode = false;
-      var currentZoom = parseFloat(localStorage.getItem("agencyOffice:zoomLevel") ?? "0.8");
-      currentZoom = isNaN(currentZoom) || currentZoom < 0.5 || currentZoom > 2 ? 0.8 : currentZoom;
-      var RESIZE_DEBOUNCE_MS = 200;
-      var agentPreloadStatus = /* @__PURE__ */ new Map();
-      var pendingStatusBarUpdate = false;
-      var pendingTerminalContentUpdate = false;
-      function scheduleUiUpdateWithFallback(callback) {
-        let done = false;
-        const runOnce = () => {
-          if (done) return;
-          done = true;
-          callback();
-        };
-        requestAnimationFrame(runOnce);
-        const fallbackDelayMs = document.hidden ? 80 : 200;
-        setTimeout(runOnce, fallbackDelayMs);
-      }
-      function scheduleStatusBarUpdate() {
-        if (pendingStatusBarUpdate) return;
-        pendingStatusBarUpdate = true;
-        scheduleUiUpdateWithFallback(() => {
-          pendingStatusBarUpdate = false;
-          updateStatusBarNow();
-        });
-      }
-      function scheduleTerminalContentUpdate() {
-        if (pendingTerminalContentUpdate) return;
-        pendingTerminalContentUpdate = true;
-        scheduleUiUpdateWithFallback(() => {
-          pendingTerminalContentUpdate = false;
-          updateTerminalContentNow();
-        });
-      }
-      var container = document.getElementById("game-container");
-      container.innerHTML = "";
-      container.style.cssText = "display: flex; flex-direction: column; width: 100%; height: calc(100% - 58px);";
-      var tabsBar = document.createElement("div");
-      tabsBar.id = "office-tabs";
-      tabsBar.style.cssText = `
-  display: flex;
-  align-items: center;
-  background: #1a1a2a;
-  border-bottom: 2px solid #333;
-  padding: 0 16px;
-  height: 72px;
-  flex-shrink: 0;
-  font-size: 22px;
-`;
-      container.appendChild(tabsBar);
-      var mainContent = document.createElement("div");
-      mainContent.style.cssText = "display: flex; flex: 1; min-height: 0;";
-      container.appendChild(mainContent);
-      var officePanel = document.createElement("div");
-      officePanel.id = "office-panel";
-      officePanel.style.cssText = "width: 50%; height: 100%; position: relative;";
-      mainContent.appendChild(officePanel);
-      var terminalPanel = document.createElement("div");
-      terminalPanel.id = "terminal-panel";
-      terminalPanel.style.cssText = `
-  width: 50%;
-  height: 100%;
-  background: #1e1e2e;
-  border-left: 2px solid #333;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-`;
-      mainContent.appendChild(terminalPanel);
-      var currentResponsiveLayout = "default";
-      var resizeDebounceTimer = null;
-      function isMobileModeActive() {
-        return currentResponsiveLayout === "portrait-dashboard";
-      }
-      function applyMobileTopBarVisibility() {
-        const hidden = isMobileModeActive();
-        const ids = ["zoom-bar", "sprite-customizer-btn", "debug-toggle-btn"];
-        for (const id of ids) {
-          const el = document.getElementById(id);
-          if (!el) continue;
-          el.style.display = hidden ? "none" : "";
-        }
-      }
-      function applyResponsiveLayout(layoutKey) {
-        if (layoutKey === currentResponsiveLayout) return;
-        currentResponsiveLayout = layoutKey;
-        if (layoutKey === "portrait-dashboard") {
-          officePanel.style.display = "none";
-          terminalPanel.style.width = "100%";
-          terminalPanel.style.borderLeft = "none";
-        } else {
-          officePanel.style.display = "";
-          terminalPanel.style.width = "50%";
-          terminalPanel.style.borderLeft = "2px solid #333";
-        }
-        if (phaserGameRef) {
-          phaserGameRef.events.emit("layout:change", { layoutKey });
-          if (layoutKey === "default") {
-            const width = officePanel.clientWidth || window.innerWidth / 2;
-            const height = officePanel.clientHeight || window.innerHeight;
-            phaserGameRef.scale.resize(width, height);
-          }
-        }
-        applyMobileTopBarVisibility();
-      }
-      function onWindowResize() {
-        if (resizeDebounceTimer !== null) {
-          window.clearTimeout(resizeDebounceTimer);
-        }
-        resizeDebounceTimer = window.setTimeout(() => {
+  // src/ui/SeriousTerminalController.ts
+  var import_xterm2, import_addon_fit2, SeriousTerminalController;
+  var init_SeriousTerminalController = __esm({
+    "src/ui/SeriousTerminalController.ts"() {
+      "use strict";
+      import_xterm2 = __toESM(require_xterm());
+      import_addon_fit2 = __toESM(require_addon_fit());
+      SeriousTerminalController = class _SeriousTerminalController {
+        constructor(host, options = {}) {
+          this.historyPopover = null;
+          this.terminal = null;
+          this.fitAddon = null;
+          this.resizeObserver = null;
+          this.resizeHandler = null;
+          this.refitTimers = [];
+          this.activeOfficeId = null;
+          this.activeAgentId = null;
+          this.visible = false;
+          this.openedAt = 0;
+          this.sessionId = null;
+          this.activeOptions = null;
+          this.isFullWidth = false;
+          this.host = host;
+          this.onClose = options.onClose;
+          this.isFullWidth = localStorage.getItem(_SeriousTerminalController.FULL_WIDTH_STORAGE_KEY) === "true";
+          this.container = document.createElement("div");
+          this.container.style.cssText = `
+      display: none;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      background: #11131c;
+      color: #d7defa;
+      border-left: 2px solid #2f3f62;
+      font-family: 'Cascadia Code', Consolas, monospace;
+    `;
+          const header = document.createElement("div");
+          header.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 12px 14px;
+      border-bottom: 1px solid #27314e;
+      background: #171b2a;
+      flex-shrink: 0;
+    `;
+          const leftHeader = document.createElement("div");
+          leftHeader.style.cssText = "min-width: 0;";
+          this.titleEl = document.createElement("div");
+          this.titleEl.style.cssText = "font-size: 14px; font-weight: 700; color: #9fc2ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;";
+          this.subtitleEl = document.createElement("div");
+          this.subtitleEl.style.cssText = "font-size: 11px; color: #7f8bad; margin-top: 3px;";
+          leftHeader.appendChild(this.titleEl);
+          leftHeader.appendChild(this.subtitleEl);
+          const rightHeader = document.createElement("div");
+          rightHeader.style.cssText = "display: flex; align-items: center; gap: 6px;";
+          this.statusEl = document.createElement("div");
+          this.statusEl.style.cssText = "font-size: 11px; color: #8ca2db; margin-right: 4px;";
+          const detachBtn = document.createElement("button");
+          detachBtn.textContent = "Detach";
+          detachBtn.style.cssText = this.buttonCss("#2f3754", "#6f8ed8");
+          detachBtn.addEventListener("click", () => {
+            void this.closeView({ detach: true });
+          });
+          const closeBtn = document.createElement("button");
+          closeBtn.textContent = "Close";
+          closeBtn.style.cssText = this.buttonCss("#3a2534", "#c98fbb");
+          closeBtn.addEventListener("click", () => {
+            void this.closeView({ detach: true });
+          });
+          rightHeader.appendChild(this.statusEl);
+          rightHeader.appendChild(detachBtn);
+          rightHeader.appendChild(closeBtn);
+          header.appendChild(leftHeader);
+          header.appendChild(rightHeader);
+          this.terminalOuterEl = document.createElement("div");
+          this.terminalOuterEl.style.cssText = `
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+      background: #0d111b;
+      padding: 10px;
+      box-sizing: border-box;
+    `;
+          this.terminalDivEl = document.createElement("div");
+          this.terminalDivEl.style.cssText = "width: 100%; height: 100%; overflow: hidden;";
+          this.terminalOuterEl.appendChild(this.terminalDivEl);
+          this.terminalOuterEl.addEventListener("mousedown", () => this.terminal?.focus());
+          this.spriteCardEl = document.createElement("div");
+          this.spriteCardEl.style.cssText = `
+      width: 100%;
+      background: #13131f;
+      border-top: 1px solid #252540;
+      font-family: 'Cascadia Code', Consolas, monospace;
+      color: #c8d4ff;
+      display: flex;
+      flex-shrink: 0;
+      justify-content: space-between;
+      align-items: stretch;
+      gap: 24px;
+      min-height: 148px;
+      padding: 16px 24px;
+      box-sizing: border-box;
+    `;
+          const spriteCardLeft = document.createElement("div");
+          spriteCardLeft.style.cssText = "display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1;";
+          const spriteFrame = document.createElement("div");
+          spriteFrame.style.cssText = `
+      width: 72px;
+      background: #2a2a40;
+      border: 1px solid #3a3a58;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      flex-shrink: 0;
+    `;
+          this.spriteCanvasEl = document.createElement("canvas");
+          this.spriteCanvasEl.width = 32;
+          this.spriteCanvasEl.height = 34;
+          this.spriteCanvasEl.style.cssText = `
+      image-rendering: pixelated;
+      width: 64px;
+      height: 68px;
+      display: block;
+    `;
+          spriteFrame.appendChild(this.spriteCanvasEl);
+          const spriteCardText = document.createElement("div");
+          spriteCardText.style.cssText = "display: flex; flex-direction: column; gap: 4px; min-width: 0;";
+          this.spriteNameEl = document.createElement("span");
+          this.spriteNameEl.style.cssText = "font-size: 18px; font-weight: 700; color: #dde; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;";
+          this.spriteSubtitleEl = document.createElement("span");
+          this.spriteSubtitleEl.style.cssText = "font-size: 13px; color: #778; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;";
+          this.sessionTitleEl = document.createElement("span");
+          this.sessionTitleEl.textContent = "Untitled session";
+          this.sessionTitleEl.style.cssText = "font-size: 14px; font-weight: 700; color: #77839f; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;";
+          spriteCardText.appendChild(this.spriteNameEl);
+          spriteCardText.appendChild(this.spriteSubtitleEl);
+          spriteCardText.appendChild(this.sessionTitleEl);
+          spriteCardLeft.appendChild(spriteFrame);
+          spriteCardLeft.appendChild(spriteCardText);
+          const spriteCardRight = document.createElement("div");
+          spriteCardRight.style.cssText = "display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 8px;";
+          const sessionLabel = document.createElement("span");
+          sessionLabel.textContent = "Session ID";
+          sessionLabel.style.cssText = "font-size: 11px; color: #6f7fa9;";
+          this.sessionIdEl = document.createElement("span");
+          this.sessionIdEl.textContent = "--";
+          this.sessionIdEl.style.cssText = "font-size: 12px; color: #8ec3ff; cursor: pointer;";
+          this.sessionIdEl.title = "Copy session ID";
+          this.sessionIdEl.onclick = () => this.copySessionId();
+          spriteCardRight.appendChild(sessionLabel);
+          spriteCardRight.appendChild(this.sessionIdEl);
+          const buttonGrid = document.createElement("div");
+          buttonGrid.style.cssText = `
+      display: grid;
+      grid-template-columns: repeat(2, max-content);
+      gap: 6px;
+      margin-top: 2px;
+    `;
+          const footerBtnCss = this.buttonCss("#2a3a4a", "#4a5a6a");
+          const historyBtn = document.createElement("button");
+          historyBtn.textContent = "Session History";
+          historyBtn.style.cssText = footerBtnCss;
+          historyBtn.onclick = () => {
+            void this.toggleSessionHistory(historyBtn);
+          };
+          buttonGrid.appendChild(historyBtn);
+          const newSessionBtn = document.createElement("button");
+          newSessionBtn.textContent = "New Session";
+          newSessionBtn.style.cssText = footerBtnCss;
+          newSessionBtn.onclick = () => {
+            void this.handleNewSession();
+          };
+          buttonGrid.appendChild(newSessionBtn);
+          const clearHistoryBtn = document.createElement("button");
+          clearHistoryBtn.textContent = "Clear History";
+          clearHistoryBtn.style.cssText = footerBtnCss;
+          clearHistoryBtn.onclick = () => {
+            void this.handleClearHistory();
+          };
+          buttonGrid.appendChild(clearHistoryBtn);
+          const closeSessionBtn = document.createElement("button");
+          closeSessionBtn.textContent = "Close Session";
+          closeSessionBtn.style.cssText = this.buttonCss("#3a2a2a", "#8f5d5d");
+          closeSessionBtn.onclick = () => {
+            void this.handleCloseSession();
+          };
+          buttonGrid.appendChild(closeSessionBtn);
+          this.fullscreenBtn = document.createElement("button");
+          this.fullscreenBtn.textContent = this.isFullWidth ? "Half Width" : "Full Width";
+          this.fullscreenBtn.style.cssText = this.buttonCss("#2a2f4a", "#5a6aa0");
+          this.fullscreenBtn.onclick = () => this.toggleFullWidth();
+          buttonGrid.appendChild(this.fullscreenBtn);
+          const refreshFocusBtn = document.createElement("button");
+          refreshFocusBtn.textContent = "Refresh Focus";
+          refreshFocusBtn.style.cssText = this.buttonCss("#2a3a2a", "#4f7b63");
+          refreshFocusBtn.onclick = () => this.refreshFocusAndGeometry();
+          buttonGrid.appendChild(refreshFocusBtn);
+          spriteCardRight.appendChild(buttonGrid);
+          this.spriteCardEl.appendChild(spriteCardLeft);
+          this.spriteCardEl.appendChild(spriteCardRight);
+          this.ensureXtermStyles();
+          this.container.appendChild(header);
+          this.container.appendChild(this.terminalOuterEl);
+          this.container.appendChild(this.spriteCardEl);
+          this.host.appendChild(this.container);
+          this.createTerminal();
+          if (window.copilotBridge) {
+            window.copilotBridge.onTerminalData((agentId, data) => {
+              if (!this.visible || this.activeAgentId !== agentId) return;
+              this.terminal?.write(data);
+            });
+            window.copilotBridge.onTerminalExit((agentId, exitCode) => {
+              if (!this.visible || this.activeAgentId !== agentId) return;
+              this.terminal?.writeln(`\r
+[terminal exited with code ${exitCode}]`);
+              this.setStatus("Exited");
+            });
+            window.copilotBridge.onSessionMetaUpdated((agentId) => {
+              if (!this.visible || !this.activeOfficeId || this.activeAgentId !== agentId) return;
+              void this.updateSessionTitle(this.activeOfficeId, agentId);
+            });
+          }
+        }
+        static {
+          this.FULL_WIDTH_STORAGE_KEY = "agencyOffice:seriousTerminalFullWidth";
+        }
+        isVisible() {
+          return this.visible;
+        }
+        refreshCardFromOverview() {
+          if (!this.visible || !this.activeAgentId) return;
+          this.renderExactOverviewCard(this.activeAgentId);
+        }
+        async openAgentTerminal(options) {
+          if (!window.copilotBridge || !this.terminal) return;
+          const switchingTarget = this.activeOfficeId !== options.officeId || this.activeAgentId !== options.agentId;
+          if (switchingTarget) {
+            await this.closeView({ detach: true, silent: true });
+          }
+          this.activeOfficeId = options.officeId;
+          this.activeAgentId = options.agentId;
+          this.activeOptions = { ...options };
+          this.visible = true;
+          this.openedAt = Date.now();
+          this.sessionId = null;
+          this.container.style.display = "flex";
+          this.terminal.clear();
+          this.titleEl.textContent = `${options.name} (${options.agentId})`;
+          this.subtitleEl.textContent = options.description;
+          this.updateSpriteCard(options);
+          void this.updateSessionTitle(options.officeId, options.agentId);
+          this.updateSessionIdDisplay();
+          this.setStatus("Opening...");
+          this.applyPanelLayout();
+          this.refitAndResize(options.officeId, options.agentId);
+          try {
+            const exists = await window.copilotBridge.terminalExists(options.officeId, options.agentId);
+            if (!exists) {
+              const dims = this.fitAddon?.proposeDimensions();
+              const startResult = await window.copilotBridge.terminalStart(
+                options.officeId,
+                options.agentId,
+                options.workingDir,
+                dims?.cols,
+                dims?.rows,
+                void 0,
+                options.launchMode || "copilot"
+              );
+              if (!startResult.success) {
+                this.terminal.writeln(`\r
+Failed to start terminal: ${startResult.error || "unknown error"}`);
+                this.setStatus("Start failed");
+                return;
+              }
+              if (startResult.sessionId) {
+                this.sessionId = startResult.sessionId;
+                this.updateSessionIdDisplay();
+              }
+            }
+            const attachResult = await window.copilotBridge.terminalAttach(options.officeId, options.agentId);
+            if (!attachResult.success) {
+              this.terminal.writeln("\r\nFailed to attach terminal session.");
+              this.setStatus("Attach failed");
+              return;
+            }
+            if (attachResult.scrollback) {
+              this.terminal.write(attachResult.scrollback);
+            }
+            const attachedSessionId = await window.copilotBridge.getSessionId(options.officeId, options.agentId);
+            if (attachedSessionId) {
+              this.sessionId = attachedSessionId;
+              this.updateSessionIdDisplay();
+            }
+            this.setStatus(`Attached \xB7 ${this.formatElapsed(this.openedAt)}`);
+            this.terminal.focus();
+            this.debouncedRefit(options.officeId, options.agentId);
+            this.refreshCardFromOverview();
+          } catch (error) {
+            this.terminal.writeln(`\r
+Terminal error: ${error?.message || String(error)}`);
+            this.setStatus("Error");
+            this.refreshCardFromOverview();
+          }
+        }
+        async startNewSession(options) {
+          if (!window.copilotBridge) return;
+          try {
+            await window.copilotBridge.resetSession(options.officeId, options.agentId);
+          } catch {
+          }
+          const isCurrentView = this.visible && this.activeOfficeId === options.officeId && this.activeAgentId === options.agentId;
+          if (isCurrentView) {
+            await this.openAgentTerminal(options);
+            return;
+          }
+          const startResult = await window.copilotBridge.terminalStart(
+            options.officeId,
+            options.agentId,
+            options.workingDir,
+            void 0,
+            void 0,
+            void 0,
+            options.launchMode || "copilot"
+          );
+          if (!startResult.success) {
+            console.warn(
+              `[SeriousTerminalController] Failed to start new session for ${options.agentId}: ${startResult.error || "unknown error"}`
+            );
+          }
+        }
+        async closeView(options = {}) {
+          const { detach = true, silent = false } = options;
+          if (detach && this.activeOfficeId && this.activeAgentId && window.copilotBridge) {
+            try {
+              await window.copilotBridge.terminalDetach(this.activeOfficeId, this.activeAgentId);
+            } catch {
+            }
+          }
+          this.visible = false;
+          this.container.style.display = "none";
+          this.activeOfficeId = null;
+          this.activeAgentId = null;
+          this.activeOptions = null;
+          this.sessionId = null;
+          this.sessionTitleEl.textContent = "Untitled session";
+          this.sessionTitleEl.style.color = "#77839f";
+          this.updateSessionIdDisplay();
+          this.setStatus("");
+          this.clearRefitTimers();
+          this.closeSessionHistoryPopover();
+          this.applyPanelLayout();
+          if (!silent) {
+            this.onClose?.();
+          }
+        }
+        setStatus(text) {
+          this.statusEl.textContent = text;
+        }
+        updateSpriteCard(options) {
+          this.spriteNameEl.textContent = options.name;
+          this.spriteSubtitleEl.textContent = options.description;
+          const colorHex = `#${(options.color ?? 7311064).toString(16).padStart(6, "0")}`;
+          this.spriteNameEl.style.color = colorHex;
+          this.renderAgentSprite(options.agentId, options.color ?? 7311064);
+        }
+        updateSessionIdDisplay() {
+          this.sessionIdEl.textContent = this.sessionId || "--";
+        }
+        renderExactOverviewCard(agentId) {
+          const sourceCard = document.querySelector(`#overview-content .agent-card[data-agent="${agentId}"]`);
+          if (!sourceCard) return;
+          const clonedCard = sourceCard.cloneNode(true);
+          clonedCard.style.marginBottom = "0";
+          clonedCard.style.cursor = "default";
+          const sourceCanvases = sourceCard.querySelectorAll("canvas");
+          const cloneCanvases = clonedCard.querySelectorAll("canvas");
+          cloneCanvases.forEach((node, i) => {
+            const canvas = node;
+            canvas.removeAttribute("id");
+            const src = sourceCanvases[i];
+            const ctx = canvas.getContext("2d");
+            if (!src || !ctx) return;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(src, 0, 0);
+          });
+          this.spriteCardEl.style.display = "block";
+          this.spriteCardEl.style.padding = "10px 10px 12px";
+          this.spriteCardEl.style.minHeight = "0";
+          this.spriteCardEl.style.gap = "0";
+          this.spriteCardEl.style.alignItems = "stretch";
+          this.spriteCardEl.style.justifyContent = "stretch";
+          this.spriteCardEl.innerHTML = "";
+          this.spriteCardEl.appendChild(clonedCard);
+        }
+        async updateSessionTitle(officeId, agentId) {
+          if (!window.copilotBridge?.getSessionMeta) {
+            this.sessionTitleEl.textContent = "Untitled session";
+            this.sessionTitleEl.style.color = "#77839f";
+            return;
+          }
+          try {
+            const meta = await window.copilotBridge.getSessionMeta(officeId, agentId);
+            const title = meta?.title?.trim();
+            if (title) {
+              this.sessionTitleEl.textContent = title;
+              this.sessionTitleEl.style.color = "#c8d4ff";
+            } else {
+              this.sessionTitleEl.textContent = "Untitled session";
+              this.sessionTitleEl.style.color = "#77839f";
+            }
+          } catch {
+            this.sessionTitleEl.textContent = "Untitled session";
+            this.sessionTitleEl.style.color = "#77839f";
+          }
+        }
+        async handleNewSession() {
+          if (!this.activeOptions) return;
+          await this.startNewSession(this.activeOptions);
+          this.closeSessionHistoryPopover();
+        }
+        async handleClearHistory() {
+          if (!window.copilotBridge || !this.activeOfficeId || !this.activeAgentId) return;
+          try {
+            await window.copilotBridge.clearSessionHistory(this.activeOfficeId, this.activeAgentId);
+            this.terminal?.writeln("\r\n[session history cleared]");
+            this.closeSessionHistoryPopover();
+          } catch {
+            this.terminal?.writeln("\r\n[failed to clear session history]");
+          }
+        }
+        async handleCloseSession() {
+          if (!window.copilotBridge || !this.activeOfficeId || !this.activeAgentId) return;
+          try {
+            await window.copilotBridge.resetSession(this.activeOfficeId, this.activeAgentId);
+            this.terminal?.writeln("\r\n[session closed]");
+          } catch {
+            this.terminal?.writeln("\r\n[failed to close session]");
+          }
+          await this.closeView({ detach: true });
+        }
+        async toggleSessionHistory(anchor) {
+          if (!window.copilotBridge || !this.activeOfficeId || !this.activeAgentId) return;
+          if (this.historyPopover) {
+            this.closeSessionHistoryPopover();
+            return;
+          }
+          let history = [];
+          try {
+            history = await window.copilotBridge.getSessionHistory(this.activeOfficeId, this.activeAgentId);
+          } catch {
+            history = [];
+          }
+          const pop = document.createElement("div");
+          pop.style.cssText = `
+      position: absolute;
+      right: 12px;
+      bottom: calc(100% + 8px);
+      width: min(620px, 88vw);
+      max-height: 280px;
+      overflow: auto;
+      background: #101629;
+      border: 1px solid #2f3f62;
+      border-radius: 8px;
+      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
+      padding: 10px 12px;
+      z-index: 10003;
+      color: #c8d4ff;
+      font-size: 12px;
+      white-space: pre-wrap;
+      line-height: 1.4;
+    `;
+          const title = document.createElement("div");
+          title.textContent = `Session History (${history.length})`;
+          title.style.cssText = "font-weight: 700; margin-bottom: 8px; color: #9fc2ff;";
+          pop.appendChild(title);
+          const body = document.createElement("div");
+          if (history.length === 0) {
+            body.textContent = "No history yet.";
+            body.style.cssText = "color: #77839f; font-style: italic;";
+          } else {
+            body.textContent = history.join("\n");
+          }
+          pop.appendChild(body);
+          const closeBtn = document.createElement("button");
+          closeBtn.textContent = "Close";
+          closeBtn.style.cssText = `${this.buttonCss("#2a2f4a", "#5a6aa0")} margin-top: 10px;`;
+          closeBtn.onclick = () => this.closeSessionHistoryPopover();
+          pop.appendChild(closeBtn);
+          this.historyPopover = pop;
+          this.spriteCardEl.style.position = "relative";
+          this.spriteCardEl.appendChild(pop);
+          anchor.blur();
+        }
+        closeSessionHistoryPopover() {
+          if (this.historyPopover?.parentElement) {
+            this.historyPopover.parentElement.removeChild(this.historyPopover);
+          }
+          this.historyPopover = null;
+        }
+        copySessionId() {
+          if (!this.sessionId) return;
+          navigator.clipboard.writeText(this.sessionId).then(() => {
+            const original = this.sessionIdEl.textContent;
+            this.sessionIdEl.textContent = "Copied!";
+            this.sessionIdEl.style.color = "#61d394";
+            setTimeout(() => {
+              this.sessionIdEl.textContent = original;
+              this.sessionIdEl.style.color = "#8ec3ff";
+            }, 900);
+          }).catch(() => {
+          });
+        }
+        renderAgentSprite(seed, baseColor) {
+          const ctx = this.spriteCanvasEl.getContext("2d");
+          if (!ctx) return;
+          ctx.clearRect(0, 0, 32, 34);
+          ctx.imageSmoothingEnabled = false;
+          const color = this.toHex(baseColor);
+          const shade = this.toHex(this.scaleColor(baseColor, 0.72));
+          const accent = this.toHex(this.scaleColor(baseColor, 1.22));
+          const skin = "#f3cfa7";
+          ctx.fillStyle = "#0f1425";
+          ctx.fillRect(0, 0, 32, 34);
+          ctx.fillStyle = shade;
+          ctx.fillRect(8, 16, 16, 14);
+          ctx.fillStyle = color;
+          ctx.fillRect(9, 16, 14, 13);
+          ctx.fillStyle = skin;
+          ctx.fillRect(10, 8, 12, 9);
+          ctx.fillStyle = accent;
+          ctx.fillRect(10, 5, 12, 4);
+          ctx.fillStyle = "#182033";
+          ctx.fillRect(13, 11, 2, 2);
+          ctx.fillRect(17, 11, 2, 2);
+          const seedValue = [...seed].reduce((acc, ch) => acc + ch.charCodeAt(0), 0);
+          const badgeX = seedValue % 2 === 0 ? 5 : 24;
+          ctx.fillStyle = accent;
+          ctx.fillRect(badgeX, 19, 3, 3);
+        }
+        toHex(color) {
+          return `#${color.toString(16).padStart(6, "0")}`;
+        }
+        scaleColor(color, multiplier) {
+          const r = Math.min(255, Math.max(0, Math.round((color >> 16 & 255) * multiplier)));
+          const g = Math.min(255, Math.max(0, Math.round((color >> 8 & 255) * multiplier)));
+          const b = Math.min(255, Math.max(0, Math.round((color & 255) * multiplier)));
+          return r << 16 | g << 8 | b;
+        }
+        ensureXtermStyles() {
+          if (document.getElementById("xterm-styles")) return;
+          const style = document.createElement("style");
+          style.id = "xterm-styles";
+          style.textContent = `
+      .xterm { height: 100%; }
+      .xterm-viewport { overflow-y: auto !important; }
+      #serious-terminal-container .xterm { height: 100%; }
+    `;
+          document.head.appendChild(style);
+        }
+        createTerminal() {
+          this.terminal = new import_xterm2.Terminal({
+            theme: {
+              background: "#0d111b",
+              foreground: "#e0e0e0",
+              cursor: "#00ff88",
+              cursorAccent: "#0d111b",
+              selectionBackground: "#3a5a8a"
+            },
+            fontFamily: "Cascadia Code, Consolas, Monaco, monospace",
+            fontSize: 16,
+            lineHeight: 1.2,
+            cursorBlink: true,
+            cursorStyle: "block",
+            scrollback: 1e4,
+            allowProposedApi: true
+          });
+          this.fitAddon = new import_addon_fit2.FitAddon();
+          this.terminal.loadAddon(this.fitAddon);
+          this.terminalDivEl.id = "serious-terminal-container";
+          this.terminal.open(this.terminalDivEl);
+          this.terminal.attachCustomKeyEventHandler((event) => {
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "v" && event.type === "keydown") {
+              event.preventDefault();
+              event.stopPropagation();
+              navigator.clipboard.readText().then((text) => {
+                if (text) this.terminal?.paste(text);
+              }).catch(() => {
+              });
+              return false;
+            }
+            return true;
+          });
+          this.terminal.onData((data) => {
+            if (!window.copilotBridge || !this.activeOfficeId || !this.activeAgentId) return;
+            void window.copilotBridge.terminalWrite(this.activeOfficeId, this.activeAgentId, data);
+          });
+          this.resizeHandler = () => {
+            if (!this.visible || !this.activeOfficeId || !this.activeAgentId) return;
+            this.debouncedRefit(this.activeOfficeId, this.activeAgentId);
+          };
+          window.addEventListener("resize", this.resizeHandler);
+          this.resizeObserver = new ResizeObserver(() => {
+            if (!this.visible || !this.activeOfficeId || !this.activeAgentId) return;
+            this.debouncedRefit(this.activeOfficeId, this.activeAgentId);
+          });
+          this.resizeObserver.observe(this.terminalDivEl);
+        }
+        refitAndResize(officeId, agentId) {
+          if (!this.fitAddon || !window.copilotBridge) return;
+          this.fitAddon.fit();
+          const dims = this.fitAddon.proposeDimensions();
+          if (!dims) return;
+          void window.copilotBridge.terminalResize(officeId, agentId, dims.cols, dims.rows);
+        }
+        debouncedRefit(officeId, agentId) {
+          this.clearRefitTimers();
+          requestAnimationFrame(() => {
+            this.refitAndResize(officeId, agentId);
+            this.refitTimers.push(setTimeout(() => {
+              this.refitAndResize(officeId, agentId);
+              this.refitTimers.push(setTimeout(() => this.refitAndResize(officeId, agentId), 200));
+            }, 150));
+          });
+        }
+        refreshFocusAndGeometry() {
+          if (!this.visible || !this.activeOfficeId || !this.activeAgentId) return;
+          this.terminal?.focus();
+          this.debouncedRefit(this.activeOfficeId, this.activeAgentId);
+        }
+        toggleFullWidth() {
+          this.isFullWidth = !this.isFullWidth;
+          localStorage.setItem(_SeriousTerminalController.FULL_WIDTH_STORAGE_KEY, String(this.isFullWidth));
+          this.fullscreenBtn.textContent = this.isFullWidth ? "Half Width" : "Full Width";
+          this.applyPanelLayout();
+        }
+        applyPanelLayout() {
+          const officePanel = document.getElementById("office-panel");
+          const terminalPanel = document.getElementById("terminal-panel");
+          const isMobile = window.__copilotOfficeMobileModeActive?.() === true;
+          if (!officePanel || !terminalPanel || isMobile) return;
+          const appMode = document.getElementById("game-container")?.dataset.appMode;
+          if (appMode !== "serious" || !this.visible || !this.isFullWidth) {
+            officePanel.style.display = "flex";
+            officePanel.style.flexDirection = "column";
+            terminalPanel.style.width = "50%";
+            terminalPanel.style.borderLeft = "2px solid #333";
+            return;
+          }
+          officePanel.style.display = "none";
+          terminalPanel.style.width = "100%";
+          terminalPanel.style.borderLeft = "none";
+        }
+        clearRefitTimers() {
+          for (const timer of this.refitTimers) clearTimeout(timer);
+          this.refitTimers.length = 0;
+        }
+        formatElapsed(startTime) {
+          const seconds = Math.floor((Date.now() - startTime) / 1e3);
+          if (seconds < 60) return `${seconds}s`;
+          const mins = Math.floor(seconds / 60);
+          const secs = seconds % 60;
+          return `${mins}m ${secs}s`;
+        }
+        buttonCss(background, border) {
+          return `
+      background: ${background};
+      border: 1px solid ${border};
+      color: #d4dbf9;
+      border-radius: 5px;
+      padding: 6px 10px;
+      font-family: inherit;
+      font-size: 12px;
+      cursor: pointer;
+      white-space: nowrap;
+    `;
+        }
+      };
+    }
+  });
+
+  // src/main.ts
+  var require_main = __commonJS({
+    "src/main.ts"() {
+      var import_phaser10 = __toESM(require_phaser());
+      init_BootScene();
+      init_OfficeScene();
+      init_MeetingScene();
+      init_officeManager();
+      init_agents();
+      init_responsiveLayout();
+      init_layouts();
+      init_ToastNotification();
+      init_NotificationService();
+      init_SettingsPanel();
+      init_SpriteCustomizerPanel();
+      init_SeriousTerminalController();
+      init_SpriteGenerator();
+      officeManager.ensureDefaultOffice();
+      function getCurrentLayout() {
+        return officeManager.currentOffice?.config.layout ?? "default";
+      }
+      function getCurrentAgents() {
+        return getLayout(getCurrentLayout()).agents;
+      }
+      function getCurrentAgentTools() {
+        return officeManager.currentOffice?.agentTools || /* @__PURE__ */ new Map();
+      }
+      function syncActiveRosterForCurrentOffice() {
+        const office = officeManager.currentOffice;
+        if (!office) return;
+        swapActiveAgents(office.config);
+        if (office.config.layout === "default") {
+          restoreSeatedReserveAgents(officeManager.getSeatedAgents(office.config.id));
+        }
+      }
+      function normalizeToolName(toolName) {
+        return (toolName ?? "").trim().toLowerCase().replace(/[\s-]+/g, "_");
+      }
+      function isAskUserTool(toolName, status) {
+        const normalized = normalizeToolName(toolName);
+        if (normalized === "ask_user" || normalized === "askuser") return true;
+        const statusText = (status ?? "").toLowerCase();
+        return statusText.includes("waiting for your answer") || statusText.includes("waiting on user input");
+      }
+      function isDonePendingAck(status) {
+        return !!status?.completionPendingAck;
+      }
+      var selectedAgentId = null;
+      var phaserGameRef;
+      var debugMode = false;
+      var currentZoom = parseFloat(localStorage.getItem("agencyOffice:zoomLevel") ?? "0.8");
+      currentZoom = isNaN(currentZoom) || currentZoom < 0.5 || currentZoom > 2 ? 0.8 : currentZoom;
+      var RESIZE_DEBOUNCE_MS = 200;
+      var APP_MODE_STORAGE_KEY = "agencyOffice:appMode";
+      var SESSION_META_CACHE_STORAGE_KEY = "agencyOffice:sessionMetaCacheByOffice";
+      var OVERVIEW_SPRITE_CACHE_STORAGE_KEY = "agencyOffice:overviewSpriteCache";
+      var PC_TERMINAL_ID2 = "pc-terminal";
+      function sanitizeAppMode(value) {
+        return value === "serious" ? "serious" : "game";
+      }
+      var appMode = sanitizeAppMode(localStorage.getItem(APP_MODE_STORAGE_KEY));
+      function persistAppMode(mode) {
+        try {
+          localStorage.setItem(APP_MODE_STORAGE_KEY, mode);
+        } catch {
+        }
+      }
+      function loadSessionMetaCacheByOffice() {
+        try {
+          const raw = localStorage.getItem(SESSION_META_CACHE_STORAGE_KEY);
+          if (!raw) return {};
+          const parsed = JSON.parse(raw);
+          return parsed && typeof parsed === "object" ? parsed : {};
+        } catch {
+          return {};
+        }
+      }
+      function saveSessionMetaCacheByOffice(cache) {
+        try {
+          localStorage.setItem(SESSION_META_CACHE_STORAGE_KEY, JSON.stringify(cache));
+        } catch {
+        }
+      }
+      function getSessionMetaCacheForOffice(officeId) {
+        const all = loadSessionMetaCacheByOffice();
+        return all[officeId] || {};
+      }
+      function setSessionMetaCacheForOffice(officeId, meta) {
+        const all = loadSessionMetaCacheByOffice();
+        all[officeId] = meta;
+        saveSessionMetaCacheByOffice(all);
+      }
+      function loadOverviewSpriteCache() {
+        try {
+          const raw = localStorage.getItem(OVERVIEW_SPRITE_CACHE_STORAGE_KEY);
+          if (!raw) return {};
+          const parsed = JSON.parse(raw);
+          return parsed && typeof parsed === "object" ? parsed : {};
+        } catch {
+          return {};
+        }
+      }
+      function saveOverviewSpriteCache(cache) {
+        try {
+          localStorage.setItem(OVERVIEW_SPRITE_CACHE_STORAGE_KEY, JSON.stringify(cache));
+        } catch {
+        }
+      }
+      var agentPreloadStatus = /* @__PURE__ */ new Map();
+      var pendingStatusBarUpdate = false;
+      var pendingTerminalContentUpdate = false;
+      var OVERVIEW_SPRITE_MAX_RETRY_ATTEMPTS = 5;
+      var OVERVIEW_SPRITE_RETRY_DELAY_MS = 120;
+      var overviewSpriteRetryTimer = null;
+      var overviewSpriteCache = loadOverviewSpriteCache();
+      var overviewSpriteImageCache = /* @__PURE__ */ new Map();
+      function scheduleUiUpdateWithFallback(callback) {
+        let done = false;
+        const runOnce = () => {
+          if (done) return;
+          done = true;
+          callback();
+        };
+        requestAnimationFrame(runOnce);
+        const fallbackDelayMs = document.hidden ? 80 : 200;
+        setTimeout(runOnce, fallbackDelayMs);
+      }
+      function scheduleStatusBarUpdate() {
+        if (pendingStatusBarUpdate) return;
+        pendingStatusBarUpdate = true;
+        scheduleUiUpdateWithFallback(() => {
+          pendingStatusBarUpdate = false;
+          updateStatusBarNow();
+        });
+      }
+      function scheduleTerminalContentUpdate() {
+        if (pendingTerminalContentUpdate) return;
+        pendingTerminalContentUpdate = true;
+        scheduleUiUpdateWithFallback(() => {
+          pendingTerminalContentUpdate = false;
+          updateTerminalContentNow();
+        });
+      }
+      var container = document.getElementById("game-container");
+      container.innerHTML = "";
+      container.style.cssText = "display: flex; flex-direction: column; width: 100%; height: calc(100% - 58px);";
+      var tabsBar = document.createElement("div");
+      tabsBar.id = "office-tabs";
+      tabsBar.style.cssText = `
+  display: flex;
+  align-items: center;
+  background: #1a1a2a;
+  border-bottom: 2px solid #333;
+  padding: 0 16px;
+  height: 72px;
+  flex-shrink: 0;
+  font-size: 22px;
+`;
+      container.appendChild(tabsBar);
+      var mainContent = document.createElement("div");
+      mainContent.style.cssText = "display: flex; flex: 1; min-height: 0;";
+      container.appendChild(mainContent);
+      var officePanel = document.createElement("div");
+      officePanel.id = "office-panel";
+      officePanel.style.cssText = "width: 50%; height: 100%; position: relative;";
+      mainContent.appendChild(officePanel);
+      var terminalPanel = document.createElement("div");
+      terminalPanel.id = "terminal-panel";
+      terminalPanel.style.cssText = `
+  width: 50%;
+  height: 100%;
+  background: #1e1e2e;
+  border-left: 2px solid #333;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;
+      mainContent.appendChild(terminalPanel);
+      var overviewHost = document.createElement("div");
+      overviewHost.id = "overview-host";
+      overviewHost.style.cssText = `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+`;
+      terminalPanel.appendChild(overviewHost);
+      var terminalHost = document.createElement("div");
+      terminalHost.id = "terminal-host";
+      terminalHost.style.cssText = "display: none; flex: 1; min-height: 0;";
+      terminalPanel.appendChild(terminalHost);
+      var seriousPlaceholder = document.createElement("div");
+      seriousPlaceholder.id = "serious-terminal-placeholder";
+      seriousPlaceholder.style.cssText = `
+  display: none;
+  flex: 1;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  font-family: 'Cascadia Code', Consolas, monospace;
+  text-align: center;
+  color: #95a7d7;
+  background: radial-gradient(circle at top, #222846 0%, #171c2f 50%, #13192a 100%);
+`;
+      seriousPlaceholder.innerHTML = `
+  <div style="max-width: 380px;">
+    <div style="font-size: 34px; margin-bottom: 10px;">\u{1F4BB}</div>
+    <div style="font-size: 18px; color: #c7d7ff; font-weight: 700; margin-bottom: 8px;">No terminal selected</div>
+    <div style="font-size: 12px; line-height: 1.45; color: #8fa3d6;">
+      Select an agent or office PC from the overview on the left to open a command line session.
+    </div>
+  </div>
+`;
+      terminalHost.appendChild(seriousPlaceholder);
+      var currentResponsiveLayout = "default";
+      var resizeDebounceTimer = null;
+      function isMobileModeActive() {
+        return currentResponsiveLayout === "portrait-dashboard";
+      }
+      function applyMobileTopBarVisibility() {
+        const hidden = isMobileModeActive();
+        const ids = ["zoom-bar", "sprite-customizer-btn", "debug-toggle-btn"];
+        for (const id of ids) {
+          const el = document.getElementById(id);
+          if (!el) continue;
+          el.style.display = hidden ? "none" : "";
+        }
+      }
+      function syncMainPanelLayout() {
+        const hideOfficePanel = currentResponsiveLayout === "portrait-dashboard";
+        if (hideOfficePanel) {
+          officePanel.style.display = "none";
+          officePanel.style.flexDirection = "";
+          terminalPanel.style.width = "100%";
+          terminalPanel.style.borderLeft = "none";
+          return;
+        }
+        officePanel.style.display = appMode === "serious" ? "flex" : "";
+        officePanel.style.flexDirection = appMode === "serious" ? "column" : "";
+        terminalPanel.style.width = "50%";
+        terminalPanel.style.borderLeft = "2px solid #333";
+      }
+      function applyResponsiveLayout(layoutKey) {
+        if (layoutKey === currentResponsiveLayout) return;
+        currentResponsiveLayout = layoutKey;
+        syncMainPanelLayout();
+        refreshRightPanelMode();
+        if (phaserGameRef && appMode === "game") {
+          phaserGameRef.events.emit("layout:change", { layoutKey });
+          if (layoutKey === "default") {
+            const width = officePanel.clientWidth || window.innerWidth / 2;
+            const height = officePanel.clientHeight || window.innerHeight;
+            phaserGameRef.scale.resize(width, height);
+          }
+        }
+        applyMobileTopBarVisibility();
+      }
+      function onWindowResize() {
+        if (resizeDebounceTimer !== null) {
+          window.clearTimeout(resizeDebounceTimer);
+        }
+        resizeDebounceTimer = window.setTimeout(() => {
           const next = computeResponsiveLayout(window.innerWidth, window.innerHeight);
           applyResponsiveLayout(next);
-          if (phaserGameRef && currentResponsiveLayout === "default") {
+          if (phaserGameRef && appMode === "game" && currentResponsiveLayout === "default") {
             const width = officePanel.clientWidth || window.innerWidth / 2;
             const height = officePanel.clientHeight || window.innerHeight;
             phaserGameRef.scale.resize(width, height);
           }
         }, RESIZE_DEBOUNCE_MS);
       }
+      function applyAppMode(nextMode, options = {}) {
+        const { persist = false, refreshTabs = true, force = false } = options;
+        if (!force && nextMode === appMode) return;
+        const previousMode = appMode;
+        appMode = nextMode;
+        const selectedAgentBeforeModeSwitch = selectedAgentId;
+        if (previousMode === "serious" && appMode === "game") {
+          void seriousTerminalController?.closeView({ detach: true, silent: true });
+        }
+        if (appMode === "serious") {
+          prewarmOverviewSpriteCacheFromTextures();
+          teardownPhaserGame();
+        } else {
+          ensurePhaserGame();
+        }
+        container.dataset.appMode = appMode;
+        tabsBar.dataset.appMode = appMode;
+        mainContent.dataset.appMode = appMode;
+        officePanel.dataset.appMode = appMode;
+        terminalPanel.dataset.appMode = appMode;
+        overviewHost.dataset.appMode = appMode;
+        terminalHost.dataset.appMode = appMode;
+        syncMainPanelLayout();
+        if (phaserGameRef && appMode === "game" && currentResponsiveLayout === "default") {
+          const width = officePanel.clientWidth || window.innerWidth / 2;
+          const height = officePanel.clientHeight || window.innerHeight;
+          phaserGameRef.scale.resize(width, height);
+        }
+        if (persist) persistAppMode(appMode);
+        if (refreshTabs) renderOfficeTabs();
+        refreshRightPanelMode();
+        updateTerminalContent();
+        updateStatusBar();
+        phaserGameRef?.events.emit("app:mode:changed", { mode: appMode, previousMode });
+        if (appMode === "serious" && selectedAgentBeforeModeSwitch && getSeriousLaunchConfig(selectedAgentBeforeModeSwitch)) {
+          void openAgentTerminal(selectedAgentBeforeModeSwitch);
+        }
+      }
+      function toggleAppMode() {
+        const nextMode = appMode === "game" ? "serious" : "game";
+        applyAppMode(nextMode, { persist: true, refreshTabs: true });
+      }
       applyResponsiveLayout(computeResponsiveLayout(window.innerWidth, window.innerHeight));
       window.addEventListener("resize", onWindowResize);
       if (typeof window !== "undefined") {
@@ -155651,6 +156772,21 @@ WARNING: This link could potentially be dangerous`)) {
       color: #4a4;
     ">+ New Office</div>
     <div style="flex: 1;"></div>
+    <div id="app-mode-toggle-btn" style="
+      padding: 8px 14px;
+      background: ${appMode === "serious" ? "#2f2638" : "#252538"};
+      border: 2px solid ${appMode === "serious" ? "#a66be0" : "#444"};
+      border-radius: 6px;
+      cursor: pointer;
+      font-family: monospace;
+      color: ${appMode === "serious" ? "#d4b6ff" : "#8fb7ff"};
+      font-size: 14px;
+      user-select: none;
+      transition: all 0.2s;
+      margin-right: 8px;
+    " title="Toggle app mode (game/serious)">
+      ${appMode === "serious" ? "\u{1F9E0} Serious Mode" : "\u{1F3AE} Game Mode"}
+    </div>
     <div id="sprite-customizer-btn" style="
       padding: 8px 16px;
       background: #252538;
@@ -155749,12 +156885,16 @@ WARNING: This link could potentially be dangerous`)) {
           });
         });
         document.getElementById("new-office-btn")?.addEventListener("click", showNewOfficeDialog);
+        document.getElementById("app-mode-toggle-btn")?.addEventListener("click", (e) => {
+          e.stopPropagation();
+          toggleAppMode();
+        });
         document.getElementById("debug-toggle-btn")?.addEventListener("click", () => {
           debugMode = !debugMode;
-          phaserGame?.events.emit("debug:toggle", debugMode);
+          phaserGameRef?.events.emit("debug:toggle", debugMode);
           renderOfficeTabs();
           if (!isMobileModeActive()) {
-            phaserGame?.events.emit("game:panel:clicked");
+            phaserGameRef?.events.emit("game:panel:clicked");
           }
           console.log(`[Debug] Debug mode ${debugMode ? "ON" : "OFF"}`);
         });
@@ -155794,19 +156934,20 @@ WARNING: This link could potentially be dangerous`)) {
         applyMobileTopBarVisibility();
       }
       function switchToOffice(officeId) {
-        if (phaserGame?.registry.get("animating")) {
+        if (phaserGameRef?.registry.get("animating")) {
           console.log("[Office] Blocked: animation in progress");
           return;
         }
         selectedAgentId = null;
+        void seriousTerminalController?.closeView({ detach: true });
         officeManager.switchOffice(officeId);
-        const office = officeManager.currentOffice;
-        if (office) swapActiveAgents(office.config);
-        phaserGame?.events.emit("office:switch", officeId, officeManager.currentOffice?.config.workingDirectory);
+        cachedSessionMeta = getSessionMetaCacheForOffice(officeId);
+        syncActiveRosterForCurrentOffice();
+        phaserGameRef?.events.emit("office:switch", officeId, officeManager.currentOffice?.config.workingDirectory);
         renderOfficeTabs();
         updateTerminalContent();
         updateStatusBar();
-        syncAgentStatuses();
+        void reconnectAgentStatuses();
         fetchSessionMeta();
         console.log(`[Office] Switched to office: ${officeManager.currentOffice?.config.name}`);
       }
@@ -156001,8 +157142,8 @@ WARNING: This link could potentially be dangerous`)) {
         nameInput.select();
       }
       renderOfficeTabs();
-      var terminalHeader = document.createElement("div");
-      terminalHeader.style.cssText = `
+      var overviewHeader = document.createElement("div");
+      overviewHeader.style.cssText = `
   padding: 14px 20px;
   background: #141424;
   border-bottom: 2px solid #2a2a4a;
@@ -156012,7 +157153,7 @@ WARNING: This link could potentially be dangerous`)) {
   justify-content: space-between;
   align-items: center;
 `;
-      terminalHeader.innerHTML = `
+      overviewHeader.innerHTML = `
   <div>
     <div id="terminal-title" style="font-size: 18px; font-weight: bold; color: #8af; margin-bottom: 4px;">\u{1F3E2} Office Overview</div>
     <div id="terminal-subtitle" style="font-size: 12px; color: #555;"></div>
@@ -156030,7 +157171,7 @@ WARNING: This link could potentially be dangerous`)) {
     white-space: nowrap;
   ">\u2715 Close Office</button>
 `;
-      terminalPanel.appendChild(terminalHeader);
+      overviewHost.appendChild(overviewHeader);
       document.getElementById("close-office-btn").addEventListener("click", () => {
         const currentId = officeManager.currentOfficeId;
         const office = officeManager.currentOffice;
@@ -156040,9 +157181,9 @@ WARNING: This link could potentially be dangerous`)) {
           switchToOffice("office-0");
         }
       });
-      var terminalContent = document.createElement("div");
-      terminalContent.id = "terminal-content";
-      terminalContent.style.cssText = `
+      var overviewContent = document.createElement("div");
+      overviewContent.id = "terminal-content";
+      overviewContent.style.cssText = `
   flex: 1;
   padding: 16px;
   overflow-y: auto;
@@ -156051,7 +157192,7 @@ WARNING: This link could potentially be dangerous`)) {
   color: #ccc;
   position: relative;
 `;
-      terminalPanel.appendChild(terminalContent);
+      overviewHost.appendChild(overviewContent);
       var statusBar = document.createElement("div");
       statusBar.id = "status-bar";
       statusBar.style.cssText = `
@@ -156097,6 +157238,86 @@ WARNING: This link could potentially be dangerous`)) {
       function getAgentConfig(agentId) {
         return getCurrentAgents().find((a) => a.id === agentId) || AGENTS.find((a) => a.id === agentId);
       }
+      var seriousTerminalController = null;
+      function getSeriousLaunchConfig(agentId) {
+        if (agentId === PC_TERMINAL_ID2) {
+          return {
+            name: "PC TERMINAL",
+            description: "Local Shell",
+            color: 7311064,
+            workingDir: officeManager.getCurrentWorkingDirectory(),
+            launchMode: "shell"
+          };
+        }
+        const agent = getAgentConfig(agentId);
+        if (!agent) return null;
+        return {
+          name: agent.name,
+          description: agent.description,
+          color: agent.color,
+          workingDir: agent.workingDir || officeManager.getCurrentWorkingDirectory(),
+          launchMode: "copilot"
+        };
+      }
+      function refreshRightPanelMode() {
+        const seriousDesktop = appMode === "serious" && currentResponsiveLayout === "default";
+        const desiredOverviewParent = seriousDesktop ? officePanel : terminalPanel;
+        if (overviewHost.parentElement !== desiredOverviewParent) {
+          desiredOverviewParent.appendChild(overviewHost);
+        }
+        if (appMode === "serious") {
+          const seriousVisible = !!seriousTerminalController?.isVisible();
+          if (seriousDesktop) {
+            overviewHost.style.display = "flex";
+            terminalHost.style.display = "flex";
+            seriousPlaceholder.style.display = seriousVisible ? "none" : "flex";
+            return;
+          }
+          if (seriousVisible) {
+            overviewHost.style.display = "none";
+            terminalHost.style.display = "flex";
+            seriousPlaceholder.style.display = "none";
+            return;
+          }
+          overviewHost.style.display = "flex";
+          terminalHost.style.display = "none";
+          seriousPlaceholder.style.display = "none";
+          return;
+        }
+        overviewHost.style.display = "flex";
+        terminalHost.style.display = "none";
+        seriousPlaceholder.style.display = "none";
+      }
+      async function openAgentTerminal(agentId) {
+        if (appMode === "game") {
+          phaserGameRef?.events.emit("open:agent:terminal", agentId);
+          return;
+        }
+        const launchConfig = getSeriousLaunchConfig(agentId);
+        if (!launchConfig || !window.copilotBridge) return;
+        const officeId = officeManager.currentOfficeId || "office-0";
+        const officeStatus = officeManager.getAgentStatus(officeId, agentId);
+        if (officeStatus?.state === "slacking") {
+          officeManager.setAgentStarting(officeId, agentId);
+          phaserGameRef?.events.emit("agent:status:changed", agentId);
+          updateStatusBar();
+          updateTerminalContent();
+        }
+        await seriousTerminalController?.openAgentTerminal({
+          officeId,
+          agentId,
+          ...launchConfig
+        });
+        refreshRightPanelMode();
+      }
+      seriousTerminalController = new SeriousTerminalController(terminalHost, {
+        onClose: () => {
+          selectedAgentId = null;
+          refreshRightPanelMode();
+          updateStatusBar();
+          updateTerminalContent();
+        }
+      });
       var notificationService = new NotificationService(
         toastManager,
         (agentId) => {
@@ -156109,7 +157330,7 @@ WARNING: This link could potentially be dangerous`)) {
           const oId = officeManager.currentOfficeId;
           if (oId) officeManager.clearUnread(oId, agentId);
           updateTerminalContent();
-          phaserGame?.events.emit("open:agent:terminal", agentId);
+          void openAgentTerminal(agentId);
         }
       );
       function notifyAgent(agentId, eventType, context) {
@@ -156158,9 +157379,16 @@ WARNING: This link could potentially be dangerous`)) {
       var lastStatusBarHtml = "";
       var cachedSessionMeta = {};
       function fetchSessionMeta() {
+        const officeId = officeManager.currentOfficeId || "office-0";
+        const cached = getSessionMetaCacheForOffice(officeId);
+        if (Object.keys(cached).length > 0) {
+          cachedSessionMeta = cached;
+          updateTerminalContent();
+        }
         if (!window.copilotBridge?.getAllSessionMeta) return;
-        window.copilotBridge.getAllSessionMeta(officeManager.currentOfficeId || "office-0").then((meta) => {
+        window.copilotBridge.getAllSessionMeta(officeId).then((meta) => {
           cachedSessionMeta = meta || {};
+          setSessionMetaCacheForOffice(officeId, cachedSessionMeta);
           updateTerminalContent();
         }).catch(() => {
         });
@@ -156169,6 +157397,7 @@ WARNING: This link could potentially be dangerous`)) {
         scheduleTerminalContentUpdate();
       }
       function updateTerminalContentNow() {
+        syncActiveRosterForCurrentOffice();
         const agentTools = getCurrentAgentTools();
         const office = officeManager.currentOffice;
         const closeBtn = document.getElementById("close-office-btn");
@@ -156193,47 +157422,135 @@ WARNING: This link could potentially be dangerous`)) {
         });
         if (html !== lastTerminalContentHtml) {
           lastTerminalContentHtml = html;
-          terminalContent.innerHTML = html;
-          drawOverviewSprites();
+          overviewContent.innerHTML = html;
+        }
+        drawOverviewSprites();
+        if (appMode === "serious") {
+          seriousTerminalController?.refreshCardFromOverview();
         }
       }
       function updateStatusBar() {
         scheduleStatusBarUpdate();
       }
-      function drawOverviewSprites() {
-        setTimeout(() => {
-          if (!phaserGameRef) return;
+      function clearOverviewSpriteRetry() {
+        if (overviewSpriteRetryTimer) {
+          clearTimeout(overviewSpriteRetryTimer);
+          overviewSpriteRetryTimer = null;
+        }
+      }
+      function drawCachedOverviewSprite(canvas, textureKey) {
+        const dataUrl = overviewSpriteCache[textureKey];
+        if (!dataUrl) return false;
+        let img = overviewSpriteImageCache.get(textureKey);
+        if (!img || img.src !== dataUrl) {
+          img = new Image();
+          img.src = dataUrl;
+          overviewSpriteImageCache.set(textureKey, img);
+        }
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return true;
+        const drawNow = () => {
+          if (!img) return;
+          ctx.imageSmoothingEnabled = false;
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        };
+        if (!img.complete || img.naturalWidth === 0) {
+          img.onload = () => drawNow();
+          return true;
+        }
+        drawNow();
+        return true;
+      }
+      function updateOverviewSpriteCacheFromCanvas(canvas, textureKey) {
+        try {
+          const dataUrl = canvas.toDataURL("image/png");
+          if (overviewSpriteCache[textureKey] !== dataUrl) {
+            overviewSpriteCache = { ...overviewSpriteCache, [textureKey]: dataUrl };
+            saveOverviewSpriteCache(overviewSpriteCache);
+            const img = new Image();
+            img.src = dataUrl;
+            overviewSpriteImageCache.set(textureKey, img);
+          }
+        } catch {
+        }
+      }
+      function drawTextureToOverviewCanvas(canvas, textureKey) {
+        if (!phaserGameRef) {
+          return drawCachedOverviewSprite(canvas, textureKey);
+        }
+        const texture = phaserGameRef.textures.get(textureKey);
+        if (!texture || texture.key === "__MISSING") {
+          return drawCachedOverviewSprite(canvas, textureKey);
+        }
+        const source = texture.getSourceImage();
+        if (!source) {
+          return drawCachedOverviewSprite(canvas, textureKey);
+        }
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return true;
+        const sourceWidth = source instanceof HTMLImageElement ? source.naturalWidth || source.width : source.width;
+        const sourceHeight = source instanceof HTMLImageElement ? source.naturalHeight || source.height : source.height;
+        ctx.imageSmoothingEnabled = false;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        if (sourceWidth > canvas.width || sourceHeight > canvas.height) {
+          ctx.drawImage(source, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
+        } else {
+          ctx.drawImage(source, 0, 0);
+        }
+        updateOverviewSpriteCacheFromCanvas(canvas, textureKey);
+        return true;
+      }
+      function prewarmOverviewSpriteCacheFromTextures() {
+        if (!phaserGameRef) return;
+        const textureKeys = getCurrentAgents().map((agent) => agent.sprite);
+        if (!textureKeys.includes("desktop_pc")) textureKeys.push("desktop_pc");
+        for (const textureKey of textureKeys) {
+          const texture = phaserGameRef.textures.get(textureKey);
+          if (!texture || texture.key === "__MISSING") continue;
+          const source = texture.getSourceImage();
+          if (!source) continue;
+          const scratch = document.createElement("canvas");
+          scratch.width = textureKey === "desktop_pc" ? 32 : 32;
+          scratch.height = textureKey === "desktop_pc" ? 32 : 34;
+          const ctx = scratch.getContext("2d");
+          if (!ctx) continue;
+          const sourceWidth = source instanceof HTMLImageElement ? source.naturalWidth || source.width : source.width;
+          const sourceHeight = source instanceof HTMLImageElement ? source.naturalHeight || source.height : source.height;
+          ctx.imageSmoothingEnabled = false;
+          ctx.clearRect(0, 0, scratch.width, scratch.height);
+          if (sourceWidth > scratch.width || sourceHeight > scratch.height) {
+            ctx.drawImage(source, 0, 0, scratch.width, scratch.height, 0, 0, scratch.width, scratch.height);
+          } else {
+            ctx.drawImage(source, 0, 0);
+          }
+          updateOverviewSpriteCacheFromCanvas(scratch, textureKey);
+        }
+      }
+      function drawOverviewSprites(attempt = 0) {
+        clearOverviewSpriteRetry();
+        requestAnimationFrame(() => {
+          let missingTexture = false;
           for (const agent of getCurrentAgents()) {
             const canvas = document.getElementById(`overview-sprite-${agent.id}`);
             if (!canvas) continue;
-            const ctx = canvas.getContext("2d");
-            if (!ctx) continue;
-            const texture = phaserGameRef.textures.get(agent.sprite);
-            if (!texture || texture.key === "__MISSING") continue;
-            const source = texture.getSourceImage();
-            if (source) {
-              ctx.imageSmoothingEnabled = false;
-              ctx.clearRect(0, 0, canvas.width, canvas.height);
-              ctx.drawImage(source, 0, 0);
-            }
+            const drawn = drawTextureToOverviewCanvas(canvas, agent.sprite);
+            if (!drawn) missingTexture = true;
           }
           const pcCanvas = document.getElementById("overview-sprite-pc-terminal");
           if (pcCanvas) {
-            const ctx = pcCanvas.getContext("2d");
-            if (!ctx) return;
-            const texture = phaserGameRef.textures.get("desktop_pc");
-            if (!texture || texture.key === "__MISSING") return;
-            const source = texture.getSourceImage();
-            if (source) {
-              ctx.imageSmoothingEnabled = false;
-              ctx.clearRect(0, 0, pcCanvas.width, pcCanvas.height);
-              ctx.drawImage(source, 0, 0);
-            }
+            const drawn = drawTextureToOverviewCanvas(pcCanvas, "desktop_pc");
+            if (!drawn) missingTexture = true;
           }
-        }, 50);
+          if (missingTexture && phaserGameRef && attempt < OVERVIEW_SPRITE_MAX_RETRY_ATTEMPTS) {
+            overviewSpriteRetryTimer = setTimeout(() => {
+              drawOverviewSprites(attempt + 1);
+            }, OVERVIEW_SPRITE_RETRY_DELAY_MS);
+          }
+        });
       }
       function setupTerminalClickHandler() {
-        terminalContent.addEventListener("click", (e) => {
+        overviewHost.addEventListener("click", (e) => {
           const target = e.target;
           const layout = getLayout(getCurrentLayout());
           const metaPanel = target.closest(".session-meta-panel");
@@ -156242,7 +157559,10 @@ WARNING: This link could potentially be dangerous`)) {
             const agentId = metaPanel.dataset.agent;
             if (!agentId) return;
             layout.clickHandler.handleMetaPanelClick(target, agentId, {
-              startSessionMetaEdit
+              startSessionMetaEdit,
+              startNewSession: (id) => {
+                void startSessionFromOverview(id);
+              }
             });
             return;
           }
@@ -156260,21 +157580,58 @@ WARNING: This link could potentially be dangerous`)) {
               },
               updateContent: updateTerminalContent,
               emitOpenTerminal: (id) => {
-                phaserGame?.events.emit("open:agent:terminal", id);
+                void openAgentTerminal(id);
               }
             });
           }
         });
       }
+      async function startSessionFromOverview(agentId) {
+        if (!window.copilotBridge) return;
+        const officeId = officeManager.currentOfficeId || "office-0";
+        const launchConfig = getSeriousLaunchConfig(agentId);
+        if (!launchConfig) return;
+        cachedSessionMeta[agentId] = { title: "" };
+        setSessionMetaCacheForOffice(officeId, cachedSessionMeta);
+        updateTerminalContent();
+        try {
+          if (appMode === "serious" && seriousTerminalController) {
+            await seriousTerminalController.startNewSession({
+              officeId,
+              agentId,
+              ...launchConfig
+            });
+          } else {
+            await window.copilotBridge.resetSession(officeId, agentId);
+            await window.copilotBridge.terminalStart(
+              officeId,
+              agentId,
+              launchConfig.workingDir,
+              void 0,
+              void 0,
+              void 0,
+              launchConfig.launchMode
+            );
+          }
+        } catch (error) {
+          console.warn(`[Office] Failed to start new session from overview for ${agentId}:`, error);
+        }
+        officeManager.setAgentStarting(officeId, agentId);
+        phaserGameRef?.events.emit("agent:status:changed", agentId);
+        updateStatusBar();
+        updateTerminalContent();
+      }
       function startSessionMetaEdit(agentId) {
-        const panel = terminalContent.querySelector(`.session-meta-panel[data-agent="${agentId}"]`);
+        const panel = overviewHost.querySelector(`.session-meta-panel[data-agent="${agentId}"]`);
         if (!panel) return;
         const meta = cachedSessionMeta[agentId] || { title: "" };
         const titleEl = panel.querySelector(".session-title-display");
         if (titleEl) {
           replaceWithInput(titleEl, meta.title, "Session title...", 80, async (value) => {
-            await window.copilotBridge.setSessionMeta(officeManager.currentOfficeId || "office-0", agentId, { title: value });
+            const officeId = officeManager.currentOfficeId || "office-0";
+            await window.copilotBridge.setSessionMeta(officeId, agentId, { title: value });
             cachedSessionMeta[agentId] = { title: value };
+            setSessionMetaCacheForOffice(officeId, cachedSessionMeta);
             updateTerminalContent();
           });
         }
@@ -156347,7 +157704,7 @@ WARNING: This link could potentially be dangerous`)) {
             console.log(`[Office] Status: ${agentId} \u2192 thinking (${toolName})`);
             notifyAgent(agentId, "toolStart", { toolName });
           }
-          phaserGame?.events.emit("agent:tool:start", agentId, toolName, status);
+          phaserGameRef?.events.emit("agent:tool:start", agentId, toolName, status);
           updateTerminalContent();
           updateStatusBar();
         });
@@ -156366,7 +157723,12 @@ WARNING: This link could potentially be dangerous`)) {
             officeManager.pushRecentAction(officeId, agentId, completedToolName, "completed");
             notifyAgent(agentId, "toolComplete", { toolName: completedToolName });
             if (remaining.length === 0) {
-              officeManager.setAgentReady(officeId, agentId);
+              const currentStatus = officeManager.getAgentStatus(officeId, agentId);
+              if (currentStatus?.subState === "thinking") {
+                officeManager.setAgentThinking(officeId, agentId, currentStatus.thinkingDetail ?? "Processing...");
+              } else {
+                officeManager.setAgentReady(officeId, agentId);
+              }
             } else if (remaining.some((t) => isAskUserTool(t.name, t.status))) {
               officeManager.setAgentWaiting(officeId, agentId);
             } else {
@@ -156374,7 +157736,7 @@ WARNING: This link could potentially be dangerous`)) {
               officeManager.setAgentThinking(officeId, agentId, `${last.name}`);
             }
           }
-          phaserGame?.events.emit("agent:status:changed", agentId);
+          phaserGameRef?.events.emit("agent:status:changed", agentId);
           updateTerminalContent();
           updateStatusBar();
         });
@@ -156396,7 +157758,7 @@ WARNING: This link could potentially be dangerous`)) {
             }
             notifyAgent(agentId, "turnEnd");
           }
-          phaserGame?.events.emit("agent:status:changed", agentId);
+          phaserGameRef?.events.emit("agent:status:changed", agentId);
           updateTerminalContent();
           updateStatusBar();
         });
@@ -156413,7 +157775,7 @@ WARNING: This link could potentially be dangerous`)) {
           officeManager.setAgentThinking(officeId, agentId, "Processing...");
           console.log(`[Office] Status: ${agentId} \u2192 thinking (turn start)`);
           notifyAgent(agentId, "turnStart");
-          phaserGame?.events.emit("agent:status:changed", agentId);
+          phaserGameRef?.events.emit("agent:status:changed", agentId);
           updateTerminalContent();
           updateStatusBar();
         });
@@ -156428,12 +157790,14 @@ WARNING: This link could potentially be dangerous`)) {
           }
           officeManager.setAgentThinking(officeId, agentId, "Processing...");
           console.log(`[Office] Status: ${agentId} \u2192 thinking (user message)`);
-          phaserGame?.events.emit("agent:status:changed", agentId);
+          phaserGameRef?.events.emit("agent:status:changed", agentId);
           updateTerminalContent();
         });
         window.copilotBridge.onSessionMetaUpdated((agentId, meta) => {
           console.log(`[Office] Session meta updated for ${agentId}: "${meta.title}"`);
+          const officeId = officeManager.currentOfficeId || "office-0";
           cachedSessionMeta[agentId] = meta;
+          setSessionMetaCacheForOffice(officeId, cachedSessionMeta);
           updateTerminalContent();
         });
         window.copilotBridge.onTerminalPreloadStatus((agentId, status) => {
@@ -156459,17 +157823,45 @@ WARNING: This link could potentially be dangerous`)) {
               notifyAgent(agentId, "sessionError");
             }
           }
-          phaserGame?.events.emit("agent:status:changed", agentId);
+          phaserGameRef?.events.emit("agent:status:changed", agentId);
           updateStatusBar();
           updateTerminalContent();
         });
       }
       var syncInProgress = false;
-      async function syncAgentStatuses() {
-        if (!window.copilotBridge || syncInProgress) return;
+      var syncStartedAt = 0;
+      var SYNC_LOCK_TIMEOUT_MS = 15e3;
+      var STALE_IN_TURN_THINKING_TIMEOUT_MS = 9e4;
+      var THINKING_TO_READY_GRACE_MS = 7e3;
+      var SYNC_WAIT_POLL_MS = 50;
+      async function waitForSyncIdle(timeoutMs = SYNC_LOCK_TIMEOUT_MS) {
+        const startedAt = Date.now();
+        while (syncInProgress && Date.now() - startedAt < timeoutMs) {
+          await new Promise((resolve) => setTimeout(resolve, SYNC_WAIT_POLL_MS));
+        }
+      }
+      async function syncAgentStatuses(force = false) {
+        if (!window.copilotBridge) return;
+        if (syncInProgress) {
+          if (force) {
+            await waitForSyncIdle();
+            if (syncInProgress) {
+              console.warn(`[Office] syncAgentStatuses lock held for >${SYNC_LOCK_TIMEOUT_MS / 1e3}s during forced sync \u2014 force-releasing`);
+              syncInProgress = false;
+            }
+          } else {
+            if (syncStartedAt && Date.now() - syncStartedAt > SYNC_LOCK_TIMEOUT_MS) {
+              console.warn(`[Office] syncAgentStatuses lock held for >${SYNC_LOCK_TIMEOUT_MS / 1e3}s \u2014 force-releasing`);
+              syncInProgress = false;
+            } else {
+              return;
+            }
+          }
+        }
         const officeId = officeManager.currentOfficeId;
         if (!officeId) return;
         syncInProgress = true;
+        syncStartedAt = Date.now();
         try {
           const statuses = await window.copilotBridge.queryAgentStatuses(officeId);
           let changed = false;
@@ -156480,6 +157872,11 @@ WARNING: This link could potentially be dangerous`)) {
             const current = officeManager.getAgentStatus(officeId, agent.id);
             const activeTools = getCurrentAgentTools().get(agent.id) || [];
             const waitingToolActive = activeTools.some((t) => isAskUserTool(t.name, t.status));
+            const thinkingSince = current?.subState === "thinking" ? current.activityStartTime : null;
+            const thinkingAgeMs = thinkingSince ? now - thinkingSince : null;
+            const staleInTurnThinking = Boolean(
+              current?.subState === "thinking" && thinkingSince && now - thinkingSince > STALE_IN_TURN_THINKING_TIMEOUT_MS && activeTools.length === 0
+            );
             if (current?.subState === "starting" && current.activityStartTime && now - current.activityStartTime > STARTING_TIMEOUT_MS) {
               console.warn(`[Office] Agent ${agent.id} stuck in starting for >${STARTING_TIMEOUT_MS / 1e3}s \u2014 transitioning to error`);
               officeManager.setAgentError(officeId, agent.id, "Startup timed out");
@@ -156494,7 +157891,11 @@ WARNING: This link could potentially be dangerous`)) {
                     changed = true;
                   }
                 } else if (serverStatus.inTurn) {
-                  if (!current || current.subState !== "thinking" && current.subState !== "waiting") {
+                  if (staleInTurnThinking) {
+                    console.warn(`[Office] Agent ${agent.id} stale inTurn for >${STALE_IN_TURN_THINKING_TIMEOUT_MS / 1e3}s \u2014 resetting to ready`);
+                    officeManager.setAgentReady(officeId, agent.id);
+                    changed = true;
+                  } else if (!current || current.subState !== "thinking" && current.subState !== "waiting") {
                     officeManager.setTaskSummary(officeId, agent.id, "Processing...");
                     officeManager.setAgentThinking(officeId, agent.id, "Processing...");
                     changed = true;
@@ -156506,6 +157907,9 @@ WARNING: This link could potentially be dangerous`)) {
                   officeManager.setAgentReady(officeId, agent.id);
                   changed = true;
                 } else if (current.subState === "thinking" && !serverStatus.inTurn) {
+                  if (thinkingAgeMs !== null && thinkingAgeMs < THINKING_TO_READY_GRACE_MS) {
+                    continue;
+                  }
                   console.warn(`[Office] Agent ${agent.id} stuck in thinking but server reports idle \u2014 resetting to ready`);
                   const agentTools = getCurrentAgentTools();
                   if (agentTools.has(agent.id)) {
@@ -156529,7 +157933,7 @@ WARNING: This link could potentially be dangerous`)) {
           }
           if (changed) {
             for (const agent of getCurrentAgents()) {
-              phaserGame?.events.emit("agent:status:changed", agent.id);
+              phaserGameRef?.events.emit("agent:status:changed", agent.id);
             }
             updateTerminalContent();
             updateStatusBar();
@@ -156549,8 +157953,27 @@ WARNING: This link could potentially be dangerous`)) {
         pendingTerminalContentUpdate = false;
         updateStatusBarNow();
         updateTerminalContentNow();
+        drawOverviewSprites();
         phaserGameRef?.events.emit("agent:status:changed");
-        void syncAgentStatuses();
+        void reconnectAgentStatuses();
+      }
+      async function reconnectAgentStatuses() {
+        if (!window.copilotBridge) return;
+        const officeId = officeManager.currentOfficeId;
+        if (!officeId) return;
+        await waitForSyncIdle();
+        try {
+          const statuses = await window.copilotBridge.queryAgentStatuses(officeId);
+          for (const [agentId, info] of Object.entries(statuses)) {
+            if (info.alive) {
+              await window.copilotBridge.terminalAttach(officeId, agentId).catch(() => {
+              });
+            }
+          }
+        } catch (e) {
+          console.warn("[Office] Failed to reconnect agent viewers:", e);
+        }
+        await syncAgentStatuses(true);
       }
       var ELAPSED_TICK_MS = 1e3;
       setInterval(() => {
@@ -156579,6 +158002,7 @@ WARNING: This link could potentially be dangerous`)) {
         }
       }, ELAPSED_TICK_MS);
       function updateStatusBarNow() {
+        syncActiveRosterForCurrentOffice();
         const office = officeManager.currentOffice;
         const agents = office ? Array.from(office.agents.values()) : [];
         const officeName = officeManager.currentOffice?.config.name || "No Office";
@@ -156610,6 +158034,17 @@ WARNING: This link could potentially be dangerous`)) {
       cursor: pointer;
       margin-right: 24px;
     ">\u27F3 Reset All Sessions</button>
+    <button id="reconnect-statuses-btn" style="
+      background: #1a2a2a;
+      border: 1px solid #4a8;
+      color: #8f8;
+      font-family: monospace;
+      font-size: 14px;
+      padding: 4px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-right: 24px;
+    ">\u{1F50C} Re-connect Statuses</button>
     <span style="color: #666; font-size: 10px;">WASD: Walk | Shift: Run | Space: Talk | F10: Close terminal</span>
   `;
         if (html !== lastStatusBarHtml) {
@@ -156629,60 +158064,37 @@ WARNING: This link could potentially be dangerous`)) {
               btn.textContent = "\u27F3 Reset All Sessions";
             }
           });
+          document.getElementById("reconnect-statuses-btn")?.addEventListener("click", async () => {
+            const btn = document.getElementById("reconnect-statuses-btn");
+            if (btn) {
+              btn.disabled = true;
+              btn.textContent = "\u{1F50C} Reconnecting...";
+            }
+            await reconnectAgentStatuses();
+            if (btn) {
+              btn.disabled = false;
+              btn.textContent = "\u{1F50C} Re-connect Statuses";
+            }
+          });
         }
       }
-      updateStatusBar();
       setupTerminalClickHandler();
-      updateTerminalContent();
-      fetchSessionMeta();
-      var phaserGame = new import_phaser10.default.Game({
-        type: import_phaser10.default.AUTO,
-        parent: officePanel,
-        width: officePanel.clientWidth || window.innerWidth / 2,
-        height: officePanel.clientHeight || window.innerHeight,
-        backgroundColor: "#1a1a2e",
-        physics: { default: "arcade", arcade: { debug: false } },
-        scene: [BootScene, OfficeScene, MeetingScene]
-      });
-      phaserGameRef = phaserGame;
-      officePanel.addEventListener("click", () => {
-        const canvas = officePanel.querySelector("canvas");
-        canvas?.focus();
-      });
-      officePanel.addEventListener("mousedown", () => {
-        if (isMobileModeActive()) return;
-        console.log("[main] game panel mousedown \u2014 emitting game:panel:clicked");
-        phaserGame?.events.emit("game:panel:clicked");
-      });
-      phaserGame.events.once("ready", () => {
-        drawOverviewSprites();
-        phaserGame.events.emit("layout:change", { layoutKey: currentResponsiveLayout });
-      });
-      window.addEventListener("focus", () => {
-        catchUpStatusViews("window focus");
-      });
-      document.addEventListener("visibilitychange", () => {
-        if (!document.hidden) {
-          catchUpStatusViews("document visible");
-        }
-      });
-      phaserGame.events.on("agent:session:closed", (agentId) => {
+      function onAgentSessionClosed(agentId) {
         const officeId = officeManager.currentOfficeId;
         if (officeId) officeManager.setAgentSlacking(officeId, agentId);
-        phaserGame?.events.emit("agent:status:changed", agentId);
+        phaserGameRef?.events.emit("agent:status:changed", agentId);
         updateTerminalContent();
         updateStatusBar();
-      });
-      phaserGame.events.on("agent:status:changed", () => {
+      }
+      function onAgentStatusChanged() {
         updateTerminalContent();
         updateStatusBar();
-      });
-      phaserGame.events.on("agent:reattached", (agentId) => {
+      }
+      function onAgentReattached(agentId) {
         console.log(`[Office] Agent reattached: ${agentId}`);
-        syncAgentStatuses();
-      });
-      phaserGame.events.on("bgm:started", onBgmStarted);
-      phaserGame.events.on("fleet:office:created", async (officeId, sourceOfficeId) => {
+        void syncAgentStatuses();
+      }
+      async function onFleetOfficeCreated(officeId, sourceOfficeId) {
         console.log(`[Office] Fleet V-Team office created: ${officeId} (source: ${sourceOfficeId ?? "none"})`);
         if (sourceOfficeId && window.copilotBridge?.transferSession) {
           try {
@@ -156693,11 +158105,11 @@ WARNING: This link could potentially be dangerous`)) {
           }
         }
         if (sourceOfficeId) {
-          phaserGame?.events.emit("fleet:source-office", { sourceOfficeId });
+          phaserGameRef?.events.emit("fleet:source-office", { sourceOfficeId });
         }
         switchToOffice(officeId);
-      });
-      phaserGame.events.on("fleet:deploy-requested", async (data) => {
+      }
+      async function onFleetDeployRequested(data) {
         console.log(`[Fleet] Deploy requested: "${data.officeName}" from office ${data.sourceOfficeId}`);
         const fleetOffice = officeManager.createOffice(data.officeName, ".", "fleet-vteam");
         const officeId = fleetOffice.config.id;
@@ -156713,24 +158125,96 @@ WARNING: This link could potentially be dangerous`)) {
           console.warn("[Fleet] copilotBridge.transferSession not available");
         }
         data.resolve?.();
-        phaserGame?.events.emit("fleet:source-office", { sourceOfficeId: data.sourceOfficeId, prompt: data.prompt });
+        phaserGameRef?.events.emit("fleet:source-office", { sourceOfficeId: data.sourceOfficeId, prompt: data.prompt });
         switchToOffice(officeId);
-      });
-      phaserGame.events.on("fleet:status", (status) => {
+      }
+      function onFleetStatus(status) {
         const subtitle = document.getElementById("terminal-subtitle");
         if (subtitle && officeManager.currentOffice?.config.layout === "fleet-vteam") {
           subtitle.textContent = `Fleet: ${status.active} active \xB7 ${status.completed} done \xB7 ${status.failed} failed / ${status.total} total`;
         }
         updateTerminalContent();
-      });
-      phaserGame.events.on("fleet:complete", () => {
+      }
+      function onFleetComplete() {
         console.log("[Fleet] All sub-agents complete");
         const subtitle = document.getElementById("terminal-subtitle");
         if (subtitle) {
           subtitle.textContent = "\u2705 Fleet complete!";
         }
         updateTerminalContent();
+      }
+      var officePanelListenersBound = false;
+      function bindOfficePanelListeners() {
+        if (officePanelListenersBound) return;
+        officePanelListenersBound = true;
+        officePanel.addEventListener("click", () => {
+          const canvas = officePanel.querySelector("canvas");
+          canvas?.focus();
+        });
+        officePanel.addEventListener("mousedown", () => {
+          if (isMobileModeActive()) return;
+          console.log("[main] game panel mousedown \u2014 emitting game:panel:clicked");
+          phaserGameRef?.events.emit("game:panel:clicked");
+        });
+      }
+      function getPhaserDimensions() {
+        return {
+          width: officePanel.clientWidth || window.innerWidth / 2,
+          height: officePanel.clientHeight || window.innerHeight
+        };
+      }
+      function bindPhaserEventListeners(game) {
+        game.events.once("ready", () => {
+          drawOverviewSprites();
+          game.events.emit("layout:change", { layoutKey: currentResponsiveLayout });
+        });
+        game.events.on("agent:session:closed", onAgentSessionClosed);
+        game.events.on("agent:status:changed", onAgentStatusChanged);
+        game.events.on("agent:reattached", onAgentReattached);
+        game.events.on("bgm:started", onBgmStarted);
+        game.events.on("fleet:office:created", onFleetOfficeCreated);
+        game.events.on("fleet:deploy-requested", onFleetDeployRequested);
+        game.events.on("fleet:status", onFleetStatus);
+        game.events.on("fleet:complete", onFleetComplete);
+      }
+      function ensurePhaserGame() {
+        if (phaserGameRef) return;
+        const { width, height } = getPhaserDimensions();
+        const game = new import_phaser10.default.Game({
+          type: import_phaser10.default.AUTO,
+          parent: officePanel,
+          width,
+          height,
+          backgroundColor: "#1a1a2e",
+          physics: { default: "arcade", arcade: { debug: false } },
+          scene: [BootScene, OfficeScene, MeetingScene]
+        });
+        phaserGameRef = game;
+        bindPhaserEventListeners(game);
+      }
+      function teardownPhaserGame() {
+        if (!phaserGameRef) return;
+        const game = phaserGameRef;
+        phaserGameRef = void 0;
+        try {
+          game.destroy(true);
+        } catch (error) {
+          console.warn("[main] Failed to destroy Phaser game cleanly:", error);
+        }
+        officePanel.innerHTML = "";
+      }
+      bindOfficePanelListeners();
+      window.addEventListener("focus", () => {
+        catchUpStatusViews("window focus");
+      });
+      document.addEventListener("visibilitychange", () => {
+        if (!document.hidden) {
+          catchUpStatusViews("document visible");
+        }
       });
+      syncActiveRosterForCurrentOffice();
+      applyAppMode(appMode, { force: true, refreshTabs: false });
+      fetchSessionMeta();
     }
   });
   return require_main();