copilotoffice 1.0.2 → 1.0.4

package/dist/game.bundle.js

@@ -148598,6 +148598,7 @@ WARNING: This link could potentially be dangerous`)) {
           this.historyPopover = null;
           this.isFullWidth = false;
           this.fullscreenBtn = null;
+          this.mobileKeyboardBtn = null;
           this.isFocused = false;
           this.resizeHandler = null;
           this.resizeObserver = null;
@@ -148605,6 +148606,7 @@ WARNING: This link could potentially be dangerous`)) {
           this.attachedOfficeId = null;
           this.isReadOnly = false;
           this.isReplaying = false;
+          this.launchMode = "copilot";
           this.scene = scene;
           this.inputManager = inputManager;
           this.getOfficeId = getOfficeId;
@@ -148648,6 +148650,7 @@ WARNING: This link could potentially be dangerous`)) {
         parseSessionId(_data) {
         }
         acknowledgeCompletedWork(officeId, agentId) {
+          if (agentId === "pc-terminal") return;
           if (officeManager.acknowledgeAgentCompletion(officeId, agentId)) {
             this.scene.game.events.emit("agent:status:changed", agentId);
           }
@@ -148669,6 +148672,7 @@ WARNING: This link could potentially be dangerous`)) {
           this.currentAgentId = agent.id;
           this.onCloseCallback = onClose;
           this.isReadOnly = options?.readOnly ?? false;
+          this.launchMode = options?.launchMode ?? "copilot";
           this.attachedOfficeId = this.getOfficeId();
           this.currentAgent = agent;
           if (!this.container) {
@@ -148713,6 +148717,8 @@ WARNING: This link could potentially be dangerous`)) {
           if (this.spriteCardElement) {
             this.spriteCardElement.style.display = "flex";
           }
+          this.applySpriteCardResponsiveStyles();
+          this.updateMobileKeyboardButtonVisibility();
           this.applyPanelLayout();
           this.updateFullscreenButton();
           const colorHex = "#" + agent.color.toString(16).padStart(6, "0");
@@ -148810,7 +148816,21 @@ WARNING: This link could potentially be dangerous`)) {
           this.fitAddon?.fit();
           const dims = this.fitAddon?.proposeDimensions();
           const result = await withTimeout(
-            window.copilotBridge.terminalStart(this.getOfficeId(), agentId, workingDir, dims?.cols, dims?.rows),
+            this.launchMode === "shell" ? window.copilotBridge.terminalStart(
+              this.getOfficeId(),
+              agentId,
+              workingDir,
+              dims?.cols,
+              dims?.rows,
+              void 0,
+              "shell"
+            ) : window.copilotBridge.terminalStart(
+              this.getOfficeId(),
+              agentId,
+              workingDir,
+              dims?.cols,
+              dims?.rows
+            ),
             IPC_TIMEOUT,
             "terminalStart"
           );
@@ -148934,6 +148954,13 @@ WARNING: This link could potentially be dangerous`)) {
       </div>
     `;
           this.spriteCardElement.appendChild(agentDisplay);
+          const controlsColumn = document.createElement("div");
+          controlsColumn.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      align-items: stretch;
+    `;
           const buttonGrid = document.createElement("div");
           buttonGrid.style.cssText = `
       display: grid;
@@ -149007,7 +149034,30 @@ WARNING: This link could potentially be dangerous`)) {
           refreshFocusBtn.onclick = () => this.focusTerminal();
           refreshFocusBtn.title = "Re-focus terminal input when typing stops working";
           buttonGrid.appendChild(refreshFocusBtn);
-          this.spriteCardElement.appendChild(buttonGrid);
+          this.mobileKeyboardBtn = document.createElement("button");
+          this.mobileKeyboardBtn.textContent = "\u2328 Open Keyboard";
+          this.mobileKeyboardBtn.style.cssText = `
+      ${btnStyle}
+      width: 100%;
+      min-height: 56px;
+      font-size: 20px;
+      font-weight: bold;
+      color: #ffffff;
+      background: #3a4f8f;
+      border: 2px solid #6f86d8;
+    `;
+          this.mobileKeyboardBtn.onmouseover = () => {
+            if (this.mobileKeyboardBtn) this.mobileKeyboardBtn.style.background = "#4a63b0";
+          };
+          this.mobileKeyboardBtn.onmouseout = () => {
+            if (this.mobileKeyboardBtn) this.mobileKeyboardBtn.style.background = "#3a4f8f";
+          };
+          this.mobileKeyboardBtn.onclick = () => this.focusTerminal();
+          this.mobileKeyboardBtn.title = "Tap to open the device keyboard for terminal input";
+          controlsColumn.appendChild(this.mobileKeyboardBtn);
+          controlsColumn.appendChild(buttonGrid);
+          this.spriteCardElement.appendChild(controlsColumn);
+          this.updateMobileKeyboardButtonVisibility();
           const gameContainer = document.getElementById("game-container");
           if (gameContainer) {
             gameContainer.appendChild(this.spriteCardElement);
@@ -149050,7 +149100,21 @@ WARNING: This link could potentially be dangerous`)) {
           this.fitAddon?.fit();
           const dims = this.fitAddon?.proposeDimensions();
           const result = await withTimeout(
-            window.copilotBridge.terminalStart(officeId, this.currentAgentId, this.currentAgent.workingDir || officeManager.getCurrentWorkingDirectory(), dims?.cols, dims?.rows),
+            this.launchMode === "shell" ? window.copilotBridge.terminalStart(
+              officeId,
+              this.currentAgentId,
+              this.currentAgent.workingDir || officeManager.getCurrentWorkingDirectory(),
+              dims?.cols,
+              dims?.rows,
+              void 0,
+              "shell"
+            ) : window.copilotBridge.terminalStart(
+              officeId,
+              this.currentAgentId,
+              this.currentAgent.workingDir || officeManager.getCurrentWorkingDirectory(),
+              dims?.cols,
+              dims?.rows
+            ),
             IPC_TIMEOUT,
             "terminalStart"
           );
@@ -149243,12 +149307,16 @@ WARNING: This link could potentially be dangerous`)) {
           });
           this.resizeHandler = () => {
             if (this.isVisible) {
+              this.applySpriteCardResponsiveStyles();
+              this.updateMobileKeyboardButtonVisibility();
               this.debouncedRefit();
             }
           };
           window.addEventListener("resize", this.resizeHandler);
           this.resizeObserver = new ResizeObserver(() => {
             if (this.isVisible) {
+              this.applySpriteCardResponsiveStyles();
+              this.updateMobileKeyboardButtonVisibility();
               this.debouncedRefit();
             }
           });
@@ -149258,6 +149326,13 @@ WARNING: This link could potentially be dangerous`)) {
         }
         /** Toggle between half-width and full-width terminal panel. */
         toggleFullWidth() {
+          if (window.__copilotOfficeMobileModeActive?.() === true) {
+            this.isFullWidth = true;
+            this.applyPanelLayout();
+            this.updateFullscreenButton();
+            this.debouncedRefit();
+            return;
+          }
           this.isFullWidth = !this.isFullWidth;
           localStorage.setItem(_TerminalOverlay.STORAGE_KEY, String(this.isFullWidth));
           console.log(`[TerminalOverlay] toggleFullWidth() \u2014 now ${this.isFullWidth ? "full" : "half"}`);
@@ -149270,6 +149345,12 @@ WARNING: This link could potentially be dangerous`)) {
           const officePanel = document.getElementById("office-panel");
           const terminalPanel = document.getElementById("terminal-panel");
           if (!officePanel || !terminalPanel) return;
+          if (window.__copilotOfficeMobileModeActive?.() === true) {
+            officePanel.style.display = "none";
+            terminalPanel.style.width = "100%";
+            terminalPanel.style.borderLeft = "none";
+            return;
+          }
           if (this.isFullWidth) {
             officePanel.style.display = "none";
             terminalPanel.style.width = "100%";
@@ -149281,6 +149362,7 @@ WARNING: This link could potentially be dangerous`)) {
         }
         /** Restore half-width layout (used when hiding terminal). */
         restorePanelLayout() {
+          if (window.__copilotOfficeMobileModeActive?.() === true) return;
           const officePanel = document.getElementById("office-panel");
           const terminalPanel = document.getElementById("terminal-panel");
           if (!officePanel || !terminalPanel) return;
@@ -149312,8 +149394,29 @@ WARNING: This link could potentially be dangerous`)) {
         /** Update the fullscreen toggle button label. */
         updateFullscreenButton() {
           if (this.fullscreenBtn) {
+            if (window.__copilotOfficeMobileModeActive?.() === true) {
+              this.fullscreenBtn.textContent = "\u26F6 Locked";
+              this.fullscreenBtn.title = "Fullscreen is locked in mobile mode";
+              return;
+            }
             this.fullscreenBtn.textContent = this.isFullWidth ? "\u26F6 Half" : "\u26F6 Fullscreen";
+            this.fullscreenBtn.title = "";
+          }
+        }
+        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";
+        }
+        updateMobileKeyboardButtonVisibility() {
+          if (!this.mobileKeyboardBtn) return;
+          this.mobileKeyboardBtn.style.display = "none";
         }
         /** Give keyboard focus to the terminal. Safe to call when already focused. */
         focusTerminal() {
@@ -149323,6 +149426,9 @@ WARNING: This link could potentially be dangerous`)) {
             () => this.handleNewSession(),
             () => this.toggleFullWidth()
           );
+          if (window.__copilotOfficeMobileModeActive?.() === true) {
+            this.terminal?.focus();
+          }
           this.inputManager.focusTerminalXterm(this.terminal);
           if (this.currentAgent) {
             this.scene.game.events.emit("npc:highlight", this.currentAgent.id);
@@ -149338,7 +149444,12 @@ WARNING: This link could potentially be dangerous`)) {
         /** Give keyboard focus back to the game canvas. Safe to call when already blurred. */
         blurTerminal() {
           console.log("[TerminalOverlay] blurTerminal() \u2014 delegating to InputManager");
-          this.inputManager.switchToGame("TerminalOverlay.blurTerminal()");
+          const mobileLocked = window.__copilotOfficeMobileModeActive?.() === true;
+          if (mobileLocked) {
+            this.inputManager.switchToNone("TerminalOverlay.blurTerminal() mobile lock");
+          } else {
+            this.inputManager.switchToGame("TerminalOverlay.blurTerminal()");
+          }
           this.inputManager.blurTerminalXterm(this.terminal);
           if (this.currentAgentId) {
             const officeId = this.attachedOfficeId ?? this.getOfficeId();
@@ -149369,6 +149480,7 @@ WARNING: This link could potentially be dangerous`)) {
           if (this.spriteCardElement) {
             this.spriteCardElement.style.display = "none";
           }
+          this.updateMobileKeyboardButtonVisibility();
           this.isVisible = false;
           this.isReadOnly = false;
           this.closeHistoryPopover();
@@ -149390,7 +149502,9 @@ WARNING: This link could potentially be dangerous`)) {
           if (this.onCloseCallback) {
             this.onCloseCallback();
           }
-          this.scene.game.canvas.focus();
+          if (window.__copilotOfficeMobileModeActive?.() !== true) {
+            this.scene.game.canvas.focus();
+          }
         }
         getIsVisible() {
           return this.isVisible;
@@ -150352,15 +150466,102 @@ WARNING: This link could potentially be dangerous`)) {
     }
   });
 
+  // src/layouts/types.ts
+  function getDashboardTypography() {
+    const isMobile = typeof window !== "undefined" && window.__copilotOfficeMobileModeActive?.() === true;
+    return isMobile ? MOBILE_DASHBOARD_TYPOGRAPHY : DESKTOP_DASHBOARD_TYPOGRAPHY;
+  }
+  var DESKTOP_DASHBOARD_TYPOGRAPHY, MOBILE_DASHBOARD_TYPOGRAPHY;
+  var init_types = __esm({
+    "src/layouts/types.ts"() {
+      "use strict";
+      DESKTOP_DASHBOARD_TYPOGRAPHY = {
+        cardTitle: "15px",
+        cardDescription: "11px",
+        statusText: "11px",
+        statusDot: "8px",
+        elapsed: "10px",
+        badge: "10px",
+        queue: "9px",
+        toolRow: "10px",
+        sectionLabel: "9px",
+        activityRow: "10px",
+        taskSummary: "10px",
+        sessionLabel: "9px",
+        sessionTitle: "13px",
+        sessionButton: "11px",
+        emptyState: "11px",
+        arthurHint: "10px"
+      };
+      MOBILE_DASHBOARD_TYPOGRAPHY = {
+        cardTitle: "19px",
+        cardDescription: "15px",
+        statusText: "16px",
+        statusDot: "11px",
+        elapsed: "14px",
+        badge: "13px",
+        queue: "13px",
+        toolRow: "14px",
+        sectionLabel: "13px",
+        activityRow: "14px",
+        taskSummary: "14px",
+        sessionLabel: "13px",
+        sessionTitle: "17px",
+        sessionButton: "14px",
+        emptyState: "14px",
+        arthurHint: "14px"
+      };
+    }
+  });
+
   // src/layouts/default/DefaultDashboard.ts
   var defaultDashboard;
   var init_DefaultDashboard = __esm({
     "src/layouts/default/DefaultDashboard.ts"() {
       "use strict";
+      init_types();
       defaultDashboard = {
         renderCards(ctx) {
           const { agents, office, selectedAgentId, cachedSessionMeta, agentTools, formatElapsed, formatRelativeTime } = ctx;
+          const t = getDashboardTypography();
           let html = "";
+          const pcCardSelected = selectedAgentId === "pc-terminal";
+          html += `
+      <div class="agent-card" data-agent="pc-terminal" style="
+        background: ${pcCardSelected ? "#1e1e3a" : "#13131f"};
+        border: 1.5px solid ${pcCardSelected ? "#6677ff" : "#252540"};
+        border-radius: 10px;
+        padding: 14px 16px;
+        margin-bottom: 10px;
+        cursor: pointer;
+        transition: border-color 0.15s;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      ">
+        <div style="
+          width: 64px;
+          background: #5da9ff22;
+          border: 1px solid #5da9ff44;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          flex-shrink: 0;
+        ">
+          <canvas
+            id="overview-sprite-pc-terminal"
+            width="32" height="32"
+            style="image-rendering: pixelated; width: 48px; height: 48px; display: block;"
+          ></canvas>
+        </div>
+        <div style="min-width: 0;">
+          <div style="font-weight: bold; color: #dde; font-size: ${t.cardTitle};">PC TERMINAL</div>
+          <div style="color: #778; font-size: ${t.cardDescription}; margin-top: 2px;">Local shell</div>
+        </div>
+      </div>
+    `;
           for (const agent of agents) {
             const liveStatus = office?.agents.get(agent.id);
             const tools = agentTools.get(agent.id) || [];
@@ -150418,27 +150619,27 @@ WARNING: This link could potentially be dangerous`)) {
         <div style="
           position: absolute; top: -4px; right: -4px;
           background: #e55; color: #fff;
-          font-size: 10px; font-weight: bold;
+          font-size: ${t.badge}; font-weight: bold;
           min-width: 18px; height: 18px;
           border-radius: 9px;
           display: flex; align-items: center; justify-content: center;
           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: 10px; margin-left: 8px;">\u23F1 ${elapsed}</span>` : "";
+            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="
-        background: #334; color: #aac; font-size: 9px;
+        background: #334; color: #aac; font-size: ${t.queue};
         padding: 1px 6px; border-radius: 8px; margin-left: 6px;
       ">${toolCount} tools</span>` : "";
             let toolPipelineHtml = "";
             if (tools.length > 0) {
-              const toolRows = tools.map((t, i) => {
+              const toolRows = tools.map((t2, i) => {
                 const isLast = i === tools.length - 1;
                 const icon = isLast ? "\u25B8" : "\u25E6";
                 const color = isLast ? "#8af" : "#556";
-                const statusText = isLast ? t.status : "(queued)";
-                return `<div style="font-size: 10px; color: ${color}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 0;">
-            ${icon} <span style="color: #9ab;">${t.name}</span> <span style="color: #556;">\u2014 ${statusText}</span>
+                const statusText = isLast ? t2.status : "(queued)";
+                return `<div style="font-size: ${t2.toolRow}; color: ${color}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 0;">
+            ${icon} <span style="color: #9ab;">${t2.name}</span> <span style="color: #556;">\u2014 ${statusText}</span>
           </div>`;
               }).join("");
               toolPipelineHtml = `
@@ -150451,24 +150652,24 @@ WARNING: This link could potentially be dangerous`)) {
             if (completedActions.length > 0) {
               const rows = completedActions.map((a) => {
                 const relTime = formatRelativeTime(a.timestamp);
-                return `<div style="display: flex; gap: 8px; font-size: 10px; padding: 1px 0;" data-action-ts="${a.timestamp}">
+                return `<div style="display: flex; gap: 8px; font-size: ${t.activityRow}; padding: 1px 0;" data-action-ts="${a.timestamp}">
             <span style="color: #445; flex-shrink: 0; min-width: 48px; text-align: right;">${relTime}</span>
             <span style="color: #5a5a7a;">\u2713 ${a.action}</span>
           </div>`;
               }).join("");
               activityLogHtml = `
           <div style="margin-top: 6px; padding-top: 6px; border-top: 1px solid #1a1a30;">
-            <div style="font-size: 9px; color: #3a3a5a; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px;">Recent Activity</div>
+            <div style="font-size: ${t.sectionLabel}; color: #3a3a5a; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px;">Recent Activity</div>
             ${rows}
           </div>`;
             } else if (liveStatus?.state !== "slacking") {
               activityLogHtml = `
           <div style="margin-top: 6px; padding-top: 6px; border-top: 1px solid #1a1a30;">
-            <div style="font-size: 10px; color: #333; font-style: italic;">No recent activity</div>
+            <div style="font-size: ${t.emptyState}; color: #333; font-style: italic;">No recent activity</div>
           </div>`;
             }
             const taskSummaryHtml = taskSummary && isActive ? `
-        <div style="font-size: 10px; color: #667; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+        <div style="font-size: ${t.taskSummary}; color: #667; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
           \u{1F4CB} ${taskSummary}
         </div>` : "";
             const meta = cachedSessionMeta[agent.id];
@@ -150483,9 +150684,9 @@ WARNING: This link could potentially be dangerous`)) {
           align-self: stretch;
           justify-content: center;
         ">
-          <div style="font-size: 9px; color: #3a3a5a; text-transform: uppercase; letter-spacing: 0.5px;">Session Info</div>
+          <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: 13px;
+            font-weight: bold; color: ${metaTitle ? "#ccd" : "#444"}; font-size: ${t.sessionTitle};
             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;
@@ -150493,7 +150694,7 @@ WARNING: This link could potentially be dangerous`)) {
           <div style="display: flex; justify-content: flex-end; margin-top: 2px;">
             <button class="session-edit-btn" data-agent="${agent.id}" style="
               background: none; border: 1px solid #333; color: #667;
-              font-size: 11px; padding: 2px 8px; border-radius: 4px;
+              font-size: ${t.sessionButton}; padding: 2px 8px; border-radius: 4px;
               cursor: pointer; transition: color 0.15s, border-color 0.15s;
             " title="Edit session title">\u270F\uFE0F</button>
           </div>
@@ -150508,7 +150709,7 @@ WARNING: This link could potentially be dangerous`)) {
           justify-content: center;
           opacity: 0.4;
         ">
-          <div style="font-size: 11px; color: #444; font-style: italic;">No active session</div>
+          <div style="font-size: ${t.emptyState}; color: #444; font-style: italic;">No active session</div>
         </div>
       `;
             html += `
@@ -150548,17 +150749,17 @@ WARNING: This link could potentially be dangerous`)) {
           </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: 15px;">${agent.name}</div>
-              <div style="color: #778; font-size: 11px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">${agent.description}</div>
+              <div style="font-weight: bold; color: #dde; font-size: ${t.cardTitle};">${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: 11px;
+                  font-size: ${t.statusText};
                   color: ${statusDot};
                   display: flex; align-items: center; gap: 4px;
                 ">
-                  <span style="font-size: 8px;">\u25CF</span>
+                  <span style="font-size: ${t.statusDot};">\u25CF</span>
                   <span>${statusIcon} ${statusLabel}</span>
                 </div>
                 ${elapsedHtml}
@@ -150587,7 +150788,9 @@ WARNING: This link could potentially be dangerous`)) {
       defaultClickHandler = {
         handleCardClick(agentId, context) {
           context.setSelectedAgent(agentId);
-          context.clearUnread(agentId);
+          if (agentId !== "pc-terminal") {
+            context.clearUnread(agentId);
+          }
           context.updateContent();
           context.emitOpenTerminal(agentId);
         },
@@ -150605,9 +150808,11 @@ WARNING: This link could potentially be dangerous`)) {
   var init_FleetDashboard = __esm({
     "src/layouts/fleet/FleetDashboard.ts"() {
       "use strict";
+      init_types();
       fleetDashboard = {
         renderCards(ctx) {
           const { agents, office, selectedAgentId, formatElapsed, formatRelativeTime } = ctx;
+          const t = getDashboardTypography();
           let html = "";
           for (const agent of agents) {
             const liveStatus = office?.agents.get(agent.id);
@@ -150661,29 +150866,29 @@ WARNING: This link could potentially be dangerous`)) {
             const recentActions = liveStatus?.recentActions || [];
             const taskSummary = liveStatus?.taskSummary || "";
             const isActive = liveStatus?.state === "active" && liveStatus?.subState !== "ready" && liveStatus?.subState !== "error";
-            const elapsedHtml = elapsed ? `<span data-elapsed-agent="${agent.id}" style="color: #8a8; font-size: 10px; margin-left: 8px;">\u23F1 ${elapsed}</span>` : "";
+            const elapsedHtml = elapsed ? `<span data-elapsed-agent="${agent.id}" style="color: #8a8; font-size: ${t.elapsed}; margin-left: 8px;">\u23F1 ${elapsed}</span>` : "";
             let activityLogHtml = "";
             const completedActions = recentActions.filter((a) => a.type === "completed").slice(-3).reverse();
             if (completedActions.length > 0) {
               const rows = completedActions.map((a) => {
                 const relTime = formatRelativeTime(a.timestamp);
-                return `<div style="display: flex; gap: 8px; font-size: 10px; padding: 1px 0;" data-action-ts="${a.timestamp}">
+                return `<div style="display: flex; gap: 8px; font-size: ${t.activityRow}; padding: 1px 0;" data-action-ts="${a.timestamp}">
             <span style="color: #445; flex-shrink: 0; min-width: 48px; text-align: right;">${relTime}</span>
             <span style="color: #5a5a7a;">\u2713 ${a.action}</span>
           </div>`;
               }).join("");
               activityLogHtml = `
           <div style="margin-top: 6px; padding-top: 6px; border-top: 1px solid #1a1a30;">
-            <div style="font-size: 9px; color: #3a3a5a; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px;">Recent Activity</div>
+            <div style="font-size: ${t.sectionLabel}; color: #3a3a5a; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px;">Recent Activity</div>
             ${rows}
           </div>`;
             }
             const taskSummaryHtml = taskSummary && isActive ? `
-        <div style="font-size: 10px; color: #667; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+        <div style="font-size: ${t.taskSummary}; color: #667; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
           \u{1F4CB} ${taskSummary}
         </div>` : "";
             const arthurHint = isArthur ? `
-        <div style="font-size: 10px; color: #4af; margin-top: 4px; display: flex; align-items: center; gap: 4px;">
+        <div style="font-size: ${t.arthurHint}; color: #4af; margin-top: 4px; display: flex; align-items: center; gap: 4px;">
           \u{1F4AC} Open Arthur's terminal
         </div>` : "";
             html += `
@@ -150721,17 +150926,17 @@ WARNING: This link could potentially be dangerous`)) {
           </div>
           <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;">
             <div>
-              <div style="font-weight: bold; color: #dde; font-size: 14px;">${agent.name}</div>
-              <div style="color: #778; font-size: 10px; margin-top: 2px;">${agent.description}</div>
+              <div style="font-weight: bold; color: #dde; font-size: ${t.cardTitle};">${agent.name}</div>
+              <div style="color: #778; font-size: ${t.cardDescription}; margin-top: 2px;">${agent.description}</div>
             </div>
             <div>
               <div style="display: flex; align-items: center; flex-wrap: wrap; margin-top: 3px;">
                 <div style="
-                  font-size: 11px;
+                  font-size: ${t.statusText};
                   color: ${statusDot};
                   display: flex; align-items: center; gap: 4px;
                 ">
-                  <span style="font-size: 8px;">\u25CF</span>
+                  <span style="font-size: ${t.statusDot};">\u25CF</span>
                   <span>${statusIcon} ${statusLabel}</span>
                 </div>
                 ${elapsedHtml}
@@ -151101,6 +151306,25 @@ WARNING: This link could potentially be dangerous`)) {
           this.currentFocus = "terminal";
           console.log("[InputManager] \u2500\u2500 switchToTerminal() complete \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500");
         }
+        /**
+         * Switch focus to a neutral dashboard mode.
+         * - Deactivates Phaser keyboard
+         * - Deactivates terminal shortcut intercepts
+         * - Leaves global listener in 'none' mode
+         */
+        switchToNone(reason) {
+          console.log(
+            `[InputManager] \u2500\u2500 switchToNone() \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  reason  : "${reason}"
+  from    : "${this.currentFocus}"
+  time    : ${Date.now()}`
+          );
+          this.terminal.deactivateShortcuts();
+          this.game.deactivate(reason);
+          this.global.setMode("none");
+          this.currentFocus = "none";
+          console.log("[InputManager] \u2500\u2500 switchToNone() complete \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500");
+        }
         /**
          * Install the F10-to-close handler.  Should be called whenever a terminal
          * becomes visible (regardless of which side has keyboard focus — F10 always
@@ -151803,7 +152027,7 @@ WARNING: This link could potentially be dangerous`)) {
   function debugLog(scene, ...args) {
     if (scene.physics.world.drawDebug) console.log("[Debug]", ...args);
   }
-  var import_phaser8, ENABLE_DECORATIONS, ENABLE_BASKETBALL, ENABLE_GALAXIAN, ENABLE_ZOOM_BAR, OfficeScene;
+  var import_phaser8, ENABLE_DECORATIONS, ENABLE_BASKETBALL, ENABLE_GALAXIAN, ENABLE_ZOOM_BAR, PC_TERMINAL_ID, OfficeScene;
   var init_OfficeScene = __esm({
     "src/scenes/OfficeScene.ts"() {
       "use strict";
@@ -151826,6 +152050,7 @@ WARNING: This link could potentially be dangerous`)) {
       ENABLE_BASKETBALL = false;
       ENABLE_GALAXIAN = true;
       ENABLE_ZOOM_BAR = true;
+      PC_TERMINAL_ID = "pc-terminal";
       OfficeScene = class extends import_phaser8.default.Scene {
         constructor() {
           super({ key: "OfficeScene" });
@@ -151859,11 +152084,32 @@ WARNING: This link could potentially be dangerous`)) {
           this.walkInTimers = [];
           this.walkInAgents = [];
           this.skipButton = null;
+          this.isPortraitDashboardMode = false;
         }
         setAnimating(value) {
           this.animating = value;
           this.game.registry.set("animating", value);
         }
+        handleLayoutChange(payload) {
+          const next = payload?.layoutKey === "portrait-dashboard";
+          if (next === this.isPortraitDashboardMode) return;
+          this.isPortraitDashboardMode = next;
+          if (next) {
+            this.player.disableMovement();
+            this.playerMovementEnabled = false;
+            this.inputManager.switchToNone("layout:portrait-dashboard");
+            this.physics.world.pause();
+            this.anims.pauseAll();
+            return;
+          }
+          this.physics.world.resume();
+          this.anims.resumeAll();
+          if (!this.terminalOverlay.getIsVisible() && this.playerInScene) {
+            this.player.enableMovement();
+            this.playerMovementEnabled = true;
+            this.inputManager.switchToGame("layout:default");
+          }
+        }
         create() {
           const screenWidth = this.cameras.main.width;
           const screenHeight = this.cameras.main.height;
@@ -152042,6 +152288,10 @@ WARNING: This link could potentially be dangerous`)) {
           this.instructionText.setOrigin(0.5, 1);
           this.instructionText.setDepth(Depths.UI_OVERLAY);
           this.game.events.on("open:agent:terminal", (agentId) => {
+            if (agentId === PC_TERMINAL_ID) {
+              this.openPlayerPcTerminal();
+              return;
+            }
             if (this.currentLayout === "fleet-vteam" && agentId !== "architect") return;
             const agents = getLayout(this.currentLayout).agents;
             const agent = agents.find((a) => a.id === agentId);
@@ -152129,6 +152379,10 @@ WARNING: This link could potentially be dangerous`)) {
             console.log("[OfficeScene] Fleet complete!");
           }, this);
           this.game.events.on("game:panel:clicked", () => {
+            if (this.isPortraitDashboardMode) {
+              this.inputManager.switchToNone("game:panel:clicked mobile lock");
+              return;
+            }
             debugLog(this, `game:panel:clicked \u2014 blurring terminal`);
             this.terminalOverlay.blurTerminal();
             if (this.playerInScene) {
@@ -152149,6 +152403,7 @@ WARNING: This link could potentially be dangerous`)) {
               this.playerMovementEnabled = true;
             }
           }, this);
+          this.game.events.on("layout:change", this.handleLayoutChange, this);
           this.input.on("pointerup", (_pointer, currentlyOver) => {
             if (this.cameraDrag?.wasDragging()) return;
             const clickedNPC = currentlyOver.find((go) => go instanceof NPC);
@@ -152156,6 +152411,13 @@ WARNING: This link could potentially be dangerous`)) {
               this.startConversation(clickedNPC.config);
               return;
             }
+            const clickedPcTerminal = this.desks.some(
+              (desk) => desk.agentId === PC_TERMINAL_ID && currentlyOver.includes(desk.sprite)
+            );
+            if (clickedPcTerminal) {
+              this.openPlayerPcTerminal();
+              return;
+            }
             if (this.currentLayout === "default") {
               for (const desk of this.desks) {
                 if (!desk.agentId.startsWith("unassigned-")) continue;
@@ -152220,6 +152482,7 @@ WARNING: This link could potentially be dangerous`)) {
             this.bgMusic?.stop();
             this.game.events.off("bgm:volume");
             this.game.events.off("bgm:mute");
+            this.game.events.off("layout:change", this.handleLayoutChange, this);
             this.disposeFleetPipeline();
             this.game.events.off("zoom:change");
             this.cameraDrag?.destroy();
@@ -152427,6 +152690,13 @@ WARNING: This link could potentially be dangerous`)) {
           }
           const bossPC = addDecor(bossDeskX, bossDeskY - 2 * scale, "desktop_pc");
           bossPC.setDepth(ySortDepth(bossDeskY, worldH) + 0.1);
+          bossPC.setInteractive({ useHandCursor: true, pixelPerfect: false });
+          this.desks.push({
+            sprite: bossPC,
+            agentId: PC_TERMINAL_ID,
+            x: bossDeskX,
+            y: bossDeskY - 2 * scale
+          });
           addDecor(bossDeskX, bossDeskY + this.tileSize, "chair").setDepth(ySortDepth(bossDeskY + this.tileSize + 16 * scale, worldH));
           if (ENABLE_DECORATIONS) {
             addDecor(2 * this.tileSize + this.tileSize / 2, 2 * this.tileSize + this.tileSize / 2, "plant");
@@ -153326,6 +153596,9 @@ WARNING: This link could potentially be dangerous`)) {
           }
         }
         update() {
+          if (this.isPortraitDashboardMode) {
+            return;
+          }
           if (!this.playerInScene || this.basketballGame.getIsVisible() || this.galaxianGame.getIsVisible() || !this.playerMovementEnabled) {
             return;
           }
@@ -153345,6 +153618,10 @@ WARNING: This link could potentially be dangerous`)) {
           this.updateExitDoorProximity();
           if (import_phaser8.default.Input.Keyboard.JustDown(this.interactKey)) {
             if (this.terminalOverlay.getIsVisible()) {
+              if (this.nearestDesk?.agentId === PC_TERMINAL_ID) {
+                this.openPlayerPcTerminal();
+                return;
+              }
               const targetAgent = this.nearestNPC?.config ?? (this.nearestDesk ? AGENTS.find((a) => a.id === this.nearestDesk.agentId) : null) ?? null;
               if (targetAgent) {
                 this.startConversation(targetAgent);
@@ -153358,6 +153635,10 @@ WARNING: This link could potentially be dangerous`)) {
             } else if (this.nearestNPC) {
               this.startConversation(this.nearestNPC.config);
             } else if (this.nearestDesk) {
+              if (this.nearestDesk.agentId === PC_TERMINAL_ID) {
+                this.openPlayerPcTerminal();
+                return;
+              }
               const agent = AGENTS.find((a) => a.id === this.nearestDesk.agentId);
               if (agent) {
                 this.startConversation(agent);
@@ -153592,6 +153873,37 @@ WARNING: This link could potentially be dangerous`)) {
             }
           );
         }
+        openPlayerPcTerminal() {
+          if (this.currentLayout !== "default") return;
+          const workingDir = officeManager.getCurrentWorkingDirectory();
+          const pcTerminalConfig = {
+            id: PC_TERMINAL_ID,
+            name: "PC TERMINAL",
+            skill: "general",
+            sprite: "desktop_pc",
+            color: 6138367,
+            position: { x: 10, y: 2 },
+            greeting: "PC terminal ready.",
+            description: "Local Shell",
+            workingDir
+          };
+          this.playerMovementEnabled = false;
+          if (this.playerInScene) {
+            this.player.disableMovement();
+          }
+          this.cameraDrag?.disable();
+          this.terminalOverlay.show(
+            pcTerminalConfig,
+            () => {
+              this.playerMovementEnabled = true;
+              if (this.playerInScene) {
+                this.player.enableMovement();
+              }
+              this.applyZoom(this.cameras.main.zoom);
+            },
+            { launchMode: "shell" }
+          );
+        }
         enterMeeting() {
           this.playerMovementEnabled = false;
           if (this.playerInScene) {
@@ -154261,6 +154573,21 @@ WARNING: This link could potentially be dangerous`)) {
     }
   });
 
+  // src/config/responsiveLayout.ts
+  function computeResponsiveLayout(width, height) {
+    const safeHeight = Math.max(1, height);
+    const ratio = width / safeHeight;
+    return ratio <= PORTRAIT_RATIO_THRESHOLD || width <= PORTRAIT_WIDTH_THRESHOLD_PX ? "portrait-dashboard" : "default";
+  }
+  var PORTRAIT_RATIO_THRESHOLD, PORTRAIT_WIDTH_THRESHOLD_PX;
+  var init_responsiveLayout = __esm({
+    "src/config/responsiveLayout.ts"() {
+      "use strict";
+      PORTRAIT_RATIO_THRESHOLD = 0.9;
+      PORTRAIT_WIDTH_THRESHOLD_PX = 600;
+    }
+  });
+
   // src/ui/ToastNotification.ts
   var MAX_VISIBLE, AUTO_DISMISS_MS, ANIMATION_MS, RATE_LIMIT_WINDOW_MS, RATE_LIMIT_MAX, ToastNotificationManager;
   var init_ToastNotification = __esm({
@@ -155125,6 +155452,7 @@ WARNING: This link could potentially be dangerous`)) {
       init_MeetingScene();
       init_officeManager();
       init_agents();
+      init_responsiveLayout();
       init_layouts();
       init_ToastNotification();
       init_NotificationService();
@@ -155158,6 +155486,7 @@ WARNING: This link could potentially be dangerous`)) {
       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;
@@ -155223,6 +155552,61 @@ WARNING: This link could potentially be dangerous`)) {
   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(() => {
+          const next = computeResponsiveLayout(window.innerWidth, window.innerHeight);
+          applyResponsiveLayout(next);
+          if (phaserGameRef && currentResponsiveLayout === "default") {
+            const width = officePanel.clientWidth || window.innerWidth / 2;
+            const height = officePanel.clientHeight || window.innerHeight;
+            phaserGameRef.scale.resize(width, height);
+          }
+        }, RESIZE_DEBOUNCE_MS);
+      }
+      applyResponsiveLayout(computeResponsiveLayout(window.innerWidth, window.innerHeight));
+      window.addEventListener("resize", onWindowResize);
+      if (typeof window !== "undefined") {
+        window.__copilotOfficeMobileModeActive = isMobileModeActive;
+      }
       function renderOfficeTabs() {
         const offices = officeManager.getAllOffices();
         const currentId = officeManager.currentOfficeId;
@@ -155369,7 +155753,9 @@ WARNING: This link could potentially be dangerous`)) {
           debugMode = !debugMode;
           phaserGame?.events.emit("debug:toggle", debugMode);
           renderOfficeTabs();
-          phaserGame?.events.emit("game:panel:clicked");
+          if (!isMobileModeActive()) {
+            phaserGame?.events.emit("game:panel:clicked");
+          }
           console.log(`[Debug] Debug mode ${debugMode ? "ON" : "OFF"}`);
         });
         const zoomSlider = document.getElementById("zoom-slider");
@@ -155405,6 +155791,7 @@ WARNING: This link could potentially be dangerous`)) {
             spriteCustomizerPanel.updatePreview(base64);
           }
         });
+        applyMobileTopBarVisibility();
       }
       function switchToOffice(officeId) {
         if (phaserGame?.registry.get("animating")) {
@@ -155830,6 +156217,19 @@ WARNING: This link could potentially be dangerous`)) {
               ctx.drawImage(source, 0, 0);
             }
           }
+          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);
+            }
+          }
         }, 50);
       }
       function setupTerminalClickHandler() {
@@ -156250,11 +156650,13 @@ WARNING: This link could potentially be dangerous`)) {
         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");