@aion0/forge 0.2.4 → 0.2.5

package/app/api/code/route.ts

@@ -174,10 +174,12 @@ export async function GET(req: Request) {
   }
   const gitRepos: GitRepo[] = [];
 
+  const gitOpts = { encoding: 'utf-8' as const, timeout: 5000, stdio: ['pipe', 'pipe', 'pipe'] as any };
+
   function scanGitStatus(dir: string, repoName: string, pathPrefix: string) {
     try {
-      const branch = execSync('git rev-parse --abbrev-ref HEAD', { cwd: dir, encoding: 'utf-8', timeout: 3000 }).trim();
-      const statusOut = execSync('git status --porcelain -u', { cwd: dir, encoding: 'utf-8', timeout: 5000 });
+      const branch = execSync('git rev-parse --abbrev-ref HEAD', { ...gitOpts, cwd: dir, timeout: 3000 }).toString().trim();
+      const statusOut = execSync('git status --porcelain -u', { ...gitOpts, cwd: dir }).toString();
       const changes = statusOut.replace(/\n$/, '').split('\n').filter(Boolean)
         .map(line => {
           if (line.length < 4) return null;
@@ -188,7 +190,7 @@ export async function GET(req: Request) {
         })
         .filter((g): g is { status: string; path: string } => g !== null && !!g.path && !g.path.includes(' -> '));
       let remote = '';
-      try { remote = execSync('git remote get-url origin', { cwd: dir, encoding: 'utf-8', timeout: 2000 }).trim(); } catch {}
+      try { remote = execSync('git remote get-url origin', { ...gitOpts, cwd: dir, timeout: 2000 }).toString().trim(); } catch {}
       if (branch || changes.length > 0) {
         gitRepos.push({ name: repoName, branch, remote, changes });
       }
@@ -197,7 +199,7 @@ export async function GET(req: Request) {
 
   // Check if root is a git repo
   try {
-    execSync('git rev-parse --git-dir', { cwd: resolvedDir, encoding: 'utf-8', timeout: 2000 });
+    execSync('git rev-parse --git-dir', { cwd: resolvedDir, encoding: 'utf-8', timeout: 2000, stdio: ['pipe', 'pipe', 'pipe'] });
     scanGitStatus(resolvedDir, '.', '');
   } catch {
     // Root is not a git repo — scan subdirectories
@@ -206,7 +208,7 @@ export async function GET(req: Request) {
         if (!entry.isDirectory() || entry.name.startsWith('.') || IGNORE.has(entry.name)) continue;
         const subDir = join(resolvedDir, entry.name);
         try {
-          execSync('git rev-parse --git-dir', { cwd: subDir, encoding: 'utf-8', timeout: 2000 });
+          execSync('git rev-parse --git-dir', { cwd: subDir, encoding: 'utf-8', timeout: 2000, stdio: ['pipe', 'pipe', 'pipe'] });
           scanGitStatus(subDir, entry.name, entry.name);
         } catch {}
       }

package/app/api/git/route.ts

@@ -12,7 +12,7 @@ function isUnderProjectRoot(dir: string): boolean {
 }
 
 function git(cmd: string, cwd: string): string {
-  return execSync(`git ${cmd}`, { cwd, encoding: 'utf-8', timeout: 15000 }).trim();
+  return execSync(`git ${cmd}`, { cwd, encoding: 'utf-8', timeout: 15000, stdio: ['pipe', 'pipe', 'pipe'] }).toString().trim();
 }
 
 // GET /api/git?dir=<path> — git status for a project
@@ -24,7 +24,7 @@ export async function GET(req: NextRequest) {
 
   try {
     const branch = git('rev-parse --abbrev-ref HEAD', dir);
-    const statusRaw = execSync('git status --porcelain -u', { cwd: dir, encoding: 'utf-8', timeout: 15000 });
+    const statusRaw = execSync('git status --porcelain -u', { cwd: dir, encoding: 'utf-8', timeout: 15000, stdio: ['pipe', 'pipe', 'pipe'] }).toString();
     const changes = statusRaw.replace(/\n$/, '').split('\n').filter(Boolean).map(line => ({
       status: line.substring(0, 2).trim() || 'M',
       path: line.substring(3).replace(/\/$/, ''),

package/app/api/preview/route.ts

@@ -4,30 +4,39 @@ import { join, dirname } from 'node:path';
 import { homedir } from 'node:os';
 import { spawn, execSync, type ChildProcess } from 'node:child_process';
 
-const CONFIG_FILE = join(homedir(), '.forge', 'preview.json');
+const CONFIG_FILE = join(process.env.FORGE_DATA_DIR || join(homedir(), '.forge'), 'preview.json');
 
-// Persist tunnel state across hot-reloads
+interface PreviewEntry {
+  port: number;
+  url: string | null;
+  status: string;
+  label?: string;
+}
+
+// Persist state across hot-reloads
 const stateKey = Symbol.for('mw-preview-state');
 const g = globalThis as any;
-if (!g[stateKey]) g[stateKey] = { process: null, port: 0, url: null, status: 'stopped' };
-const state: { process: ChildProcess | null; port: number; url: string | null; status: string } = g[stateKey];
+if (!g[stateKey]) g[stateKey] = { entries: new Map<number, { process: ChildProcess | null; url: string | null; status: string; label: string }>() };
+const state: { entries: Map<number, { process: ChildProcess | null; url: string | null; status: string; label: string }> } = g[stateKey];
 
-function getConfig(): { port: number } {
+function getConfig(): PreviewEntry[] {
   try {
-    return JSON.parse(readFileSync(CONFIG_FILE, 'utf-8'));
+    const data = JSON.parse(readFileSync(CONFIG_FILE, 'utf-8'));
+    return Array.isArray(data) ? data : data.port ? [data] : [];
   } catch {
-    return { port: 0 };
+    return [];
   }
 }
 
-function saveConfig(config: { port: number }) {
+function saveConfig(entries: PreviewEntry[]) {
   const dir = dirname(CONFIG_FILE);
   mkdirSync(dir, { recursive: true });
-  writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
+  writeFileSync(CONFIG_FILE, JSON.stringify(entries, null, 2));
 }
 
 function getCloudflaredPath(): string | null {
-  const binPath = join(homedir(), '.forge', 'bin', 'cloudflared');
+  const dataDir = process.env.FORGE_DATA_DIR || join(homedir(), '.forge');
+  const binPath = join(dataDir, 'bin', 'cloudflared');
   if (existsSync(binPath)) return binPath;
   try {
     return execSync('which cloudflared', { encoding: 'utf-8' }).trim();
@@ -36,100 +45,105 @@ function getCloudflaredPath(): string | null {
   }
 }
 
-// GET — get current preview status
+// GET — list all previews
 export async function GET() {
-  return NextResponse.json({
-    port: state.port,
-    url: state.url,
-    status: state.status,
-  });
+  const entries: PreviewEntry[] = [];
+  for (const [port, s] of state.entries) {
+    entries.push({ port, url: s.url, status: s.status, label: s.label });
+  }
+  return NextResponse.json(entries);
 }
 
-// POST — start/stop preview tunnel
+// POST — start/stop/manage previews
 export async function POST(req: Request) {
-  const { port, action } = await req.json();
+  const body = await req.json();
 
-  if (action === 'stop' || port === 0) {
-    if (state.process) {
-      state.process.kill('SIGTERM');
-      state.process = null;
+  // Stop a preview
+  if (body.action === 'stop' && body.port) {
+    const entry = state.entries.get(body.port);
+    if (entry?.process) {
+      entry.process.kill('SIGTERM');
     }
-    state.port = 0;
-    state.url = null;
-    state.status = 'stopped';
-    saveConfig({ port: 0 });
-    return NextResponse.json({ port: 0, url: null, status: 'stopped' });
+    state.entries.delete(body.port);
+    syncConfig();
+    return NextResponse.json({ ok: true });
   }
 
-  const p = parseInt(port) || 0;
-  if (!p || p < 1 || p > 65535) {
-    return NextResponse.json({ error: 'Invalid port' }, { status: 400 });
-  }
+  // Start a new preview
+  if (body.action === 'start' && body.port) {
+    const port = parseInt(body.port);
+    if (!port || port < 1 || port > 65535) {
+      return NextResponse.json({ error: 'Invalid port' }, { status: 400 });
+    }
 
-  // Kill existing tunnel if any
-  if (state.process) {
-    state.process.kill('SIGTERM');
-    state.process = null;
-  }
+    // Already running?
+    const existing = state.entries.get(port);
+    if (existing && existing.status === 'running') {
+      return NextResponse.json({ port, url: existing.url, status: 'running', label: existing.label });
+    }
 
-  const binPath = getCloudflaredPath();
-  if (!binPath) {
-    return NextResponse.json({ error: 'cloudflared not installed. Start the main tunnel first to auto-download it.' }, { status: 500 });
-  }
+    const binPath = getCloudflaredPath();
+    if (!binPath) {
+      return NextResponse.json({ error: 'cloudflared not installed. Start the main tunnel first.' }, { status: 500 });
+    }
 
-  state.port = p;
-  state.status = 'starting';
-  state.url = null;
-  saveConfig({ port: p });
+    const label = body.label || `localhost:${port}`;
+    state.entries.set(port, { process: null, url: null, status: 'starting', label });
+    syncConfig();
+
+    // Start tunnel
+    return new Promise<NextResponse>((resolve) => {
+      let resolved = false;
+      const child = spawn(binPath, ['tunnel', '--url', `http://localhost:${port}`], {
+        stdio: ['ignore', 'pipe', 'pipe'],
+      });
+
+      const entry = state.entries.get(port)!;
+      entry.process = child;
+
+      const handleOutput = (data: Buffer) => {
+        const urlMatch = data.toString().match(/(https:\/\/[a-z0-9-]+\.trycloudflare\.com)/);
+        if (urlMatch && !entry.url) {
+          entry.url = urlMatch[1];
+          entry.status = 'running';
+          syncConfig();
+          if (!resolved) {
+            resolved = true;
+            resolve(NextResponse.json({ port, url: entry.url, status: 'running', label }));
+          }
+        }
+      };
 
-  // Start tunnel
-  return new Promise<NextResponse>((resolve) => {
-    let resolved = false;
+      child.stdout?.on('data', handleOutput);
+      child.stderr?.on('data', handleOutput);
 
-    const child = spawn(binPath, ['tunnel', '--url', `http://localhost:${p}`], {
-      stdio: ['ignore', 'pipe', 'pipe'],
-    });
-    state.process = child;
-
-    const handleOutput = (data: Buffer) => {
-      const text = data.toString();
-      const urlMatch = text.match(/(https:\/\/[a-z0-9-]+\.trycloudflare\.com)/);
-      if (urlMatch && !state.url) {
-        state.url = urlMatch[1];
-        state.status = 'running';
+      child.on('exit', () => {
+        entry.process = null;
+        entry.status = 'stopped';
+        entry.url = null;
+        syncConfig();
         if (!resolved) {
           resolved = true;
-          resolve(NextResponse.json({ port: p, url: state.url, status: 'running' }));
+          resolve(NextResponse.json({ port, url: null, status: 'stopped', error: 'Tunnel exited' }));
         }
-      }
-    };
-
-    child.stdout?.on('data', handleOutput);
-    child.stderr?.on('data', handleOutput);
-
-    child.on('exit', () => {
-      state.process = null;
-      state.status = 'stopped';
-      state.url = null;
-      if (!resolved) {
-        resolved = true;
-        resolve(NextResponse.json({ port: p, url: null, status: 'stopped', error: 'Tunnel exited' }));
-      }
-    });
+      });
 
-    child.on('error', (err) => {
-      state.status = 'error';
-      if (!resolved) {
-        resolved = true;
-        resolve(NextResponse.json({ error: err.message }, { status: 500 }));
-      }
+      setTimeout(() => {
+        if (!resolved) {
+          resolved = true;
+          resolve(NextResponse.json({ port, url: null, status: entry.status, error: 'Timeout' }));
+        }
+      }, 30000);
     });
+  }
+
+  return NextResponse.json({ error: 'Unknown action' }, { status: 400 });
+}
 
-    setTimeout(() => {
-      if (!resolved) {
-        resolved = true;
-        resolve(NextResponse.json({ port: p, url: null, status: state.status, error: 'Timeout waiting for tunnel URL' }));
-      }
-    }, 30000);
-  });
+function syncConfig() {
+  const entries: PreviewEntry[] = [];
+  for (const [port, s] of state.entries) {
+    entries.push({ port, url: s.url, status: s.status, label: s.label });
+  }
+  saveConfig(entries);
 }

package/app/global-error.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <html>
+      <body style={{ background: '#0a0a0a', color: '#e5e5e5', fontFamily: 'monospace', padding: '2rem' }}>
+        <h2>Something went wrong</h2>
+        <p style={{ color: '#999' }}>{error.message}</p>
+        <button onClick={reset} style={{ marginTop: '1rem', padding: '0.5rem 1rem', background: '#3b82f6', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
+          Try again
+        </button>
+      </body>
+    </html>
+  );
+}

package/bin/forge-server.mjs

@@ -12,6 +12,7 @@
  *   forge-server --port 4000              Custom web port (default: 3000)
  *   forge-server --terminal-port 4001     Custom terminal port (default: 3001)
  *   forge-server --dir ~/.forge-test      Custom data directory (default: ~/.forge)
+ *   forge-server --reset-terminal         Kill terminal server before start (loses tmux sessions)
  *
  * Examples:
  *   forge-server --background --port 4000 --terminal-port 4001 --dir ~/.forge-staging
@@ -35,11 +36,19 @@ function getArg(name) {
   return process.argv[idx + 1];
 }
 
+// ── Version ──
+if (process.argv.includes('--version') || process.argv.includes('-v')) {
+  const pkg = JSON.parse(readFileSync(join(ROOT, 'package.json'), 'utf-8'));
+  console.log(`@aion0/forge v${pkg.version}`);
+  process.exit(0);
+}
+
 const isDev = process.argv.includes('--dev');
 const isBackground = process.argv.includes('--background');
 const isStop = process.argv.includes('--stop');
 const isRestart = process.argv.includes('--restart');
 const isRebuild = process.argv.includes('--rebuild');
+const resetTerminal = process.argv.includes('--reset-terminal');
 
 const webPort = parseInt(getArg('--port')) || 3000;
 const terminalPort = parseInt(getArg('--terminal-port')) || 3001;
@@ -70,6 +79,20 @@ process.env.PORT = String(webPort);
 process.env.TERMINAL_PORT = String(terminalPort);
 process.env.FORGE_DATA_DIR = DATA_DIR;
 
+// ── Reset terminal server (kill port + tmux sessions) ──
+if (resetTerminal) {
+  console.log(`[forge] Resetting terminal server (port ${terminalPort})...`);
+  try {
+    const pids = execSync(`lsof -ti:${terminalPort}`, { encoding: 'utf-8' }).trim();
+    for (const pid of pids.split('\n').filter(Boolean)) {
+      try { execSync(`kill ${pid.trim()}`); } catch {}
+    }
+    console.log(`[forge] Killed terminal server on port ${terminalPort}`);
+  } catch {
+    console.log(`[forge] No process on port ${terminalPort}`);
+  }
+}
+
 // ── Helper: stop running instance ──
 function stopServer() {
   try {

package/cli/mw.ts

@@ -31,6 +31,19 @@ async function api(path: string, opts?: RequestInit) {
 }
 
 async function main() {
+  if (cmd === '--version' || cmd === '-v') {
+    const { readFileSync } = await import('node:fs');
+    const { join, dirname } = await import('node:path');
+    const { fileURLToPath } = await import('node:url');
+    try {
+      const pkg = JSON.parse(readFileSync(join(dirname(fileURLToPath(import.meta.url)), '..', 'package.json'), 'utf-8'));
+      console.log(`@aion0/forge v${pkg.version}`);
+    } catch {
+      console.log('forge (version unknown)');
+    }
+    process.exit(0);
+  }
+
   switch (cmd) {
     case 'task':
     case 't': {

package/components/CodeViewer.tsx

@@ -394,7 +394,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
   }, []);
 
   return (
-    <div className="flex-1 flex flex-col min-h-0">
+    <div className="flex-1 flex flex-col min-h-0 min-w-0 overflow-hidden">
       {/* Task completion notification */}
       {taskNotification && (
         <div className="shrink-0 px-3 py-1.5 bg-green-900/30 border-b border-green-800/50 flex items-center gap-2 text-xs">
@@ -431,7 +431,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
       )}
 
       {/* File browser + code viewer — bottom */}
-      {codeOpen && <div className="flex-1 flex min-h-0">
+      {codeOpen && <div className="flex-1 flex min-h-0 min-w-0 overflow-hidden">
         {/* Sidebar */}
         {sidebarOpen && (
           <aside className="w-56 border-r border-[var(--border)] flex flex-col shrink-0">
@@ -609,7 +609,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
         )}
 
         {/* Code viewer */}
-        <main className="flex-1 flex flex-col min-w-0">
+        <main className="flex-1 flex flex-col min-w-0 overflow-hidden" style={{ width: 0 }}>
           <div className="px-3 py-1.5 border-b border-[var(--border)] shrink-0 flex items-center gap-2">
             <button
               onClick={() => setSidebarOpen(v => !v)}
@@ -672,7 +672,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
             </div>
           ) : viewMode === 'diff' && diffContent ? (
             <div className="flex-1 overflow-auto bg-[var(--bg-primary)]">
-              <pre className="p-4 text-[12px] leading-[1.5] font-mono whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2 }}>
+              <pre className="p-4 text-[12px] leading-[1.5] font-mono whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2, overflow: 'auto', maxWidth: 0, minWidth: '100%' }}>
                 {diffContent.split('\n').map((line, i) => {
                   const color = line.startsWith('+') ? 'text-green-400 bg-green-900/20'
                     : line.startsWith('-') ? 'text-red-400 bg-red-900/20'
@@ -689,11 +689,11 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
             </div>
           ) : selectedFile && content !== null ? (
             <div className="flex-1 overflow-auto bg-[var(--bg-primary)]">
-              <pre className="p-4 text-[12px] leading-[1.5] font-mono text-[var(--text-primary)] whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2 }}>
+              <pre className="p-4 text-[12px] leading-[1.5] font-mono text-[var(--text-primary)] whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2, overflow: 'auto', maxWidth: 0, minWidth: '100%' }}>
                 {content.split('\n').map((line, i) => (
                   <div key={i} className="flex hover:bg-[var(--bg-tertiary)]/50">
                     <span className="select-none text-[var(--text-secondary)]/40 text-right pr-4 w-10 shrink-0">{i + 1}</span>
-                    <span className="flex-1">{highlightLine(line, language)}</span>
+                    <span className="whitespace-pre">{highlightLine(line, language)}</span>
                   </div>
                 ))}
               </pre>

package/components/PreviewPanel.tsx

@@ -1,134 +1,154 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+
+interface PreviewEntry {
+  port: number;
+  url: string | null;
+  status: string;
+  label?: string;
+}
 
 export default function PreviewPanel() {
-  const [port, setPort] = useState(0);
+  const [previews, setPreviews] = useState<PreviewEntry[]>([]);
   const [inputPort, setInputPort] = useState('');
-  const [tunnelUrl, setTunnelUrl] = useState<string | null>(null);
-  const [status, setStatus] = useState<string>('stopped');
+  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));
-    fetch('/api/preview')
-      .then(r => r.json())
-      .then(d => {
-        if (d.port) {
-          setPort(d.port);
-          setInputPort(String(d.port));
-          setTunnelUrl(d.url || null);
-          setStatus(d.status || 'stopped');
-        }
-      })
-      .catch(() => {});
   }, []);
 
+  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;
-    }
+    if (!p || p < 1 || p > 65535) { setError('Invalid port'); return; }
     setError('');
-    setStatus('starting');
+    setStarting(true);
     try {
       const res = await fetch('/api/preview', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ port: p }),
+        body: JSON.stringify({ action: 'start', port: p, label: inputLabel || undefined }),
       });
       const data = await res.json();
-      if (data.error) {
-        setError(data.error);
-        setStatus('error');
-      } else {
-        setPort(data.port);
-        setTunnelUrl(data.url || null);
-        setStatus(data.status || 'running');
+      if (data.error) setError(data.error);
+      else {
+        setInputPort('');
+        setInputLabel('');
+        setActivePreview(p);
       }
-    } catch {
-      setError('Failed to start tunnel');
-      setStatus('error');
-    }
+      fetchPreviews();
+    } catch { setError('Failed'); }
+    setStarting(false);
   };
 
-  const handleStop = async () => {
+  const handleStop = async (port: number) => {
     await fetch('/api/preview', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'stop' }),
+      body: JSON.stringify({ action: 'stop', port }),
     });
-    setPort(0);
-    setTunnelUrl(null);
-    setStatus('stopped');
+    if (activePreview === port) setActivePreview(null);
+    fetchPreviews();
   };
 
-  // What to show in iframe: tunnel URL for remote, localhost for local
-  const previewSrc = isRemote
-    ? tunnelUrl
-    : port ? `http://localhost:${port}` : null;
+  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">
-      {/* Control bar */}
-      <div className="px-4 py-2 border-b border-[var(--border)] flex items-center gap-3 shrink-0 flex-wrap">
-        <span className="text-[11px] font-semibold text-[var(--text-primary)]">Preview</span>
-
-        <input
-          type="number"
-          value={inputPort}
-          onChange={e => setInputPort(e.target.value)}
-          onKeyDown={e => e.key === 'Enter' && handleStart()}
-          placeholder="Port"
-          className="w-24 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"
-        />
+      {/* 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>
 
-        {status === 'stopped' || status === 'error' ? (
+        {/* 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}
+            disabled={!inputPort || starting}
             className="text-[10px] px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50"
           >
-            Start Tunnel
+            {starting ? 'Starting...' : '+ Add'}
           </button>
-        ) : status === 'starting' ? (
-          <span className="text-[10px] text-yellow-400">Starting tunnel...</span>
-        ) : (
-          <>
-            <span className="text-[10px] text-green-400">● localhost:{port}</span>
-            {tunnelUrl && (
-              <button
-                onClick={() => { navigator.clipboard.writeText(tunnelUrl); }}
-                className="text-[10px] text-green-400 hover:text-green-300 truncate max-w-[250px]"
-                title={`Click to copy: ${tunnelUrl}`}
-              >
-                {tunnelUrl.replace('https://', '')}
-              </button>
-            )}
+          {active && (
             <a
               href={previewSrc || '#'}
               target="_blank"
               rel="noopener"
-              className="text-[10px] text-[var(--accent)] hover:underline"
+              className="text-[10px] text-[var(--accent)] hover:underline ml-auto"
             >
               Open ↗
             </a>
-            <button
-              onClick={handleStop}
-              className="text-[10px] text-red-400 hover:text-red-300"
-            >
-              Stop
-            </button>
-          </>
-        )}
-
-        {error && <span className="text-[10px] text-red-400">{error}</span>}
+          )}
+          {error && <span className="text-[10px] text-red-400">{error}</span>}
+        </div>
       </div>
 
       {/* Preview iframe */}
-      {previewSrc && status === 'running' ? (
+      {previewSrc && active?.status === 'running' ? (
         <iframe
           src={previewSrc}
           className="flex-1 w-full border-0 bg-white"
@@ -137,15 +157,8 @@ export default function PreviewPanel() {
       ) : (
         <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">Preview a local dev server</p>
-            <p className="text-xs">Enter the port of your running dev server and click Start Tunnel.</p>
-            <p className="text-xs">A dedicated Cloudflare Tunnel will be created for that port, giving it its own public URL — no path prefix issues.</p>
-            <div className="text-[10px] text-left bg-[var(--bg-tertiary)] rounded p-3 space-y-1">
-              <p>1. Start your dev server: <code className="text-[var(--accent)]">npm run dev</code></p>
-              <p>2. Enter its port (e.g. <code className="text-[var(--accent)]">4321</code>)</p>
-              <p>3. Click <strong>Start Tunnel</strong></p>
-              <p>4. Share the generated URL — it maps directly to your dev server</p>
-            </div>
+            <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>
       )}

package/components/WebTerminal.tsx

@@ -429,7 +429,7 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
   const detachedCount = tmuxSessions.filter(s => !usedSessions.includes(s.name)).length;
 
   return (
-    <div className="h-full w-full flex-1 flex flex-col bg-[#1a1a2e]">
+    <div className="h-full w-full flex-1 flex flex-col bg-[#1a1a2e] overflow-hidden">
       {/* Tab bar + toolbar */}
       <div className="flex items-center bg-[#12122a] border-b border-[#2a2a4a] shrink-0">
         {/* Tabs */}
@@ -1080,7 +1080,17 @@ const MemoTerminalPane = memo(function TerminalPane({
               }, 500);
             }
           } else if (msg.type === 'error') {
-            term.write(`\r\n\x1b[93m[${msg.message || 'error'}]\x1b[0m\r\n`);
+            // Session no longer exists — auto-create a new one
+            if (!connectedSession && msg.message?.includes('no longer exists') && createRetries < MAX_CREATE_RETRIES) {
+              createRetries++;
+              isNewlyCreated = true;
+              term.write(`\r\n\x1b[93m[${msg.message} — creating new session...]\x1b[0m\r\n`);
+              if (socket.readyState === WebSocket.OPEN) {
+                socket.send(JSON.stringify({ type: 'create', cols: term.cols, rows: term.rows }));
+              }
+            } else {
+              term.write(`\r\n\x1b[93m[${msg.message || 'error'}]\x1b[0m\r\n`);
+            }
           } else if (msg.type === 'exit') {
             term.write('\r\n\x1b[90m[session ended]\x1b[0m\r\n');
           }

package/dev-test.sh

@@ -2,4 +2,4 @@
 # dev-test.sh — Start Forge test instance (port 4000, data ~/.forge-test)
 
 mkdir -p ~/.forge-test
-PORT=4000 TERMINAL_PORT=4001 FORGE_DATA_DIR=~/.forge-test pnpm dev -- -p 4000
+PORT=4000 TERMINAL_PORT=4001 FORGE_DATA_DIR=~/.forge-test npx next dev --turbopack -p 4000

package/install.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+# install.sh — Install Forge globally, ready to run
+#
+# Usage:
+#   ./install.sh          # from npm
+#   ./install.sh local    # from local source
+
+set -e
+
+if [ "$1" = "local" ] || [ "$1" = "--local" ]; then
+  echo "[forge] Installing from local source..."
+  npm uninstall -g @aion0/forge 2>/dev/null || true
+  npm link
+  echo "[forge] Building..."
+  pnpm build
+else
+  echo "[forge] Installing from npm..."
+  rm -rf "$(npm root -g)/@aion0/forge" 2>/dev/null || true
+  npm cache clean --force 2>/dev/null || true
+  npm install -g @aion0/forge
+  echo "[forge] Building..."
+  cd "$(npm root -g)/@aion0/forge" && npx next build && cd -
+fi
+
+echo ""
+echo "[forge] Done."
+forge-server --version
+echo "Run: forge-server"

package/instrumentation.ts

@@ -9,7 +9,8 @@ export async function register() {
     const { existsSync, readFileSync } = await import('node:fs');
     const { join } = await import('node:path');
     const { homedir } = await import('node:os');
-    const envFile = join(homedir(), '.forge', '.env.local');
+    const dataDir = process.env.FORGE_DATA_DIR || join(homedir(), '.forge');
+    const envFile = join(dataDir, '.env.local');
     if (existsSync(envFile)) {
       for (const line of readFileSync(envFile, 'utf-8').split('\n')) {
         const trimmed = line.trim();

package/lib/init.ts

@@ -22,7 +22,7 @@ export function ensureInitialized() {
   // Display login password (auto-generated, rotates daily)
   const password = getPassword();
   console.log(`[init] Login password: ${password} (valid today)`);
-  console.log('[init] Forgot? Run: mw password');
+  console.log('[init] Forgot? Run: forge password');
 
   // Start background task runner
   ensureRunnerStarted();
@@ -61,11 +61,12 @@ function startTerminalProcess() {
 
   const termPort = Number(process.env.TERMINAL_PORT) || 3001;
 
-  // Check if port is already in use
+  // Check if port is already in use — kill stale process if needed
   const net = require('node:net');
   const tester = net.createServer();
   tester.once('error', () => {
-    console.log(`[terminal] Port ${termPort} already in use, skipping`);
+    // Port in use — terminal server already running, reuse it
+    console.log(`[terminal] Port ${termPort} already in use, reusing existing`);
   });
   tester.once('listening', () => {
     tester.close();

package/lib/telegram-bot.ts

@@ -19,8 +19,8 @@ import type { Task, TaskLogEntry } from '@/src/types';
 // Prevent duplicate polling and state loss across hot-reloads
 const globalKey = Symbol.for('mw-telegram-state');
 const g = globalThis as any;
-if (!g[globalKey]) g[globalKey] = { polling: false, pollTimer: null, lastUpdateId: 0 };
-const botState: { polling: boolean; pollTimer: ReturnType<typeof setTimeout> | null; lastUpdateId: number } = g[globalKey];
+if (!g[globalKey]) g[globalKey] = { polling: false, pollTimer: null, lastUpdateId: 0, taskListenerAttached: false, pollActive: false };
+const botState: { polling: boolean; pollTimer: ReturnType<typeof setTimeout> | null; lastUpdateId: number; taskListenerAttached: boolean; pollActive: boolean } = g[globalKey];
 
 // Track which Telegram message maps to which task (for reply-based interaction)
 const taskMessageMap = new Map<number, string>(); // messageId → taskId
@@ -56,54 +56,82 @@ export function startTelegramBot() {
   // Set bot command menu
   setBotCommands(settings.telegramBotToken);
 
-  // Listen for task events → stream to Telegram
-  onTaskEvent((taskId, event, data) => {
-    const settings = loadSettings();
-    if (!settings.telegramBotToken || !settings.telegramChatId) return;
-    const chatId = Number(settings.telegramChatId);
-
-    if (event === 'log') {
-      bufferLogEntry(taskId, chatId, data as TaskLogEntry);
-    } else if (event === 'status') {
-      handleStatusChange(taskId, chatId, data as string);
-    }
-  });
+  // Listen for task events → stream to Telegram (only once)
+  if (!botState.taskListenerAttached) {
+    botState.taskListenerAttached = true;
+    onTaskEvent((taskId, event, data) => {
+      const settings = loadSettings();
+      if (!settings.telegramBotToken || !settings.telegramChatId) return;
+      const chatId = Number(settings.telegramChatId.split(',')[0].trim());
+
+      if (event === 'log') {
+        bufferLogEntry(taskId, chatId, data as TaskLogEntry);
+      } else if (event === 'status') {
+        handleStatusChange(taskId, chatId, data as string);
+      }
+    });
+  }
 
-  poll();
+  // Skip stale updates on startup — set offset to -1 to get only new messages
+  if (botState.lastUpdateId === 0) {
+    fetch(`https://api.telegram.org/bot${settings.telegramBotToken}/getUpdates?offset=-1`)
+      .then(r => r.json())
+      .then(data => {
+        if (data.ok && data.result?.length > 0) {
+          botState.lastUpdateId = data.result[data.result.length - 1].update_id;
+        }
+        poll();
+      })
+      .catch(() => poll());
+  } else {
+    poll();
+  }
 }
 
 export function stopTelegramBot() {
   botState.polling = false;
+  botState.pollActive = false;
   if (botState.pollTimer) { clearTimeout(botState.pollTimer); botState.pollTimer = null; }
 }
 
 // ─── Polling ─────────────────────────────────────────────────
 
+function schedulePoll(delay: number = 1000) {
+  if (botState.pollTimer) clearTimeout(botState.pollTimer);
+  botState.pollTimer = setTimeout(poll, delay);
+}
+
 async function poll() {
-  if (!botState.polling) return;
+  // Prevent concurrent polls — main cause of duplicate messages after sleep/wake
+  if (!botState.polling || botState.pollActive) return;
+  botState.pollActive = true;
 
   try {
     const settings = loadSettings();
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 35000);
+
     const url = `https://api.telegram.org/bot${settings.telegramBotToken}/getUpdates?offset=${botState.lastUpdateId + 1}&timeout=30`;
-    const res = await fetch(url);
+    const res = await fetch(url, { signal: controller.signal });
+    clearTimeout(timeout);
+
     const data = await res.json();
 
     if (data.ok && data.result) {
       for (const update of data.result) {
+        if (update.update_id <= botState.lastUpdateId) continue;
         botState.lastUpdateId = update.update_id;
         if (update.message?.text) {
           await handleMessage(update.message);
         }
       }
     }
-  } catch (err: any) {
-    const isNetworkError = err?.cause?.code === 'ECONNRESET' || err?.message?.includes('fetch failed');
-    if (!isNetworkError) {
-      console.error('[telegram] Poll error:', err);
-    }
+  } catch {
+    // Network errors during sleep/wake — silent
   }
 
-  botState.pollTimer = setTimeout(poll, 1000);
+  botState.pollActive = false;
+  if (botState.polling) schedulePoll(1000);
 }
 
 // ─── Message Handler ─────────────────────────────────────────

package/package.json

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

package/tsconfig.json

@@ -33,7 +33,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
+    ".next/dev/types/**/*.ts",
+    ".next/dev/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"