@neolio42/pixel-office 0.1.0

package/src/components/Terminal.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { Terminal as XTerm } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { WSMessageToClient } from '@/lib/types';
+import '@xterm/xterm/css/xterm.css';
+
+interface TerminalProps {
+  ptyId: string;
+  wsRef: React.RefObject<WebSocket | null>;
+  terminalHandlers: React.RefObject<Map<string, (msg: WSMessageToClient) => void>>;
+}
+
+export function Terminal({ ptyId, wsRef, terminalHandlers }: TerminalProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const xtermRef = useRef<XTerm | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const subscribedRef = useRef(false);
+  const scrollbackReceivedRef = useRef(false);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Reuse existing terminal if StrictMode remounted us
+    if (xtermRef.current) {
+      if (!containerRef.current.querySelector('.xterm')) {
+        xtermRef.current.open(containerRef.current);
+        requestAnimationFrame(() => fitAddonRef.current?.fit());
+      }
+    } else {
+      const term = new XTerm({
+        theme: {
+          background: '#0e0e1e',
+          foreground: '#c8c8d8',
+          cursor: '#c8c8d8',
+          selectionBackground: '#3a3a6a',
+          black: '#0e0e1e',
+          red: '#ff5555',
+          green: '#50fa7b',
+          yellow: '#f1fa8c',
+          blue: '#6272a4',
+          magenta: '#ff79c6',
+          cyan: '#8be9fd',
+          white: '#c8c8d8',
+          brightBlack: '#555577',
+          brightRed: '#ff6e6e',
+          brightGreen: '#69ff94',
+          brightYellow: '#ffffa5',
+          brightBlue: '#d6acff',
+          brightMagenta: '#ff92df',
+          brightCyan: '#a4ffff',
+          brightWhite: '#ffffff',
+        },
+        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+        fontSize: 13,
+        lineHeight: 1.2,
+        cursorBlink: true,
+        allowProposedApi: true,
+      });
+
+      const fitAddon = new FitAddon();
+      term.loadAddon(fitAddon);
+      term.open(containerRef.current);
+      requestAnimationFrame(() => fitAddon.fit());
+
+      xtermRef.current = term;
+      fitAddonRef.current = fitAddon;
+    }
+
+    const term = xtermRef.current!;
+    const fitAddon = fitAddonRef.current!;
+
+    // Subscribe to terminal output (only once)
+    const ws = wsRef.current;
+    const doSubscribe = (socket: WebSocket) => {
+      if (subscribedRef.current) return;
+      subscribedRef.current = true;
+      scrollbackReceivedRef.current = false;
+      const dims = fitAddon.proposeDimensions();
+      socket.send(JSON.stringify({
+        type: 'terminal-subscribe',
+        ptyId,
+        ...(dims ? { cols: dims.cols, rows: dims.rows } : {}),
+      }));
+    };
+    let onOpen: (() => void) | null = null;
+    if (ws) {
+      if (ws.readyState === WebSocket.OPEN) {
+        doSubscribe(ws);
+      } else {
+        onOpen = () => doSubscribe(ws);
+        ws.addEventListener('open', onOpen, { once: true });
+      }
+    }
+
+    // Register handler in the shared map so the hook routes data to us
+    terminalHandlers.current.set(ptyId, (msg: WSMessageToClient) => {
+      if (msg.type === 'terminal-scrollback') {
+        if (scrollbackReceivedRef.current) return;
+        scrollbackReceivedRef.current = true;
+        term.write(msg.data);
+        // Force redraw at correct dimensions after scrollback
+        requestAnimationFrame(() => {
+          const d = fitAddon.proposeDimensions();
+          if (d) {
+            const w = wsRef.current;
+            if (w && w.readyState === WebSocket.OPEN) {
+              w.send(JSON.stringify({ type: 'terminal-resize', ptyId, cols: d.cols, rows: d.rows }));
+            }
+          }
+        });
+      } else if (msg.type === 'terminal-output') {
+        term.write(msg.data);
+      } else if (msg.type === 'terminal-exited') {
+        term.write('\r\n\x1b[90m[Process exited]\x1b[0m\r\n');
+      }
+    });
+
+    // Send user keystrokes to server
+    const onDataDisposable = term.onData((data) => {
+      const w = wsRef.current;
+      if (w && w.readyState === WebSocket.OPEN) {
+        w.send(JSON.stringify({ type: 'terminal-input', ptyId, data }));
+      }
+    });
+
+    // Handle resize
+    let cancelled = false;
+    const resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        if (cancelled) return;
+        fitAddon.fit();
+        const dims = fitAddon.proposeDimensions();
+        if (dims) {
+          const w = wsRef.current;
+          if (w && w.readyState === WebSocket.OPEN) {
+            w.send(JSON.stringify({ type: 'terminal-resize', ptyId, cols: dims.cols, rows: dims.rows }));
+          }
+        }
+      });
+    });
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      cancelled = true;
+      if (onOpen && ws) ws.removeEventListener('open', onOpen);
+      resizeObserver.disconnect();
+      onDataDisposable.dispose();
+    };
+  }, [ptyId, wsRef, terminalHandlers]);
+
+  // Clean up when ptyId changes or component truly unmounts
+  useEffect(() => {
+    return () => {
+      const ws = wsRef.current;
+      if (ws && ws.readyState === WebSocket.OPEN && subscribedRef.current) {
+        ws.send(JSON.stringify({ type: 'terminal-unsubscribe', ptyId }));
+      }
+      subscribedRef.current = false;
+      scrollbackReceivedRef.current = false;
+      terminalHandlers.current.delete(ptyId);
+      xtermRef.current?.dispose();
+      xtermRef.current = null;
+      fitAddonRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ptyId]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="w-full h-full"
+      style={{ backgroundColor: '#0e0e1e' }}
+    />
+  );
+}

package/src/components/TerminalTile.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Terminal } from './Terminal';
+import { PtyTab } from '@/hooks/usePixelOffice';
+import { Session, WSMessageToClient } from '@/lib/types';
+import { useRecentCwds } from '@/hooks/useRecentCwds';
+
+interface TerminalTileProps {
+  tab: PtyTab;
+  session?: Session;
+  wsRef: React.RefObject<WebSocket | null>;
+  terminalHandlers: React.RefObject<Map<string, (msg: WSMessageToClient) => void>>;
+  onClose: () => void;
+  onSpawnHere: (cwd: string) => void;
+  /** For drag-to-swap reordering */
+  onDragStart?: () => void;
+  onDragOver?: (e: React.DragEvent) => void;
+  onDrop?: () => void;
+}
+
+function projectName(cwd: string): string {
+  if (!cwd) return 'starting…';
+  return cwd.split('/').filter(Boolean).pop() || cwd;
+}
+
+function stateColor(session: Session | undefined, exited: boolean): string {
+  if (exited) return '#4a2020';
+  if (!session) return '#555';
+  switch (session.state) {
+    case 'typing': return '#4a7cbf';
+    case 'reading': return '#4abf5c';
+    case 'waiting': return '#bf8b4a';
+    default: return '#555';
+  }
+}
+
+export function TerminalTile({ tab, session, wsRef, terminalHandlers, onClose, onSpawnHere, onDragStart, onDragOver, onDrop }: TerminalTileProps) {
+  const name = projectName(tab.cwd);
+  const color = stateColor(session, tab.exited);
+  const isActive = session && !tab.exited && session.state !== 'idle';
+  const focus = session?.currentFocus || null;
+  const lastTool = session?.recentTools?.[session.recentTools.length - 1];
+  const subtitle = focus || (lastTool && session?.state !== 'idle' ? lastTool.summary : null);
+
+  return (
+    <div
+      className="flex flex-col bg-[#0a0a18] border border-[#1a1a3a] rounded overflow-hidden"
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+    >
+      {/* Title bar — draggable for reordering */}
+      <div
+        className="flex flex-col border-b border-[#1a1a3a] flex-shrink-0 group cursor-grab active:cursor-grabbing"
+        draggable
+        onDragStart={(e) => {
+          e.dataTransfer.effectAllowed = 'move';
+          onDragStart?.();
+        }}
+      >
+        <div className="flex items-center h-7 px-2">
+          <div
+            className={`w-1.5 h-1.5 rounded-full flex-shrink-0 mr-1.5 ${isActive ? 'animate-pulse' : ''}`}
+            style={{ backgroundColor: color }}
+          />
+          <span className="text-[#888] text-[11px] font-mono flex-1 truncate">
+            {tab.exited ? `${name} (exited)` : name}
+          </span>
+          {session?.state === 'waiting' && (
+            <span className="text-[#bf8b4a] text-[9px] font-mono mr-2">Approval</span>
+          )}
+          <button
+            className="text-[#222] hover:text-[#888] text-[10px] leading-none opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+            onClick={onClose}
+          >
+            ✕
+          </button>
+        </div>
+        {subtitle && (
+          <div className="px-2 pb-1 text-[#3a3a5a] text-[10px] font-mono truncate">
+            {subtitle}
+          </div>
+        )}
+      </div>
+
+      {/* Terminal */}
+      <div className="flex-1 min-h-0 bg-[#0e0e1e]">
+        <Terminal ptyId={tab.ptyId} wsRef={wsRef} terminalHandlers={terminalHandlers} />
+      </div>
+    </div>
+  );
+}
+
+/** Empty tile with spawn button — also accepts drops from panel */
+export function EmptyTile({ onSpawn, onDropPty, spawnError }: { onSpawn: (cwd: string) => void; onDropPty?: (ptyId: string) => void; spawnError?: string | null }) {
+  const [showInput, setShowInput] = useState(false);
+  const [cwd, setCwd] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { recents } = useRecentCwds();
+
+  useEffect(() => {
+    if (showInput) requestAnimationFrame(() => inputRef.current?.focus());
+  }, [showInput]);
+
+  const handleSubmit = useCallback(() => {
+    onSpawn(cwd.trim() || '~');
+    setCwd('');
+    // Don't close input — it stays open until spawn succeeds (tile gets replaced)
+    // or error shows. If spawn succeeds, the tile disappears anyway.
+  }, [cwd, onSpawn]);
+
+  const handleQuickSpawn = useCallback((path: string) => {
+    onSpawn(path);
+  }, [onSpawn]);
+
+  return (
+    <div
+      className="flex flex-col items-center justify-center bg-[#080814] border border-[#141430] border-dashed rounded gap-3"
+      onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }}
+      onDrop={(e) => {
+        e.preventDefault();
+        const ptyId = e.dataTransfer.getData('text/plain');
+        if (ptyId) onDropPty?.(ptyId);
+      }}
+    >
+      {showInput ? (
+        <div className="flex flex-col gap-2 w-72">
+          {/* Recent projects */}
+          {recents.length > 0 && (
+            <div className="flex flex-wrap gap-1 justify-center">
+              {recents.map(r => (
+                <button
+                  key={r}
+                  onClick={() => handleQuickSpawn(r)}
+                  className="px-2 py-0.5 bg-[#0a0a16] hover:bg-[#1a1a4a] border border-[#1a1a3a] text-[#556] hover:text-[#aab] text-[10px] font-mono rounded cursor-pointer transition-colors"
+                >
+                  {projectName(r)}
+                </button>
+              ))}
+            </div>
+          )}
+          <div className="flex gap-1.5">
+            <input
+              ref={inputRef}
+              type="text"
+              value={cwd}
+              onChange={(e) => setCwd(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSubmit();
+                if (e.key === 'Escape') setShowInput(false);
+              }}
+              placeholder="Desktop/Projects/my-app"
+              className="flex-1 bg-[#0a0a16] border border-[#1a1a3a] rounded px-2 py-1.5 text-[11px] font-mono text-[#aab] placeholder-[#2a2a4a] focus:outline-none focus:border-[#3a3a6a]"
+            />
+            <button
+              onClick={handleSubmit}
+              className="px-3 py-1.5 bg-[#1a1a4a] hover:bg-[#2a2a6a] text-[#aab] text-[11px] font-mono rounded cursor-pointer"
+            >
+              Go
+            </button>
+          </div>
+          {spawnError && (
+            <div className="text-[#ff5555] text-[10px] font-mono text-center mt-1">{spawnError}</div>
+          )}
+        </div>
+      ) : (
+        <>
+          {spawnError && (
+            <div className="text-[#ff5555] text-[10px] font-mono text-center mb-1">{spawnError}</div>
+          )}
+          <button
+            onClick={() => setShowInput(true)}
+            className="px-4 py-2 text-[#2a2a5a] hover:text-[#5a5a8a] text-[12px] font-mono transition-colors cursor-pointer"
+          >
+            + New Session
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/WorkerPanel.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import { useState } from 'react';
+import { Session } from '@/lib/types';
+import { useRecentCwds } from '@/hooks/useRecentCwds';
+
+const STATE_COLORS: Record<string, string> = {
+  idle: '#444',
+  typing: '#4a7cbf',
+  reading: '#4abf5c',
+  waiting: '#bf8b4a',
+  walking: '#8b4abf',
+};
+
+function formatDuration(startedAt: number): string {
+  const seconds = Math.floor((Date.now() - startedAt) / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+}
+
+function projectName(cwd: string): string {
+  return cwd.split('/').filter(Boolean).pop() || cwd;
+}
+
+interface Props {
+  sessions: Session[];
+  visiblePtyIds: string[];
+  onSelectWorker?: (sessionId: string | null) => void;
+  onOpenTerminal?: (ptyId: string) => void;
+  onSpawn?: (cwd: string) => void;
+  spawnError?: string | null;
+  /** Called when user drags a session from the panel — starts a drag with ptyId */
+  onDragSessionStart?: (ptyId: string) => void;
+}
+
+export function WorkerPanel({ sessions, visiblePtyIds, onSelectWorker, onOpenTerminal, onSpawn, spawnError, onDragSessionStart }: Props) {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [focusing, setFocusing] = useState<string | null>(null);
+  const [showSpawnInput, setShowSpawnInput] = useState(false);
+  const [spawnCwd, setSpawnCwd] = useState('');
+  const { recents: recentCwds } = useRecentCwds();
+
+  function handleClick(sessionId: string) {
+    const next = expandedId === sessionId ? null : sessionId;
+    setExpandedId(next);
+    onSelectWorker?.(next);
+  }
+
+  async function handleFocusTerminal(sessionId: string) {
+    setFocusing(sessionId);
+    try {
+      await fetch('/api/focus-terminal', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId }),
+      });
+    } finally {
+      setFocusing(null);
+    }
+  }
+
+  function handleSpawnSubmit() {
+    const cwd = spawnCwd.trim() || '~';
+    onSpawn?.(cwd);
+    setSpawnCwd('');
+    // Keep open — closes on success (new tab appears) or shows error
+  }
+
+  return (
+    <div className="w-56 bg-[#0e0e1e] border-l border-[#1a1a3a] overflow-y-auto flex flex-col">
+      {/* Header with spawn button */}
+      <div className="px-3 py-2 border-b border-[#1a1a3a] flex items-center justify-between">
+        <span className="text-[#444] text-[10px] font-mono uppercase tracking-widest">
+          {sessions.length} active
+        </span>
+        <button
+          onClick={() => setShowSpawnInput(!showSpawnInput)}
+          className="text-[#333] hover:text-[#888] text-[12px] font-mono cursor-pointer transition-colors"
+          title="Spawn new Claude session"
+        >
+          +
+        </button>
+      </div>
+
+      {/* Spawn input + recent projects */}
+      {showSpawnInput && (
+        <div className="px-2 py-2 border-b border-[#1a1a3a] bg-[#0a0a18]">
+          {/* Recent projects */}
+          {recentCwds.length > 0 && (
+            <div className="flex flex-wrap gap-1 mb-2">
+              {recentCwds.map(cwd => (
+                <button
+                  key={cwd}
+                  onClick={() => { onSpawn?.(cwd); setShowSpawnInput(false); }}
+                  className="px-1.5 py-0.5 bg-[#0a0a16] hover:bg-[#1a1a4a] border border-[#1a1a3a] text-[#556] hover:text-[#aab] text-[9px] font-mono rounded cursor-pointer transition-colors"
+                >
+                  {projectName(cwd)}
+                </button>
+              ))}
+            </div>
+          )}
+          <div className="flex gap-1">
+            <input
+              autoFocus
+              type="text"
+              value={spawnCwd}
+              onChange={(e) => setSpawnCwd(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSpawnSubmit();
+                if (e.key === 'Escape') setShowSpawnInput(false);
+              }}
+              placeholder="~/projects/my-app"
+              className="flex-1 bg-[#080816] border border-[#1a1a3a] rounded px-2 py-1 text-[10px] font-mono text-[#aab] placeholder-[#2a2a4a] focus:outline-none focus:border-[#3a3a6a]"
+            />
+            <button
+              onClick={handleSpawnSubmit}
+              className="px-2 py-1 bg-[#1a1a4a] hover:bg-[#2a2a6a] text-[#aab] text-[10px] font-mono rounded cursor-pointer"
+            >
+              Go
+            </button>
+          </div>
+          {spawnError && (
+            <div className="text-[#ff5555] text-[9px] font-mono mt-1">{spawnError}</div>
+          )}
+        </div>
+      )}
+
+      {sessions.length === 0 && (
+        <div className="px-3 py-6 text-center">
+          <p className="text-[#333] text-[11px] font-mono">No sessions</p>
+        </div>
+      )}
+
+      <div className="flex-1 p-1">
+        {sessions.map((session) => {
+          const isExpanded = expandedId === session.sessionId;
+          const isIdle = session.state === 'idle';
+          const isWaiting = session.state === 'waiting';
+          const project = projectName(session.cwd);
+          const stateColor = STATE_COLORS[session.state] || '#444';
+          const focus = session.currentFocus || null;
+          const lastTool = session.recentTools[session.recentTools.length - 1];
+          const isVisible = session.ptyId ? visiblePtyIds.includes(session.ptyId) : false;
+
+          return (
+            <div
+              key={session.sessionId}
+              className={`rounded cursor-pointer transition-all ${
+                isExpanded
+                  ? 'bg-[#161630] border border-[#2a2a5a]'
+                  : 'border border-transparent hover:bg-[#12122a]'
+              }`}
+              onClick={() => handleClick(session.sessionId)}
+              // Make PTY sessions draggable from the panel
+              draggable={!!session.ptyId}
+              onDragStart={(e) => {
+                if (session.ptyId) {
+                  e.dataTransfer.effectAllowed = 'move';
+                  e.dataTransfer.setData('text/plain', session.ptyId);
+                  onDragSessionStart?.(session.ptyId);
+                }
+              }}
+            >
+              <div className="px-2 py-2">
+                {/* Project name + time */}
+                <div className="flex items-center gap-1.5">
+                  <div
+                    className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${!isIdle && !isWaiting ? 'animate-pulse' : ''}`}
+                    style={{ backgroundColor: stateColor }}
+                  />
+                  <span className="text-[#99a] text-[11px] font-mono font-bold flex-1 truncate">
+                    {project}
+                  </span>
+                  {session.ptyId && (
+                    <span
+                      className={`text-[9px] font-mono flex-shrink-0 ${isVisible ? 'text-[#4a7cbf]' : 'text-[#2a2a4a]'}`}
+                      title={isVisible ? 'Visible in grid' : 'Background — drag to grid'}
+                    >
+                      {isVisible ? '◆' : '◇'}
+                    </span>
+                  )}
+                  <span className="text-[#2a2a3a] text-[10px] font-mono flex-shrink-0">
+                    {formatDuration(session.startedAt)}
+                  </span>
+                </div>
+
+                {/* Focus */}
+                {focus && (
+                  <div className="text-[#aab0b8] text-[11px] font-mono mt-1 ml-3 leading-relaxed">
+                    {focus}
+                  </div>
+                )}
+
+                {lastTool && !isIdle && (
+                  <div className="text-[#3a3a5a] text-[10px] font-mono mt-0.5 ml-3 truncate">
+                    {lastTool.summary}
+                  </div>
+                )}
+
+                {!focus && isIdle && (
+                  <div className="text-[#2a2a3a] text-[11px] font-mono mt-1 ml-3">Idle</div>
+                )}
+
+                {isWaiting && (
+                  <div className="ml-3 mt-1">
+                    <span className="text-[#bf8b4a] text-[10px] font-mono bg-[#bf8b4a]/8 border border-[#bf8b4a]/15 rounded px-1.5 py-0.5 leading-none">
+                      Approval needed
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              {isExpanded && (
+                <div className="px-2 pb-2 border-t border-[#1a1a3a] pt-1.5">
+                  {session.recentTools.length > 1 && (
+                    <div className="mb-1.5">
+                      {session.recentTools.slice(-4, -1).reverse().map((t, i) => (
+                        <div
+                          key={t.timestamp}
+                          className="text-[10px] font-mono leading-relaxed ml-1 truncate"
+                          style={{ color: i === 0 ? '#3a3a5a' : '#222238' }}
+                        >
+                          {t.summary}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {session.ptyId ? (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onOpenTerminal?.(session.ptyId!);
+                      }}
+                      className="w-full py-1 bg-[#0a0a16] hover:bg-[#141428] border border-[#1a1a30] text-[#445] hover:text-[#778] text-[10px] font-mono rounded transition-colors cursor-pointer"
+                    >
+                      {isVisible ? 'Show in Grid' : 'Open Terminal'}
+                    </button>
+                  ) : (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleFocusTerminal(session.sessionId);
+                      }}
+                      disabled={focusing === session.sessionId}
+                      className="w-full py-1 bg-[#0a0a16] hover:bg-[#141428] border border-[#1a1a30] text-[#445] hover:text-[#778] text-[10px] font-mono rounded transition-colors cursor-pointer disabled:opacity-50"
+                    >
+                      {focusing === session.sessionId ? 'Focusing…' : 'Focus Terminal'}
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}