claude-code-workflow 6.0.0

package/ccw/src/templates/dashboard-js/views/session-detail.js

@@ -0,0 +1,770 @@
+// ============================================
+// SESSION DETAIL VIEW
+// ============================================
+// Standard workflow session detail page rendering
+
+function showSessionDetailPage(sessionKey) {
+  const session = sessionDataStore[sessionKey];
+  if (!session) return;
+
+  currentView = 'sessionDetail';
+  currentSessionDetailKey = sessionKey;
+  updateContentTitle();
+
+  // Hide stats grid and carousel on detail pages
+  hideStatsAndCarousel();
+
+  const container = document.getElementById('mainContent');
+  const sessionType = session.type || 'workflow';
+
+  // Render specialized pages for review and test-fix sessions
+  if (sessionType === 'review' || sessionType === 'review-cycle') {
+    container.innerHTML = renderReviewSessionDetailPage(session);
+    initReviewSessionPage(session);
+    return;
+  }
+
+  if (sessionType === 'test-fix' || sessionType === 'fix') {
+    container.innerHTML = renderFixSessionDetailPage(session);
+    initFixSessionPage(session);
+    return;
+  }
+
+  // Default workflow session detail page
+  const tasks = session.tasks || [];
+  const completed = tasks.filter(t => t.status === 'completed').length;
+  const inProgress = tasks.filter(t => t.status === 'in_progress').length;
+  const pending = tasks.filter(t => t.status === 'pending').length;
+  const isActive = session._isActive !== false;
+
+  container.innerHTML = `
+    <div class="session-detail-page">
+      <!-- Header -->
+      <div class="detail-header">
+        <button class="btn-back" onclick="goBackToSessions()">
+          <span class="back-icon">←</span>
+          <span>Back to Sessions</span>
+        </button>
+        <div class="detail-title-row">
+          <h2 class="detail-session-id">${escapeHtml(session.session_id)}</h2>
+          <div class="detail-badges">
+            <span class="session-type-badge ${session.type || 'workflow'}">${session.type || 'workflow'}</span>
+            <span class="session-status ${isActive ? 'active' : 'archived'}">
+              ${isActive ? 'ACTIVE' : 'ARCHIVED'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Session Info Bar -->
+      <div class="detail-info-bar">
+        <div class="info-item">
+          <span class="info-label">Created:</span>
+          <span class="info-value">${formatDate(session.created_at)}</span>
+        </div>
+        ${session.archived_at ? `
+          <div class="info-item">
+            <span class="info-label">Archived:</span>
+            <span class="info-value">${formatDate(session.archived_at)}</span>
+          </div>
+        ` : ''}
+        <div class="info-item">
+          <span class="info-label">Project:</span>
+          <span class="info-value">${escapeHtml(session.project || '-')}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">Tasks:</span>
+          <span class="info-value">${completed}/${tasks.length} completed</span>
+        </div>
+      </div>
+
+      <!-- Tab Navigation -->
+      <div class="detail-tabs">
+        <button class="detail-tab active" data-tab="tasks" onclick="switchDetailTab('tasks')">
+          <span class="tab-icon">📋</span>
+          <span class="tab-text">Tasks</span>
+          <span class="tab-count">${tasks.length}</span>
+        </button>
+        <button class="detail-tab" data-tab="context" onclick="switchDetailTab('context')">
+          <span class="tab-icon">📦</span>
+          <span class="tab-text">Context</span>
+        </button>
+        <button class="detail-tab" data-tab="summary" onclick="switchDetailTab('summary')">
+          <span class="tab-icon">📝</span>
+          <span class="tab-text">Summary</span>
+        </button>
+        <button class="detail-tab" data-tab="impl-plan" onclick="switchDetailTab('impl-plan')">
+          <span class="tab-icon">📐</span>
+          <span class="tab-text">IMPL Plan</span>
+        </button>
+<button class="detail-tab" data-tab="conflict" onclick="switchDetailTab('conflict')">          <span class="tab-icon">⚖️</span>          <span class="tab-text">Conflict</span>        </button>
+        ${session.hasReview ? `
+          <button class="detail-tab" data-tab="review" onclick="switchDetailTab('review')">
+            <span class="tab-icon">🔍</span>
+            <span class="tab-text">Review</span>
+          </button>
+        ` : ''}
+      </div>
+
+      <!-- Tab Content -->
+      <div class="detail-tab-content" id="detailTabContent">
+        ${renderTasksTab(session, tasks, completed, inProgress, pending)}
+      </div>
+    </div>
+  `;
+}
+
+function goBackToSessions() {
+  currentView = 'sessions';
+  currentSessionDetailKey = null;
+  updateContentTitle();
+  showStatsAndSearch();
+  renderSessions();
+}
+
+function switchDetailTab(tabName) {
+  // Update active tab
+  document.querySelectorAll('.detail-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.tab === tabName);
+  });
+
+  const session = sessionDataStore[currentSessionDetailKey];
+  if (!session) return;
+
+  const contentArea = document.getElementById('detailTabContent');
+  const tasks = session.tasks || [];
+  const completed = tasks.filter(t => t.status === 'completed').length;
+  const inProgress = tasks.filter(t => t.status === 'in_progress').length;
+  const pending = tasks.filter(t => t.status === 'pending').length;
+
+  switch (tabName) {
+    case 'tasks':
+      contentArea.innerHTML = renderTasksTab(session, tasks, completed, inProgress, pending);
+      break;
+    case 'context':
+      loadAndRenderContextTab(session, contentArea);
+      break;
+    case 'summary':
+      loadAndRenderSummaryTab(session, contentArea);
+      break;
+    case 'impl-plan':
+      loadAndRenderImplPlanTab(session, contentArea);
+      break;
+    case 'review':
+      loadAndRenderReviewTab(session, contentArea);
+      break;
+case 'conflict':      loadAndRenderConflictTab(session, contentArea);      break;
+  }
+}
+
+function renderTasksTab(session, tasks, completed, inProgress, pending) {
+  // Populate drawer tasks for click-to-open functionality
+  currentDrawerTasks = tasks;
+
+  // Auto-load full task details in server mode
+  if (window.SERVER_MODE && session.path) {
+    // Schedule auto-load after DOM render
+    setTimeout(() => loadFullTaskDetails(), 50);
+  }
+
+  // Show task list with loading state or basic list
+  const showLoading = window.SERVER_MODE && session.path;
+
+  return `
+    <div class="tasks-tab-content">
+      <!-- Combined Stats & Actions Bar -->
+      <div class="task-toolbar">
+        <div class="task-stats-bar">
+          <span class="task-stat completed">✓ ${completed} completed</span>
+          <span class="task-stat in-progress">⟳ ${inProgress} in progress</span>
+          <span class="task-stat pending">○ ${pending} pending</span>
+        </div>
+        <div class="toolbar-divider"></div>
+        <div class="task-bulk-actions">
+          <span class="bulk-label">Quick Actions:</span>
+          <button class="bulk-action-btn" onclick="bulkSetAllStatus('pending')" title="Set all tasks to pending">
+            <span class="bulk-icon">○</span> All Pending
+          </button>
+          <button class="bulk-action-btn" onclick="bulkSetAllStatus('in_progress')" title="Set all tasks to in progress">
+            <span class="bulk-icon">⟳</span> All In Progress
+          </button>
+          <button class="bulk-action-btn completed" onclick="bulkSetAllStatus('completed')" title="Set all tasks to completed">
+            <span class="bulk-icon">✓</span> All Completed
+          </button>
+        </div>
+      </div>
+
+      <div class="tasks-list" id="tasksListContent">
+        ${showLoading ? `
+          <div class="tab-loading">Loading task details...</div>
+        ` : (tasks.length === 0 ? `
+          <div class="tab-empty-state">
+            <div class="empty-icon">📋</div>
+            <div class="empty-title">No Tasks</div>
+            <div class="empty-text">This session has no tasks defined.</div>
+          </div>
+        ` : tasks.map(task => renderDetailTaskItem(task)).join(''))}
+      </div>
+    </div>
+  `;
+}
+
+async function loadFullTaskDetails() {
+  const session = sessionDataStore[currentSessionDetailKey];
+  if (!session || !window.SERVER_MODE || !session.path) return;
+
+  const tasksContainer = document.getElementById('tasksListContent');
+  tasksContainer.innerHTML = '<div class="tab-loading">Loading full task details...</div>';
+
+  try {
+    const response = await fetch(`/api/session-detail?path=${encodeURIComponent(session.path)}&type=tasks`);
+    if (response.ok) {
+      const data = await response.json();
+      if (data.tasks && data.tasks.length > 0) {
+        // Populate drawer tasks for click-to-open functionality
+        currentDrawerTasks = data.tasks;
+        tasksContainer.innerHTML = data.tasks.map(task => renderDetailTaskItem(task)).join('');
+      } else {
+        tasksContainer.innerHTML = `
+          <div class="tab-empty-state">
+            <div class="empty-icon">📋</div>
+            <div class="empty-title">No Task Files</div>
+            <div class="empty-text">No IMPL-*.json files found in .task/</div>
+          </div>
+        `;
+      }
+    }
+  } catch (err) {
+    tasksContainer.innerHTML = `<div class="tab-error">Failed to load tasks: ${err.message}</div>`;
+  }
+}
+
+function renderDetailTaskItem(task) {
+  const taskId = task.task_id || task.id || 'Unknown';
+  const status = task.status || 'pending';
+
+  // Status options for dropdown
+  const statusOptions = ['pending', 'in_progress', 'completed'];
+
+  return `
+    <div class="detail-task-item ${status} status-${status}" data-task-id="${escapeHtml(taskId)}">
+      <div class="task-item-header">
+        <span class="task-id-badge">${escapeHtml(taskId)}</span>
+        <span class="task-title" onclick="openTaskDrawer('${escapeHtml(taskId)}')" style="cursor: pointer; flex: 1;">
+          ${escapeHtml(task.title || task.meta?.title || 'Untitled')}
+        </span>
+        <div class="task-status-control" onclick="event.stopPropagation()">
+          <select class="task-status-select ${status}" onchange="updateSingleTaskStatus('${escapeHtml(taskId)}', this.value)" data-current="${status}">
+            ${statusOptions.map(opt => `
+              <option value="${opt}" ${opt === status ? 'selected' : ''}>${formatStatusLabel(opt)}</option>
+            `).join('')}
+          </select>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function formatStatusLabel(status) {
+  const labels = {
+    'pending': '○ Pending',
+    'in_progress': '⟳ In Progress',
+    'completed': '✓ Completed'
+  };
+  return labels[status] || status;
+}
+
+function getMetaPreview(task) {
+  const meta = task.meta || {};
+  const parts = [];
+  if (meta.type) parts.push(meta.type);
+  if (meta.action) parts.push(meta.action);
+  if (meta.scope) parts.push(meta.scope);
+  return parts.join(' | ') || 'No meta';
+}
+
+function getTaskContextPreview(task) {
+  const items = [];
+  const ctx = task.context || {};
+  if (ctx.requirements?.length) items.push(`${ctx.requirements.length} reqs`);
+  if (ctx.focus_paths?.length) items.push(`${ctx.focus_paths.length} paths`);
+  if (task.modification_points?.length) items.push(`${task.modification_points.length} mods`);
+  if (task.description) items.push('desc');
+  return items.join(' | ') || 'No context';
+}
+
+function getFlowPreview(task) {
+  const steps = task.flow_control?.implementation_approach?.length || task.implementation?.length || 0;
+  return steps > 0 ? `${steps} steps` : 'No steps';
+}
+
+function renderTaskContext(task) {
+  const sections = [];
+  const ctx = task.context || {};
+
+  // Description
+  if (task.description) {
+    sections.push(`
+      <div class="context-field">
+        <label>description:</label>
+        <p>${escapeHtml(task.description)}</p>
+      </div>
+    `);
+  }
+
+  // Requirements
+  if (ctx.requirements?.length) {
+    sections.push(`
+      <div class="context-field">
+        <label>requirements:</label>
+        <ul>${ctx.requirements.map(r => `<li>${escapeHtml(r)}</li>`).join('')}</ul>
+      </div>
+    `);
+  }
+
+  // Focus paths
+  if (ctx.focus_paths?.length) {
+    sections.push(`
+      <div class="context-field">
+        <label>focus_paths:</label>
+        <div class="path-tags">${ctx.focus_paths.map(p => `<span class="path-tag">${escapeHtml(p)}</span>`).join('')}</div>
+      </div>
+    `);
+  }
+
+  // Modification points
+  if (task.modification_points?.length) {
+    sections.push(`
+      <div class="context-field">
+        <label>modification_points:</label>
+        <div class="mod-points">
+          ${task.modification_points.map(m => `
+            <div class="mod-point">
+              <span class="array-item path-item">${escapeHtml(m.file || m)}</span>
+              ${m.target ? `<span class="mod-target">→ ${escapeHtml(m.target)}</span>` : ''}
+              ${m.change ? `<p class="mod-change">${escapeHtml(m.change)}</p>` : ''}
+            </div>
+          `).join('')}
+        </div>
+      </div>
+    `);
+  }
+
+  // Acceptance criteria
+  const acceptance = ctx.acceptance || task.acceptance || [];
+  if (acceptance.length) {
+    sections.push(`
+      <div class="context-field">
+        <label>acceptance:</label>
+        <ul>${acceptance.map(a => `<li>${escapeHtml(a)}</li>`).join('')}</ul>
+      </div>
+    `);
+  }
+
+  return sections.length > 0
+    ? `<div class="context-fields">${sections.join('')}</div>`
+    : '<div class="field-value json-value-null">No context data</div>';
+}
+
+function renderFlowControl(task) {
+  const sections = [];
+  const fc = task.flow_control || {};
+
+  // Implementation approach
+  const steps = fc.implementation_approach || task.implementation || [];
+  if (steps.length) {
+    sections.push(`
+      <div class="context-field">
+        <label>implementation_approach:</label>
+        <ol class="impl-steps">
+          ${steps.map(s => `<li>${escapeHtml(typeof s === 'string' ? s : s.step || s.action || JSON.stringify(s))}</li>`).join('')}
+        </ol>
+      </div>
+    `);
+  }
+
+  // Pre-analysis
+  const preAnalysis = fc.pre_analysis || task.pre_analysis || [];
+  if (preAnalysis.length) {
+    sections.push(`
+      <div class="context-field">
+        <label>pre_analysis:</label>
+        <ul>${preAnalysis.map(p => `<li>${escapeHtml(p)}</li>`).join('')}</ul>
+      </div>
+    `);
+  }
+
+  // Target files
+  const targetFiles = fc.target_files || task.target_files || [];
+  if (targetFiles.length) {
+    sections.push(`
+      <div class="context-field">
+        <label>target_files:</label>
+        <div class="path-tags">${targetFiles.map(f => `<span class="path-tag">${escapeHtml(f)}</span>`).join('')}</div>
+      </div>
+    `);
+  }
+
+  return sections.length > 0
+    ? `<div class="context-fields">${sections.join('')}</div>`
+    : '<div class="field-value json-value-null">No flow control data</div>';
+}
+
+async function loadAndRenderContextTab(session, contentArea) {
+  contentArea.innerHTML = '<div class="tab-loading">Loading context data...</div>';
+
+  try {
+    // Try to load context data from server (includes context, explorations, conflictResolution)
+    if (window.SERVER_MODE && session.path) {
+      const response = await fetch(`/api/session-detail?path=${encodeURIComponent(session.path)}&type=context`);
+      if (response.ok) {
+        const data = await response.json();
+        contentArea.innerHTML = renderSessionContextContent(data.context, data.explorations, data.conflictResolution);
+
+        // Initialize collapsible sections for explorations
+        initCollapsibleSections(contentArea);
+        return;
+      }
+    }
+    // Fallback: show placeholder
+    contentArea.innerHTML = `
+      <div class="tab-empty-state">
+        <div class="empty-icon">📦</div>
+        <div class="empty-title">Context Data</div>
+        <div class="empty-text">Context data will be loaded from context-package.json</div>
+      </div>
+    `;
+  } catch (err) {
+    contentArea.innerHTML = `<div class="tab-error">Failed to load context: ${err.message}</div>`;
+  }
+}
+
+async function loadAndRenderSummaryTab(session, contentArea) {
+  contentArea.innerHTML = '<div class="tab-loading">Loading summaries...</div>';
+
+  try {
+    if (window.SERVER_MODE && session.path) {
+      const response = await fetch(`/api/session-detail?path=${encodeURIComponent(session.path)}&type=summary`);
+      if (response.ok) {
+        const data = await response.json();
+        contentArea.innerHTML = renderSummaryContent(data.summaries);
+        return;
+      }
+    }
+    contentArea.innerHTML = `
+      <div class="tab-empty-state">
+        <div class="empty-icon">📝</div>
+        <div class="empty-title">Summaries</div>
+        <div class="empty-text">Session summaries will be loaded from .summaries/</div>
+      </div>
+    `;
+  } catch (err) {
+    contentArea.innerHTML = `<div class="tab-error">Failed to load summaries: ${err.message}</div>`;
+  }
+}
+
+async function loadAndRenderImplPlanTab(session, contentArea) {
+  contentArea.innerHTML = '<div class="tab-loading">Loading IMPL plan...</div>';
+
+  try {
+    if (window.SERVER_MODE && session.path) {
+      const response = await fetch(`/api/session-detail?path=${encodeURIComponent(session.path)}&type=impl-plan`);
+      if (response.ok) {
+        const data = await response.json();
+        contentArea.innerHTML = renderImplPlanContent(data.implPlan);
+        return;
+      }
+    }
+    contentArea.innerHTML = `
+      <div class="tab-empty-state">
+        <div class="empty-icon">📐</div>
+        <div class="empty-title">IMPL Plan</div>
+        <div class="empty-text">IMPL plan will be loaded from IMPL_PLAN.md</div>
+      </div>
+    `;
+  } catch (err) {
+    contentArea.innerHTML = `<div class="tab-error">Failed to load IMPL plan: ${err.message}</div>`;
+  }
+}
+
+async function loadAndRenderReviewTab(session, contentArea) {
+  contentArea.innerHTML = '<div class="tab-loading">Loading review data...</div>';
+
+  try {
+    if (window.SERVER_MODE && session.path) {
+      const response = await fetch(`/api/session-detail?path=${encodeURIComponent(session.path)}&type=review`);
+      if (response.ok) {
+        const data = await response.json();
+        contentArea.innerHTML = renderReviewContent(data.review);
+        return;
+      }
+    }
+    contentArea.innerHTML = `
+      <div class="tab-empty-state">
+        <div class="empty-icon">🔍</div>
+        <div class="empty-title">Review Data</div>
+        <div class="empty-text">Review data will be loaded from review files</div>
+      </div>
+    `;
+  } catch (err) {
+    contentArea.innerHTML = `<div class="tab-error">Failed to load review: ${err.message}</div>`;
+  }
+}
+
+function showRawSessionJson(sessionKey) {
+  const session = sessionDataStore[sessionKey];
+  if (!session) return;
+
+  // Close current modal
+  const currentModal = document.querySelector('.session-modal-overlay');
+  if (currentModal) currentModal.remove();
+
+  // Show JSON modal
+  const overlay = document.createElement('div');
+  overlay.className = 'json-modal-overlay active';
+  overlay.innerHTML = `
+    <div class="json-modal">
+      <div class="json-modal-header">
+        <div class="json-modal-title">
+          <span class="session-id-badge">${escapeHtml(session.session_id)}</span>
+          <span>Session JSON</span>
+        </div>
+        <button class="json-modal-close" onclick="closeJsonModal(this)">&times;</button>
+      </div>
+      <div class="json-modal-body">
+        <pre class="json-modal-content">${escapeHtml(JSON.stringify(session, null, 2))}</pre>
+      </div>
+      <div class="json-modal-footer">
+        <button class="json-modal-copy" onclick="copyJsonToClipboard(this)">Copy to Clipboard</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+
+  // Close on overlay click
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) closeJsonModal();
+  });
+}
+
+// ==========================================
+// TASK STATUS MANAGEMENT
+// ==========================================
+
+async function updateSingleTaskStatus(taskId, newStatus) {
+  const session = sessionDataStore[currentSessionDetailKey];
+  if (!session || !window.SERVER_MODE || !session.path) {
+    showToast('Status update requires server mode', 'error');
+    return;
+  }
+
+  try {
+    const response = await fetch('/api/update-task-status', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        sessionPath: session.path,
+        taskId: taskId,
+        newStatus: newStatus
+      })
+    });
+
+    const result = await response.json();
+    if (result.success) {
+      // Update UI
+      updateTaskItemUI(taskId, newStatus);
+      updateTaskStatsBar();
+      showToast(`Task ${taskId} → ${formatStatusLabel(newStatus)}`, 'success');
+    } else {
+      showToast(result.error || 'Failed to update status', 'error');
+      // Revert select
+      revertTaskSelect(taskId);
+    }
+  } catch (error) {
+    showToast('Error updating status: ' + error.message, 'error');
+    revertTaskSelect(taskId);
+  }
+}
+
+async function bulkSetAllStatus(newStatus) {
+  const session = sessionDataStore[currentSessionDetailKey];
+  if (!session || !window.SERVER_MODE || !session.path) {
+    showToast('Bulk update requires server mode', 'error');
+    return;
+  }
+
+  const taskIds = currentDrawerTasks.map(t => t.task_id || t.id);
+  if (taskIds.length === 0) return;
+
+  if (!confirm(`Set all ${taskIds.length} tasks to "${formatStatusLabel(newStatus)}"?`)) {
+    return;
+  }
+
+  try {
+    const response = await fetch('/api/bulk-update-task-status', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        sessionPath: session.path,
+        taskIds: taskIds,
+        newStatus: newStatus
+      })
+    });
+
+    const result = await response.json();
+    if (result.success) {
+      // Update all task UIs
+      taskIds.forEach(id => updateTaskItemUI(id, newStatus));
+      updateTaskStatsBar();
+      showToast(`All ${taskIds.length} tasks → ${formatStatusLabel(newStatus)}`, 'success');
+    } else {
+      showToast(result.error || 'Failed to bulk update', 'error');
+    }
+  } catch (error) {
+    showToast('Error in bulk update: ' + error.message, 'error');
+  }
+}
+
+async function bulkSetPendingToInProgress() {
+  const session = sessionDataStore[currentSessionDetailKey];
+  if (!session || !window.SERVER_MODE || !session.path) {
+    showToast('Bulk update requires server mode', 'error');
+    return;
+  }
+
+  const pendingTaskIds = currentDrawerTasks
+    .filter(t => (t.status || 'pending') === 'pending')
+    .map(t => t.task_id || t.id);
+
+  if (pendingTaskIds.length === 0) {
+    showToast('No pending tasks to start', 'info');
+    return;
+  }
+
+  try {
+    const response = await fetch('/api/bulk-update-task-status', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        sessionPath: session.path,
+        taskIds: pendingTaskIds,
+        newStatus: 'in_progress'
+      })
+    });
+
+    const result = await response.json();
+    if (result.success) {
+      pendingTaskIds.forEach(id => updateTaskItemUI(id, 'in_progress'));
+      updateTaskStatsBar();
+      showToast(`${pendingTaskIds.length} tasks: Pending → In Progress`, 'success');
+    } else {
+      showToast(result.error || 'Failed to update', 'error');
+    }
+  } catch (error) {
+    showToast('Error: ' + error.message, 'error');
+  }
+}
+
+async function bulkSetInProgressToCompleted() {
+  const session = sessionDataStore[currentSessionDetailKey];
+  if (!session || !window.SERVER_MODE || !session.path) {
+    showToast('Bulk update requires server mode', 'error');
+    return;
+  }
+
+  const inProgressTaskIds = currentDrawerTasks
+    .filter(t => t.status === 'in_progress')
+    .map(t => t.task_id || t.id);
+
+  if (inProgressTaskIds.length === 0) {
+    showToast('No in-progress tasks to complete', 'info');
+    return;
+  }
+
+  try {
+    const response = await fetch('/api/bulk-update-task-status', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        sessionPath: session.path,
+        taskIds: inProgressTaskIds,
+        newStatus: 'completed'
+      })
+    });
+
+    const result = await response.json();
+    if (result.success) {
+      inProgressTaskIds.forEach(id => updateTaskItemUI(id, 'completed'));
+      updateTaskStatsBar();
+      showToast(`${inProgressTaskIds.length} tasks: In Progress → Completed`, 'success');
+    } else {
+      showToast(result.error || 'Failed to update', 'error');
+    }
+  } catch (error) {
+    showToast('Error: ' + error.message, 'error');
+  }
+}
+
+function updateTaskItemUI(taskId, newStatus) {
+  const taskItem = document.querySelector(`.detail-task-item[data-task-id="${taskId}"]`);
+  if (!taskItem) return;
+
+  // Update classes
+  taskItem.className = `detail-task-item ${newStatus} status-${newStatus}`;
+
+  // Update select
+  const select = taskItem.querySelector('.task-status-select');
+  if (select) {
+    select.value = newStatus;
+    select.className = `task-status-select ${newStatus}`;
+    select.dataset.current = newStatus;
+  }
+
+  // Update drawer tasks data
+  const task = currentDrawerTasks.find(t => (t.task_id || t.id) === taskId);
+  if (task) {
+    task.status = newStatus;
+  }
+}
+
+function updateTaskStatsBar() {
+  const completed = currentDrawerTasks.filter(t => t.status === 'completed').length;
+  const inProgress = currentDrawerTasks.filter(t => t.status === 'in_progress').length;
+  const pending = currentDrawerTasks.filter(t => (t.status || 'pending') === 'pending').length;
+
+  const statsBar = document.querySelector('.task-stats-bar');
+  if (statsBar) {
+    statsBar.innerHTML = `
+      <span class="task-stat completed">✓ ${completed} completed</span>
+      <span class="task-stat in-progress">⟳ ${inProgress} in progress</span>
+      <span class="task-stat pending">○ ${pending} pending</span>
+    `;
+  }
+}
+
+function revertTaskSelect(taskId) {
+  const taskItem = document.querySelector(`.detail-task-item[data-task-id="${taskId}"]`);
+  if (!taskItem) return;
+
+  const select = taskItem.querySelector('.task-status-select');
+  if (select) {
+    select.value = select.dataset.current;
+  }
+}
+
+function showToast(message, type = 'info') {
+  // Remove existing toast
+  const existing = document.querySelector('.status-toast');
+  if (existing) existing.remove();
+
+  const toast = document.createElement('div');
+  toast.className = `status-toast ${type}`;
+  toast.textContent = message;
+  document.body.appendChild(toast);
+
+  // Auto-remove after 3 seconds
+  setTimeout(() => {
+    toast.classList.add('fade-out');
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+}