@aion0/forge 0.2.0 → 0.2.1

package/app/api/code/route.ts

@@ -138,23 +138,57 @@ export async function GET(req: Request) {
   const tree = scanDir(resolvedDir, resolvedDir);
   const dirName = resolvedDir.split('/').pop() || resolvedDir;
 
-  // Git status: changed files
-  let gitChanges: { path: string; status: string }[] = [];
-  let gitBranch = '';
+  // Git status: scan for git repos (could be root dir or subdirectories)
+  interface GitRepo {
+    name: string;       // repo dir name (or '.' for root)
+    branch: string;
+    remote: string;     // remote URL
+    changes: { path: string; status: string }[];
+  }
+  const gitRepos: GitRepo[] = [];
+
+  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 changes = statusOut.replace(/\n$/, '').split('\n').filter(Boolean)
+        .map(line => {
+          if (line.length < 4) return null;
+          return {
+            status: line.substring(0, 2).trim() || 'M',
+            path: pathPrefix ? `${pathPrefix}/${line.substring(3).replace(/\/$/, '')}` : line.substring(3).replace(/\/$/, ''),
+          };
+        })
+        .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 {}
+      if (branch || changes.length > 0) {
+        gitRepos.push({ name: repoName, branch, remote, changes });
+      }
+    } catch {}
+  }
+
+  // Check if root is a git repo
   try {
-    gitBranch = execSync('git rev-parse --abbrev-ref HEAD', { cwd: resolvedDir, encoding: 'utf-8', timeout: 3000 }).trim();
-    const statusOut = execSync('git status --porcelain -u', { cwd: resolvedDir, encoding: 'utf-8', timeout: 5000 });
-    gitChanges = statusOut.replace(/\n$/, '').split('\n').filter(Boolean)
-      .map(line => {
-        // Format: XY<space>path — first 2 chars are status, char 3 is space, rest is path
-        if (line.length < 4) return null;
-        return {
-          status: line.substring(0, 2).trim() || 'M',
-          path: line.substring(3).replace(/\/$/, ''),
-        };
-      })
-      .filter((g): g is { status: string; path: string } => g !== null && !!g.path && !g.path.includes(' -> '));
-  } catch {}
-
-  return NextResponse.json({ tree, dirName, dirPath: resolvedDir, gitBranch, gitChanges });
+    execSync('git rev-parse --git-dir', { cwd: resolvedDir, encoding: 'utf-8', timeout: 2000 });
+    scanGitStatus(resolvedDir, '.', '');
+  } catch {
+    // Root is not a git repo — scan subdirectories
+    try {
+      for (const entry of readdirSync(resolvedDir, { withFileTypes: true })) {
+        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 });
+          scanGitStatus(subDir, entry.name, entry.name);
+        } catch {}
+      }
+    } catch {}
+  }
+
+  // Flatten for backward compat
+  const gitChanges = gitRepos.flatMap(r => r.changes);
+  const gitBranch = gitRepos.length === 1 ? gitRepos[0].branch : '';
+
+  return NextResponse.json({ tree, dirName, dirPath: resolvedDir, gitBranch, gitChanges, gitRepos });
 }

package/components/CodeViewer.tsx

@@ -15,13 +15,15 @@ interface FileNode {
 // ─── File Tree ───────────────────────────────────────────
 
 type GitStatusMap = Map<string, string>; // path → status
+type GitRepoMap = Map<string, { branch: string; remote: string }>; // dir name → repo info
 
-function TreeNode({ node, depth, selected, onSelect, gitMap }: {
+function TreeNode({ node, depth, selected, onSelect, gitMap, repoMap }: {
   node: FileNode;
   depth: number;
   selected: string | null;
   onSelect: (path: string) => void;
   gitMap: GitStatusMap;
+  repoMap: GitRepoMap;
 }) {
   // Auto-expand if selected file is under this directory
   const containsSelected = selected ? selected.startsWith(node.path + '/') : false;
@@ -30,18 +32,23 @@ function TreeNode({ node, depth, selected, onSelect, gitMap }: {
 
   if (node.type === 'dir') {
     const dirHasChanges = node.children?.some(c => hasGitChanges(c, gitMap));
+    const repo = repoMap.get(node.name);
     return (
       <div>
         <button
           onClick={() => setManualExpanded(v => v === null ? !expanded : !v)}
-          className="w-full text-left flex items-center gap-1 px-1 py-0.5 hover:bg-[var(--bg-tertiary)] rounded text-xs"
+          className="w-full text-left flex items-center gap-1 px-1 py-0.5 hover:bg-[var(--bg-tertiary)] rounded text-xs group"
           style={{ paddingLeft: depth * 12 + 4 }}
+          title={repo ? `${repo.branch} · ${repo.remote.replace(/^https?:\/\//, '').replace(/^git@github\.com:/, 'github.com/').replace(/\.git$/, '')}` : undefined}
         >
           <span className="text-[10px] text-[var(--text-secondary)] w-3">{expanded ? '▾' : '▸'}</span>
           <span className={dirHasChanges ? 'text-yellow-400' : 'text-[var(--text-primary)]'}>{node.name}</span>
+          {repo && (
+            <span className="text-[8px] text-[var(--accent)] opacity-60 group-hover:opacity-100 ml-auto shrink-0">{repo.branch}</span>
+          )}
         </button>
         {expanded && node.children?.map(child => (
-          <TreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} gitMap={gitMap} />
+          <TreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} gitMap={gitMap} repoMap={repoMap} />
         ))}
       </div>
     );
@@ -159,12 +166,13 @@ function highlightLine(line: string, lang: string): React.ReactNode {
 
 // ─── Main Component ──────────────────────────────────────
 
-export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef: React.RefObject<WebTerminalHandle | null>; onToggleCode?: () => void }) {
+export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObject<WebTerminalHandle | null> }) {
   const [currentDir, setCurrentDir] = useState<string | null>(null);
   const [dirName, setDirName] = useState('');
   const [tree, setTree] = useState<FileNode[]>([]);
   const [gitBranch, setGitBranch] = useState('');
   const [gitChanges, setGitChanges] = useState<{ path: string; status: string }[]>([]);
+  const [gitRepos, setGitRepos] = useState<{ name: string; branch: string; remote: string; changes: { path: string; status: string }[] }[]>([]);
   const [showGit, setShowGit] = useState(false);
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [content, setContent] = useState<string | null>(null);
@@ -176,6 +184,10 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
   const [viewMode, setViewMode] = useState<'file' | 'diff'>('file');
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [codeOpen, setCodeOpen] = useState(false);
+
+  const handleCodeOpenChange = useCallback((open: boolean) => {
+    setCodeOpen(open);
+  }, []);
   const [terminalHeight, setTerminalHeight] = useState(300);
   const [activeSession, setActiveSession] = useState<string | null>(null);
   const dragRef = useRef<{ startY: number; startH: number } | null>(null);
@@ -216,6 +228,7 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
           setDirName(data.dirName || currentDir.split('/').pop() || '');
           setGitBranch(data.gitBranch || '');
           setGitChanges(data.gitChanges || []);
+          setGitRepos(data.gitRepos || []);
         })
         .catch(() => setTree([]));
     };
@@ -224,6 +237,7 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
 
   // Build git status map for tree coloring
   const gitMap: GitStatusMap = new Map(gitChanges.map(g => [g.path, g.status]));
+  const repoMap: GitRepoMap = new Map(gitRepos.filter(r => r.name !== '.').map(r => [r.name, { branch: r.branch, remote: r.remote }]));
 
   const openFile = useCallback(async (path: string) => {
     if (!currentDir) return;
@@ -285,7 +299,7 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
       {/* 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} codeOpen={codeOpen} onToggleCode={() => setCodeOpen(v => !v)} />
+          <WebTerminal ref={terminalRef} onActiveSession={handleActiveSession} onCodeOpenChange={handleCodeOpenChange} />
         </Suspense>
       </div>
 
@@ -314,6 +328,11 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
                   </span>
                 )}
               </div>
+              {gitRepos.find(r => r.name === '.')?.remote && (
+                <div className="text-[9px] text-[var(--text-secondary)] truncate mt-0.5" title={gitRepos.find(r => r.name === '.')!.remote}>
+                  {gitRepos.find(r => r.name === '.')!.remote.replace(/^https?:\/\//, '').replace(/^git@github\.com:/, 'github.com/').replace(/\.git$/, '')}
+                </div>
+              )}
               {gitChanges.length > 0 && (
                 <button
                   onClick={() => setShowGit(v => !v)}
@@ -324,38 +343,55 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
               )}
             </div>
 
-            {/* Git changes */}
+            {/* Git changes — grouped by repo */}
             {showGit && gitChanges.length > 0 && (
               <div className="border-b border-[var(--border)] max-h-48 overflow-y-auto">
-                {gitChanges.map(g => (
-                  <div
-                    key={g.path}
-                    className={`flex items-center px-2 py-1 text-xs hover:bg-[var(--bg-tertiary)] ${
-                      diffFile === g.path && viewMode === 'diff' ? 'bg-[var(--accent)]/10' : ''
-                    }`}
-                  >
-                    <span className={`text-[10px] font-mono w-4 shrink-0 ${
-                      g.status.includes('M') ? 'text-yellow-500' :
-                      g.status.includes('A') || g.status.includes('?') ? 'text-green-500' :
-                      g.status.includes('D') ? 'text-red-500' :
-                      'text-[var(--text-secondary)]'
-                    }`}>
-                      {g.status.includes('?') ? '+' : g.status[0]}
-                    </span>
-                    <button
-                      onClick={() => openDiff(g.path)}
-                      className="flex-1 text-left truncate text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-1"
-                      title="View diff"
-                    >
-                      {g.path}
-                    </button>
-                    <button
-                      onClick={(e) => { e.stopPropagation(); locateFile(g.path); }}
-                      className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--accent)] hover:bg-[var(--accent)]/10 px-1.5 py-0.5 rounded shrink-0"
-                      title="Locate in file tree"
+                {gitRepos.map(repo => (
+                  <div key={repo.name}>
+                    {/* Repo header — only show if multiple repos */}
+                    {gitRepos.length > 1 && (
+                      <div className="px-2 py-1 text-[9px] text-[var(--text-secondary)] bg-[var(--bg-tertiary)] sticky top-0" title={repo.remote}>
+                        <div className="flex items-center gap-1.5">
+                          <span className="font-semibold text-[var(--text-primary)]">{repo.name}</span>
+                          <span className="text-[var(--accent)]">{repo.branch}</span>
+                          <span className="ml-auto">{repo.changes.length}</span>
+                        </div>
+                        {repo.remote && (
+                          <div className="text-[8px] truncate mt-0.5">{repo.remote.replace(/^https?:\/\//, '').replace(/\.git$/, '')}</div>
+                        )}
+                      </div>
+                    )}
+                    {repo.changes.map(g => (
+                      <div
+                        key={g.path}
+                        className={`flex items-center px-2 py-1 text-xs hover:bg-[var(--bg-tertiary)] ${
+                          diffFile === g.path && viewMode === 'diff' ? 'bg-[var(--accent)]/10' : ''
+                        }`}
+                      >
+                        <span className={`text-[10px] font-mono w-4 shrink-0 ${
+                          g.status.includes('M') ? 'text-yellow-500' :
+                          g.status.includes('A') || g.status.includes('?') ? 'text-green-500' :
+                          g.status.includes('D') ? 'text-red-500' :
+                          'text-[var(--text-secondary)]'
+                        }`}>
+                          {g.status.includes('?') ? '+' : g.status[0]}
+                        </span>
+                        <button
+                          onClick={() => openDiff(g.path)}
+                          className="flex-1 text-left truncate text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-1 group relative"
+                          title={`${g.path}${gitRepos.length > 1 ? ` (${repo.name} · ${repo.branch})` : ''}`}
+                        >
+                          {gitRepos.length > 1 ? g.path.replace(repo.name + '/', '') : g.path}
+                        </button>
+                        <button
+                          onClick={(e) => { e.stopPropagation(); locateFile(g.path); }}
+                          className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--accent)] hover:bg-[var(--accent)]/10 px-1.5 py-0.5 rounded shrink-0"
+                          title="Locate in file tree"
                     >
                       file
                     </button>
+                      </div>
+                    ))}
                   </div>
                 ))}
               </div>
@@ -396,7 +432,7 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
                 )
               ) : (
                 tree.map(node => (
-                  <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} gitMap={gitMap} />
+                  <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} gitMap={gitMap} repoMap={repoMap} />
                 ))
               )}
             </div>

package/components/Dashboard.tsx

@@ -40,7 +40,6 @@ export default function Dashboard({ user }: { user: any }) {
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [showNewTask, setShowNewTask] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
-  const [showCode, setShowCode] = useState(true);
   const [usage, setUsage] = useState<UsageSummary[]>([]);
   const [providers, setProviders] = useState<ProviderInfo[]>([]);
   const [projects, setProjects] = useState<ProjectInfo[]>([]);
@@ -262,7 +261,7 @@ export default function Dashboard({ user }: { user: any }) {
         {/* Code — terminal + file browser, always mounted to keep terminal sessions alive */}
         <div className={`flex-1 min-h-0 flex ${viewMode === 'terminal' ? '' : 'hidden'}`}>
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
-            <CodeViewer terminalRef={terminalRef} onToggleCode={() => setShowCode(v => !v)} />
+            <CodeViewer terminalRef={terminalRef} />
           </Suspense>
         </div>
       </div>

package/components/WebTerminal.tsx

@@ -13,8 +13,7 @@ export interface WebTerminalHandle {
 
 export interface WebTerminalProps {
   onActiveSession?: (sessionName: string | null) => void;
-  codeOpen?: boolean;
-  onToggleCode?: () => void;
+  onCodeOpenChange?: (open: boolean) => void;
 }
 
 // ─── Types ───────────────────────────────────────────────────
@@ -162,7 +161,7 @@ let globalDragging = false;
 
 // ─── Main component ─────────────────────────────────────────
 
-const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function WebTerminal({ onActiveSession, codeOpen, onToggleCode }, 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) }];
@@ -178,6 +177,7 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
   const sessionLabelsRef = useRef<Record<string, string>>({});
   const dragTabRef = useRef<number | null>(null);
   const [refreshKeys, setRefreshKeys] = useState<Record<number, number>>({});
+  const [tabCodeOpen, setTabCodeOpen] = useState<Record<number, boolean>>({});
 
   // Restore shared state from server after mount
   useEffect(() => {
@@ -214,12 +214,17 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
 
   const activeTab = tabs.find(t => t.id === activeTabId) || tabs[0];
 
-  // Notify parent when active terminal session changes
+  // Notify parent when active terminal session or code state changes
   useEffect(() => {
-    if (!onActiveSession || !activeTab) return;
-    const sessions = collectSessionNames(activeTab.tree);
-    onActiveSession(sessions[0] || null);
-  }, [activeTabId, activeTab, onActiveSession]);
+    if (!activeTab) return;
+    if (onActiveSession) {
+      const sessions = collectSessionNames(activeTab.tree);
+      onActiveSession(sessions[0] || null);
+    }
+    if (onCodeOpenChange) {
+      onCodeOpenChange(tabCodeOpen[activeTab.id] ?? false);
+    }
+  }, [activeTabId, activeTab, onActiveSession, onCodeOpenChange, tabCodeOpen]);
 
   // ─── Imperative handle for parent ─────────────────────
 
@@ -519,11 +524,16 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
           >
             Refresh
           </button>
-          {onToggleCode && (
+          {onCodeOpenChange && activeTab && (
             <button
-              onClick={onToggleCode}
-              className={`text-[11px] px-3 py-1 rounded font-bold ${codeOpen ? 'text-white bg-red-500 hover:bg-red-400' : 'text-red-400 border border-red-500 hover:bg-red-500 hover:text-white'}`}
-              title={codeOpen ? 'Hide code panel' : 'Show code panel'}
+              onClick={() => {
+                const current = tabCodeOpen[activeTab.id] ?? false;
+                const next = !current;
+                setTabCodeOpen(prev => ({ ...prev, [activeTab.id]: next }));
+                onCodeOpenChange(next);
+              }}
+              className={`text-[11px] px-3 py-1 rounded font-bold ${(tabCodeOpen[activeTab.id] ?? false) ? 'text-white bg-red-500 hover:bg-red-400' : 'text-red-400 border border-red-500 hover:bg-red-500 hover:text-white'}`}
+              title={(tabCodeOpen[activeTab.id] ?? false) ? 'Hide code panel' : 'Show code panel'}
             >
               Code
             </button>

package/package.json

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