@cluesmith/codev 1.2.3 → 1.4.0

package/templates/dashboard-split.html

@@ -1156,6 +1156,330 @@
     .tab.tab-uncloseable .close {
       display: none;
     }
+
+    /* Files Tab Styles (Spec 0055) */
+    .files-container {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .files-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+    }
+
+    .files-header-title {
+      font-size: 12px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .files-header-actions {
+      display: flex;
+      gap: 4px;
+    }
+
+    .files-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;
+    }
+
+    .files-header-actions button:hover {
+      background: var(--tab-hover);
+      color: var(--text-primary);
+    }
+
+    .files-tree {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 0;
+    }
+
+    .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;
+    }
+
+    .files-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      color: var(--text-muted);
+      font-size: 13px;
+    }
+
+    .files-error {
+      padding: 16px;
+      margin: 8px;
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid var(--status-error);
+      border-radius: 6px;
+      color: var(--text-secondary);
+      font-size: 13px;
+    }
+
+    /* Dashboard Tab Styles (Spec 0057) */
+    .dashboard-container {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .dashboard-header {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      padding: 16px;
+      flex-shrink: 0;
+    }
+
+    @media (max-width: 900px) {
+      .dashboard-header {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .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;
+    }
+
+    .dashboard-column-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      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;
+    }
+
+    .dashboard-column-header .header-actions {
+      display: flex;
+      gap: 4px;
+    }
+
+    .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;
+    }
+
+    .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);
+    }
+
+    .dashboard-tab-item:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .dashboard-tab-item.active {
+      background: var(--accent);
+      color: white;
+    }
+
+    .dashboard-tab-item .tab-icon {
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    .dashboard-tab-item .tab-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .dashboard-actions {
+      flex-shrink: 0;
+      display: flex;
+      gap: 8px;
+    }
+
+    .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;
+      gap: 4px;
+    }
+
+    .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;
+    }
+
+    .dashboard-projects {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 16px 16px 16px;
+    }
+
+    /* 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>
 <body>
@@ -1183,7 +1507,6 @@
         </button>
         <div class="overflow-menu hidden" id="overflow-menu" role="menu"></div>
         <div class="add-buttons">
-          <button class="add-btn" onclick="showFileDialog()" title="Open file">+ 📄</button>
           <button class="add-btn" onclick="spawnBuilder()" title="Spawn worktree builder">+ 🔨</button>
           <button class="add-btn" onclick="spawnShell()" title="New shell">+ >_</button>
         </div>
@@ -1374,16 +1697,30 @@
     let projectlistError = null;
     let projectlistDebounce = null;
 
+    // Files tab state (Spec 0055)
+    let filesTreeData = [];
+    let filesTreeExpanded = new Set();  // Set of expanded folder paths
+    let filesTreeError = null;
+    let filesTreeLoaded = false;
+
     // Build tabs from initial state
     function buildTabsFromState() {
       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',
+        id: 'dashboard',
+        type: 'dashboard',
+        name: 'Dashboard',
+        closeable: false
+      });
+
+      // Files tab is second and uncloseable (Spec 0055)
+      tabs.push({
+        id: 'files',
+        type: 'files',
+        name: 'Files',
         closeable: false
       });
 
@@ -1424,7 +1761,7 @@
 
       // Detect new tabs and auto-switch to them (skip projects tab)
       for (const tab of tabs) {
-        if (tab.id !== 'projects' && !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;
@@ -1434,9 +1771,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';
       }
     }
 
@@ -1518,7 +1855,8 @@
     // Get tab icon
     function getTabIcon(type) {
       switch (type) {
-        case 'projects': return '📋';
+        case 'dashboard': return '📋';
+        case 'files': return '📁';
         case 'file': return '📄';
         case 'builder': return '🔨';
         case 'shell': return '>_';
@@ -1616,12 +1954,22 @@
         return;
       }
 
-      // Handle projects tab specially (no iframe, inline content)
-      if (tab.type === 'projects') {
-        if (currentTabType !== 'projects') {
-          currentTabType = 'projects';
+      // Handle dashboard tab specially (no iframe, inline content)
+      if (tab.type === 'dashboard') {
+        if (currentTabType !== 'dashboard') {
+          currentTabType = 'dashboard';
           currentTabPort = null;
-          renderProjectsTab();
+          renderDashboardTab();
+        }
+        return;
+      }
+
+      // Handle files tab specially (no iframe, inline content)
+      if (tab.type === 'files') {
+        if (currentTabType !== 'files') {
+          currentTabType = 'files';
+          currentTabPort = null;
+          renderFilesTab();
         }
         return;
       }
@@ -2810,6 +3158,238 @@
       `;
     }
 
+    // ========================================
+    // Files Tab Functions (Spec 0055)
+    // ========================================
+
+    // Load the file tree from the API
+    async function loadFilesTree() {
+      try {
+        const response = await fetch('/api/files');
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        filesTreeData = await response.json();
+        filesTreeError = null;
+        filesTreeLoaded = true;
+      } catch (err) {
+        console.error('Failed to load files tree:', err);
+        filesTreeError = 'Could not load file tree: ' + err.message;
+        filesTreeData = [];
+      }
+    }
+
+    // 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) {
+      return str
+        .replace(/\\/g, '\\\\')
+        .replace(/'/g, "\\'")
+        .replace(/"/g, '\\"')
+        .replace(/\n/g, '\\n')
+        .replace(/\r/g, '\\r');
+    }
+
+    // Render tree nodes recursively
+    function renderTreeNodes(nodes, depth) {
+      if (!nodes || nodes.length === 0) return '';
+
+      return nodes.map(node => {
+        const indent = depth * 16;
+        const isExpanded = filesTreeExpanded.has(node.path);
+        // Use escapeJsString for onclick handlers (handles quotes correctly)
+        // Use escapeHtml for data attributes and display text (handles XSS)
+        const jsPath = escapeJsString(node.path);
+
+        if (node.type === 'dir') {
+          const icon = isExpanded ? '▼' : '▶';
+          const childrenHtml = node.children && node.children.length > 0
+            ? `<div class="tree-children ${isExpanded ? '' : 'collapsed'}" data-path="${escapeHtml(node.path)}">${renderTreeNodes(node.children, depth + 1)}</div>`
+            : '';
+
+          return `
+            <div class="tree-item" data-type="dir" data-path="${escapeHtml(node.path)}" style="padding-left: ${indent + 8}px;" onclick="toggleFolder('${jsPath}')">
+              <span class="tree-item-icon folder-toggle">${icon}</span>
+              <span class="tree-item-name">${escapeHtml(node.name)}</span>
+            </div>
+            ${childrenHtml}
+          `;
+        } else {
+          return `
+            <div class="tree-item" data-type="file" data-path="${escapeHtml(node.path)}" style="padding-left: ${indent + 8}px;" onclick="openFileFromTree('${jsPath}')">
+              <span class="tree-item-icon">${getFileIcon(node.name)}</span>
+              <span class="tree-item-name">${escapeHtml(node.name)}</span>
+            </div>
+          `;
+        }
+      }).join('');
+    }
+
+    // Get file icon based on extension
+    function getFileIcon(filename) {
+      const ext = filename.split('.').pop().toLowerCase();
+      const iconMap = {
+        'js': '📜',
+        'ts': '📜',
+        'jsx': '⚛️',
+        'tsx': '⚛️',
+        'json': '{}',
+        'md': '📝',
+        'html': '🌐',
+        'css': '🎨',
+        'py': '🐍',
+        'sh': '⚙️',
+        'bash': '⚙️',
+        'yml': '⚙️',
+        'yaml': '⚙️',
+        'png': '🖼️',
+        'jpg': '🖼️',
+        'jpeg': '🖼️',
+        'gif': '🖼️',
+        'svg': '🖼️',
+      };
+      return iconMap[ext] || '📄';
+    }
+
+    // Toggle folder expanded/collapsed state
+    function toggleFolder(path) {
+      if (filesTreeExpanded.has(path)) {
+        filesTreeExpanded.delete(path);
+      } else {
+        filesTreeExpanded.add(path);
+      }
+      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();
+        }
+      } else if (activeTabId === 'files') {
+        renderFilesTabContent();
+      }
+    }
+
+    // Collapse all folders
+    function collapseAllFolders() {
+      filesTreeExpanded.clear();
+      rerenderFilesBrowser();
+    }
+
+    // Expand all folders
+    function expandAllFolders() {
+      function collectPaths(nodes) {
+        for (const node of nodes) {
+          if (node.type === 'dir') {
+            filesTreeExpanded.add(node.path);
+            if (node.children) {
+              collectPaths(node.children);
+            }
+          }
+        }
+      }
+      collectPaths(filesTreeData);
+      rerenderFilesBrowser();
+    }
+
+    // Refresh files tree
+    async function refreshFilesTree() {
+      await loadFilesTree();
+      rerenderFilesBrowser();
+      showToast('Files refreshed', 'success');
+    }
+
+    // Open file from tree click
+    async function openFileFromTree(filePath) {
+      try {
+        // Check if file is already open
+        const existingTab = tabs.find(t => t.type === 'file' && t.path === filePath);
+        if (existingTab) {
+          selectTab(existingTab.id);
+          return;
+        }
+
+        // Open the file via API
+        const response = await fetch('/api/tabs/file', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path: filePath })
+        });
+
+        if (!response.ok) {
+          throw new Error(await response.text());
+        }
+
+        // Refresh state and switch to the new tab
+        await refresh();
+
+        // Find and select the new file tab
+        const newTab = tabs.find(t => t.type === 'file' && t.path === filePath);
+        if (newTab) {
+          selectTab(newTab.id);
+        }
+
+        showToast(`Opened ${getFileName(filePath)}`, 'success');
+      } catch (err) {
+        showToast('Failed to open file: ' + err.message, 'error');
+      }
+    }
+
+    // ========================================
+    // Projects Tab Functions (Spec 0045)
+    // ========================================
+
     // Render the info header with helpful links
     function renderInfoHeader() {
       return `
@@ -2817,52 +3397,214 @@
           <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/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>
+          <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>
         </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">
+          <div class="dashboard-header">
+            <!-- Left Column: Tabs -->
+            <div class="dashboard-column">
+              <div class="dashboard-column-header">
+                <h3>Tabs</h3>
+              </div>
+              <div class="dashboard-tabs-list" id="dashboard-tabs-list">
+                ${renderDashboardTabsList()}
+              </div>
+              <div class="dashboard-actions">
+                <button class="btn-action" onclick="createNewShell()" title="New utility shell">+ New Shell</button>
+                <button class="btn-action" onclick="createNewWorktreeShell()" title="New worktree shell">+ New Worktree</button>
+              </div>
+            </div>
+            <!-- Right Column: Files -->
+            <div class="dashboard-column">
+              <div class="dashboard-column-header">
+                <h3>Files</h3>
+                <div class="header-actions">
+                  <button onclick="collapseAllFolders()" title="Collapse All">⊟</button>
+                  <button onclick="expandAllFolders()" title="Expand All">⊞</button>
+                </div>
+              </div>
+              <div class="dashboard-files-list" id="dashboard-files-list">
+                ${renderDashboardFilesBrowser()}
+              </div>
+            </div>
+          </div>
+          <div class="dashboard-projects" id="dashboard-projects">
+            ${renderDashboardProjectsSection()}
+          </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 (unchanged)
+      return `
+        ${renderInfoHeader()}
+        ${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 {
@@ -2907,8 +3649,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');