@aion0/forge 0.4.9 → 0.4.10

package/RELEASE_NOTES.md

@@ -1,11 +1,18 @@
-# Forge v0.4.9
+# Forge v0.4.10
 
 Released: 2026-03-22
 
-## Changes since v0.4.8
+## Changes since v0.4.9
 
-### Other
-- add browser window
+### Features
+- feat: browser panel refactor, pane close UX, help AI data dir, terminal resume fix
 
+### Bug Fixes
+- fix: auto-retry failed issues, batch dedup, gh auth hint
+- feat: browser panel refactor, pane close UX, help AI data dir, terminal resume fix
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.8...v0.4.9
+### Refactoring
+- refactor: Browser as independent panel with float/left/right modes
+
+
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.9...v0.4.10

package/app/api/help/route.ts

@@ -1,14 +1,14 @@
 import { NextResponse } from 'next/server';
 import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
-import { getConfigDir } from '@/lib/dirs';
+import { getConfigDir, getDataDir } from '@/lib/dirs';
 import { loadSettings } from '@/lib/settings';
 import { execSync } from 'node:child_process';
 
 const HELP_DIR = join(getConfigDir(), 'help');
 const SOURCE_HELP_DIR = join(process.cwd(), 'lib', 'help-docs');
 
-/** Ensure help docs are copied to ~/.forge/help/ */
+/** Ensure help docs are copied to ~/.forge/help/ and CLAUDE.md to ~/.forge/data/ */
 function ensureHelpDocs() {
   if (!existsSync(HELP_DIR)) mkdirSync(HELP_DIR, { recursive: true });
   if (existsSync(SOURCE_HELP_DIR)) {
@@ -16,10 +16,16 @@ function ensureHelpDocs() {
       if (!file.endsWith('.md')) continue;
       const src = join(SOURCE_HELP_DIR, file);
       const dest = join(HELP_DIR, file);
-      // Always overwrite to keep docs up to date
       writeFileSync(dest, readFileSync(src));
     }
   }
+  // Copy CLAUDE.md to data dir so Help AI (working in ~/.forge/data/) picks it up
+  const dataDir = getDataDir();
+  const claudeMdSrc = join(HELP_DIR, 'CLAUDE.md');
+  const claudeMdDest = join(dataDir, 'CLAUDE.md');
+  if (existsSync(claudeMdSrc)) {
+    writeFileSync(claudeMdDest, readFileSync(claudeMdSrc));
+  }
 }
 
 /** Check if any agent CLI is available */
@@ -51,7 +57,7 @@ export async function GET(req: Request) {
     const docs = existsSync(HELP_DIR)
       ? readdirSync(HELP_DIR).filter(f => f.endsWith('.md')).sort()
       : [];
-    return NextResponse.json({ agent, docsCount: docs.length, helpDir: HELP_DIR });
+    return NextResponse.json({ agent, docsCount: docs.length, helpDir: HELP_DIR, dataDir: getDataDir() });
   }
 
   if (action === 'docs') {

package/app/api/preview/route.ts

@@ -62,6 +62,14 @@ export async function POST(req: Request) {
     const entry = state.entries.get(body.port);
     if (entry?.process) {
       entry.process.kill('SIGTERM');
+    } else {
+      // Process ref lost (hot-reload) — kill by port match
+      try {
+        const pids = execSync(`pgrep -f 'cloudflared tunnel.*localhost:${body.port}'`, { encoding: 'utf-8', timeout: 3000, stdio: ['pipe', 'pipe', 'pipe'] }).trim();
+        for (const pid of pids.split('\n').filter(Boolean)) {
+          try { process.kill(parseInt(pid), 'SIGTERM'); } catch {}
+        }
+      } catch {}
     }
     state.entries.delete(body.port);
     syncConfig();

package/components/BrowserPanel.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+interface PreviewEntry {
+  port: number;
+  url: string | null;
+  status: string;
+  label?: string;
+}
+
+export default function BrowserPanel({ onClose }: { onClose?: () => void }) {
+  const [browserUrl, setBrowserUrl] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('forge-browser-url') || '' : '');
+  const [browserKey, setBrowserKey] = useState(0);
+  const [previews, setPreviews] = useState<PreviewEntry[]>([]);
+  const [tunnelStarting, setTunnelStarting] = useState(false);
+  const browserUrlRef = useRef<HTMLInputElement>(null);
+  const isRemote = typeof window !== 'undefined' && !['localhost', '127.0.0.1'].includes(window.location.hostname);
+
+  const fetchPreviews = useCallback(() => {
+    fetch('/api/preview').then(r => r.json()).then(data => {
+      if (Array.isArray(data)) setPreviews(data.filter((p: any) => p.status === 'running'));
+    }).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    fetchPreviews();
+    const timer = setInterval(fetchPreviews, 10000);
+    return () => clearInterval(timer);
+  }, [fetchPreviews]);
+
+  const navigate = (url: string) => {
+    setBrowserUrl(url);
+    localStorage.setItem('forge-browser-url', url);
+    if (browserUrlRef.current) browserUrlRef.current.value = url;
+    setBrowserKey(k => k + 1);
+  };
+
+  const handleTunnel = async () => {
+    const input = prompt('Enter port(s) to create tunnel (e.g. 3100 or 3100,8080):');
+    if (!input) return;
+    const ports = input.split(',').map(s => parseInt(s.trim())).filter(p => p > 0 && p <= 65535);
+    if (ports.length === 0) { alert('Invalid port(s)'); return; }
+    setTunnelStarting(true);
+    const results: string[] = [];
+    for (const port of ports) {
+      try {
+        const res = await fetch('/api/preview', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ action: 'start', port }),
+        });
+        const data = await res.json();
+        if (data.url) {
+          results.push(data.url);
+          setPreviews(prev => {
+            const exists = prev.find(p => p.port === port);
+            if (exists) return prev.map(p => p.port === port ? { ...p, url: data.url, status: 'running' } : p);
+            return [...prev, { port, url: data.url, status: 'running' }];
+          });
+        } else if (data.status === 'starting' || data.status === 'stopped') {
+          // Tunnel started but URL not ready yet or exited
+          results.push('');
+        } else {
+          alert(`Port ${port}: ${data.error || 'Failed'}`);
+        }
+      } catch { alert(`Port ${port}: Failed to start tunnel`); }
+    }
+    // Navigate to first successful URL
+    const firstUrl = results.find(u => u);
+    if (firstUrl) navigate(firstUrl);
+    // Refresh list to pick up any that were still starting
+    setTimeout(fetchPreviews, 3000);
+    setTunnelStarting(false);
+  };
+
+  const stopTunnel = async (port: number) => {
+    await fetch('/api/preview', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'stop', port }),
+    });
+    setPreviews(prev => prev.filter(x => x.port !== port));
+  };
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      {/* URL bar */}
+      <div className="flex items-center gap-1 px-2 py-1 border-b border-[var(--border)] bg-[var(--bg-tertiary)] shrink-0">
+        <input
+          ref={browserUrlRef}
+          type="text"
+          defaultValue={browserUrl}
+          placeholder="Enter URL"
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              const val = (e.target as HTMLInputElement).value.trim();
+              if (!val) return;
+              const url = /^\d+$/.test(val) ? `http://localhost:${val}` : val;
+              navigate(url);
+            }
+          }}
+          className="flex-1 bg-[var(--bg-secondary)] border border-[var(--border)] rounded px-2 py-0.5 text-[10px] text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] min-w-0"
+        />
+        <button onClick={() => setBrowserKey(k => k + 1)} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] px-1" title="Refresh">↻</button>
+        <button onClick={() => window.open(browserUrl, '_blank')} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] px-1" title="Open in new tab">↗</button>
+        <button
+          disabled={tunnelStarting}
+          onClick={handleTunnel}
+          className="text-[9px] px-1.5 py-0.5 rounded border border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--accent)] disabled:opacity-50"
+          title="Create tunnel for a port (remote access)"
+        >{tunnelStarting ? 'Starting...' : 'Tunnel'}</button>
+        {onClose && (
+          <button onClick={onClose} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--red)] px-1" title="Close">✕</button>
+        )}
+      </div>
+      {/* Active tunnels bar */}
+      {previews.length > 0 && (
+        <div className="flex items-center gap-1 px-2 py-0.5 border-b border-[var(--border)]/50 bg-[var(--bg-secondary)] shrink-0 overflow-x-auto">
+          {previews.map(p => (
+            <div key={p.port} className="flex items-center gap-1 shrink-0">
+              <button
+                onClick={() => {
+                  const url = isRemote && p.url ? p.url : `http://localhost:${p.port}`;
+                  navigate(url);
+                }}
+                className="text-[9px] px-1.5 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+              >
+                <span className="text-green-400 mr-0.5">●</span>
+                :{p.port}
+              </button>
+              {p.url && (
+                <button
+                  onClick={() => navigator.clipboard.writeText(p.url!).then(() => alert('Tunnel URL copied'))}
+                  className="text-[8px] text-green-400 hover:underline truncate max-w-[120px]"
+                  title={p.url}
+                >{p.url.replace('https://', '').slice(0, 20)}...</button>
+              )}
+              <button onClick={() => stopTunnel(p.port)} className="text-[8px] text-red-400 hover:text-red-300">✕</button>
+            </div>
+          ))}
+        </div>
+      )}
+      {/* Content */}
+      <div className="flex-1 relative">
+        {tunnelStarting && (
+          <div className="absolute inset-0 flex items-center justify-center text-[var(--text-secondary)] text-xs z-10 bg-[var(--bg-primary)]/80">
+            Creating tunnel... this may take up to 30 seconds
+          </div>
+        )}
+        {browserUrl ? (
+          <iframe
+            key={browserKey}
+            src={browserUrl}
+            className="absolute inset-0 w-full h-full border-0 bg-white"
+            sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+          />
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center text-[var(--text-secondary)] text-xs">
+            <div className="text-center space-y-1">
+              <p>Enter a URL or port number and press Enter</p>
+              <p className="text-[9px]">Click Tunnel to create a public URL for remote access</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/components/CodeViewer.tsx

@@ -189,12 +189,6 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
   const [editing, setEditing] = useState(false);
   const [editContent, setEditContent] = useState('');
   const [saving, setSaving] = useState(false);
-  const [browserOpen, setBrowserOpen] = useState(false);
-  const [browserUrl, setBrowserUrl] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('forge-browser-url') || '' : '');
-  const [browserKey, setBrowserKey] = useState(0);
-  const [browserWidth, setBrowserWidth] = useState(640);
-  const browserDragRef = useRef<{ startX: number; startW: number } | null>(null);
-  const [browserDragging, setBrowserDragging] = useState(false);
 
   const handleCodeOpenChange = useCallback((open: boolean) => {
     setCodeOpen(open);
@@ -427,74 +421,10 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
       )}
 
       {/* Terminal + Browser — main area */}
-      <div className={`flex ${codeOpen ? 'shrink-0' : 'flex-1'}`} style={codeOpen ? { height: terminalHeight } : undefined}>
-        <div className="flex-1 min-w-0">
-          <Suspense fallback={<div className="h-full flex items-center justify-center text-[var(--text-secondary)] text-xs">Loading...</div>}>
-            <WebTerminal ref={terminalRef} onActiveSession={handleActiveSession} onCodeOpenChange={handleCodeOpenChange} browserOpen={browserOpen} onBrowserToggle={() => { setBrowserOpen(v => !v); if (!browserOpen) setBrowserKey(k => k + 1); }} />
-          </Suspense>
-        </div>
-        {browserOpen && (
-          <>
-          <div
-            onMouseDown={(e) => {
-              e.preventDefault();
-              browserDragRef.current = { startX: e.clientX, startW: browserWidth };
-              setBrowserDragging(true);
-              const onMove = (ev: MouseEvent) => {
-                if (!browserDragRef.current) return;
-                setBrowserWidth(Math.max(320, Math.min(1200, browserDragRef.current.startW - (ev.clientX - browserDragRef.current.startX))));
-              };
-              const onUp = () => {
-                browserDragRef.current = null;
-                setBrowserDragging(false);
-                window.removeEventListener('mousemove', onMove);
-                window.removeEventListener('mouseup', onUp);
-              };
-              window.addEventListener('mousemove', onMove);
-              window.addEventListener('mouseup', onUp);
-            }}
-            className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50"
-          />
-          <div style={{ width: browserWidth }} className="shrink-0 flex flex-col">
-            <div className="flex items-center gap-1 px-2 py-1 border-b border-[var(--border)] bg-[var(--bg-tertiary)] shrink-0">
-              <input
-                type="text"
-                defaultValue={browserUrl}
-                placeholder="http://localhost:3000"
-                onKeyDown={e => {
-                  if (e.key === 'Enter') {
-                    const url = (e.target as HTMLInputElement).value.trim();
-                    if (url) {
-                      setBrowserUrl(url);
-                      localStorage.setItem('forge-browser-url', url);
-                      setBrowserKey(k => k + 1);
-                    }
-                  }
-                }}
-                className="flex-1 bg-[var(--bg-secondary)] border border-[var(--border)] rounded px-2 py-0.5 text-[10px] text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] min-w-0"
-              />
-              <button onClick={() => setBrowserKey(k => k + 1)} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] px-1" title="Refresh">↻</button>
-              <button onClick={() => window.open(browserUrl, '_blank')} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] px-1" title="Open in new tab">↗</button>
-              <button onClick={() => setBrowserOpen(false)} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--red)] px-1" title="Close">✕</button>
-            </div>
-            <div className="flex-1 relative">
-              {browserUrl ? (
-                <iframe
-                  key={browserKey}
-                  src={browserUrl}
-                  className="absolute inset-0 w-full h-full border-0 bg-white"
-                  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
-                />
-              ) : (
-                <div className="absolute inset-0 flex items-center justify-center text-[var(--text-secondary)] text-xs">
-                  Enter a URL and press Enter
-                </div>
-              )}
-              {browserDragging && <div className="absolute inset-0 z-10" />}
-            </div>
-          </div>
-          </>
-        )}
+      <div className={codeOpen ? 'shrink-0' : 'flex-1'} style={codeOpen ? { height: terminalHeight } : undefined}>
+        <Suspense fallback={<div className="h-full flex items-center justify-center text-[var(--text-secondary)] text-xs">Loading...</div>}>
+          <WebTerminal ref={terminalRef} onActiveSession={handleActiveSession} onCodeOpenChange={handleCodeOpenChange} />
+        </Suspense>
       </div>
 
       {/* Resize handle */}

package/components/Dashboard.tsx

@@ -16,7 +16,7 @@ const WebTerminal = lazy(() => import('./WebTerminal'));
 const DocsViewer = lazy(() => import('./DocsViewer'));
 const CodeViewer = lazy(() => import('./CodeViewer'));
 const ProjectManager = lazy(() => import('./ProjectManager'));
-const PreviewPanel = lazy(() => import('./PreviewPanel'));
+const BrowserPanel = lazy(() => import('./BrowserPanel'));
 const PipelineView = lazy(() => import('./PipelineView'));
 const HelpDialog = lazy(() => import('./HelpDialog'));
 const LogViewer = lazy(() => import('./LogViewer'));
@@ -42,8 +42,64 @@ interface ProjectInfo {
   language: string | null;
 }
 
+function FloatingBrowser({ onClose }: { onClose: () => void }) {
+  const [pos, setPos] = useState({ x: 60, y: 60 });
+  const [size, setSize] = useState({ w: 700, h: 500 });
+  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);
+
+  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: pos.x, top: pos.y, width: size.w, height: size.h }}
+    >
+      <div
+        className="flex items-center gap-2 px-3 py-1.5 bg-[var(--bg-tertiary)] border-b border-[var(--border)] cursor-move shrink-0 select-none"
+        onMouseDown={(e) => {
+          e.preventDefault();
+          dragRef.current = { startX: e.clientX, startY: e.clientY, origX: pos.x, origY: pos.y };
+          const onMove = (ev: MouseEvent) => {
+            if (!dragRef.current) return;
+            setPos({ 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);
+        }}
+      >
+        <span className="text-[11px] font-semibold text-[var(--text-primary)]">Browser</span>
+        <button onClick={onClose} className="ml-auto text-[var(--text-secondary)] hover:text-[var(--red)] text-sm leading-none">✕</button>
+      </div>
+      <div className="flex-1 min-h-0 flex flex-col">
+        <BrowserPanel />
+      </div>
+      <div
+        onMouseDown={(e) => {
+          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(400, 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);
+        }}
+        className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize"
+        style={{ background: 'linear-gradient(135deg, transparent 50%, var(--border) 50%)' }}
+      />
+    </div>
+  );
+}
+
 export default function Dashboard({ user }: { user: any }) {
-  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'preview' | 'pipelines' | 'skills' | 'logs'>('terminal');
+  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'skills' | 'logs'>('terminal');
+  const [browserMode, setBrowserMode] = useState<'none' | 'float' | 'right' | 'left'>('none');
+  const [showBrowserMenu, setShowBrowserMenu] = useState(false);
+  const [browserWidth, setBrowserWidth] = useState(600);
+  const browserDragRef = useRef<{ startX: number; startW: number } | null>(null);
+  const [browserDragging, setBrowserDragging] = useState(false);
   const [tasks, setTasks] = useState<Task[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [showNewTask, setShowNewTask] = useState(false);
@@ -172,7 +228,34 @@ export default function Dashboard({ user }: { user: any }) {
   const queued = tasks.filter(t => t.status === 'queued');
 
   return (
-    <div className="h-screen flex flex-col">
+    <div className="h-screen flex">
+      {/* Browser — left side */}
+      {browserMode === 'left' && (
+        <>
+        <div style={{ width: browserWidth }} className="shrink-0 flex flex-col relative">
+          <Suspense fallback={null}><BrowserPanel onClose={() => setBrowserMode('none')} /></Suspense>
+          {browserDragging && <div className="absolute inset-0 z-10" />}
+        </div>
+        <div
+          onMouseDown={(e) => {
+            e.preventDefault();
+            browserDragRef.current = { startX: e.clientX, startW: browserWidth };
+            setBrowserDragging(true);
+            const onMove = (ev: MouseEvent) => {
+              if (!browserDragRef.current) return;
+              setBrowserWidth(Math.max(320, Math.min(1200, browserDragRef.current.startW + (ev.clientX - browserDragRef.current.startX))));
+            };
+            const onUp = () => { browserDragRef.current = null; setBrowserDragging(false); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('mouseup', onUp);
+          }}
+          className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50"
+        />
+        </>
+      )}
+
+      {/* Forge main area */}
+      <div className="flex-1 flex flex-col min-w-0 min-h-0 overflow-hidden">
       {/* Top bar */}
       <header className="h-12 border-b-2 border-[var(--border)] flex items-center justify-between px-4 shrink-0 bg-[var(--bg-secondary)]">
         <div className="flex items-center gap-4">
@@ -285,17 +368,47 @@ export default function Dashboard({ user }: { user: any }) {
                 : 'border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)]'
             }`}
           >?</button>
-          {/* Preview + Tunnel */}
-          <button
-            onClick={() => setViewMode('preview')}
-            className={`text-[10px] px-2 py-0.5 border rounded transition-colors ${
-              viewMode === 'preview'
-                ? 'border-[var(--accent)] text-[var(--accent)]'
-                : 'border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)]'
-            }`}
-          >
-            Preview
-          </button>
+          <div className="relative">
+            <button
+              onClick={() => setShowBrowserMenu(v => !v)}
+              className={`text-[10px] px-2 py-0.5 border rounded transition-colors ${
+                browserMode !== 'none'
+                  ? 'border-blue-500 text-blue-400'
+                  : 'border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)]'
+              }`}
+            >
+              Browser
+            </button>
+            {showBrowserMenu && (
+              <>
+              <div className="fixed inset-0 z-40" onClick={() => setShowBrowserMenu(false)} />
+              <div className="absolute top-full right-0 mt-1 z-50 bg-[var(--bg-secondary)] border border-[var(--border)] rounded shadow-lg py-1 min-w-[140px]">
+                {browserMode !== 'none' && (
+                  <button onClick={() => { setBrowserMode('none'); setShowBrowserMenu(false); }} className="w-full text-left px-3 py-1.5 text-[10px] text-red-400 hover:bg-[var(--bg-tertiary)]">
+                    Close Browser
+                  </button>
+                )}
+                <button onClick={() => { setBrowserMode('float'); setShowBrowserMenu(false); }} className={`w-full text-left px-3 py-1.5 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'float' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
+                  Floating Window
+                </button>
+                <button onClick={() => { setBrowserMode('right'); setShowBrowserMenu(false); }} className={`w-full text-left px-3 py-1.5 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'right' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
+                  Right Side
+                </button>
+                <button onClick={() => { setBrowserMode('left'); setShowBrowserMenu(false); }} className={`w-full text-left px-3 py-1.5 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'left' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
+                  Left Side
+                </button>
+                <button onClick={() => {
+                  const url = localStorage.getItem('forge-browser-url');
+                  if (url) window.open(url, '_blank');
+                  else { const u = prompt('Enter URL to open:'); if (u) window.open(u.trim(), '_blank'); }
+                  setShowBrowserMenu(false);
+                }} className="w-full text-left px-3 py-1.5 text-[10px] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]">
+                  New Tab
+                </button>
+              </div>
+              </>
+            )}
+          </div>
           <TunnelToggle />
           {onlineCount.total > 0 && (
             <span className="text-[10px] text-[var(--text-secondary)] flex items-center gap-1" title={`${onlineCount.total} online${onlineCount.remote > 0 ? `, ${onlineCount.remote} remote` : ''}`}>
@@ -581,12 +694,6 @@ export default function Dashboard({ user }: { user: any }) {
           </Suspense>
         )}
 
-        {/* Preview */}
-        {viewMode === 'preview' && (
-          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
-            <PreviewPanel />
-          </Suspense>
-        )}
 
         {/* Skills */}
         {viewMode === 'skills' && (
@@ -616,6 +723,39 @@ export default function Dashboard({ user }: { user: any }) {
           </Suspense>
         </div>
       </div>
+      </div>{/* close Forge main area */}
+
+      {/* Browser — right side */}
+      {browserMode === 'right' && (
+        <>
+        <div
+          onMouseDown={(e) => {
+            e.preventDefault();
+            browserDragRef.current = { startX: e.clientX, startW: browserWidth };
+            setBrowserDragging(true);
+            const onMove = (ev: MouseEvent) => {
+              if (!browserDragRef.current) return;
+              setBrowserWidth(Math.max(320, Math.min(1200, browserDragRef.current.startW - (ev.clientX - browserDragRef.current.startX))));
+            };
+            const onUp = () => { browserDragRef.current = null; setBrowserDragging(false); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('mouseup', onUp);
+          }}
+          className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50"
+        />
+        <div style={{ width: browserWidth }} className="shrink-0 flex flex-col relative">
+          <Suspense fallback={null}><BrowserPanel onClose={() => setBrowserMode('none')} /></Suspense>
+          {browserDragging && <div className="absolute inset-0 z-10" />}
+        </div>
+        </>
+      )}
+
+      {/* Browser — floating window */}
+      {browserMode === 'float' && (
+        <Suspense fallback={null}>
+          <FloatingBrowser onClose={() => setBrowserMode('none')} />
+        </Suspense>
+      )}
 
       {showNewTask && (
         <NewTaskModal

package/components/HelpTerminal.tsx

@@ -26,6 +26,8 @@ export default function HelpTerminal() {
     if (!containerRef.current) return;
 
     let disposed = false;
+    let dataDir = '~/.forge/data';
+
     const cs = getComputedStyle(document.documentElement);
     const tv = (name: string) => cs.getPropertyValue(name).trim();
     const term = new Terminal({
@@ -73,7 +75,7 @@ export default function HelpTerminal() {
               isNewSession = false;
               setTimeout(() => {
                 if (socket.readyState === WebSocket.OPEN) {
-                  socket.send(JSON.stringify({ type: 'input', data: `cd ~/.forge/help 2>/dev/null && claude\n` }));
+                  socket.send(JSON.stringify({ type: 'input', data: `cd "${dataDir}" 2>/dev/null && claude\n` }));
                 }
               }, 300);
             }
@@ -94,7 +96,11 @@ export default function HelpTerminal() {
       socket.onerror = () => {};
     }
 
-    connect();
+    // Fetch data dir then connect
+    fetch('/api/help?action=status').then(r => r.json())
+      .then(data => { if (data.dataDir) dataDir = data.dataDir; })
+      .catch(() => {})
+      .finally(() => { if (!disposed) connect(); });
 
     term.onData((data) => {
       if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'input', data }));

package/components/ProjectDetail.tsx

@@ -999,11 +999,11 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
                   {/* Issue scan config (for issue-fix-and-review workflow) */}
                   {(b.workflowName === 'issue-auto-fix' || b.workflowName === 'issue-fix-and-review') && (
                     <div className="space-y-1.5 pt-1 border-t border-[var(--border)]/30">
-                      {b.config.interval > 0 && (
-                        <div className="text-[8px] text-[var(--text-secondary)]">
-                          Scheduled mode: auto-scans GitHub issues and fixes new ones
-                        </div>
-                      )}
+                      <div className="text-[8px] text-[var(--text-secondary)]">
+                        {b.config.interval > 0
+                          ? 'Scheduled mode: auto-scans GitHub issues and fixes new ones'
+                          : 'Requires: gh auth login (run in terminal first)'}
+                      </div>
                       <div className="flex items-center gap-2 text-[9px]">
                           <label className="text-[var(--text-secondary)]">Labels:</label>
                           <input

package/components/WebTerminal.tsx

@@ -15,8 +15,6 @@ export interface WebTerminalHandle {
 export interface WebTerminalProps {
   onActiveSession?: (sessionName: string | null) => void;
   onCodeOpenChange?: (open: boolean) => void;
-  browserOpen?: boolean;
-  onBrowserToggle?: () => void;
 }
 
 // ─── Types ───────────────────────────────────────────────────
@@ -166,7 +164,7 @@ let globalDragging = false;
 
 // ─── Main component ─────────────────────────────────────────
 
-const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function WebTerminal({ onActiveSession, onCodeOpenChange, browserOpen, onBrowserToggle }, ref) {
+const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function WebTerminal({ onActiveSession, onCodeOpenChange }, ref) {
   const [tabs, setTabs] = useState<TabState[]>(() => {
     const tree = makeTerminal();
     return [{ id: nextId++, label: 'Terminal 1', tree, ratios: {}, activeId: firstTerminalId(tree) }];
@@ -478,6 +476,15 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
     });
   }, [activeTab, updateActiveTab]);
 
+  const closePaneById = useCallback((id: number) => {
+    updateActiveTab(t => {
+      if (countTerminals(t.tree) <= 1) return t;
+      const newTree = removeNodeById(t.tree, id) || t.tree;
+      const newActiveId = t.activeId === id ? firstTerminalId(newTree) : t.activeId;
+      return { ...t, tree: newTree, activeId: newActiveId };
+    });
+  }, [updateActiveTab]);
+
   const setActiveId = useCallback((id: number) => {
     updateActiveTab(t => ({ ...t, activeId: id }));
   }, [updateActiveTab]);
@@ -636,20 +643,6 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
               Code
             </button>
           )}
-          {onBrowserToggle && (
-            <button
-              onClick={onBrowserToggle}
-              className={`text-[11px] px-3 py-1 rounded font-bold ${browserOpen ? 'text-white bg-blue-500 hover:bg-blue-400' : 'text-blue-400 border border-blue-500 hover:bg-blue-500 hover:text-white'}`}
-              title={browserOpen ? 'Close browser' : 'Open browser'}
-            >
-              Browser
-            </button>
-          )}
-          {activeTab && countTerminals(activeTab.tree) > 1 && (
-            <button onClick={onClosePane} className="text-[10px] px-2 py-0.5 text-[var(--accent)] hover:text-red-400 hover:bg-[var(--term-border)] rounded font-medium">
-              Close Pane
-            </button>
-          )}
         </div>
       </div>
 
@@ -876,6 +869,8 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
             onSessionConnected={onSessionConnected}
             refreshKeys={refreshKeys}
             skipPermissions={skipPermissions}
+            canClose={countTerminals(tab.tree) > 1}
+            onClosePane={tab.id === activeTabId ? closePaneById : undefined}
           />
         </div>
       ))}
@@ -888,7 +883,7 @@ export default WebTerminal;
 // ─── Pane renderer ───────────────────────────────────────────
 
 function PaneRenderer({
-  node, activeId, onFocus, ratios, setRatios, onSessionConnected, refreshKeys, skipPermissions,
+  node, activeId, onFocus, ratios, setRatios, onSessionConnected, refreshKeys, skipPermissions, canClose, onClosePane,
 }: {
   node: SplitNode;
   activeId: number;
@@ -898,11 +893,20 @@ function PaneRenderer({
   onSessionConnected: (paneId: number, sessionName: string) => void;
   refreshKeys: Record<number, number>;
   skipPermissions?: boolean;
+  canClose?: boolean;
+  onClosePane?: (id: number) => void;
 }) {
   if (node.type === 'terminal') {
     return (
-      <div className={`h-full w-full ${activeId === node.id ? 'ring-1 ring-[#7c5bf0]/50 ring-inset' : ''}`} onMouseDown={() => onFocus(node.id)}>
+      <div className={`h-full w-full relative group/pane ${activeId === node.id ? 'ring-1 ring-[#7c5bf0]/50 ring-inset' : ''}`} onMouseDown={() => onFocus(node.id)}>
         <MemoTerminalPane key={`${node.id}-${refreshKeys[node.id] || 0}`} id={node.id} sessionName={node.sessionName} projectPath={node.projectPath} skipPermissions={skipPermissions} onSessionConnected={onSessionConnected} />
+        {canClose && onClosePane && (
+          <button
+            onClick={(e) => { e.stopPropagation(); if (confirm('Close this pane?')) onClosePane(node.id); }}
+            className="absolute top-1.5 right-1.5 z-10 w-6 h-6 flex items-center justify-center rounded bg-red-500/80 text-white hover:bg-red-500 opacity-0 group-hover/pane:opacity-100 transition-opacity text-xs font-bold shadow"
+            title="Close this pane"
+          >✕</button>
+        )}
       </div>
     );
   }
@@ -911,8 +915,8 @@ function PaneRenderer({
 
   return (
     <DraggableSplit splitId={node.id} direction={node.direction} ratio={ratio} setRatios={setRatios}>
-      <PaneRenderer node={node.first} activeId={activeId} onFocus={onFocus} ratios={ratios} setRatios={setRatios} onSessionConnected={onSessionConnected} refreshKeys={refreshKeys} skipPermissions={skipPermissions} />
-      <PaneRenderer node={node.second} activeId={activeId} onFocus={onFocus} ratios={ratios} setRatios={setRatios} onSessionConnected={onSessionConnected} refreshKeys={refreshKeys} skipPermissions={skipPermissions} />
+      <PaneRenderer node={node.first} activeId={activeId} onFocus={onFocus} ratios={ratios} setRatios={setRatios} onSessionConnected={onSessionConnected} refreshKeys={refreshKeys} skipPermissions={skipPermissions} canClose={canClose} onClosePane={onClosePane} />
+      <PaneRenderer node={node.second} activeId={activeId} onFocus={onFocus} ratios={ratios} setRatios={setRatios} onSessionConnected={onSessionConnected} refreshKeys={refreshKeys} skipPermissions={skipPermissions} canClose={canClose} onClosePane={onClosePane} />
     </DraggableSplit>
   );
 }
@@ -1198,12 +1202,29 @@ const MemoTerminalPane = memo(function TerminalPane({
             // Auto-run claude for project tabs (only if no pendingCommand already set)
             if (isNewlyCreated && projectPathRef.current && !pendingCommands.has(id)) {
               isNewlyCreated = false;
-              setTimeout(() => {
-                if (!disposed && ws?.readyState === WebSocket.OPEN) {
+              // Check if project has existing claude sessions to decide -c flag
+              const pp = projectPathRef.current;
+              const pName = pp.replace(/\/+$/, '').split('/').pop() || '';
+              fetch(`/api/claude-sessions/${encodeURIComponent(pName)}`)
+                .then(r => r.json())
+                .then(sData => {
+                  const hasSession = Array.isArray(sData) ? sData.length > 0 : false;
+                  const resumeFlag = hasSession ? ' -c' : '';
                   const skipFlag = skipPermRef.current ? ' --dangerously-skip-permissions' : '';
-                  ws.send(JSON.stringify({ type: 'input', data: `cd "${projectPathRef.current}" && claude${skipFlag}\n` }));
-                }
-              }, 300);
+                  setTimeout(() => {
+                    if (!disposed && ws?.readyState === WebSocket.OPEN) {
+                      ws.send(JSON.stringify({ type: 'input', data: `cd "${pp}" && claude${resumeFlag}${skipFlag}\n` }));
+                    }
+                  }, 300);
+                })
+                .catch(() => {
+                  const skipFlag = skipPermRef.current ? ' --dangerously-skip-permissions' : '';
+                  setTimeout(() => {
+                    if (!disposed && ws?.readyState === WebSocket.OPEN) {
+                      ws.send(JSON.stringify({ type: 'input', data: `cd "${pp}" && claude${skipFlag}\n` }));
+                    }
+                  }, 300);
+                });
             }
             isNewlyCreated = false;
             // Force tmux to redraw by toggling size, then send reset

package/lib/init.ts

@@ -82,6 +82,23 @@ export function ensureInitialized() {
   // Auto-detect claude path if not configured
   autoDetectClaude();
 
+  // Sync help docs + CLAUDE.md to data dir on startup
+  try {
+    const { existsSync, readdirSync, readFileSync, writeFileSync, mkdirSync } = require('node:fs');
+    const { join: joinPath } = require('node:path');
+    const { getConfigDir, getDataDir } = require('./dirs');
+    const helpDir = joinPath(getConfigDir(), 'help');
+    const sourceDir = joinPath(process.cwd(), 'lib', 'help-docs');
+    if (existsSync(sourceDir)) {
+      if (!existsSync(helpDir)) mkdirSync(helpDir, { recursive: true });
+      for (const f of readdirSync(sourceDir)) {
+        if (f.endsWith('.md')) writeFileSync(joinPath(helpDir, f), readFileSync(joinPath(sourceDir, f)));
+      }
+      const claudeMd = joinPath(helpDir, 'CLAUDE.md');
+      if (existsSync(claudeMd)) writeFileSync(joinPath(getDataDir(), 'CLAUDE.md'), readFileSync(claudeMd));
+    }
+  } catch {}
+
   // Sync skills registry (async, non-blocking) — on startup + every 30 min
   try {
     const { syncSkills } = require('./skills');

package/lib/pipeline-scheduler.ts

@@ -150,9 +150,11 @@ export function deleteRun(id: string): void {
 
 function isDuplicate(projectPath: string, workflowName: string, dedupKey: string): boolean {
   const row = db().prepare(
-    'SELECT 1 FROM pipeline_runs WHERE project_path = ? AND workflow_name = ? AND dedup_key = ?'
-  ).get(projectPath, workflowName, dedupKey);
-  return !!row;
+    'SELECT status FROM pipeline_runs WHERE project_path = ? AND workflow_name = ? AND dedup_key = ? ORDER BY created_at DESC LIMIT 1'
+  ).get(projectPath, workflowName, dedupKey) as { status: string } | undefined;
+  if (!row) return false;
+  // Failed runs are not duplicates — allow retry
+  return row.status !== 'failed';
 }
 
 export function resetDedup(projectPath: string, workflowName: string, dedupKey: string): void {
@@ -222,7 +224,7 @@ function fetchOpenIssues(projectPath: string, labels: string[]): { number: numbe
   if (!repo) return [{ number: -1, title: '', error: 'Could not detect GitHub repo. Run: gh auth login' }];
   try {
     const labelFilter = labels.length > 0 ? ` --label "${labels.join(',')}"` : '';
-    const out = execSync(`gh issue list --state open --json number,title${labelFilter} -R ${repo}`, {
+    const out = execSync(`gh issue list --state open --limit 30 --json number,title${labelFilter} -R ${repo}`, {
       cwd: projectPath, encoding: 'utf-8', timeout: 15000, stdio: ['pipe', 'pipe', 'pipe'],
     });
     return JSON.parse(out) || [];
@@ -246,11 +248,18 @@ export function scanAndTriggerIssues(binding: ProjectPipelineBinding): { trigger
   const recentRuns = getRuns(binding.projectPath, binding.workflowName, 5);
   const hasRunning = recentRuns.some(r => r.status === 'running');
 
+  // Batch dedup check — one query instead of N
+  const processedKeys = new Set(
+    (db().prepare(
+      'SELECT dedup_key FROM pipeline_runs WHERE project_path = ? AND workflow_name = ? AND dedup_key IS NOT NULL AND status != ?'
+    ).all(binding.projectPath, binding.workflowName, 'failed') as { dedup_key: string }[])
+    .map(r => r.dedup_key)
+  );
+
   const newIssues: { number: number; title: string }[] = [];
   for (const issue of issues) {
     if (issue.number < 0) continue;
-    const dedupKey = `issue:${issue.number}`;
-    if (!isDuplicate(binding.projectPath, binding.workflowName, dedupKey)) {
+    if (!processedKeys.has(`issue:${issue.number}`)) {
       newIssues.push(issue);
     }
   }
@@ -269,6 +278,9 @@ export function scanAndTriggerIssues(binding: ProjectPipelineBinding): { trigger
 
   const issue = newIssues[0];
   const dedupKey = `issue:${issue.number}`;
+  // Remove old failed run so new dedup_key insert won't conflict
+  db().prepare('DELETE FROM pipeline_runs WHERE project_path = ? AND workflow_name = ? AND dedup_key = ? AND status = ?')
+    .run(binding.projectPath, binding.workflowName, dedupKey, 'failed');
   try {
     triggerPipeline(
       binding.projectPath, binding.projectName, binding.workflowName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aion0/forge",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "Unified AI workflow platform — multi-model task orchestration, persistent sessions, web terminal, remote access",
   "type": "module",
   "scripts": {

package/components/PreviewPanel.tsx

@@ -1,167 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-
-interface PreviewEntry {
-  port: number;
-  url: string | null;
-  status: string;
-  label?: string;
-}
-
-export default function PreviewPanel() {
-  const [previews, setPreviews] = useState<PreviewEntry[]>([]);
-  const [inputPort, setInputPort] = useState('');
-  const [inputLabel, setInputLabel] = useState('');
-  const [starting, setStarting] = useState(false);
-  const [error, setError] = useState('');
-  const [activePreview, setActivePreview] = useState<number | null>(null);
-  const [isRemote, setIsRemote] = useState(false);
-
-  useEffect(() => {
-    setIsRemote(!['localhost', '127.0.0.1'].includes(window.location.hostname));
-  }, []);
-
-  const fetchPreviews = useCallback(async () => {
-    try {
-      const res = await fetch('/api/preview');
-      const data = await res.json();
-      if (Array.isArray(data)) setPreviews(data);
-    } catch {}
-  }, []);
-
-  useEffect(() => {
-    fetchPreviews();
-    const timer = setInterval(fetchPreviews, 5000);
-    return () => clearInterval(timer);
-  }, [fetchPreviews]);
-
-  const handleStart = async () => {
-    const p = parseInt(inputPort);
-    if (!p || p < 1 || p > 65535) { setError('Invalid port'); return; }
-    setError('');
-    setStarting(true);
-    try {
-      const res = await fetch('/api/preview', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'start', port: p, label: inputLabel || undefined }),
-      });
-      const data = await res.json();
-      if (data.error) setError(data.error);
-      else {
-        setInputPort('');
-        setInputLabel('');
-        setActivePreview(p);
-      }
-      fetchPreviews();
-    } catch { setError('Failed'); }
-    setStarting(false);
-  };
-
-  const handleStop = async (port: number) => {
-    await fetch('/api/preview', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'stop', port }),
-    });
-    if (activePreview === port) setActivePreview(null);
-    fetchPreviews();
-  };
-
-  const active = previews.find(p => p.port === activePreview);
-  const previewSrc = active
-    ? (isRemote ? active.url : `http://localhost:${active.port}`)
-    : null;
-
-  return (
-    <div className="flex-1 flex flex-col min-h-0">
-      {/* Top bar */}
-      <div className="px-4 py-2 border-b border-[var(--border)] shrink-0 space-y-2">
-        {/* Preview list */}
-        <div className="flex items-center gap-2 flex-wrap">
-          <span className="text-[11px] font-semibold text-[var(--text-primary)]">Demo Preview</span>
-          {previews.map(p => (
-            <div key={p.port} className="flex items-center gap-1">
-              <button
-                onClick={() => setActivePreview(p.port)}
-                className={`text-[10px] px-2 py-0.5 rounded ${activePreview === p.port ? 'bg-[var(--accent)] text-white' : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
-              >
-                <span className={`mr-1 ${p.status === 'running' ? 'text-green-400' : 'text-gray-500'}`}>●</span>
-                {p.label || `:${p.port}`}
-              </button>
-              {p.url && (
-                <button
-                  onClick={() => navigator.clipboard.writeText(p.url!)}
-                  className="text-[8px] text-green-400 hover:text-green-300 truncate max-w-[150px]"
-                  title={`Copy: ${p.url}`}
-                >
-                  {p.url.replace('https://', '').slice(0, 20)}...
-                </button>
-              )}
-              <button
-                onClick={() => handleStop(p.port)}
-                className="text-[9px] text-red-400 hover:text-red-300"
-              >
-                x
-              </button>
-            </div>
-          ))}
-        </div>
-
-        {/* Add new */}
-        <div className="flex items-center gap-2">
-          <input
-            type="number"
-            value={inputPort}
-            onChange={e => setInputPort(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && handleStart()}
-            placeholder="Port"
-            className="w-20 text-xs bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] font-mono"
-          />
-          <input
-            value={inputLabel}
-            onChange={e => setInputLabel(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && handleStart()}
-            placeholder="Label (optional)"
-            className="w-32 text-xs bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
-          />
-          <button
-            onClick={handleStart}
-            disabled={!inputPort || starting}
-            className="text-[10px] px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50"
-          >
-            {starting ? 'Starting...' : '+ Add'}
-          </button>
-          {active && (
-            <a
-              href={previewSrc || '#'}
-              target="_blank"
-              rel="noopener"
-              className="text-[10px] text-[var(--accent)] hover:underline ml-auto"
-            >
-              Open ↗
-            </a>
-          )}
-          {error && <span className="text-[10px] text-red-400">{error}</span>}
-        </div>
-      </div>
-
-      {/* Preview iframe */}
-      {previewSrc && active?.status === 'running' ? (
-        <iframe
-          src={previewSrc}
-          className="flex-1 w-full border-0 bg-white"
-          title="Preview"
-        />
-      ) : (
-        <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
-          <div className="text-center space-y-3 max-w-md">
-            <p className="text-sm">{previews.length > 0 ? 'Select a preview to display' : 'Preview local dev servers'}</p>
-            <p className="text-xs">Enter a port, add a label, and click Add. Each preview gets its own Cloudflare Tunnel URL.</p>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}