@aion0/forge 0.4.7 → 0.4.9

package/RELEASE_NOTES.md

@@ -1,16 +1,11 @@
-# Forge v0.4.7
+# Forge v0.4.9
 
 Released: 2026-03-22
 
-## Changes since v0.4.6
-
-### Bug Fixes
-- fix: serial issue scanning, shell ANSI-C escaping, pipeline navigation
-- fix: prevent concurrent startTunnel calls from killing each other (#16)
+## Changes since v0.4.8
 
 ### Other
-- improve pipeline
-- fix(#17): normalize SQLite datetime strings to ISO 8601 UTC
+- add browser window
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.6...v0.4.7
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.8...v0.4.9

package/app/api/code/route.ts

@@ -26,11 +26,13 @@ const CODE_EXTS = new Set([
   '.xml', '.csv', '.lock',
 ]);
 
+const IMAGE_EXTS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.bmp', '.ico', '.avif']);
+
 function isCodeFile(name: string): boolean {
   if (name.startsWith('.') && !name.startsWith('.env') && !name.startsWith('.git')) return false;
   const ext = extname(name);
   if (!ext) return !name.includes('.'); // files like Makefile, Dockerfile
-  return CODE_EXTS.has(ext);
+  return CODE_EXTS.has(ext) || IMAGE_EXTS.has(ext);
 }
 
 function scanDir(dir: string, base: string, depth: number = 0): FileNode[] {
@@ -140,6 +142,17 @@ export async function GET(req: Request) {
         'class', 'jar', 'war',
         'pyc', 'pyo', 'wasm',
       ]);
+      // Image files — return base64 for preview
+      const IMAGE_PREVIEW = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'ico', 'avif']);
+      if (IMAGE_PREVIEW.has(ext)) {
+        if (size > 5_000_000) {
+          return NextResponse.json({ binary: true, fileType: ext, size, sizeLabel: `${sizeMB} MB`, message: 'Image too large to preview (> 5 MB)' });
+        }
+        const data = readFileSync(fullPath);
+        const mime = ext === 'svg' ? 'image/svg+xml' : `image/${ext === 'jpg' ? 'jpeg' : ext}`;
+        const base64 = `data:${mime};base64,${data.toString('base64')}`;
+        return NextResponse.json({ image: true, dataUrl: base64, fileType: ext, size, sizeLabel: sizeKB > 1024 ? `${sizeMB} MB` : `${sizeKB} KB` });
+      }
       if (BINARY_EXTS.has(ext)) {
         return NextResponse.json({ binary: true, fileType: ext, size, sizeLabel: sizeKB > 1024 ? `${sizeMB} MB` : `${sizeKB} KB` });
       }

package/app/api/docs/route.ts

@@ -105,9 +105,24 @@ export async function GET(req: Request) {
     try {
       const stat = statSync(fullPath);
       const size = stat.size;
+      const ext = extname(fullPath).replace('.', '').toLowerCase();
       const sizeKB = Math.round(size / 1024);
       const sizeMB = (size / (1024 * 1024)).toFixed(1);
 
+      // Binary file types
+      const BINARY_EXTS = new Set([
+        'png', 'jpg', 'jpeg', 'gif', 'bmp', 'ico', 'webp', 'avif',
+        'mp3', 'mp4', 'wav', 'ogg', 'webm', 'mov', 'avi',
+        'zip', 'gz', 'tar', 'bz2', 'xz', '7z', 'rar',
+        'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx',
+        'exe', 'dll', 'so', 'dylib', 'bin', 'o', 'a',
+        'woff', 'woff2', 'ttf', 'eot', 'otf',
+        'sqlite', 'db', 'sqlite3', 'class', 'jar', 'pyc', 'wasm',
+      ]);
+      if (BINARY_EXTS.has(ext)) {
+        return NextResponse.json({ binary: true, fileType: ext, size, sizeLabel: sizeKB > 1024 ? `${sizeMB} MB` : `${sizeKB} KB` });
+      }
+
       if (size > 2_000_000) {
         return NextResponse.json({ tooLarge: true, size, sizeLabel: `${sizeMB} MB`, message: 'File exceeds 2 MB limit' });
       }
@@ -115,7 +130,7 @@ export async function GET(req: Request) {
         return NextResponse.json({ large: true, size, sizeLabel: `${sizeKB} KB` });
       }
       const content = readFileSync(fullPath, 'utf-8');
-      return NextResponse.json({ content });
+      return NextResponse.json({ content, language: ext });
     } catch {
       return NextResponse.json({ error: 'File not found' }, { status: 404 });
     }

package/components/CodeViewer.tsx

@@ -189,6 +189,12 @@ 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);
@@ -420,11 +426,75 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
         </div>
       )}
 
-      {/* Terminal — top */}
-      <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>
+      {/* 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>
 
       {/* Resize handle */}

package/components/DocsViewer.tsx

@@ -55,20 +55,18 @@ function TreeNode({ node, depth, selected, onSelect }: {
   }
 
   const isSelected = selected === node.path;
-  const canOpen = node.fileType === 'md' || node.fileType === 'image';
 
   return (
     <button
-      onClick={() => canOpen && onSelect(node.path)}
+      onClick={() => onSelect(node.path)}
       className={`w-full text-left flex items-center gap-1 px-1 py-0.5 rounded text-xs truncate ${
-        !canOpen ? 'text-[var(--text-secondary)]/40 cursor-default'
-        : isSelected ? 'bg-[var(--accent)]/20 text-[var(--accent)]'
+        isSelected ? 'bg-[var(--accent)]/20 text-[var(--accent)]'
         : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
       }`}
       style={{ paddingLeft: depth * 12 + 16 }}
       title={node.path}
     >
-      {node.fileType === 'image' ? '🖼 ' : ''}{node.name.replace(/\.md$/, '')}
+      {node.fileType === 'image' ? '🖼 ' : ''}{node.name}
     </button>
   );
 }
@@ -84,6 +82,20 @@ function flattenTree(nodes: FileNode[]): FileNode[] {
   return result;
 }
 
+const BINARY_EXTS = /\.(png|jpg|jpeg|gif|bmp|ico|webp|avif|mp3|mp4|wav|ogg|webm|mov|avi|zip|gz|tar|bz2|xz|7z|rar|pdf|doc|docx|xls|xlsx|ppt|pptx|exe|dll|so|dylib|bin|woff|woff2|ttf|eot|otf|sqlite|db|class|jar|pyc|wasm|o|a)$/i;
+
+function filterTree(nodes: FileNode[]): FileNode[] {
+  return nodes.reduce<FileNode[]>((acc, node) => {
+    if (node.type === 'dir') {
+      const children = filterTree(node.children || []);
+      if (children.length > 0) acc.push({ ...node, children });
+    } else if (!BINARY_EXTS.test(node.name)) {
+      acc.push(node);
+    }
+    return acc;
+  }, []);
+}
+
 // ─── Main Component ──────────────────────────────────────
 
 export default function DocsViewer() {
@@ -176,7 +188,9 @@ export default function DocsViewer() {
       setLoading(true);
       const res = await fetch(`/api/docs?root=${activeRoot}&file=${encodeURIComponent(path)}`);
       const data = await res.json();
-      if (data.tooLarge) {
+      if (data.binary) {
+        setFileWarning(`${data.fileType?.toUpperCase() || 'Binary'} file — ${data.sizeLabel} — cannot be displayed`);
+      } else if (data.tooLarge) {
         setFileWarning(`File too large (${data.sizeLabel})`);
       } else {
         fileContent = data.content || null;
@@ -185,11 +199,15 @@ export default function DocsViewer() {
     }
     setContent(fileContent);
 
+    const MAX_TABS = 8;
     const newTab: DocTab = { id: genTabId(), filePath: path, fileName, rootIdx: activeRoot, isImage: isImg, content: fileContent };
     setDocTabs(prev => {
-      // Double-check no duplicate
       if (prev.find(t => t.filePath === path)) return prev;
-      const updated = [...prev, newTab];
+      let updated = [...prev, newTab];
+      // Auto-close oldest tabs if over limit
+      while (updated.length > MAX_TABS) {
+        updated = updated.slice(1);
+      }
       setActiveDocTabId(newTab.id);
       persistDocTabs(updated, newTab.id);
       return updated;
@@ -259,6 +277,7 @@ export default function DocsViewer() {
   }, [activeRoot, fetchTree]);
 
   const [fileWarning, setFileWarning] = useState<string | null>(null);
+  const [hideUnsupported, setHideUnsupported] = useState(true);
 
   // Fetch file content
   const isImageFile = (path: string) => /\.(png|jpg|jpeg|gif|svg|webp|bmp|ico|avif)$/i.test(path);
@@ -321,9 +340,9 @@ export default function DocsViewer() {
   }
 
   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">
       {/* Doc content area */}
-      <div className="flex-1 flex min-h-0">
+      <div className="flex-1 flex min-h-0 min-w-0 overflow-hidden">
         {/* Collapsible sidebar — file tree */}
         {sidebarOpen && (
           <aside style={{ width: sidebarWidth }} className="flex flex-col shrink-0 overflow-hidden">
@@ -343,9 +362,16 @@ export default function DocsViewer() {
             {/* Header with refresh */}
             <div className="px-3 py-1.5 border-b border-[var(--border)] flex items-center">
               <span className="text-[10px] text-[var(--text-secondary)] truncate">{roots[activeRoot] || 'Docs'}</span>
+              <button
+                onClick={() => setHideUnsupported(v => !v)}
+                className={`text-[9px] ml-auto shrink-0 px-1 rounded ${hideUnsupported ? 'text-[var(--accent)]' : 'text-[var(--text-secondary)]'} hover:text-[var(--text-primary)]`}
+                title={hideUnsupported ? 'Show all files' : 'Hide binary files'}
+              >
+                {hideUnsupported ? 'Docs' : 'All'}
+              </button>
               <button
                 onClick={() => { fetchTree(activeRoot); if (selectedFile) openFile(selectedFile); }}
-                className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-auto shrink-0"
+                className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] shrink-0"
                 title="Refresh files"
               >
                 ↻
@@ -384,7 +410,7 @@ export default function DocsViewer() {
                   ))
                 )
               ) : (
-                tree.map(node => (
+                (hideUnsupported ? filterTree(tree) : tree).map(node => (
                   <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFileInTab} />
                 ))
               )}
@@ -493,7 +519,7 @@ export default function DocsViewer() {
                   spellCheck={false}
                 />
               </div>
-            ) : (
+            ) : selectedFile.endsWith('.md') ? (
             <div className="flex-1 overflow-y-auto px-8 py-6">
               {loading ? (
                 <div className="text-xs text-[var(--text-secondary)]">Loading...</div>
@@ -503,6 +529,17 @@ export default function DocsViewer() {
                 </div>
               )}
             </div>
+            ) : (
+            <div className="flex-1 overflow-y-auto">
+              <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 }}>
+                {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">{line || ' '}</span>
+                  </div>
+                ))}
+              </pre>
+            </div>
             )
           ) : (
             <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">

package/components/ProjectDetail.tsx

@@ -59,6 +59,8 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
   const [fileTree, setFileTree] = useState<any[]>([]);
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [fileContent, setFileContent] = useState<string | null>(null);
+  const [fileImageUrl, setFileImageUrl] = useState<string | null>(null);
+  const [fileBinaryInfo, setFileBinaryInfo] = useState<{ fileType: string; sizeLabel: string; message?: string } | null>(null);
   const [fileLanguage, setFileLanguage] = useState('');
   const [fileLoading, setFileLoading] = useState(false);
   const [showLog, setShowLog] = useState(false);
@@ -117,12 +119,23 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
     setSelectedFile(path);
     setDiffContent(null);
     setDiffFile(null);
+    setFileContent(null);
+    setFileImageUrl(null);
+    setFileBinaryInfo(null);
     setFileLoading(true);
     try {
       const res = await fetch(`/api/code?dir=${encodeURIComponent(projectPath)}&file=${encodeURIComponent(path)}`);
       const data = await res.json();
-      setFileContent(data.content || null);
-      setFileLanguage(data.language || '');
+      if (data.image) {
+        setFileImageUrl(data.dataUrl);
+      } else if (data.binary) {
+        setFileBinaryInfo({ fileType: data.fileType, sizeLabel: data.sizeLabel, message: data.message });
+      } else if (data.tooLarge) {
+        setFileBinaryInfo({ fileType: '', sizeLabel: data.sizeLabel, message: data.message });
+      } else {
+        setFileContent(data.content || null);
+        setFileLanguage(data.language || '');
+      }
     } catch { setFileContent(null); }
     setFileLoading(false);
   }, [projectPath]);
@@ -529,6 +542,23 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
             </>
           ) : fileLoading ? (
             <div className="h-full flex items-center justify-center text-xs text-[var(--text-secondary)]">Loading...</div>
+          ) : selectedFile && fileImageUrl ? (
+            <>
+              <div className="px-3 py-1 border-b border-[var(--border)] text-[10px] text-[var(--text-secondary)] sticky top-0 bg-[var(--bg-primary)] z-10">{selectedFile}</div>
+              <div className="flex-1 flex items-center justify-center p-4 overflow-auto">
+                <img src={fileImageUrl} alt={selectedFile} className="max-w-full max-h-full object-contain rounded" />
+              </div>
+            </>
+          ) : selectedFile && fileBinaryInfo ? (
+            <>
+              <div className="px-3 py-1 border-b border-[var(--border)] text-[10px] text-[var(--text-secondary)] sticky top-0 bg-[var(--bg-primary)] z-10">{selectedFile}</div>
+              <div className="flex-1 flex flex-col items-center justify-center gap-2 text-[var(--text-secondary)]">
+                <span className="text-2xl">📄</span>
+                <span className="text-xs">{fileBinaryInfo.fileType ? fileBinaryInfo.fileType.toUpperCase() + ' file' : 'File'} — {fileBinaryInfo.sizeLabel}</span>
+                {fileBinaryInfo.message && <span className="text-[10px]">{fileBinaryInfo.message}</span>}
+                <span className="text-[10px]">Binary file cannot be displayed</span>
+              </div>
+            </>
           ) : selectedFile && fileContent !== null ? (
             <>
               <div className="px-3 py-1 border-b border-[var(--border)] text-[10px] text-[var(--text-secondary)] sticky top-0 bg-[var(--bg-primary)] z-10">{selectedFile}</div>

package/components/TabBar.tsx

@@ -18,7 +18,7 @@ export default function TabBar({ tabs, activeId, onActivate, onClose }: TabBarPr
   if (tabs.length === 0) return null;
 
   return (
-    <div className="flex items-center border-b border-[var(--border)] bg-[var(--bg-tertiary)] overflow-x-auto shrink-0">
+    <div className="flex items-center border-b border-[var(--border)] bg-[var(--bg-tertiary)] overflow-x-auto shrink-0 min-w-0 max-w-full">
       {tabs.map(tab => (
         <div
           key={tab.id}

package/components/WebTerminal.tsx

@@ -15,6 +15,8 @@ export interface WebTerminalHandle {
 export interface WebTerminalProps {
   onActiveSession?: (sessionName: string | null) => void;
   onCodeOpenChange?: (open: boolean) => void;
+  browserOpen?: boolean;
+  onBrowserToggle?: () => void;
 }
 
 // ─── Types ───────────────────────────────────────────────────
@@ -164,7 +166,7 @@ let globalDragging = false;
 
 // ─── Main component ─────────────────────────────────────────
 
-const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function WebTerminal({ onActiveSession, onCodeOpenChange }, ref) {
+const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function WebTerminal({ onActiveSession, onCodeOpenChange, browserOpen, onBrowserToggle }, ref) {
   const [tabs, setTabs] = useState<TabState[]>(() => {
     const tree = makeTerminal();
     return [{ id: nextId++, label: 'Terminal 1', tree, ratios: {}, activeId: firstTerminalId(tree) }];
@@ -634,8 +636,17 @@ 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-gray-400 hover:text-red-400 hover:bg-[var(--term-border)] rounded">
+            <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>
           )}

package/package.json

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