claude-code-workflow 6.3.28 → 6.3.29

package/ccw/src/templates/dashboard-js/views/lite-tasks.js

@@ -347,11 +347,8 @@ function extractTimelineFromSynthesis(synthesis) {
   return timeline;
 }
 
-// Track multi-cli toolbar state
-let isMultiCliToolbarExpanded = false;
-
 /**
- * Show multi-cli detail page with tabs
+ * Show multi-cli detail page with tabs (same layout as lite-plan)
  */
 function showMultiCliDetailPage(sessionKey) {
   const session = liteTaskDataStore[sessionKey];
@@ -364,115 +361,84 @@ function showMultiCliDetailPage(sessionKey) {
 
   const container = document.getElementById('mainContent');
   const metadata = session.metadata || {};
-  const discussionTopic = session.discussionTopic || {};
-  const latestSynthesis = session.latestSynthesis || discussionTopic;
+  const plan = session.plan || {};
+  // Use session.tasks (normalized from backend) with fallback to plan.tasks
+  const tasks = session.tasks?.length > 0 ? session.tasks : (plan.tasks || []);
   const roundCount = metadata.roundId || session.roundCount || 1;
-  const topicTitle = getI18nText(latestSynthesis.title) || session.topicTitle || 'Discussion Topic';
-  const status = latestSynthesis.status || session.status || 'analyzing';
+  const status = session.status || 'analyzing';
 
   container.innerHTML = `
-    <div class="session-detail-page multi-cli-detail-page multi-cli-detail-with-toolbar">
-      <!-- Main Content Area -->
-      <div class="multi-cli-main-content">
-        <!-- Header -->
-        <div class="detail-header">
-          <button class="btn-back" onclick="goBackToLiteTasks()">
-            <span class="back-icon">&larr;</span>
-            <span>${t('multiCli.backToList') || 'Back to Multi-CLI Plan'}</span>
-          </button>
-          <div class="detail-title-row">
-            <h2 class="detail-session-id"><i data-lucide="messages-square" class="w-5 h-5 inline mr-2"></i> ${escapeHtml(session.id)}</h2>
-            <div class="detail-badges">
-              <span class="session-type-badge multi-cli-plan">multi-cli-plan</span>
-              <span class="session-status-badge ${status}">${escapeHtml(status)}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Session Info Bar -->
-        <div class="detail-info-bar">
-          <div class="info-item">
-            <span class="info-label">${t('detail.created') || 'Created'}</span>
-            <span class="info-value">${formatDate(metadata.timestamp || session.createdAt)}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">${t('multiCli.roundCount') || 'Rounds'}</span>
-            <span class="info-value">${roundCount}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">${t('multiCli.topic') || 'Topic'}</span>
-            <span class="info-value">${escapeHtml(topicTitle)}</span>
+    <div class="session-detail-page lite-task-detail-page">
+      <!-- Header -->
+      <div class="detail-header">
+        <button class="btn-back" onclick="goBackToLiteTasks()">
+          <span class="back-icon">←</span>
+          <span>${t('multiCli.backToList') || 'Back to Multi-CLI Plan'}</span>
+        </button>
+        <div class="detail-title-row">
+          <h2 class="detail-session-id"><i data-lucide="messages-square" class="w-5 h-5 inline mr-2"></i> ${escapeHtml(session.id)}</h2>
+          <div class="detail-badges">
+            <span class="session-type-badge multi-cli-plan">MULTI-CLI</span>
           </div>
         </div>
+      </div>
 
-        <!-- Tab Navigation -->
-        <div class="detail-tabs">
-          <button class="detail-tab active" data-tab="planning" onclick="switchMultiCliDetailTab('planning')">
-            <span class="tab-icon"><i data-lucide="list-checks" class="w-4 h-4"></i></span>
-            <span class="tab-text">${t('multiCli.tab.planning') || 'Planning'}</span>
-          </button>
-          <button class="detail-tab" data-tab="discussion" onclick="switchMultiCliDetailTab('discussion')">
-            <span class="tab-icon"><i data-lucide="messages-square" class="w-4 h-4"></i></span>
-            <span class="tab-text">${t('multiCli.tab.discussion') || 'Discussion'}</span>
-            <span class="tab-count">${roundCount}</span>
-          </button>
-          <button class="detail-tab" data-tab="association" onclick="switchMultiCliDetailTab('association')">
-            <span class="tab-icon"><i data-lucide="link-2" class="w-4 h-4"></i></span>
-            <span class="tab-text">${t('multiCli.tab.association') || 'Association'}</span>
-          </button>
+      <!-- Session Info Bar -->
+      <div class="detail-info-bar">
+        <div class="info-item">
+          <span class="info-label">${t('detail.created') || 'Created'}</span>
+          <span class="info-value">${formatDate(metadata.timestamp || session.createdAt)}</span>
         </div>
-
-        <!-- Tab Content -->
-        <div class="detail-tab-content" id="multiCliDetailTabContent">
-          ${renderMultiCliPlanningTab(session)}
+        <div class="info-item">
+          <span class="info-label">${t('detail.tasks') || 'Tasks'}</span>
+          <span class="info-value">${tasks.length} ${t('session.tasks') || 'tasks'}</span>
         </div>
       </div>
 
-      <!-- Right Toolbar -->
-      <div class="multi-cli-toolbar ${isMultiCliToolbarExpanded ? 'expanded' : 'collapsed'}" id="multiCliToolbar">
-        <button class="toolbar-toggle-btn" onclick="toggleMultiCliToolbar()" title="${t('multiCli.toolbar.toggle') || 'Toggle Task Panel'}">
-          <i data-lucide="${isMultiCliToolbarExpanded ? 'panel-right-close' : 'panel-right-open'}" class="w-5 h-5"></i>
+      <!-- Tab Navigation (same as lite-plan) -->
+      <div class="detail-tabs">
+        <button class="detail-tab active" data-tab="tasks" onclick="switchMultiCliDetailTab('tasks')">
+          <span class="tab-icon"><i data-lucide="list-checks" class="w-4 h-4"></i></span>
+          <span class="tab-text">${t('tab.tasks') || 'Tasks'}</span>
+          <span class="tab-count">${tasks.length}</span>
         </button>
-        <div class="toolbar-content">
-          ${renderMultiCliToolbar(session)}
-        </div>
+        <button class="detail-tab" data-tab="discussion" onclick="switchMultiCliDetailTab('discussion')">
+          <span class="tab-icon"><i data-lucide="messages-square" class="w-4 h-4"></i></span>
+          <span class="tab-text">${t('multiCli.tab.discussion') || 'Discussion'}</span>
+          <span class="tab-count">${roundCount}</span>
+        </button>
+        <button class="detail-tab" data-tab="context" onclick="switchMultiCliDetailTab('context')">
+          <span class="tab-icon"><i data-lucide="package" class="w-4 h-4"></i></span>
+          <span class="tab-text">${t('tab.context') || 'Context'}</span>
+        </button>
+        <button class="detail-tab" data-tab="summary" onclick="switchMultiCliDetailTab('summary')">
+          <span class="tab-icon"><i data-lucide="file-text" class="w-4 h-4"></i></span>
+          <span class="tab-text">${t('tab.summary') || 'Summary'}</span>
+        </button>
+      </div>
+
+      <!-- Tab Content -->
+      <div class="detail-tab-content" id="multiCliDetailTabContent">
+        ${renderMultiCliTasksTab(session)}
       </div>
     </div>
   `;
 
-  // Initialize icons and collapsible sections
+  // Initialize icons, collapsible sections, and task click handlers
   setTimeout(() => {
     if (typeof lucide !== 'undefined') lucide.createIcons();
     initCollapsibleSections(container);
+    initMultiCliTaskClickHandlers();
   }, 50);
 }
 
-/**
- * Toggle multi-cli toolbar expanded/collapsed state
- */
-function toggleMultiCliToolbar() {
-  isMultiCliToolbarExpanded = !isMultiCliToolbarExpanded;
-  const toolbar = document.getElementById('multiCliToolbar');
-  const toggleBtn = toolbar?.querySelector('.toolbar-toggle-btn i');
-
-  if (toolbar) {
-    toolbar.classList.toggle('expanded', isMultiCliToolbarExpanded);
-    toolbar.classList.toggle('collapsed', !isMultiCliToolbarExpanded);
-
-    // Update icon
-    if (toggleBtn) {
-      toggleBtn.setAttribute('data-lucide', isMultiCliToolbarExpanded ? 'panel-right-close' : 'panel-right-open');
-      if (typeof lucide !== 'undefined') lucide.createIcons();
-    }
-  }
-}
-
 /**
  * Render the multi-cli toolbar content
  */
 function renderMultiCliToolbar(session) {
   const plan = session.plan;
-  const tasks = plan?.tasks || [];
+  // Use session.tasks (normalized from backend) with fallback to plan.tasks
+  const tasks = session.tasks?.length > 0 ? session.tasks : (plan?.tasks || []);
   const taskCount = tasks.length;
 
   let toolbarHtml = `
@@ -505,12 +471,12 @@ function renderMultiCliToolbar(session) {
     toolbarHtml += `
       <div class="toolbar-task-list">
         ${tasks.map((task, idx) => {
-          const taskTitle = task.title || task.summary || `Task ${idx + 1}`;
-          const taskScope = task.scope || '';
-          const taskId = `task-${idx}`;
+          const taskTitle = task.title || task.name || task.summary || `Task ${idx + 1}`;
+          const taskScope = task.meta?.scope || task.scope || '';
+          const taskIdValue = task.id || `T${idx + 1}`;
 
           return `
-            <div class="toolbar-task-item" onclick="scrollToMultiCliTask(${idx})" data-task-idx="${idx}">
+            <div class="toolbar-task-item" onclick="openToolbarTaskDrawer('${escapeHtml(session.id)}', '${escapeHtml(taskIdValue)}')" data-task-idx="${idx}">
               <span class="toolbar-task-num">#${idx + 1}</span>
               <div class="toolbar-task-info">
                 <span class="toolbar-task-title" title="${escapeHtml(taskTitle)}">${escapeHtml(taskTitle)}</span>
@@ -564,6 +530,13 @@ function scrollToMultiCliTask(taskIdx) {
   }
 }
 
+/**
+ * Open task drawer from toolbar (wrapper for openTaskDrawerForMultiCli)
+ */
+function openToolbarTaskDrawer(sessionId, taskId) {
+  openTaskDrawerForMultiCli(sessionId, taskId);
+}
+
 /**
  * Scroll to task element in the DOM
  */
@@ -672,21 +645,28 @@ function switchMultiCliDetailTab(tabName) {
   const contentArea = document.getElementById('multiCliDetailTabContent');
 
   switch (tabName) {
-    case 'planning':
-      contentArea.innerHTML = renderMultiCliPlanningTab(session);
+    case 'tasks':
+      contentArea.innerHTML = renderMultiCliTasksTab(session);
       break;
     case 'discussion':
       contentArea.innerHTML = renderMultiCliDiscussionSection(session);
       break;
-    case 'association':
-      contentArea.innerHTML = renderMultiCliAssociationSection(session);
-      break;
+    case 'context':
+      loadAndRenderMultiCliContextTab(session, contentArea);
+      return; // Early return as this is async
+    case 'summary':
+      loadAndRenderMultiCliSummaryTab(session, contentArea);
+      return; // Early return as this is async
   }
 
   // Re-initialize after tab switch
   setTimeout(() => {
     if (typeof lucide !== 'undefined') lucide.createIcons();
     initCollapsibleSections(contentArea);
+    // Initialize task click handlers for tasks tab
+    if (tabName === 'tasks') {
+      initMultiCliTaskClickHandlers();
+    }
   }, 50);
 }
 
@@ -695,222 +675,104 @@ function switchMultiCliDetailTab(tabName) {
 // ============================================
 
 /**
- * Render Discussion Topic tab
- * Shows: title, description, scope, keyQuestions, status, tags
+ * Render Tasks tab - displays plan summary + tasks (same style as lite-plan)
+ * Uses session.tasks (normalized tasks) with fallback to session.plan.tasks
  */
-function renderMultiCliTopicTab(session) {
-  const topic = session.discussionTopic || session.latestSynthesis?.discussionTopic || {};
-
-  if (!topic || Object.keys(topic).length === 0) {
-    return `
-      <div class="tab-empty-state">
-        <div class="empty-icon"><i data-lucide="message-circle" class="w-12 h-12"></i></div>
-        <div class="empty-title">${t('multiCli.empty.topic') || 'No Discussion Topic'}</div>
-        <div class="empty-text">${t('multiCli.empty.topicText') || 'No discussion topic data available for this session.'}</div>
-      </div>
-    `;
-  }
+function renderMultiCliTasksTab(session) {
+  const plan = session.plan || {};
+  // Use session.tasks (normalized from backend) with fallback to plan.tasks
+  const tasks = session.tasks?.length > 0 ? session.tasks : (plan.tasks || []);
 
-  const title = getI18nText(topic.title) || 'Untitled';
-  const description = getI18nText(topic.description) || '';
-  const scope = topic.scope || {};
-  const keyQuestions = topic.keyQuestions || [];
-  const status = topic.status || 'unknown';
-  const tags = topic.tags || [];
+  // Populate drawer tasks for click-to-open functionality
+  currentDrawerTasks = tasks;
 
   let sections = [];
 
-  // Title and Description
-  sections.push(`
-    <div class="multi-cli-topic-section">
-      <h3 class="multi-cli-topic-title">${escapeHtml(title)}</h3>
-      ${description ? `<p class="multi-cli-topic-description">${escapeHtml(description)}</p>` : ''}
-      <div class="topic-meta">
-        <span class="multi-cli-status ${status}">${escapeHtml(status)}</span>
-        ${tags.length ? tags.map(tag => `<span class="tag-badge">${escapeHtml(tag)}</span>`).join('') : ''}
-      </div>
-    </div>
-  `);
-
-  // Scope (included/excluded)
-  if (scope.included?.length || scope.excluded?.length) {
-    sections.push(`
-      <div class="multi-cli-section scope-section">
-        <h4 class="section-title"><i data-lucide="target" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.scope') || 'Scope'}</h4>
-        ${scope.included?.length ? `
-          <div class="scope-included">
-            <strong>${t('multiCli.scope.included') || 'Included'}:</strong>
-            <ul class="scope-list">
-              ${scope.included.map(item => `<li>${escapeHtml(getI18nText(item))}</li>`).join('')}
-            </ul>
-          </div>
-        ` : ''}
-        ${scope.excluded?.length ? `
-          <div class="scope-excluded">
-            <strong>${t('multiCli.scope.excluded') || 'Excluded'}:</strong>
-            <ul class="scope-list excluded">
-              ${scope.excluded.map(item => `<li>${escapeHtml(getI18nText(item))}</li>`).join('')}
-            </ul>
-          </div>
-        ` : ''}
-      </div>
-    `);
-  }
-
-  // Key Questions
-  if (keyQuestions.length) {
-    sections.push(`
-      <div class="multi-cli-section questions-section">
-        <h4 class="section-title"><i data-lucide="help-circle" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.keyQuestions') || 'Key Questions'}</h4>
-        <ol class="key-questions-list">
-          ${keyQuestions.map(q => `<li>${escapeHtml(getI18nText(q))}</li>`).join('')}
-        </ol>
-      </div>
-    `);
-  }
-
-  return `<div class="multi-cli-topic-tab">${sections.join('')}</div>`;
-}
-
-/**
- * Render Related Files tab
- * Shows: fileTree, impactSummary
- */
-function renderMultiCliFilesTab(session) {
-  // Use helper to extract files from synthesis data structure
-  const relatedFiles = extractFilesFromSynthesis(session.latestSynthesis);
-
-  if (!relatedFiles || (!relatedFiles.fileTree?.length && !relatedFiles.impactSummary?.length)) {
-    return `
-      <div class="tab-empty-state">
-        <div class="empty-icon"><i data-lucide="folder-tree" class="w-12 h-12"></i></div>
-        <div class="empty-title">${t('multiCli.empty.files') || 'No Related Files'}</div>
-        <div class="empty-text">${t('multiCli.empty.filesText') || 'No file analysis data available for this session.'}</div>
-      </div>
-    `;
-  }
-
-  const fileTree = relatedFiles.fileTree || [];
-  const impactSummary = relatedFiles.impactSummary || [];
-  const dependencyGraph = relatedFiles.dependencyGraph || [];
+  // Extract plan info from multiple sources (plan.json, synthesis, or session)
+  // plan.json: task_description, solution.name, execution_flow
+  // synthesis: solutions[].summary, solutions[].implementation_plan.approach
+  const taskDescription = plan.task_description || session.topicTitle || '';
+  const solutionName = plan.solution?.name || (plan.solutions?.[0]?.name) || '';
+  const solutionSummary = plan.solutions?.[0]?.summary || '';
+  const approach = plan.solutions?.[0]?.implementation_plan?.approach || plan.execution_flow || '';
+  const feasibility = plan.solution?.feasibility || plan.solutions?.[0]?.feasibility;
+  const effort = plan.solution?.effort || plan.solutions?.[0]?.effort || '';
+  const risk = plan.solution?.risk || plan.solutions?.[0]?.risk || '';
+
+  // Plan Summary Section (if any info available)
+  const hasInfo = taskDescription || solutionName || solutionSummary || approach || plan.summary;
+  if (hasInfo) {
+    let planInfo = [];
+
+    // Task description (main objective)
+    if (taskDescription) {
+      planInfo.push(`<p class="plan-summary-text"><strong>${t('multiCli.plan.objective')}:</strong> ${escapeHtml(taskDescription)}</p>`);
+    }
+    // Solution name and summary
+    if (solutionName) {
+      planInfo.push(`<p class="plan-solution-text"><strong>${t('multiCli.plan.solution')}:</strong> ${escapeHtml(solutionName)}</p>`);
+    }
+    if (solutionSummary) {
+      planInfo.push(`<p class="plan-summary-text">${escapeHtml(solutionSummary)}</p>`);
+    }
+    // Legacy summary field
+    if (plan.summary && !taskDescription && !solutionSummary) {
+      planInfo.push(`<p class="plan-summary-text">${escapeHtml(plan.summary)}</p>`);
+    }
+    // Approach/execution flow
+    if (approach) {
+      planInfo.push(`<p class="plan-approach-text"><strong>${t('multiCli.plan.approach')}:</strong> ${escapeHtml(approach)}</p>`);
+    }
 
-  let sections = [];
+    // Metadata badges - concise format
+    let metaBadges = [];
+    if (feasibility) metaBadges.push(`<span class="meta-badge feasibility">${Math.round(feasibility * 100)}%</span>`);
+    if (effort) metaBadges.push(`<span class="meta-badge effort ${escapeHtml(effort)}">${escapeHtml(effort)}</span>`);
+    if (risk) metaBadges.push(`<span class="meta-badge risk ${escapeHtml(risk)}">${escapeHtml(risk)} ${t('multiCli.plan.risk')}</span>`);
+    // Legacy badges
+    if (plan.severity) metaBadges.push(`<span class="meta-badge severity ${escapeHtml(plan.severity)}">${escapeHtml(plan.severity)}</span>`);
+    if (plan.complexity) metaBadges.push(`<span class="meta-badge complexity">${escapeHtml(plan.complexity)}</span>`);
+    if (plan.estimated_time) metaBadges.push(`<span class="meta-badge time">${escapeHtml(plan.estimated_time)}</span>`);
 
-  // File Tree
-  if (fileTree.length) {
     sections.push(`
-      <div class="multi-cli-section file-tree-section collapsible-section">
-        <div class="collapsible-header">
-          <span class="collapse-icon">&#9658;</span>
-          <span class="section-label"><i data-lucide="folder-tree" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.fileTree') || 'File Tree'} (${fileTree.length})</span>
-        </div>
-        <div class="collapsible-content collapsed">
-          <div class="file-tree-list">
-            ${renderFileTreeNodes(fileTree)}
-          </div>
-        </div>
+      <div class="plan-summary-section">
+        ${planInfo.join('')}
+        ${metaBadges.length ? `<div class="plan-meta-badges">${metaBadges.join(' ')}</div>` : ''}
       </div>
     `);
   }
 
-  // Impact Summary
-  if (impactSummary.length) {
+  // Tasks Section
+  if (tasks.length === 0) {
     sections.push(`
-      <div class="multi-cli-section impact-section collapsible-section">
-        <div class="collapsible-header">
-          <span class="collapse-icon">&#9658;</span>
-          <span class="section-label"><i data-lucide="alert-triangle" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.impactSummary') || 'Impact Summary'} (${impactSummary.length})</span>
-        </div>
-        <div class="collapsible-content collapsed">
-          <div class="impact-list">
-            ${impactSummary.map(impact => `
-              <div class="impact-item impact-${impact.score || 'medium'}">
-                <div class="impact-header">
-                  <code class="impact-file">${escapeHtml(impact.filePath || '')}</code>
-                  ${impact.line ? `<span class="impact-line">:${impact.line}</span>` : ''}
-                  <span class="impact-score ${impact.score || 'medium'}">${escapeHtml(impact.score || 'medium')}</span>
-                </div>
-                ${impact.reasoning ? `<div class="impact-reason">${escapeHtml(getI18nText(impact.reasoning))}</div>` : ''}
-              </div>
-            `).join('')}
-          </div>
-        </div>
+      <div class="tab-empty-state">
+        <div class="empty-icon"><i data-lucide="clipboard-list" class="w-12 h-12"></i></div>
+        <div class="empty-title">${t('empty.noTasks') || 'No Tasks'}</div>
+        <div class="empty-text">${t('empty.noTasksText') || 'No tasks available for this session.'}</div>
       </div>
     `);
-  }
-
-  // Dependency Graph
-  if (dependencyGraph.length) {
+  } else {
     sections.push(`
-      <div class="multi-cli-section deps-section collapsible-section">
-        <div class="collapsible-header">
-          <span class="collapse-icon">&#9658;</span>
-          <span class="section-label"><i data-lucide="git-branch" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.dependencies') || 'Dependencies'} (${dependencyGraph.length})</span>
-        </div>
-        <div class="collapsible-content collapsed">
-          <div class="deps-list">
-            ${dependencyGraph.map(edge => `
-              <div class="dep-edge">
-                <code>${escapeHtml(edge.source || '')}</code>
-                <span class="dep-arrow">&rarr;</span>
-                <code>${escapeHtml(edge.target || '')}</code>
-                <span class="dep-relationship">(${escapeHtml(edge.relationship || 'depends')})</span>
-              </div>
-            `).join('')}
-          </div>
-        </div>
+      <div class="tasks-list" id="multiCliTasksListContent">
+        ${tasks.map((task, idx) => renderMultiCliTaskItem(session.id, task, idx)).join('')}
       </div>
     `);
   }
 
-  return sections.length ? `<div class="multi-cli-files-tab">${sections.join('')}</div>` : `
-    <div class="tab-empty-state">
-      <div class="empty-icon"><i data-lucide="folder-tree" class="w-12 h-12"></i></div>
-      <div class="empty-title">${t('multiCli.empty.files') || 'No Related Files'}</div>
-    </div>
-  `;
-}
-
-/**
- * Render file tree nodes recursively
- */
-function renderFileTreeNodes(nodes, depth = 0) {
-  return nodes.map(node => {
-    const indent = depth * 16;
-    const isDir = node.type === 'directory';
-    const icon = isDir ? 'folder' : 'file';
-    const modStatus = node.modificationStatus || 'unchanged';
-    const impactScore = node.impactScore || '';
-
-    let html = `
-      <div class="file-tree-node" style="margin-left: ${indent}px;">
-        <i data-lucide="${icon}" class="w-4 h-4 inline mr-1 file-icon ${modStatus}"></i>
-        <span class="file-path ${modStatus}">${escapeHtml(node.path || '')}</span>
-        ${modStatus !== 'unchanged' ? `<span class="mod-status ${modStatus}">${modStatus}</span>` : ''}
-        ${impactScore ? `<span class="impact-badge ${impactScore}">${impactScore}</span>` : ''}
-      </div>
-    `;
-
-    if (node.children?.length) {
-      html += renderFileTreeNodes(node.children, depth + 1);
-    }
-
-    return html;
-  }).join('');
+  return `<div class="tasks-tab-content">${sections.join('')}</div>`;
 }
 
 /**
- * Render Planning tab - displays session.plan (plan.json content)
- * Reuses renderLitePlanTab style with Summary, Approach, Focus Paths, Metadata, and Tasks
+ * Render Plan tab - displays plan.json content (summary, approach, metadata)
  */
-function renderMultiCliPlanningTab(session) {
+function renderMultiCliPlanTab(session) {
   const plan = session.plan;
 
   if (!plan) {
     return `
       <div class="tab-empty-state">
         <div class="empty-icon"><i data-lucide="ruler" class="w-12 h-12"></i></div>
-        <div class="empty-title">${t('multiCli.empty.planning') || 'No Planning Data'}</div>
+        <div class="empty-title">${t('multiCli.empty.planning') || 'No Plan Data'}</div>
         <div class="empty-text">${t('multiCli.empty.planningText') || 'No plan.json found for this session.'}</div>
       </div>
     `;
@@ -980,55 +842,568 @@ function renderMultiCliPlanningTab(session) {
         </div>
       </div>
 
-      <!-- Tasks -->
-      ${plan.tasks?.length ? `
-        <div class="plan-section">
-          <h4 class="plan-section-title"><i data-lucide="list-checks" class="w-4 h-4 inline mr-1"></i> Tasks (${plan.tasks.length})</h4>
-          <div class="fix-tasks-summary">
-            ${plan.tasks.map((task, idx) => `
-              <div class="fix-task-summary-item collapsible-section">
-                <div class="collapsible-header">
-                  <span class="collapse-icon">&#9654;</span>
-                  <span class="task-num">#${idx + 1}</span>
-                  <span class="task-title-brief">${escapeHtml(task.title || task.summary || 'Untitled')}</span>
-                  ${task.scope ? `<span class="task-scope-badge">${escapeHtml(task.scope)}</span>` : ''}
-                </div>
-                <div class="collapsible-content collapsed">
-                  ${task.modification_points?.length ? `
-                    <div class="task-detail-section">
-                      <strong>Modification Points:</strong>
-                      <ul class="mod-points-list">
-                        ${task.modification_points.map(mp => `
-                          <li>
-                            <code>${escapeHtml(mp.file || '')}</code>
-                            ${mp.function_name ? `<span class="func-name">-> ${escapeHtml(mp.function_name)}</span>` : ''}
-                            ${mp.change_type ? `<span class="change-type">(${escapeHtml(mp.change_type)})</span>` : ''}
-                          </li>
-                        `).join('')}
-                      </ul>
-                    </div>
-                  ` : ''}
-                  ${task.implementation?.length ? `
-                    <div class="task-detail-section">
-                      <strong>Implementation Steps:</strong>
-                      <ol class="impl-steps-list">
-                        ${task.implementation.map(step => `<li>${escapeHtml(step)}</li>`).join('')}
-                      </ol>
-                    </div>
-                  ` : ''}
-                  ${task.verification?.length ? `
-                    <div class="task-detail-section">
-                      <strong>Verification:</strong>
-                      <ul class="verify-list">
-                        ${task.verification.map(v => `<li>${escapeHtml(v)}</li>`).join('')}
-                      </ul>
-                    </div>
-                  ` : ''}
+      <!-- Raw JSON -->
+      <div class="plan-section collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">&#9654;</span>
+          <span class="section-label">{ } Raw JSON</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          <pre class="json-content">${escapeHtml(JSON.stringify(plan, null, 2))}</pre>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Load and render Context tab - displays context-package content
+ */
+async function loadAndRenderMultiCliContextTab(session, contentArea) {
+  contentArea.innerHTML = `<div class="tab-loading">${t('common.loading') || 'Loading...'}</div>`;
+
+  try {
+    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 = renderMultiCliContextContent(data.context, session);
+        initCollapsibleSections(contentArea);
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+        return;
+      }
+    }
+    // Fallback: show session context_package if available
+    contentArea.innerHTML = renderMultiCliContextContent(session.context_package, session);
+    initCollapsibleSections(contentArea);
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  } catch (err) {
+    contentArea.innerHTML = `<div class="tab-error">Failed to load context: ${err.message}</div>`;
+  }
+}
+
+/**
+ * Render context content for multi-cli
+ */
+function renderMultiCliContextContent(context, session) {
+  // Also check for context_package in session
+  const ctx = context || session.context_package || {};
+
+  if (!ctx || Object.keys(ctx).length === 0) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon"><i data-lucide="package" class="w-12 h-12"></i></div>
+        <div class="empty-title">${t('empty.noContext') || 'No Context Data'}</div>
+        <div class="empty-text">${t('empty.noContextText') || 'No context package available for this session.'}</div>
+      </div>
+    `;
+  }
+
+  let sections = [];
+
+  // Task Description
+  if (ctx.task_description) {
+    sections.push(`
+      <div class="context-section">
+        <h4 class="context-section-title"><i data-lucide="file-text" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.context.taskDescription')}</h4>
+        <p class="context-description">${escapeHtml(ctx.task_description)}</p>
+      </div>
+    `);
+  }
+
+  // Constraints
+  if (ctx.constraints?.length) {
+    sections.push(`
+      <div class="context-section">
+        <h4 class="context-section-title"><i data-lucide="alert-triangle" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.context.constraints')}</h4>
+        <ul class="constraints-list">
+          ${ctx.constraints.map(c => `<li>${escapeHtml(c)}</li>`).join('')}
+        </ul>
+      </div>
+    `);
+  }
+
+  // Focus Paths
+  if (ctx.focus_paths?.length) {
+    sections.push(`
+      <div class="context-section">
+        <h4 class="context-section-title"><i data-lucide="folder" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.context.focusPaths')}</h4>
+        <div class="path-tags">
+          ${ctx.focus_paths.map(p => `<span class="path-tag">${escapeHtml(p)}</span>`).join('')}
+        </div>
+      </div>
+    `);
+  }
+
+  // Relevant Files
+  if (ctx.relevant_files?.length) {
+    sections.push(`
+      <div class="context-section collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">&#9654;</span>
+          <span class="section-label"><i data-lucide="files" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.context.relevantFiles')} (${ctx.relevant_files.length})</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          <ul class="files-list">
+            ${ctx.relevant_files.map(f => `
+              <li class="file-item">
+                <span class="file-icon">📄</span>
+                <code>${escapeHtml(typeof f === 'string' ? f : f.path || f.file || '')}</code>
+                ${f.reason ? `<span class="file-reason">${escapeHtml(f.reason)}</span>` : ''}
+              </li>
+            `).join('')}
+          </ul>
+        </div>
+      </div>
+    `);
+  }
+
+  // Dependencies
+  if (ctx.dependencies?.length) {
+    sections.push(`
+      <div class="context-section collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">&#9654;</span>
+          <span class="section-label"><i data-lucide="git-branch" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.context.dependencies')} (${ctx.dependencies.length})</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          <ul class="deps-list">
+            ${ctx.dependencies.map(d => `<li>${escapeHtml(typeof d === 'string' ? d : d.name || JSON.stringify(d))}</li>`).join('')}
+          </ul>
+        </div>
+      </div>
+    `);
+  }
+
+  // Conflict Risks
+  if (ctx.conflict_risks?.length) {
+    sections.push(`
+      <div class="context-section">
+        <h4 class="context-section-title"><i data-lucide="alert-circle" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.context.conflictRisks')}</h4>
+        <ul class="risks-list">
+          ${ctx.conflict_risks.map(r => `<li class="risk-item">${escapeHtml(typeof r === 'string' ? r : r.description || JSON.stringify(r))}</li>`).join('')}
+        </ul>
+      </div>
+    `);
+  }
+
+  // Session ID
+  if (ctx.session_id) {
+    sections.push(`
+      <div class="context-section">
+        <h4 class="context-section-title"><i data-lucide="hash" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.context.sessionId')}</h4>
+        <code class="session-id-code">${escapeHtml(ctx.session_id)}</code>
+      </div>
+    `);
+  }
+
+  // Raw JSON
+  sections.push(`
+    <div class="context-section collapsible-section">
+      <div class="collapsible-header">
+        <span class="collapse-icon">&#9654;</span>
+        <span class="section-label">{ } ${t('multiCli.context.rawJson')}</span>
+      </div>
+      <div class="collapsible-content collapsed">
+        <pre class="json-content">${escapeHtml(JSON.stringify(ctx, null, 2))}</pre>
+      </div>
+    </div>
+  `);
+
+  return `<div class="context-tab-content">${sections.join('')}</div>`;
+}
+
+/**
+ * Load and render Summary tab
+ */
+async function loadAndRenderMultiCliSummaryTab(session, contentArea) {
+  contentArea.innerHTML = `<div class="tab-loading">${t('common.loading') || 'Loading...'}</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 = renderMultiCliSummaryContent(data.summary, session);
+        initCollapsibleSections(contentArea);
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+        return;
+      }
+    }
+    // Fallback: show synthesis summary
+    contentArea.innerHTML = renderMultiCliSummaryContent(null, session);
+    initCollapsibleSections(contentArea);
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  } catch (err) {
+    contentArea.innerHTML = `<div class="tab-error">Failed to load summary: ${err.message}</div>`;
+  }
+}
+
+/**
+ * Render summary content for multi-cli
+ */
+function renderMultiCliSummaryContent(summary, session) {
+  const synthesis = session.latestSynthesis || session.discussionTopic || {};
+  const plan = session.plan || {};
+
+  // Use summary from file or build from synthesis
+  const summaryText = summary || synthesis.convergence?.summary || plan.summary;
+
+  if (!summaryText && !synthesis.solutions?.length) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon"><i data-lucide="file-text" class="w-12 h-12"></i></div>
+        <div class="empty-title">${t('empty.noSummary') || 'No Summary'}</div>
+        <div class="empty-text">${t('empty.noSummaryText') || 'No summary available for this session.'}</div>
+      </div>
+    `;
+  }
+
+  let sections = [];
+
+  // Main Summary
+  if (summaryText) {
+    const summaryContent = typeof summaryText === 'string' ? summaryText : getI18nText(summaryText);
+    sections.push(`
+      <div class="summary-section">
+        <h4 class="summary-section-title"><i data-lucide="file-text" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.summary.title')}</h4>
+        <div class="summary-content">${escapeHtml(summaryContent)}</div>
+      </div>
+    `);
+  }
+
+  // Convergence Status
+  if (synthesis.convergence) {
+    const conv = synthesis.convergence;
+    sections.push(`
+      <div class="summary-section">
+        <h4 class="summary-section-title"><i data-lucide="git-merge" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.summary.convergence')}</h4>
+        <div class="convergence-info">
+          <span class="convergence-level ${conv.level || ''}">${escapeHtml(conv.level || 'unknown')}</span>
+          <span class="convergence-rec ${conv.recommendation || ''}">${escapeHtml(conv.recommendation || '')}</span>
+        </div>
+      </div>
+    `);
+  }
+
+  // Solutions Summary
+  if (synthesis.solutions?.length) {
+    sections.push(`
+      <div class="summary-section collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">&#9654;</span>
+          <span class="section-label"><i data-lucide="lightbulb" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.summary.solutions')} (${synthesis.solutions.length})</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          ${synthesis.solutions.map((sol, idx) => `
+            <div class="solution-summary-item">
+              <span class="solution-num">#${idx + 1}</span>
+              <span class="solution-name">${escapeHtml(getI18nText(sol.title) || sol.id || `${t('multiCli.summary.solution')} ${idx + 1}`)}</span>
+              ${sol.feasibility?.score ? `<span class="feasibility-badge">${Math.round(sol.feasibility.score * 100)}%</span>` : ''}
+            </div>
+          `).join('')}
+        </div>
+      </div>
+    `);
+  }
+
+  return `<div class="summary-tab-content">${sections.join('')}</div>`;
+}
+
+/**
+ * Render Discussion Topic tab
+ * Shows: title, description, scope, keyQuestions, status, tags
+ */
+function renderMultiCliTopicTab(session) {
+  const topic = session.discussionTopic || session.latestSynthesis?.discussionTopic || {};
+
+  if (!topic || Object.keys(topic).length === 0) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon"><i data-lucide="message-circle" class="w-12 h-12"></i></div>
+        <div class="empty-title">${t('multiCli.empty.topic') || 'No Discussion Topic'}</div>
+        <div class="empty-text">${t('multiCli.empty.topicText') || 'No discussion topic data available for this session.'}</div>
+      </div>
+    `;
+  }
+
+  const title = getI18nText(topic.title) || 'Untitled';
+  const description = getI18nText(topic.description) || '';
+  const scope = topic.scope || {};
+  const keyQuestions = topic.keyQuestions || [];
+  const status = topic.status || 'unknown';
+  const tags = topic.tags || [];
+
+  let sections = [];
+
+  // Title and Description
+  sections.push(`
+    <div class="multi-cli-topic-section">
+      <h3 class="multi-cli-topic-title">${escapeHtml(title)}</h3>
+      ${description ? `<p class="multi-cli-topic-description">${escapeHtml(description)}</p>` : ''}
+      <div class="topic-meta">
+        <span class="multi-cli-status ${status}">${escapeHtml(status)}</span>
+        ${tags.length ? tags.map(tag => `<span class="tag-badge">${escapeHtml(tag)}</span>`).join('') : ''}
+      </div>
+    </div>
+  `);
+
+  // Scope (included/excluded)
+  if (scope.included?.length || scope.excluded?.length) {
+    sections.push(`
+      <div class="multi-cli-section scope-section">
+        <h4 class="section-title"><i data-lucide="target" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.scope') || 'Scope'}</h4>
+        ${scope.included?.length ? `
+          <div class="scope-included">
+            <strong>${t('multiCli.scope.included') || 'Included'}:</strong>
+            <ul class="scope-list">
+              ${scope.included.map(item => `<li>${escapeHtml(getI18nText(item))}</li>`).join('')}
+            </ul>
+          </div>
+        ` : ''}
+        ${scope.excluded?.length ? `
+          <div class="scope-excluded">
+            <strong>${t('multiCli.scope.excluded') || 'Excluded'}:</strong>
+            <ul class="scope-list excluded">
+              ${scope.excluded.map(item => `<li>${escapeHtml(getI18nText(item))}</li>`).join('')}
+            </ul>
+          </div>
+        ` : ''}
+      </div>
+    `);
+  }
+
+  // Key Questions
+  if (keyQuestions.length) {
+    sections.push(`
+      <div class="multi-cli-section questions-section">
+        <h4 class="section-title"><i data-lucide="help-circle" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.keyQuestions') || 'Key Questions'}</h4>
+        <ol class="key-questions-list">
+          ${keyQuestions.map(q => `<li>${escapeHtml(getI18nText(q))}</li>`).join('')}
+        </ol>
+      </div>
+    `);
+  }
+
+  return `<div class="multi-cli-topic-tab">${sections.join('')}</div>`;
+}
+
+/**
+ * Render Related Files tab
+ * Shows: fileTree, impactSummary
+ */
+function renderMultiCliFilesTab(session) {
+  // Use helper to extract files from synthesis data structure
+  const relatedFiles = extractFilesFromSynthesis(session.latestSynthesis);
+
+  if (!relatedFiles || (!relatedFiles.fileTree?.length && !relatedFiles.impactSummary?.length)) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon"><i data-lucide="folder-tree" class="w-12 h-12"></i></div>
+        <div class="empty-title">${t('multiCli.empty.files') || 'No Related Files'}</div>
+        <div class="empty-text">${t('multiCli.empty.filesText') || 'No file analysis data available for this session.'}</div>
+      </div>
+    `;
+  }
+
+  const fileTree = relatedFiles.fileTree || [];
+  const impactSummary = relatedFiles.impactSummary || [];
+  const dependencyGraph = relatedFiles.dependencyGraph || [];
+
+  let sections = [];
+
+  // File Tree
+  if (fileTree.length) {
+    sections.push(`
+      <div class="multi-cli-section file-tree-section collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">&#9658;</span>
+          <span class="section-label"><i data-lucide="folder-tree" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.fileTree') || 'File Tree'} (${fileTree.length})</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          <div class="file-tree-list">
+            ${renderFileTreeNodes(fileTree)}
+          </div>
+        </div>
+      </div>
+    `);
+  }
+
+  // Impact Summary
+  if (impactSummary.length) {
+    sections.push(`
+      <div class="multi-cli-section impact-section collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">&#9658;</span>
+          <span class="section-label"><i data-lucide="alert-triangle" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.impactSummary') || 'Impact Summary'} (${impactSummary.length})</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          <div class="impact-list">
+            ${impactSummary.map(impact => `
+              <div class="impact-item impact-${impact.score || 'medium'}">
+                <div class="impact-header">
+                  <code class="impact-file">${escapeHtml(impact.filePath || '')}</code>
+                  ${impact.line ? `<span class="impact-line">:${impact.line}</span>` : ''}
+                  <span class="impact-score ${impact.score || 'medium'}">${escapeHtml(impact.score || 'medium')}</span>
                 </div>
+                ${impact.reasoning ? `<div class="impact-reason">${escapeHtml(getI18nText(impact.reasoning))}</div>` : ''}
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      </div>
+    `);
+  }
+
+  // Dependency Graph
+  if (dependencyGraph.length) {
+    sections.push(`
+      <div class="multi-cli-section deps-section collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">&#9658;</span>
+          <span class="section-label"><i data-lucide="git-branch" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.dependencies') || 'Dependencies'} (${dependencyGraph.length})</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          <div class="deps-list">
+            ${dependencyGraph.map(edge => `
+              <div class="dep-edge">
+                <code>${escapeHtml(edge.source || '')}</code>
+                <span class="dep-arrow">&rarr;</span>
+                <code>${escapeHtml(edge.target || '')}</code>
+                <span class="dep-relationship">(${escapeHtml(edge.relationship || 'depends')})</span>
               </div>
             `).join('')}
           </div>
         </div>
+      </div>
+    `);
+  }
+
+  return sections.length ? `<div class="multi-cli-files-tab">${sections.join('')}</div>` : `
+    <div class="tab-empty-state">
+      <div class="empty-icon"><i data-lucide="folder-tree" class="w-12 h-12"></i></div>
+      <div class="empty-title">${t('multiCli.empty.files') || 'No Related Files'}</div>
+    </div>
+  `;
+}
+
+/**
+ * Render file tree nodes recursively
+ */
+function renderFileTreeNodes(nodes, depth = 0) {
+  return nodes.map(node => {
+    const indent = depth * 16;
+    const isDir = node.type === 'directory';
+    const icon = isDir ? 'folder' : 'file';
+    const modStatus = node.modificationStatus || 'unchanged';
+    const impactScore = node.impactScore || '';
+
+    let html = `
+      <div class="file-tree-node" style="margin-left: ${indent}px;">
+        <i data-lucide="${icon}" class="w-4 h-4 inline mr-1 file-icon ${modStatus}"></i>
+        <span class="file-path ${modStatus}">${escapeHtml(node.path || '')}</span>
+        ${modStatus !== 'unchanged' ? `<span class="mod-status ${modStatus}">${modStatus}</span>` : ''}
+        ${impactScore ? `<span class="impact-badge ${impactScore}">${impactScore}</span>` : ''}
+      </div>
+    `;
+
+    if (node.children?.length) {
+      html += renderFileTreeNodes(node.children, depth + 1);
+    }
+
+    return html;
+  }).join('');
+}
+
+/**
+ * Render Planning tab - displays session.plan (plan.json content)
+ * Reuses renderLitePlanTab style with Summary, Approach, Focus Paths, Metadata, and Tasks
+ */
+function renderMultiCliPlanningTab(session) {
+  const plan = session.plan;
+
+  if (!plan) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon"><i data-lucide="ruler" class="w-12 h-12"></i></div>
+        <div class="empty-title">${t('multiCli.empty.planning') || 'No Planning Data'}</div>
+        <div class="empty-text">${t('multiCli.empty.planningText') || 'No plan.json found for this session.'}</div>
+      </div>
+    `;
+  }
+
+  return `
+    <div class="plan-tab-content">
+      <!-- Summary -->
+      ${plan.summary ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title"><i data-lucide="clipboard-list" class="w-4 h-4 inline mr-1"></i> Summary</h4>
+          <p class="plan-summary-text">${escapeHtml(plan.summary)}</p>
+        </div>
+      ` : ''}
+
+      <!-- Root Cause (fix-plan specific) -->
+      ${plan.root_cause ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title"><i data-lucide="search" class="w-4 h-4 inline mr-1"></i> Root Cause</h4>
+          <p class="plan-root-cause-text">${escapeHtml(plan.root_cause)}</p>
+        </div>
+      ` : ''}
+
+      <!-- Strategy (fix-plan specific) -->
+      ${plan.strategy ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title"><i data-lucide="route" class="w-4 h-4 inline mr-1"></i> Fix Strategy</h4>
+          <p class="plan-strategy-text">${escapeHtml(plan.strategy)}</p>
+        </div>
+      ` : ''}
+
+      <!-- Approach -->
+      ${plan.approach ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title"><i data-lucide="target" class="w-4 h-4 inline mr-1"></i> Approach</h4>
+          <p class="plan-approach-text">${escapeHtml(plan.approach)}</p>
+        </div>
+      ` : ''}
+
+      <!-- User Requirements -->
+      ${plan.user_requirements ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title"><i data-lucide="user" class="w-4 h-4 inline mr-1"></i> User Requirements</h4>
+          <p class="plan-requirements-text">${escapeHtml(plan.user_requirements)}</p>
+        </div>
+      ` : ''}
+
+      <!-- Focus Paths -->
+      ${plan.focus_paths?.length ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title"><i data-lucide="folder" class="w-4 h-4 inline mr-1"></i> Focus Paths</h4>
+          <div class="path-tags">
+            ${plan.focus_paths.map(p => `<span class="path-tag">${escapeHtml(p)}</span>`).join('')}
+          </div>
+        </div>
+      ` : ''}
+
+      <!-- Metadata -->
+      <div class="plan-section">
+        <h4 class="plan-section-title"><i data-lucide="info" class="w-4 h-4 inline mr-1"></i> Metadata</h4>
+        <div class="plan-meta-grid">
+          ${plan.severity ? `<div class="meta-item"><span class="meta-label">Severity:</span> <span class="severity-badge ${escapeHtml(plan.severity)}">${escapeHtml(plan.severity)}</span></div>` : ''}
+          ${plan.risk_level ? `<div class="meta-item"><span class="meta-label">Risk Level:</span> <span class="risk-badge ${escapeHtml(plan.risk_level)}">${escapeHtml(plan.risk_level)}</span></div>` : ''}
+          ${plan.estimated_time ? `<div class="meta-item"><span class="meta-label">Estimated Time:</span> ${escapeHtml(plan.estimated_time)}</div>` : ''}
+          ${plan.complexity ? `<div class="meta-item"><span class="meta-label">Complexity:</span> ${escapeHtml(plan.complexity)}</div>` : ''}
+          ${plan.recommended_execution ? `<div class="meta-item"><span class="meta-label">Execution:</span> ${escapeHtml(plan.recommended_execution)}</div>` : ''}
+        </div>
+      </div>
+
+      <!-- Tasks (Click to view details) -->
+      ${plan.tasks?.length ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title"><i data-lucide="list-checks" class="w-4 h-4 inline mr-1"></i> Tasks (${plan.tasks.length})</h4>
+          <div class="tasks-list multi-cli-tasks-list">
+            ${plan.tasks.map((task, idx) => renderMultiCliTaskItem(session.id, task, idx)).join('')}
+          </div>
+        </div>
       ` : ''}
 
       <!-- Raw JSON -->
@@ -1045,6 +1420,435 @@ function renderMultiCliPlanningTab(session) {
   `;
 }
 
+/**
+ * Render a single task item for multi-cli-plan (reuses lite-plan style)
+ * Supports click to open drawer for details
+ */
+function renderMultiCliTaskItem(sessionId, task, idx) {
+  const taskId = task.id || `T${idx + 1}`;
+  const taskJsonId = `multi-cli-task-${sessionId}-${taskId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+  taskJsonStore[taskJsonId] = task;
+
+  // Get preview info - handle both normalized and raw formats
+  // Normalized: meta.type, meta.scope, context.focus_paths, context.acceptance, flow_control.implementation_approach
+  // Raw: action, scope, file, modification_points, implementation, acceptance
+  const taskType = task.meta?.type || task.action || '';
+  const scope = task.meta?.scope || task.scope || task.file || '';
+  const filesCount = task.context?.focus_paths?.length || task.files?.length || task.modification_points?.length || 0;
+  const implCount = task.flow_control?.implementation_approach?.length || task.implementation?.length || 0;
+  const acceptCount = task.context?.acceptance?.length || task.acceptance?.length || task.acceptance_criteria?.length || 0;
+  const dependsCount = task.context?.depends_on?.length || task.depends_on?.length || 0;
+
+  // Escape for data attributes
+  const safeSessionId = escapeHtml(sessionId);
+  const safeTaskId = escapeHtml(taskId);
+
+  return `
+    <div class="detail-task-item-full multi-cli-task-item" data-session-id="${safeSessionId}" data-task-id="${safeTaskId}" style="cursor: pointer;" title="Click to view details">
+      <div class="task-item-header-lite">
+        <span class="task-id-badge">${escapeHtml(taskId)}</span>
+        <span class="task-title">${escapeHtml(task.title || task.name || task.summary || 'Untitled')}</span>
+        <button class="btn-view-json" data-task-json-id="${taskJsonId}" data-task-display-id="${safeTaskId}">{ } JSON</button>
+      </div>
+      <div class="task-item-meta-lite">
+        ${taskType ? `<span class="meta-badge action">${escapeHtml(taskType)}</span>` : ''}
+        ${scope ? `<span class="meta-badge scope">${escapeHtml(scope)}</span>` : ''}
+        ${filesCount > 0 ? `<span class="meta-badge files">${filesCount} files</span>` : ''}
+        ${implCount > 0 ? `<span class="meta-badge impl">${implCount} steps</span>` : ''}
+        ${acceptCount > 0 ? `<span class="meta-badge accept">${acceptCount} criteria</span>` : ''}
+        ${dependsCount > 0 ? `<span class="meta-badge depends">${dependsCount} deps</span>` : ''}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Initialize click handlers for multi-cli task items
+ */
+function initMultiCliTaskClickHandlers() {
+  // Task item click handlers
+  document.querySelectorAll('.multi-cli-task-item').forEach(item => {
+    if (!item._clickBound) {
+      item._clickBound = true;
+      item.addEventListener('click', function(e) {
+        // Don't trigger if clicking on JSON button
+        if (e.target.closest('.btn-view-json')) return;
+
+        const sessionId = this.dataset.sessionId;
+        const taskId = this.dataset.taskId;
+        openTaskDrawerForMultiCli(sessionId, taskId);
+      });
+    }
+  });
+
+  // JSON button click handlers
+  document.querySelectorAll('.multi-cli-task-item .btn-view-json').forEach(btn => {
+    if (!btn._clickBound) {
+      btn._clickBound = true;
+      btn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        const taskJsonId = this.dataset.taskJsonId;
+        const displayId = this.dataset.taskDisplayId;
+        showJsonModal(taskJsonId, displayId);
+      });
+    }
+  });
+}
+
+/**
+ * Open task drawer for multi-cli task
+ */
+function openTaskDrawerForMultiCli(sessionId, taskId) {
+  const session = liteTaskDataStore[currentSessionDetailKey];
+  if (!session) return;
+
+  // Use session.tasks (normalized from backend) with fallback to plan.tasks
+  const tasks = session.tasks?.length > 0 ? session.tasks : (session.plan?.tasks || []);
+  const task = tasks.find(t => (t.id || `T${tasks.indexOf(t) + 1}`) === taskId);
+  if (!task) return;
+
+  // Set current drawer tasks
+  currentDrawerTasks = tasks;
+  window._currentDrawerSession = session;
+
+  document.getElementById('drawerTaskTitle').textContent = task.title || task.name || task.summary || taskId;
+  document.getElementById('drawerContent').innerHTML = renderMultiCliTaskDrawerContent(task, session);
+  document.getElementById('taskDetailDrawer').classList.add('open');
+  document.getElementById('drawerOverlay').classList.add('active');
+
+  // Re-init lucide icons in drawer
+  setTimeout(() => {
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }, 50);
+}
+
+/**
+ * Render drawer content for multi-cli task
+ */
+function renderMultiCliTaskDrawerContent(task, session) {
+  const taskId = task.id || 'Task';
+  const action = task.action || '';
+
+  return `
+    <!-- Task Header -->
+    <div class="drawer-task-header">
+      <span class="task-id-badge">${escapeHtml(taskId)}</span>
+      ${action ? `<span class="action-badge">${escapeHtml(action.toUpperCase())}</span>` : ''}
+    </div>
+
+    <!-- Tab Navigation -->
+    <div class="drawer-tabs">
+      <button class="drawer-tab active" data-tab="overview" onclick="switchMultiCliDrawerTab('overview')">Overview</button>
+      <button class="drawer-tab" data-tab="implementation" onclick="switchMultiCliDrawerTab('implementation')">Implementation</button>
+      <button class="drawer-tab" data-tab="files" onclick="switchMultiCliDrawerTab('files')">Files</button>
+      <button class="drawer-tab" data-tab="raw" onclick="switchMultiCliDrawerTab('raw')">Raw JSON</button>
+    </div>
+
+    <!-- Tab Content -->
+    <div class="drawer-tab-content">
+      <!-- Overview Tab (default) -->
+      <div class="drawer-panel active" data-tab="overview">
+        ${renderMultiCliTaskOverview(task)}
+      </div>
+
+      <!-- Implementation Tab -->
+      <div class="drawer-panel" data-tab="implementation">
+        ${renderMultiCliTaskImplementation(task)}
+      </div>
+
+      <!-- Files Tab -->
+      <div class="drawer-panel" data-tab="files">
+        ${renderMultiCliTaskFiles(task)}
+      </div>
+
+      <!-- Raw JSON Tab -->
+      <div class="drawer-panel" data-tab="raw">
+        <pre class="json-view">${escapeHtml(JSON.stringify(task, null, 2))}</pre>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Switch drawer tab for multi-cli task
+ */
+function switchMultiCliDrawerTab(tabName) {
+  document.querySelectorAll('.drawer-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.tab === tabName);
+  });
+  document.querySelectorAll('.drawer-panel').forEach(panel => {
+    panel.classList.toggle('active', panel.dataset.tab === tabName);
+  });
+}
+
+/**
+ * Render multi-cli task overview section
+ * Handles both normalized format (meta, context, flow_control) and raw format
+ */
+function renderMultiCliTaskOverview(task) {
+  let sections = [];
+
+  // Extract from both normalized and raw formats
+  const description = task.description || (task.context?.requirements?.length > 0 ? task.context.requirements.join('\n') : '');
+  const scope = task.meta?.scope || task.scope || task.file || '';
+  const acceptance = task.context?.acceptance || task.acceptance || task.acceptance_criteria || [];
+  const dependsOn = task.context?.depends_on || task.depends_on || [];
+  const focusPaths = task.context?.focus_paths || task.files?.map(f => typeof f === 'string' ? f : f.file) || [];
+  const keyPoint = task._raw?.task?.key_point || task.key_point || '';
+
+  // Description/Key Point Card
+  if (description || keyPoint) {
+    sections.push(`
+      <div class="lite-card">
+        <div class="lite-card-header">
+          <span class="lite-card-icon">📝</span>
+          <h4 class="lite-card-title">${t('multiCli.task.description')}</h4>
+        </div>
+        <div class="lite-card-body">
+          ${keyPoint ? `<p class="lite-key-point"><strong>${t('multiCli.task.keyPoint')}:</strong> ${escapeHtml(keyPoint)}</p>` : ''}
+          ${description ? `<p class="lite-description">${escapeHtml(description)}</p>` : ''}
+        </div>
+      </div>
+    `);
+  }
+
+  // Scope Card
+  if (scope) {
+    sections.push(`
+      <div class="lite-card">
+        <div class="lite-card-header">
+          <span class="lite-card-icon">📂</span>
+          <h4 class="lite-card-title">${t('multiCli.task.scope')}</h4>
+        </div>
+        <div class="lite-card-body">
+          <div class="lite-scope-box">
+            <code>${escapeHtml(scope)}</code>
+          </div>
+        </div>
+      </div>
+    `);
+  }
+
+  // Dependencies Card
+  if (dependsOn.length > 0) {
+    sections.push(`
+      <div class="lite-card">
+        <div class="lite-card-header">
+          <span class="lite-card-icon">🔗</span>
+          <h4 class="lite-card-title">${t('multiCli.task.dependencies')}</h4>
+        </div>
+        <div class="lite-card-body">
+          <div class="lite-deps-list">
+            ${dependsOn.map(dep => `<span class="dep-badge">${escapeHtml(dep)}</span>`).join('')}
+          </div>
+        </div>
+      </div>
+    `);
+  }
+
+  // Focus Paths / Files Card
+  if (focusPaths.length > 0) {
+    sections.push(`
+      <div class="lite-card">
+        <div class="lite-card-header">
+          <span class="lite-card-icon">📁</span>
+          <h4 class="lite-card-title">${t('multiCli.task.targetFiles')}</h4>
+        </div>
+        <div class="lite-card-body">
+          <ul class="lite-file-list">
+            ${focusPaths.map(f => `<li><code>${escapeHtml(f)}</code></li>`).join('')}
+          </ul>
+        </div>
+      </div>
+    `);
+  }
+
+  // Acceptance Criteria Card
+  if (acceptance.length > 0) {
+    sections.push(`
+      <div class="lite-card">
+        <div class="lite-card-header">
+          <span class="lite-card-icon">✅</span>
+          <h4 class="lite-card-title">${t('multiCli.task.acceptanceCriteria')}</h4>
+        </div>
+        <div class="lite-card-body">
+          <ul class="lite-acceptance-list">
+            ${acceptance.map(ac => `<li>${escapeHtml(ac)}</li>`).join('')}
+          </ul>
+        </div>
+      </div>
+    `);
+  }
+
+  // Reference Card
+  if (task.reference) {
+    const ref = task.reference;
+    sections.push(`
+      <div class="lite-card">
+        <div class="lite-card-header">
+          <span class="lite-card-icon">📚</span>
+          <h4 class="lite-card-title">${t('multiCli.task.reference')}</h4>
+        </div>
+        <div class="lite-card-body">
+          ${ref.pattern ? `<div class="ref-item"><strong>${t('multiCli.task.pattern')}:</strong> ${escapeHtml(ref.pattern)}</div>` : ''}
+          ${ref.files?.length ? `<div class="ref-item"><strong>${t('multiCli.task.files')}:</strong><br><code class="ref-files">${ref.files.map(f => escapeHtml(f)).join('\n')}</code></div>` : ''}
+          ${ref.examples ? `<div class="ref-item"><strong>${t('multiCli.task.examples')}:</strong> ${escapeHtml(ref.examples)}</div>` : ''}
+        </div>
+      </div>
+    `);
+  }
+
+  return sections.length ? sections.join('') : `<div class="empty-section">${t('multiCli.task.noOverviewData')}</div>`;
+}
+
+/**
+ * Render multi-cli task implementation section
+ * Handles both normalized format (flow_control.implementation_approach) and raw format
+ */
+function renderMultiCliTaskImplementation(task) {
+  let sections = [];
+
+  // Get implementation steps from normalized or raw format
+  const implApproach = task.flow_control?.implementation_approach || [];
+  const rawImpl = task.implementation || [];
+  const modPoints = task.modification_points || [];
+
+  // Modification Points / Flow Control Implementation Approach
+  if (implApproach.length > 0) {
+    sections.push(`
+      <div class="drawer-section">
+        <h4 class="drawer-section-title">
+          <i data-lucide="list-ordered" class="w-4 h-4"></i>
+          ${t('multiCli.task.implementationSteps')}
+        </h4>
+        <ol class="impl-steps-detail-list">
+          ${implApproach.map((step, idx) => `
+            <li class="impl-step-item">
+              <span class="step-num">${step.step || (idx + 1)}</span>
+              <span class="step-text">${escapeHtml(step.action || step)}</span>
+            </li>
+          `).join('')}
+        </ol>
+      </div>
+    `);
+  } else if (modPoints.length > 0) {
+    sections.push(`
+      <div class="drawer-section">
+        <h4 class="drawer-section-title">
+          <i data-lucide="file-edit" class="w-4 h-4"></i>
+          ${t('multiCli.task.modificationPoints')}
+        </h4>
+        <ul class="mod-points-detail-list">
+          ${modPoints.map(mp => `
+            <li class="mod-point-item">
+              <code class="mod-file">${escapeHtml(mp.file || '')}</code>
+              ${mp.target ? `<span class="mod-target">→ ${escapeHtml(mp.target)}</span>` : ''}
+              ${mp.function_name ? `<span class="mod-func">→ ${escapeHtml(mp.function_name)}</span>` : ''}
+              ${mp.change || mp.change_type ? `<span class="mod-change">(${escapeHtml(mp.change || mp.change_type)})</span>` : ''}
+            </li>
+          `).join('')}
+        </ul>
+      </div>
+    `);
+  }
+
+  // Raw Implementation Steps (if not already rendered via implApproach)
+  if (rawImpl.length > 0 && implApproach.length === 0) {
+    sections.push(`
+      <div class="drawer-section">
+        <h4 class="drawer-section-title">
+          <i data-lucide="list-ordered" class="w-4 h-4"></i>
+          ${t('multiCli.task.implementationSteps')}
+        </h4>
+        <ol class="impl-steps-detail-list">
+          ${rawImpl.map((step, idx) => `
+            <li class="impl-step-item">
+              <span class="step-num">${idx + 1}</span>
+              <span class="step-text">${escapeHtml(step)}</span>
+            </li>
+          `).join('')}
+        </ol>
+      </div>
+    `);
+  }
+
+  // Verification
+  if (task.verification?.length) {
+    sections.push(`
+      <div class="drawer-section">
+        <h4 class="drawer-section-title">
+          <i data-lucide="check-circle" class="w-4 h-4"></i>
+          ${t('multiCli.task.verification')}
+        </h4>
+        <ul class="verification-list">
+          ${task.verification.map(v => `<li>${escapeHtml(v)}</li>`).join('')}
+        </ul>
+      </div>
+    `);
+  }
+
+  return sections.length ? sections.join('') : `<div class="empty-section">${t('multiCli.task.noImplementationData')}</div>`;
+}
+
+/**
+ * Render multi-cli task files section
+ * Handles both normalized format (context.focus_paths) and raw format
+ */
+function renderMultiCliTaskFiles(task) {
+  const files = [];
+
+  // Collect from normalized format (context.focus_paths)
+  if (task.context?.focus_paths) {
+    task.context.focus_paths.forEach(f => {
+      if (f && !files.includes(f)) files.push(f);
+    });
+  }
+
+  // Collect from raw files array (plan.json format)
+  if (task.files) {
+    task.files.forEach(f => {
+      const filePath = typeof f === 'string' ? f : f.file;
+      if (filePath && !files.includes(filePath)) files.push(filePath);
+    });
+  }
+
+  // Collect from modification_points
+  if (task.modification_points) {
+    task.modification_points.forEach(mp => {
+      if (mp.file && !files.includes(mp.file)) files.push(mp.file);
+    });
+  }
+
+  // Collect from scope/file (legacy)
+  if (task.scope && !files.includes(task.scope)) files.push(task.scope);
+  if (task.file && !files.includes(task.file)) files.push(task.file);
+
+  // Collect from reference.files
+  if (task.reference?.files) {
+    task.reference.files.forEach(f => {
+      if (f && !files.includes(f)) files.push(f);
+    });
+  }
+
+  if (files.length === 0) {
+    return `<div class="empty-section">${t('multiCli.task.noFilesSpecified')}</div>`;
+  }
+
+  return `
+    <div class="drawer-section">
+      <h4 class="drawer-section-title">${t('multiCli.task.targetFiles')}</h4>
+      <ul class="target-files-list">
+        ${files.map(f => `
+          <li class="file-item">
+            <span class="file-icon">📄</span>
+            <code>${escapeHtml(f)}</code>
+          </li>
+        `).join('')}
+      </ul>
+    </div>
+  `;
+}
+
 /**
  * Render a single requirement item
  */
@@ -1587,7 +2391,7 @@ function renderMultiCliDiscussionSection(session) {
 
   // If no rounds, show topic summary and current synthesis
   if (!rounds.length) {
-    const title = getI18nText(topic.title) || 'Discussion Topic';
+    const title = getI18nText(topic.title) || t('multiCli.discussion.discussionTopic');
     const description = getI18nText(topic.description) || '';
     const status = topic.status || session.status || 'analyzing';
 
@@ -1600,7 +2404,7 @@ function renderMultiCliDiscussionSection(session) {
         ${description ? `<p class="discussion-description">${escapeHtml(description)}</p>` : ''}
         <div class="discussion-empty-state">
           <i data-lucide="message-circle" class="w-8 h-8"></i>
-          <p>${t('multiCli.singleRoundInfo') || 'This is a single-round discussion. View Planning tab for execution details.'}</p>
+          <p>${t('multiCli.singleRoundInfo')}</p>
         </div>
       </div>
     `;
@@ -1652,16 +2456,16 @@ function renderMultiCliDiscussionSection(session) {
           <!-- Solutions -->
           ${solutions.length ? `
             <div class="round-solutions-summary">
-              <h4 class="round-section-title"><i data-lucide="lightbulb" class="w-4 h-4 inline"></i> ${t('multiCli.solutions') || 'Solutions'} (${solutions.length})</h4>
+              <h4 class="round-section-title"><i data-lucide="lightbulb" class="w-4 h-4 inline"></i> ${t('multiCli.solutions')} (${solutions.length})</h4>
               <div class="solution-cards-grid">
                 ${solutions.map((sol, sidx) => `
                   <div class="solution-mini-card">
                     <div class="solution-mini-header">
                       <span class="solution-number">${sidx + 1}</span>
-                      <span class="solution-name">${escapeHtml(sol.name || 'Solution ' + (sidx + 1))}</span>
+                      <span class="solution-name">${escapeHtml(sol.name || `${t('multiCli.summary.solution')} ${sidx + 1}`)}</span>
                     </div>
                     <div class="solution-mini-scores">
-                      <span class="score-pill feasibility" title="Feasibility">${Math.round((sol.feasibility || 0) * 100)}%</span>
+                      <span class="score-pill feasibility" title="${t('multiCli.feasibility')}">${Math.round((sol.feasibility || 0) * 100)}%</span>
                       <span class="score-pill effort-${sol.effort || 'medium'}">${escapeHtml(sol.effort || 'M')}</span>
                       <span class="score-pill risk-${sol.risk || 'medium'}">${escapeHtml(sol.risk || 'M')}</span>
                     </div>
@@ -1675,7 +2479,7 @@ function renderMultiCliDiscussionSection(session) {
           <!-- Decision/Recommendation -->
           ${convergence.reasoning || round.decision ? `
             <div class="round-decision">
-              <h4 class="round-section-title"><i data-lucide="check-circle" class="w-4 h-4 inline"></i> ${t('multiCli.decision') || 'Decision'}</h4>
+              <h4 class="round-section-title"><i data-lucide="check-circle" class="w-4 h-4 inline"></i> ${t('multiCli.decision')}</h4>
               <p class="decision-text">${escapeHtml(convergence.reasoning || round.decision || '')}</p>
             </div>
           ` : ''}
@@ -1687,8 +2491,8 @@ function renderMultiCliDiscussionSection(session) {
   return `
     <div class="multi-cli-discussion-section">
       <div class="discussion-header">
-        <h3 class="discussion-title">${escapeHtml(getI18nText(topic.title) || 'Discussion')}</h3>
-        <span class="rounds-count">${totalRounds} ${t('multiCli.tab.rounds') || 'Rounds'}</span>
+        <h3 class="discussion-title">${escapeHtml(getI18nText(topic.title) || t('multiCli.discussion.title'))}</h3>
+        <span class="rounds-count">${totalRounds} ${t('multiCli.tab.rounds')}</span>
       </div>
       <div class="discussion-accordion">
         ${accordionItems}