claude-code-workflow 6.3.53 → 7.0.0

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

@@ -1,3546 +0,0 @@
-// ============================================
-// LITE TASKS VIEW
-// ============================================
-// Lite-plan and lite-fix task list and detail rendering
-
-function renderLiteTasks() {
-  const container = document.getElementById('mainContent');
-
-  const liteTasks = workflowData.liteTasks || {};
-  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 = `
-      <div class="empty-state">
-        <div class="empty-icon"><i data-lucide="zap" class="w-12 h-12"></i></div>
-        <div class="empty-title">${t('empty.noLiteSessions', { type: currentLiteType })}</div>
-        <div class="empty-text">${t('empty.noLiteSessionsText', { type: currentLiteType })}</div>
-      </div>
-    `;
-    if (typeof lucide !== 'undefined') lucide.createIcons();
-    return;
-  }
-
-  // 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();
-
-  // Initialize collapsible sections
-  document.querySelectorAll('.collapsible-header').forEach(header => {
-    header.addEventListener('click', () => toggleSection(header));
-  });
-
-  // Render flowcharts for expanded tasks
-  sessions.forEach(session => {
-    session.tasks?.forEach(task => {
-      if (task.flow_control?.implementation_approach) {
-        renderFlowchartForTask(session.id, task);
-      }
-    });
-  });
-}
-
-function renderLiteTaskCard(session) {
-  const tasks = session.tasks || [];
-
-  // Store session data for detail page
-  const sessionKey = `lite-${session.type}-${session.id}`.replace(/[^a-zA-Z0-9-]/g, '-');
-  liteTaskDataStore[sessionKey] = session;
-
-  return `
-    <div class="session-card lite-task-card" onclick="showLiteTaskDetailPage('${sessionKey}')" style="cursor: pointer;">
-      <div class="session-header">
-        <div class="session-title">${escapeHtml(session.id)}</div>
-        <span class="session-status ${session.type}">
-          ${session.type === 'lite-plan' ? '<i data-lucide="file-edit" class="w-3 h-3 inline"></i> ' + t('lite.plan') : '<i data-lucide="wrench" class="w-3 h-3 inline"></i> ' + t('lite.fix')}
-        </span>
-      </div>
-      <div class="session-body">
-        <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(session.createdAt)}</span>
-          <span class="session-meta-item"><i data-lucide="list-checks" class="w-3.5 h-3.5 inline mr-1"></i>${tasks.length} ${t('session.tasks')}</span>
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-// ============================================
-// 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 active" 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);
-      contentArea.classList.add('active');
-      return; // Early return as this is async
-    case 'summary':
-      loadAndRenderMultiCliSummaryTab(session, contentArea);
-      contentArea.classList.add('active');
-      return; // Early return as this is async
-  }
-
-  // Add active class to show content
-  contentArea.classList.add('active');
-
-  // 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();
-        // Support both summaries (from .summaries/) and summary (from plan.json)
-        const summaryText = data.summary || (data.summaries?.length ? data.summaries[0].content : null);
-        contentArea.innerHTML = renderMultiCliSummaryContent(summaryText, 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) => {
-            const name = getI18nText(sol.name) || sol.title || sol.id || `${t('multiCli.summary.solution')} ${idx + 1}`;
-            const summary = getI18nText(sol.summary) || '';
-            const feasibility = sol.feasibility?.score || sol.feasibility || 0;
-            const effort = sol.effort || '';
-            const risk = sol.risk || '';
-            const pros = sol.pros || [];
-            const cons = sol.cons || [];
-
-            return `
-              <div class="solution-card">
-                <div class="solution-header">
-                  <div class="solution-title-row">
-                    <span class="solution-num">#${idx + 1}</span>
-                    <span class="solution-name">${escapeHtml(name)}</span>
-                  </div>
-                  <div class="solution-badges">
-                    ${feasibility ? `<span class="badge feasibility">${Math.round(feasibility * 100)}%</span>` : ''}
-                    ${effort ? `<span class="badge effort ${escapeHtml(effort)}">${escapeHtml(effort)}</span>` : ''}
-                    ${risk ? `<span class="badge risk ${escapeHtml(risk)}">${escapeHtml(risk)}</span>` : ''}
-                  </div>
-                </div>
-                ${summary ? `
-                  <div class="solution-summary">
-                    <p>${escapeHtml(summary)}</p>
-                  </div>
-                ` : ''}
-                ${pros.length > 0 ? `
-                  <div class="solution-details">
-                    <h5 class="details-label">✓ ${t('multiCli.summary.pros') || 'Pros'}:</h5>
-                    <ul class="details-list">
-                      ${pros.map(p => `<li>${escapeHtml(getI18nText(p) || p)}</li>`).join('')}
-                    </ul>
-                  </div>
-                ` : ''}
-                ${cons.length > 0 ? `
-                  <div class="solution-details">
-                    <h5 class="details-label">✗ ${t('multiCli.summary.cons') || 'Cons'}:</h5>
-                    <ul class="details-list">
-                      ${cons.map(c => `<li>${escapeHtml(getI18nText(c) || c)}</li>`).join('')}
-                    </ul>
-                  </div>
-                ` : ''}
-              </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];
-  if (!session) return;
-
-  currentView = 'liteTaskDetail';
-  currentSessionDetailKey = sessionKey;
-
-  // Hide stats grid and carousel on detail pages
-  hideStatsAndCarousel();
-
-  // Also store in sessionDataStore for tab switching compatibility
-  sessionDataStore[sessionKey] = {
-    ...session,
-    session_id: session.id,
-    created_at: session.createdAt,
-    path: session.path,
-    type: session.type
-  };
-
-  const container = document.getElementById('mainContent');
-  const tasks = session.tasks || [];
-  const plan = session.plan || {};
-  const progress = session.progress || { total: 0, completed: 0, percentage: 0 };
-
-  const completed = tasks.filter(t => t.status === 'completed').length;
-  const inProgress = tasks.filter(t => t.status === 'in_progress').length;
-  const pending = tasks.filter(t => t.status === 'pending').length;
-
-  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>${session.type === 'lite-plan' ? t('lite.backToList', { type: 'Plan' }) : session.type === 'lite-fix' ? t('lite.backToList', { type: 'Fix' }) : t('multiCli.backToList')}</span>
-        </button>
-        <div class="detail-title-row">
-          <h2 class="detail-session-id">${session.type === 'lite-plan' ? '<i data-lucide="file-edit" class="w-5 h-5 inline mr-2"></i>' : session.type === 'lite-fix' ? '<i data-lucide="wrench" class="w-5 h-5 inline mr-2"></i>' : '<i data-lucide="speech-icon" class="w-5 h-5 inline mr-2"></i>'} ${escapeHtml(session.id)}</h2>
-          <div class="detail-badges">
-            <span class="session-type-badge ${session.type}">${session.type === 'multi-cli-plan' ? 'MULTI-CLI' : session.type}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Session Info Bar -->
-      <div class="detail-info-bar">
-        <div class="info-item">
-          <span class="info-label">${t('detail.created')}</span>
-          <span class="info-value">${formatDate(session.createdAt)}</span>
-        </div>
-        <div class="info-item">
-          <span class="info-label">${t('detail.tasks')}</span>
-          <span class="info-value">${tasks.length} ${t('session.tasks')}</span>
-        </div>
-      </div>
-
-      <!-- Tab Navigation -->
-      <div class="detail-tabs">
-        <button class="detail-tab active" data-tab="tasks" onclick="switchLiteDetailTab('tasks')">
-          <span class="tab-icon"><i data-lucide="list-checks" class="w-4 h-4"></i></span>
-          <span class="tab-text">${t('tab.tasks')}</span>
-          <span class="tab-count">${tasks.length}</span>
-        </button>
-        <button class="detail-tab" data-tab="plan" onclick="switchLiteDetailTab('plan')">
-          <span class="tab-icon"><i data-lucide="ruler" class="w-4 h-4"></i></span>
-          <span class="tab-text">${t('tab.plan')}</span>
-        </button>
-        ${session.type === 'lite-fix' ? `
-        <button class="detail-tab" data-tab="diagnoses" onclick="switchLiteDetailTab('diagnoses')">
-          <span class="tab-icon"><i data-lucide="stethoscope" class="w-4 h-4"></i></span>
-          <span class="tab-text">${t('tab.diagnoses')}</span>
-          ${session.diagnoses?.items?.length ? `<span class="tab-count">${session.diagnoses.items.length}</span>` : ''}
-        </button>
-        ` : ''}
-        <button class="detail-tab" data-tab="context" onclick="switchLiteDetailTab('context')">
-          <span class="tab-icon"><i data-lucide="package" class="w-4 h-4"></i></span>
-          <span class="tab-text">${t('tab.context')}</span>
-        </button>
-        <button class="detail-tab" data-tab="summary" onclick="switchLiteDetailTab('summary')">
-          <span class="tab-icon"><i data-lucide="file-text" class="w-4 h-4"></i></span>
-          <span class="tab-text">${t('tab.summary')}</span>
-        </button>
-      </div>
-
-      <!-- Tab Content -->
-      <div class="detail-tab-content active" id="liteDetailTabContent">
-        ${renderLiteTasksTab(session, tasks, completed, inProgress, pending)}
-      </div>
-    </div>
-  `;
-
-  // Initialize collapsible sections and task click handlers
-  setTimeout(() => {
-    document.querySelectorAll('.collapsible-header').forEach(header => {
-      header.addEventListener('click', () => toggleSection(header));
-    });
-    // Bind click events to lite task items on initial load
-    initLiteTaskClickHandlers();
-  }, 50);
-}
-
-function goBackToLiteTasks() {
-  currentView = 'liteTasks';
-  currentSessionDetailKey = null;
-  updateContentTitle();
-  showStatsAndSearch();
-  renderLiteTasks();
-}
-
-function switchLiteDetailTab(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('liteDetailTabContent');
-  const tasks = session.tasks || [];
-  const completed = tasks.filter(t => t.status === 'completed').length;
-  const inProgress = tasks.filter(t => t.status === 'in_progress').length;
-  const pending = tasks.filter(t => t.status === 'pending').length;
-
-  switch (tabName) {
-    case 'tasks':
-      contentArea.innerHTML = renderLiteTasksTab(session, tasks, completed, inProgress, pending);
-      // Re-initialize collapsible sections and task click handlers
-      setTimeout(() => {
-        document.querySelectorAll('.collapsible-header').forEach(header => {
-          header.addEventListener('click', () => toggleSection(header));
-        });
-        // Bind click events to lite task items
-        initLiteTaskClickHandlers();
-      }, 50);
-      break;
-    case 'plan':
-      contentArea.innerHTML = renderLitePlanTab(session);
-      // Re-initialize collapsible sections for plan tab
-      setTimeout(() => {
-        initCollapsibleSections(contentArea);
-      }, 50);
-      break;
-    case 'diagnoses':
-      contentArea.innerHTML = renderDiagnosesTab(session);
-      // Re-initialize collapsible sections for diagnoses tab
-      setTimeout(() => {
-        initCollapsibleSections(contentArea);
-      }, 50);
-      break;
-    case 'context':
-      loadAndRenderLiteContextTab(session, contentArea);
-      break;
-    case 'summary':
-      loadAndRenderLiteSummaryTab(session, contentArea);
-      break;
-  }
-}
-
-function renderLiteTasksTab(session, tasks, completed, inProgress, pending) {
-  // Populate drawer tasks for click-to-open functionality
-  currentDrawerTasks = tasks;
-
-  if (tasks.length === 0) {
-    return `
-      <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')}</div>
-        <div class="empty-text">${t('empty.noTasksText')}</div>
-      </div>
-    `;
-  }
-
-  return `
-    <div class="tasks-tab-content">
-      <div class="tasks-list" id="liteTasksListContent">
-        ${tasks.map(task => renderLiteTaskDetailItem(session.id, task)).join('')}
-      </div>
-    </div>
-  `;
-}
-
-function renderLiteTaskDetailItem(sessionId, task) {
-  const rawTask = task._raw || task;
-  const taskJsonId = `task-json-${sessionId}-${task.id}`.replace(/[^a-zA-Z0-9-]/g, '-');
-  taskJsonStore[taskJsonId] = rawTask;
-
-  // Get preview info for lite tasks
-  const action = rawTask.action || '';
-  const scope = rawTask.scope || '';
-  const modCount = rawTask.modification_points?.length || 0;
-  const implCount = rawTask.implementation?.length || 0;
-  const acceptCount = rawTask.acceptance?.length || 0;
-
-  // Escape for data attributes
-  const safeSessionId = escapeHtml(sessionId);
-  const safeTaskId = escapeHtml(task.id);
-
-  return `
-    <div class="detail-task-item-full lite-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(task.id)}</span>
-        <span class="task-title">${escapeHtml(task.title || '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">
-        ${action ? `<span class="meta-badge action">${escapeHtml(action)}</span>` : ''}
-        ${scope ? `<span class="meta-badge scope">${escapeHtml(scope)}</span>` : ''}
-        ${modCount > 0 ? `<span class="meta-badge mods">${modCount} mods</span>` : ''}
-        ${implCount > 0 ? `<span class="meta-badge impl">${implCount} steps</span>` : ''}
-        ${acceptCount > 0 ? `<span class="meta-badge accept">${acceptCount} acceptance</span>` : ''}
-      </div>
-    </div>
-  `;
-}
-
-function getMetaPreviewForLite(task, rawTask) {
-  const meta = task.meta || {};
-  const parts = [];
-  if (meta.type || rawTask.action) parts.push(meta.type || rawTask.action);
-  if (meta.scope || rawTask.scope) parts.push(meta.scope || rawTask.scope);
-  return parts.join(' | ') || 'No meta';
-}
-
-/**
- * Initialize click handlers for lite task items
- */
-function initLiteTaskClickHandlers() {
-  // Task item click handlers
-  document.querySelectorAll('.lite-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;
-        openTaskDrawerForLite(sessionId, taskId);
-      });
-    }
-  });
-
-  // JSON button click handlers
-  document.querySelectorAll('.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);
-      });
-    }
-  });
-}
-
-function openTaskDrawerForLite(sessionId, taskId) {
-  const session = liteTaskDataStore[currentSessionDetailKey];
-  if (!session) return;
-
-  const task = session.tasks?.find(t => t.id === taskId);
-  if (!task) return;
-
-  // Set current drawer tasks and session context
-  currentDrawerTasks = session.tasks || [];
-  window._currentDrawerSession = session;
-
-  document.getElementById('drawerTaskTitle').textContent = task.title || taskId;
-  // Use dedicated lite task drawer renderer
-  document.getElementById('drawerContent').innerHTML = renderLiteTaskDrawerContent(task, session);
-  document.getElementById('taskDetailDrawer').classList.add('open');
-  document.getElementById('drawerOverlay').classList.add('active');
-}
-
-function renderLitePlanTab(session) {
-  const plan = session.plan;
-  const isFixPlan = session.type === 'lite-fix';
-
-  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">No Plan Data</div>
-        <div class="empty-text">No ${isFixPlan ? 'fix-plan.json' : '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 (fix-plan specific) -->
-      ${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>
-
-      <!-- Fix Tasks Summary (fix-plan specific) -->
-      ${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> Fix 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">▶</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">▶</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>
-  `;
-}
-
-async function loadAndRenderLiteContextTab(session, contentArea) {
-  contentArea.innerHTML = '<div class="tab-loading">Loading context data...</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 = renderLiteContextContent(data.context, data.explorations, session, data.diagnoses);
-
-        // Re-initialize collapsible sections for explorations and diagnoses (scoped to contentArea)
-        initCollapsibleSections(contentArea);
-        return;
-      }
-    }
-    // Fallback: show plan context if available
-    contentArea.innerHTML = renderLiteContextContent(null, null, session, null);
-    initCollapsibleSections(contentArea);
-  } catch (err) {
-    contentArea.innerHTML = `<div class="tab-error">Failed to load context: ${err.message}</div>`;
-  }
-}
-
-async function loadAndRenderLiteSummaryTab(session, contentArea) {
-  contentArea.innerHTML = '<div class="tab-loading">Loading summaries...</div>';
-
-  try {
-    if (window.SERVER_MODE && session.path) {
-      const response = await fetch(`/api/session-detail?path=${encodeURIComponent(session.path)}&type=summary`);
-      if (response.ok) {
-        const data = await response.json();
-        // Prioritize .summaries/ directory content
-        if (data.summaries?.length) {
-          contentArea.innerHTML = renderSummaryContent(data.summaries);
-          if (typeof lucide !== 'undefined') lucide.createIcons();
-          return;
-        }
-        // Fallback to plan.json summary field
-        if (data.summary) {
-          contentArea.innerHTML = renderSummaryContent([{ name: 'Summary', content: data.summary }]);
-          if (typeof lucide !== 'undefined') lucide.createIcons();
-          return;
-        }
-      }
-    }
-
-    // Fallback: try to get summary from session object (plan.summary or synthesis.convergence.summary)
-    const plan = session.plan || {};
-    const synthesis = session.latestSynthesis || session.discussionTopic || {};
-    const summaryText = plan.summary || synthesis.convergence?.summary;
-
-    if (summaryText) {
-      contentArea.innerHTML = renderSummaryContent([{ name: 'Summary', content: summaryText }]);
-      if (typeof lucide !== 'undefined') lucide.createIcons();
-      return;
-    }
-
-    // No summary available
-    contentArea.innerHTML = `
-      <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>
-    `;
-    if (typeof lucide !== 'undefined') lucide.createIcons();
-  } catch (err) {
-    contentArea.innerHTML = `<div class="tab-error">Failed to load summaries: ${err.message}</div>`;
-  }
-}
-
-// ============================================
-// DIAGNOSES TAB RENDERING (lite-fix specific)
-// ============================================
-
-function renderDiagnosesTab(session) {
-  const diagnoses = session.diagnoses;
-
-  if (!diagnoses || (!diagnoses.manifest && diagnoses.items?.length === 0)) {
-    return `
-      <div class="tab-empty-state">
-        <div class="empty-icon"><i data-lucide="stethoscope" class="w-12 h-12"></i></div>
-        <div class="empty-title">${t('empty.noDiagnoses')}</div>
-        <div class="empty-text">${t('empty.noDiagnosesText')}</div>
-      </div>
-    `;
-  }
-
-  let sections = [];
-
-  // Manifest summary (if available)
-  if (diagnoses.manifest) {
-    sections.push(`
-      <div class="diagnoses-manifest-section">
-        <h4 class="diagnoses-section-title"><i data-lucide="clipboard-check" class="w-4 h-4 inline mr-1"></i> Diagnosis Summary</h4>
-        <div class="manifest-meta-grid">
-          ${diagnoses.manifest.total_diagnoses ? `<div class="meta-item"><span class="meta-label">Total Diagnoses:</span> ${diagnoses.manifest.total_diagnoses}</div>` : ''}
-          ${diagnoses.manifest.diagnosis_angles ? `<div class="meta-item"><span class="meta-label">Angles:</span> ${diagnoses.manifest.diagnosis_angles.join(', ')}</div>` : ''}
-          ${diagnoses.manifest.created_at ? `<div class="meta-item"><span class="meta-label">Created:</span> ${formatDate(diagnoses.manifest.created_at)}</div>` : ''}
-        </div>
-      </div>
-    `);
-  }
-
-  // Individual diagnosis items
-  if (diagnoses.items && diagnoses.items.length > 0) {
-    const diagnosisCards = diagnoses.items.map((diag) => {
-      return renderDiagnosisCard(diag);
-    }).join('');
-    sections.push(`
-      <div class="diagnoses-items-section">
-        <h4 class="diagnoses-section-title"><i data-lucide="search" class="w-4 h-4 inline mr-1"></i> Diagnosis Details (${diagnoses.items.length})</h4>
-        <div class="diagnoses-grid">
-          ${diagnosisCards}
-        </div>
-      </div>
-    `);
-  }
-
-  return `<div class="diagnoses-tab-content">${sections.join('')}</div>`;
-}
-
-function renderDiagnosisCard(diag) {
-  const diagJsonId = `diag-json-${diag.id}`.replace(/[^a-zA-Z0-9-]/g, '-');
-  taskJsonStore[diagJsonId] = diag;
-
-  return `
-    <div class="diagnosis-card collapsible-section">
-      <div class="collapsible-header diagnosis-header">
-        <span class="collapse-icon">▶</span>
-        <span class="diagnosis-id"><i data-lucide="file-search" class="w-4 h-4 inline mr-1"></i>${escapeHtml(diag.id)}</span>
-        <button class="btn-view-json" onclick="event.stopPropagation(); showJsonModal('${diagJsonId}', '${escapeHtml(diag.id)}')">{ } JSON</button>
-      </div>
-      <div class="collapsible-content collapsed">
-        ${renderDiagnosisContent(diag)}
-      </div>
-    </div>
-  `;
-}
-
-function renderDiagnosisContent(diag) {
-  let content = [];
-
-  // Symptom (for detailed diagnosis structure)
-  if (diag.symptom) {
-    const symptom = diag.symptom;
-    content.push(`
-      <div class="diag-section">
-        <strong>Symptom:</strong>
-        ${symptom.description ? `<p>${escapeHtml(symptom.description)}</p>` : ''}
-        ${symptom.user_impact ? `<div class="symptom-impact"><strong>User Impact:</strong> ${escapeHtml(symptom.user_impact)}</div>` : ''}
-        ${symptom.frequency ? `<div class="symptom-freq"><strong>Frequency:</strong> <span class="badge">${escapeHtml(symptom.frequency)}</span></div>` : ''}
-        ${symptom.error_message ? `<div class="symptom-error"><strong>Error:</strong> <code>${escapeHtml(symptom.error_message)}</code></div>` : ''}
-      </div>
-    `);
-  }
-
-  // Summary/Overview (for simple diagnosis structure)
-  if (diag.summary || diag.overview) {
-    content.push(`
-      <div class="diag-section">
-        <strong>Summary:</strong>
-        <p>${escapeHtml(diag.summary || diag.overview)}</p>
-      </div>
-    `);
-  }
-
-  // Root Cause Analysis
-  if (diag.root_cause) {
-    const rootCause = diag.root_cause;
-    // Handle both object and string formats
-    if (typeof rootCause === 'object') {
-      content.push(`
-        <div class="diag-section">
-          <strong>Root Cause:</strong>
-          ${rootCause.file ? `<div class="rc-file"><strong>File:</strong> <code>${escapeHtml(rootCause.file)}</code></div>` : ''}
-          ${rootCause.line_range ? `<div class="rc-line"><strong>Lines:</strong> ${escapeHtml(rootCause.line_range)}</div>` : ''}
-          ${rootCause.function ? `<div class="rc-func"><strong>Function:</strong> <code>${escapeHtml(rootCause.function)}</code></div>` : ''}
-          ${rootCause.issue ? `<p>${escapeHtml(rootCause.issue)}</p>` : ''}
-          ${rootCause.confidence ? `<div class="rc-confidence"><strong>Confidence:</strong> ${(rootCause.confidence * 100).toFixed(0)}%</div>` : ''}
-          ${rootCause.category ? `<div class="rc-category"><strong>Category:</strong> <span class="badge">${escapeHtml(rootCause.category)}</span></div>` : ''}
-        </div>
-      `);
-    } else if (typeof rootCause === 'string') {
-      content.push(`
-        <div class="diag-section">
-          <strong>Root Cause:</strong>
-          <p>${escapeHtml(rootCause)}</p>
-        </div>
-      `);
-    }
-  } else if (diag.root_cause_analysis) {
-    content.push(`
-      <div class="diag-section">
-        <strong>Root Cause:</strong>
-        <p>${escapeHtml(diag.root_cause_analysis)}</p>
-      </div>
-    `);
-  }
-
-  // Issues/Findings
-  if (diag.issues && Array.isArray(diag.issues)) {
-    content.push(`
-      <div class="diag-section">
-        <strong>Issues Found (${diag.issues.length}):</strong>
-        <ul class="issues-list">
-          ${diag.issues.map(issue => `
-            <li class="issue-item">
-              ${typeof issue === 'string' ? escapeHtml(issue) : `
-                <div class="issue-title">${escapeHtml(issue.title || issue.description || 'Unknown')}</div>
-                ${issue.location ? `<div class="issue-location"><code>${escapeHtml(issue.location)}</code></div>` : ''}
-                ${issue.severity ? `<span class="severity-badge ${issue.severity}">${escapeHtml(issue.severity)}</span>` : ''}
-              `}
-            </li>
-          `).join('')}
-        </ul>
-      </div>
-    `);
-  }
-
-  // Affected Files
-  if (diag.affected_files && Array.isArray(diag.affected_files)) {
-    content.push(`
-      <div class="diag-section">
-        <strong>Affected Files:</strong>
-        <div class="path-tags">
-          ${diag.affected_files.map(f => `<span class="path-tag">${escapeHtml(typeof f === 'string' ? f : f.path || f.file)}</span>`).join('')}
-        </div>
-      </div>
-    `);
-  }
-
-  // API Contracts (for api-contracts diagnosis)
-  if (diag.contracts && Array.isArray(diag.contracts)) {
-    content.push(`
-      <div class="diag-section">
-        <strong>API Contracts (${diag.contracts.length}):</strong>
-        <div class="contracts-list">
-          ${diag.contracts.map(contract => `
-            <div class="contract-item">
-              <div class="contract-header">
-                <span class="contract-endpoint">${escapeHtml(contract.endpoint || contract.name || 'Unknown')}</span>
-                ${contract.method ? `<span class="contract-method">${escapeHtml(contract.method)}</span>` : ''}
-              </div>
-              ${contract.description ? `<div class="contract-desc">${escapeHtml(contract.description)}</div>` : ''}
-              ${contract.issues?.length ? `<div class="contract-issues">${contract.issues.length} issue(s)</div>` : ''}
-            </div>
-          `).join('')}
-        </div>
-      </div>
-    `);
-  }
-
-  // Dataflow Analysis (for dataflow diagnosis)
-  if (diag.dataflow || diag.data_flow) {
-    const df = diag.dataflow || diag.data_flow;
-    content.push(`
-      <div class="diag-section">
-        <strong>Data Flow Analysis:</strong>
-        ${typeof df === 'string' ? `<p>${escapeHtml(df)}</p>` : `
-          <div class="dataflow-details">
-            ${df.source ? `<div class="df-item"><span class="df-label">Source:</span> ${escapeHtml(df.source)}</div>` : ''}
-            ${df.sink ? `<div class="df-item"><span class="df-label">Sink:</span> ${escapeHtml(df.sink)}</div>` : ''}
-            ${df.transformations?.length ? `
-              <div class="df-item">
-                <span class="df-label">Transformations:</span>
-                <ol class="df-transforms">${df.transformations.map(t => `<li>${escapeHtml(t)}</li>`).join('')}</ol>
-              </div>
-            ` : ''}
-          </div>
-        `}
-      </div>
-    `);
-  }
-
-  // Reproduction Steps
-  if (diag.reproduction_steps && Array.isArray(diag.reproduction_steps)) {
-    content.push(`
-      <div class="diag-section">
-        <strong>Reproduction Steps:</strong>
-        <ol class="repro-steps-list">
-          ${diag.reproduction_steps.map(step => `<li>${escapeHtml(step)}</li>`).join('')}
-        </ol>
-      </div>
-    `);
-  }
-
-  // Fix Hints
-  if (diag.fix_hints && Array.isArray(diag.fix_hints)) {
-    content.push(`
-      <div class="diag-section">
-        <strong>Fix Hints (${diag.fix_hints.length}):</strong>
-        <div class="fix-hints-list">
-          ${diag.fix_hints.map((hint, idx) => `
-            <div class="fix-hint-item">
-              <div class="hint-header"><strong>Hint ${idx + 1}:</strong> ${escapeHtml(hint.description || 'No description')}</div>
-              ${hint.approach ? `<div class="hint-approach"><strong>Approach:</strong> ${escapeHtml(hint.approach)}</div>` : ''}
-              ${hint.risk ? `<div class="hint-risk"><strong>Risk:</strong> <span class="badge risk-${hint.risk}">${escapeHtml(hint.risk)}</span></div>` : ''}
-              ${hint.code_example ? `<div class="hint-code"><strong>Code Example:</strong><pre><code>${escapeHtml(hint.code_example)}</code></pre></div>` : ''}
-            </div>
-          `).join('')}
-        </div>
-      </div>
-    `);
-  }
-
-  // Recommendations
-  if (diag.recommendations && Array.isArray(diag.recommendations)) {
-    content.push(`
-      <div class="diag-section">
-        <strong>Recommendations:</strong>
-        <ol class="recommendations-list">
-          ${diag.recommendations.map(rec => `<li>${escapeHtml(typeof rec === 'string' ? rec : rec.description || rec.action)}</li>`).join('')}
-        </ol>
-      </div>
-    `);
-  }
-
-  // Dependencies
-  if (diag.dependencies && typeof diag.dependencies === 'string') {
-    content.push(`
-      <div class="diag-section">
-        <strong>Dependencies:</strong>
-        <p>${escapeHtml(diag.dependencies)}</p>
-      </div>
-    `);
-  }
-
-  // Constraints
-  if (diag.constraints && typeof diag.constraints === 'string') {
-    content.push(`
-      <div class="diag-section">
-        <strong>Constraints:</strong>
-        <p>${escapeHtml(diag.constraints)}</p>
-      </div>
-    `);
-  }
-
-  // Clarification Needs
-  if (diag.clarification_needs && Array.isArray(diag.clarification_needs)) {
-    content.push(`
-      <div class="diag-section">
-        <strong>Clarification Needs:</strong>
-        <div class="clarification-list">
-          ${diag.clarification_needs.map(clar => `
-            <div class="clarification-item">
-              <div class="clar-question"><strong>Q:</strong> ${escapeHtml(clar.question)}</div>
-              ${clar.context ? `<div class="clar-context"><strong>Context:</strong> ${escapeHtml(clar.context)}</div>` : ''}
-              ${clar.options && Array.isArray(clar.options) ? `
-                <div class="clar-options">
-                  <strong>Options:</strong>
-                  <ul>
-                    ${clar.options.map(opt => `<li>${escapeHtml(opt)}</li>`).join('')}
-                  </ul>
-                </div>
-              ` : ''}
-            </div>
-          `).join('')}
-        </div>
-      </div>
-    `);
-  }
-
-  // Related Issues
-  if (diag.related_issues && Array.isArray(diag.related_issues)) {
-    content.push(`
-      <div class="diag-section">
-        <strong>Related Issues:</strong>
-        <ul class="related-issues-list">
-          ${diag.related_issues.map(issue => `
-            <li>
-              ${issue.type ? `<span class="issue-type-badge">${escapeHtml(issue.type)}</span>` : ''}
-              ${issue.reference ? `<strong>${escapeHtml(issue.reference)}</strong>: ` : ''}
-              ${issue.description ? escapeHtml(issue.description) : ''}
-            </li>
-          `).join('')}
-        </ul>
-      </div>
-    `);
-  }
-
-  // If no specific content was rendered, show raw JSON preview
-  if (content.length === 0) {
-    console.warn('[DEBUG] No content rendered for diagnosis:', diag);
-    content.push(`
-      <div class="diag-section">
-        <strong>Debug: Raw JSON</strong>
-        <pre class="json-content">${escapeHtml(JSON.stringify(diag, null, 2))}</pre>
-      </div>
-    `);
-  }
-
-  return content.join('');
-}