@aion0/forge 0.5.26 → 0.5.27

package/.forge/worktrees/pipeline-4dd8dc2d/components/HelpDialog.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState, useEffect, useRef, lazy, Suspense } from 'react';
+
+interface DocItem {
+  name: string;
+  title: string;
+}
+
+const HelpTerminal = lazy(() => import('./HelpTerminal'));
+
+export default function HelpDialog({ onClose }: { onClose: () => void }) {
+  const [docs, setDocs] = useState<DocItem[]>([]);
+  const [agent, setAgent] = useState<{ name: string } | null | undefined>(undefined); // undefined = loading
+  const [viewDoc, setViewDoc] = useState<string | null>(null);
+  const [docContent, setDocContent] = useState('');
+  const [search, setSearch] = useState('');
+  const [tab, setTab] = useState<'docs' | 'chat'>('docs');
+  const [position, setPosition] = useState({ x: Math.max(0, window.innerWidth - 520), y: 50 });
+  const [size, setSize] = useState({ w: 500, h: 560 });
+  const dragRef = useRef<{ startX: number; startY: number; origX: number; origY: number } | null>(null);
+  const resizeRef = useRef<{ startX: number; startY: number; origW: number; origH: number } | null>(null);
+
+  useEffect(() => {
+    fetch('/api/help?action=status').then(r => r.json())
+      .then(data => setAgent(data.agent || null)).catch(() => setAgent(null));
+    fetch('/api/help?action=docs').then(r => r.json())
+      .then(data => setDocs(data.docs || [])).catch(() => {});
+  }, []);
+
+  const loadDoc = async (name: string) => {
+    setViewDoc(name);
+    try {
+      const res = await fetch(`/api/help?action=doc&name=${encodeURIComponent(name)}`);
+      const data = await res.json();
+      setDocContent(data.content || '');
+    } catch { setDocContent('Failed to load'); }
+  };
+
+  // Drag
+  const onDragStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    dragRef.current = { startX: e.clientX, startY: e.clientY, origX: position.x, origY: position.y };
+    const onMove = (ev: MouseEvent) => {
+      if (!dragRef.current) return;
+      setPosition({
+        x: Math.max(0, dragRef.current.origX + ev.clientX - dragRef.current.startX),
+        y: Math.max(0, dragRef.current.origY + ev.clientY - dragRef.current.startY),
+      });
+    };
+    const onUp = () => { dragRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  };
+
+  // Resize
+  const onResizeStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    resizeRef.current = { startX: e.clientX, startY: e.clientY, origW: size.w, origH: size.h };
+    const onMove = (ev: MouseEvent) => {
+      if (!resizeRef.current) return;
+      setSize({
+        w: Math.max(350, resizeRef.current.origW + ev.clientX - resizeRef.current.startX),
+        h: Math.max(300, resizeRef.current.origH + ev.clientY - resizeRef.current.startY),
+      });
+    };
+    const onUp = () => { resizeRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  };
+
+  const filtered = search ? docs.filter(d => d.title.toLowerCase().includes(search.toLowerCase())) : docs;
+
+  return (
+    <div
+      className="fixed z-50 bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-2xl flex flex-col overflow-hidden"
+      style={{ left: position.x, top: position.y, width: size.w, height: size.h }}
+    >
+      {/* Title bar */}
+      <div
+        className="flex items-center gap-2 px-3 py-2 bg-[var(--bg-tertiary)] border-b border-[var(--border)] cursor-move shrink-0 select-none"
+        onMouseDown={onDragStart}
+      >
+        <span className="text-[11px] font-semibold text-[var(--text-primary)]">Forge Help</span>
+        <div className="ml-auto flex items-center gap-1">
+          <button
+            onClick={() => { setTab('docs'); setViewDoc(null); }}
+            className={`text-[9px] px-2 py-0.5 rounded ${tab === 'docs' ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'text-[var(--text-secondary)]'}`}
+          >Docs</button>
+          {agent && (
+            <button
+              onClick={() => setTab('chat')}
+              className={`text-[9px] px-2 py-0.5 rounded ${tab === 'chat' ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'text-[var(--text-secondary)]'}`}
+            >AI Chat</button>
+          )}
+          <button onClick={onClose} className="text-[var(--text-secondary)] hover:text-[var(--red)] ml-1 text-sm leading-none">✕</button>
+        </div>
+      </div>
+
+      {tab === 'chat' ? (
+        /* Embedded terminal */
+        <div className="flex-1 min-h-0">
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-xs text-[var(--text-secondary)]">Loading terminal...</div>}>
+            <HelpTerminal />
+          </Suspense>
+        </div>
+      ) : viewDoc ? (
+        /* Doc view */
+        <>
+          <div className="px-3 py-1.5 border-b border-[var(--border)] flex items-center gap-2 shrink-0">
+            <button onClick={() => setViewDoc(null)} className="text-[10px] text-[var(--accent)]">← Back</button>
+            <span className="text-[10px] text-[var(--text-primary)] font-semibold truncate">
+              {docs.find(d => d.name === viewDoc)?.title || viewDoc}
+            </span>
+          </div>
+          <div className="flex-1 overflow-y-auto p-3">
+            <pre className="text-[11px] text-[var(--text-primary)] whitespace-pre-wrap break-words font-mono leading-relaxed">
+              {docContent}
+            </pre>
+          </div>
+        </>
+      ) : (
+        /* Doc list */
+        <>
+          <div className="px-3 py-2 border-b border-[var(--border)] shrink-0">
+            <input
+              type="text"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder="Search help topics..."
+              className="w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-[10px] text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
+              autoFocus
+            />
+          </div>
+          {!agent && agent !== undefined && (
+            <div className="px-3 py-2 bg-[var(--yellow)]/10 border-b border-[var(--border)] shrink-0">
+              <p className="text-[9px] text-[var(--text-secondary)]">
+                Install Claude Code for AI help: <code className="text-[var(--accent)]">npm i -g @anthropic-ai/claude-code</code>
+              </p>
+            </div>
+          )}
+          <div className="flex-1 overflow-y-auto">
+            {filtered.map(doc => (
+              <button
+                key={doc.name}
+                onClick={() => loadDoc(doc.name)}
+                className="w-full text-left px-3 py-2.5 border-b border-[var(--border)]/30 hover:bg-[var(--bg-tertiary)] text-[11px] text-[var(--text-primary)] capitalize"
+              >
+                {doc.title}
+              </button>
+            ))}
+          </div>
+          <div className="px-3 py-2 border-t border-[var(--border)] shrink-0">
+            <a href="https://github.com/aiwatching/forge" target="_blank" rel="noopener noreferrer"
+              className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--accent)]">GitHub →</a>
+          </div>
+        </>
+      )}
+
+      {/* Resize handle */}
+      <div
+        onMouseDown={onResizeStart}
+        className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize"
+        style={{ background: 'linear-gradient(135deg, transparent 50%, var(--border) 50%)' }}
+      />
+    </div>
+  );
+}

package/.forge/worktrees/pipeline-4dd8dc2d/components/HelpTerminal.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import '@xterm/xterm/css/xterm.css';
+
+const SESSION_NAME = 'mw-forge-help';
+
+function getWsUrl() {
+  if (typeof window === 'undefined') return `ws://localhost:${parseInt(process.env.TERMINAL_PORT || '8404')}`;
+  const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsHost = window.location.hostname;
+  if (wsHost !== 'localhost' && wsHost !== '127.0.0.1') {
+    return `${wsProtocol}//${window.location.host}/terminal-ws`;
+  }
+  const webPort = parseInt(window.location.port) || 8403;
+  return `${wsProtocol}//${wsHost}:${webPort + 1}`;
+}
+
+export default function HelpTerminal() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    let disposed = false;
+    let dataDir = '~/.forge/data';
+    let agentCmd = 'claude';
+
+    const cs = getComputedStyle(document.documentElement);
+    const tv = (name: string) => cs.getPropertyValue(name).trim();
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 12,
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      scrollback: 3000,
+      logger: { trace: () => {}, debug: () => {}, info: () => {}, warn: () => {}, error: () => {} },
+      theme: {
+        background: tv('--term-bg') || '#1a1a2e',
+        foreground: tv('--term-fg') || '#e0e0e0',
+        cursor: tv('--term-cursor') || '#7c5bf0',
+        selectionBackground: (tv('--term-cursor') || '#7c5bf0') + '44',
+      },
+    });
+    const fit = new FitAddon();
+    term.loadAddon(fit);
+    term.open(containerRef.current);
+    try { fit.fit(); } catch {}
+
+    const wsUrl = getWsUrl();
+    let ws: WebSocket | null = null;
+    let reconnectTimer = 0;
+    let isNewSession = false;
+
+    function connect() {
+      if (disposed) return;
+      const socket = new WebSocket(wsUrl);
+      ws = socket;
+
+      socket.onopen = () => {
+        if (disposed) { socket.close(); return; }
+        socket.send(JSON.stringify({ type: 'attach', sessionName: SESSION_NAME, cols: term.cols, rows: term.rows }));
+      };
+
+      socket.onmessage = (event) => {
+        if (disposed) return;
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.type === 'output') {
+            try { term.write(msg.data); } catch {}
+          } else if (msg.type === 'connected') {
+            setConnected(true);
+            if (isNewSession) {
+              isNewSession = false;
+              setTimeout(() => {
+                if (socket.readyState === WebSocket.OPEN) {
+                  socket.send(JSON.stringify({ type: 'input', data: `cd "${dataDir}" 2>/dev/null && ${agentCmd}\n` }));
+                }
+              }, 300);
+            }
+          } else if (msg.type === 'error') {
+            isNewSession = true;
+            if (socket.readyState === WebSocket.OPEN) {
+              socket.send(JSON.stringify({ type: 'create', cols: term.cols, rows: term.rows, sessionName: SESSION_NAME }));
+            }
+          }
+        } catch {}
+      };
+
+      socket.onclose = () => {
+        if (disposed) return;
+        setConnected(false);
+        reconnectTimer = window.setTimeout(connect, 3000);
+      };
+      socket.onerror = () => {};
+    }
+
+    // Fetch data dir + default agent then connect
+    Promise.all([
+      fetch('/api/help?action=status').then(r => r.json()).then(data => { if (data.dataDir) dataDir = data.dataDir; }).catch(() => {}),
+      fetch('/api/agents').then(r => r.json()).then(data => {
+        const defaultId = data.defaultAgent || 'claude';
+        const agent = (data.agents || []).find((a: any) => a.id === defaultId);
+        if (agent?.path) agentCmd = agent.path;
+      }).catch(() => {}),
+    ]).finally(() => { if (!disposed) connect(); });
+
+    term.onData((data) => {
+      if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'input', data }));
+    });
+
+    const resizeObserver = new ResizeObserver(() => {
+      const el = containerRef.current;
+      if (!el || el.offsetWidth < 50 || el.offsetHeight < 30) return;
+      try {
+        fit.fit();
+        if (term.cols < 2 || term.rows < 2) return;
+        if (ws?.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+        }
+      } catch {}
+    });
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      disposed = true;
+      clearTimeout(reconnectTimer);
+      ws?.close();
+      resizeObserver.disconnect();
+      term.dispose();
+    };
+  }, []);
+
+  return (
+    <div className="h-full flex flex-col">
+      <div ref={containerRef} className="flex-1" />
+    </div>
+  );
+}

package/.forge/worktrees/pipeline-4dd8dc2d/components/InlinePipelineView.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
+import type { TaskLogEntry } from '@/src/types';
+
+const ConversationTerminalView = lazy(() => import('./ConversationTerminalView'));
+
+// ─── Task stream hook ─────────────────────────────────────
+
+function useTaskStreamInline(taskId: string | undefined, isRunning: boolean) {
+  const [log, setLog] = useState<TaskLogEntry[]>([]);
+  useEffect(() => {
+    if (!taskId || !isRunning) { setLog([]); return; }
+    const es = new EventSource(`/api/tasks/${taskId}/stream`);
+    es.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'log') setLog(prev => [...prev, data.entry]);
+        else if (data.type === 'complete' && data.task) setLog(data.task.log);
+      } catch {}
+    };
+    es.onerror = () => es.close();
+    return () => es.close();
+  }, [taskId, isRunning]);
+  return log;
+}
+
+// ─── Live log renderer ────────────────────────────────────
+
+function InlineLiveLog({ log }: { log: TaskLogEntry[] }) {
+  const endRef = useRef<HTMLDivElement>(null);
+  useEffect(() => { endRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [log]);
+  if (log.length === 0) return <span className="text-[9px] text-[var(--text-secondary)] italic">Starting...</span>;
+  return (
+    <div className="max-h-[120px] overflow-y-auto text-[8px] font-mono leading-relaxed space-y-0.5">
+      {log.slice(-30).map((entry, i) => (
+        <div key={i} className={
+          entry.type === 'result' ? 'text-green-400' :
+          entry.subtype === 'error' ? 'text-red-400' :
+          entry.type === 'system' ? 'text-yellow-400/70' :
+          'text-[var(--text-secondary)]'
+        }>
+          {entry.type === 'assistant' && entry.subtype === 'tool_use'
+            ? `⚙ ${entry.tool || 'tool'}: ${entry.content.slice(0, 60)}...`
+            : entry.content.slice(0, 120)}{entry.content.length > 120 ? '...' : ''}
+        </div>
+      ))}
+      <div ref={endRef} />
+    </div>
+  );
+}
+
+// ─── DAG node card ────────────────────────────────────────
+
+function InlineDagNode({ nodeId, node }: { nodeId: string; node: any }) {
+  const isRunning = node.status === 'running';
+  const log = useTaskStreamInline(node.taskId, isRunning);
+  const statusIcon = node.status === 'done' ? '✅' : node.status === 'failed' ? '❌' : node.status === 'running' ? '🔄' : node.status === 'skipped' ? '⏭' : '⏳';
+  return (
+    <div className={`border rounded p-2 ${
+      isRunning ? 'border-yellow-500/40 bg-yellow-500/5' :
+      node.status === 'done' ? 'border-green-500/20 bg-green-500/5' :
+      node.status === 'failed' ? 'border-red-500/20 bg-red-500/5' :
+      'border-[var(--border)]'
+    }`}>
+      <div className="flex items-center gap-1.5 text-[9px]">
+        <span>{statusIcon}</span>
+        <span className="font-semibold text-[var(--text-primary)]">{nodeId}</span>
+        {node.taskId && <span className="text-[7px] text-[var(--accent)] font-mono">task:{node.taskId}</span>}
+        <span className="text-[var(--text-secondary)] ml-auto">{node.status}</span>
+      </div>
+      {isRunning && <div className="mt-1.5"><InlineLiveLog log={log} /></div>}
+      {node.error && <div className="text-[8px] text-red-400 mt-1">{node.error}</div>}
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────
+
+export default function InlinePipelineView({ pipeline, onRefresh }: { pipeline: any; onRefresh: () => void }) {
+  useEffect(() => {
+    if (pipeline.status !== 'running') return;
+    const timer = setInterval(onRefresh, 3000);
+    return () => clearInterval(timer);
+  }, [pipeline.status, onRefresh]);
+
+  const isConversation = pipeline.type === 'conversation' && pipeline.conversation;
+
+  return (
+    <div className="bg-[var(--bg-tertiary)]/50">
+      {isConversation ? (
+        <div style={{ height: 450 }}>
+          <Suspense fallback={<div className="flex items-center justify-center h-full text-[9px] text-[var(--text-secondary)]">Loading...</div>}>
+            <ConversationTerminalView pipeline={pipeline} />
+          </Suspense>
+        </div>
+      ) : (
+        <div className="px-3 py-2 space-y-1.5">
+          {pipeline.nodeOrder.map((nodeId: string) => (
+            <InlineDagNode key={nodeId} nodeId={nodeId} node={pipeline.nodes[nodeId]} />
+          ))}
+        </div>
+      )}
+      {pipeline.status !== 'running' && (
+        <div className={`text-[8px] text-center py-1 ${pipeline.status === 'done' ? 'text-green-400' : 'text-red-400'}`}>
+          Pipeline {pipeline.status}
+        </div>
+      )}
+    </div>
+  );
+}

package/.forge/worktrees/pipeline-4dd8dc2d/components/LogViewer.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export default function LogViewer() {
+  const [lines, setLines] = useState<string[]>([]);
+  const [total, setTotal] = useState(0);
+  const [fileSize, setFileSize] = useState(0);
+  const [filePath, setFilePath] = useState('');
+  const [search, setSearch] = useState('');
+  const [maxLines, setMaxLines] = useState(200);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [processes, setProcesses] = useState<{ pid: string; cpu: string; mem: string; cmd: string }[]>([]);
+  const [showProcesses, setShowProcesses] = useState(false);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const fetchLogs = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/logs?lines=${maxLines}${search ? `&search=${encodeURIComponent(search)}` : ''}`);
+      const data = await res.json();
+      setLines(data.lines || []);
+      setTotal(data.total || 0);
+      setFileSize(data.size || 0);
+      if (data.file) setFilePath(data.file);
+    } catch {}
+  }, [maxLines, search]);
+
+  const fetchProcesses = async () => {
+    try {
+      const res = await fetch('/api/logs', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'processes' }),
+      });
+      const data = await res.json();
+      setProcesses(data.processes || []);
+    } catch {}
+  };
+
+  const clearLogs = async () => {
+    if (!confirm('Clear all logs?')) return;
+    await fetch('/api/logs', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'clear' }),
+    });
+    fetchLogs();
+  };
+
+  // Initial + auto refresh
+  useEffect(() => { fetchLogs(); }, [fetchLogs]);
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const id = setInterval(fetchLogs, 3000);
+    return () => clearInterval(id);
+  }, [autoRefresh, fetchLogs]);
+
+  // Auto scroll
+  useEffect(() => {
+    if (autoScroll) bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [lines, autoScroll]);
+
+  // Detect manual scroll
+  const onScroll = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
+    setAutoScroll(atBottom);
+  };
+
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const getLineColor = (line: string) => {
+    if (line.includes('[error]') || line.includes('Error') || line.includes('FATAL')) return 'text-red-400';
+    if (line.includes('[warn]') || line.includes('Warning') || line.includes('WARN')) return 'text-yellow-400';
+    if (line.includes('[forge]') || line.includes('[init]')) return 'text-cyan-400';
+    if (line.includes('[task]') || line.includes('[pipeline]')) return 'text-green-400';
+    if (line.includes('[telegram]') || line.includes('[terminal]')) return 'text-purple-400';
+    if (line.includes('[issue-scanner]') || line.includes('[watcher]')) return 'text-orange-300';
+    return 'text-[var(--text-primary)]';
+  };
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-[var(--border)] shrink-0 flex-wrap">
+        <span className="text-xs font-semibold text-[var(--text-primary)]">Logs</span>
+        <span className="text-[8px] text-[var(--text-secondary)]">{total} lines · {formatSize(fileSize)}</span>
+
+        {/* Search */}
+        <input
+          type="text"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          placeholder="Filter..."
+          className="px-2 py-0.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-[10px] text-[var(--text-primary)] w-32 focus:outline-none focus:border-[var(--accent)]"
+        />
+
+        {/* Max lines */}
+        <select
+          value={maxLines}
+          onChange={e => setMaxLines(Number(e.target.value))}
+          className="px-1 py-0.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-[10px] text-[var(--text-primary)]"
+        >
+          <option value={100}>100 lines</option>
+          <option value={200}>200 lines</option>
+          <option value={500}>500 lines</option>
+          <option value={1000}>1000 lines</option>
+        </select>
+
+        <div className="ml-auto flex items-center gap-2">
+          {/* Auto refresh toggle */}
+          <label className="flex items-center gap-1 text-[9px] text-[var(--text-secondary)] cursor-pointer">
+            <input type="checkbox" checked={autoRefresh} onChange={e => setAutoRefresh(e.target.checked)} className="accent-[var(--accent)]" />
+            Auto (3s)
+          </label>
+
+          {/* Processes */}
+          <button
+            onClick={() => { setShowProcesses(v => !v); fetchProcesses(); }}
+            className={`text-[9px] px-2 py-0.5 rounded ${showProcesses ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
+          >Processes</button>
+
+          {/* Refresh */}
+          <button onClick={fetchLogs} className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]">↻</button>
+
+          {/* Clear */}
+          <button onClick={clearLogs} className="text-[9px] text-[var(--red)] hover:underline">Clear</button>
+        </div>
+      </div>
+
+      {/* Processes panel */}
+      {showProcesses && processes.length > 0 && (
+        <div className="border-b border-[var(--border)] bg-[var(--bg-tertiary)] max-h-32 overflow-y-auto shrink-0">
+          <div className="px-4 py-1 text-[8px] text-[var(--text-secondary)] uppercase">Running Processes</div>
+          {processes.map(p => (
+            <div key={p.pid} className="px-4 py-0.5 text-[10px] font-mono flex gap-3">
+              <span className="text-[var(--accent)] w-12 shrink-0">{p.pid}</span>
+              <span className="text-green-400 w-10 shrink-0">{p.cpu}%</span>
+              <span className="text-yellow-400 w-10 shrink-0">{p.mem}%</span>
+              <span className="text-[var(--text-secondary)] truncate">{p.cmd}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Log content */}
+      <div
+        ref={containerRef}
+        onScroll={onScroll}
+        className="flex-1 overflow-auto bg-[var(--bg-primary)] font-mono text-[11px] leading-[1.6]"
+      >
+        {lines.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-[var(--text-secondary)] text-xs">
+            {filePath ? 'No log entries' : 'Log file not found — server running in foreground?'}
+          </div>
+        ) : (
+          <div className="p-3">
+            {lines.map((line, i) => (
+              <div key={i} className={`${getLineColor(line)} hover:bg-[var(--bg-tertiary)] px-1`}>
+                {search ? (
+                  // Highlight search matches
+                  line.split(new RegExp(`(${search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')).map((part, j) =>
+                    part.toLowerCase() === search.toLowerCase()
+                      ? <span key={j} className="bg-[var(--yellow)]/30 text-[var(--yellow)]">{part}</span>
+                      : part
+                  )
+                ) : line}
+              </div>
+            ))}
+            <div ref={bottomRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="px-4 py-1 border-t border-[var(--border)] shrink-0 flex items-center gap-2 text-[8px] text-[var(--text-secondary)]">
+        <span>{filePath}</span>
+        {!autoScroll && (
+          <button
+            onClick={() => { setAutoScroll(true); bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); }}
+            className="ml-auto text-[var(--accent)] hover:underline"
+          >↓ Scroll to bottom</button>
+        )}
+      </div>
+    </div>
+  );
+}