claude-code-workflow 6.3.27 → 6.3.29

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

@@ -7,9 +7,17 @@ function renderLiteTasks() {
   const container = document.getElementById('mainContent');
 
   const liteTasks = workflowData.liteTasks || {};
-  const sessions = currentLiteType === 'lite-plan'
-    ? liteTasks.litePlan || []
-    : liteTasks.liteFix || [];
+  let sessions;
+
+  if (currentLiteType === 'lite-plan') {
+    sessions = liteTasks.litePlan || [];
+  } else if (currentLiteType === 'lite-fix') {
+    sessions = liteTasks.liteFix || [];
+  } else if (currentLiteType === 'multi-cli-plan') {
+    sessions = liteTasks.multiCliPlan || [];
+  } else {
+    sessions = [];
+  }
 
   if (sessions.length === 0) {
     container.innerHTML = `
@@ -23,7 +31,12 @@ function renderLiteTasks() {
     return;
   }
 
-  container.innerHTML = `<div class="sessions-grid">${sessions.map(session => renderLiteTaskCard(session)).join('')}</div>`;
+  // Render based on type
+  if (currentLiteType === 'multi-cli-plan') {
+    container.innerHTML = `<div class="sessions-grid">${sessions.map(session => renderMultiCliCard(session)).join('')}</div>`;
+  } else {
+    container.innerHTML = `<div class="sessions-grid">${sessions.map(session => renderLiteTaskCard(session)).join('')}</div>`;
+  }
   
   // Initialize Lucide icons
   if (typeof lucide !== 'undefined') lucide.createIcons();
@@ -68,6 +81,2610 @@ function renderLiteTaskCard(session) {
   `;
 }
 
+// ============================================
+// MULTI-CLI PLAN VIEW
+// ============================================
+
+/**
+ * Render a card for multi-cli-plan session
+ * Shows: Session ID, round count, topic title, status, created date
+ */
+function renderMultiCliCard(session) {
+  const sessionKey = `multi-cli-${session.id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+  liteTaskDataStore[sessionKey] = session;
+
+  // Extract info from latest synthesis or metadata
+  const metadata = session.metadata || {};
+  const latestSynthesis = session.latestSynthesis || session.discussionTopic || {};
+  const roundCount = metadata.roundId || session.roundCount || 1;
+  const topicTitle = getI18nText(latestSynthesis.title) || session.topicTitle || 'Discussion Topic';
+  const status = latestSynthesis.status || session.status || 'analyzing';
+  const createdAt = metadata.timestamp || session.createdAt || '';
+
+  // Status badge color mapping
+  const statusColors = {
+    'decided': 'success',
+    'converged': 'success',
+    'plan_generated': 'success',
+    'completed': 'success',
+    'exploring': 'info',
+    'initialized': 'info',
+    'analyzing': 'warning',
+    'debating': 'warning',
+    'blocked': 'error',
+    'conflict': 'error'
+  };
+  const statusColor = statusColors[status] || 'default';
+
+  return `
+    <div class="session-card multi-cli-card" onclick="showMultiCliDetailPage('${sessionKey}')" style="cursor: pointer;">
+      <div class="session-header">
+        <div class="session-title">${escapeHtml(session.id)}</div>
+        <span class="session-status multi-cli-plan">
+          <i data-lucide="messages-square" class="w-3 h-3 inline"></i> ${t('lite.multiCli') || 'Multi-CLI'}
+        </span>
+      </div>
+      <div class="session-body">
+        <div class="multi-cli-topic">
+          <i data-lucide="message-circle" class="w-4 h-4 inline mr-1"></i>
+          <span class="topic-title">${escapeHtml(topicTitle)}</span>
+        </div>
+        <div class="session-meta">
+          <span class="session-meta-item"><i data-lucide="calendar" class="w-3.5 h-3.5 inline mr-1"></i>${formatDate(createdAt)}</span>
+          <span class="session-meta-item"><i data-lucide="repeat" class="w-3.5 h-3.5 inline mr-1"></i>${roundCount} ${t('multiCli.rounds') || 'rounds'}</span>
+          <span class="session-meta-item status-badge ${statusColor}"><i data-lucide="activity" class="w-3.5 h-3.5 inline mr-1"></i>${escapeHtml(status)}</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Get text from i18n label object (supports {en, zh} format)
+ */
+function getI18nText(label) {
+  if (!label) return '';
+  if (typeof label === 'string') return label;
+  // Return based on current language or default to English
+  const lang = window.currentLanguage || 'en';
+  return label[lang] || label.en || label.zh || '';
+}
+
+// ============================================
+// SYNTHESIS DATA TRANSFORMATION HELPERS
+// ============================================
+
+/**
+ * Extract files from synthesis solutions[].implementation_plan.tasks[].files
+ * Returns object with fileTree and impactSummary arrays
+ */
+function extractFilesFromSynthesis(synthesis) {
+  if (!synthesis || !synthesis.solutions) {
+    return { fileTree: [], impactSummary: [], dependencyGraph: [] };
+  }
+
+  const fileSet = new Set();
+  const impactMap = new Map();
+
+  synthesis.solutions.forEach(solution => {
+    const tasks = solution.implementation_plan?.tasks || [];
+    tasks.forEach(task => {
+      const files = task.files || [];
+      files.forEach(filePath => {
+        fileSet.add(filePath);
+        // Build impact summary based on task context
+        if (!impactMap.has(filePath)) {
+          impactMap.set(filePath, {
+            filePath: filePath,
+            score: 'medium',
+            reasoning: { en: `Part of ${solution.title?.en || solution.id} implementation`, zh: `${solution.title?.zh || solution.id} 实现的一部分` }
+          });
+        }
+      });
+    });
+  });
+
+  // Convert to fileTree format (flat list with file type)
+  const fileTree = Array.from(fileSet).map(path => ({
+    path: path,
+    type: 'file',
+    modificationStatus: 'modified',
+    impactScore: 'medium'
+  }));
+
+  return {
+    fileTree: fileTree,
+    impactSummary: Array.from(impactMap.values()),
+    dependencyGraph: []
+  };
+}
+
+/**
+ * Extract planning data from synthesis solutions[].implementation_plan
+ * Builds planning object with functional requirements format
+ */
+function extractPlanningFromSynthesis(synthesis) {
+  if (!synthesis || !synthesis.solutions) {
+    return { functional: [], nonFunctional: [], acceptanceCriteria: [] };
+  }
+
+  const functional = [];
+  const acceptanceCriteria = [];
+  let reqCounter = 1;
+  let acCounter = 1;
+
+  synthesis.solutions.forEach(solution => {
+    const plan = solution.implementation_plan;
+    if (!plan) return;
+
+    // Extract approach as functional requirement
+    if (plan.approach) {
+      functional.push({
+        id: `FR-${String(reqCounter++).padStart(3, '0')}`,
+        description: plan.approach,
+        priority: solution.feasibility?.score >= 0.8 ? 'high' : 'medium',
+        source: solution.id
+      });
+    }
+
+    // Extract tasks as acceptance criteria
+    const tasks = plan.tasks || [];
+    tasks.forEach(task => {
+      acceptanceCriteria.push({
+        id: `AC-${String(acCounter++).padStart(3, '0')}`,
+        description: task.title || { en: task.id, zh: task.id },
+        isMet: false
+      });
+    });
+  });
+
+  return {
+    functional: functional,
+    nonFunctional: [],
+    acceptanceCriteria: acceptanceCriteria
+  };
+}
+
+/**
+ * Extract decision data from synthesis solutions
+ * Sorts by feasibility score, returns highest as selected, rest as rejected
+ */
+function extractDecisionFromSynthesis(synthesis) {
+  if (!synthesis || !synthesis.solutions || synthesis.solutions.length === 0) {
+    return {};
+  }
+
+  // Sort solutions by feasibility score (highest first)
+  const sortedSolutions = [...synthesis.solutions].sort((a, b) => {
+    const scoreA = a.feasibility?.score || 0;
+    const scoreB = b.feasibility?.score || 0;
+    return scoreB - scoreA;
+  });
+
+  const selectedSolution = sortedSolutions[0];
+  const rejectedAlternatives = sortedSolutions.slice(1).map(sol => ({
+    ...sol,
+    rejectionReason: sol.cons?.length > 0 ? sol.cons[0] : { en: 'Lower feasibility score', zh: '可行性评分较低' }
+  }));
+
+  // Calculate confidence from convergence level
+  let confidenceScore = 0.5;
+  if (synthesis.convergence) {
+    const level = synthesis.convergence.level;
+    if (level === 'high' || level === 'converged') confidenceScore = 0.9;
+    else if (level === 'medium') confidenceScore = 0.7;
+    else if (level === 'low') confidenceScore = 0.4;
+  }
+
+  return {
+    status: synthesis.convergence?.recommendation || 'pending',
+    summary: synthesis.convergence?.summary || {},
+    selectedSolution: selectedSolution,
+    rejectedAlternatives: rejectedAlternatives,
+    confidenceScore: confidenceScore
+  };
+}
+
+/**
+ * Extract timeline data from synthesis convergence and cross_verification
+ * Builds timeline array with events from discussion process
+ */
+function extractTimelineFromSynthesis(synthesis) {
+  if (!synthesis) {
+    return [];
+  }
+
+  const timeline = [];
+  const now = new Date().toISOString();
+
+  // Add convergence summary as decision event
+  if (synthesis.convergence?.summary) {
+    timeline.push({
+      type: 'decision',
+      timestamp: now,
+      summary: synthesis.convergence.summary,
+      contributor: { name: 'Synthesis', id: 'synthesis' },
+      reversibility: synthesis.convergence.recommendation === 'proceed' ? 'irreversible' : 'reversible'
+    });
+  }
+
+  // Add cross-verification agreements as agreement events
+  const agreements = synthesis.cross_verification?.agreements || [];
+  agreements.forEach((agreement, idx) => {
+    timeline.push({
+      type: 'agreement',
+      timestamp: now,
+      summary: typeof agreement === 'string' ? { en: agreement, zh: agreement } : agreement,
+      contributor: { name: 'Cross-Verification', id: 'cross-verify' },
+      evidence: []
+    });
+  });
+
+  // Add cross-verification disagreements as disagreement events
+  const disagreements = synthesis.cross_verification?.disagreements || [];
+  disagreements.forEach((disagreement, idx) => {
+    timeline.push({
+      type: 'disagreement',
+      timestamp: now,
+      summary: typeof disagreement === 'string' ? { en: disagreement, zh: disagreement } : disagreement,
+      contributor: { name: 'Cross-Verification', id: 'cross-verify' },
+      evidence: []
+    });
+  });
+
+  // Add solutions as proposal events
+  const solutions = synthesis.solutions || [];
+  solutions.forEach(solution => {
+    timeline.push({
+      type: 'proposal',
+      timestamp: now,
+      summary: solution.description || solution.title || {},
+      contributor: { name: solution.id, id: solution.id },
+      evidence: solution.pros?.map(p => ({ type: 'pro', description: p })) || []
+    });
+  });
+
+  return timeline;
+}
+
+/**
+ * Show multi-cli detail page with tabs (same layout as lite-plan)
+ */
+function showMultiCliDetailPage(sessionKey) {
+  const session = liteTaskDataStore[sessionKey];
+  if (!session) return;
+
+  currentView = 'multiCliDetail';
+  currentSessionDetailKey = sessionKey;
+
+  hideStatsAndCarousel();
+
+  const container = document.getElementById('mainContent');
+  const metadata = session.metadata || {};
+  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 status = session.status || 'analyzing';
+
+  container.innerHTML = `
+    <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>
+
+      <!-- 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('detail.tasks') || 'Tasks'}</span>
+          <span class="info-value">${tasks.length} ${t('session.tasks') || 'tasks'}</span>
+        </div>
+      </div>
+
+      <!-- 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>
+        <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, collapsible sections, and task click handlers
+  setTimeout(() => {
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+    initCollapsibleSections(container);
+    initMultiCliTaskClickHandlers();
+  }, 50);
+}
+
+/**
+ * Render the multi-cli toolbar content
+ */
+function renderMultiCliToolbar(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 taskCount = tasks.length;
+
+  let toolbarHtml = `
+    <div class="toolbar-header">
+      <h4 class="toolbar-title">
+        <i data-lucide="list-checks" class="w-4 h-4"></i>
+        <span>${t('multiCli.toolbar.tasks') || 'Tasks'}</span>
+        <span class="toolbar-count">${taskCount}</span>
+      </h4>
+    </div>
+  `;
+
+  // Quick Actions
+  toolbarHtml += `
+    <div class="toolbar-actions">
+      <button class="toolbar-action-btn" onclick="refreshMultiCliToolbar()" title="${t('multiCli.toolbar.refresh') || 'Refresh'}">
+        <i data-lucide="refresh-cw" class="w-4 h-4"></i>
+      </button>
+      <button class="toolbar-action-btn" onclick="exportMultiCliPlanJson()" title="${t('multiCli.toolbar.export') || 'Export JSON'}">
+        <i data-lucide="download" class="w-4 h-4"></i>
+      </button>
+      <button class="toolbar-action-btn" onclick="viewMultiCliRawJson()" title="${t('multiCli.toolbar.viewRaw') || 'View Raw Data'}">
+        <i data-lucide="code" class="w-4 h-4"></i>
+      </button>
+    </div>
+  `;
+
+  // Task List
+  if (tasks.length > 0) {
+    toolbarHtml += `
+      <div class="toolbar-task-list">
+        ${tasks.map((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="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>
+                ${taskScope ? `<span class="toolbar-task-scope">${escapeHtml(taskScope)}</span>` : ''}
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+    `;
+  } else {
+    toolbarHtml += `
+      <div class="toolbar-empty">
+        <i data-lucide="inbox" class="w-8 h-8"></i>
+        <span>${t('multiCli.toolbar.noTasks') || 'No tasks available'}</span>
+      </div>
+    `;
+  }
+
+  // Session Info
+  toolbarHtml += `
+    <div class="toolbar-session-info">
+      <div class="toolbar-info-item">
+        <span class="toolbar-info-label">${t('multiCli.toolbar.sessionId') || 'Session'}</span>
+        <span class="toolbar-info-value" title="${escapeHtml(session.id)}">${escapeHtml(session.id)}</span>
+      </div>
+      ${plan?.summary ? `
+        <div class="toolbar-info-item">
+          <span class="toolbar-info-label">${t('multiCli.toolbar.summary') || 'Summary'}</span>
+          <span class="toolbar-info-value toolbar-summary" title="${escapeHtml(plan.summary)}">${escapeHtml(plan.summary)}</span>
+        </div>
+      ` : ''}
+    </div>
+  `;
+
+  return toolbarHtml;
+}
+
+/**
+ * Scroll to a specific task in the planning tab
+ */
+function scrollToMultiCliTask(taskIdx) {
+  // Switch to planning tab if not active
+  const planningTab = document.querySelector('.detail-tab[data-tab="planning"]');
+  if (planningTab && !planningTab.classList.contains('active')) {
+    switchMultiCliDetailTab('planning');
+    // Wait for tab content to render
+    setTimeout(() => scrollToTaskElement(taskIdx), 100);
+  } else {
+    scrollToTaskElement(taskIdx);
+  }
+}
+
+/**
+ * Open task drawer from toolbar (wrapper for openTaskDrawerForMultiCli)
+ */
+function openToolbarTaskDrawer(sessionId, taskId) {
+  openTaskDrawerForMultiCli(sessionId, taskId);
+}
+
+/**
+ * Scroll to task element in the DOM
+ */
+function scrollToTaskElement(taskIdx) {
+  const taskItems = document.querySelectorAll('.fix-task-summary-item');
+  if (taskItems[taskIdx]) {
+    taskItems[taskIdx].scrollIntoView({ behavior: 'smooth', block: 'center' });
+    // Highlight the task briefly
+    taskItems[taskIdx].classList.add('toolbar-highlight');
+    setTimeout(() => {
+      taskItems[taskIdx].classList.remove('toolbar-highlight');
+    }, 2000);
+    // Expand the collapsible if collapsed
+    const header = taskItems[taskIdx].querySelector('.collapsible-header');
+    const content = taskItems[taskIdx].querySelector('.collapsible-content');
+    if (header && content && content.classList.contains('collapsed')) {
+      header.click();
+    }
+  }
+}
+
+/**
+ * Refresh the toolbar content
+ */
+function refreshMultiCliToolbar() {
+  const session = liteTaskDataStore[currentSessionDetailKey];
+  if (!session) return;
+
+  const toolbarContent = document.querySelector('.toolbar-content');
+  if (toolbarContent) {
+    toolbarContent.innerHTML = renderMultiCliToolbar(session);
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+  }
+}
+
+/**
+ * Export plan.json content
+ */
+function exportMultiCliPlanJson() {
+  const session = liteTaskDataStore[currentSessionDetailKey];
+  if (!session || !session.plan) {
+    if (typeof showRefreshToast === 'function') {
+      showRefreshToast(t('multiCli.toolbar.noPlan') || 'No plan data available', 'warning');
+    }
+    return;
+  }
+
+  const jsonStr = JSON.stringify(session.plan, null, 2);
+  const blob = new Blob([jsonStr], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `plan-${session.id}.json`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+
+  if (typeof showRefreshToast === 'function') {
+    showRefreshToast(t('multiCli.toolbar.exported') || 'Plan exported successfully', 'success');
+  }
+}
+
+/**
+ * View raw session JSON in modal
+ */
+function viewMultiCliRawJson() {
+  const session = liteTaskDataStore[currentSessionDetailKey];
+  if (!session) return;
+
+  // Reuse existing JSON modal pattern
+  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.id)}</span>
+          <span>${t('multiCli.toolbar.rawData') || 'Raw Session Data'}</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="btn-copy-json" onclick="copyJsonToClipboard(this)">${t('action.copy') || 'Copy to Clipboard'}</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+}
+
+/**
+ * Switch between multi-cli detail tabs
+ */
+function switchMultiCliDetailTab(tabName) {
+  // Update active tab
+  document.querySelectorAll('.detail-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.tab === tabName);
+  });
+
+  const session = liteTaskDataStore[currentSessionDetailKey];
+  if (!session) return;
+
+  const contentArea = document.getElementById('multiCliDetailTabContent');
+
+  switch (tabName) {
+    case 'tasks':
+      contentArea.innerHTML = renderMultiCliTasksTab(session);
+      break;
+    case 'discussion':
+      contentArea.innerHTML = renderMultiCliDiscussionSection(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);
+}
+
+// ============================================
+// MULTI-CLI TAB RENDERERS
+// ============================================
+
+/**
+ * Render Tasks tab - displays plan summary + tasks (same style as lite-plan)
+ * Uses session.tasks (normalized tasks) with fallback to session.plan.tasks
+ */
+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 || []);
+
+  // Populate drawer tasks for click-to-open functionality
+  currentDrawerTasks = tasks;
+
+  let sections = [];
+
+  // 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>`);
+    }
+
+    // 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>`);
+
+    sections.push(`
+      <div class="plan-summary-section">
+        ${planInfo.join('')}
+        ${metaBadges.length ? `<div class="plan-meta-badges">${metaBadges.join(' ')}</div>` : ''}
+      </div>
+    `);
+  }
+
+  // Tasks Section
+  if (tasks.length === 0) {
+    sections.push(`
+      <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>
+    `);
+  } else {
+    sections.push(`
+      <div class="tasks-list" id="multiCliTasksListContent">
+        ${tasks.map((task, idx) => renderMultiCliTaskItem(session.id, task, idx)).join('')}
+      </div>
+    `);
+  }
+
+  return `<div class="tasks-tab-content">${sections.join('')}</div>`;
+}
+
+/**
+ * Render Plan tab - displays plan.json content (summary, approach, metadata)
+ */
+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 Plan 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>
+
+      <!-- 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 -->
+      <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>
+  `;
+}
+
+/**
+ * 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
+ */
+function renderRequirementItem(req) {
+  const priorityColors = {
+    'critical': 'error',
+    'high': 'warning',
+    'medium': 'info',
+    'low': 'default'
+  };
+  const priority = req.priority || 'medium';
+  const colorClass = priorityColors[priority] || 'default';
+
+  return `
+    <div class="requirement-item">
+      <div class="requirement-header">
+        <span class="requirement-id">${escapeHtml(req.id || '')}</span>
+        <span class="priority-badge ${colorClass}">${escapeHtml(priority)}</span>
+      </div>
+      <div class="requirement-desc">${escapeHtml(getI18nText(req.description))}</div>
+      ${req.source ? `<div class="requirement-source">${t('multiCli.source') || 'Source'}: ${escapeHtml(req.source)}</div>` : ''}
+    </div>
+  `;
+}
+
+/**
+ * Render Decision tab
+ * Shows: selectedSolution, rejectedAlternatives, confidenceScore
+ */
+function renderMultiCliDecisionTab(session) {
+  // Use helper to extract decision from synthesis data structure
+  const decision = extractDecisionFromSynthesis(session.latestSynthesis);
+
+  if (!decision || !decision.selectedSolution) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon"><i data-lucide="check-circle" class="w-12 h-12"></i></div>
+        <div class="empty-title">${t('multiCli.empty.decision') || 'No Decision Yet'}</div>
+        <div class="empty-text">${t('multiCli.empty.decisionText') || 'No decision has been made for this discussion yet.'}</div>
+      </div>
+    `;
+  }
+
+  const status = decision.status || 'pending';
+  const summary = getI18nText(decision.summary) || '';
+  const selectedSolution = decision.selectedSolution || null;
+  const rejectedAlternatives = decision.rejectedAlternatives || [];
+  const confidenceScore = decision.confidenceScore || 0;
+
+  let sections = [];
+
+  // Decision Status and Summary
+  sections.push(`
+    <div class="multi-cli-section decision-header-section">
+      <div class="decision-status-bar ${confidenceScore >= 0.7 ? 'converged' : 'divergent'}">
+        <div class="decision-status-wrapper">
+          <span class="decision-status ${status}">${escapeHtml(status)}</span>
+        </div>
+        <div class="decision-confidence">
+          <span class="decision-confidence-label">${t('multiCli.confidence') || 'Confidence'}:</span>
+          <div class="decision-confidence-bar">
+            <div class="decision-confidence-fill" style="width: ${(confidenceScore * 100).toFixed(0)}%"></div>
+          </div>
+          <span class="decision-confidence-value">${(confidenceScore * 100).toFixed(0)}%</span>
+        </div>
+      </div>
+      ${summary ? `<p class="decision-summary-text">${escapeHtml(summary)}</p>` : ''}
+    </div>
+  `);
+
+  // Selected Solution
+  if (selectedSolution) {
+    sections.push(`
+      <div class="multi-cli-section selected-solution-section">
+        <h4 class="section-title"><i data-lucide="check-circle" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.selectedSolution') || 'Selected Solution'}</h4>
+        ${renderSolutionCard(selectedSolution, true)}
+      </div>
+    `);
+  }
+
+  // Rejected Alternatives
+  if (rejectedAlternatives.length) {
+    sections.push(`
+      <div class="multi-cli-section rejected-section collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">&#9658;</span>
+          <span class="section-label"><i data-lucide="x-circle" class="w-4 h-4 inline mr-1"></i> ${t('multiCli.rejectedAlternatives') || 'Rejected Alternatives'} (${rejectedAlternatives.length})</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          ${rejectedAlternatives.map(alt => renderSolutionCard(alt, false)).join('')}
+        </div>
+      </div>
+    `);
+  }
+
+  return `<div class="multi-cli-decision-tab">${sections.join('')}</div>`;
+}
+
+/**
+ * Render a solution card
+ */
+function renderSolutionCard(solution, isSelected) {
+  const title = getI18nText(solution.title) || 'Untitled Solution';
+  const description = getI18nText(solution.description) || '';
+  const pros = solution.pros || [];
+  const cons = solution.cons || [];
+  const risk = solution.risk || 'medium';
+  const effort = getI18nText(solution.estimatedEffort) || '';
+  const rejectionReason = solution.rejectionReason ? getI18nText(solution.rejectionReason) : '';
+  const sourceCLIs = solution.sourceCLIs || [];
+
+  return `
+    <div class="solution-card ${isSelected ? 'selected' : 'rejected'}">
+      <div class="solution-header">
+        <span class="solution-id">${escapeHtml(solution.id || '')}</span>
+        <span class="solution-title">${escapeHtml(title)}</span>
+        <span class="risk-badge ${risk}">${escapeHtml(risk)}</span>
+      </div>
+      ${description ? `<p class="solution-desc">${escapeHtml(description)}</p>` : ''}
+      ${rejectionReason ? `<div class="rejection-reason"><strong>${t('multiCli.rejectionReason') || 'Reason'}:</strong> ${escapeHtml(rejectionReason)}</div>` : ''}
+      <div class="solution-details">
+        ${pros.length ? `
+          <div class="pros-section">
+            <strong>${t('multiCli.pros') || 'Pros'}:</strong>
+            <ul class="pros-list">${pros.map(p => `<li class="pro-item">${escapeHtml(getI18nText(p))}</li>`).join('')}</ul>
+          </div>
+        ` : ''}
+        ${cons.length ? `
+          <div class="cons-section">
+            <strong>${t('multiCli.cons') || 'Cons'}:</strong>
+            <ul class="cons-list">${cons.map(c => `<li class="con-item">${escapeHtml(getI18nText(c))}</li>`).join('')}</ul>
+          </div>
+        ` : ''}
+        ${effort ? `<div class="effort-estimate"><strong>${t('multiCli.effort') || 'Effort'}:</strong> ${escapeHtml(effort)}</div>` : ''}
+        ${sourceCLIs.length ? `<div class="source-clis"><strong>${t('multiCli.sources') || 'Sources'}:</strong> ${sourceCLIs.map(s => `<span class="cli-badge">${escapeHtml(s)}</span>`).join('')}</div>` : ''}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Render Timeline tab
+ * Shows: decisionRecords.timeline
+ */
+function renderMultiCliTimelineTab(session) {
+  // Use helper to extract timeline from synthesis data structure
+  const timeline = extractTimelineFromSynthesis(session.latestSynthesis);
+
+  if (!timeline || !timeline.length) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon"><i data-lucide="git-commit" class="w-12 h-12"></i></div>
+        <div class="empty-title">${t('multiCli.empty.timeline') || 'No Timeline Events'}</div>
+        <div class="empty-text">${t('multiCli.empty.timelineText') || 'No decision timeline available for this session.'}</div>
+      </div>
+    `;
+  }
+
+  const eventTypeIcons = {
+    'proposal': 'lightbulb',
+    'argument': 'message-square',
+    'agreement': 'thumbs-up',
+    'disagreement': 'thumbs-down',
+    'decision': 'check-circle',
+    'reversal': 'rotate-ccw'
+  };
+
+  return `
+    <div class="multi-cli-timeline-tab">
+      <div class="timeline-container">
+        ${timeline.map(event => {
+          const icon = eventTypeIcons[event.type] || 'circle';
+          const contributor = event.contributor || {};
+          const summary = getI18nText(event.summary) || '';
+          const evidence = event.evidence || [];
+
+          return `
+            <div class="timeline-event event-${event.type || 'default'}">
+              <div class="timeline-marker">
+                <i data-lucide="${icon}" class="w-4 h-4"></i>
+              </div>
+              <div class="timeline-content">
+                <div class="event-header">
+                  <span class="event-type ${event.type || ''}">${escapeHtml(event.type || 'event')}</span>
+                  <span class="event-contributor"><i data-lucide="user" class="w-3.5 h-3.5"></i>${escapeHtml(contributor.name || 'Unknown')}</span>
+                  <span class="event-time">${formatDate(event.timestamp)}</span>
+                </div>
+                <div class="event-summary">${escapeHtml(summary)}</div>
+                ${event.reversibility ? `<span class="reversibility-badge ${event.reversibility}">${escapeHtml(event.reversibility)}</span>` : ''}
+                ${evidence.length ? `
+                  <div class="event-evidence">
+                    ${evidence.map(ev => `
+                      <div class="evidence-item evidence-${ev.type || 'reference'}">
+                        <span class="evidence-type">${escapeHtml(ev.type || 'reference')}</span>
+                        <span class="evidence-desc">${escapeHtml(getI18nText(ev.description))}</span>
+                      </div>
+                    `).join('')}
+                  </div>
+                ` : ''}
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Render Rounds tab
+ * Shows: navigation between round synthesis files
+ */
+function renderMultiCliRoundsTab(session) {
+  const rounds = session.rounds || [];
+  const metadata = session.metadata || {};
+  const totalRounds = metadata.roundId || rounds.length || 1;
+
+  if (!rounds.length && totalRounds <= 1) {
+    // Show current synthesis as single round
+    return `
+      <div class="multi-cli-rounds-tab">
+        <div class="rounds-nav">
+          <div class="round-item active" data-round="1">
+            <span class="round-number">Round 1</span>
+            <span class="round-status">${t('multiCli.currentRound') || 'Current'}</span>
+          </div>
+        </div>
+        <div class="round-content">
+          <div class="round-info">
+            <p>${t('multiCli.singleRoundInfo') || 'This is a single-round discussion. View other tabs for details.'}</p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  // Render round navigation and content
+  return `
+    <div class="multi-cli-rounds-tab">
+      <div class="rounds-nav">
+        ${rounds.map((round, idx) => {
+          const roundNum = idx + 1;
+          const isActive = roundNum === totalRounds;
+          const roundStatus = round.convergence?.recommendation || 'continue';
+
+          return `
+            <div class="round-item ${isActive ? 'active' : ''}" data-round="${roundNum}" onclick="loadMultiCliRound('${currentSessionDetailKey}', ${roundNum})">
+              <span class="round-number">Round ${roundNum}</span>
+              <span class="round-status ${roundStatus}">${escapeHtml(roundStatus)}</span>
+            </div>
+          `;
+        }).join('')}
+      </div>
+      <div class="round-content" id="multiCliRoundContent">
+        ${renderRoundContent(rounds[totalRounds - 1] || rounds[0] || session)}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Render content for a specific round
+ */
+function renderRoundContent(round) {
+  if (!round) {
+    return `<div class="round-empty">${t('multiCli.noRoundData') || 'No data for this round.'}</div>`;
+  }
+
+  const metadata = round.metadata || {};
+  const agents = metadata.contributingAgents || [];
+  const convergence = round._internal?.convergence || {};
+  const crossVerification = round._internal?.cross_verification || {};
+
+  let sections = [];
+
+  // Round metadata
+  sections.push(`
+    <div class="round-metadata">
+      <div class="meta-row">
+        <span class="meta-label">${t('multiCli.roundId') || 'Round'}:</span>
+        <span class="meta-value">${metadata.roundId || 1}</span>
+      </div>
+      <div class="meta-row">
+        <span class="meta-label">${t('multiCli.timestamp') || 'Time'}:</span>
+        <span class="meta-value">${formatDate(metadata.timestamp)}</span>
+      </div>
+      ${metadata.durationSeconds ? `
+        <div class="meta-row">
+          <span class="meta-label">${t('multiCli.duration') || 'Duration'}:</span>
+          <span class="meta-value">${metadata.durationSeconds}s</span>
+        </div>
+      ` : ''}
+    </div>
+  `);
+
+  // Contributing agents
+  if (agents.length) {
+    sections.push(`
+      <div class="round-agents">
+        <strong>${t('multiCli.contributors') || 'Contributors'}:</strong>
+        ${agents.map(agent => `<span class="agent-badge">${escapeHtml(agent.name || agent.id)}</span>`).join('')}
+      </div>
+    `);
+  }
+
+  // Convergence metrics
+  if (convergence.score !== undefined) {
+    sections.push(`
+      <div class="round-convergence">
+        <strong>${t('multiCli.convergence') || 'Convergence'}:</strong>
+        <span class="convergence-score">${(convergence.score * 100).toFixed(0)}%</span>
+        <span class="convergence-rec ${convergence.recommendation || ''}">${escapeHtml(convergence.recommendation || '')}</span>
+        ${convergence.new_insights ? `<span class="new-insights-badge">${t('multiCli.newInsights') || 'New Insights'}</span>` : ''}
+      </div>
+    `);
+  }
+
+  // Cross-verification
+  if (crossVerification.agreements?.length || crossVerification.disagreements?.length) {
+    sections.push(`
+      <div class="round-verification collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">&#9658;</span>
+          <span class="section-label">${t('multiCli.crossVerification') || 'Cross-Verification'}</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          ${crossVerification.agreements?.length ? `
+            <div class="agreements">
+              <strong>${t('multiCli.agreements') || 'Agreements'}:</strong>
+              <ul>${crossVerification.agreements.map(a => `<li class="agreement">${escapeHtml(a)}</li>`).join('')}</ul>
+            </div>
+          ` : ''}
+          ${crossVerification.disagreements?.length ? `
+            <div class="disagreements">
+              <strong>${t('multiCli.disagreements') || 'Disagreements'}:</strong>
+              <ul>${crossVerification.disagreements.map(d => `<li class="disagreement">${escapeHtml(d)}</li>`).join('')}</ul>
+            </div>
+          ` : ''}
+          ${crossVerification.resolution ? `
+            <div class="resolution">
+              <strong>${t('multiCli.resolution') || 'Resolution'}:</strong>
+              <p>${escapeHtml(crossVerification.resolution)}</p>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `);
+  }
+
+  // Round solutions
+  if (round.solutions && round.solutions.length > 0) {
+    sections.push(`
+      <div class="round-solutions">
+        <strong>${t('multiCli.solutions') || 'Solutions'} (${round.solutions.length}):</strong>
+        <div class="solutions-list">
+          ${round.solutions.map((solution, idx) => `
+            <div class="solution-card">
+              <div class="solution-header">
+                <div class="solution-title">
+                  <span class="solution-number">${idx + 1}</span>
+                  <span class="solution-name">${escapeHtml(solution.name || `Solution ${idx + 1}`)}</span>
+                </div>
+                <div class="solution-meta">
+                  ${solution.source_cli?.length ? `
+                    <div class="source-clis">
+                      ${solution.source_cli.map(cli => `<span class="cli-badge">${escapeHtml(cli)}</span>`).join('')}
+                    </div>
+                  ` : ''}
+                  <div class="solution-scores">
+                    <span class="score-badge feasibility" title="Feasibility">
+                      ${Math.round((solution.feasibility || 0) * 100)}%
+                    </span>
+                    <span class="score-badge effort-${solution.effort || 'medium'}" title="Effort">
+                      ${escapeHtml(solution.effort || 'medium')}
+                    </span>
+                    <span class="score-badge risk-${solution.risk || 'medium'}" title="Risk">
+                      ${escapeHtml(solution.risk || 'medium')}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              ${solution.summary ? `
+                <div class="solution-summary">
+                  ${escapeHtml(getI18nText(solution.summary))}
+                </div>
+              ` : ''}
+
+              ${solution.implementation_plan?.approach ? `
+                <div class="solution-approach collapsible-section">
+                  <div class="collapsible-header">
+                    <span class="collapse-icon">&#9658;</span>
+                    <span class="section-label">${t('multiCli.implementation') || 'Implementation Approach'}</span>
+                  </div>
+                  <div class="collapsible-content collapsed">
+                    <p>${escapeHtml(getI18nText(solution.implementation_plan.approach))}</p>
+
+                    ${solution.implementation_plan.tasks?.length ? `
+                      <div class="solution-tasks">
+                        <strong>${t('multiCli.tasks') || 'Tasks'}:</strong>
+                        <ul class="task-list">
+                          ${solution.implementation_plan.tasks.map(task => `
+                            <li class="task-item">
+                              <span class="task-id">${escapeHtml(task.id || '')}</span>
+                              <span class="task-name">${escapeHtml(getI18nText(task.name))}</span>
+                              ${task.key_point ? `<span class="task-key-point">${escapeHtml(getI18nText(task.key_point))}</span>` : ''}
+                            </li>
+                          `).join('')}
+                        </ul>
+                      </div>
+                    ` : ''}
+
+                    ${solution.implementation_plan.execution_flow ? `
+                      <div class="execution-flow">
+                        <strong>${t('multiCli.executionFlow') || 'Execution Flow'}:</strong>
+                        <code class="flow-code">${escapeHtml(solution.implementation_plan.execution_flow)}</code>
+                      </div>
+                    ` : ''}
+
+                    ${solution.implementation_plan.milestones?.length ? `
+                      <div class="solution-milestones">
+                        <strong>${t('multiCli.milestones') || 'Milestones'}:</strong>
+                        <ul class="milestone-list">
+                          ${solution.implementation_plan.milestones.map(milestone => `
+                            <li class="milestone-item">${escapeHtml(getI18nText(milestone))}</li>
+                          `).join('')}
+                        </ul>
+                      </div>
+                    ` : ''}
+                  </div>
+                </div>
+              ` : ''}
+
+              ${(solution.dependencies?.internal?.length || solution.dependencies?.external?.length) ? `
+                <div class="solution-dependencies collapsible-section">
+                  <div class="collapsible-header">
+                    <span class="collapse-icon">&#9658;</span>
+                    <span class="section-label">${t('multiCli.dependencies') || 'Dependencies'}</span>
+                  </div>
+                  <div class="collapsible-content collapsed">
+                    ${solution.dependencies.internal?.length ? `
+                      <div class="internal-deps">
+                        <strong>${t('multiCli.internalDeps') || 'Internal'}:</strong>
+                        <ul class="dep-list">
+                          ${solution.dependencies.internal.map(dep => `
+                            <li class="dep-item">${escapeHtml(getI18nText(dep))}</li>
+                          `).join('')}
+                        </ul>
+                      </div>
+                    ` : ''}
+                    ${solution.dependencies.external?.length ? `
+                      <div class="external-deps">
+                        <strong>${t('multiCli.externalDeps') || 'External'}:</strong>
+                        <ul class="dep-list">
+                          ${solution.dependencies.external.map(dep => `
+                            <li class="dep-item">${escapeHtml(getI18nText(dep))}</li>
+                          `).join('')}
+                        </ul>
+                      </div>
+                    ` : ''}
+                  </div>
+                </div>
+              ` : ''}
+
+              ${solution.technical_concerns?.length ? `
+                <div class="solution-concerns collapsible-section">
+                  <div class="collapsible-header">
+                    <span class="collapse-icon">&#9658;</span>
+                    <span class="section-label">${t('multiCli.technicalConcerns') || 'Technical Concerns'}</span>
+                  </div>
+                  <div class="collapsible-content collapsed">
+                    <ul class="concern-list">
+                      ${solution.technical_concerns.map(concern => `
+                        <li class="concern-item">${escapeHtml(getI18nText(concern))}</li>
+                      `).join('')}
+                    </ul>
+                  </div>
+                </div>
+              ` : ''}
+            </div>
+          `).join('')}
+        </div>
+      </div>
+    `);
+  }
+
+  return sections.join('');
+}
+
+/**
+ * Load a specific round's data (async, may fetch from server)
+ */
+async function loadMultiCliRound(sessionKey, roundNum) {
+  const session = liteTaskDataStore[sessionKey];
+  if (!session) return;
+
+  // Update active state in nav
+  document.querySelectorAll('.round-item').forEach(item => {
+    item.classList.toggle('active', parseInt(item.dataset.round) === roundNum);
+  });
+
+  const contentArea = document.getElementById('multiCliRoundContent');
+
+  // If we have rounds array, use it
+  if (session.rounds && session.rounds[roundNum - 1]) {
+    contentArea.innerHTML = renderRoundContent(session.rounds[roundNum - 1]);
+    initCollapsibleSections(contentArea);
+    return;
+  }
+
+  // Otherwise try to fetch from server
+  if (window.SERVER_MODE && session.path) {
+    contentArea.innerHTML = `<div class="tab-loading">${t('common.loading') || 'Loading...'}</div>`;
+    try {
+      const response = await fetch(`/api/session-detail?path=${encodeURIComponent(session.path)}&type=round&round=${roundNum}`);
+      if (response.ok) {
+        const data = await response.json();
+        contentArea.innerHTML = renderRoundContent(data.round || {});
+        initCollapsibleSections(contentArea);
+        return;
+      }
+    } catch (err) {
+      console.error('Failed to load round:', err);
+    }
+  }
+
+  // Fallback
+  contentArea.innerHTML = `<div class="round-empty">${t('multiCli.noRoundData') || 'No data for this round.'}</div>`;
+}
+
+/**
+ * Render Discussion Section (combines Topic, Rounds, Decision)
+ * Uses accordion layout to display discussion rounds
+ */
+function renderMultiCliDiscussionSection(session) {
+  const rounds = session.rounds || [];
+  const metadata = session.metadata || {};
+  const totalRounds = metadata.roundId || rounds.length || 1;
+  const topic = session.discussionTopic || session.latestSynthesis?.discussionTopic || {};
+
+  // If no rounds, show topic summary and current synthesis
+  if (!rounds.length) {
+    const title = getI18nText(topic.title) || t('multiCli.discussion.discussionTopic');
+    const description = getI18nText(topic.description) || '';
+    const status = topic.status || session.status || 'analyzing';
+
+    return `
+      <div class="multi-cli-discussion-section">
+        <div class="discussion-header">
+          <h3 class="discussion-title">${escapeHtml(title)}</h3>
+          <span class="discussion-status ${status}">${escapeHtml(status)}</span>
+        </div>
+        ${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')}</p>
+        </div>
+      </div>
+    `;
+  }
+
+  // Render accordion for multiple rounds
+  const accordionItems = rounds.map((round, idx) => {
+    const roundNum = idx + 1;
+    const isLatest = roundNum === totalRounds;
+    const roundMeta = round.metadata || {};
+    const convergence = round._internal?.convergence || round.convergence || {};
+    const recommendation = convergence.recommendation || 'continue';
+    const score = convergence.score !== undefined ? Math.round(convergence.score * 100) : null;
+    const solutions = round.solutions || [];
+    const agents = roundMeta.contributingAgents || [];
+
+    return `
+      <div class="discussion-round collapsible-section ${isLatest ? 'expanded' : ''}">
+        <div class="collapsible-header discussion-round-header">
+          <span class="collapse-icon">${isLatest ? '&#9660;' : '&#9658;'}</span>
+          <div class="round-title-group">
+            <span class="round-badge">${t('multiCli.round') || 'Round'} ${roundNum}</span>
+            <span class="round-timestamp">${formatDate(roundMeta.timestamp)}</span>
+          </div>
+          <div class="round-indicators">
+            ${score !== null ? `<span class="convergence-badge" title="${t('multiCli.convergence') || 'Convergence'}">${score}%</span>` : ''}
+            <span class="recommendation-badge ${recommendation}">${escapeHtml(recommendation)}</span>
+          </div>
+        </div>
+        <div class="collapsible-content ${isLatest ? '' : 'collapsed'}">
+          <!-- Discussion Topic for this round -->
+          ${round.discussionTopic ? `
+            <div class="round-topic">
+              <h4 class="round-section-title"><i data-lucide="message-circle" class="w-4 h-4 inline"></i> ${t('multiCli.topic') || 'Topic'}</h4>
+              <p>${escapeHtml(getI18nText(round.discussionTopic.title || round.discussionTopic))}</p>
+            </div>
+          ` : ''}
+
+          <!-- Contributing Agents -->
+          ${agents.length ? `
+            <div class="round-agents">
+              <h4 class="round-section-title"><i data-lucide="users" class="w-4 h-4 inline"></i> ${t('multiCli.contributors') || 'Contributors'}</h4>
+              <div class="agent-badges">
+                ${agents.map(agent => `<span class="agent-badge">${escapeHtml(agent.name || agent.id || agent)}</span>`).join('')}
+              </div>
+            </div>
+          ` : ''}
+
+          <!-- 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.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 || `${t('multiCli.summary.solution')} ${sidx + 1}`)}</span>
+                    </div>
+                    <div class="solution-mini-scores">
+                      <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>
+                    ${sol.summary ? `<p class="solution-mini-summary">${escapeHtml(getI18nText(sol.summary).substring(0, 100))}${getI18nText(sol.summary).length > 100 ? '...' : ''}</p>` : ''}
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          ` : ''}
+
+          <!-- 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')}</h4>
+              <p class="decision-text">${escapeHtml(convergence.reasoning || round.decision || '')}</p>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }).join('');
+
+  return `
+    <div class="multi-cli-discussion-section">
+      <div class="discussion-header">
+        <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}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Render Association Section (context-package key fields)
+ * Shows solution summary, dependencies, consensus
+ */
+function renderMultiCliAssociationSection(session) {
+  const contextPkg = session.contextPackage || session.context_package || session.latestSynthesis?.context_package || {};
+  const solutions = contextPkg.solutions || session.latestSynthesis?.solutions || [];
+  const dependencies = contextPkg.dependencies || {};
+  const consensus = contextPkg.consensus || session.latestSynthesis?._internal?.cross_verification || {};
+  const relatedFiles = extractFilesFromSynthesis(session.latestSynthesis);
+
+  // Check if we have any content to display
+  const hasSolutions = solutions.length > 0;
+  const hasDependencies = dependencies.internal?.length || dependencies.external?.length;
+  const hasConsensus = consensus.agreements?.length || consensus.resolved_conflicts?.length || consensus.disagreements?.length;
+  const hasFiles = relatedFiles?.fileTree?.length || relatedFiles?.impactSummary?.length;
+
+  if (!hasSolutions && !hasDependencies && !hasConsensus && !hasFiles) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon"><i data-lucide="link-2" class="w-12 h-12"></i></div>
+        <div class="empty-title">${t('multiCli.empty.association') || 'No Association Data'}</div>
+        <div class="empty-text">${t('multiCli.empty.associationText') || 'No context package or related files available for this session.'}</div>
+      </div>
+    `;
+  }
+
+  let sections = [];
+
+  // Solution Summary Cards
+  if (hasSolutions) {
+    sections.push(`
+      <div class="association-section solutions-section">
+        <h4 class="association-section-title">
+          <i data-lucide="lightbulb" class="w-4 h-4 inline"></i>
+          ${t('multiCli.solutionSummary') || 'Solution Summary'}
+        </h4>
+        <div class="association-cards-grid">
+          ${solutions.map((sol, idx) => `
+            <div class="association-card solution-card">
+              <div class="card-header">
+                <span class="card-number">${idx + 1}</span>
+                <span class="card-title">${escapeHtml(sol.name || 'Solution ' + (idx + 1))}</span>
+              </div>
+              <div class="card-metrics">
+                <div class="metric">
+                  <span class="metric-label">${t('multiCli.feasibility') || 'Feasibility'}</span>
+                  <span class="metric-value">${Math.round((sol.feasibility || 0) * 100)}%</span>
+                </div>
+                <div class="metric">
+                  <span class="metric-label">${t('multiCli.effort') || 'Effort'}</span>
+                  <span class="metric-value effort-${sol.effort || 'medium'}">${escapeHtml(sol.effort || 'medium')}</span>
+                </div>
+                <div class="metric">
+                  <span class="metric-label">${t('multiCli.risk') || 'Risk'}</span>
+                  <span class="metric-value risk-${sol.risk || 'medium'}">${escapeHtml(sol.risk || 'medium')}</span>
+                </div>
+              </div>
+              ${sol.summary ? `<p class="card-description">${escapeHtml(getI18nText(sol.summary))}</p>` : ''}
+            </div>
+          `).join('')}
+        </div>
+      </div>
+    `);
+  }
+
+  // Dependencies Card
+  if (hasDependencies) {
+    sections.push(`
+      <div class="association-section dependencies-section">
+        <h4 class="association-section-title">
+          <i data-lucide="git-branch" class="w-4 h-4 inline"></i>
+          ${t('multiCli.dependencies') || 'Dependencies'}
+        </h4>
+        <div class="dependencies-grid">
+          ${dependencies.internal?.length ? `
+            <div class="association-card dependency-card">
+              <div class="card-header">
+                <i data-lucide="folder" class="w-4 h-4"></i>
+                <span class="card-title">${t('multiCli.internalDeps') || 'Internal'}</span>
+                <span class="card-count">${dependencies.internal.length}</span>
+              </div>
+              <ul class="dependency-list">
+                ${dependencies.internal.map(dep => `<li>${escapeHtml(getI18nText(dep))}</li>`).join('')}
+              </ul>
+            </div>
+          ` : ''}
+          ${dependencies.external?.length ? `
+            <div class="association-card dependency-card">
+              <div class="card-header">
+                <i data-lucide="package" class="w-4 h-4"></i>
+                <span class="card-title">${t('multiCli.externalDeps') || 'External'}</span>
+                <span class="card-count">${dependencies.external.length}</span>
+              </div>
+              <ul class="dependency-list">
+                ${dependencies.external.map(dep => `<li>${escapeHtml(getI18nText(dep))}</li>`).join('')}
+              </ul>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `);
+  }
+
+  // Consensus Card
+  if (hasConsensus) {
+    sections.push(`
+      <div class="association-section consensus-section">
+        <h4 class="association-section-title">
+          <i data-lucide="check-check" class="w-4 h-4 inline"></i>
+          ${t('multiCli.consensus') || 'Consensus'}
+        </h4>
+        <div class="consensus-grid">
+          ${consensus.agreements?.length ? `
+            <div class="association-card consensus-card agreements">
+              <div class="card-header">
+                <i data-lucide="thumbs-up" class="w-4 h-4"></i>
+                <span class="card-title">${t('multiCli.agreements') || 'Agreements'}</span>
+                <span class="card-count">${consensus.agreements.length}</span>
+              </div>
+              <ul class="consensus-list">
+                ${consensus.agreements.map(item => `<li class="agreement-item">${escapeHtml(item)}</li>`).join('')}
+              </ul>
+            </div>
+          ` : ''}
+          ${(consensus.resolved_conflicts?.length || consensus.disagreements?.length) ? `
+            <div class="association-card consensus-card conflicts">
+              <div class="card-header">
+                <i data-lucide="git-merge" class="w-4 h-4"></i>
+                <span class="card-title">${t('multiCli.resolvedConflicts') || 'Resolved Conflicts'}</span>
+                <span class="card-count">${(consensus.resolved_conflicts || consensus.disagreements || []).length}</span>
+              </div>
+              <ul class="consensus-list">
+                ${(consensus.resolved_conflicts || consensus.disagreements || []).map(item => `<li class="conflict-item">${escapeHtml(item)}</li>`).join('')}
+              </ul>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `);
+  }
+
+  // Related Files (from existing Files tab logic)
+  if (hasFiles) {
+    sections.push(`
+      <div class="association-section files-section">
+        <h4 class="association-section-title">
+          <i data-lucide="folder-tree" class="w-4 h-4 inline"></i>
+          ${t('multiCli.tab.files') || 'Related Files'}
+        </h4>
+        <div class="files-summary">
+          ${relatedFiles.fileTree?.length ? `
+            <div class="files-list">
+              ${relatedFiles.fileTree.slice(0, 10).map(file => `
+                <div class="file-item">
+                  <i data-lucide="file" class="w-3 h-3"></i>
+                  <span class="file-path">${escapeHtml(typeof file === 'string' ? file : file.path || file.name)}</span>
+                </div>
+              `).join('')}
+              ${relatedFiles.fileTree.length > 10 ? `
+                <div class="files-more">+${relatedFiles.fileTree.length - 10} ${t('common.more') || 'more'}</div>
+              ` : ''}
+            </div>
+          ` : ''}
+          ${relatedFiles.impactSummary?.length ? `
+            <div class="impact-summary">
+              <h5>${t('multiCli.impactSummary') || 'Impact Summary'}</h5>
+              <ul>
+                ${relatedFiles.impactSummary.slice(0, 5).map(item => `<li>${escapeHtml(getI18nText(item))}</li>`).join('')}
+              </ul>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `);
+  }
+
+  return `
+    <div class="multi-cli-association-section">
+      ${sections.join('')}
+    </div>
+  `;
+}
+
 // Lite Task Detail Page
 function showLiteTaskDetailPage(sessionKey) {
   const session = liteTaskDataStore[sessionKey];