@aion0/forge 0.6.0 → 0.6.3

package/.forge/worktrees/pipeline-0a33c50d/components/ProjectDetail.tsx

@@ -1,1618 +0,0 @@
-'use client';
-
-import React, { useState, useEffect, useCallback, useRef, memo, lazy, Suspense } from 'react';
-import { useSidebarResize } from '@/hooks/useSidebarResize';
-
-import { TerminalSessionPickerLazy, fetchProjectSessions } from './TerminalLauncher';
-const InlinePipelineView = lazy(() => import('./InlinePipelineView'));
-const WorkspaceViewLazy = lazy(() => import('./WorkspaceView'));
-const SessionViewLazy = lazy(() => import('./SessionView'));
-
-// ─── 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',
-  'package', 'final', 'synchronized', 'volatile', 'transient', 'native',
-  'throws', 'int', 'long', 'double', 'float', 'char', 'byte', 'short', 'boolean',
-  'override', 'struct', 'func', 'go', 'defer', 'select', 'chan', 'range',
-  'val', 'var', 'def', 'object', 'trait', 'sealed', 'implicit', 'lazy', 'match',
-]);
-
-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;
-}
-
-interface GitInfo {
-  branch: string;
-  branches: { name: string; upstream: string; hash: string; current: boolean }[];
-  changes: { status: string; path: string }[];
-  remote: string;
-  ahead: number;
-  behind: number;
-  lastCommit: string;
-  log: { hash: string; message: string; author: string; date: string }[];
-}
-
-export default memo(function ProjectDetail({ projectPath, projectName, hasGit }: { projectPath: string; projectName: string; hasGit: boolean }) {
-  const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 208, minWidth: 120, maxWidth: 400 });
-  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 [fileTree, setFileTree] = useState<any[]>([]);
-  const [selectedFile, setSelectedFile] = useState<string | null>(null);
-  const [fileContent, setFileContent] = useState<string | null>(null);
-  const [fileImageUrl, setFileImageUrl] = useState<string | null>(null);
-  const [fileBinaryInfo, setFileBinaryInfo] = useState<{ fileType: string; sizeLabel: string; message?: string } | null>(null);
-  const [fileLanguage, setFileLanguage] = useState('');
-  const [fileLoading, setFileLoading] = useState(false);
-  const [showLog, setShowLog] = useState(false);
-  const [changesExpanded, setChangesExpanded] = useState(false);
-  const [codeSearch, setCodeSearch] = useState('');
-  const [codeSearchResults, setCodeSearchResults] = useState<{ file: string; line: number; content: string }[]>([]);
-  const [codeSearching, setCodeSearching] = useState(false);
-  const [changesHeight, setChangesHeight] = useState(120);
-  const changesResizeRef = useRef<{ startY: number; origH: number } | null>(null);
-  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<'workspace' | 'sessions' | 'code' | 'skills' | 'claudemd' | 'pipelines'>('code');
-  const wsViewRef = useRef<import('./WorkspaceView').WorkspaceViewHandle>(null);
-  // Pipeline bindings state
-  const [pipelineBindings, setPipelineBindings] = useState<{ id: number; workflowName: string; enabled: boolean; config: any; lastRunAt: string | null; nextRunAt: string | null }[]>([]);
-  const [pipelineRuns, setPipelineRuns] = useState<{ id: string; workflowName: string; pipelineId: string; status: string; summary: string; dedupKey: string | null; createdAt: string }[]>([]);
-  const [availableWorkflows, setAvailableWorkflows] = useState<{ name: string; description?: string; builtin?: boolean; type?: string }[]>([]);
-  const [boundSession, setBoundSession] = useState<{ sessionId: string } | null>(null);
-  const [showSessionPicker, setShowSessionPicker] = useState(false);
-  const [availableSessions, setAvailableSessions] = useState<{ id: string; modified: string; size: number }[]>([]);
-  const [expandedRunId, setExpandedRunId] = useState<string | null>(null);
-  const [expandedPipeline, setExpandedPipeline] = useState<any>(null);
-  const [showAddPipeline, setShowAddPipeline] = useState(false);
-  const [triggerInput, setTriggerInput] = useState<Record<string, string>>({});
-  const [runMenu, setRunMenu] = useState<string | null>(null); // workflowName of open run menu
-  const [issueInput, setIssueInput] = useState('');
-  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);
-
-  // Fetch git info
-  const fetchGitInfo = useCallback(async () => {
-    if (!hasGit) { setGitInfo(null); return; }
-    setLoading(true);
-    try {
-      const res = await fetch(`/api/git?dir=${encodeURIComponent(projectPath)}`);
-      const data = await res.json();
-      if (!data.error) setGitInfo(data);
-      else setGitInfo(null);
-    } catch { setGitInfo(null); }
-    setLoading(false);
-  }, [projectPath, hasGit]);
-
-  // Fetch file tree
-  const fetchTree = useCallback(async () => {
-    try {
-      const res = await fetch(`/api/code?dir=${encodeURIComponent(projectPath)}`);
-      const data = await res.json();
-      setFileTree(data.tree || []);
-    } catch { setFileTree([]); }
-  }, [projectPath]);
-
-  const openFile = useCallback(async (path: string) => {
-    setSelectedFile(path);
-    setDiffContent(null);
-    setDiffFile(null);
-    setFileContent(null);
-    setFileImageUrl(null);
-    setFileBinaryInfo(null);
-    setFileLoading(true);
-    try {
-      const res = await fetch(`/api/code?dir=${encodeURIComponent(projectPath)}&file=${encodeURIComponent(path)}`);
-      const data = await res.json();
-      if (data.image) {
-        setFileImageUrl(data.dataUrl);
-      } else if (data.binary) {
-        setFileBinaryInfo({ fileType: data.fileType, sizeLabel: data.sizeLabel, message: data.message });
-      } else if (data.tooLarge) {
-        setFileBinaryInfo({ fileType: '', sizeLabel: data.sizeLabel, message: data.message });
-      } else {
-        setFileContent(data.content || null);
-        setFileLanguage(data.language || '');
-      }
-    } catch { setFileContent(null); }
-    setFileLoading(false);
-  }, [projectPath]);
-
-  const openDiff = useCallback(async (filePath: string) => {
-    setDiffFile(filePath);
-    setDiffContent(null);
-    setSelectedFile(null);
-    setFileContent(null);
-    try {
-      const res = await fetch(`/api/code?dir=${encodeURIComponent(projectPath)}&diff=${encodeURIComponent(filePath)}`);
-      const data = await res.json();
-      setDiffContent(data.diff || 'No changes');
-    } catch { setDiffContent('(Failed to load diff)'); }
-  }, [projectPath]);
-
-  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);
-    const isGlobal = scope === 'global';
-    const project = isGlobal ? '' : projectPath;
-    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, projectPath]);
-
-  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 res = await fetch('/api/skills/local', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name, type, project: projectPath, 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) => {
-    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;
-    }
-    const target = projectPath || 'global';
-    await fetch('/api/skills', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'install', name, target, force: true }),
-    });
-    fetchProjectSkills();
-  };
-
-  const uninstallSkill = async (name: string, scope: string) => {
-    const target = scope === 'global' ? 'global' : projectPath;
-    const label = scope === 'global' ? 'global' : projectName;
-    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 }),
-    });
-    fetchProjectSkills();
-  };
-
-  const fetchPipelineBindings = useCallback(async () => {
-    try {
-      const res = await fetch(`/api/project-pipelines?project=${encodeURIComponent(projectPath)}`);
-      if (!res.ok) return;
-      const data = await res.json();
-      setPipelineBindings(data.bindings || []);
-      setPipelineRuns(data.runs || []);
-      setAvailableWorkflows(data.workflows || []);
-    } catch {}
-  }, [projectPath]);
-
-  const triggerProjectPipeline = async (workflowName: string, input?: Record<string, string>) => {
-    try {
-      const res = await fetch('/api/project-pipelines', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'trigger', projectPath, projectName, workflowName, input }),
-      });
-      const data = await res.json();
-      if (data.ok) { fetchPipelineBindings(); }
-      else { alert(data.error || 'Failed'); }
-    } catch { alert('Failed to trigger pipeline'); }
-  };
-
-  const fetchClaudeMd = useCallback(async () => {
-    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 {}
-  }, [projectPath]);
-
-  const injectToProject = async (templateId: string) => {
-    await fetch('/api/claude-templates', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'inject', templateId, projects: [projectPath] }),
-    });
-    fetchClaudeMd();
-  };
-
-  const removeFromProject = async (templateId: 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 }),
-    });
-    fetchClaudeMd();
-  };
-
-  const saveClaudeMd = async (content: string) => {
-    await fetch('/api/claude-templates', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'save-claude-md', project: projectPath, content }),
-    });
-    setClaudeMdContent(content);
-    setClaudeEditing(false);
-    fetchClaudeMd();
-  };
-
-  const fetchProjectSkills = useCallback(async () => {
-    try {
-      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();
-
-      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',
-      }));
-
-      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,
-        }));
-
-      const merged = new Map<string, any>();
-      for (const item of [...registryItems, ...localItems]) {
-        const existing = merged.get(item.name);
-        if (existing) {
-          if (existing.scope !== item.scope) {
-            existing.scope = existing.scope.includes(item.scope) ? existing.scope : `${existing.scope} + ${item.scope}`;
-          }
-          if (item.source === 'registry') {
-            Object.assign(existing, { ...item, scope: existing.scope });
-          }
-        } else {
-          merged.set(item.name, { ...item });
-        }
-      }
-      setProjectSkills([...merged.values()]);
-    } catch { setProjectSkills([]); }
-  }, [projectPath]);
-
-  // Git operations
-  const gitAction = async (action: string, extra?: any) => {
-    setGitLoading(true);
-    setGitResult(null);
-    try {
-      const res = await fetch('/api/git', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action, dir: projectPath, ...extra }),
-      });
-      const data = await res.json();
-      setGitResult(data);
-      if (data.ok) fetchGitInfo();
-    } catch (e: any) {
-      setGitResult({ error: e.message });
-    }
-    setGitLoading(false);
-  };
-
-  // Load essential data on mount (git + file tree only)
-  useEffect(() => {
-    setSelectedFile(null);
-    setFileContent(null);
-    setGitResult(null);
-    setCommitMsg('');
-    // Fetch git info and file tree in parallel
-    fetchGitInfo();
-    fetchTree();
-    // Fetch project-level fixed session
-    fetchBoundSession();
-  }, [projectPath, fetchGitInfo, fetchTree]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const fetchBoundSession = useCallback(() => {
-    fetch(`/api/project-sessions?projectPath=${encodeURIComponent(projectPath)}`)
-      .then(r => r.json())
-      .then(data => {
-        if (data?.fixedSessionId) setBoundSession({ sessionId: data.fixedSessionId });
-        else setBoundSession(null);
-      })
-      .catch(() => {});
-  }, [projectPath]);
-
-  // Listen for session binding changes (from SessionView or other components)
-  useEffect(() => {
-    const handler = () => fetchBoundSession();
-    window.addEventListener('forge:session-bound', handler);
-    return () => window.removeEventListener('forge:session-bound', handler);
-  }, [fetchBoundSession]);
-
-  // Lazy load tab-specific data only when switching to that tab
-  useEffect(() => {
-    if (projectTab === 'skills') fetchProjectSkills();
-    if (projectTab === 'pipelines') fetchPipelineBindings();
-    if (projectTab === 'claudemd') fetchClaudeMd();
-  }, [projectTab, fetchProjectSkills, fetchPipelineBindings, fetchClaudeMd]);
-
-  // Auto-refresh pipeline runs while any is running
-  useEffect(() => {
-    if (projectTab !== 'pipelines') return;
-    const hasRunning = pipelineRuns.some(r => r.status === 'running');
-    if (!hasRunning) return;
-    const timer = setInterval(fetchPipelineBindings, 4000);
-    return () => clearInterval(timer);
-  }, [projectTab, pipelineRuns, fetchPipelineBindings]);
-
-  return (
-    <>
-      {/* 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)]">{projectName}</span>
-          {gitInfo?.branch && (
-            <div className="relative">
-              <select
-                value={gitInfo.branch}
-                onChange={async (e) => {
-                  const branch = e.target.value;
-                  if (branch === gitInfo.branch) return;
-                  try {
-                    await fetch('/api/git', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'checkout', dir: projectPath, branch }) });
-                    fetchGitInfo(); fetchTree();
-                  } catch {}
-                }}
-                className="text-[9px] text-[var(--accent)] bg-[var(--accent)]/10 px-1.5 py-0.5 rounded border-none cursor-pointer appearance-none pr-4 focus:outline-none"
-                style={{ backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'8\' height=\'8\' viewBox=\'0 0 8 8\'%3E%3Cpath d=\'M0 2l4 4 4-4z\' fill=\'%2358a6ff\'/%3E%3C/svg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 4px center' }}
-              >
-                {(gitInfo.branches || []).map(b => (
-                  <option key={b.name} value={b.name}>{b.name}{b.current ? ' ●' : ''}</option>
-                ))}
-              </select>
-            </div>
-          )}
-          {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 with agent selection */}
-            <AgentTerminalButton projectPath={projectPath} projectName={projectName} />
-            <button
-              onClick={() => { fetchGitInfo(); fetchTree(); 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 flex items-center gap-2 flex-wrap">
-          <span>{projectPath}</span>
-          {gitInfo?.remote && (
-            <span>{gitInfo.remote.replace(/^https?:\/\//, '').replace(/^git@github\.com:/, 'github.com/').replace(/\.git$/, '')}</span>
-          )}
-          {/* Fixed session: show current or "set session" */}
-          <span className="inline-flex items-center gap-1 px-1.5 py-0 rounded bg-[#f0883e]/10 text-[#f0883e] relative">
-            {boundSession?.sessionId ? (
-              <>
-                <span className="text-[8px]">session:</span>
-                <button onClick={() => {
-                  fetch(`/api/claude-sessions/${encodeURIComponent(projectName)}`)
-                    .then(r => r.json())
-                    .then(data => { if (Array.isArray(data)) setAvailableSessions(data.map((s: any) => ({ id: s.sessionId || s.id, modified: s.modified || '', size: s.size || 0 }))); })
-                    .catch(() => {});
-                  setShowSessionPicker(!showSessionPicker);
-                }}
-                  className="font-mono text-[8px] hover:text-white underline decoration-dotted" title="Click to change">
-                  {boundSession.sessionId.slice(0, 8)}
-                </button>
-                <button onClick={() => navigator.clipboard.writeText(boundSession.sessionId)}
-                  className="text-[7px] hover:text-white" title={boundSession.sessionId}>copy</button>
-              </>
-            ) : (
-              <button onClick={() => {
-                fetch(`/api/claude-sessions/${encodeURIComponent(projectName)}`)
-                  .then(r => r.json())
-                  .then(data => { if (Array.isArray(data)) setAvailableSessions(data.map((s: any) => ({ id: s.sessionId || s.id, modified: s.modified || '', size: s.size || 0 }))); })
-                  .catch(() => {});
-                setShowSessionPicker(!showSessionPicker);
-              }}
-                className="text-[8px] hover:text-white underline decoration-dotted">
-                set session
-              </button>
-            )}
-            {/* Session picker dropdown */}
-            {showSessionPicker && (
-              <div className="absolute top-full left-0 mt-1 z-50 bg-[var(--bg-primary)] border border-[var(--border)] rounded-lg shadow-xl p-2 min-w-[280px]"
-                onClick={e => e.stopPropagation()}>
-                <div className="text-[9px] text-[var(--text-secondary)] mb-1.5 font-medium">{boundSession?.sessionId ? 'Change session' : 'Select session'}</div>
-                <div className="max-h-48 overflow-y-auto space-y-1">
-                  {availableSessions.map(s => (
-                    <button key={s.id} onClick={async () => {
-                      try {
-                        await fetch('/api/project-sessions', {
-                          method: 'POST',
-                          headers: { 'Content-Type': 'application/json' },
-                          body: JSON.stringify({ projectPath, fixedSessionId: s.id }),
-                        });
-                        setBoundSession({ sessionId: s.id });
-                        window.dispatchEvent(new Event('forge:session-bound'));
-                      } catch {}
-                      setShowSessionPicker(false);
-                    }}
-                      className={`w-full text-left px-2 py-1.5 rounded text-[9px] flex items-center gap-2 ${
-                        s.id === boundSession?.sessionId
-                          ? 'bg-[#f0883e]/20 text-[#f0883e]'
-                          : 'hover:bg-[var(--bg-secondary)] text-[var(--text-secondary)]'
-                      }`}>
-                      <span className="font-mono">{s.id.slice(0, 8)}</span>
-                      {s.id === boundSession?.sessionId && <span className="text-[7px]">current</span>}
-                      {s.modified && <span className="text-[8px] opacity-60">{(() => { const d = Date.now() - new Date(s.modified).getTime(); return d < 3600000 ? `${Math.floor(d/60000)}m ago` : d < 86400000 ? `${Math.floor(d/3600000)}h ago` : new Date(s.modified).toLocaleDateString(); })()}</span>}
-                      {s.size > 0 && <span className="text-[8px] opacity-60">{s.size < 1048576 ? `${(s.size/1024).toFixed(0)}KB` : `${(s.size/1048576).toFixed(1)}MB`}</span>}
-                    </button>
-                  ))}
-                  {availableSessions.length === 0 && <div className="text-[9px] text-[var(--text-secondary)] px-2 py-1">No sessions found</div>}
-                </div>
-                <button onClick={() => setShowSessionPicker(false)}
-                  className="w-full mt-1.5 text-[8px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] pt-1 border-t border-[var(--border)]">Close</button>
-              </div>
-            )}
-          </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('workspace')}
-              className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                projectTab === 'workspace' ? 'bg-[var(--accent)]/20 text-[var(--accent)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-              }`}
-            >🔨 Workspace</button>
-            <button
-              onClick={() => setProjectTab('sessions')}
-              className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                projectTab === 'sessions' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-              }`}
-            >Sessions</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')}
-              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>
-            <button
-              onClick={() => setProjectTab('pipelines')}
-              className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                projectTab === 'pipelines' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-              }`}
-            >
-              Pipelines
-              {pipelineBindings.length > 0 && <span className="ml-1 text-[8px] text-[var(--text-secondary)]">({pipelineBindings.length})</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>
-      )}
-
-      {/* Workspace tab */}
-      {projectTab === 'workspace' && (
-        <div className="flex-1 flex min-h-0 overflow-hidden">
-          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
-            <WorkspaceViewLazy
-              ref={wsViewRef}
-              projectPath={projectPath}
-              projectName={projectName}
-              onClose={() => setProjectTab('code')}
-            />
-          </Suspense>
-        </div>
-      )}
-
-      {/* Sessions tab */}
-      {projectTab === 'sessions' && (
-        <div className="flex-1 flex min-h-0 overflow-hidden">
-          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
-            <SessionViewLazy
-              projectName={projectName}
-              projects={[{ name: projectName, path: projectPath, language: null }]}
-              singleProject
-            />
-          </Suspense>
-        </div>
-      )}
-
-      {/* Code content area */}
-      {projectTab === 'code' && <div className="flex-1 flex min-h-0 overflow-hidden">
-        {/* File tree + search */}
-        <div style={{ width: sidebarWidth }} className="flex flex-col shrink-0">
-          {/* Search input */}
-          <div className="p-1 border-b border-[var(--border)]">
-            <input
-              value={codeSearch}
-              onChange={e => setCodeSearch(e.target.value)}
-              onKeyDown={async e => {
-                if (e.key === 'Enter' && codeSearch.trim()) {
-                  setCodeSearching(true);
-                  try {
-                    const res = await fetch(`/api/code?dir=${encodeURIComponent(projectPath)}&search=${encodeURIComponent(codeSearch.trim())}`);
-                    const data = await res.json();
-                    setCodeSearchResults(data.matches || []);
-                  } catch { setCodeSearchResults([]); }
-                  setCodeSearching(false);
-                }
-                if (e.key === 'Escape') { setCodeSearch(''); setCodeSearchResults([]); }
-              }}
-              placeholder="Search code... (Enter)"
-              className="w-full text-[10px] bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] placeholder-[var(--text-secondary)]"
-            />
-          </div>
-          {/* Search results */}
-          {codeSearchResults.length > 0 && (
-            <div className="overflow-y-auto border-b border-[var(--border)] max-h-60">
-              <div className="px-2 py-0.5 text-[8px] text-[var(--text-secondary)] bg-[var(--bg-tertiary)] sticky top-0 flex items-center justify-between">
-                <span>{codeSearchResults.length} results for "{codeSearch}"</span>
-                <button onClick={() => { setCodeSearch(''); setCodeSearchResults([]); }} className="text-[var(--text-secondary)] hover:text-[var(--text-primary)]">✕</button>
-              </div>
-              {codeSearchResults.map((r, i) => (
-                <div key={i} onClick={() => openFile(r.file)} className="px-2 py-0.5 cursor-pointer hover:bg-[var(--bg-tertiary)] border-b border-[var(--border)]/30">
-                  <div className="text-[9px] text-[var(--accent)] truncate">{r.file}:{r.line}</div>
-                  <div className="text-[8px] text-[var(--text-secondary)] font-mono truncate">{r.content}</div>
-                </div>
-              ))}
-            </div>
-          )}
-          {codeSearching && <div className="px-2 py-1 text-[9px] text-[var(--text-secondary)]">Searching...</div>}
-          {/* File tree */}
-          <div className="overflow-y-auto flex-1 p-1">
-            {fileTree.map((node: any) => (
-              <FileTreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} />
-            ))}
-          </div>
-        </div>
-
-        {/* Sidebar resize handle */}
-        <div
-          onMouseDown={onSidebarDragStart}
-          className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
-        />
-
-        {/* File content */}
-        <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 && fileImageUrl ? (
-            <>
-              <div className="px-3 py-1 border-b border-[var(--border)] text-[10px] text-[var(--text-secondary)] sticky top-0 bg-[var(--bg-primary)] z-10">{selectedFile}</div>
-              <div className="flex-1 flex items-center justify-center p-4 overflow-auto">
-                <img src={fileImageUrl} alt={selectedFile} className="max-w-full max-h-full object-contain rounded" />
-              </div>
-            </>
-          ) : selectedFile && fileBinaryInfo ? (
-            <>
-              <div className="px-3 py-1 border-b border-[var(--border)] text-[10px] text-[var(--text-secondary)] sticky top-0 bg-[var(--bg-primary)] z-10">{selectedFile}</div>
-              <div className="flex-1 flex flex-col items-center justify-center gap-2 text-[var(--text-secondary)]">
-                <span className="text-2xl">📄</span>
-                <span className="text-xs">{fileBinaryInfo.fileType ? fileBinaryInfo.fileType.toUpperCase() + ' file' : 'File'} — {fileBinaryInfo.sizeLabel}</span>
-                {fileBinaryInfo.message && <span className="text-[10px]">{fileBinaryInfo.message}</span>}
-                <span className="text-[10px]">Binary file cannot be displayed</span>
-              </div>
-            </>
-          ) : selectedFile && fileContent !== null ? (
-            <>
-              <div className="px-3 py-1 border-b border-[var(--border)] text-[10px] text-[var(--text-secondary)] sticky top-0 bg-[var(--bg-primary)] z-10">{selectedFile}</div>
-              <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 style={{ width: sidebarWidth }} className="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' ? '' : projectPath)}
-                          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>
-
-          {/* Sidebar resize handle */}
-          <div
-            onMouseDown={onSidebarDragStart}
-            className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
-          />
-
-          {/* 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' && (
-        <div className="flex-1 flex min-h-0 overflow-hidden">
-          {/* Left: templates list */}
-          <div style={{ width: sidebarWidth }} className="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); }}
-                          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); }}
-                          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>
-
-          {/* Sidebar resize handle */}
-          <div
-            onMouseDown={onSidebarDragStart}
-            className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
-          />
-
-          {/* 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(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>
-      )}
-
-      {/* Pipelines tab */}
-      {projectTab === 'pipelines' && (
-        <div className="flex-1 overflow-auto p-4 space-y-4">
-          {/* Bound workflows */}
-          <div className="space-y-3">
-            <div className="flex items-center gap-2">
-              <span className="text-xs font-semibold text-[var(--text-primary)]">Bound Pipelines</span>
-              <button
-                onClick={() => setShowAddPipeline(v => !v)}
-                className="text-[9px] px-2 py-0.5 bg-[var(--accent)] text-white rounded hover:opacity-90 ml-auto"
-              >+ Add</button>
-            </div>
-
-            {/* Add pipeline form */}
-            {showAddPipeline && (
-              <div className="border border-[var(--border)] rounded p-2 space-y-2">
-                {availableWorkflows.filter(w => !pipelineBindings.find(b => b.workflowName === w.name)).map(w => (
-                  <button
-                    key={w.name}
-                    onClick={async () => {
-                      await fetch('/api/project-pipelines', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ action: 'add', projectPath, projectName, workflowName: w.name }),
-                      });
-                      setShowAddPipeline(false);
-                      fetchPipelineBindings();
-                    }}
-                    className="w-full text-left px-2 py-1.5 rounded hover:bg-[var(--bg-tertiary)] text-[10px] flex items-center gap-2"
-                  >
-                    {w.builtin && <span className="text-[7px] text-[var(--text-secondary)]">⚙</span>}
-                    <span className="text-[var(--text-primary)]">{w.name}</span>
-                    {w.description && <span className="text-[var(--text-secondary)] truncate ml-auto text-[8px]">{w.description}</span>}
-                  </button>
-                ))}
-                {availableWorkflows.filter(w => !pipelineBindings.find(b => b.workflowName === w.name)).length === 0 && (
-                  <p className="text-[9px] text-[var(--text-secondary)] p-2">All workflows already bound</p>
-                )}
-              </div>
-            )}
-
-            {/* Bound pipeline list */}
-            {pipelineBindings.length === 0 ? (
-              <p className="text-[10px] text-[var(--text-secondary)]">No pipelines bound. Click + Add to attach a workflow.</p>
-            ) : (
-              pipelineBindings.map(b => (
-                <div key={b.workflowName} className="border border-[var(--border)] rounded p-3 space-y-2">
-                  <div className="flex items-center gap-2">
-                    <span className="text-[11px] font-semibold text-[var(--text-primary)]">{b.workflowName}</span>
-                    <label className="flex items-center gap-1 text-[9px] text-[var(--text-secondary)] cursor-pointer ml-auto">
-                      <input type="checkbox" checked={b.enabled} onChange={async (e) => {
-                        await fetch('/api/project-pipelines', {
-                          method: 'POST',
-                          headers: { 'Content-Type': 'application/json' },
-                          body: JSON.stringify({ action: 'update', projectPath, workflowName: b.workflowName, enabled: e.target.checked }),
-                        });
-                        fetchPipelineBindings();
-                      }} className="accent-[var(--accent)]" />
-                      Enabled
-                    </label>
-                    <div className="relative">
-                      <button
-                        onClick={() => {
-                          const isIssueWf = b.workflowName === 'issue-auto-fix' || b.workflowName === 'issue-fix-and-review';
-                          if (!isIssueWf) {
-                            triggerProjectPipeline(b.workflowName, triggerInput);
-                          } else {
-                            setRunMenu(runMenu === b.workflowName ? null : b.workflowName);
-                            setIssueInput('');
-                          }
-                        }}
-                        className="text-[9px] px-2 py-0.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white"
-                      >Run</button>
-                      {runMenu === b.workflowName && (
-                        <div className="absolute top-full right-0 mt-1 z-20 bg-[var(--bg-secondary)] border border-[var(--border)] rounded shadow-lg p-2 space-y-2 w-[200px]">
-                          <button
-                            onClick={async () => {
-                              setRunMenu(null);
-                              try {
-                                const res = await fetch('/api/project-pipelines', {
-                                  method: 'POST',
-                                  headers: { 'Content-Type': 'application/json' },
-                                  body: JSON.stringify({ action: 'scan-now', projectPath, projectName, workflowName: b.workflowName }),
-                                });
-                                const data = await res.json();
-                                if (data.error) alert(`Scan error: ${data.error}`);
-                                else alert(`Scanned ${data.total} issues, triggered ${data.triggered} fix${data.pending > 0 ? ` (${data.pending} more pending)` : ''}`);
-                                fetchPipelineBindings();
-                              } catch { alert('Scan failed'); }
-                            }}
-                            className="w-full text-[9px] px-2 py-1.5 rounded border border-green-500/50 text-green-400 hover:bg-green-500/10 font-medium"
-                          >Auto Scan — fix all new issues</button>
-                          <div className="border-t border-[var(--border)]/50 my-1" />
-                          <div className="flex items-center gap-1">
-                            <input
-                              type="text"
-                              value={issueInput}
-                              onChange={e => setIssueInput(e.target.value)}
-                              placeholder="Issue #"
-                              className="flex-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[9px] text-[var(--text-primary)]"
-                              onKeyDown={e => {
-                                if (e.key === 'Enter' && issueInput.trim()) {
-                                  setRunMenu(null);
-                                  triggerProjectPipeline(b.workflowName, {
-                                    ...triggerInput,
-                                    issue_id: issueInput.trim(),
-                                    base_branch: b.config.baseBranch || 'auto-detect',
-                                  });
-                                }
-                              }}
-                              autoFocus
-                            />
-                            <button
-                              onClick={() => {
-                                if (!issueInput.trim()) return;
-                                setRunMenu(null);
-                                triggerProjectPipeline(b.workflowName, {
-                                  ...triggerInput,
-                                  issue_id: issueInput.trim(),
-                                  base_branch: b.config.baseBranch || 'auto-detect',
-                                });
-                              }}
-                              className="text-[9px] px-2 py-1 bg-[var(--accent)] text-white rounded hover:opacity-80"
-                            >Fix</button>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                    <button
-                      onClick={async () => {
-                        if (!confirm(`Remove "${b.workflowName}" from this project?`)) return;
-                        await fetch('/api/project-pipelines', {
-                          method: 'POST',
-                          headers: { 'Content-Type': 'application/json' },
-                          body: JSON.stringify({ action: 'remove', projectPath, workflowName: b.workflowName }),
-                        });
-                        fetchPipelineBindings();
-                      }}
-                      className="text-[9px] text-[var(--red)] hover:underline"
-                    >Remove</button>
-                  </div>
-                  {/* Schedule config */}
-                  <div className="flex items-center gap-2 text-[9px]">
-                    <span className="text-[var(--text-secondary)]">Schedule:</span>
-                    <select
-                      value={b.config.interval || 0}
-                      onChange={async (e) => {
-                        const interval = Number(e.target.value);
-                        const newConfig = { ...b.config, interval };
-                        await fetch('/api/project-pipelines', {
-                          method: 'POST',
-                          headers: { 'Content-Type': 'application/json' },
-                          body: JSON.stringify({ action: 'update', projectPath, workflowName: b.workflowName, config: newConfig }),
-                        });
-                        fetchPipelineBindings();
-                      }}
-                      className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded px-1.5 py-0.5 text-[9px] text-[var(--text-primary)]"
-                    >
-                      <option value={0}>Manual only</option>
-                      <option value={15}>Every 15 min</option>
-                      <option value={30}>Every 30 min</option>
-                      <option value={60}>Every 1 hour</option>
-                      <option value={120}>Every 2 hours</option>
-                      <option value={360}>Every 6 hours</option>
-                      <option value={720}>Every 12 hours</option>
-                      <option value={1440}>Every 24 hours</option>
-                    </select>
-                    {b.config.interval > 0 && b.nextRunAt && (
-                      <span className="text-[8px] text-[var(--text-secondary)]">
-                        Next: {new Date(b.nextRunAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
-                      </span>
-                    )}
-                    {b.lastRunAt && (
-                      <span className="text-[8px] text-[var(--text-secondary)] ml-auto">
-                        Last: {new Date(b.lastRunAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
-                      </span>
-                    )}
-                  </div>
-                  {/* Issue scan config (for issue-fix-and-review workflow) */}
-                  {(b.workflowName === 'issue-auto-fix' || b.workflowName === 'issue-fix-and-review') && (
-                    <div className="space-y-1.5 pt-1 border-t border-[var(--border)]/30">
-                      <div className="text-[8px] text-[var(--text-secondary)]">
-                        {b.config.interval > 0
-                          ? 'Scheduled mode: auto-scans GitHub issues and fixes new ones'
-                          : 'Requires: gh auth login (run in terminal first)'}
-                      </div>
-                      <div className="flex items-center gap-2 text-[9px]">
-                          <label className="text-[var(--text-secondary)]">Labels:</label>
-                          <input
-                            type="text"
-                            defaultValue={(b.config.labels || []).join(', ')}
-                            placeholder="bug, autofix (empty = all)"
-                            onBlur={async (e) => {
-                              const labels = e.target.value.split(',').map((s: string) => s.trim()).filter(Boolean);
-                              const newConfig = { ...b.config, labels };
-                              await fetch('/api/project-pipelines', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ action: 'update', projectPath, workflowName: b.workflowName, config: newConfig }),
-                              });
-                              fetchPipelineBindings();
-                            }}
-                            className="flex-1 bg-[var(--bg-secondary)] border border-[var(--border)] rounded px-1.5 py-0.5 text-[9px] text-[var(--text-primary)]"
-                          />
-                          <label className="text-[var(--text-secondary)]">Base:</label>
-                          <input
-                            type="text"
-                            defaultValue={b.config.baseBranch || ''}
-                            placeholder="auto-detect"
-                            onBlur={async (e) => {
-                              const newConfig = { ...b.config, baseBranch: e.target.value.trim() || undefined };
-                              await fetch('/api/project-pipelines', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ action: 'update', projectPath, workflowName: b.workflowName, config: newConfig }),
-                              });
-                              fetchPipelineBindings();
-                            }}
-                            className="w-20 bg-[var(--bg-secondary)] border border-[var(--border)] rounded px-1.5 py-0.5 text-[9px] text-[var(--text-primary)]"
-                          />
-                        </div>
-                    </div>
-                  )}
-                </div>
-              ))
-            )}
-          </div>
-
-          {/* Execution history */}
-          {pipelineRuns.length > 0 && (
-            <div className="border-t border-[var(--border)] pt-3">
-              <div className="text-[9px] text-[var(--text-secondary)] uppercase mb-2">Execution History</div>
-              <div className="border border-[var(--border)] rounded overflow-hidden">
-                {pipelineRuns.map(run => (
-                  <div key={run.id} className="border-b border-[var(--border)]/30 last:border-b-0">
-                    <div className="flex items-start gap-2 px-3 py-2 text-[10px]">
-                      <span className={`shrink-0 mt-0.5 ${
-                        run.status === 'done' ? 'text-green-400' : run.status === 'failed' ? 'text-red-400' : run.status === 'skipped' ? 'text-gray-400' : 'text-yellow-400'
-                      }`}>{run.status === 'running' ? '●' : '●'}</span>
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2">
-                          <span className="text-[var(--text-primary)] font-medium">{run.workflowName}</span>
-                          {run.dedupKey && (
-                            <span className="text-[8px] text-[var(--accent)] font-mono">{run.dedupKey.replace('issue:', '#')}</span>
-                          )}
-                          <button
-                            onClick={async () => {
-                              if (expandedRunId === run.pipelineId) {
-                                setExpandedRunId(null);
-                                setExpandedPipeline(null);
-                              } else {
-                                setExpandedRunId(run.pipelineId);
-                                const res = await fetch(`/api/pipelines/${run.pipelineId}`);
-                                if (res.ok) setExpandedPipeline(await res.json());
-                              }
-                            }}
-                            className={`text-[8px] font-mono hover:underline ${expandedRunId === run.pipelineId ? 'text-[var(--accent)] font-bold' : 'text-[var(--accent)]'}`}
-                            title="Expand / View in Pipelines"
-                          >{run.status === 'running' ? '▾ ' : ''}{run.pipelineId.slice(0, 8)}</button>
-                          <button
-                            onClick={() => window.dispatchEvent(new CustomEvent('forge:navigate', { detail: { view: 'pipelines', pipelineId: run.pipelineId } }))}
-                            className="text-[7px] text-[var(--text-secondary)] hover:text-[var(--accent)]"
-                            title="Open in Pipeline page"
-                          >↗</button>
-                          <span className="text-[8px] text-[var(--text-secondary)] ml-auto">{new Date(run.createdAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
-                        </div>
-                        {!expandedRunId && run.summary && (
-                          <pre className="text-[9px] text-[var(--text-secondary)] mt-1 whitespace-pre-wrap break-words line-clamp-3">{run.summary}</pre>
-                        )}
-                      </div>
-                      <div className="flex items-center gap-1 shrink-0">
-                        {run.status === 'running' && (
-                          <button
-                            onClick={async () => {
-                              await fetch(`/api/pipelines/${run.pipelineId}`, {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ action: 'cancel' }),
-                              });
-                              fetchPipelineBindings();
-                            }}
-                            className="text-[8px] text-red-400 hover:underline"
-                          >Cancel</button>
-                        )}
-                        {run.status === 'failed' && run.dedupKey && (
-                          <button
-                            onClick={async () => {
-                              await fetch('/api/project-pipelines', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ action: 'reset-dedup', projectPath, workflowName: run.workflowName, dedupKey: run.dedupKey }),
-                              });
-                              await fetch('/api/project-pipelines', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ action: 'delete-run', id: run.id }),
-                              });
-                              fetchPipelineBindings();
-                            }}
-                            className="text-[8px] text-[var(--accent)] hover:underline"
-                          >Retry</button>
-                        )}
-                        <button
-                          onClick={async () => {
-                            if (!confirm('Delete this run?')) return;
-                            await fetch('/api/project-pipelines', {
-                              method: 'POST',
-                              headers: { 'Content-Type': 'application/json' },
-                              body: JSON.stringify({ action: 'delete-run', id: run.id }),
-                            });
-                            if (expandedRunId === run.pipelineId) { setExpandedRunId(null); setExpandedPipeline(null); }
-                            fetchPipelineBindings();
-                          }}
-                          className="text-[8px] text-[var(--text-secondary)] hover:text-[var(--red)]"
-                        >×</button>
-                      </div>
-                    </div>
-                    {/* Expanded inline pipeline view */}
-                    {expandedRunId === run.pipelineId && expandedPipeline && (
-                      <Suspense fallback={<div className="p-2 text-[9px] text-[var(--text-secondary)]">Loading...</div>}>
-                        <InlinePipelineView
-                          pipeline={expandedPipeline}
-                          onRefresh={async () => {
-                            const res = await fetch(`/api/pipelines/${run.pipelineId}`);
-                            if (res.ok) setExpandedPipeline(await res.json());
-                          }}
-                        />
-                      </Suspense>
-                    )}
-                  </div>
-                ))}
-              </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="overflow-y-auto border-b border-[var(--border)]" style={{ height: changesHeight }}>
-                <div className="px-3 py-1 text-[9px] text-[var(--text-secondary)] bg-[var(--bg-tertiary)] sticky top-0 flex items-center gap-1 cursor-pointer z-10" onClick={() => {
-                  setChangesExpanded(!changesExpanded);
-                  setChangesHeight(changesExpanded ? 120 : Math.min(400, gitInfo.changes.length * 22 + 24));
-                }}>
-                  <span>{changesExpanded ? '▼' : '▶'}</span>
-                  <span>{gitInfo.changes.length} changes</span>
-                  <button onClick={(e) => { e.stopPropagation(); fetchGitInfo(); }} className="ml-auto text-[8px] hover:text-[var(--accent)]" title="Refresh">↻</button>
-                </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>
-              {/* Drag handle to resize changes list */}
-              <div
-                className="h-1 cursor-ns-resize hover:bg-[var(--accent)]/30 border-b border-[var(--border)]"
-                onMouseDown={(e) => {
-                  e.preventDefault();
-                  changesResizeRef.current = { startY: e.clientY, origH: changesHeight };
-                  const onMove = (ev: MouseEvent) => {
-                    if (!changesResizeRef.current) return;
-                    setChangesHeight(Math.max(60, Math.min(600, changesResizeRef.current.origH + ev.clientY - changesResizeRef.current.startY)));
-                  };
-                  const onUp = () => { changesResizeRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
-                  window.addEventListener('mousemove', onMove);
-                  window.addEventListener('mouseup', onUp);
-                }}
-              />
-            </>
-          )}
-
-          {/* 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>
-      )}
-
-    </>
-  );
-});
-
-// Simple file tree node
-const FileTreeNode = memo(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>
-  );
-});
-
-// ─── Agent Terminal Button ───────────────────────────────
-
-function AgentTerminalButton({ projectPath, projectName }: { projectPath: string; projectName: string }) {
-  const [agents, setAgents] = useState<{ id: string; name: string; detected?: boolean; isProfile?: boolean; base?: string; backendType?: string; env?: Record<string, string>; model?: string }[]>([]);
-  const [showMenu, setShowMenu] = useState(false);
-  const [pickerInfo, setPickerInfo] = useState<{ agentId: string; agentName: string; env?: Record<string, string>; model?: string; supportsSession: boolean; currentSessionId: string | null } | null>(null);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    fetch('/api/agents').then(r => r.json())
-      .then(d => setAgents(d.agents || []))
-      .catch(() => {});
-  }, []);
-
-  useEffect(() => {
-    if (!showMenu) return;
-    const h = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as globalThis.Node)) setShowMenu(false); };
-    document.addEventListener('mousedown', h);
-    return () => document.removeEventListener('mousedown', h);
-  }, [showMenu]);
-
-  const openTerminal = (agentId: string, resumeMode?: boolean, sessionId?: string, env?: Record<string, string>, model?: string) => {
-    setPickerInfo(null);
-    setShowMenu(false);
-    const profileEnv: Record<string, string> = { ...(env || {}) };
-    if (model) profileEnv.CLAUDE_MODEL = model;
-    window.dispatchEvent(new CustomEvent('forge:open-terminal', {
-      detail: { projectPath, projectName, agentId, resumeMode, sessionId, profileEnv: Object.keys(profileEnv).length > 0 ? profileEnv : undefined },
-    }));
-  };
-
-  const handleAgentClick = async (a: typeof agents[0]) => {
-    setShowMenu(false);
-    try {
-      const res = await fetch(`/api/agents?resolve=${encodeURIComponent(a.id)}`);
-      const info = await res.json();
-      // Resolve current session (fixedSession for this project)
-      let currentSessionId: string | null = null;
-      if (info.supportsSession) {
-        try {
-          const { resolveFixedSession } = await import('@/lib/session-utils');
-          currentSessionId = await resolveFixedSession(projectPath) || null;
-        } catch {}
-      }
-      setPickerInfo({
-        agentId: a.id, agentName: a.name,
-        env: info.env, model: info.model,
-        supportsSession: info.supportsSession ?? true,
-        currentSessionId,
-      });
-    } catch {
-      openTerminal(a.id);
-    }
-  };
-
-  const allAgents = agents.filter(a => a.detected !== false || a.isProfile);
-
-  return (
-    <>
-      <div ref={ref} className="relative">
-        <div className="flex items-center">
-          <button
-            onClick={() => handleAgentClick({ id: 'claude', name: 'Claude' })}
-            className="text-[9px] px-2 py-0.5 border border-[var(--accent)] text-[var(--accent)] rounded-l hover:bg-[var(--accent)] hover:text-white transition-colors"
-            title="Open terminal"
-          >
-            Terminal
-          </button>
-          {allAgents.length > 1 && (
-            <button
-              onClick={() => setShowMenu(v => !v)}
-              className="text-[9px] px-1 py-0.5 border border-l-0 border-[var(--accent)] text-[var(--accent)] rounded-r hover:bg-[var(--accent)] hover:text-white transition-colors"
-            >
-              ▾
-            </button>
-          )}
-        </div>
-        {showMenu && (
-          <div className="absolute right-0 top-full mt-1 w-44 rounded border border-[var(--border)] shadow-lg z-40 overflow-hidden" style={{ background: 'var(--bg-primary)' }}>
-            {allAgents.map(a => (
-              <button key={a.id} onClick={() => handleAgentClick(a)}
-                className="w-full flex items-center gap-2 px-3 py-1.5 text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] text-left">
-                <span className="font-bold w-4 text-center text-[var(--accent)]">
-                  {a.isProfile ? '●' : a.id === 'claude' ? 'C' : a.id === 'codex' ? 'X' : a.id === 'aider' ? 'A' : a.id.charAt(0).toUpperCase()}
-                </span>
-                <span>{a.name}</span>
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Unified Terminal Session Picker */}
-      {pickerInfo && (
-        <TerminalSessionPickerLazy
-          agentLabel={pickerInfo.agentName}
-          currentSessionId={pickerInfo.currentSessionId}
-          supportsSession={pickerInfo.supportsSession}
-          fetchSessions={() => fetchProjectSessions(projectName)}
-          onSelect={(sel) => {
-            if (sel.mode === 'new') {
-              openTerminal(pickerInfo.agentId, false, undefined, pickerInfo.env, pickerInfo.model);
-            } else {
-              openTerminal(pickerInfo.agentId, true, sel.sessionId, pickerInfo.env, pickerInfo.model);
-            }
-          }}
-          onCancel={() => setPickerInfo(null)}
-        />
-      )}
-    </>
-  );
-}