@cluesmith/codev 1.3.0 → 1.4.1

package/templates/dashboard-split.html

@@ -1157,36 +1157,174 @@
       display: none;
     }
 
-    /* Files Tab Styles (Spec 0055) */
-    .files-container {
+    /* Tree Styles (used by dashboard file browser) */
+    .tree-item {
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .tree-item:hover {
+      background: var(--bg-secondary);
+    }
+
+    .tree-item.selected {
+      background: var(--tab-active);
+    }
+
+    .tree-item-icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .tree-item-icon.folder-toggle {
+      cursor: pointer;
+    }
+
+    .tree-item-icon.folder-toggle:hover {
+      color: var(--text-secondary);
+    }
+
+    .tree-item-name {
+      font-size: 13px;
+      color: var(--text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .tree-item:hover .tree-item-name {
+      color: var(--text-primary);
+    }
+
+    .tree-item[data-type="dir"] .tree-item-name {
+      color: var(--text-primary);
+    }
+
+    .tree-item[data-type="file"]:hover .tree-item-name {
+      color: var(--accent);
+    }
+
+    .tree-children {
+      overflow: hidden;
+    }
+
+    .tree-children.collapsed {
+      display: none;
+    }
+
+    /* Dashboard Tab Styles (Spec 0057) */
+    .dashboard-container {
       flex: 1;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
     }
 
-    .files-header {
+    .dashboard-header {
+      display: flex;
+      gap: 16px;
+      padding: 16px;
+      flex-shrink: 0;
+    }
+
+    @media (max-width: 900px) {
+      .dashboard-header {
+        flex-direction: column;
+      }
+    }
+
+    /* Collapsible section styles */
+    .dashboard-section {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .dashboard-section.section-tabs,
+    .dashboard-section.section-files {
+      flex: 1;
+      max-height: 280px;
+    }
+
+    .dashboard-section.section-projects {
+      flex: 0 0 auto;
+      margin: 0 16px 16px 16px;
+      max-height: 50%;
+      overflow-y: auto;
+    }
+
+    .dashboard-section.section-projects .dashboard-section-content {
+      flex: 0 0 auto;
+    }
+
+    /* Tabs/Files expand to fill remaining space above Projects */
+    .dashboard-header {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .dashboard-section.section-tabs,
+    .dashboard-section.section-files {
+      max-height: none;
+    }
+
+    .dashboard-section-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 8px 12px;
-      background: var(--bg-secondary);
+      cursor: pointer;
+      user-select: none;
+      flex-shrink: 0;
       border-bottom: 1px solid var(--border);
     }
 
-    .files-header-title {
+    .dashboard-section-header:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .dashboard-section-header h3 {
       font-size: 12px;
-      color: var(--text-muted);
       text-transform: uppercase;
+      color: var(--text-muted);
       letter-spacing: 0.5px;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .dashboard-section-header .collapse-icon {
+      font-size: 10px;
+      transition: transform 0.2s;
+    }
+
+    .dashboard-section.collapsed .collapse-icon {
+      transform: rotate(-90deg);
+    }
+
+    .dashboard-section.collapsed .dashboard-section-header {
+      border-bottom: none;
     }
 
-    .files-header-actions {
+    .dashboard-section-header .header-actions {
       display: flex;
       gap: 4px;
     }
 
-    .files-header-actions button {
+    .dashboard-section-header .header-actions button {
       padding: 4px 8px;
       border-radius: 4px;
       border: 1px solid var(--border);
@@ -1196,97 +1334,184 @@
       font-size: 11px;
     }
 
-    .files-header-actions button:hover {
+    .dashboard-section-header .header-actions button:hover {
       background: var(--tab-hover);
       color: var(--text-primary);
     }
 
-    .files-tree {
+    .dashboard-section-content {
       flex: 1;
       overflow-y: auto;
-      padding: 8px 0;
+      padding: 8px 12px;
     }
 
-    .tree-item {
-      display: flex;
-      align-items: center;
-      padding: 4px 8px;
-      cursor: pointer;
-      user-select: none;
+    .dashboard-section.collapsed .dashboard-section-content {
+      display: none;
     }
 
-    .tree-item:hover {
+    /* Legacy support */
+    .dashboard-column {
       background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      max-height: 280px;
     }
 
-    .tree-item.selected {
-      background: var(--tab-active);
-    }
-
-    .tree-item-icon {
-      width: 16px;
-      height: 16px;
-      margin-right: 4px;
+    .dashboard-column-header {
       display: flex;
+      justify-content: space-between;
       align-items: center;
-      justify-content: center;
-      font-size: 10px;
+      margin-bottom: 8px;
+      flex-shrink: 0;
+    }
+
+    .dashboard-column-header h3 {
+      font-size: 12px;
+      text-transform: uppercase;
       color: var(--text-muted);
+      letter-spacing: 0.5px;
+      margin: 0;
     }
 
-    .tree-item-icon.folder-toggle {
-      cursor: pointer;
+    .dashboard-column-header .header-actions {
+      display: flex;
+      gap: 4px;
     }
 
-    .tree-item-icon.folder-toggle:hover {
+    .dashboard-column-header .header-actions button {
+      padding: 4px 8px;
+      border-radius: 4px;
+      border: 1px solid var(--border);
+      background: var(--bg-tertiary);
       color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
     }
 
-    .tree-item-name {
+    .dashboard-column-header .header-actions button:hover {
+      background: var(--tab-hover);
+      color: var(--text-primary);
+    }
+
+    .dashboard-tabs-list {
+      flex: 1;
+      overflow-y: auto;
+      margin-bottom: 8px;
+    }
+
+    .dashboard-tab-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 8px;
+      border-radius: 4px;
+      cursor: pointer;
       font-size: 13px;
       color: var(--text-secondary);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
 
-    .tree-item:hover .tree-item-name {
-      color: var(--text-primary);
+    .dashboard-tab-item:hover {
+      background: var(--bg-tertiary);
     }
 
-    .tree-item[data-type="dir"] .tree-item-name {
-      color: var(--text-primary);
+    .dashboard-tab-item.active {
+      background: var(--accent);
+      color: white;
     }
 
-    .tree-item[data-type="file"]:hover .tree-item-name {
-      color: var(--accent);
+    .dashboard-tab-item .tab-icon {
+      font-size: 14px;
+      flex-shrink: 0;
     }
 
-    .tree-children {
+    .dashboard-tab-item .tab-name {
+      flex: 1;
       overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .tree-children.collapsed {
-      display: none;
+    .dashboard-actions {
+      flex-shrink: 0;
+      display: flex;
+      gap: 8px;
     }
 
-    .files-loading {
+    .dashboard-actions .btn-action {
+      flex: 1;
+      padding: 8px 12px;
+      border-radius: 4px;
+      border: 1px dashed var(--border);
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 24px;
-      color: var(--text-muted);
-      font-size: 13px;
+      gap: 4px;
     }
 
-    .files-error {
-      padding: 16px;
-      margin: 8px;
-      background: rgba(239, 68, 68, 0.1);
-      border: 1px solid var(--status-error);
-      border-radius: 6px;
+    .dashboard-actions .btn-action:hover {
+      border-style: solid;
       color: var(--text-secondary);
+      background: var(--bg-tertiary);
+    }
+
+    .dashboard-files-list {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .dashboard-files-list .tree-item {
+      padding: 3px 6px;
+      font-size: 12px;
+    }
+
+    .dashboard-files-list .tree-item-name {
+      font-size: 12px;
+    }
+
+    .dashboard-empty-state {
+      color: var(--text-muted);
       font-size: 13px;
+      padding: 12px;
+      text-align: center;
+    }
+
+    /* Status indicators in dashboard tab list */
+    .dashboard-status-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .dashboard-status-working {
+      background: var(--status-active);
+      animation: status-pulse 2s ease-in-out infinite;
+    }
+
+    .dashboard-status-idle {
+      background: var(--status-waiting);
+      animation: status-blink-slow 3s ease-in-out infinite;
+    }
+
+    .dashboard-status-blocked {
+      background: var(--status-error);
+      animation: status-blink-fast 0.8s ease-in-out infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .dashboard-status-working,
+      .dashboard-status-idle,
+      .dashboard-status-blocked {
+        animation: none;
+      }
     }
   </style>
 </head>
@@ -1396,6 +1621,30 @@
     let pendingCloseTabId = null;
     let contextMenuTabId = null;
 
+    // Collapsible section state (persisted to localStorage)
+    const SECTION_STATE_KEY = 'codev-dashboard-sections';
+    let sectionState = loadSectionState();
+
+    function loadSectionState() {
+      try {
+        const saved = localStorage.getItem(SECTION_STATE_KEY);
+        if (saved) return JSON.parse(saved);
+      } catch (e) { /* ignore */ }
+      return { tabs: true, files: true, projects: true };
+    }
+
+    function saveSectionState() {
+      try {
+        localStorage.setItem(SECTION_STATE_KEY, JSON.stringify(sectionState));
+      } catch (e) { /* ignore */ }
+    }
+
+    function toggleSection(section) {
+      sectionState[section] = !sectionState[section];
+      saveSectionState();
+      renderDashboardTabContent();
+    }
+
     // Initialize
     function init() {
       buildTabsFromState();
@@ -1516,19 +1765,11 @@
       const previousTabIds = new Set(tabs.map(t => t.id));
       tabs = [];
 
-      // Projects tab is ALWAYS first and uncloseable (Spec 0045)
+      // Dashboard tab is ALWAYS first and uncloseable (Spec 0045, 0057)
       tabs.push({
-        id: 'projects',
-        type: 'projects',
-        name: 'Projects',
-        closeable: false
-      });
-
-      // Files tab is second and uncloseable (Spec 0055)
-      tabs.push({
-        id: 'files',
-        type: 'files',
-        name: 'Files',
+        id: 'dashboard',
+        type: 'dashboard',
+        name: 'Dashboard',
         closeable: false
       });
 
@@ -1569,7 +1810,7 @@
 
       // Detect new tabs and auto-switch to them (skip projects tab)
       for (const tab of tabs) {
-        if (tab.id !== 'projects' && tab.id !== 'files' && !knownTabIds.has(tab.id) && previousTabIds.size > 0) {
+        if (tab.id !== 'dashboard' && tab.id !== 'files' && !knownTabIds.has(tab.id) && previousTabIds.size > 0) {
           // This is a new tab - switch to it
           activeTabId = tab.id;
           break;
@@ -1579,9 +1820,9 @@
       // Update known tab IDs
       knownTabIds = new Set(tabs.map(t => t.id));
 
-      // Set active tab to Projects on first load if none selected
+      // Set active tab to Dashboard on first load if none selected
       if (!activeTabId) {
-        activeTabId = 'projects';
+        activeTabId = 'dashboard';
       }
     }
 
@@ -1663,7 +1904,7 @@
     // Get tab icon
     function getTabIcon(type) {
       switch (type) {
-        case 'projects': return '📋';
+        case 'dashboard': return '🏠';
         case 'files': return '📁';
         case 'file': return '📄';
         case 'builder': return '🔨';
@@ -1762,22 +2003,12 @@
         return;
       }
 
-      // Handle projects tab specially (no iframe, inline content)
-      if (tab.type === 'projects') {
-        if (currentTabType !== 'projects') {
-          currentTabType = 'projects';
-          currentTabPort = null;
-          renderProjectsTab();
-        }
-        return;
-      }
-
-      // Handle files tab specially (no iframe, inline content)
-      if (tab.type === 'files') {
-        if (currentTabType !== 'files') {
-          currentTabType = 'files';
+      // Handle dashboard tab specially (no iframe, inline content)
+      if (tab.type === 'dashboard') {
+        if (currentTabType !== 'dashboard') {
+          currentTabType = 'dashboard';
           currentTabPort = null;
-          renderFilesTab();
+          renderDashboardTab();
         }
         return;
       }
@@ -2987,53 +3218,6 @@
       }
     }
 
-    // Render the files tab (entry point)
-    // Only fetches on first load; use refreshFilesTree() to force reload
-    async function renderFilesTab() {
-      const content = document.getElementById('tab-content');
-
-      // If already loaded, just render cached data (no network request)
-      if (filesTreeLoaded) {
-        renderFilesTabContent();
-        return;
-      }
-
-      // First load - show loading state and fetch
-      content.innerHTML = '<div class="files-loading">Loading files...</div>';
-      await loadFilesTree();
-      renderFilesTabContent();
-    }
-
-    // Render the files tab content (internal - called after data is loaded)
-    function renderFilesTabContent() {
-      const content = document.getElementById('tab-content');
-
-      if (filesTreeError) {
-        content.innerHTML = `
-          <div class="files-container">
-            <div class="files-error">${escapeHtml(filesTreeError)}</div>
-          </div>
-        `;
-        return;
-      }
-
-      content.innerHTML = `
-        <div class="files-container">
-          <div class="files-header">
-            <span class="files-header-title">Explorer</span>
-            <div class="files-header-actions">
-              <button onclick="collapseAllFolders()" title="Collapse All">⊟</button>
-              <button onclick="expandAllFolders()" title="Expand All">⊞</button>
-              <button onclick="refreshFilesTree()" title="Refresh">↻</button>
-            </div>
-          </div>
-          <div class="files-tree" id="files-tree">
-            ${renderTreeNodes(filesTreeData, 0)}
-          </div>
-        </div>
-      `;
-    }
-
     // Escape a string for use inside a JavaScript string literal in onclick handlers
     // This handles quotes, backslashes, and other special characters
     function escapeJsString(str) {
@@ -3113,13 +3297,24 @@
       } else {
         filesTreeExpanded.add(path);
       }
-      renderFilesTabContent();
+      rerenderFilesBrowser();
+    }
+
+    // Re-render file browser in current context (dashboard or files tab)
+    function rerenderFilesBrowser() {
+      if (activeTabId === 'dashboard') {
+        // Re-render just the files column in dashboard
+        const filesListEl = document.getElementById('dashboard-files-list');
+        if (filesListEl) {
+          filesListEl.innerHTML = renderDashboardFilesBrowser();
+        }
+      }
     }
 
     // Collapse all folders
     function collapseAllFolders() {
       filesTreeExpanded.clear();
-      renderFilesTabContent();
+      rerenderFilesBrowser();
     }
 
     // Expand all folders
@@ -3135,13 +3330,13 @@
         }
       }
       collectPaths(filesTreeData);
-      renderFilesTabContent();
+      rerenderFilesBrowser();
     }
 
     // Refresh files tree
     async function refreshFilesTree() {
       await loadFilesTree();
-      renderFilesTabContent();
+      rerenderFilesBrowser();
       showToast('Files refreshed', 'success');
     }
 
@@ -3189,55 +3384,222 @@
     function renderInfoHeader() {
       return `
         <div class="projects-info">
-          <h1 style="font-size: 20px; margin-bottom: 12px; color: var(--text-primary);">Codev: Project View</h1>
-          <p>This shows the state of all projects. Our goal is to move each project through all the stages until it reaches INTGR'D (integrated). Hover over column headers to learn about each stage.</p>
-          <p>To add projects, update status, or approve stages, use the <strong>Architect</strong> terminal on the left.</p>
-          <p>Docs: <a href="#" onclick="openProjectFile('codev/resources/cheatsheet.md'); return false;">Cheatsheet</a> · <a href="#" onclick="openProjectFile('codev/docs/lifecycle.md'); return false;">Lifecycle</a> · <a href="#" onclick="openProjectFile('codev/docs/commands/overview.md'); return false;">CLI Reference</a> · <a href="#" onclick="openProjectFile('codev/protocols/spider/protocol.md'); return false;">SPIDER Protocol</a> · <a href="https://github.com/cluesmith/codev#readme" target="_blank">README</a></p>
+          <h1 style="font-size: 20px; margin-bottom: 12px; color: var(--text-primary);">Agent Farm Dashboard</h1>
+          <p>Coordinate AI builders working on your codebase. The left panel shows the Architect terminal – tell it what you want to build. <strong>Tabs</strong> shows open terminals (Architect, Builders, utility shells). <strong>Files</strong> lets you browse and open project files. <strong>Projects</strong> tracks work as it moves from conception to integration.</p>
+          <p>Docs: <a href="#" onclick="openProjectFile('codev/resources/cheatsheet.md'); return false;">Cheatsheet</a> · <a href="#" onclick="openProjectFile('codev/resources/lifecycle.md'); return false;">Lifecycle</a> · <a href="#" onclick="openProjectFile('codev/resources/commands/overview.md'); return false;">CLI Reference</a> · <a href="#" onclick="openProjectFile('codev/protocols/spider/protocol.md'); return false;">SPIDER Protocol</a> · <a href="https://github.com/cluesmith/codev#readme" target="_blank">README</a> · <a href="https://discord.gg/mJ92DhDa6n" target="_blank">Discord</a></p>
         </div>
       `;
     }
 
-    // Render the projects tab content (internal - called after data is loaded)
-    function renderProjectsTabContent() {
+    // Render the dashboard tab content (internal - called after data is loaded)
+    function renderDashboardTabContent() {
       const content = document.getElementById('tab-content');
 
-      if (projectlistError) {
-        content.innerHTML = `
-          <div class="projects-container">
-            ${renderErrorBanner(projectlistError)}
+      content.innerHTML = `
+        <div class="dashboard-container">
+          ${renderInfoHeader()}
+          <div class="dashboard-header">
+            <!-- Tabs Section -->
+            <div class="dashboard-section section-tabs ${sectionState.tabs ? '' : 'collapsed'}">
+              <div class="dashboard-section-header" onclick="toggleSection('tabs')">
+                <h3><span class="collapse-icon">▼</span> Tabs</h3>
+              </div>
+              <div class="dashboard-section-content">
+                <div class="dashboard-tabs-list" id="dashboard-tabs-list">
+                  ${renderDashboardTabsList()}
+                </div>
+              </div>
+            </div>
+            <!-- Files Section -->
+            <div class="dashboard-section section-files ${sectionState.files ? '' : 'collapsed'}">
+              <div class="dashboard-section-header" onclick="toggleSection('files')">
+                <h3><span class="collapse-icon">▼</span> Files</h3>
+                <div class="header-actions" onclick="event.stopPropagation()">
+                  <button onclick="collapseAllFolders()" title="Collapse All">⊟</button>
+                  <button onclick="expandAllFolders()" title="Expand All">⊞</button>
+                </div>
+              </div>
+              <div class="dashboard-section-content">
+                <div class="dashboard-files-list" id="dashboard-files-list">
+                  ${renderDashboardFilesBrowser()}
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Projects Section -->
+          <div class="dashboard-section section-projects ${sectionState.projects ? '' : 'collapsed'}">
+            <div class="dashboard-section-header" onclick="toggleSection('projects')">
+              <h3><span class="collapse-icon">▼</span> Projects</h3>
+            </div>
+            <div class="dashboard-section-content" id="dashboard-projects">
+              ${renderDashboardProjectsSection()}
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    // Render the tabs list for dashboard
+    function renderDashboardTabsList() {
+      // Filter to show terminal tabs only (not Dashboard/Files tabs)
+      const terminalTabs = tabs.filter(t => t.type !== 'dashboard' && t.type !== 'files');
+
+      if (terminalTabs.length === 0) {
+        return '<div class="dashboard-empty-state">No tabs open</div>';
+      }
+
+      return terminalTabs.map(tab => {
+        const isActive = tab.id === activeTabId;
+        const icon = getTabIcon(tab.type);
+        const statusIndicator = getDashboardStatusIndicator(tab);
+
+        return `
+          <div class="dashboard-tab-item ${isActive ? 'active' : ''}" onclick="selectTab('${tab.id}')">
+            ${statusIndicator}
+            <span class="tab-icon">${icon}</span>
+            <span class="tab-name">${escapeHtml(tab.name)}</span>
           </div>
         `;
-        return;
+      }).join('');
+    }
+
+    // Get status indicator for dashboard tab list
+    function getDashboardStatusIndicator(tab) {
+      if (tab.type !== 'builder') return '';
+
+      // Use builder status from state
+      const builderState = (state.builders || []).find(b => `builder-${b.id}` === tab.id);
+      if (!builderState) return '';
+
+      const status = builderState.status;
+      if (['spawning', 'implementing'].includes(status)) {
+        return '<span class="dashboard-status-indicator dashboard-status-working" title="Working"></span>';
+      }
+      if (status === 'blocked') {
+        return '<span class="dashboard-status-indicator dashboard-status-blocked" title="Blocked"></span>';
+      }
+      if (['pr-ready', 'complete'].includes(status)) {
+        return '<span class="dashboard-status-indicator dashboard-status-idle" title="Idle"></span>';
+      }
+      return '';
+    }
+
+    // Render compact file browser for dashboard
+    function renderDashboardFilesBrowser() {
+      if (filesTreeError) {
+        return `<div class="dashboard-empty-state">${escapeHtml(filesTreeError)}</div>`;
+      }
+
+      if (!filesTreeLoaded || filesTreeData.length === 0) {
+        return '<div class="dashboard-empty-state">Loading files...</div>';
+      }
+
+      return renderTreeNodes(filesTreeData, 0);
+    }
+
+    // Render the projects section for dashboard
+    function renderDashboardProjectsSection() {
+      if (projectlistError) {
+        return renderErrorBanner(projectlistError);
       }
 
       if (projectsData.length === 0) {
-        content.innerHTML = `
-          <div class="projects-container">
-            ${renderWelcomeScreen()}
+        // No welcome screen - just a helpful message
+        return `
+          <div class="dashboard-empty-state" style="padding: 24px;">
+            No projects yet. Ask the Architect to create your first project.
           </div>
         `;
-        return;
       }
 
-      content.innerHTML = `
-        <div class="projects-container">
-          ${renderInfoHeader()}
-          ${renderKanbanGrid(projectsData)}
-          ${renderTerminalProjects(projectsData)}
-        </div>
+      // Render the existing project view
+      return `
+        ${renderKanbanGrid(projectsData)}
+        ${renderTerminalProjects(projectsData)}
       `;
     }
 
-    // Render the projects tab (entry point - loads data first)
-    async function renderProjectsTab() {
+    // Create new utility shell (quick action button)
+    async function createNewShell() {
+      try {
+        const response = await fetch('/api/tabs/shell', { method: 'POST' });
+        const data = await response.json();
+        if (!data.success && data.error) {
+          showToast(data.error || 'Failed to create shell', 'error');
+          return;
+        }
+        await refresh();
+        if (data.id) {
+          selectTab(`shell-${data.id}`);
+        }
+        showToast('Shell created', 'success');
+      } catch (err) {
+        showToast('Network error: ' + err.message, 'error');
+      }
+    }
+
+    // Create new worktree shell (quick action button)
+    async function createNewWorktreeShell() {
+      const branch = prompt('Branch name (leave empty for temp worktree):');
+      if (branch === null) return; // User cancelled
+
+      try {
+        const response = await fetch('/api/tabs/shell', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ worktree: true, branch: branch || undefined })
+        });
+        const data = await response.json();
+        if (!data.success && data.error) {
+          showToast(data.error || 'Failed to create worktree shell', 'error');
+          return;
+        }
+        await refresh();
+        // Auto-select the newly created tab (consistent with createNewShell behavior)
+        if (data.id) {
+          selectTab(`shell-${data.id}`);
+        }
+        showToast('Worktree shell created', 'success');
+      } catch (err) {
+        showToast('Network error: ' + err.message, 'error');
+      }
+    }
+
+    // Render the dashboard tab (entry point - loads data first)
+    async function renderDashboardTab() {
       const content = document.getElementById('tab-content');
-      content.innerHTML = '<div class="projects-container"><p style="color: var(--text-muted);">Loading projects...</p></div>';
+      content.innerHTML = '<div class="dashboard-container"><p style="color: var(--text-muted); padding: 16px;">Loading dashboard...</p></div>';
 
-      await loadProjectlist();
-      renderProjectsTabContent();
+      // Load both projectlist and files tree in parallel
+      await Promise.all([
+        loadProjectlist(),
+        loadFilesTreeIfNeeded()
+      ]);
+
+      renderDashboardTabContent();
       checkStarterMode(); // Update polling state after initial load
     }
 
+    // Load files tree if not already loaded
+    async function loadFilesTreeIfNeeded() {
+      if (!filesTreeLoaded) {
+        await loadFilesTree();
+      }
+    }
+
+    // Legacy function for backward compatibility (still used by polling)
+    function renderProjectsTabContent() {
+      // If dashboard tab is active, re-render dashboard instead
+      if (activeTabId === 'dashboard') {
+        renderDashboardTabContent();
+      }
+    }
+
+    // Legacy function alias
+    async function renderProjectsTab() {
+      await renderDashboardTab();
+    }
+
     // Load projectlist.md from disk
     async function loadProjectlist() {
       try {
@@ -3282,8 +3644,8 @@
 
     // Poll projectlist for changes (every 5 seconds)
     async function pollProjectlist() {
-      // Only poll if projects tab is active
-      if (activeTabId !== 'projects') return;
+      // Only poll if dashboard tab is active
+      if (activeTabId !== 'dashboard') return;
 
       try {
         const response = await fetch('/file?path=codev/projectlist.md');