@aion0/forge 0.3.3 → 0.3.5

package/components/ProjectManager.tsx

@@ -1,42 +1,8 @@
 'use client';
 
-import React, { useState, useEffect, useCallback } from 'react';
-
-// ─── Syntax highlighting ─────────────────────────────────
-const KEYWORDS = new Set([
-  'import', 'export', 'from', 'const', 'let', 'var', 'function', 'return',
-  'if', 'else', 'for', 'while', 'switch', 'case', 'break', 'continue',
-  'class', 'extends', 'new', 'this', 'super', 'typeof', 'instanceof',
-  'try', 'catch', 'finally', 'throw', 'async', 'await', 'yield',
-  'default', 'interface', 'type', 'enum', 'implements', 'readonly',
-  'public', 'private', 'protected', 'static', 'abstract',
-  'true', 'false', 'null', 'undefined', 'void',
-  'def', 'self', 'None', 'True', 'False', 'lambda', 'with', 'as', 'in', 'not', 'and', 'or',
-]);
-
-function highlightLine(line: string): React.ReactNode {
-  if (!line) return ' ';
-  const commentIdx = line.indexOf('//');
-  if (commentIdx === 0 || (commentIdx > 0 && /^\s*$/.test(line.slice(0, commentIdx)))) {
-    return <span className="text-gray-500 italic">{line}</span>;
-  }
-  const parts: React.ReactNode[] = [];
-  let lastIdx = 0;
-  const regex = /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\b\d+\.?\d*\b)|(\/\/.*$|#.*$)|(\b[A-Z_][A-Z_0-9]+\b)|(\b\w+\b)/g;
-  let match;
-  while ((match = regex.exec(line)) !== null) {
-    if (match.index > lastIdx) parts.push(line.slice(lastIdx, match.index));
-    if (match[1]) parts.push(<span key={match.index} className="text-green-400">{match[0]}</span>);
-    else if (match[2]) parts.push(<span key={match.index} className="text-orange-300">{match[0]}</span>);
-    else if (match[3]) parts.push(<span key={match.index} className="text-gray-500 italic">{match[0]}</span>);
-    else if (match[4]) parts.push(<span key={match.index} className="text-cyan-300">{match[0]}</span>);
-    else if (match[5] && KEYWORDS.has(match[5])) parts.push(<span key={match.index} className="text-purple-400">{match[0]}</span>);
-    else parts.push(match[0]);
-    lastIdx = match.index + match[0].length;
-  }
-  if (lastIdx < line.length) parts.push(line.slice(lastIdx));
-  return parts.length > 0 ? <>{parts}</> : line;
-}
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import TabBar from './TabBar';
+import ProjectDetail from './ProjectDetail';
 
 interface Project {
   name: string;
@@ -46,53 +12,30 @@ interface Project {
   language: string | null;
 }
 
-interface GitInfo {
-  branch: string;
-  changes: { status: string; path: string }[];
-  remote: string;
-  ahead: number;
-  behind: number;
-  lastCommit: string;
-  log: { hash: string; message: string; author: string; date: string }[];
+interface ProjectTab {
+  id: number;
+  projectPath: string;
+  projectName: string;
+  hasGit: boolean;
+  mountedAt: number; // timestamp for LRU eviction
 }
 
+const MAX_MOUNTED_TABS = 5;
+function genTabId(): number { return Date.now() + Math.floor(Math.random() * 10000); }
+
 export default function ProjectManager() {
   const [projects, setProjects] = useState<Project[]>([]);
-  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
-  const [gitInfo, setGitInfo] = useState<GitInfo | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [commitMsg, setCommitMsg] = useState('');
-  const [gitLoading, setGitLoading] = useState(false);
-  const [gitResult, setGitResult] = useState<{ ok?: boolean; error?: string } | null>(null);
   const [showClone, setShowClone] = useState(false);
   const [cloneUrl, setCloneUrl] = useState('');
   const [cloneLoading, setCloneLoading] = useState(false);
-  const [fileTree, setFileTree] = useState<any[]>([]);
-  const [selectedFile, setSelectedFile] = useState<string | null>(null);
-  const [fileContent, setFileContent] = useState<string | null>(null);
-  const [fileLanguage, setFileLanguage] = useState('');
-  const [fileLoading, setFileLoading] = useState(false);
-  const [showLog, setShowLog] = useState(false);
-  const [diffContent, setDiffContent] = useState<string | null>(null);
-  const [diffFile, setDiffFile] = useState<string | null>(null);
-  const [projectSkills, setProjectSkills] = useState<{ name: string; displayName: string; type: string; scope: string; version: string; installedVersion: string; hasUpdate: boolean; source: 'registry' | 'local' }[]>([]);
-  const [showSkillsDetail, setShowSkillsDetail] = useState(false);
-  const [projectTab, setProjectTab] = useState<'code' | 'skills' | 'claudemd'>('code');
-  const [claudeMdContent, setClaudeMdContent] = useState('');
-  const [claudeMdExists, setClaudeMdExists] = useState(false);
-  const [claudeTemplates, setClaudeTemplates] = useState<{ id: string; name: string; description: string; tags: string[]; builtin: boolean; content: string }[]>([]);
-  const [claudeInjectedIds, setClaudeInjectedIds] = useState<Set<string>>(new Set());
-  const [claudeEditing, setClaudeEditing] = useState(false);
-  const [claudeEditContent, setClaudeEditContent] = useState('');
-  const [claudeSelectedTemplate, setClaudeSelectedTemplate] = useState<string | null>(null);
-  const [expandedSkillItem, setExpandedSkillItem] = useState<string | null>(null);
-  const [skillItemFiles, setSkillItemFiles] = useState<{ path: string; size: number }[]>([]);
-  const [skillFileContent, setSkillFileContent] = useState('');
-  const [skillFileHash, setSkillFileHash] = useState('');
-  const [skillActivePath, setSkillActivePath] = useState('');
-  const [skillEditing, setSkillEditing] = useState(false);
-  const [skillEditContent, setSkillEditContent] = useState('');
-  const [skillSaving, setSkillSaving] = useState(false);
+  const [gitResult, setGitResult] = useState<{ ok?: boolean; error?: string } | null>(null);
+  const [favorites, setFavorites] = useState<string[]>([]); // array of project paths
+
+  // Tab state
+  const [tabs, setTabs] = useState<ProjectTab[]>([]);
+  const [activeTabId, setActiveTabId] = useState(0);
+  const [tabsLoaded, setTabsLoaded] = useState(false);
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Fetch projects
   useEffect(() => {
@@ -101,282 +44,125 @@ export default function ProjectManager() {
       .catch(() => {});
   }, []);
 
-  // Fetch git info when project selected
-  const fetchGitInfo = useCallback(async (project: Project) => {
-    if (!project.hasGit) { setGitInfo(null); return; }
-    setLoading(true);
-    try {
-      const res = await fetch(`/api/git?dir=${encodeURIComponent(project.path)}`);
-      const data = await res.json();
-      if (!data.error) setGitInfo(data);
-      else setGitInfo(null);
-    } catch { setGitInfo(null); }
-    setLoading(false);
+  // Load favorites from DB
+  useEffect(() => {
+    fetch('/api/favorites').then(r => r.json())
+      .then(favs => { if (Array.isArray(favs)) setFavorites(favs); })
+      .catch(() => {});
   }, []);
 
-  // Fetch file tree
-  const fetchTree = useCallback(async (project: Project) => {
-    try {
-      const res = await fetch(`/api/code?dir=${encodeURIComponent(project.path)}`);
-      const data = await res.json();
-      setFileTree(data.tree || []);
-    } catch { setFileTree([]); }
+  // Load tabs from API
+  useEffect(() => {
+    fetch('/api/tabs?type=projects').then(r => r.json())
+      .then(data => {
+        if (Array.isArray(data.tabs) && data.tabs.length > 0) {
+          const maxId = Math.max(...data.tabs.map((t: any) => t.id || 0));
+          setTabs(data.tabs.map((t: any) => ({ ...t, mountedAt: Date.now() })));
+          setActiveTabId(data.activeTabId || data.tabs[0].id);
+        }
+        setTabsLoaded(true);
+      })
+      .catch(() => setTabsLoaded(true));
   }, []);
 
-  const openDiff = useCallback(async (filePath: string) => {
-    if (!selectedProject) return;
-    setDiffFile(filePath);
-    setDiffContent(null);
-    setSelectedFile(null);
-    setFileContent(null);
-    try {
-      const res = await fetch(`/api/code?dir=${encodeURIComponent(selectedProject.path)}&diff=${encodeURIComponent(filePath)}`);
-      const data = await res.json();
-      setDiffContent(data.diff || 'No changes');
-    } catch { setDiffContent('(Failed to load diff)'); }
-  }, [selectedProject]);
-
-  const toggleSkillItem = useCallback(async (name: string, type: string, scope: string) => {
-    if (expandedSkillItem === name) {
-      setExpandedSkillItem(null);
-      setSkillEditing(false);
-      return;
-    }
-    setExpandedSkillItem(name);
-    setSkillItemFiles([]);
-    setSkillFileContent('');
-    setSkillActivePath('');
-    setSkillEditing(false);
-    // Global items: don't pass project path
-    const isGlobal = scope === 'global';
-    const project = isGlobal ? '' : (selectedProject?.path || '');
-    try {
-      const res = await fetch(`/api/skills/local?action=files&name=${encodeURIComponent(name)}&type=${type}&project=${encodeURIComponent(project)}`);
-      const data = await res.json();
-      setSkillItemFiles(data.files || []);
-      const firstMd = (data.files || []).find((f: any) => f.path.endsWith('.md'));
-      if (firstMd) loadSkillFile(name, type, firstMd.path, project);
-    } catch {}
-  }, [expandedSkillItem, selectedProject]);
-
-  const loadSkillFile = async (name: string, type: string, path: string, project: string) => {
-    setSkillActivePath(path);
-    setSkillEditing(false);
-    setSkillFileContent('Loading...');
-    try {
-      const res = await fetch(`/api/skills/local?action=read&name=${encodeURIComponent(name)}&type=${type}&path=${encodeURIComponent(path)}&project=${encodeURIComponent(project)}`);
-      const data = await res.json();
-      setSkillFileContent(data.content || '');
-      setSkillFileHash(data.hash || '');
-    } catch { setSkillFileContent('(Failed to load)'); }
-  };
-
-  const saveSkillFile = async (name: string, type: string, path: string) => {
-    setSkillSaving(true);
-    const project = selectedProject?.path || '';
-    const res = await fetch('/api/skills/local', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name, type, project, path, content: skillEditContent, expectedHash: skillFileHash }),
-    });
-    const data = await res.json();
-    if (data.ok) {
-      setSkillFileContent(skillEditContent);
-      setSkillFileHash(data.hash);
-      setSkillEditing(false);
-    } else {
-      alert(data.error || 'Save failed');
-    }
-    setSkillSaving(false);
-  };
-
-  const handleUpdate = async (name: string) => {
-    // Check for local modifications first
-    const checkRes = await fetch('/api/skills', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'check-modified', name }),
-    });
-    const checkData = await checkRes.json();
-    if (checkData.modified) {
-      if (!confirm('Local files have been modified. Overwrite with remote version?')) return;
-    }
-    // Re-install (update)
-    const target = selectedProject?.path || 'global';
-    await fetch('/api/skills', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'install', name, target, force: true }),
-    });
-    if (selectedProject) fetchProjectSkills(selectedProject.path);
-  };
-
-  const uninstallSkill = async (name: string, scope: string) => {
-    const target = scope === 'global' ? 'global' : (selectedProject?.path || '');
-    const label = scope === 'global' ? 'global' : selectedProject?.name || 'project';
-    if (!confirm(`Uninstall "${name}" from ${label}?`)) return;
-    await fetch('/api/skills', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'uninstall', name, target }),
-    });
-    if (selectedProject) fetchProjectSkills(selectedProject.path);
-  };
-
-  const fetchClaudeMd = useCallback(async (projectPath: string) => {
-    try {
-      const [contentRes, statusRes, listRes] = await Promise.all([
-        fetch(`/api/claude-templates?action=read-claude-md&project=${encodeURIComponent(projectPath)}`),
-        fetch(`/api/claude-templates?action=status&project=${encodeURIComponent(projectPath)}`),
-        fetch('/api/claude-templates?action=list'),
-      ]);
-      const contentData = await contentRes.json();
-      setClaudeMdContent(contentData.content || '');
-      setClaudeMdExists(contentData.exists || false);
-      const statusData = await statusRes.json();
-      setClaudeInjectedIds(new Set((statusData.status || []).filter((s: any) => s.injected).map((s: any) => s.id)));
-      const listData = await listRes.json();
-      setClaudeTemplates(listData.templates || []);
-    } catch {}
+  // Persist tabs (debounced)
+  const persistTabs = useCallback((newTabs: ProjectTab[], newActiveId: number) => {
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = setTimeout(() => {
+      fetch('/api/tabs?type=projects', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          tabs: newTabs.map(t => ({ id: t.id, projectPath: t.projectPath, projectName: t.projectName, hasGit: t.hasGit })),
+          activeTabId: newActiveId,
+        }),
+      }).catch(() => {});
+    }, 500);
   }, []);
 
-  const injectToProject = async (templateId: string, projectPath: string) => {
-    await fetch('/api/claude-templates', {
+  // Save favorites to settings
+  const saveFavorite = useCallback((projectPath: string, add: boolean) => {
+    fetch('/api/favorites', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'inject', templateId, projects: [projectPath] }),
-    });
-    fetchClaudeMd(projectPath);
-  };
+      body: JSON.stringify({ action: add ? 'add' : 'remove', projectPath }),
+    }).then(r => r.json())
+      .then(favs => { if (Array.isArray(favs)) setFavorites(favs); })
+      .catch(() => {});
+  }, []);
 
-  const removeFromProject = async (templateId: string, projectPath: string) => {
-    if (!confirm(`Remove template from this project's CLAUDE.md?`)) return;
-    await fetch('/api/claude-templates', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'remove', templateId, project: projectPath }),
+  const toggleFavorite = useCallback((projectPath: string) => {
+    const isFav = favorites.includes(projectPath);
+    // Optimistic update
+    setFavorites(prev => isFav ? prev.filter(p => p !== projectPath) : [...prev, projectPath]);
+    saveFavorite(projectPath, !isFav);
+  }, [favorites, saveFavorite]);
+
+  // Open a project in a tab
+  const openProjectTab = useCallback((p: Project) => {
+    setTabs(prev => {
+      const existing = prev.find(t => t.projectPath === p.path);
+      if (existing) {
+        // Activate existing tab
+        const updated = prev.map(t => t.id === existing.id ? { ...t, mountedAt: Date.now() } : t);
+        setActiveTabId(existing.id);
+        persistTabs(updated, existing.id);
+        return updated;
+      }
+      // Create new tab
+      const newTab: ProjectTab = {
+        id: genTabId(),
+        projectPath: p.path,
+        projectName: p.name,
+        hasGit: p.hasGit,
+        mountedAt: Date.now(),
+      };
+      const updated = [...prev, newTab];
+      setActiveTabId(newTab.id);
+      persistTabs(updated, newTab.id);
+      return updated;
     });
-    fetchClaudeMd(projectPath);
-  };
-
-  const saveClaudeMd = async (projectPath: string, content: string) => {
-    await fetch('/api/claude-templates', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'save-claude-md', project: projectPath, content }),
+  }, [persistTabs]);
+
+  const activateTab = useCallback((id: number) => {
+    setActiveTabId(id);
+    setTabs(prev => {
+      const updated = prev.map(t => t.id === id ? { ...t, mountedAt: Date.now() } : t);
+      persistTabs(updated, id);
+      return updated;
     });
-    setClaudeMdContent(content);
-    setClaudeEditing(false);
-    fetchClaudeMd(projectPath);
-  };
-
-  const fetchProjectSkills = useCallback(async (projectPath: string) => {
-    try {
-      // Fetch registry skills (with update info)
-      const [registryRes, localRes] = await Promise.all([
-        fetch('/api/skills'),
-        fetch(`/api/skills/local?action=scan&project=${encodeURIComponent(projectPath)}`),
-      ]);
-      const registryData = await registryRes.json();
-      const localData = await localRes.json();
-
-      // Registry items installed for this project
-      const registryItems = (registryData.skills || []).filter((s: any) =>
-        s.installedGlobal || (s.installedProjects || []).includes(projectPath)
-      ).map((s: any) => ({
-        name: s.name,
-        displayName: s.displayName,
-        type: s.type || 'command',
-        version: s.version || '',
-        installedVersion: s.installedVersion || '',
-        hasUpdate: s.hasUpdate || false,
-        source: 'registry' as const,
-        scope: s.installedGlobal && (s.installedProjects || []).includes(projectPath) ? 'global + project'
-          : s.installedGlobal ? 'global'
-          : 'project',
-      }));
-
-      // Local items not in registry
-      const registryNames = new Set(registryItems.map((s: any) => s.name));
-      const localItems = (localData.items || [])
-        .filter((item: any) => !registryNames.has(item.name))
-        .map((item: any) => ({
-          name: item.name,
-          displayName: item.name,
-          type: item.type,
-          version: '',
-          installedVersion: '',
-          hasUpdate: false,
-          source: 'local' as const,
-          scope: item.scope,
-        }));
-
-      // Merge: deduplicate by name, combine scopes
-      const merged = new Map<string, any>();
-      for (const item of [...registryItems, ...localItems]) {
-        const existing = merged.get(item.name);
-        if (existing) {
-          // Merge scopes
-          if (existing.scope !== item.scope) {
-            existing.scope = existing.scope.includes(item.scope) ? existing.scope : `${existing.scope} + ${item.scope}`;
-          }
-          // Registry takes priority over local
-          if (item.source === 'registry') {
-            Object.assign(existing, { ...item, scope: existing.scope });
-          }
-        } else {
-          merged.set(item.name, { ...item });
-        }
+  }, [persistTabs]);
+
+  const closeTab = useCallback((id: number) => {
+    setTabs(prev => {
+      const idx = prev.findIndex(t => t.id === id);
+      const updated = prev.filter(t => t.id !== id);
+      if (id === activeTabId && updated.length > 0) {
+        // Activate nearest tab
+        const newIdx = Math.min(idx, updated.length - 1);
+        const newActiveId = updated[newIdx].id;
+        setActiveTabId(newActiveId);
+        persistTabs(updated, newActiveId);
+      } else if (updated.length === 0) {
+        setActiveTabId(0);
+        persistTabs(updated, 0);
+      } else {
+        persistTabs(updated, activeTabId);
       }
-      setProjectSkills([...merged.values()]);
-    } catch { setProjectSkills([]); }
-  }, []);
-
-  const selectProject = useCallback((p: Project) => {
-    setSelectedProject(p);
-    setSelectedFile(null);
-    setFileContent(null);
-    setGitResult(null);
-    setCommitMsg('');
-    fetchGitInfo(p);
-    fetchTree(p);
-    fetchProjectSkills(p.path);
-  }, [fetchGitInfo, fetchTree, fetchProjectSkills]);
-
-  const openFile = useCallback(async (path: string) => {
-    if (!selectedProject) return;
-    setSelectedFile(path);
-    setDiffContent(null);
-    setDiffFile(null);
-    setFileLoading(true);
-    try {
-      const res = await fetch(`/api/code?dir=${encodeURIComponent(selectedProject.path)}&file=${encodeURIComponent(path)}`);
-      const data = await res.json();
-      setFileContent(data.content || null);
-      setFileLanguage(data.language || '');
-    } catch { setFileContent(null); }
-    setFileLoading(false);
-  }, [selectedProject]);
-
-  // Git operations
-  const gitAction = async (action: string, extra?: any) => {
-    if (!selectedProject) return;
-    setGitLoading(true);
-    setGitResult(null);
-    try {
-      const res = await fetch('/api/git', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action, dir: selectedProject.path, ...extra }),
-      });
-      const data = await res.json();
-      setGitResult(data);
-      if (data.ok) fetchGitInfo(selectedProject);
-    } catch (e: any) {
-      setGitResult({ error: e.message });
-    }
-    setGitLoading(false);
-  };
+      return updated;
+    });
+  }, [activeTabId, persistTabs]);
+
+  // Determine which tabs to mount (max 5, LRU eviction)
+  const mountedTabIds = new Set<number>();
+  // Always mount active tab
+  if (activeTabId) mountedTabIds.add(activeTabId);
+  // Add rest sorted by mountedAt desc
+  const sortedByRecency = [...tabs].sort((a, b) => b.mountedAt - a.mountedAt);
+  for (const t of sortedByRecency) {
+    if (mountedTabIds.size >= MAX_MOUNTED_TABS) break;
+    mountedTabIds.add(t.id);
+  }
 
   const handleClone = async () => {
     if (!cloneUrl.trim()) return;
@@ -392,7 +178,6 @@ export default function ProjectManager() {
       if (data.ok) {
         setCloneUrl('');
         setShowClone(false);
-        // Refresh project list
         const pRes = await fetch('/api/projects');
         const pData = await pRes.json();
         if (Array.isArray(pData)) setProjects(pData);
@@ -408,6 +193,7 @@ export default function ProjectManager() {
 
   // Group projects by root
   const roots = [...new Set(projects.map(p => p.root))];
+  const favoriteProjects = projects.filter(p => favorites.includes(p.path));
 
   return (
     <div className="flex-1 flex min-h-0">
@@ -445,6 +231,34 @@ export default function ProjectManager() {
 
         {/* Project list */}
         <div className="flex-1 overflow-y-auto">
+          {/* Favorites section */}
+          {favoriteProjects.length > 0 && (
+            <div>
+              <div className="px-3 py-1 text-[9px] text-[var(--yellow)] uppercase bg-[var(--bg-tertiary)] flex items-center gap-1">
+                <span>★</span> Favorites
+              </div>
+              {favoriteProjects.map(p => (
+                <button
+                  key={`fav-${p.path}`}
+                  onClick={() => openProjectTab(p)}
+                  className={`w-full text-left px-3 py-1.5 text-xs border-b border-[var(--border)]/30 flex items-center gap-2 ${
+                    tabs.find(t => t.id === activeTabId)?.projectPath === p.path ? 'bg-[var(--accent)]/10 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]'
+                  }`}
+                >
+                  <span
+                    onClick={(e) => { e.stopPropagation(); toggleFavorite(p.path); }}
+                    className="text-[13px] text-[var(--yellow)] shrink-0 cursor-pointer leading-none"
+                    title="Remove from favorites"
+                  >★</span>
+                  <span className="truncate">{p.name}</span>
+                  {p.language && <span className="text-[8px] text-[var(--text-secondary)] ml-auto shrink-0">{p.language}</span>}
+                  {p.hasGit && <span className="text-[8px] text-[var(--accent)] shrink-0">git</span>}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* All projects by root */}
           {roots.map(root => {
             const rootName = root.split('/').pop() || root;
             const rootProjects = projects.filter(p => p.root === root).sort((a, b) => a.name.localeCompare(b.name));
@@ -456,11 +270,16 @@ export default function ProjectManager() {
                 {rootProjects.map(p => (
                   <button
                     key={p.path}
-                    onClick={() => selectProject(p)}
+                    onClick={() => openProjectTab(p)}
                     className={`w-full text-left px-3 py-1.5 text-xs border-b border-[var(--border)]/30 flex items-center gap-2 ${
-                      selectedProject?.path === p.path ? 'bg-[var(--accent)]/10 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]'
+                      tabs.find(t => t.id === activeTabId)?.projectPath === p.path ? 'bg-[var(--accent)]/10 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]'
                     }`}
                   >
+                    <span
+                      onClick={(e) => { e.stopPropagation(); toggleFavorite(p.path); }}
+                      className={`text-[13px] shrink-0 cursor-pointer leading-none ${favorites.includes(p.path) ? 'text-[var(--yellow)]' : 'text-[var(--text-secondary)]/30 hover:text-[var(--yellow)]'}`}
+                      title={favorites.includes(p.path) ? 'Remove from favorites' : 'Add to favorites'}
+                    >{favorites.includes(p.path) ? '★' : '☆'}</span>
                     <span className="truncate">{p.name}</span>
                     {p.language && <span className="text-[8px] text-[var(--text-secondary)] ml-auto shrink-0">{p.language}</span>}
                     {p.hasGit && <span className="text-[8px] text-[var(--accent)] shrink-0">git</span>}
@@ -474,461 +293,37 @@ export default function ProjectManager() {
 
       {/* Main area */}
       <div className="flex-1 flex flex-col min-w-0">
-        {selectedProject ? (
-          <>
-            {/* Project header */}
-            <div className="px-4 py-2 border-b border-[var(--border)] shrink-0">
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-semibold text-[var(--text-primary)]">{selectedProject.name}</span>
-                {gitInfo?.branch && (
-                  <span className="text-[9px] text-[var(--accent)] bg-[var(--accent)]/10 px-1.5 py-0.5 rounded">{gitInfo.branch}</span>
-                )}
-                {gitInfo?.ahead ? <span className="text-[9px] text-green-400">↑{gitInfo.ahead}</span> : null}
-                {gitInfo?.behind ? <span className="text-[9px] text-yellow-400">↓{gitInfo.behind}</span> : null}
-                {/* Action buttons */}
-                <div className="flex items-center gap-1.5 ml-auto">
-                  {/* Open Terminal */}
-                  <button
-                    onClick={() => {
-                      if (!selectedProject) return;
-                      // Navigate to terminal tab with this project
-                      const event = new CustomEvent('forge:open-terminal', { detail: { projectPath: selectedProject.path, projectName: selectedProject.name } });
-                      window.dispatchEvent(event);
-                    }}
-                    className="text-[9px] px-2 py-0.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white transition-colors"
-                    title="Open terminal with claude -c"
-                  >
-                    Terminal
-                  </button>
-                  <button
-                    onClick={() => { fetchGitInfo(selectedProject); fetchTree(selectedProject); if (selectedFile) openFile(selectedFile); }}
-                    className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-                    title="Refresh"
-                  >
-                    ↻
-                  </button>
-                </div>
-              </div>
-              <div className="text-[9px] text-[var(--text-secondary)] mt-0.5">
-                {selectedProject.path}
-                {gitInfo?.remote && (
-                  <span className="ml-2">{gitInfo.remote.replace(/^https?:\/\//, '').replace(/^git@github\.com:/, 'github.com/').replace(/\.git$/, '')}</span>
-                )}
-              </div>
-              {/* Tab switcher */}
-              <div className="flex items-center gap-2 mt-1.5">
-                <div className="flex bg-[var(--bg-tertiary)] rounded p-0.5">
-                  <button
-                    onClick={() => setProjectTab('code')}
-                    className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                      projectTab === 'code' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-                    }`}
-                  >Code</button>
-                  <button
-                    onClick={() => setProjectTab('skills')}
-                    className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                      projectTab === 'skills' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-                    }`}
-                  >
-                    Skills & Cmds
-                    {projectSkills.length > 0 && <span className="ml-1 text-[8px] text-[var(--text-secondary)]">({projectSkills.length})</span>}
-                    {projectSkills.some(s => s.hasUpdate) && <span className="ml-1 text-[8px] text-[var(--yellow)]">!</span>}
-                  </button>
-                  <button
-                    onClick={() => { setProjectTab('claudemd'); if (selectedProject) fetchClaudeMd(selectedProject.path); }}
-                    className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                      projectTab === 'claudemd' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-                    }`}
-                  >
-                    CLAUDE.md
-                    {claudeMdExists && <span className="ml-1 text-[8px] text-[var(--green)]">•</span>}
-                  </button>
-                </div>
-              </div>
-              {projectTab === 'code' && gitInfo?.lastCommit && (
-                <div className="flex items-center gap-2 mt-0.5">
-                  <span className="text-[9px] text-[var(--text-secondary)] font-mono truncate">{gitInfo.lastCommit}</span>
-                  <button
-                    onClick={() => setShowLog(v => !v)}
-                    className={`text-[9px] px-1.5 py-0.5 rounded shrink-0 ${showLog ? 'text-white bg-[var(--accent)]/30' : 'text-[var(--accent)] hover:bg-[var(--accent)]/10'}`}
-                  >
-                    History
-                  </button>
-                </div>
-              )}
-            </div>
-
-            {/* Git log */}
-            {projectTab === 'code' && showLog && gitInfo?.log && gitInfo.log.length > 0 && (
-              <div className="max-h-48 overflow-y-auto border-b border-[var(--border)] bg-[var(--bg-tertiary)]">
-                {gitInfo.log.map(c => (
-                  <div key={c.hash} className="px-4 py-1.5 border-b border-[var(--border)]/30 text-xs flex items-start gap-2">
-                    <span className="font-mono text-[var(--accent)] shrink-0 text-[10px]">{c.hash}</span>
-                    <span className="text-[var(--text-primary)] truncate flex-1">{c.message}</span>
-                    <span className="text-[var(--text-secondary)] text-[9px] shrink-0">{c.author}</span>
-                    <span className="text-[var(--text-secondary)] text-[9px] shrink-0 w-16 text-right">{c.date}</span>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* Code content area */}
-            {projectTab === 'code' && <div className="flex-1 flex min-h-0 overflow-hidden">
-              {/* File tree */}
-              <div className="w-52 border-r border-[var(--border)] overflow-y-auto p-1 shrink-0">
-                {fileTree.map((node: any) => (
-                  <FileTreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} />
-                ))}
-              </div>
-
-              {/* File content — independent scroll, width:0 prevents content from expanding parent */}
-              <div className="flex-1 min-w-0 overflow-auto bg-[var(--bg-primary)]" style={{ width: 0 }}>
-                {/* Diff view */}
-                {diffContent !== null && diffFile ? (
-                  <>
-                    <div className="px-3 py-1 border-b border-[var(--border)] text-[10px] sticky top-0 bg-[var(--bg-primary)] z-10 flex items-center gap-2">
-                      <span className="text-[var(--yellow)]">DIFF</span>
-                      <span className="text-[var(--text-secondary)]">{diffFile}</span>
-                      <button onClick={() => { if (diffFile) openFile(diffFile); }} className="ml-auto text-[9px] text-[var(--accent)] hover:underline">Open Source</button>
-                    </div>
-                    <pre className="p-4 text-[12px] leading-[1.5] font-mono whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2 }}>
-                      {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'
-                          : line.startsWith('@@') ? 'text-cyan-400'
-                          : line.startsWith('diff') || line.startsWith('index') ? 'text-[var(--text-secondary)]'
-                          : 'text-[var(--text-primary)]';
-                        return <div key={i} className={`${color} px-2`}>{line || ' '}</div>;
-                      })}
-                    </pre>
-                  </>
-                ) : fileLoading ? (
-                  <div className="h-full flex items-center justify-center text-xs text-[var(--text-secondary)]">Loading...</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>
-                    <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 }}>
-                      {fileContent.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)}</span>
-                        </div>
-                      ))}
-                    </pre>
-                  </>
-                ) : (
-                  <div className="flex-1 flex items-center justify-center text-xs text-[var(--text-secondary)]">
-                    Select a file to view
-                  </div>
-                )}
-              </div>
-            </div>}
-
-            {/* Skills & Commands tab */}
-            {projectTab === 'skills' && (
-              <div className="flex-1 flex min-h-0 overflow-hidden">
-                {/* Left: skill/command tree */}
-                <div className="w-52 border-r border-[var(--border)] overflow-y-auto p-1 shrink-0">
-                  {projectSkills.length === 0 ? (
-                    <p className="text-[9px] text-[var(--text-secondary)] p-2">No skills or commands installed</p>
-                  ) : (
-                    projectSkills.map(s => (
-                      <div key={`${s.name}-${s.scope}-${s.source}`}>
-                        <button
-                          onClick={() => toggleSkillItem(s.name, s.type, s.scope)}
-                          className={`w-full text-left px-2 py-1 text-[10px] rounded flex items-center gap-1.5 group ${
-                            expandedSkillItem === s.name ? 'bg-[var(--accent)]/10 text-[var(--accent)]' : 'text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]'
-                          }`}
-                        >
-                          <span className="text-[8px] text-[var(--text-secondary)]">{expandedSkillItem === s.name ? '▾' : '▸'}</span>
-                          <span className={`text-[7px] px-1 rounded font-medium shrink-0 ${
-                            s.type === 'skill' ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'
-                          }`}>{s.type === 'skill' ? 'S' : 'C'}</span>
-                          <span className="truncate flex-1">{s.name}</span>
-                          <span className={`text-[7px] shrink-0 ${s.scope === 'global' ? 'text-green-400' : 'text-[var(--accent)]'}`}>{s.scope === 'global' ? 'G' : s.scope === 'project' ? 'P' : 'G+P'}</span>
-                          {s.hasUpdate && <span className="text-[7px] text-[var(--yellow)] shrink-0">!</span>}
-                          {s.source === 'local' && <span className="text-[7px] text-[var(--text-secondary)] shrink-0">local</span>}
-                          {s.source === 'registry' && <span className="text-[7px] text-[var(--accent)] shrink-0">mkt</span>}
-                          <span
-                            onClick={(e) => { e.stopPropagation(); uninstallSkill(s.name, s.scope); }}
-                            className="text-[8px] text-[var(--text-secondary)] hover:text-[var(--red)] shrink-0 opacity-0 group-hover:opacity-100 cursor-pointer"
-                          >x</span>
-                        </button>
-                        {/* Expanded file list */}
-                        {expandedSkillItem === s.name && skillItemFiles.length > 0 && (
-                          <div className="ml-4">
-                            {skillItemFiles.map(f => (
-                              <button
-                                key={f.path}
-                                onClick={() => loadSkillFile(s.name, s.type, f.path, s.scope === 'global' ? '' : (selectedProject?.path || ''))}
-                                className={`w-full text-left px-2 py-0.5 text-[9px] rounded truncate ${
-                                  skillActivePath === f.path ? 'text-[var(--accent)] bg-[var(--accent)]/10' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-                                }`}
-                                title={f.path}
-                              >
-                                {f.path.split('/').pop()}
-                              </button>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    ))
-                  )}
-                </div>
-
-                {/* Right: file content / editor */}
-                <div className="flex-1 min-w-0 flex flex-col overflow-hidden bg-[var(--bg-primary)]">
-                  {skillActivePath ? (
-                    <>
-                      <div className="flex items-center gap-2 px-3 py-1 border-b border-[var(--border)] shrink-0">
-                        <span className="text-[10px] text-[var(--text-secondary)] font-mono truncate flex-1">{skillActivePath}</span>
-                        {expandedSkillItem && (() => {
-                          const s = projectSkills.find(x => x.name === expandedSkillItem);
-                          return s && (
-                            <div className="flex items-center gap-2 shrink-0">
-                              {s.version && <span className="text-[8px] text-[var(--text-secondary)] font-mono">v{s.installedVersion || s.version}</span>}
-                              {s.hasUpdate && (
-                                <button
-                                  onClick={() => handleUpdate(s.name)}
-                                  className="text-[8px] px-1.5 py-0.5 rounded bg-[var(--yellow)]/20 text-[var(--yellow)] hover:bg-[var(--yellow)]/30"
-                                >Update → v{s.version}</button>
-                              )}
-                            </div>
-                          );
-                        })()}
-                        {!skillEditing ? (
-                          <button
-                            onClick={() => { setSkillEditing(true); setSkillEditContent(skillFileContent); }}
-                            className="text-[9px] text-[var(--accent)] hover:underline shrink-0"
-                          >Edit</button>
-                        ) : (
-                          <div className="flex gap-1 shrink-0">
-                            <button
-                              onClick={() => { if (expandedSkillItem) saveSkillFile(expandedSkillItem, projectSkills.find(x => x.name === expandedSkillItem)?.type || 'command', skillActivePath); }}
-                              disabled={skillSaving}
-                              className="text-[9px] px-2 py-0.5 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50"
-                            >{skillSaving ? '...' : 'Save'}</button>
-                            <button
-                              onClick={() => setSkillEditing(false)}
-                              className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-                            >Cancel</button>
-                          </div>
-                        )}
-                      </div>
-                      <div className="flex-1 overflow-auto">
-                        {skillEditing ? (
-                          <textarea
-                            value={skillEditContent}
-                            onChange={e => setSkillEditContent(e.target.value)}
-                            className="w-full h-full p-3 text-[11px] font-mono bg-[var(--bg-primary)] text-[var(--text-primary)] border-none outline-none resize-none"
-                            spellCheck={false}
-                          />
-                        ) : (
-                          <pre className="p-3 text-[11px] leading-[1.5] font-mono text-[var(--text-primary)] whitespace-pre-wrap break-words">
-                            {skillFileContent}
-                          </pre>
-                        )}
-                      </div>
-                    </>
-                  ) : (
-                    <div className="flex-1 flex items-center justify-center text-xs text-[var(--text-secondary)]">
-                      Select a skill or command to view
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-
-            {/* CLAUDE.md tab */}
-            {projectTab === 'claudemd' && selectedProject && (
-              <div className="flex-1 flex min-h-0 overflow-hidden">
-                {/* Left: templates list */}
-                <div className="w-52 border-r border-[var(--border)] overflow-y-auto shrink-0 flex flex-col">
-                  <button
-                    onClick={() => { setClaudeSelectedTemplate(null); setClaudeEditing(false); }}
-                    className={`w-full px-2 py-1.5 border-b border-[var(--border)] text-[10px] text-left flex items-center gap-1 ${
-                      !claudeSelectedTemplate && !claudeEditing ? 'text-[var(--accent)] bg-[var(--accent)]/5' : 'text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]'
-                    }`}
-                  >
-                    <span className="font-mono">CLAUDE.md</span>
-                    {claudeMdExists && <span className="text-[var(--green)] text-[8px]">•</span>}
-                  </button>
-                  <div className="px-2 py-1 border-b border-[var(--border)] text-[8px] text-[var(--text-secondary)] uppercase">Templates</div>
-                  <div className="flex-1 overflow-y-auto">
-                    {claudeTemplates.map(t => {
-                      const injected = claudeInjectedIds.has(t.id);
-                      const isSelected = claudeSelectedTemplate === t.id;
-                      return (
-                        <div
-                          key={t.id}
-                          className={`px-2 py-1.5 border-b border-[var(--border)]/30 cursor-pointer ${isSelected ? 'bg-[var(--accent)]/10' : 'hover:bg-[var(--bg-tertiary)]'}`}
-                          onClick={() => setClaudeSelectedTemplate(isSelected ? null : t.id)}
-                        >
-                          <div className="flex items-center gap-1.5">
-                            <span className="text-[10px] text-[var(--text-primary)] truncate flex-1">{t.name}</span>
-                            {t.builtin && <span className="text-[7px] text-[var(--text-secondary)]">built-in</span>}
-                            {injected ? (
-                              <button
-                                onClick={(e) => { e.stopPropagation(); removeFromProject(t.id, selectedProject.path); }}
-                                className="text-[7px] px-1 rounded bg-green-500/10 text-green-400 hover:bg-red-500/10 hover:text-red-400"
-                                title="Remove from CLAUDE.md"
-                              >added</button>
-                            ) : (
-                              <button
-                                onClick={(e) => { e.stopPropagation(); injectToProject(t.id, selectedProject.path); }}
-                                className="text-[7px] px-1 rounded bg-[var(--accent)]/10 text-[var(--accent)] hover:bg-[var(--accent)]/20"
-                                title="Add to CLAUDE.md"
-                              >+ add</button>
-                            )}
-                          </div>
-                          <p className="text-[8px] text-[var(--text-secondary)] mt-0.5 line-clamp-1">{t.description}</p>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-
-                {/* Right: CLAUDE.md content or template preview */}
-                <div className="flex-1 min-w-0 flex flex-col overflow-hidden bg-[var(--bg-primary)]">
-                  {/* Header bar */}
-                  <div className="flex items-center gap-2 px-3 py-1.5 border-b border-[var(--border)] shrink-0">
-                    {claudeSelectedTemplate ? (
-                      <>
-                        <span className="text-[10px] text-[var(--text-secondary)]">Preview:</span>
-                        <span className="text-[10px] text-[var(--text-primary)] font-semibold">{claudeTemplates.find(t => t.id === claudeSelectedTemplate)?.name}</span>
-                        <button
-                          onClick={() => setClaudeSelectedTemplate(null)}
-                          className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-auto"
-                        >Show CLAUDE.md</button>
-                      </>
-                    ) : (
-                      <>
-                        <span className="text-[10px] text-[var(--text-primary)] font-mono">CLAUDE.md</span>
-                        {!claudeMdExists && <span className="text-[8px] text-[var(--yellow)]">not created</span>}
-                        <div className="flex items-center gap-1 ml-auto">
-                          {!claudeEditing ? (
-                            <button
-                              onClick={() => { setClaudeEditing(true); setClaudeEditContent(claudeMdContent); }}
-                              className="text-[9px] text-[var(--accent)] hover:underline"
-                            >Edit</button>
-                          ) : (
-                            <>
-                              <button
-                                onClick={() => saveClaudeMd(selectedProject.path, claudeEditContent)}
-                                className="text-[9px] px-2 py-0.5 bg-[var(--accent)] text-white rounded hover:opacity-90"
-                              >Save</button>
-                              <button
-                                onClick={() => setClaudeEditing(false)}
-                                className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-                              >Cancel</button>
-                            </>
-                          )}
-                        </div>
-                      </>
-                    )}
-                  </div>
-
-                  {/* Content */}
-                  <div className="flex-1 overflow-auto" style={{ width: 0, minWidth: '100%' }}>
-                    {claudeSelectedTemplate ? (
-                      <pre className="p-3 text-[11px] font-mono text-[var(--text-primary)] whitespace-pre-wrap break-words">
-                        {claudeTemplates.find(t => t.id === claudeSelectedTemplate)?.content || ''}
-                      </pre>
-                    ) : claudeEditing ? (
-                      <textarea
-                        value={claudeEditContent}
-                        onChange={e => setClaudeEditContent(e.target.value)}
-                        className="w-full h-full p-3 text-[11px] font-mono bg-[var(--bg-primary)] text-[var(--text-primary)] border-none outline-none resize-none"
-                        spellCheck={false}
-                      />
-                    ) : (
-                      <pre className="p-3 text-[11px] font-mono text-[var(--text-primary)] whitespace-pre-wrap break-words">
-                        {claudeMdContent || '(Empty — add templates or edit directly)'}
-                      </pre>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Git panel — bottom (code tab only) */}
-            {projectTab === 'code' && gitInfo && (
-              <div className="border-t border-[var(--border)] shrink-0">
-                {/* Changes list */}
-                {gitInfo.changes.length > 0 && (
-                  <div className="max-h-32 overflow-y-auto border-b border-[var(--border)]">
-                    <div className="px-3 py-1 text-[9px] text-[var(--text-secondary)] bg-[var(--bg-tertiary)] sticky top-0">
-                      {gitInfo.changes.length} changes
-                    </div>
-                    {gitInfo.changes.map(g => (
-                      <div key={g.path} className="flex items-center px-3 py-0.5 text-xs hover:bg-[var(--bg-tertiary)] group">
-                        <span className={`text-[10px] font-mono w-4 shrink-0 ${
-                          g.status.includes('M') ? 'text-yellow-500' :
-                          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={`truncate flex-1 text-left ml-1 ${diffFile === g.path ? 'text-[var(--accent)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
-                          title="View diff"
-                        >
-                          {g.path}
-                        </button>
-                        <button
-                          onClick={() => openFile(g.path)}
-                          className="text-[8px] text-[var(--text-secondary)] hover:text-[var(--accent)] opacity-0 group-hover:opacity-100 shrink-0 ml-1"
-                          title="Open source file"
-                        >
-                          src
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                )}
+        {/* Tab bar */}
+        {tabs.length > 0 && (
+          <TabBar
+            tabs={tabs.map(t => ({ id: t.id, label: t.projectName }))}
+            activeId={activeTabId}
+            onActivate={activateTab}
+            onClose={closeTab}
+          />
+        )}
 
-                {/* Git actions */}
-                <div className="px-3 py-2 flex items-center gap-2">
-                  <input
-                    value={commitMsg}
-                    onChange={e => setCommitMsg(e.target.value)}
-                    onKeyDown={e => e.key === 'Enter' && commitMsg.trim() && gitAction('commit', { message: commitMsg.trim() })}
-                    placeholder="Commit message..."
-                    className="flex-1 text-xs bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1.5 text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
+        {/* Tab content */}
+        {tabs.length > 0 ? (
+          <div className="flex-1 flex flex-col min-h-0 relative">
+            {tabs.map(tab => {
+              if (!mountedTabIds.has(tab.id)) return null;
+              const isActive = tab.id === activeTabId;
+              return (
+                <div
+                  key={tab.id}
+                  className="flex-1 flex flex-col min-h-0"
+                  style={{ display: isActive ? 'flex' : 'none' }}
+                >
+                  <ProjectDetail
+                    projectPath={tab.projectPath}
+                    projectName={tab.projectName}
+                    hasGit={tab.hasGit}
                   />
-                  <button
-                    onClick={() => commitMsg.trim() && gitAction('commit', { message: commitMsg.trim() })}
-                    disabled={gitLoading || !commitMsg.trim() || gitInfo.changes.length === 0}
-                    className="text-[10px] px-3 py-1.5 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50 shrink-0"
-                  >
-                    Commit
-                  </button>
-                  <button
-                    onClick={() => gitAction('push')}
-                    disabled={gitLoading || gitInfo.ahead === 0}
-                    className="text-[10px] px-3 py-1.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white disabled:opacity-50 shrink-0"
-                  >
-                    Push{gitInfo.ahead > 0 ? ` (${gitInfo.ahead})` : ''}
-                  </button>
-                  <button
-                    onClick={() => gitAction('pull')}
-                    disabled={gitLoading}
-                    className="text-[10px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] shrink-0"
-                  >
-                    Pull{gitInfo.behind > 0 ? ` (${gitInfo.behind})` : ''}
-                  </button>
                 </div>
-
-                {/* Result */}
-                {gitResult && (
-                  <div className={`px-3 py-1 text-[10px] ${gitResult.ok ? 'text-green-400' : 'text-red-400'}`}>
-                    {gitResult.ok ? '✅ Done' : `❌ ${gitResult.error}`}
-                  </div>
-                )}
-              </div>
-            )}
-          </>
+              );
+            })}
+          </div>
         ) : (
           <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
             <div className="text-center space-y-2">
@@ -941,43 +336,3 @@ export default function ProjectManager() {
     </div>
   );
 }
-
-// Simple file tree node
-function FileTreeNode({ node, depth, selected, onSelect }: {
-  node: { name: string; path: string; type: string; children?: any[] };
-  depth: number;
-  selected: string | null;
-  onSelect: (path: string) => void;
-}) {
-  const [expanded, setExpanded] = useState(depth < 1);
-
-  if (node.type === 'dir') {
-    return (
-      <div>
-        <button
-          onClick={() => setExpanded(v => !v)}
-          className="w-full text-left flex items-center gap-1 px-1 py-0.5 hover:bg-[var(--bg-tertiary)] rounded text-xs"
-          style={{ paddingLeft: depth * 12 + 4 }}
-        >
-          <span className="text-[10px] text-[var(--text-secondary)] w-3">{expanded ? '▾' : '▸'}</span>
-          <span className="text-[var(--text-primary)]">{node.name}</span>
-        </button>
-        {expanded && node.children?.map((child: any) => (
-          <FileTreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} />
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <button
-      onClick={() => onSelect(node.path)}
-      className={`w-full text-left px-1 py-0.5 rounded text-xs truncate ${
-        selected === node.path ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
-      }`}
-      style={{ paddingLeft: depth * 12 + 16 }}
-    >
-      {node.name}
-    </button>
-  );
-}