@aion0/forge 0.4.8 → 0.4.9

package/RELEASE_NOTES.md

@@ -1,11 +1,11 @@
-# Forge v0.4.8
+# Forge v0.4.9
 
 Released: 2026-03-22
 
-## Changes since v0.4.7
+## Changes since v0.4.8
 
-### Features
-- feat: image preview, all file types support, docs tab limit
+### Other
+- add browser window
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.7...v0.4.8
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.8...v0.4.9

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/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.8",
+  "version": "0.4.9",
   "description": "Unified AI workflow platform — multi-model task orchestration, persistent sessions, web terminal, remote access",
   "type": "module",
   "scripts": {