@cluesmith/codev 1.3.0 → 1.4.0

package/templates/dashboard-split.html

@@ -1288,6 +1288,198 @@
       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>
@@ -1516,11 +1708,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',
+        id: 'dashboard',
+        type: 'dashboard',
+        name: 'Dashboard',
         closeable: false
       });
 
@@ -1569,7 +1761,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 +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';
       }
     }
 
@@ -1663,7 +1855,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,12 +1954,12 @@
         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;
       }
@@ -3113,13 +3305,26 @@
       } 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();
+        }
+      } else if (activeTabId === 'files') {
+        renderFilesTabContent();
+      }
     }
 
     // Collapse all folders
     function collapseAllFolders() {
       filesTreeExpanded.clear();
-      renderFilesTabContent();
+      rerenderFilesBrowser();
     }
 
     // Expand all folders
@@ -3135,13 +3340,13 @@
         }
       }
       collectPaths(filesTreeData);
-      renderFilesTabContent();
+      rerenderFilesBrowser();
     }
 
     // Refresh files tree
     async function refreshFilesTree() {
       await loadFilesTree();
-      renderFilesTabContent();
+      rerenderFilesBrowser();
       showToast('Files refreshed', 'success');
     }
 
@@ -3197,47 +3402,209 @@
       `;
     }
 
-    // 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 {
@@ -3282,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');