claude-code-workflow 6.1.3 → 6.2.1

package/src/templates/dashboard-js/views/history.js

@@ -0,0 +1,337 @@
+// CLI History View
+// Standalone view for CLI execution history with batch delete support
+
+// ========== Multi-Select State ==========
+var selectedExecutions = new Set();
+var isMultiSelectMode = false;
+
+// ========== Rendering ==========
+async function renderCliHistoryView() {
+  var container = document.getElementById('mainContent');
+  if (!container) return;
+
+  // Hide stats grid and search for History view
+  var statsGrid = document.getElementById('statsGrid');
+  var searchInput = document.getElementById('searchInput');
+  if (statsGrid) statsGrid.style.display = 'none';
+  if (searchInput) searchInput.parentElement.style.display = 'none';
+
+  // Load history data
+  await loadCliHistory();
+
+  // Filter by search query
+  var filteredHistory = cliHistorySearch
+    ? cliExecutionHistory.filter(function(exec) {
+        return exec.prompt_preview.toLowerCase().includes(cliHistorySearch.toLowerCase()) ||
+               exec.tool.toLowerCase().includes(cliHistorySearch.toLowerCase());
+      })
+    : cliExecutionHistory;
+
+  var historyHtml = '';
+
+  if (cliExecutionHistory.length === 0) {
+    historyHtml = '<div class="history-empty-state">' +
+      '<i data-lucide="terminal" class="w-12 h-12"></i>' +
+      '<h3>No executions yet</h3>' +
+      '<p>CLI execution history will appear here</p>' +
+    '</div>';
+  } else if (filteredHistory.length === 0) {
+    historyHtml = '<div class="history-empty-state">' +
+      '<i data-lucide="search-x" class="w-10 h-10"></i>' +
+      '<h3>No matching results</h3>' +
+      '<p>Try adjusting your search or filter</p>' +
+    '</div>';
+  } else {
+    historyHtml = '<div class="history-list">';
+    for (var i = 0; i < filteredHistory.length; i++) {
+      var exec = filteredHistory[i];
+      var statusIcon = exec.status === 'success' ? 'check-circle' :
+                       exec.status === 'timeout' ? 'clock' : 'x-circle';
+      var statusClass = exec.status === 'success' ? 'success' :
+                        exec.status === 'timeout' ? 'warning' : 'error';
+      var duration = formatDuration(exec.duration_ms);
+      var timeAgo = getTimeAgo(new Date(exec.timestamp));
+      var isSelected = selectedExecutions.has(exec.id);
+
+      // Turn count badge for multi-turn conversations
+      var turnBadge = exec.turn_count && exec.turn_count > 1
+        ? '<span class="history-turn-badge"><i data-lucide="messages-square" class="w-3 h-3"></i> ' + exec.turn_count + '</span>'
+        : '';
+
+      var sourceDirHtml = exec.sourceDir && exec.sourceDir !== '.'
+        ? '<span class="history-source-dir"><i data-lucide="folder" class="w-3 h-3"></i> ' + escapeHtml(exec.sourceDir) + '</span>'
+        : '';
+
+      // Multi-select checkbox
+      var checkboxHtml = isMultiSelectMode
+        ? '<div class="history-checkbox-wrapper" onclick="event.stopPropagation(); toggleExecutionSelection(\'' + exec.id + '\')">' +
+            '<input type="checkbox" class="history-checkbox" ' + (isSelected ? 'checked' : '') + ' tabindex="-1">' +
+          '</div>'
+        : '';
+
+      historyHtml += '<div class="history-item' + (isSelected ? ' history-item-selected' : '') + '" ' +
+        'onclick="' + (isMultiSelectMode ? 'toggleExecutionSelection(\'' + exec.id + '\')' : 'showExecutionDetail(\'' + exec.id + (exec.sourceDir ? '\',\'' + escapeHtml(exec.sourceDir) : '') + '\')') + '">' +
+        checkboxHtml +
+        '<div class="history-item-main">' +
+          '<div class="history-item-header">' +
+            '<span class="history-tool-tag tool-' + exec.tool + '">' + exec.tool + '</span>' +
+            '<span class="history-mode-tag">' + (exec.mode || 'analysis') + '</span>' +
+            turnBadge +
+            sourceDirHtml +
+            '<span class="history-status ' + statusClass + '">' +
+              '<i data-lucide="' + statusIcon + '" class="w-3.5 h-3.5"></i>' +
+              exec.status +
+            '</span>' +
+          '</div>' +
+          '<div class="history-item-prompt">' + escapeHtml(exec.prompt_preview) + '</div>' +
+          '<div class="history-item-meta">' +
+            '<span class="history-time"><i data-lucide="clock" class="w-3 h-3"></i> ' + timeAgo + '</span>' +
+            '<span class="history-duration"><i data-lucide="timer" class="w-3 h-3"></i> ' + duration + '</span>' +
+            '<span class="history-id"><i data-lucide="hash" class="w-3 h-3"></i> ' + exec.id.split('-')[0] + '</span>' +
+          '</div>' +
+        '</div>' +
+        '<div class="history-item-actions">' +
+          '<button class="btn-icon" onclick="event.stopPropagation(); showExecutionDetail(\'' + exec.id + '\')" title="View Details">' +
+            '<i data-lucide="eye" class="w-4 h-4"></i>' +
+          '</button>' +
+          '<button class="btn-icon btn-danger" onclick="event.stopPropagation(); confirmDeleteExecution(\'' + exec.id + (exec.sourceDir ? '\',\'' + escapeHtml(exec.sourceDir) : '') + '\')" title="Delete">' +
+            '<i data-lucide="trash-2" class="w-4 h-4"></i>' +
+          '</button>' +
+        '</div>' +
+      '</div>';
+    }
+    historyHtml += '</div>';
+  }
+
+  // Build batch actions bar
+  var batchActionsHtml = '';
+  if (isMultiSelectMode) {
+    batchActionsHtml = '<div class="history-batch-actions">' +
+      '<span class="batch-select-count">' + selectedExecutions.size + ' selected</span>' +
+      '<button class="btn btn-sm btn-outline" onclick="selectAllExecutions()">' +
+        '<i data-lucide="check-square" class="w-3.5 h-3.5"></i> Select All' +
+      '</button>' +
+      '<button class="btn btn-sm btn-outline" onclick="clearExecutionSelection()">' +
+        '<i data-lucide="square" class="w-3.5 h-3.5"></i> Clear' +
+      '</button>' +
+      '<button class="btn btn-sm btn-danger" onclick="confirmBatchDelete()" ' + (selectedExecutions.size === 0 ? 'disabled' : '') + '>' +
+        '<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Delete Selected' +
+      '</button>' +
+      '<button class="btn btn-sm btn-outline" onclick="exitMultiSelectMode()">' +
+        '<i data-lucide="x" class="w-3.5 h-3.5"></i> Cancel' +
+      '</button>' +
+    '</div>';
+  }
+
+  container.innerHTML = '<div class="history-view">' +
+    '<div class="history-header">' +
+      '<div class="history-header-left">' +
+        '<span class="history-count">' + cliExecutionHistory.length + ' execution' + (cliExecutionHistory.length !== 1 ? 's' : '') + '</span>' +
+      '</div>' +
+      '<div class="history-header-right">' +
+        '<div class="history-search-wrapper">' +
+          '<i data-lucide="search" class="w-4 h-4"></i>' +
+          '<input type="text" class="history-search-input" placeholder="Search executions..." ' +
+            'value="' + escapeHtml(cliHistorySearch) + '" ' +
+            'onkeyup="searchCliHistoryView(this.value)" oninput="searchCliHistoryView(this.value)">' +
+        '</div>' +
+        '<select class="history-filter-select" onchange="filterCliHistoryView(this.value)">' +
+          '<option value=""' + (cliHistoryFilter === null ? ' selected' : '') + '>All Tools</option>' +
+          '<option value="gemini"' + (cliHistoryFilter === 'gemini' ? ' selected' : '') + '>Gemini</option>' +
+          '<option value="qwen"' + (cliHistoryFilter === 'qwen' ? ' selected' : '') + '>Qwen</option>' +
+          '<option value="codex"' + (cliHistoryFilter === 'codex' ? ' selected' : '') + '>Codex</option>' +
+        '</select>' +
+        // Batch delete dropdown
+        '<div class="history-delete-dropdown">' +
+          '<button class="btn-icon" onclick="toggleDeleteDropdown(event)" title="Delete Options">' +
+            '<i data-lucide="trash" class="w-4 h-4"></i>' +
+          '</button>' +
+          '<div class="delete-dropdown-menu" id="deleteDropdownMenu">' +
+            '<button onclick="enterMultiSelectMode()">' +
+              '<i data-lucide="check-square" class="w-3.5 h-3.5"></i> Multi-select Delete' +
+            '</button>' +
+            '<button onclick="confirmDeleteByTool(\'gemini\')">' +
+              '<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Delete All Gemini' +
+            '</button>' +
+            '<button onclick="confirmDeleteByTool(\'qwen\')">' +
+              '<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Delete All Qwen' +
+            '</button>' +
+            '<button onclick="confirmDeleteByTool(\'codex\')">' +
+              '<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Delete All Codex' +
+            '</button>' +
+            '<div class="dropdown-divider"></div>' +
+            '<button class="delete-all-btn" onclick="confirmDeleteAll()">' +
+              '<i data-lucide="alert-triangle" class="w-3.5 h-3.5"></i> Delete All History' +
+            '</button>' +
+          '</div>' +
+        '</div>' +
+        '<button class="btn-icon" onclick="refreshCliHistoryView()" title="Refresh">' +
+          '<i data-lucide="refresh-cw" class="w-4 h-4"></i>' +
+        '</button>' +
+      '</div>' +
+    '</div>' +
+    batchActionsHtml +
+    historyHtml +
+  '</div>';
+
+  // Initialize Lucide icons
+  if (window.lucide) lucide.createIcons();
+}
+
+// ========== Actions ==========
+async function filterCliHistoryView(tool) {
+  cliHistoryFilter = tool || null;
+  await loadCliHistory();
+  renderCliHistoryView();
+}
+
+function searchCliHistoryView(query) {
+  cliHistorySearch = query;
+  renderCliHistoryView();
+  // Preserve focus and cursor position
+  var searchInput = document.querySelector('.history-search-input');
+  if (searchInput) {
+    searchInput.focus();
+    searchInput.setSelectionRange(query.length, query.length);
+  }
+}
+
+async function refreshCliHistoryView() {
+  await loadCliHistory();
+  renderCliHistoryView();
+  showRefreshToast('History refreshed', 'success');
+}
+
+// ========== Multi-Select Functions ==========
+function toggleDeleteDropdown(event) {
+  event.stopPropagation();
+  var menu = document.getElementById('deleteDropdownMenu');
+  if (menu) {
+    menu.classList.toggle('show');
+    // Close on outside click
+    if (menu.classList.contains('show')) {
+      setTimeout(function() {
+        document.addEventListener('click', closeDeleteDropdown);
+      }, 0);
+    }
+  }
+}
+
+function closeDeleteDropdown() {
+  var menu = document.getElementById('deleteDropdownMenu');
+  if (menu) menu.classList.remove('show');
+  document.removeEventListener('click', closeDeleteDropdown);
+}
+
+function enterMultiSelectMode() {
+  closeDeleteDropdown();
+  isMultiSelectMode = true;
+  selectedExecutions.clear();
+  renderCliHistoryView();
+}
+
+function exitMultiSelectMode() {
+  isMultiSelectMode = false;
+  selectedExecutions.clear();
+  renderCliHistoryView();
+}
+
+function toggleExecutionSelection(executionId) {
+  if (selectedExecutions.has(executionId)) {
+    selectedExecutions.delete(executionId);
+  } else {
+    selectedExecutions.add(executionId);
+  }
+  renderCliHistoryView();
+}
+
+function selectAllExecutions() {
+  var filteredHistory = cliHistorySearch
+    ? cliExecutionHistory.filter(function(exec) {
+        return exec.prompt_preview.toLowerCase().includes(cliHistorySearch.toLowerCase()) ||
+               exec.tool.toLowerCase().includes(cliHistorySearch.toLowerCase());
+      })
+    : cliExecutionHistory;
+
+  filteredHistory.forEach(function(exec) {
+    selectedExecutions.add(exec.id);
+  });
+  renderCliHistoryView();
+}
+
+function clearExecutionSelection() {
+  selectedExecutions.clear();
+  renderCliHistoryView();
+}
+
+// ========== Batch Delete Functions ==========
+function confirmBatchDelete() {
+  var count = selectedExecutions.size;
+  if (count === 0) return;
+
+  if (confirm('Delete ' + count + ' selected execution' + (count > 1 ? 's' : '') + '? This action cannot be undone.')) {
+    batchDeleteExecutions(Array.from(selectedExecutions));
+  }
+}
+
+function confirmDeleteByTool(tool) {
+  closeDeleteDropdown();
+  var toolExecutions = cliExecutionHistory.filter(function(exec) { return exec.tool === tool; });
+  var count = toolExecutions.length;
+
+  if (count === 0) {
+    showRefreshToast('No ' + tool + ' executions to delete', 'info');
+    return;
+  }
+
+  if (confirm('Delete all ' + count + ' ' + tool + ' execution' + (count > 1 ? 's' : '') + '? This action cannot be undone.')) {
+    var ids = toolExecutions.map(function(exec) { return exec.id; });
+    batchDeleteExecutions(ids);
+  }
+}
+
+function confirmDeleteAll() {
+  closeDeleteDropdown();
+  var count = cliExecutionHistory.length;
+
+  if (count === 0) {
+    showRefreshToast('No executions to delete', 'info');
+    return;
+  }
+
+  if (confirm('Delete ALL ' + count + ' execution' + (count > 1 ? 's' : '') + '? This action cannot be undone.')) {
+    var ids = cliExecutionHistory.map(function(exec) { return exec.id; });
+    batchDeleteExecutions(ids);
+  }
+}
+
+async function batchDeleteExecutions(ids) {
+  showRefreshToast('Deleting ' + ids.length + ' executions...', 'info');
+
+  try {
+    var response = await fetch('/api/cli/batch-delete', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        path: projectPath,
+        ids: ids
+      })
+    });
+
+    var result = await response.json();
+
+    if (result.success) {
+      showRefreshToast('Deleted ' + result.deleted + ' execution' + (result.deleted > 1 ? 's' : ''), 'success');
+      // Exit multi-select mode and refresh
+      isMultiSelectMode = false;
+      selectedExecutions.clear();
+      await loadCliHistory();
+      renderCliHistoryView();
+    } else {
+      showRefreshToast('Delete failed: ' + (result.error || 'Unknown error'), 'error');
+    }
+  } catch (err) {
+    console.error('Batch delete failed:', err);
+    showRefreshToast('Delete failed: ' + err.message, 'error');
+  }
+}

package/src/templates/dashboard-js/views/home.js

@@ -0,0 +1,243 @@
+// ==========================================
+// HOME VIEW - Dashboard Homepage
+// ==========================================
+
+function renderDashboard() {
+  // Show stats grid and search (may be hidden by MCP view)
+  showStatsAndSearch();
+
+  // Hide storage card (only shown in CLI Manager view)
+  const storageCard = document.getElementById('storageCard');
+  if (storageCard) storageCard.style.display = 'none';
+
+  updateStats();
+  updateBadges();
+  updateCarousel();
+  renderSessions();
+  document.getElementById('generatedAt').textContent = workflowData.generatedAt || new Date().toISOString();
+}
+
+function showStatsAndSearch() {
+  const statsGrid = document.getElementById('statsGrid');
+  const searchInput = document.getElementById('searchInput');
+  if (statsGrid) statsGrid.style.display = '';
+  if (searchInput) searchInput.parentElement.style.display = '';
+}
+
+function hideStatsAndCarousel() {
+  const statsGrid = document.getElementById('statsGrid');
+  const searchInput = document.getElementById('searchInput');
+  if (statsGrid) statsGrid.style.display = 'none';
+  if (searchInput) searchInput.parentElement.style.display = 'none';
+}
+
+function updateStats() {
+  const stats = workflowData.statistics || {};
+  document.getElementById('statTotalSessions').textContent = stats.totalSessions || 0;
+  document.getElementById('statActiveSessions').textContent = stats.activeSessions || 0;
+  document.getElementById('statTotalTasks').textContent = stats.totalTasks || 0;
+  document.getElementById('statCompletedTasks').textContent = stats.completedTasks || 0;
+}
+
+function updateBadges() {
+  const active = workflowData.activeSessions || [];
+  const archived = workflowData.archivedSessions || [];
+
+  document.getElementById('badgeAll').textContent = active.length + archived.length;
+  document.getElementById('badgeActive').textContent = active.length;
+  document.getElementById('badgeArchived').textContent = archived.length;
+
+  // Lite Tasks badges
+  const liteTasks = workflowData.liteTasks || {};
+  document.getElementById('badgeLitePlan').textContent = liteTasks.litePlan?.length || 0;
+  document.getElementById('badgeLiteFix').textContent = liteTasks.liteFix?.length || 0;
+
+  // MCP badge - load async if needed
+  if (typeof loadMcpConfig === 'function') {
+    loadMcpConfig().then(() => {
+      if (typeof updateMcpBadge === 'function') {
+        updateMcpBadge();
+      }
+    }).catch(e => console.error('MCP badge update failed:', e));
+  }
+}
+
+function renderSessions() {
+  const container = document.getElementById('mainContent');
+
+  let sessions = [];
+
+  if (currentFilter === 'all' || currentFilter === 'active') {
+    sessions = sessions.concat((workflowData.activeSessions || []).map(s => ({ ...s, _isActive: true })));
+  }
+  if (currentFilter === 'all' || currentFilter === 'archived') {
+    sessions = sessions.concat((workflowData.archivedSessions || []).map(s => ({ ...s, _isActive: false })));
+  }
+
+  if (sessions.length === 0) {
+    container.innerHTML = `
+      <div class="empty-state" style="grid-column: 1/-1;">
+        <div class="empty-icon"><i data-lucide="inbox" class="w-12 h-12"></i></div>
+        <div class="empty-title">${t('empty.noSessions')}</div>
+        <div class="empty-text">${t('empty.noSessionsText')}</div>
+      </div>
+    `;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+    return;
+  }
+
+  container.innerHTML = `<div class="sessions-grid">${sessions.map(session => renderSessionCard(session)).join('')}</div>`;
+  
+  // Initialize Lucide icons after rendering
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function renderSessionCard(session) {
+  const tasks = session.tasks || [];
+  const taskCount = session.taskCount || tasks.length;
+  const completed = tasks.filter(t => t.status === 'completed').length;
+  const progress = taskCount > 0 ? Math.round((completed / taskCount) * 100) : 0;
+
+  // Use _isActive flag set during rendering, default to true
+  const isActive = session._isActive !== false;
+  const date = session.created_at;
+
+  // Get session status from metadata (default to 'planning' for new sessions)
+  // 3 states: planning → active → completed (archived)
+  const sessionStatus = session.status || 'planning';
+  const isPlanning = sessionStatus === 'planning';
+
+  // Get session type badge
+  const sessionType = session.type || 'workflow';
+  const typeBadge = sessionType !== 'workflow' ? `<span class="session-type-badge ${sessionType}">${sessionType}</span>` : '';
+
+  // Determine status badge class and text
+  // Priority: archived location > planning status > active status
+  let statusClass, statusText;
+  if (!isActive) {
+    // Archived sessions (completed) always show as ARCHIVED
+    statusClass = 'archived';
+    statusText = t('session.status.archived');
+  } else if (isPlanning) {
+    // Planning state - session created but not yet executed
+    statusClass = 'planning';
+    statusText = t('session.status.planning');
+  } else {
+    // Active state - session is being executed
+    statusClass = 'active';
+    statusText = t('session.status.active');
+  }
+
+  // Store session data for modal
+  const sessionKey = `session-${session.session_id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+  sessionDataStore[sessionKey] = session;
+
+  // Special rendering for review sessions
+  if (sessionType === 'review') {
+    return renderReviewSessionCard(session, sessionKey, typeBadge, isActive, isPlanning, date);
+  }
+
+  // Card class includes planning modifier for special styling (only for active sessions)
+  const cardClass = isActive && isPlanning ? 'session-card planning' : 'session-card';
+
+  return `
+    <div class="${cardClass}" onclick="showSessionDetailPage('${sessionKey}')">
+      <div class="session-header">
+        <div class="session-title">${escapeHtml(session.session_id || 'Unknown')}</div>
+        <div class="session-badges">
+          ${typeBadge}
+          <span class="session-status ${statusClass}">
+            ${statusText}
+          </span>
+        </div>
+      </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(date)}</span>
+          <span class="session-meta-item"><i data-lucide="list-checks" class="w-3.5 h-3.5 inline mr-1"></i>${taskCount} ${t('session.tasks')}</span>
+        </div>
+        ${taskCount > 0 && !isPlanning ? `
+          <div class="progress-container">
+            <span class="progress-label">${t('session.progress')}</span>
+            <div class="progress-bar-wrapper">
+              <div class="progress-bar">
+                <div class="progress-fill" style="width: ${progress}%"></div>
+              </div>
+              <span class="progress-text">${completed}/${taskCount} (${progress}%)</span>
+            </div>
+          </div>
+        ` : ''}
+      </div>
+    </div>
+  `;
+}
+
+// Special card rendering for review sessions
+function renderReviewSessionCard(session, sessionKey, typeBadge, isActive, isPlanning, date) {
+  // Calculate findings stats from reviewDimensions
+  const dimensions = session.reviewDimensions || [];
+  let totalFindings = 0;
+  let criticalCount = 0;
+  let highCount = 0;
+  let mediumCount = 0;
+  let lowCount = 0;
+
+  dimensions.forEach(dim => {
+    const findings = dim.findings || [];
+    totalFindings += findings.length;
+    criticalCount += findings.filter(f => f.severity === 'critical').length;
+    highCount += findings.filter(f => f.severity === 'high').length;
+    mediumCount += findings.filter(f => f.severity === 'medium').length;
+    lowCount += findings.filter(f => f.severity === 'low').length;
+  });
+
+  // Determine status badge class and text
+  // Priority: archived > planning > active
+  let statusClass, statusText;
+  if (!isActive) {
+    statusClass = 'archived';
+    statusText = t('session.status.archived');
+  } else if (isPlanning) {
+    statusClass = 'planning';
+    statusText = t('session.status.planning');
+  } else {
+    statusClass = 'active';
+    statusText = t('session.status.active');
+  }
+
+  // Card class includes planning modifier for special styling (only for active sessions)
+  const cardClass = isActive && isPlanning ? 'session-card planning' : 'session-card';
+
+  return `
+    <div class="${cardClass}" onclick="showSessionDetailPage('${sessionKey}')">
+      <div class="session-header">
+        <div class="session-title">${escapeHtml(session.session_id || 'Unknown')}</div>
+        <div class="session-badges">
+          ${typeBadge}
+          <span class="session-status ${statusClass}">
+            ${statusText}
+          </span>
+        </div>
+      </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(date)}</span>
+          <span class="session-meta-item"><i data-lucide="search" class="w-3.5 h-3.5 inline mr-1"></i>${totalFindings} ${t('session.findings')}</span>
+        </div>
+        ${totalFindings > 0 ? `
+          <div class="review-findings-summary">
+            <div class="findings-severity-row">
+              ${criticalCount > 0 ? `<span class="finding-count critical"><i data-lucide="alert-circle" class="w-3 h-3 inline"></i> ${criticalCount}</span>` : ''}
+              ${highCount > 0 ? `<span class="finding-count high"><i data-lucide="alert-triangle" class="w-3 h-3 inline"></i> ${highCount}</span>` : ''}
+              ${mediumCount > 0 ? `<span class="finding-count medium"><i data-lucide="info" class="w-3 h-3 inline"></i> ${mediumCount}</span>` : ''}
+              ${lowCount > 0 ? `<span class="finding-count low"><i data-lucide="check-circle" class="w-3 h-3 inline"></i> ${lowCount}</span>` : ''}
+            </div>
+            <div class="dimensions-info">
+              ${dimensions.length} ${t('session.dimensions')}
+            </div>
+          </div>
+        ` : ''}
+      </div>
+    </div>
+  `;
+}