@aion0/forge 0.5.30 → 0.5.32

package/RELEASE_NOTES.md

@@ -1,20 +1,8 @@
-# Forge v0.5.30
+# Forge v0.5.32
 
 Released: 2026-04-10
 
-## Changes since v0.5.29
+## Changes since v0.5.31
 
-### Features
-- feat: shrink trend chart, add GitHub-style heatmap and weekday chart
-- feat: richer usage statistics with charts
-- feat: auto-expand docked terminals based on count
-- feat: workspace terminal dock mode with grid layout
 
-### Bug Fixes
-- fix: preserve workspace terminal state across tab/project switches
-
-### Other
-- style: make project tab buttons more prominent
-
-
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.5.29...v0.5.30
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.5.31...v0.5.32

package/components/DocsViewer.tsx

@@ -28,14 +28,19 @@ interface FileNode {
 
 // ─── File Tree ───────────────────────────────────────────
 
-function TreeNode({ node, depth, selected, onSelect }: {
+function TreeNode({ node, depth, selected, onSelect, collapseVersion = 0 }: {
   node: FileNode;
   depth: number;
   selected: string | null;
   onSelect: (path: string) => void;
+  collapseVersion?: number;
 }) {
   const [expanded, setExpanded] = useState(depth < 1);
 
+  useEffect(() => {
+    if (collapseVersion > 0) setExpanded(false);
+  }, [collapseVersion]);
+
   if (node.type === 'dir') {
     return (
       <div>
@@ -48,7 +53,7 @@ function TreeNode({ node, depth, selected, onSelect }: {
           <span className="text-[var(--text-primary)]">{node.name}</span>
         </button>
         {expanded && node.children?.map(child => (
-          <TreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} />
+          <TreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} collapseVersion={collapseVersion} />
         ))}
       </div>
     );
@@ -107,6 +112,7 @@ export default function DocsViewer() {
   const [content, setContent] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [search, setSearch] = useState('');
+  const [treeCollapseVersion, setTreeCollapseVersion] = useState(0);
   const [terminalHeight, setTerminalHeight] = useState(250);
   const [docsAgent, setDocsAgent] = useState('');
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -387,14 +393,19 @@ export default function DocsViewer() {
             </div>
 
             {/* Search */}
-            <div className="p-2 border-b border-[var(--border)]">
+            <div className="p-2 border-b border-[var(--border)] flex items-center gap-2">
               <input
                 type="text"
                 placeholder="Search..."
                 value={search}
                 onChange={e => setSearch(e.target.value)}
-                className="w-full text-xs bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
+                className="flex-1 text-xs bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
               />
+              <button
+                onClick={() => setTreeCollapseVersion(v => v + 1)}
+                className="text-[10px] px-1.5 py-1 rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] shrink-0"
+                title="Collapse all folders"
+              >⇱</button>
             </div>
 
             {/* Tree / search results */}
@@ -419,7 +430,7 @@ export default function DocsViewer() {
                 )
               ) : (
                 (hideUnsupported ? filterTree(tree) : tree).map(node => (
-                  <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFileInTab} />
+                  <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFileInTab} collapseVersion={treeCollapseVersion} />
                 ))
               )}
             </div>

package/components/ProjectDetail.tsx

@@ -67,6 +67,7 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
   const [gitLoading, setGitLoading] = useState(false);
   const [gitResult, setGitResult] = useState<{ ok?: boolean; error?: string } | null>(null);
   const [fileTree, setFileTree] = useState<any[]>([]);
+  const [treeCollapseVersion, setTreeCollapseVersion] = useState(0);
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [fileContent, setFileContent] = useState<string | null>(null);
   const [fileImageUrl, setFileImageUrl] = useState<string | null>(null);
@@ -713,10 +714,19 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
             </div>
           )}
           {codeSearching && <div className="px-2 py-1 text-[9px] text-[var(--text-secondary)]">Searching...</div>}
+          {/* File tree header */}
+          <div className="px-2 py-0.5 border-b border-[var(--border)] flex items-center justify-between">
+            <span className="text-[8px] text-[var(--text-secondary)] uppercase">Files</span>
+            <button
+              onClick={() => setTreeCollapseVersion(v => v + 1)}
+              className="text-[8px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+              title="Collapse all folders"
+            >⇱ collapse all</button>
+          </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} />
+              <FileTreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} collapseVersion={treeCollapseVersion} />
             ))}
           </div>
         </div>
@@ -1468,14 +1478,20 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
 });
 
 // Simple file tree node
-const FileTreeNode = memo(function FileTreeNode({ node, depth, selected, onSelect }: {
+const FileTreeNode = memo(function FileTreeNode({ node, depth, selected, onSelect, collapseVersion }: {
   node: { name: string; path: string; type: string; children?: any[] };
   depth: number;
   selected: string | null;
   onSelect: (path: string) => void;
+  collapseVersion: number;
 }) {
   const [expanded, setExpanded] = useState(depth < 1);
 
+  // When parent bumps collapseVersion, collapse this node
+  useEffect(() => {
+    if (collapseVersion > 0) setExpanded(false);
+  }, [collapseVersion]);
+
   if (node.type === 'dir') {
     return (
       <div>
@@ -1488,7 +1504,7 @@ const FileTreeNode = memo(function FileTreeNode({ node, depth, selected, onSelec
           <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} />
+          <FileTreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} collapseVersion={collapseVersion} />
         ))}
       </div>
     );

package/components/ProjectManager.tsx

@@ -26,7 +26,17 @@ function genTabId(): number { return Date.now() + Math.floor(Math.random() * 100
 
 export default function ProjectManager() {
   const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 240, minWidth: 140, maxWidth: 400 });
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsedState] = useState(false);
+  // Load collapsed preference from localStorage on mount
+  useEffect(() => {
+    try {
+      if (localStorage.getItem('forge.pm.sidebarCollapsed') === '1') setSidebarCollapsedState(true);
+    } catch {}
+  }, []);
+  const setSidebarCollapsed = useCallback((v: boolean) => {
+    setSidebarCollapsedState(v);
+    try { localStorage.setItem('forge.pm.sidebarCollapsed', v ? '1' : '0'); } catch {}
+  }, []);
   const [projects, setProjects] = useState<Project[]>([]);
   const [showClone, setShowClone] = useState(false);
   const [cloneUrl, setCloneUrl] = useState('');
@@ -103,40 +113,37 @@ export default function ProjectManager() {
 
   // Open a project in a tab
   const openProjectTab = useCallback((p: Project) => {
-    setTabs(prev => {
-      const existing = prev.find(t => t.projectPath === p.path);
-      if (existing) {
-        // Activate existing tab
-        const updated = prev.map(t => t.id === existing.id ? { ...t, mountedAt: Date.now() } : t);
-        setActiveTabId(existing.id);
-        persistTabs(updated, existing.id);
-        return updated;
-      }
-      // Create new tab
-      const newTab: ProjectTab = {
-        id: genTabId(),
-        projectPath: p.path,
-        projectName: p.name,
-        hasGit: p.hasGit,
-        mountedAt: Date.now(),
-      };
-      const updated = [...prev, newTab];
-      setActiveTabId(newTab.id);
-      persistTabs(updated, newTab.id);
-      return updated;
-    });
-  }, [persistTabs]);
+    const existing = tabs.find(t => t.projectPath === p.path);
+    if (existing) {
+      const updated = tabs.map(t => t.id === existing.id ? { ...t, mountedAt: Date.now() } : t);
+      setTabs(updated);
+      setActiveTabId(existing.id);
+      persistTabs(updated, existing.id);
+      return;
+    }
+    const newTab: ProjectTab = {
+      id: genTabId(),
+      projectPath: p.path,
+      projectName: p.name,
+      hasGit: p.hasGit,
+      mountedAt: Date.now(),
+    };
+    const updated = [...tabs, newTab];
+    setTabs(updated);
+    setActiveTabId(newTab.id);
+    persistTabs(updated, newTab.id);
+  }, [tabs, persistTabs]);
 
   const activateTab = useCallback((id: number) => {
+    const updated = tabs.map(t => t.id === id ? { ...t, mountedAt: Date.now() } : t);
+    setTabs(updated);
     setActiveTabId(id);
-    setTabs(prev => {
-      const updated = prev.map(t => t.id === id ? { ...t, mountedAt: Date.now() } : t);
-      persistTabs(updated, id);
-      return updated;
-    });
-  }, [persistTabs]);
+    persistTabs(updated, id);
+  }, [tabs, persistTabs]);
 
   const closeTab = useCallback((id: number) => {
+    const tab = tabs.find(t => t.id === id);
+    if (tab && !window.confirm(`Close "${tab.projectName}"?`)) return;
     setTabs(prev => {
       const idx = prev.findIndex(t => t.id === id);
       const updated = prev.filter(t => t.id !== id);
@@ -154,7 +161,7 @@ export default function ProjectManager() {
       }
       return updated;
     });
-  }, [activeTabId, persistTabs]);
+  }, [activeTabId, persistTabs, tabs]);
 
   // Determine which tabs to mount (max 5, LRU eviction)
   const mountedTabIds = new Set<number>();
@@ -213,7 +220,7 @@ export default function ProjectManager() {
 
   return (
     <div className="flex-1 flex min-h-0">
-      {/* Collapsed sidebar — narrow strip with project initials */}
+      {/* Collapsed sidebar — narrow strip with open tabs on top, all projects below */}
       {sidebarCollapsed && (
         <div className="w-10 border-r border-[var(--border)] flex flex-col shrink-0 overflow-hidden">
           <button onClick={() => setSidebarCollapsed(false)}
@@ -221,17 +228,46 @@ export default function ProjectManager() {
             title="Expand sidebar">
             ▶
           </button>
+          {/* Open tabs */}
+          {tabs.length > 0 && (
+            <>
+              <div className="text-[7px] text-[var(--text-secondary)] text-center py-0.5 border-y border-[var(--border)] bg-[var(--bg-tertiary)]">OPEN</div>
+              {tabs.map(t => {
+                const isActive = t.id === activeTabId;
+                const initial = t.projectName.slice(0, 2).toUpperCase();
+                return (
+                  <div key={`tab-${t.id}`} className="group relative">
+                    <button
+                      onClick={() => activateTab(t.id)}
+                      title={t.projectName}
+                      className={`w-full py-1.5 text-[9px] font-bold text-center border-l-2 ${
+                        isActive ? 'text-[var(--accent)] bg-[var(--accent)]/10 border-[var(--accent)]' : 'text-[var(--green)] border-transparent hover:bg-[var(--bg-secondary)]'
+                      }`}
+                    >
+                      {initial}
+                    </button>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); closeTab(t.id); }}
+                      className="absolute top-0 right-0 text-[8px] text-[var(--text-secondary)] hover:text-[var(--red)] opacity-0 group-hover:opacity-100 transition-opacity px-0.5"
+                      title="Close"
+                    >×</button>
+                  </div>
+                );
+              })}
+              <div className="border-b border-[var(--border)] my-1"></div>
+            </>
+          )}
+          {/* All projects */}
           <div className="flex-1 overflow-y-auto">
             {[...projects].sort((a, b) => a.name.localeCompare(b.name)).map(p => {
-              const isActive = activeTab?.projectPath === p.path;
+              const openTab = tabs.find(t => t.projectPath === p.path);
+              if (openTab) return null; // already in Open section above
               const initial = p.name.slice(0, 2).toUpperCase();
               return (
                 <button key={p.path}
                   onClick={() => openProjectTab(p)}
                   title={p.name}
-                  className={`w-full py-1.5 text-[9px] font-bold text-center ${
-                    isActive ? 'text-[var(--accent)] bg-[var(--accent)]/10' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
-                  }`}>
+                  className="w-full py-1.5 text-[9px] font-bold text-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                   {initial}
                 </button>
               );
@@ -285,24 +321,40 @@ export default function ProjectManager() {
                 <span className="text-[8px]">{collapsedRoots.has('__favorites__') ? '▸' : '▾'}</span>
                 <span>★</span> Favorites ({favoriteProjects.length})
               </button>
-              {!collapsedRoots.has('__favorites__') && favoriteProjects.map(p => (
-                <button
-                  key={`fav-${p.path}`}
-                  onClick={() => openProjectTab(p)}
-                  className={`w-full text-left px-3 py-1.5 text-xs border-b border-[var(--border)]/30 flex items-center gap-2 ${
-                    tabs.find(t => t.id === activeTabId)?.projectPath === p.path ? 'bg-[var(--accent)]/10 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]'
-                  }`}
-                >
-                  <span
-                    onClick={(e) => { e.stopPropagation(); toggleFavorite(p.path); }}
-                    className="text-[13px] text-[var(--yellow)] shrink-0 cursor-pointer leading-none"
-                    title="Remove from favorites"
-                  >★</span>
-                  <span className="truncate">{p.name}</span>
-                  {p.language && <span className="text-[8px] text-[var(--text-secondary)] ml-auto shrink-0">{p.language}</span>}
-                  {p.hasGit && <span className="text-[8px] text-[var(--accent)] shrink-0">git</span>}
-                </button>
-              ))}
+              {!collapsedRoots.has('__favorites__') && favoriteProjects.map(p => {
+                const openTab = tabs.find(t => t.projectPath === p.path);
+                const isActive = openTab?.id === activeTabId;
+                return (
+                  <div
+                    key={`fav-${p.path}`}
+                    className={`group w-full border-b border-[var(--border)]/30 flex items-center gap-2 px-3 py-1.5 text-xs ${
+                      isActive ? 'bg-[var(--accent)]/10 text-[var(--accent)]' : openTab ? 'bg-[var(--bg-tertiary)]/40 text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]'
+                    }`}
+                  >
+                    <span
+                      onClick={(e) => { e.stopPropagation(); toggleFavorite(p.path); }}
+                      className="text-[13px] text-[var(--yellow)] shrink-0 cursor-pointer leading-none"
+                      title="Remove from favorites"
+                    >★</span>
+                    <button
+                      onClick={() => openProjectTab(p)}
+                      className="flex-1 text-left flex items-center gap-2 min-w-0"
+                    >
+                      {openTab && <span className="w-1.5 h-1.5 rounded-full bg-[var(--green)] shrink-0" title="Open"></span>}
+                      <span className="truncate">{p.name}</span>
+                      {p.language && <span className="text-[8px] text-[var(--text-secondary)] ml-auto shrink-0">{p.language}</span>}
+                      {p.hasGit && <span className="text-[8px] text-[var(--accent)] shrink-0">git</span>}
+                    </button>
+                    {openTab && (
+                      <button
+                        onClick={(e) => { e.stopPropagation(); closeTab(openTab.id); }}
+                        className="text-[var(--text-secondary)] hover:text-[var(--red)] text-[11px] leading-none opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                        title="Close tab"
+                      >×</button>
+                    )}
+                  </div>
+                );
+              })}
             </div>
           )}
 
@@ -320,24 +372,40 @@ export default function ProjectManager() {
                   <span className="text-[8px]">{isCollapsed ? '▸' : '▾'}</span>
                   {rootName} ({rootProjects.length})
                 </button>
-                {!isCollapsed && rootProjects.map(p => (
-                  <button
-                    key={p.path}
-                    onClick={() => openProjectTab(p)}
-                    className={`w-full text-left px-3 py-1.5 text-xs border-b border-[var(--border)]/30 flex items-center gap-2 ${
-                      tabs.find(t => t.id === activeTabId)?.projectPath === p.path ? 'bg-[var(--accent)]/10 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]'
-                    }`}
-                  >
-                    <span
-                      onClick={(e) => { e.stopPropagation(); toggleFavorite(p.path); }}
-                      className={`text-[13px] shrink-0 cursor-pointer leading-none ${favorites.includes(p.path) ? 'text-[var(--yellow)]' : 'text-[var(--text-secondary)]/30 hover:text-[var(--yellow)]'}`}
-                      title={favorites.includes(p.path) ? 'Remove from favorites' : 'Add to favorites'}
-                    >{favorites.includes(p.path) ? '★' : '☆'}</span>
-                    <span className="truncate">{p.name}</span>
-                    {p.language && <span className="text-[8px] text-[var(--text-secondary)] ml-auto shrink-0">{p.language}</span>}
-                    {p.hasGit && <span className="text-[8px] text-[var(--accent)] shrink-0">git</span>}
-                  </button>
-                ))}
+                {!isCollapsed && rootProjects.map(p => {
+                  const openTab = tabs.find(t => t.projectPath === p.path);
+                  const isActive = openTab?.id === activeTabId;
+                  return (
+                    <div
+                      key={p.path}
+                      className={`group w-full border-b border-[var(--border)]/30 flex items-center gap-2 px-3 py-1.5 text-xs ${
+                        isActive ? 'bg-[var(--accent)]/10 text-[var(--accent)]' : openTab ? 'bg-[var(--bg-tertiary)]/40 text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]'
+                      }`}
+                    >
+                      <span
+                        onClick={(e) => { e.stopPropagation(); toggleFavorite(p.path); }}
+                        className={`text-[13px] shrink-0 cursor-pointer leading-none ${favorites.includes(p.path) ? 'text-[var(--yellow)]' : 'text-[var(--text-secondary)]/30 hover:text-[var(--yellow)]'}`}
+                        title={favorites.includes(p.path) ? 'Remove from favorites' : 'Add to favorites'}
+                      >{favorites.includes(p.path) ? '★' : '☆'}</span>
+                      <button
+                        onClick={() => openProjectTab(p)}
+                        className="flex-1 text-left flex items-center gap-2 min-w-0"
+                      >
+                        {openTab && <span className="w-1.5 h-1.5 rounded-full bg-[var(--green)] shrink-0" title="Open"></span>}
+                        <span className="truncate">{p.name}</span>
+                        {p.language && <span className="text-[8px] text-[var(--text-secondary)] ml-auto shrink-0">{p.language}</span>}
+                        {p.hasGit && <span className="text-[8px] text-[var(--accent)] shrink-0">git</span>}
+                      </button>
+                      {openTab && (
+                        <button
+                          onClick={(e) => { e.stopPropagation(); closeTab(openTab.id); }}
+                          className="text-[var(--text-secondary)] hover:text-[var(--red)] text-[11px] leading-none opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                          title="Close tab"
+                        >×</button>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
             );
           })}
@@ -356,15 +424,6 @@ export default function ProjectManager() {
 
       {/* Main area */}
       <div className="flex-1 flex flex-col min-w-0">
-        {/* Tab bar */}
-        {tabs.length > 0 && (
-          <TabBar
-            tabs={tabs.map(t => ({ id: t.id, label: t.projectName }))}
-            activeId={activeTabId}
-            onActivate={activateTab}
-            onClose={closeTab}
-          />
-        )}
 
         {/* Tab content */}
         {tabs.length > 0 ? (

package/components/SessionView.tsx

@@ -319,6 +319,13 @@ export default function SessionView({
         <div className="flex items-center justify-between p-2 border-b border-[var(--border)]">
           <span className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase">Sessions</span>
           <div className="flex items-center gap-2">
+            {!singleProject && (
+              <button
+                onClick={() => setExpandedProjects(new Set())}
+                className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                title="Collapse all projects"
+              >⇱</button>
+            )}
             <button
               onClick={() => batchMode ? exitBatchMode() : setBatchMode(true)}
               className={`text-[9px] transition-colors ${batchMode ? 'text-[var(--accent)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}

package/components/SkillsPanel.tsx

@@ -64,23 +64,29 @@ function buildTree(files: { name: string; path: string; type: string }[]): TreeN
   return root;
 }
 
-function SkillFileTree({ files, activeFile, onSelect }: {
+function SkillFileTree({ files, activeFile, onSelect, collapseVersion = 0 }: {
   files: { name: string; path: string; type: string }[];
   activeFile: string | null;
   onSelect: (path: string) => void;
+  collapseVersion?: number;
 }) {
   const tree = buildTree(files);
-  return <TreeNodeList nodes={tree} depth={0} activeFile={activeFile} onSelect={onSelect} />;
+  return <TreeNodeList nodes={tree} depth={0} activeFile={activeFile} onSelect={onSelect} collapseVersion={collapseVersion} />;
 }
 
-function TreeNodeList({ nodes, depth, activeFile, onSelect }: {
-  nodes: TreeNode[]; depth: number; activeFile: string | null; onSelect: (path: string) => void;
+function TreeNodeList({ nodes, depth, activeFile, onSelect, collapseVersion = 0 }: {
+  nodes: TreeNode[]; depth: number; activeFile: string | null; onSelect: (path: string) => void; collapseVersion?: number;
 }) {
   const [expanded, setExpanded] = useState<Set<string>>(new Set(
     // Auto-expand first level
     nodes.filter(n => n.type === 'dir').map(n => n.path)
   ));
 
+  // Collapse all on version bump
+  useEffect(() => {
+    if (collapseVersion > 0) setExpanded(new Set());
+  }, [collapseVersion]);
+
   const toggle = (path: string) => {
     setExpanded(prev => {
       const next = new Set(prev);
@@ -103,7 +109,7 @@ function TreeNodeList({ nodes, depth, activeFile, onSelect }: {
               <span>📁 {node.name}</span>
             </button>
             {expanded.has(node.path) && (
-              <TreeNodeList nodes={node.children} depth={depth + 1} activeFile={activeFile} onSelect={onSelect} />
+              <TreeNodeList nodes={node.children} depth={depth + 1} activeFile={activeFile} onSelect={onSelect} collapseVersion={collapseVersion} />
             )}
           </div>
         ) : (
@@ -152,6 +158,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
   const [expandedSkill, setExpandedSkill] = useState<string | null>(null);
   const [skillFiles, setSkillFiles] = useState<{ name: string; path: string; type: string }[]>([]);
   const [activeFile, setActiveFile] = useState<string | null>(null);
+  const [skillTreeCollapseVersion, setSkillTreeCollapseVersion] = useState(0);
   const [fileContent, setFileContent] = useState<string>('');
 
   const fetchSkills = useCallback(async () => {
@@ -742,7 +749,18 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
                   {/* File browser */}
                   <div className="flex-1 flex min-h-0 overflow-hidden">
                     {/* File tree */}
-                    <div className="w-36 border-r border-[var(--border)] overflow-y-auto shrink-0">
+                    <div className="w-36 border-r border-[var(--border)] flex flex-col shrink-0">
+                      {skillFiles.length > 0 && (
+                        <div className="px-2 py-0.5 border-b border-[var(--border)] flex items-center justify-between shrink-0">
+                          <span className="text-[8px] text-[var(--text-secondary)] uppercase">Files</span>
+                          <button
+                            onClick={() => setSkillTreeCollapseVersion(v => v + 1)}
+                            className="text-[8px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                            title="Collapse all"
+                          >⇱</button>
+                        </div>
+                      )}
+                      <div className="overflow-y-auto flex-1">
                       {skillFiles.length === 0 ? (
                         <div className="p-2 text-[9px] text-[var(--text-secondary)]">Loading...</div>
                       ) : (
@@ -750,8 +768,10 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
                           files={skillFiles}
                           activeFile={activeFile}
                           onSelect={(path) => loadFile(itemName, path, isLocal, localItem?.type, localItem?.projectPath)}
+                          collapseVersion={skillTreeCollapseVersion}
                         />
                       )}
+                      </div>
                       {skill?.sourceUrl && (
                         <div className="border-t border-[var(--border)] p-2">
                           <a

package/components/WorkspaceTree.tsx

@@ -126,8 +126,13 @@ export default function WorkspaceTree({
       {/* Header */}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--border)] shrink-0">
         <span className="text-xs font-bold text-[var(--text-primary)]">Workspace</span>
+        <button onClick={() => setExpanded(new Set())}
+          className="text-[8px] px-1.5 py-0.5 rounded border border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-auto"
+          title="Collapse all">
+          ⇱
+        </button>
         <button onClick={onCreateWorkspace}
-          className="text-[8px] px-1.5 py-0.5 rounded border border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-auto">
+          className="text-[8px] px-1.5 py-0.5 rounded border border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
           +
         </button>
       </div>

package/components/WorkspaceView.tsx

@@ -2244,9 +2244,24 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
   }, [initialPos?.x, initialPos?.y]); // eslint-disable-line react-hooks/exhaustive-deps
   const [size, setSize] = useState({ w: 500, h: 300 });
   const [showCloseDialog, setShowCloseDialog] = useState(false);
+  const [mouseOn, setMouseOn] = useState(true);
   const dragRef = useRef<{ startX: number; startY: number; origX: number; origY: number } | null>(null);
   const resizeRef = useRef<{ startX: number; startY: number; origW: number; origH: number } | null>(null);
 
+  const toggleMouse = () => {
+    const next = !mouseOn;
+    setMouseOn(next);
+    // Send via current WebSocket (shared for all workspace terminals)
+    try {
+      const ws = new WebSocket(getWsUrl());
+      ws.onopen = () => {
+        ws.send(JSON.stringify({ type: 'tmux-mouse', mouse: next }));
+        setTimeout(() => ws.close(), 300);
+      };
+      ws.onerror = () => ws.close();
+    } catch {}
+  };
+
   useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -2463,7 +2478,15 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
         <span className="text-sm">{agentIcon}</span>
         <span className="text-[11px] font-semibold text-white truncate">{agentLabel}</span>
         {!docked && <span className="text-[8px] text-gray-500">⌨️ manual terminal</span>}
-        <button onClick={() => setShowCloseDialog(true)} className="ml-auto text-gray-500 hover:text-white text-sm shrink-0">✕</button>
+        <button
+          onClick={(e) => { e.stopPropagation(); toggleMouse(); }}
+          onMouseDown={(e) => e.stopPropagation()}
+          className={`ml-auto text-[9px] px-1.5 py-0.5 rounded border transition-colors ${mouseOn ? 'border-green-600/40 text-green-400 bg-green-500/10' : 'border-gray-600 text-gray-500 bg-gray-800/50'}`}
+          title={mouseOn ? 'Mouse ON (trackpad scroll, Shift+drag to select text)' : 'Mouse OFF (drag to select text, Ctrl+B [ to scroll)'}
+        >
+          🖱️ {mouseOn ? 'ON' : 'OFF'}
+        </button>
+        <button onClick={() => setShowCloseDialog(true)} className="text-gray-500 hover:text-white text-sm shrink-0">✕</button>
       </div>
 
       {/* Terminal */}
@@ -3497,6 +3520,29 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
     ensureWorkspace(projectPath, projectName).then(setWorkspaceId).catch(() => {});
   }, [projectPath, projectName]);
 
+  // Saved node positions from server (loaded once on workspace init)
+  const [savedPositions, setSavedPositions] = useState<Record<string, { x: number; y: number }>>({});
+  useEffect(() => {
+    if (!workspaceId) return;
+    wsApi(workspaceId, 'get_positions').then((res: any) => {
+      if (res?.positions) setSavedPositions(res.positions);
+    }).catch(() => {});
+  }, [workspaceId]);
+
+  // Save positions (debounced) when nodes are dragged
+  const savePositionsDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const saveNodePositions = useCallback(() => {
+    if (!workspaceId) return;
+    if (savePositionsDebounceRef.current) clearTimeout(savePositionsDebounceRef.current);
+    savePositionsDebounceRef.current = setTimeout(() => {
+      const positions: Record<string, { x: number; y: number }> = {};
+      for (const n of rfNodes) {
+        positions[n.id] = { x: n.position.x, y: n.position.y };
+      }
+      wsApi(workspaceId, 'set_positions', { positions }).catch(() => {});
+    }, 500);
+  }, [workspaceId, rfNodes]);
+
   // SSE stream — server is the single source of truth
   const { agents, states, logPreview, busLog, daemonActive: daemonActiveFromStream, setDaemonActive: setDaemonActiveFromStream } = useWorkspaceStream(workspaceId, (event) => {
     if (event.type === 'user_input_request') {
@@ -3515,7 +3561,7 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
         const existing = prevMap.get(agent.id);
         const base = {
           id: agent.id,
-          position: existing?.position ?? { x: i * 260, y: 60 },
+          position: existing?.position ?? savedPositions[agent.id] ?? { x: i * 260, y: 60 },
           ...(existing?.measured ? { measured: existing.measured } : {}),
           ...(existing?.width ? { width: existing.width, height: existing.height } : {}),
         };
@@ -3625,7 +3671,7 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
         };
       });
     });
-  }, [agents, states, logPreview, workspaceId, mascotTheme]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [agents, states, logPreview, workspaceId, mascotTheme, savedPositions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Derive edges from dependsOn
   const rfEdges = useMemo(() => {
@@ -3920,6 +3966,8 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
             edges={rfEdges}
             onNodesChange={onNodesChange}
             onNodeDragStop={() => {
+              // Persist positions
+              saveNodePositions();
               // Reposition terminals to follow their nodes
               setFloatingTerminals(prev => prev.map(ft => {
                 const nodeEl = document.querySelector(`[data-id="${ft.agentId}"]`);

package/lib/workspace/orchestrator.ts

@@ -96,6 +96,7 @@ export class WorkspaceOrchestrator extends EventEmitter {
   private reconcileTick = 0; // counts health check ticks for 60s reconcile
   private _topoCache: WorkspaceTopo | null = null; // cached workspace topology
   private roleInjectState = new Map<string, { lastInjectAt: number; msgsSinceInject: number }>(); // per-agent role reminder tracking
+  private nodePositions: Record<string, { x: number; y: number }> = {}; // persisted smith positions in ReactFlow graph
 
   /** Emit a log event (auto-persisted via constructor listener) */
   emitLog(agentId: string, entry: any): void {
@@ -1847,6 +1848,17 @@ export class WorkspaceOrchestrator extends EventEmitter {
     return this.bus.getLog();
   }
 
+  // ─── Node positions (ReactFlow layout) ─────────────────
+
+  getNodePositions(): Record<string, { x: number; y: number }> {
+    return { ...this.nodePositions };
+  }
+
+  setNodePositions(positions: Record<string, { x: number; y: number }>): void {
+    this.nodePositions = { ...this.nodePositions, ...positions };
+    this.saveNow();
+  }
+
   // ─── State Snapshot (for persistence) ──────────────────
 
   /** Get full workspace state for auto-save */
@@ -1857,7 +1869,7 @@ export class WorkspaceOrchestrator extends EventEmitter {
       projectName: this.projectName,
       agents: Array.from(this.agents.values()).map(e => e.config),
       agentStates: this.getAllAgentStates(),
-      nodePositions: {},
+      nodePositions: this.nodePositions,
       busLog: [...this.bus.getLog()],
       busOutbox: this.bus.getAllOutbox(),
       createdAt: this.createdAt,
@@ -1885,7 +1897,9 @@ export class WorkspaceOrchestrator extends EventEmitter {
     agentStates: Record<string, AgentState>;
     busLog: BusMessage[];
     busOutbox?: Record<string, BusMessage[]>;
+    nodePositions?: Record<string, { x: number; y: number }>;
   }): void {
+    if (data.nodePositions) this.nodePositions = { ...data.nodePositions };
     this.agents.clear();
     this.daemonActive = false; // Reset daemon — user must click Start Daemon again after restart
     for (const config of data.agents) {

package/lib/workspace/presets.ts

@@ -22,6 +22,43 @@ import type { WorkspaceAgentConfig } from './types';
 
 type PresetTemplate = Omit<WorkspaceAgentConfig, 'id'>;
 
+/**
+ * Shared decision rule for all smiths: when to use request documents
+ * vs inbox messages. This is the most common source of confusion.
+ */
+const REQUEST_VS_INBOX_RULE = `## Rule: Request vs Inbox
+
+Use **request document** (create_request / claim_request / update_response) when:
+- Delegating substantive work to another smith (implement feature, write tests, do review)
+- Work has concrete deliverables and acceptance criteria
+- Work should flow through a pipeline (engineer → qa → reviewer)
+- The task needs to be tracked, claimed, and its status visible to everyone
+
+Use **inbox message** (send_message) when:
+- Asking a clarifying question ("what format should X be?")
+- Quick status update ("I'm starting on this")
+- Reporting a bug back to upstream (after review fails)
+- Coordinating without a concrete deliverable
+
+**Decision tree when user or another smith asks you to coordinate work:**
+\`\`\`
+Is it substantive implementation/testing/review work with clear acceptance criteria?
+├─ YES → create_request (then notify via inbox if needed)
+└─ NO  → send_message only
+
+Is it a question or quick coordination (no deliverable)?
+├─ YES → send_message only
+└─ NO  → create_request
+
+Am I being asked to do work that would result in code/tests/docs changes?
+├─ YES and I'm executing it → claim_request if one exists, or tell user to create one
+└─ NO → just respond via inbox
+\`\`\`
+
+**When unsure, prefer create_request** — having a tracked artifact beats losing context in chat.
+`;
+
+
 export const AGENT_PRESETS: Record<string, PresetTemplate> = {
   pm: {
     label: 'PM',
@@ -162,7 +199,9 @@ IF request stuck open (no one claimed):
 - Do NOT write code — your output is request documents only
 - Each acceptance_criterion must be verifiable by QA
 - Group related requests in a batch for tracking
-- Downstream agents are auto-notified via DAG when you create requests`,
+- Downstream agents are auto-notified via DAG when you create requests
+
+${REQUEST_VS_INBOX_RULE}`,
     backend: 'cli',
     agentId: 'claude',
     dependsOn: [],
@@ -241,7 +280,9 @@ IF you encounter a blocking issue (unclear requirement, impossible constraint):
 - ALWAYS update_response when done — triggers downstream pipeline
 - Only implement what the request asks — don't scope-creep
 - Architecture docs are versioned — never overwrite
-- Existing working code stays unless request explicitly requires changes`,
+- Existing working code stays unless request explicitly requires changes
+
+${REQUEST_VS_INBOX_RULE}`,
     backend: 'cli',
     agentId: 'claude',
     dependsOn: [],
@@ -331,7 +372,9 @@ IF result = "failed":
 - Do NOT fix bugs — only report them
 - Each test must trace back to an acceptance_criterion
 - One consolidated message max — never spam Engineers
-- Never send messages during planning/writing — only after execution`,
+- Never send messages during planning/writing — only after execution
+
+${REQUEST_VS_INBOX_RULE}`,
     backend: 'cli',
     agentId: 'claude',
     dependsOn: [],
@@ -436,7 +479,9 @@ IF result = "rejected":
 - Review ONLY files_changed from the request, not the entire codebase
 - Actionable feedback: not "this is bad" but "change X to Y because Z"
 - One consolidated message max per verdict
-- MINOR findings go in report only — never message about style`,
+- MINOR findings go in report only — never message about style
+
+${REQUEST_VS_INBOX_RULE}`,
     backend: 'cli',
     agentId: 'claude',
     dependsOn: [],
@@ -549,7 +594,9 @@ IF multiple Engineers exist and request unclaimed:
 - Every delegated task MUST go through request documents (create_request)
 - Each request needs concrete acceptance_criteria that QA can verify
 - Do NOT duplicate work an active agent is already doing — check status first
-- When covering a gap, be thorough — don't half-do it just because it's not your "main" role`,
+- When covering a gap, be thorough — don't half-do it just because it's not your "main" role
+
+${REQUEST_VS_INBOX_RULE}`,
     backend: 'cli',
     agentId: 'claude',
     dependsOn: [],

package/lib/workspace-standalone.ts

@@ -58,7 +58,11 @@ function loadOrchestrator(id: string): WorkspaceOrchestrator {
       agentStates: state.agentStates,
       busLog: state.busLog,
       busOutbox: state.busOutbox,
+      nodePositions: state.nodePositions,
     });
+  } else if (state.nodePositions) {
+    // Load positions even when no agents yet (rare, but safe)
+    orch.loadSnapshot({ agents: [], agentStates: {}, busLog: [], nodePositions: state.nodePositions });
   }
 
   // Wire up SSE broadcasting
@@ -190,6 +194,15 @@ async function handleAgentsPost(id: string, body: any, res: ServerResponse): Pro
           return jsonError(res, err.message);
         }
       }
+      case 'set_positions': {
+        const positions = body.positions as Record<string, { x: number; y: number }> | undefined;
+        if (!positions) return jsonError(res, 'positions required');
+        orch.setNodePositions(positions);
+        return json(res, { ok: true });
+      }
+      case 'get_positions': {
+        return json(res, { positions: orch.getNodePositions() });
+      }
       case 'agent_done': {
         // Called by Claude Code Stop hook — agent finished a turn
         if (!agentId) return jsonError(res, 'agentId required');

package/package.json

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