@aion0/forge 0.2.1 → 0.2.3

package/components/ProjectManager.tsx

@@ -0,0 +1,410 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface Project {
+  name: string;
+  path: string;
+  root: string;
+  hasGit: boolean;
+  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 }[];
+}
+
+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);
+
+  // Fetch projects
+  useEffect(() => {
+    fetch('/api/projects').then(r => r.json())
+      .then((p: Project[]) => { if (Array.isArray(p)) setProjects(p); })
+      .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);
+  }, []);
+
+  // 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([]); }
+  }, []);
+
+  const selectProject = useCallback((p: Project) => {
+    setSelectedProject(p);
+    setSelectedFile(null);
+    setFileContent(null);
+    setGitResult(null);
+    setCommitMsg('');
+    fetchGitInfo(p);
+    fetchTree(p);
+  }, [fetchGitInfo, fetchTree]);
+
+  const openFile = useCallback(async (path: string) => {
+    if (!selectedProject) return;
+    setSelectedFile(path);
+    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);
+  };
+
+  const handleClone = async () => {
+    if (!cloneUrl.trim()) return;
+    setCloneLoading(true);
+    setGitResult(null);
+    try {
+      const res = await fetch('/api/git', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'clone', repoUrl: cloneUrl.trim() }),
+      });
+      const data = await res.json();
+      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);
+        setGitResult({ ok: true });
+      } else {
+        setGitResult(data);
+      }
+    } catch (e: any) {
+      setGitResult({ error: e.message });
+    }
+    setCloneLoading(false);
+  };
+
+  // Group projects by root
+  const roots = [...new Set(projects.map(p => p.root))];
+
+  return (
+    <div className="flex-1 flex min-h-0">
+      {/* Left sidebar — project list */}
+      <aside className="w-64 border-r border-[var(--border)] flex flex-col shrink-0">
+        <div className="px-3 py-2 border-b border-[var(--border)] flex items-center justify-between">
+          <span className="text-[11px] font-semibold text-[var(--text-primary)]">Projects</span>
+          <button
+            onClick={() => setShowClone(v => !v)}
+            className={`text-[10px] px-2 py-0.5 rounded ${showClone ? 'text-white bg-[var(--accent)]' : 'text-[var(--accent)] hover:bg-[var(--accent)]/10'}`}
+          >
+            + Clone
+          </button>
+        </div>
+
+        {/* Clone form */}
+        {showClone && (
+          <div className="p-2 border-b border-[var(--border)] space-y-2">
+            <input
+              value={cloneUrl}
+              onChange={e => setCloneUrl(e.target.value)}
+              onKeyDown={e => e.key === 'Enter' && handleClone()}
+              placeholder="https://github.com/user/repo.git"
+              className="w-full text-xs bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1.5 text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+            />
+            <button
+              onClick={handleClone}
+              disabled={cloneLoading || !cloneUrl.trim()}
+              className="w-full text-[10px] px-2 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50"
+            >
+              {cloneLoading ? 'Cloning...' : 'Clone Repository'}
+            </button>
+          </div>
+        )}
+
+        {/* Project list */}
+        <div className="flex-1 overflow-y-auto">
+          {roots.map(root => {
+            const rootName = root.split('/').pop() || root;
+            const rootProjects = projects.filter(p => p.root === root);
+            return (
+              <div key={root}>
+                <div className="px-3 py-1 text-[9px] text-[var(--text-secondary)] uppercase bg-[var(--bg-tertiary)]">
+                  {rootName}
+                </div>
+                {rootProjects.map(p => (
+                  <button
+                    key={p.path}
+                    onClick={() => selectProject(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)]'
+                    }`}
+                  >
+                    <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>
+            );
+          })}
+        </div>
+      </aside>
+
+      {/* 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}
+                <button
+                  onClick={() => { fetchGitInfo(selectedProject); fetchTree(selectedProject); if (selectedFile) openFile(selectedFile); }}
+                  className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-auto"
+                  title="Refresh"
+                >
+                  ↻
+                </button>
+              </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>
+              {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 */}
+            {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>
+            )}
+
+            {/* Content area */}
+            <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 */}
+              <div className="flex-1 min-w-0 overflow-auto bg-[var(--bg-primary)]">
+                {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">{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>
+
+            {/* Git panel — bottom */}
+            {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="px-3 py-0.5 text-xs flex items-center gap-2">
+                        <span className={`text-[10px] font-mono w-4 ${
+                          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>
+                        <span className="text-[var(--text-secondary)] truncate">{g.path}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {/* 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)]"
+                  />
+                  <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 className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
+            <div className="text-center space-y-2">
+              <p className="text-sm">Select a project</p>
+              <p className="text-xs">{projects.length} projects across {roots.length} directories</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </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>
+  );
+}

package/components/SettingsModal.tsx

@@ -216,9 +216,12 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
           <input
             value={settings.telegramChatId}
             onChange={e => setSettings({ ...settings, telegramChatId: e.target.value })}
-            placeholder="Chat ID (your numeric user ID)"
+            placeholder="Chat ID (comma-separated for multiple)"
             className="w-full px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
           />
+          <p className="text-[9px] text-[var(--text-secondary)]">
+            Allowed user IDs (whitelist). Multiple IDs separated by commas. Only these users can interact with the bot.
+          </p>
           <div className="flex items-center gap-4">
             <label className="flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]">
               <input

package/components/TaskDetail.tsx

@@ -231,7 +231,7 @@ export default function TaskDetail({
 
       {editing && (
         <NewTaskModal
-          editTask={{ id: task.id, projectName: task.projectName, prompt: task.prompt, priority: task.priority, mode: task.mode }}
+          editTask={{ id: task.id, projectName: task.projectName, prompt: task.prompt, priority: task.priority, mode: task.mode, scheduledAt: task.scheduledAt }}
           onClose={() => setEditing(false)}
           onCreate={async (data) => {
             await fetch(`/api/tasks/${task.id}`, {

package/components/WebTerminal.tsx

@@ -26,7 +26,7 @@ interface TmuxSession {
 }
 
 type SplitNode =
-  | { type: 'terminal'; id: number; sessionName?: string }
+  | { type: 'terminal'; id: number; sessionName?: string; projectPath?: string }
   | { type: 'split'; id: number; direction: 'horizontal' | 'vertical'; ratio: number; first: SplitNode; second: SplitNode };
 
 interface TabState {
@@ -35,6 +35,7 @@ interface TabState {
   tree: SplitNode;
   ratios: Record<number, number>;
   activeId: number;
+  projectPath?: string;  // If set, auto-run claude --resume in this dir on session create
 }
 
 // ─── Layout persistence ──────────────────────────────────────
@@ -99,8 +100,8 @@ function initNextIdFromTabs(tabs: TabState[]) {
   }
 }
 
-function makeTerminal(sessionName?: string): SplitNode {
-  return { type: 'terminal', id: nextId++, sessionName };
+function makeTerminal(sessionName?: string, projectPath?: string): SplitNode {
+  return { type: 'terminal', id: nextId++, sessionName, projectPath };
 }
 
 function makeSplit(direction: 'horizontal' | 'vertical', first: SplitNode, second: SplitNode): SplitNode {
@@ -178,6 +179,10 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
   const dragTabRef = useRef<number | null>(null);
   const [refreshKeys, setRefreshKeys] = useState<Record<number, number>>({});
   const [tabCodeOpen, setTabCodeOpen] = useState<Record<number, boolean>>({});
+  const [showNewTabModal, setShowNewTabModal] = useState(false);
+  const [projectRoots, setProjectRoots] = useState<string[]>([]);
+  const [allProjects, setAllProjects] = useState<{ name: string; path: string; root: string }[]>([]);
+  const [expandedRoot, setExpandedRoot] = useState<string | null>(null);
 
   // Restore shared state from server after mount
   useEffect(() => {
@@ -191,6 +196,15 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
       }
       setHydrated(true);
     });
+    // Fetch projects and derive roots
+    fetch('/api/projects').then(r => r.json())
+      .then((p: { name: string; path: string; root: string }[]) => {
+        if (!Array.isArray(p)) return;
+        setAllProjects(p);
+        const roots = [...new Set(p.map(proj => proj.root))];
+        setProjectRoots(roots);
+      })
+      .catch(() => {});
   }, []);
 
   // Persist to server on changes (debounced, only after hydration)
@@ -248,10 +262,11 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
 
   // ─── Tab operations ───────────────────────────────────
 
-  const addTab = useCallback(() => {
-    const tree = makeTerminal();
+  const addTab = useCallback((projectPath?: string) => {
+    const tree = makeTerminal(undefined, projectPath);
     const tabNum = tabs.length + 1;
-    const newTab: TabState = { id: nextId++, label: `Terminal ${tabNum}`, tree, ratios: {}, activeId: firstTerminalId(tree) };
+    const label = projectPath ? projectPath.split('/').pop() || `Terminal ${tabNum}` : `Terminal ${tabNum}`;
+    const newTab: TabState = { id: nextId++, label, tree, ratios: {}, activeId: firstTerminalId(tree), projectPath };
     setTabs(prev => [...prev, newTab]);
     setActiveTabId(newTab.id);
   }, [tabs.length]);
@@ -486,9 +501,9 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
             </div>
           ))}
           <button
-            onClick={addTab}
+            onClick={() => setShowNewTabModal(true)}
             className="px-2 py-1 text-[11px] text-gray-500 hover:text-white hover:bg-[#2a2a4a]"
-            title="New terminal tab"
+            title="New tab"
           >
             +
           </button>
@@ -631,6 +646,75 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
         </div>
       )}
 
+      {/* New tab modal */}
+      {showNewTabModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => { setShowNewTabModal(false); setExpandedRoot(null); }}>
+          <div className="bg-[#1a1a2e] border border-[#2a2a4a] rounded-lg shadow-xl w-[350px] max-h-[70vh] flex flex-col" onClick={e => e.stopPropagation()}>
+            <div className="px-4 py-3 border-b border-[#2a2a4a]">
+              <h3 className="text-sm font-semibold text-white">New Tab</h3>
+            </div>
+            <div className="flex-1 overflow-y-auto p-2">
+              {/* Plain terminal */}
+              <button
+                onClick={() => { addTab(); setShowNewTabModal(false); setExpandedRoot(null); }}
+                className="w-full text-left px-3 py-2 rounded hover:bg-[#2a2a4a] text-[12px] text-gray-300 flex items-center gap-2"
+              >
+                <span className="text-gray-500">▸</span> Terminal
+              </button>
+
+              {/* Project roots */}
+              {projectRoots.length > 0 && (
+                <div className="mt-2 pt-2 border-t border-[#2a2a4a]">
+                  <div className="px-3 py-1 text-[9px] text-gray-500 uppercase">Claude in Project</div>
+                  {projectRoots.map(root => {
+                    const rootName = root.split('/').pop() || root;
+                    const isExpanded = expandedRoot === root;
+                    const rootProjects = allProjects.filter(p => p.root === root);
+                    return (
+                      <div key={root}>
+                        <button
+                          onClick={() => setExpandedRoot(isExpanded ? null : root)}
+                          className="w-full text-left px-3 py-2 rounded hover:bg-[#2a2a4a] text-[12px] text-gray-300 flex items-center gap-2"
+                        >
+                          <span className="text-gray-500 text-[10px] w-3">{isExpanded ? '▾' : '▸'}</span>
+                          <span>{rootName}</span>
+                          <span className="text-[9px] text-gray-600 ml-auto">{rootProjects.length}</span>
+                        </button>
+                        {isExpanded && (
+                          <div className="ml-4">
+                            {rootProjects.map(p => (
+                              <button
+                                key={p.path}
+                                onClick={() => { addTab(p.path); setShowNewTabModal(false); setExpandedRoot(null); }}
+                                className="w-full text-left px-3 py-1.5 rounded hover:bg-[#2a2a4a] text-[11px] text-gray-300 flex items-center gap-2 truncate"
+                                title={p.path}
+                              >
+                                <span className="text-gray-600 text-[10px]">↳</span> {p.name}
+                              </button>
+                            ))}
+                            {rootProjects.length === 0 && (
+                              <div className="px-3 py-1.5 text-[10px] text-gray-600">No projects</div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+            <div className="px-4 py-2 border-t border-[#2a2a4a]">
+              <button
+                onClick={() => { setShowNewTabModal(false); setExpandedRoot(null); }}
+                className="w-full text-center text-[11px] text-gray-500 hover:text-gray-300 py-1"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Close confirmation dialog */}
       {closeConfirm && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setCloseConfirm(null)}>
@@ -706,7 +790,7 @@ function PaneRenderer({
   if (node.type === 'terminal') {
     return (
       <div className={`h-full w-full ${activeId === node.id ? 'ring-1 ring-[#7c5bf0]/50 ring-inset' : ''}`} onMouseDown={() => onFocus(node.id)}>
-        <MemoTerminalPane key={`${node.id}-${refreshKeys[node.id] || 0}`} id={node.id} sessionName={node.sessionName} onSessionConnected={onSessionConnected} />
+        <MemoTerminalPane key={`${node.id}-${refreshKeys[node.id] || 0}`} id={node.id} sessionName={node.sessionName} projectPath={node.projectPath} onSessionConnected={onSessionConnected} />
       </div>
     );
   }
@@ -836,15 +920,19 @@ function DraggableSplit({
 const MemoTerminalPane = memo(function TerminalPane({
   id,
   sessionName,
+  projectPath,
   onSessionConnected,
 }: {
   id: number;
   sessionName?: string;
+  projectPath?: string;
   onSessionConnected: (paneId: number, sessionName: string) => void;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const sessionNameRef = useRef(sessionName);
   sessionNameRef.current = sessionName;
+  const projectPathRef = useRef(projectPath);
+  projectPathRef.current = projectPath;
 
   useEffect(() => {
     if (!containerRef.current) return;
@@ -921,6 +1009,7 @@ const MemoTerminalPane = memo(function TerminalPane({
     let createRetries = 0;
     const MAX_CREATE_RETRIES = 2;
     let reconnectAttempts = 0;
+    let isNewlyCreated = false;
 
     function connect() {
       if (disposed) return;
@@ -942,6 +1031,7 @@ const MemoTerminalPane = memo(function TerminalPane({
             socket.send(JSON.stringify({ type: 'attach', sessionName: sn, cols, rows }));
           } else if (createRetries < MAX_CREATE_RETRIES) {
             createRetries++;
+            isNewlyCreated = true;
             socket.send(JSON.stringify({ type: 'create', cols, rows }));
           } else {
             term.write('\r\n\x1b[91m[failed to create session — check server logs]\x1b[0m\r\n');
@@ -960,6 +1050,16 @@ const MemoTerminalPane = memo(function TerminalPane({
             createRetries = 0;
             reconnectAttempts = 0;
             onSessionConnected(id, msg.sessionName);
+            // Auto-run claude --resume for project tabs on new session
+            if (isNewlyCreated && projectPathRef.current) {
+              isNewlyCreated = false;
+              setTimeout(() => {
+                if (!disposed && ws?.readyState === WebSocket.OPEN) {
+                  ws.send(JSON.stringify({ type: 'input', data: `cd "${projectPathRef.current}" && claude --resume\n` }));
+                }
+              }, 300);
+            }
+            isNewlyCreated = false;
             // Force tmux to redraw by toggling size, then send reset
             setTimeout(() => {
               if (disposed || ws?.readyState !== WebSocket.OPEN) return;