claude-code-workflow 6.3.26 → 6.3.28

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,1806 @@ 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;
+}
+
+// Track multi-cli toolbar state
+let isMultiCliToolbarExpanded = false;
+
+/**
+ * Show multi-cli detail page with tabs
+ */
+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 discussionTopic = session.discussionTopic || {};
+  const latestSynthesis = session.latestSynthesis || discussionTopic;
+  const roundCount = metadata.roundId || session.roundCount || 1;
+  const topicTitle = getI18nText(latestSynthesis.title) || session.topicTitle || 'Discussion Topic';
+  const status = latestSynthesis.status || session.status || 'analyzing';
+
+  container.innerHTML = `
+    <div class="session-detail-page multi-cli-detail-page multi-cli-detail-with-toolbar">
+      <!-- Main Content Area -->
+      <div class="multi-cli-main-content">
+        <!-- Header -->
+        <div class="detail-header">
+          <button class="btn-back" onclick="goBackToLiteTasks()">
+            <span class="back-icon">&larr;</span>
+            <span>${t('multiCli.backToList') || 'Back to Multi-CLI Plan'}</span>
+          </button>
+          <div class="detail-title-row">
+            <h2 class="detail-session-id"><i data-lucide="messages-square" class="w-5 h-5 inline mr-2"></i> ${escapeHtml(session.id)}</h2>
+            <div class="detail-badges">
+              <span class="session-type-badge multi-cli-plan">multi-cli-plan</span>
+              <span class="session-status-badge ${status}">${escapeHtml(status)}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Session Info Bar -->
+        <div class="detail-info-bar">
+          <div class="info-item">
+            <span class="info-label">${t('detail.created') || 'Created'}</span>
+            <span class="info-value">${formatDate(metadata.timestamp || session.createdAt)}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">${t('multiCli.roundCount') || 'Rounds'}</span>
+            <span class="info-value">${roundCount}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">${t('multiCli.topic') || 'Topic'}</span>
+            <span class="info-value">${escapeHtml(topicTitle)}</span>
+          </div>
+        </div>
+
+        <!-- Tab Navigation -->
+        <div class="detail-tabs">
+          <button class="detail-tab active" data-tab="planning" onclick="switchMultiCliDetailTab('planning')">
+            <span class="tab-icon"><i data-lucide="list-checks" class="w-4 h-4"></i></span>
+            <span class="tab-text">${t('multiCli.tab.planning') || 'Planning'}</span>
+          </button>
+          <button class="detail-tab" data-tab="discussion" onclick="switchMultiCliDetailTab('discussion')">
+            <span class="tab-icon"><i data-lucide="messages-square" class="w-4 h-4"></i></span>
+            <span class="tab-text">${t('multiCli.tab.discussion') || 'Discussion'}</span>
+            <span class="tab-count">${roundCount}</span>
+          </button>
+          <button class="detail-tab" data-tab="association" onclick="switchMultiCliDetailTab('association')">
+            <span class="tab-icon"><i data-lucide="link-2" class="w-4 h-4"></i></span>
+            <span class="tab-text">${t('multiCli.tab.association') || 'Association'}</span>
+          </button>
+        </div>
+
+        <!-- Tab Content -->
+        <div class="detail-tab-content" id="multiCliDetailTabContent">
+          ${renderMultiCliPlanningTab(session)}
+        </div>
+      </div>
+
+      <!-- Right Toolbar -->
+      <div class="multi-cli-toolbar ${isMultiCliToolbarExpanded ? 'expanded' : 'collapsed'}" id="multiCliToolbar">
+        <button class="toolbar-toggle-btn" onclick="toggleMultiCliToolbar()" title="${t('multiCli.toolbar.toggle') || 'Toggle Task Panel'}">
+          <i data-lucide="${isMultiCliToolbarExpanded ? 'panel-right-close' : 'panel-right-open'}" class="w-5 h-5"></i>
+        </button>
+        <div class="toolbar-content">
+          ${renderMultiCliToolbar(session)}
+        </div>
+      </div>
+    </div>
+  `;
+
+  // Initialize icons and collapsible sections
+  setTimeout(() => {
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+    initCollapsibleSections(container);
+  }, 50);
+}
+
+/**
+ * Toggle multi-cli toolbar expanded/collapsed state
+ */
+function toggleMultiCliToolbar() {
+  isMultiCliToolbarExpanded = !isMultiCliToolbarExpanded;
+  const toolbar = document.getElementById('multiCliToolbar');
+  const toggleBtn = toolbar?.querySelector('.toolbar-toggle-btn i');
+
+  if (toolbar) {
+    toolbar.classList.toggle('expanded', isMultiCliToolbarExpanded);
+    toolbar.classList.toggle('collapsed', !isMultiCliToolbarExpanded);
+
+    // Update icon
+    if (toggleBtn) {
+      toggleBtn.setAttribute('data-lucide', isMultiCliToolbarExpanded ? 'panel-right-close' : 'panel-right-open');
+      if (typeof lucide !== 'undefined') lucide.createIcons();
+    }
+  }
+}
+
+/**
+ * Render the multi-cli toolbar content
+ */
+function renderMultiCliToolbar(session) {
+  const plan = session.plan;
+  const tasks = plan?.tasks || [];
+  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.summary || `Task ${idx + 1}`;
+          const taskScope = task.scope || '';
+          const taskId = `task-${idx}`;
+
+          return `
+            <div class="toolbar-task-item" onclick="scrollToMultiCliTask(${idx})" 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);
+  }
+}
+
+/**
+ * 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 'planning':
+      contentArea.innerHTML = renderMultiCliPlanningTab(session);
+      break;
+    case 'discussion':
+      contentArea.innerHTML = renderMultiCliDiscussionSection(session);
+      break;
+    case 'association':
+      contentArea.innerHTML = renderMultiCliAssociationSection(session);
+      break;
+  }
+
+  // Re-initialize after tab switch
+  setTimeout(() => {
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+    initCollapsibleSections(contentArea);
+  }, 50);
+}
+
+// ============================================
+// MULTI-CLI TAB RENDERERS
+// ============================================
+
+/**
+ * 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 -->
+      ${plan.tasks?.length ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title"><i data-lucide="list-checks" class="w-4 h-4 inline mr-1"></i> Tasks (${plan.tasks.length})</h4>
+          <div class="fix-tasks-summary">
+            ${plan.tasks.map((task, idx) => `
+              <div class="fix-task-summary-item collapsible-section">
+                <div class="collapsible-header">
+                  <span class="collapse-icon">&#9654;</span>
+                  <span class="task-num">#${idx + 1}</span>
+                  <span class="task-title-brief">${escapeHtml(task.title || task.summary || 'Untitled')}</span>
+                  ${task.scope ? `<span class="task-scope-badge">${escapeHtml(task.scope)}</span>` : ''}
+                </div>
+                <div class="collapsible-content collapsed">
+                  ${task.modification_points?.length ? `
+                    <div class="task-detail-section">
+                      <strong>Modification Points:</strong>
+                      <ul class="mod-points-list">
+                        ${task.modification_points.map(mp => `
+                          <li>
+                            <code>${escapeHtml(mp.file || '')}</code>
+                            ${mp.function_name ? `<span class="func-name">-> ${escapeHtml(mp.function_name)}</span>` : ''}
+                            ${mp.change_type ? `<span class="change-type">(${escapeHtml(mp.change_type)})</span>` : ''}
+                          </li>
+                        `).join('')}
+                      </ul>
+                    </div>
+                  ` : ''}
+                  ${task.implementation?.length ? `
+                    <div class="task-detail-section">
+                      <strong>Implementation Steps:</strong>
+                      <ol class="impl-steps-list">
+                        ${task.implementation.map(step => `<li>${escapeHtml(step)}</li>`).join('')}
+                      </ol>
+                    </div>
+                  ` : ''}
+                  ${task.verification?.length ? `
+                    <div class="task-detail-section">
+                      <strong>Verification:</strong>
+                      <ul class="verify-list">
+                        ${task.verification.map(v => `<li>${escapeHtml(v)}</li>`).join('')}
+                      </ul>
+                    </div>
+                  ` : ''}
+                </div>
+              </div>
+            `).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 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) || 'Discussion Topic';
+    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') || 'This is a single-round discussion. View Planning tab for execution details.'}</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'} (${solutions.length})</h4>
+              <div class="solution-cards-grid">
+                ${solutions.map((sol, sidx) => `
+                  <div class="solution-mini-card">
+                    <div class="solution-mini-header">
+                      <span class="solution-number">${sidx + 1}</span>
+                      <span class="solution-name">${escapeHtml(sol.name || 'Solution ' + (sidx + 1))}</span>
+                    </div>
+                    <div class="solution-mini-scores">
+                      <span class="score-pill feasibility" title="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') || '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) || 'Discussion')}</h3>
+        <span class="rounds-count">${totalRounds} ${t('multiCli.tab.rounds') || '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];