@neolio42/pixel-office 0.1.0

package/src/app/api/hooks/user-prompt/route.ts

@@ -0,0 +1,92 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getSession, addSession, setSessionFocus, setSessionTask } from '@/lib/store';
+import { broadcast } from '@/lib/ws-server';
+
+/** Action verbs for finding actionable sentences. */
+const ACTION_RE = /\b(fix|add|remove|delet|creat|updat|build|clean|mak|implement|refactor|debug|check|test|writ|mov|renam|chang|set|configur|deploy|push|install|upgrad|migrat|convert|pars|extract|handl|show|hid|enabl|disabl|run|start|stop|appl|open|clos|review|audit|verif|ensur|improv|optimiz|rewrit|redesign|simplif|merg|split|connect|hook|scaffold|setup|integrat|strip|display|render|read|edit|search|reload|restart|clear|increas|look\s*at|work\s*on|clean\s*up|set\s*up|figure\s*out)\w*\b/i;
+
+const STRIP = [
+  /^.*?\bhow\s+about\s+(we\s+)?/i,
+  /^.*?\blet'?s\s+(just\s+)?/i,
+  /^.*?\bwe\s+(need|have|should|could|want)\s+to\s+/i,
+  /^.*?\bi\s+(need|want)\s+you\s+to\s+/i,
+  /^.*?\b(can|could|would)\s+you\s+(please\s+)?/i,
+  /^(right|ok|okay|alright|so|now|first|also|then|next|and|but|like|dude|honestly|basically|well)\s*(,\s*|\s+)/i,
+  /^(you\s+know,?\s*)/i,
+  /^(we'?re\s+trying\s+to\s+)/i,
+  /^(first\s+of\s+all|in\s+addition(\s+to\s+that)?)\s*(,\s*|\s+)/i,
+  /^(please\s+)/i,
+  /^(make\s+sure\s+(that\s+)?(we\s+)?(don'?t\s+)?)/i,
+  /^(I\s+think\s+(we\s+should\s+)?)/i,
+  /^(we\s+need\s+to\s+)/i,
+  /^(implement\s+the\s+following\s+(plan|task|request):\s*)/i,
+];
+
+/** Quick heuristic focus from user prompt — used as fallback until transcript is read. */
+export function extractPromptFocus(prompt: string): string | null {
+  // Split into sentences
+  const sentences = prompt.split(/(?<=[.!?\n])\s+/)
+    .map(s => s.trim())
+    .filter(s => s.length > 8);
+
+  // Skip noise sentences
+  function isNoise(s: string): boolean {
+    if (s.startsWith('```') || s.startsWith('---') || s.startsWith('<')) return true;
+    if (!ACTION_RE.test(s)) {
+      if (/^(right|ok|okay|yeah|yea|no|yes|sure|dude|honestly|it'?s|that'?s|this is|not|how many|why|what the|I don'?t|we'?re|I'?m|you'?re)\b/i.test(s)) return true;
+      if (s.endsWith('?')) return true;
+    }
+    return false;
+  }
+
+  // Find first actionable sentence
+  let chosen = sentences.find(s => !isNoise(s) && ACTION_RE.test(s));
+  if (!chosen) chosen = sentences.find(s => !isNoise(s));
+  if (!chosen) return null;
+
+  // Clean it
+  for (const p of STRIP) {
+    chosen = chosen.replace(p, '');
+  }
+  chosen = chosen.replace(/[.!:]+$/, '').replace(/\s+(and\s+shit|and\s+stuff|or\s+whatever)$/i, '').trim();
+
+  if (chosen.length < 5) return null;
+  chosen = chosen[0].toUpperCase() + chosen.slice(1);
+
+  return chosen;
+}
+
+export async function POST(req: NextRequest) {
+  const body = await req.json();
+  const sessionId = body.session_id;
+  const prompt = body.prompt || '';
+  const cwd = body.cwd || '';
+
+  if (!sessionId || !prompt || prompt.length < 5 || prompt.startsWith('<')) {
+    return NextResponse.json({ status: 'ok' });
+  }
+
+  if (/^(continue|yes|no|ok|sure|go|y|n|done|looks good|lgtm)\s*[.!?]*$/i.test(prompt.trim())) {
+    return NextResponse.json({ status: 'ok' });
+  }
+
+  if (!getSession(sessionId)) addSession(sessionId, cwd);
+
+  const session = getSession(sessionId);
+  if (!session) return NextResponse.json({ status: 'ok' });
+
+  // Set heuristic focus from prompt as placeholder
+  // PreToolUse will try to upgrade this from the transcript
+  const promptFocus = extractPromptFocus(prompt);
+  session.needsFocusUpdate = true;
+  if (promptFocus) {
+    setSessionFocus(sessionId, promptFocus);
+  } else {
+    session.currentFocus = undefined;
+  }
+  broadcast({ type: 'session-update', session });
+
+  if (!session.task) setSessionTask(sessionId, prompt.slice(0, 120));
+
+  return NextResponse.json({ status: 'ok' });
+}

package/src/app/globals.css

@@ -0,0 +1,14 @@
+@import "tailwindcss";
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #1a1a2e;
+  color: #ededed;
+  font-family: monospace;
+}
+
+canvas {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}

package/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Pixel Office",
+  description: "Watch your Claude Code sessions as pixel art workers",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="bg-[#1a1a2e] text-white overflow-hidden">
+        {children}
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { OfficeCanvas } from '@/components/OfficeCanvas';
+
+export default function Home() {
+  return <OfficeCanvas />;
+}

package/src/components/ApprovalToast.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { ApprovalRequest } from '@/hooks/usePixelOffice';
+import { Session } from '@/lib/types';
+
+const WORKER_NAMES = ['Pixel', 'Byte', 'Cache', 'Queue', 'Stack'];
+
+/** Clean up a tool name for display — strips mcp__ prefix and underscores. */
+function cleanToolName(toolName: string): string {
+  const mcpMatch = toolName.match(/^mcp__([^_]+(?:_[^_]+)*)__(.+)$/);
+  if (mcpMatch) {
+    const server = mcpMatch[1].replace(/[-_]+/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    const action = mcpMatch[2].replace(/[-_]+/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    return `${server}: ${action}`;
+  }
+  return toolName;
+}
+
+function formatToolDetails(toolName: string, toolInput: Record<string, unknown>): { title: string; details: string[] } {
+  if (toolName === 'Bash' || toolName === 'BashOutput') {
+    const cmd = String(toolInput.command || '').trim();
+    return {
+      title: 'Run command',
+      details: [cmd],
+    };
+  }
+
+  if (toolName === 'Edit' || toolName === 'Write' || toolName === 'MultiEdit') {
+    const path = String(toolInput.file_path || '');
+    const shortPath = path.split('/').slice(-3).join('/');
+    return {
+      title: `${toolName} file`,
+      details: [shortPath],
+    };
+  }
+
+  if (toolName === 'Read') {
+    const path = String(toolInput.file_path || '');
+    const shortPath = path.split('/').slice(-3).join('/');
+    return {
+      title: 'Read file',
+      details: [shortPath],
+    };
+  }
+
+  // MCP or unknown tool: clean up the name and show string input values
+  const title = cleanToolName(toolName);
+  const details: string[] = [];
+  for (const [key, value] of Object.entries(toolInput)) {
+    if (typeof value === 'string') {
+      details.push(`${key}: ${value.length > 120 ? value.slice(0, 120) + '…' : value}`);
+    } else if (typeof value === 'number' || typeof value === 'boolean') {
+      details.push(`${key}: ${value}`);
+    }
+  }
+  if (details.length === 0) {
+    details.push(JSON.stringify(toolInput).slice(0, 200));
+  }
+
+  return { title, details };
+}
+
+interface Props {
+  approval: ApprovalRequest;
+  session?: Session;
+  onDecision: (approvalId: string, decision: 'allow' | 'deny') => void;
+}
+
+export function ApprovalToast({ approval, session, onDecision }: Props) {
+  const { title, details } = formatToolDetails(approval.toolName, approval.toolInput);
+  const workerName = session ? (WORKER_NAMES[session.deskIndex] ?? `Worker ${session.deskIndex}`) : null;
+  const cwdShort = session ? session.cwd.split('/').slice(-2).join('/') : null;
+
+  return (
+    <div className="bg-[#1a1a2e] border border-[#bf8b4a]/60 rounded-lg shadow-2xl min-w-[420px] max-w-[580px] overflow-hidden">
+      {/* Header */}
+      <div className="px-4 py-2.5 bg-[#bf8b4a]/10 border-b border-[#bf8b4a]/20 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-[#bf8b4a] animate-pulse" />
+          <span className="text-[#bf8b4a] text-xs font-mono font-bold uppercase tracking-wider">
+            Approval Required
+          </span>
+        </div>
+        {workerName && (
+          <span className="text-[#6a6a8a] text-xs font-mono">
+            {workerName}{cwdShort ? ` · ${cwdShort}` : ''}
+          </span>
+        )}
+      </div>
+
+      {/* Task context */}
+      {session?.task && (
+        <div className="px-4 pt-2 pb-0">
+          <div className="text-[#8899aa] text-xs font-mono truncate" title={session.task}>
+            {session.task.replace(/^[\s—–\-•*]+/, '')}
+          </div>
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="px-4 py-3">
+        <div className="text-[#ccccee] text-sm font-mono font-bold mb-2">
+          {title}
+        </div>
+        <div className="bg-[#0e0e1a] rounded border border-[#2a2a4a] p-2.5 mb-3 max-h-[120px] overflow-y-auto">
+          {details.map((line, i) => (
+            <div key={i} className="text-[#9999bb] text-xs font-mono break-all whitespace-pre-wrap leading-relaxed">
+              {line}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="px-4 pb-3 flex gap-2">
+        <button
+          onClick={() => onDecision(approval.id, 'allow')}
+          className="flex-1 px-4 py-2.5 bg-[#1a3a2a] hover:bg-[#2a5a3a] border border-[#2a6b3a] text-[#4abf5c] text-sm font-mono font-bold rounded transition-colors cursor-pointer flex items-center justify-center gap-2"
+        >
+          <span>Approve</span>
+          <span className="text-[#4abf5c]/60 text-xs">⌘Y</span>
+        </button>
+        <button
+          onClick={() => onDecision(approval.id, 'deny')}
+          className="flex-1 px-4 py-2.5 bg-[#3a1a1a] hover:bg-[#5a2a2a] border border-[#6b2a2a] text-[#e05c5c] text-sm font-mono font-bold rounded transition-colors cursor-pointer"
+        >
+          Deny
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/OfficeCanvas.tsx

@@ -0,0 +1,311 @@
+'use client';
+
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRecentCwds } from '@/hooks/useRecentCwds';
+import { CANVAS_W, CANVAS_H, TILE_SIZE, SCALE } from '@/game/office-layout';
+import { usePixelOffice } from '@/hooks/usePixelOffice';
+import { WorkerPanel } from './WorkerPanel';
+import { ApprovalToast } from './ApprovalToast';
+import { WorkerPopup } from './WorkerPopup';
+import { TerminalTile, EmptyTile } from './TerminalTile';
+
+/** Max terminals visible in the grid at once */
+const MAX_TILES = 3;
+
+export function OfficeCanvas() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const {
+    sessions, approvals, sendApproval, assetsLoaded,
+    selectedWorker, setSelectedWorker, workersRef,
+    wsRef, ptyTabs, setPtyTabs, spawnSession, spawnError, terminalHandlersRef, onSpawnSuccessRef,
+  } = usePixelOffice(canvasRef);
+  const [popupAnchor, setPopupAnchor] = useState<{ x: number; y: number } | null>(null);
+  const [viewportSize, setViewportSize] = useState({ w: 0, h: 0 });
+
+  // Which ptyIds are pinned to visible tiles (up to MAX_TILES)
+  const [visiblePtyIds, setVisiblePtyIds] = useState<string[]>([]);
+
+  // Sync visible tiles when tabs change
+  useEffect(() => {
+    setVisiblePtyIds(prev => {
+      // Remove any that no longer exist in ptyTabs
+      const filtered = prev.filter(id => ptyTabs.some(t => t.ptyId === id));
+      // Auto-add new tabs if there's room
+      for (const tab of ptyTabs) {
+        if (filtered.length >= MAX_TILES) break;
+        if (!filtered.includes(tab.ptyId)) {
+          filtered.push(tab.ptyId);
+        }
+      }
+      if (filtered.length === prev.length && filtered.every((id, i) => prev[i] === id)) return prev;
+      return filtered;
+    });
+  }, [ptyTabs]);
+
+  useEffect(() => {
+    const update = () => setViewportSize({ w: window.innerWidth, h: window.innerHeight });
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  const openTerminal = useCallback((ptyId: string) => {
+    // Ensure tab exists in ptyTabs (may have been removed on close)
+    setPtyTabs(prev => prev.some(t => t.ptyId === ptyId) ? prev : [...prev, { ptyId, cwd: '', exited: false }]);
+    setVisiblePtyIds(prev => {
+      if (prev.includes(ptyId)) return prev;
+      if (prev.length < MAX_TILES) return [...prev, ptyId];
+      return [...prev.slice(0, -1), ptyId];
+    });
+  }, [setPtyTabs]);
+
+  const closeTerminalTile = useCallback((ptyId: string) => {
+    setPtyTabs(prev => prev.filter(t => t.ptyId !== ptyId));
+    setVisiblePtyIds(prev => prev.filter(id => id !== ptyId));
+  }, [setPtyTabs]);
+
+  const { saveRecent } = useRecentCwds();
+  const pendingSpawnCwdRef = useRef<string | null>(null);
+
+  const handleSpawn = useCallback((cwd: string) => {
+    pendingSpawnCwdRef.current = cwd;
+    spawnSession(cwd);
+  }, [spawnSession]);
+
+  // Save to recents only on successful spawn
+  useEffect(() => {
+    onSpawnSuccessRef.current = () => {
+      if (pendingSpawnCwdRef.current) {
+        saveRecent(pendingSpawnCwdRef.current);
+        pendingSpawnCwdRef.current = null;
+      }
+    };
+  }, [saveRecent, onSpawnSuccessRef]);
+
+  // Drag-to-swap tile reordering
+  const dragSourceRef = useRef<string | null>(null);
+
+  const handleTileDragStart = useCallback((ptyId: string) => {
+    dragSourceRef.current = ptyId;
+  }, []);
+
+  const handleTileDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const handleTileDrop = useCallback((targetPtyId: string) => {
+    const sourcePtyId = dragSourceRef.current;
+    if (!sourcePtyId || sourcePtyId === targetPtyId) return;
+    setVisiblePtyIds(prev => {
+      const sourceIdx = prev.indexOf(sourcePtyId);
+      const targetIdx = prev.indexOf(targetPtyId);
+      if (targetIdx < 0) return prev;
+      // Source is from panel (not visible) — replace target
+      if (sourceIdx < 0) {
+        const next = [...prev];
+        next[targetIdx] = sourcePtyId;
+        return next;
+      }
+      // Both visible — swap
+      const next = [...prev];
+      next[sourceIdx] = targetPtyId;
+      next[targetIdx] = sourcePtyId;
+      return next;
+    });
+    dragSourceRef.current = null;
+  }, []);
+
+  const handleCanvasClick = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const rect = canvas.getBoundingClientRect();
+    const displayW = rect.width;
+    const displayH = rect.height;
+
+    const scaleX = displayW / CANVAS_W;
+    const scaleY = displayH / CANVAS_H;
+    const fitScale = Math.min(scaleX, scaleY);
+
+    const renderedW = CANVAS_W * fitScale;
+    const renderedH = CANVAS_H * fitScale;
+    const offsetX = (displayW - renderedW) / 2;
+    const offsetY = (displayH - renderedH) / 2;
+
+    const clickX = e.clientX - rect.left - offsetX;
+    const clickY = e.clientY - rect.top - offsetY;
+
+    const logicalX = clickX / fitScale;
+    const logicalY = clickY / fitScale;
+    const tileX = logicalX / (TILE_SIZE * SCALE);
+    const tileY = logicalY / (TILE_SIZE * SCALE);
+
+    const CLICK_RADIUS = 1.5;
+    let closest: string | null = null;
+    let closestDist = CLICK_RADIUS;
+
+    for (const [id, worker] of workersRef.current) {
+      const dist = Math.sqrt((worker.x - tileX) ** 2 + (worker.y - tileY) ** 2);
+      if (dist < closestDist) {
+        closestDist = dist;
+        closest = id;
+      }
+    }
+
+    if (closest) {
+      setSelectedWorker(closest);
+      const worker = workersRef.current.get(closest)!;
+      const workerLogicalX = worker.x * TILE_SIZE * SCALE;
+      const workerLogicalY = worker.y * TILE_SIZE * SCALE;
+      const vpX = rect.left + offsetX + workerLogicalX * fitScale;
+      const vpY = rect.top + offsetY + workerLogicalY * fitScale;
+      setPopupAnchor({ x: vpX, y: vpY });
+    } else {
+      setSelectedWorker(null);
+      setPopupAnchor(null);
+    }
+  }, [workersRef, setSelectedWorker, sessions]);
+
+  const handleDismissPopup = useCallback(() => {
+    setSelectedWorker(null);
+    setPopupAnchor(null);
+  }, [setSelectedWorker]);
+
+  // ⌘Y keyboard shortcut — approve the oldest pending approval
+  const approvalsRef = useRef(approvals);
+  useEffect(() => { approvalsRef.current = approvals; }, [approvals]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'y') {
+        e.preventDefault();
+        const oldest = approvalsRef.current[0];
+        if (oldest) sendApproval(oldest.id, 'allow');
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [sendApproval]);
+
+  // Build the grid tiles: office + terminals + empty slots
+  const visibleTabs = visiblePtyIds
+    .map(id => ptyTabs.find(t => t.ptyId === id))
+    .filter((t): t is NonNullable<typeof t> => !!t);
+
+  const terminalCount = visibleTabs.length;
+  const showEmptyTile = terminalCount < MAX_TILES;
+
+  // Grid layout: 2x2 with office always top-left
+  // 0 terminals: office fills the whole area
+  // 1 terminal: office left, terminal right
+  // 2 terminals: office top-left, term1 top-right, term2 bottom spanning full
+  // 3 terminals: office top-left, term1 top-right, term2 bottom-left, term3 bottom-right
+  const totalTiles = terminalCount + (showEmptyTile ? 1 : 0);
+
+  return (
+    <div className="flex h-screen w-screen bg-[#08080f] overflow-hidden">
+      {/* Main grid area */}
+      <div className={`flex-1 grid gap-[1px] p-[1px] min-w-0 ${
+        totalTiles === 0
+          ? 'grid-cols-1 grid-rows-1'
+          : totalTiles <= 1
+            ? 'grid-cols-2 grid-rows-1'
+            : 'grid-cols-2 grid-rows-2'
+      }`}>
+        {/* Office tile — always present */}
+        <div className={`relative flex items-center justify-center bg-[#0e0e1e] rounded overflow-hidden ${
+          totalTiles >= 3 ? '' : totalTiles === 2 ? '' : totalTiles === 0 ? 'col-span-2 row-span-2' : ''
+        }`}>
+          {!assetsLoaded && (
+            <div className="absolute inset-0 flex items-center justify-center z-20">
+              <span className="text-[#8888aa] font-mono text-sm animate-pulse">Loading assets…</span>
+            </div>
+          )}
+          <canvas
+            ref={canvasRef}
+            width={CANVAS_W}
+            height={CANVAS_H}
+            className="max-w-full max-h-full object-contain cursor-pointer"
+            style={{ imageRendering: 'pixelated', opacity: assetsLoaded ? 1 : 0 }}
+            onClick={handleCanvasClick}
+          />
+          {/* Approval toasts */}
+          <div className="absolute top-3 left-1/2 -translate-x-1/2 flex flex-col gap-2 z-30">
+            {approvals.map(approval => (
+              <ApprovalToast
+                key={approval.id}
+                approval={approval}
+                session={sessions.find(s => s.sessionId === approval.sessionId)}
+                onDecision={sendApproval}
+              />
+            ))}
+          </div>
+          {/* Worker popup */}
+          {selectedWorker && popupAnchor && (() => {
+            const session = sessions.find(s => s.sessionId === selectedWorker);
+            if (!session) return null;
+            return (
+              <WorkerPopup
+                session={session}
+                anchorX={popupAnchor.x}
+                anchorY={popupAnchor.y}
+                viewportW={viewportSize.w}
+                viewportH={viewportSize.h}
+                onDismiss={handleDismissPopup}
+                onOpenTerminal={session.ptyId ? () => openTerminal(session.ptyId!) : undefined}
+              />
+            );
+          })()}
+        </div>
+
+        {/* Terminal tiles */}
+        {visibleTabs.map((tab) => (
+          <TerminalTile
+            key={tab.ptyId}
+            tab={tab}
+            session={sessions.find(s => s.ptyId === tab.ptyId)}
+            wsRef={wsRef}
+            terminalHandlers={terminalHandlersRef}
+            onClose={() => closeTerminalTile(tab.ptyId)}
+            onSpawnHere={handleSpawn}
+            onDragStart={() => handleTileDragStart(tab.ptyId)}
+            onDragOver={handleTileDragOver}
+            onDrop={() => handleTileDrop(tab.ptyId)}
+          />
+        ))}
+
+        {/* Empty tile for spawning */}
+        {showEmptyTile && totalTiles > 0 && (
+          <EmptyTile
+            onSpawn={handleSpawn}
+            spawnError={spawnError}
+            onDropPty={(ptyId) => {
+              setVisiblePtyIds(prev => {
+                if (prev.includes(ptyId)) return prev;
+                if (prev.length >= MAX_TILES) return prev;
+                return [...prev, ptyId];
+              });
+            }}
+          />
+        )}
+      </div>
+
+      {/* Right panel — sessions */}
+      <WorkerPanel
+        sessions={sessions}
+        visiblePtyIds={visiblePtyIds}
+        onSelectWorker={(id) => {
+          if (id) {
+            setSelectedWorker(null);
+            setPopupAnchor(null);
+          }
+        }}
+        onOpenTerminal={openTerminal}
+        onSpawn={handleSpawn}
+        spawnError={spawnError}
+        onDragSessionStart={handleTileDragStart}
+      />
+    </div>
+  );
+}