@aion0/forge 0.4.9 → 0.4.11

package/RELEASE_NOTES.md

@@ -1,11 +1,13 @@
-# Forge v0.4.9
+# Forge v0.4.11
 
-Released: 2026-03-22
+Released: 2026-03-23
 
-## Changes since v0.4.8
+## Changes since v0.4.10
 
 ### Other
-- add browser window
+- mobile page
+- init version for mobile page
+- change sync period time
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.8...v0.4.9
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.10...v0.4.11

package/app/api/claude-sessions/[projectName]/entries/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+import { getSessionFilePath, readSessionEntries } from '@/lib/claude-sessions';
+import { statSync } from 'node:fs';
+
+export async function GET(req: Request, { params }: { params: Promise<{ projectName: string }> }) {
+  const { projectName } = await params;
+  const url = new URL(req.url);
+  const sessionId = url.searchParams.get('sessionId');
+
+  if (!sessionId) {
+    return NextResponse.json({ error: 'sessionId required' }, { status: 400 });
+  }
+
+  const filePath = getSessionFilePath(decodeURIComponent(projectName), sessionId);
+  if (!filePath) {
+    return NextResponse.json({ entries: [], count: 0, fileSize: 0 });
+  }
+
+  const entries = readSessionEntries(filePath);
+  let fileSize = 0;
+  try { fileSize = statSync(filePath).size; } catch {}
+  return NextResponse.json({ entries, count: entries.length, fileSize });
+}

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/mobile-chat/route.ts

@@ -0,0 +1,87 @@
+import { NextResponse } from 'next/server';
+import { spawn } from 'node:child_process';
+import { loadSettings } from '@/lib/settings';
+
+export const dynamic = 'force-dynamic';
+export const runtime = 'nodejs';
+
+// POST /api/mobile-chat — send a message to claude and stream response
+export async function POST(req: Request) {
+  const { message, projectPath, resume } = await req.json() as {
+    message: string;
+    projectPath: string;
+    resume?: boolean;
+  };
+
+  if (!message || !projectPath) {
+    return NextResponse.json({ error: 'message and projectPath required' }, { status: 400 });
+  }
+
+  const settings = loadSettings();
+  const claudePath = settings.claudePath || 'claude';
+
+  const args = ['-p', '--dangerously-skip-permissions', '--output-format', 'json'];
+  if (resume) args.push('-c');
+
+  const child = spawn(claudePath, args, {
+    cwd: projectPath,
+    env: { ...process.env },
+    stdio: ['pipe', 'pipe', 'pipe'],
+  });
+
+  child.stdin.write(message);
+  child.stdin.end();
+
+  const encoder = new TextEncoder();
+  let closed = false;
+
+  const stream = new ReadableStream({
+    start(controller) {
+      child.stdout.on('data', (chunk: Buffer) => {
+        if (closed) return;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'chunk', text: chunk.toString() })}\n\n`));
+        } catch {}
+      });
+
+      child.stderr.on('data', (chunk: Buffer) => {
+        if (closed) return;
+        const text = chunk.toString();
+        if (text.includes('npm update') || text.includes('WARN')) return;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'stderr', text })}\n\n`));
+        } catch {}
+      });
+
+      child.on('exit', (code) => {
+        if (closed) return;
+        closed = true;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'done', code })}\n\n`));
+          controller.close();
+        } catch {}
+      });
+
+      child.on('error', (err) => {
+        if (closed) return;
+        closed = true;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'error', message: err.message })}\n\n`));
+          controller.close();
+        } catch {}
+      });
+    },
+    cancel() {
+      closed = true;
+      try { child.kill('SIGTERM'); } catch {}
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache, no-transform',
+      Connection: 'keep-alive',
+    },
+  });
+}

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/app/mobile/page.tsx

@@ -0,0 +1,9 @@
+import { auth } from '@/lib/auth';
+import { redirect } from 'next/navigation';
+import MobileView from '@/components/MobileView';
+
+export default async function MobilePage() {
+  const session = await auth();
+  if (!session) redirect('/login');
+  return <MobileView />;
+}

package/app/page.tsx

@@ -1,9 +1,21 @@
 import { auth } from '@/lib/auth';
 import { redirect } from 'next/navigation';
+import { headers } from 'next/headers';
 import Dashboard from '@/components/Dashboard';
 
-export default async function Home() {
+export default async function Home({ searchParams }: { searchParams: Promise<{ force?: string }> }) {
   const session = await auth();
   if (!session) redirect('/login');
+
+  const params = await searchParams;
+
+  // Auto-detect mobile and redirect (skip if ?force=desktop)
+  if (params.force !== 'desktop') {
+    const headersList = await headers();
+    const ua = headersList.get('user-agent') || '';
+    const isMobile = /iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua);
+    if (isMobile) redirect('/mobile');
+  }
+
   return <Dashboard user={session.user} />;
 }

package/components/BrowserPanel.tsx

@@ -0,0 +1,175 @@
+'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 normalizeUrl = (val: string): string => {
+    if (/^\d+$/.test(val)) return `http://localhost:${val}`;
+    if (!/^https?:\/\//i.test(val)) return `http://${val}`;
+    return val;
+  };
+
+  const navigate = (url: string) => {
+    const normalized = normalizeUrl(url);
+    setBrowserUrl(normalized);
+    localStorage.setItem('forge-browser-url', normalized);
+    if (browserUrlRef.current) browserUrlRef.current.value = normalized;
+    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;
+              navigate(val);
+            }
+          }}
+          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 */}