feat: add mobile support

Author: ddx-510

README.md

@@ -64,7 +64,15 @@ A standard OpenCode plugin script that hooks into the event bus:
 -   `session` events (status changes)
 -   `fs` events (file modifications)
 
-## Installation
+## 📱 Mobile Support
+
+Monitor your agents from your phone or tablet!
+
+-   **Network Access**: The server automatically binds to your LAN IP.
+-   **QR Code**: In the dashboard, click the Network URL in the top-right corner to reveal a QR code. Scan it to instantly connect.
+-   **Responsive Design**: The dashboard adapts to portrait and landscape modes on mobile devices.
+
+![Mobile View](docs/mobile_preview.png)
 
 ## Installation
 

client/src/App.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+import QRCode from "react-qr-code";
 import { AgentPanel } from "./components/AgentPanel";
 import { ScreenFrame } from "./components/ScreenFrame";
 import { SessionPanel } from "./components/SessionPanel";
@@ -19,10 +21,13 @@ const App = () => {
     appVersion,
     lastTodoSummary,
     bossMessage,
+    networkIp,
     setSelectedAgentId,
     setSelectedSessionId,
   } = useOfficeState();
 
+  const [showQr, setShowQr] = useState(false);
+
   const activeLabel = activeSessionId ? activeSessionId.slice(0, 10) : "N/A";
   const version = appVersion ? `v${appVersion}` : "v1.0.0";
   const todoSummary = lastTodoSummary
@@ -43,6 +48,31 @@ const App = () => {
         <div className={`status-badge ${connected ? "live" : ""}`}>
           <span className="text-[8px] opacity-70 mb-1">SYSTEM STATUS</span>
           <span className="font-bold">{connected ? "ONLINE" : "OFFLINE"}</span>
+          {networkIp && connected && (
+            <div className="relative mt-2 border-t border-white/20 pt-1 flex flex-col items-center">
+              <button
+                onClick={() => setShowQr(!showQr)}
+                className="text-[8px] font-normal opacity-80 hover:opacity-100 hover:text-accent cursor-pointer underline decoration-dotted"
+                title="Click to scan QR code"
+              >
+                http://{networkIp}:5100
+              </button>
+
+              {showQr && (
+                <div className="absolute top-8 right-0 bg-white p-2 border-2 border-foreground shadow-[4px_4px_0_rgba(0,0,0,0.2)] z-50">
+                  <div style={{ height: "auto", margin: "0 auto", maxWidth: 128, width: "100%" }}>
+                    <QRCode
+                      size={256}
+                      style={{ height: "auto", maxWidth: "100%", width: "100%" }}
+                      value={`http://${networkIp}:5100`}
+                      viewBox={`0 0 256 256`}
+                    />
+                  </div>
+                  <div className="text-[8px] text-center mt-1 text-foreground font-bold">SCAN ME</div>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </header>
 

client/src/PixiScene.tsx

@@ -568,14 +568,14 @@ const SceneLayer = ({
 
   const getRandomWalkable = (allowChairs: boolean) => {
     if (!collisionMap) return { row: 32, col: 32 };
-      for (let i = 0; i < 80; i++) {
-        const r = Math.floor(Math.random() * collisionMap.rows);
-        const c = Math.floor(Math.random() * collisionMap.cols);
-        const state = collisionMap.grid[r][c];
-        if (state <= 0) continue;
-        if (!allowChairs && state === 2) continue;
-        return { row: r, col: c };
-      }
+    for (let i = 0; i < 80; i++) {
+      const r = Math.floor(Math.random() * collisionMap.rows);
+      const c = Math.floor(Math.random() * collisionMap.cols);
+      const state = collisionMap.grid[r][c];
+      if (state <= 0) continue;
+      if (!allowChairs && state === 2) continue;
+      return { row: r, col: c };
+    }
     return { row: 32, col: 32 };
   };
 
@@ -1355,16 +1355,16 @@ const SceneLayer = ({
           const motion = 0;
           const direction = sprite.direction || "front";
           const movement = Math.hypot(sprite.targetX - sprite.x, sprite.targetY - sprite.y);
-        const isRunning = movement > 0.8;
-        const isWalking = movement > 0.2;
-        const currentTile = pixelToTile(sprite.x, sprite.y);
-        const isOnWorkChair = Boolean(
-          collisionMap?.workNodes?.some(
-            (node) => node.row === currentTile.row && node.col === currentTile.col
-          )
-        );
-        const shouldJump = agent.status === "thinking" && isOnWorkChair;
-        const state = shouldJump ? "jump" : isRunning ? "run" : isWalking ? "walk" : "idle";
+          const isRunning = movement > 0.8;
+          const isWalking = movement > 0.2;
+          const currentTile = pixelToTile(sprite.x, sprite.y);
+          const isOnWorkChair = Boolean(
+            collisionMap?.workNodes?.some(
+              (node) => node.row === currentTile.row && node.col === currentTile.col
+            )
+          );
+          const shouldJump = agent.status === "thinking" && isOnWorkChair;
+          const state = shouldJump ? "jump" : isRunning ? "run" : isWalking ? "walk" : "idle";
           const sheet = spriteSheets[state] || spriteSheets.idle;
           const frameCount = sheet?.right.length || 1;
           const frameSpeed = isRunning ? 90 : isWalking ? 120 : 200;
@@ -1452,7 +1452,7 @@ const SceneLayer = ({
           const labelPaddingX = 4;
           const chipHeight = 12;
           const chipGap = 4;
-                const labelY = y + 34 + motion;
+          const labelY = y + 34 + motion;
           const activityBubbleSize = 18;
           const activityBubbleX = sprite.x - activityBubbleSize / 2;
           const messageBubble: MessageBubbleData = {
@@ -1627,7 +1627,7 @@ export const PixiScene = (props: PixiSceneProps) => {
     <Stage
       width={dimensions.width}
       height={dimensions.height}
-      style={{ width: dimensions.width, height: dimensions.height, display: "block" }}
+      style={{ display: "block" }}
       options={{
         antialias: false,
         backgroundColor: 0x101615,

client/src/styles.css

@@ -224,6 +224,13 @@ main {
   position: relative;
 }
 
+.pixi-wrapper canvas {
+  width: 100% !important;
+  height: auto !important;
+  object-fit: contain;
+  max-height: 80vh; /* Prevent it from taking over too much vertical space */
+}
+
 .pixi-wrapper::before {
   content: "OFFICE_VIEW";
   position: absolute;
@@ -366,5 +373,31 @@ main {
 @media (max-width: 900px) {
   main {
     grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .app {
+    padding: 12px;
+  }
+
+  header {
+    margin-bottom: 16px;
+  }
+
+  /* Make sidebar stack visibly underneath */
+  .sidebar-stack {
+    width: 100%;
   }
 }
+
+@media (max-width: 600px) {
+  /* Smaller font for mobile */
+  :root {
+    font-size: 14px;
+  }
+  
+  .gamish-card {
+    border-width: 2px;
+  }
+}
+

client/src/useOfficeState.ts

@@ -71,6 +71,7 @@ type OfficeStatePayload = {
   appVersion?: string | null;
   lastTodoSummary?: TodoSummary | null;
   bossMessage?: BossMessage | null;
+  networkIp?: string | null;
 };
 
 const createSocketUrl = () => {
@@ -90,6 +91,7 @@ export const useOfficeState = () => {
   const [appVersion, setAppVersion] = useState<string | null>(null);
   const [lastTodoSummary, setLastTodoSummary] = useState<TodoSummary | null>(null);
   const [bossMessage, setBossMessage] = useState<BossMessage | null>(null);
+  const [networkIp, setNetworkIp] = useState<string | null>(null);
 
   useEffect(() => {
     let socket: WebSocket | null = null;
@@ -120,6 +122,7 @@ export const useOfficeState = () => {
             setAppVersion(nextState.appVersion || null);
             setLastTodoSummary(nextState.lastTodoSummary || null);
             setBossMessage(nextState.bossMessage || null);
+            setNetworkIp(nextState.networkIp || null);
             if (nextState.activeSessionId) {
               const nextActive = nextState.activeSessionId ?? null;
               setSelectedSessionId((current) => current ?? nextActive);
@@ -187,6 +190,7 @@ export const useOfficeState = () => {
     appVersion,
     lastTodoSummary,
     bossMessage,
+    networkIp,
     setSelectedAgentId,
     setSelectedSessionId,
   };

docs/index.html

@@ -32,6 +32,10 @@ <h2>Screenshots</h2>
             <div class="placeholder">Screenshot 3</div>
             <figcaption>Boss message + panels</figcaption>
           </figure>
+          <figure class="card">
+            <img src="mobile_preview.png" alt="Mobile Dashboard View" class="screenshot" />
+            <figcaption>Responsive Mobile Dashboard</figcaption>
+          </figure>
         </div>
       </section>
 
@@ -42,6 +46,7 @@ <h2>Features</h2>
           <li>Streams OpenCode events in real time</li>
           <li>Agent movement, messages, and status indicators</li>
           <li>Session and todo panels for at-a-glance context</li>
+          <li>Mobile Ready: Connect instantly via local network + QR Code</li>
         </ul>
       </section>