@neolio42/pixel-office 0.1.0

package/src/game/worker-entity.ts

@@ -0,0 +1,219 @@
+import { WorkerState } from '@/lib/types';
+import { FRAMES, FRAME_DURATIONS, AnimState } from './sprites';
+import { DESK_POSITIONS, DOOR_X, DOOR_Y, TILE_SIZE, SCALE } from './office-layout';
+
+export type FacingDir = 'down' | 'up' | 'right' | 'left';
+
+export interface WorkerEntity {
+  sessionId: string;
+  deskIndex: number;
+  charIndex: number;   // 0-5, selects which character sheet to use
+  // Position in tile coordinates (fractional for smooth movement)
+  x: number;
+  y: number;
+  targetX: number;
+  targetY: number;
+  state: AnimState;
+  facing: FacingDir;
+  frameIndex: number;
+  frameTimer: number;
+  speechBubble: string | null;
+  leaving: boolean;
+  arrived: boolean;       // has initially arrived at desk
+  inBreakRoom: boolean;   // currently heading to or at break room
+  inMeetingRoom: boolean; // currently heading to or at meeting room (plan mode)
+  // Client-side idle detection
+  lastToolTime: number; // Date.now() of last active tool call
+}
+
+const WALK_SPEED = 8; // tiles per second
+
+// Break room positions workers can go to when idle (cols 14-18, rows 1-6)
+const BREAK_ROOM_SPOTS = [
+  { x: 16, y: 4 },  // in front of coffee table
+  { x: 14, y: 3 },  // left of coffee table
+  { x: 17, y: 3 },  // right of coffee table
+  { x: 15, y: 5 },  // bottom center
+  { x: 16, y: 5 },  // bottom center-right
+];
+
+// Meeting room positions around the table (cols 14-18, rows 8-13)
+const MEETING_ROOM_SPOTS = [
+  { x: 15, y: 9 },   // above table left
+  { x: 16, y: 9 },   // above table right
+  { x: 15, y: 12 },  // below table left
+  { x: 16, y: 12 },  // below table right
+  { x: 14, y: 10 },  // left of table
+];
+
+export function createWorker(sessionId: string, deskIndex: number): WorkerEntity {
+  const desk = DESK_POSITIONS[deskIndex] || DESK_POSITIONS[0];
+  return {
+    sessionId,
+    deskIndex,
+    charIndex: deskIndex % 6,
+    x: DOOR_X,
+    y: DOOR_Y,
+    targetX: desk.chairX,
+    targetY: desk.chairY,
+    state: 'walking',
+    facing: 'up',
+    frameIndex: 0,
+    frameTimer: 0,
+    speechBubble: null,
+    leaving: false,
+    arrived: false,
+    inBreakRoom: false,
+    inMeetingRoom: false,
+    lastToolTime: Date.now(),
+  };
+}
+
+export function updateWorker(worker: WorkerEntity, dt: number): boolean {
+  // Move toward target using L-shaped path
+  const dx = worker.targetX - worker.x;
+  const dy = worker.targetY - worker.y;
+
+  if (Math.abs(dy) > 0.1 || Math.abs(dx) > 0.1) {
+    let moveX = 0;
+    let moveY = 0;
+
+    if (worker.leaving) {
+      // Leaving: horizontal first, then vertical
+      if (Math.abs(dx) > 0.1) {
+        moveX = dx;
+      } else {
+        moveY = dy;
+      }
+    } else {
+      // Arriving: vertical first, then horizontal
+      if (Math.abs(dy) > 0.1) {
+        moveY = dy;
+      } else {
+        moveX = dx;
+      }
+    }
+
+    const moveDist = Math.sqrt(moveX * moveX + moveY * moveY);
+    const step = Math.min(WALK_SPEED * dt, moveDist);
+    worker.x += (moveX / moveDist) * step;
+    worker.y += (moveY / moveDist) * step;
+    worker.state = 'walking';
+
+    // Set facing direction based on movement
+    if (Math.abs(moveY) > Math.abs(moveX)) {
+      worker.facing = moveY < 0 ? 'up' : 'down';
+    } else {
+      worker.facing = moveX < 0 ? 'left' : 'right';
+    }
+  } else {
+    worker.x = worker.targetX;
+    worker.y = worker.targetY;
+    if (worker.leaving && worker.targetX === DOOR_X && worker.targetY === DOOR_Y) {
+      return true; // signal removal
+    }
+    if (!worker.arrived) {
+      worker.arrived = true;
+      worker.state = 'idle';
+      worker.facing = 'up'; // face the desk/screen
+    } else if (worker.state === 'walking') {
+      // Reached a new target after initial arrival (break room trip or returning)
+      if (worker.inBreakRoom) {
+        worker.state = 'idle';
+        worker.facing = 'down'; // relax, face the viewer
+      } else {
+        worker.state = 'idle';
+        worker.facing = 'up'; // back at desk, face the screen
+      }
+    }
+  }
+
+  // Advance animation frame
+  const duration = FRAME_DURATIONS[worker.state];
+  worker.frameTimer += dt * 1000;
+  if (worker.frameTimer >= duration) {
+    worker.frameTimer -= duration;
+    const frames = FRAMES[worker.state];
+    worker.frameIndex = (worker.frameIndex + 1) % frames.length;
+  }
+
+  return false;
+}
+
+export function setWorkerState(worker: WorkerEntity, state: WorkerState) {
+  if (worker.leaving) return;
+
+  if (worker.arrived) {
+    // In meeting room: stay there regardless of state changes (plan mode controls exit)
+    if (worker.inMeetingRoom) {
+      const animState: AnimState = state === 'walking' ? 'walking' : state;
+      if (animState !== worker.state && worker.state !== 'walking') {
+        worker.state = animState;
+        worker.frameIndex = 0;
+        worker.frameTimer = 0;
+      }
+      return;
+    }
+
+    if (state === 'idle' && !worker.inBreakRoom) {
+      // Go to break room — pick a spot based on desk index
+      const spot = BREAK_ROOM_SPOTS[worker.deskIndex % BREAK_ROOM_SPOTS.length];
+      worker.targetX = spot.x;
+      worker.targetY = spot.y;
+      worker.inBreakRoom = true;
+      // Walking state will be set by updateWorker when dx/dy detected
+      return;
+    }
+
+    if (state !== 'idle' && worker.inBreakRoom) {
+      // Back to work — return to desk
+      const desk = DESK_POSITIONS[worker.deskIndex] || DESK_POSITIONS[0];
+      worker.targetX = desk.chairX;
+      worker.targetY = desk.chairY;
+      worker.inBreakRoom = false;
+      return;
+    }
+
+    // Normal state change at desk
+    const animState: AnimState = state === 'walking' ? 'walking' : state;
+    if (animState !== worker.state) {
+      worker.state = animState;
+      worker.frameIndex = 0;
+      worker.frameTimer = 0;
+    }
+  }
+}
+
+export function setWorkerPlanMode(worker: WorkerEntity, inPlanMode: boolean) {
+  if (worker.leaving) return;
+  if (!worker.arrived) return;
+
+  if (inPlanMode && !worker.inMeetingRoom) {
+    // Move to meeting room
+    const spot = MEETING_ROOM_SPOTS[worker.deskIndex % MEETING_ROOM_SPOTS.length];
+    worker.targetX = spot.x;
+    worker.targetY = spot.y;
+    worker.inMeetingRoom = true;
+    worker.inBreakRoom = false;
+  } else if (!inPlanMode && worker.inMeetingRoom) {
+    // Return to desk
+    const desk = DESK_POSITIONS[worker.deskIndex] || DESK_POSITIONS[0];
+    worker.targetX = desk.chairX;
+    worker.targetY = desk.chairY;
+    worker.inMeetingRoom = false;
+  }
+}
+
+export function startLeaving(worker: WorkerEntity) {
+  worker.leaving = true;
+  worker.targetX = DOOR_X;
+  worker.targetY = DOOR_Y;
+  worker.speechBubble = null;
+}
+
+export function getWorkerScreenPos(worker: WorkerEntity): { x: number; y: number } {
+  return {
+    x: worker.x * TILE_SIZE * SCALE,
+    y: worker.y * TILE_SIZE * SCALE,
+  };
+}

package/src/hooks/usePixelOffice.ts

@@ -0,0 +1,318 @@
+'use client';
+
+import { useRef, useEffect, useCallback, useState } from 'react';
+import { Session, WSMessageToClient } from '@/lib/types';
+import { buildGrid } from '@/game/office-layout';
+import { renderOffice, initRenderer } from '@/game/renderer';
+import { WorkerEntity, createWorker, updateWorker, setWorkerState, setWorkerPlanMode, startLeaving } from '@/game/worker-entity';
+import { loadAssets, AssetBundle } from '@/game/asset-loader';
+
+/** Get the speech bubble text from the session's most recent tool summary. Truncates to ~25 chars at word boundary. */
+function bubbleText(session: Session): string | null {
+  const last = session.recentTools[session.recentTools.length - 1];
+  if (!last) return null;
+  const s = last.summary;
+  if (s.length <= 25) return s;
+  // Cut at last space before limit to avoid mid-word truncation
+  const cut = s.lastIndexOf(' ', 23);
+  return (cut > 10 ? s.slice(0, cut) : s.slice(0, 23)) + '…';
+}
+
+/** For approval-request bubbles, phrase it as a question like "Can I push?" */
+function approvalLabel(toolName: string, toolInput: Record<string, unknown>): string {
+  if (toolName === 'Bash') {
+    const cmd = String(toolInput.command || '').trim();
+    // Extract the first "word" of the command for a short question
+    const firstWord = cmd.split(/\s+/)[0] || 'run';
+    const short = firstWord.length > 10 ? firstWord.slice(0, 8) + '…' : firstWord;
+    return `Can I ${short}?`;
+  }
+  if (toolName === 'Edit' || toolName === 'Write' || toolName === 'MultiEdit') return 'Can I edit?';
+  if (toolName === 'Read') return 'Can I read?';
+
+  const mcpMatch = toolName.match(/^mcp__([^_]+(?:_[^_]+)*)__(.+)$/);
+  if (mcpMatch) {
+    const server = mcpMatch[1].toLowerCase();
+    if (server.includes('chrome') || server.includes('browser') || server.includes('playwright')) return 'Browser?';
+    if (server.includes('clickup')) return 'ClickUp?';
+    const cleaned = server.replace(/[-_]+/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    return (cleaned.length > 12 ? cleaned.slice(0, 10) + '…' : cleaned) + '?';
+  }
+
+  const label = toolName.length > 15 ? toolName.slice(0, 13) + '…' : toolName;
+  return `${label}?`;
+}
+
+export interface ApprovalRequest {
+  id: string;
+  sessionId: string;
+  toolName: string;
+  toolInput: Record<string, unknown>;
+}
+
+export interface PtyTab {
+  ptyId: string;
+  cwd: string;
+  exited: boolean;
+  exitCode?: number;
+}
+
+export function usePixelOffice(canvasRef: React.RefObject<HTMLCanvasElement | null>) {
+  const wsRef = useRef<WebSocket | null>(null);
+  const workersRef = useRef<Map<string, WorkerEntity>>(new Map());
+  const gridRef = useRef(buildGrid());
+  const animFrameRef = useRef<number>(0);
+  const lastTimeRef = useRef<number>(0);
+  const assetsRef = useRef<AssetBundle | null>(null);
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [approvals, setApprovals] = useState<ApprovalRequest[]>([]);
+  const [assetsLoaded, setAssetsLoaded] = useState(false);
+  const [selectedWorker, setSelectedWorker] = useState<string | null>(null);
+  const [ptyTabs, setPtyTabs] = useState<PtyTab[]>([]);
+  const [spawnError, setSpawnError] = useState<string | null>(null);
+  /** Map of ptyId → data handler, so multiple terminals can receive data simultaneously */
+  const terminalHandlersRef = useRef<Map<string, (msg: WSMessageToClient) => void>>(new Map());
+  const exitTimersRef = useRef<Set<ReturnType<typeof setTimeout>>>(new Set());
+  const initialSyncDoneRef = useRef(false);
+  /** Called on successful spawn — used by UI to save recents only on success */
+  const onSpawnSuccessRef = useRef<((ptyId: string) => void) | null>(null);
+
+  const sendApproval = useCallback((approvalId: string, decision: 'allow' | 'deny') => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({
+        type: 'approval-response',
+        approvalId,
+        decision,
+      }));
+    }
+    setApprovals(prev => prev.filter(a => a.id !== approvalId));
+  }, []);
+
+  const spawnSession = useCallback((cwd: string) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({
+        type: 'spawn-session',
+        cwd,
+      }));
+    }
+  }, []);
+
+  /** Update existing ptyTab cwd from session data. Never creates tabs —
+   *  creation only happens via spawn-result or initial sessions snapshot on connect. */
+  const syncPtyTabRef = useRef((session: Session) => {
+    if (!session.ptyId) return;
+    setPtyTabs(prev => {
+      const idx = prev.findIndex(t => t.ptyId === session.ptyId);
+      if (idx < 0) return prev; // don't auto-create — user may have closed it
+      if (prev[idx].cwd === session.cwd) return prev;
+      const next = [...prev];
+      next[idx] = { ...next[idx], cwd: session.cwd };
+      return next;
+    });
+  });
+
+  // Load assets on mount
+  useEffect(() => {
+    loadAssets().then(bundle => {
+      assetsRef.current = bundle;
+      initRenderer(bundle);
+      setAssetsLoaded(true);
+    }).catch(err => {
+      console.error('[Assets] Failed to load:', err);
+    });
+  }, []);
+
+  // WebSocket connection
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}/ws`);
+    wsRef.current = ws;
+
+    const handleMessage = (event: MessageEvent) => {
+      let msg: WSMessageToClient;
+      try {
+        msg = JSON.parse(event.data);
+      } catch (err) {
+        console.error('[WS] Failed to parse message:', err);
+        return;
+      }
+      switch (msg.type) {
+        case 'sessions': {
+          setSessions(msg.sessions);
+          const workers = workersRef.current;
+          for (const s of msg.sessions) {
+            if (!workers.has(s.sessionId)) {
+              workers.set(s.sessionId, createWorker(s.sessionId, s.deskIndex));
+            }
+            if (!initialSyncDoneRef.current && s.ptyId) {
+              // First sessions message (page load) — restore tabs for live embedded PTYs
+              setPtyTabs(prev => prev.some(t => t.ptyId === s.ptyId) ? prev : [...prev, { ptyId: s.ptyId!, cwd: s.cwd, exited: false }]);
+            } else {
+              syncPtyTabRef.current(s); // subsequent messages — only update cwd
+            }
+          }
+          initialSyncDoneRef.current = true;
+          const sessionIds = new Set(msg.sessions.map(s => s.sessionId));
+          for (const [id, worker] of workers) {
+            if (!sessionIds.has(id) && !worker.leaving) {
+              startLeaving(worker);
+            }
+          }
+          break;
+        }
+        case 'session-update': {
+          const workers = workersRef.current;
+          const s = msg.session;
+          syncPtyTabRef.current(s);
+          setSessions(prev => {
+            const idx = prev.findIndex(p => p.sessionId === s.sessionId);
+            if (idx >= 0) {
+              const next = [...prev];
+              next[idx] = s;
+              return next;
+            }
+            return [...prev, s];
+          });
+          if (!workers.has(s.sessionId)) {
+            workers.set(s.sessionId, createWorker(s.sessionId, s.deskIndex));
+          }
+          const worker = workers.get(s.sessionId)!;
+          setWorkerState(worker, s.state);
+          // Handle plan mode
+          setWorkerPlanMode(worker, !!s.inPlanMode);
+          // Speech bubbles — focus title is hero, tool summary is fallback
+          if (s.state === 'waiting') {
+            worker.speechBubble = approvalLabel(s.currentTool || 'Unknown', {});
+          } else if (s.state === 'typing' || s.state === 'reading') {
+            // Focus (intent) is primary, tool summary is fallback
+            const text = s.currentFocus || bubbleText(s);
+            if (text) {
+              if (text.length <= 22) {
+                worker.speechBubble = text;
+              } else {
+                const cut = text.lastIndexOf(' ', 20);
+                worker.speechBubble = (cut > 8 ? text.slice(0, cut) : text.slice(0, 20)) + '…';
+              }
+            } else {
+              worker.speechBubble = null;
+            }
+          } else if (s.state === 'idle') {
+            worker.speechBubble = null;
+          }
+          break;
+        }
+        case 'session-remove': {
+          setSessions(prev => prev.filter(s => s.sessionId !== msg.sessionId));
+          const worker = workersRef.current.get(msg.sessionId);
+          if (worker) startLeaving(worker);
+          break;
+        }
+        case 'approval-request': {
+          setApprovals(prev => [...prev, msg.approval]);
+          const worker = workersRef.current.get(msg.approval.sessionId);
+          if (worker) worker.speechBubble = approvalLabel(msg.approval.toolName, msg.approval.toolInput);
+          break;
+        }
+        case 'approval-resolved': {
+          setApprovals(prev => prev.filter(a => a.id !== msg.approvalId));
+          break;
+        }
+        case 'notification': {
+          console.log(`[Notification] ${msg.sessionId}: ${msg.message}`);
+          break;
+        }
+        case 'spawn-result': {
+          if (msg.success && msg.ptyId) {
+            setPtyTabs(prev => prev.some(t => t.ptyId === msg.ptyId) ? prev : [...prev, { ptyId: msg.ptyId, cwd: '', exited: false }]);
+            setSpawnError(null);
+            onSpawnSuccessRef.current?.(msg.ptyId);
+          } else {
+            const errMsg = msg.error || 'Spawn failed';
+            setSpawnError(errMsg);
+          }
+          break;
+        }
+        case 'terminal-exited': {
+          terminalHandlersRef.current.get(msg.ptyId)?.(msg);
+          // Remove the tab — ghost tabs (exitCode -1) immediately, normal exits after 2s
+          const delay = msg.exitCode === -1 ? 0 : 2000;
+          const timerId = setTimeout(() => {
+            exitTimersRef.current.delete(timerId);
+            setPtyTabs(prev => prev.filter(t => t.ptyId !== msg.ptyId));
+          }, delay);
+          exitTimersRef.current.add(timerId);
+          break;
+        }
+        case 'terminal-output':
+        case 'terminal-scrollback': {
+          // Forward to the specific terminal's handler
+          const handler = terminalHandlersRef.current.get(msg.ptyId);
+          handler?.(msg);
+          break;
+        }
+      }
+    };
+
+    ws.addEventListener('message', handleMessage);
+    ws.onclose = () => console.log('[WS] Disconnected');
+    ws.onerror = (err) => console.error('[WS] Error:', err);
+
+    return () => {
+      ws.removeEventListener('message', handleMessage);
+      ws.close();
+      for (const id of exitTimersRef.current) clearTimeout(id);
+      exitTimersRef.current.clear();
+    };
+  }, []);
+
+  // Game loop — starts only after assets are loaded
+  useEffect(() => {
+    if (!assetsLoaded) return;
+
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const loop = (time: number) => {
+      const dt = lastTimeRef.current ? (time - lastTimeRef.current) / 1000 : 0.016;
+      lastTimeRef.current = time;
+
+      // Update workers
+      const toRemove: string[] = [];
+      for (const [id, worker] of workersRef.current) {
+        const done = updateWorker(worker, dt);
+        if (done) toRemove.push(id);
+      }
+      for (const id of toRemove) {
+        workersRef.current.delete(id);
+      }
+
+      // Render
+      renderOffice(ctx, gridRef.current, [...workersRef.current.values()], dt);
+
+      animFrameRef.current = requestAnimationFrame(loop);
+    };
+
+    animFrameRef.current = requestAnimationFrame(loop);
+
+    return () => { cancelAnimationFrame(animFrameRef.current); };
+  }, [assetsLoaded, canvasRef]);
+
+  return {
+    sessions,
+    approvals,
+    sendApproval,
+    assetsLoaded,
+    selectedWorker,
+    setSelectedWorker,
+    workersRef,
+    wsRef,
+    ptyTabs,
+    setPtyTabs,
+    spawnSession,
+    spawnError,
+    terminalHandlersRef,
+    onSpawnSuccessRef,
+  };
+}

package/src/hooks/useRecentCwds.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+const STORAGE_KEY = 'pixel-office-recent-cwds';
+const MAX_RECENTS = 10;
+
+export function useRecentCwds() {
+  const [recents, setRecents] = useState<string[]>([]);
+
+  useEffect(() => {
+    try {
+      const stored = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+      if (Array.isArray(stored)) setRecents(stored);
+    } catch { /* ignore */ }
+  }, []);
+
+  const saveRecent = useCallback((cwd: string) => {
+    setRecents(prev => {
+      const updated = [cwd, ...prev.filter(c => c !== cwd)].slice(0, MAX_RECENTS);
+      try { localStorage.setItem(STORAGE_KEY, JSON.stringify(updated)); } catch {}
+      return updated;
+    });
+  }, []);
+
+  return { recents, saveRecent };
+}

package/src/lib/approval-queue.ts

@@ -0,0 +1,67 @@
+import { PendingApproval } from './types';
+
+// Use globalThis so the same pending Map is shared across
+// Next.js App Router module instances and the custom server.ts
+declare global {
+  // eslint-disable-next-line no-var
+  var __pending: Map<string, PendingApproval> | undefined;
+  // eslint-disable-next-line no-var
+  var __approvalIdCounter: number | undefined;
+}
+
+function getPending(): Map<string, PendingApproval> {
+  if (!globalThis.__pending) {
+    globalThis.__pending = new Map();
+  }
+  return globalThis.__pending;
+}
+
+function nextId(): number {
+  if (globalThis.__approvalIdCounter === undefined) {
+    globalThis.__approvalIdCounter = 0;
+  }
+  return ++globalThis.__approvalIdCounter;
+}
+
+export function createApproval(
+  sessionId: string,
+  toolName: string,
+  toolInput: Record<string, unknown>
+): { approval: PendingApproval; promise: Promise<'allow' | 'deny'> } {
+  const pending = getPending();
+  const id = `approval-${nextId()}-${Date.now()}`;
+
+  let resolveRef!: (decision: 'allow' | 'deny') => void;
+  const promise = new Promise<'allow' | 'deny'>((resolve) => {
+    resolveRef = resolve;
+  });
+
+  const approval: PendingApproval = {
+    id,
+    sessionId,
+    toolName,
+    toolInput,
+    createdAt: Date.now(),
+    resolve: resolveRef,
+  };
+
+  pending.set(id, approval);
+
+  // No timeout — approval stays open until the boss decides.
+  // If no browser is connected, the pre-tool-use route handles fallthrough.
+
+  return { approval, promise };
+}
+
+export function resolveApproval(id: string, decision: 'allow' | 'deny'): boolean {
+  const pending = getPending();
+  const entry = pending.get(id);
+  if (!entry) return false;
+  pending.delete(id);
+  entry.resolve(decision);
+  return true;
+}
+
+export function getPendingApprovals(): PendingApproval[] {
+  return [...getPending().values()];
+}