ai-agent-session-center 1.0.0

package/public/js/chartUtils.js

@@ -0,0 +1,383 @@
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Draw a bar chart as SVG inside the given container.
+ * data = [{label, value, color?}]
+ */
+export function drawBarChart(container, data, options = {}) {
+  const {
+    horizontal = true,
+    maxBars = 15,
+    barHeight = 20,
+    gap = 4,
+    showLabels = true,
+    showValues = true,
+  } = options;
+
+  container.innerHTML = '';
+  const items = data.slice(0, maxBars);
+  if (items.length === 0) return;
+
+  const maxVal = Math.max(...items.map(d => d.value), 1);
+  const labelWidth = showLabels ? 100 : 0;
+  const valueWidth = showValues ? 50 : 0;
+
+  if (horizontal) {
+    const totalHeight = items.length * (barHeight + gap) - gap;
+    const svgWidth = container.clientWidth || 400;
+    const barAreaWidth = svgWidth - labelWidth - valueWidth - 10;
+
+    const svg = createSvg(svgWidth, totalHeight);
+
+    items.forEach((d, i) => {
+      const y = i * (barHeight + gap);
+      const barW = Math.max(1, (d.value / maxVal) * barAreaWidth);
+      const color = d.color || 'var(--accent-cyan, #00e5ff)';
+
+      if (showLabels) {
+        const text = createSvgEl('text', {
+          x: labelWidth - 6,
+          y: y + barHeight / 2 + 4,
+          fill: '#8892b0',
+          'font-size': '11',
+          'text-anchor': 'end',
+        });
+        text.textContent = d.label;
+        svg.appendChild(text);
+      }
+
+      const rect = createSvgEl('rect', {
+        x: labelWidth,
+        y,
+        width: barW,
+        height: barHeight,
+        rx: 3,
+        fill: color,
+        opacity: 0.85,
+      });
+      svg.appendChild(rect);
+
+      if (showValues) {
+        const valText = createSvgEl('text', {
+          x: labelWidth + barW + 6,
+          y: y + barHeight / 2 + 4,
+          fill: '#ccd6f6',
+          'font-size': '11',
+        });
+        valText.textContent = formatNumber(d.value);
+        svg.appendChild(valText);
+      }
+    });
+
+    container.appendChild(svg);
+  } else {
+    // Vertical bars
+    const svgHeight = 200;
+    const svgWidth = container.clientWidth || 400;
+    const barWidth = Math.max(4, (svgWidth - 40) / items.length - gap);
+    const chartHeight = svgHeight - 30;
+
+    const svg = createSvg(svgWidth, svgHeight);
+
+    items.forEach((d, i) => {
+      const x = 20 + i * (barWidth + gap);
+      const barH = Math.max(1, (d.value / maxVal) * chartHeight);
+      const y = chartHeight - barH;
+      const color = d.color || 'var(--accent-cyan, #00e5ff)';
+
+      const rect = createSvgEl('rect', {
+        x,
+        y,
+        width: barWidth,
+        height: barH,
+        rx: 2,
+        fill: color,
+        opacity: 0.85,
+      });
+      svg.appendChild(rect);
+
+      if (showLabels) {
+        const text = createSvgEl('text', {
+          x: x + barWidth / 2,
+          y: svgHeight - 4,
+          fill: '#8892b0',
+          'font-size': '9',
+          'text-anchor': 'middle',
+        });
+        text.textContent = d.label;
+        svg.appendChild(text);
+      }
+
+      if (showValues) {
+        const valText = createSvgEl('text', {
+          x: x + barWidth / 2,
+          y: y - 4,
+          fill: '#ccd6f6',
+          'font-size': '9',
+          'text-anchor': 'middle',
+        });
+        valText.textContent = formatNumber(d.value);
+        svg.appendChild(valText);
+      }
+    });
+
+    container.appendChild(svg);
+  }
+}
+
+/**
+ * Draw a line chart as SVG inside the given container.
+ * data = [{label, value}]
+ */
+export function drawLineChart(container, data, options = {}) {
+  const {
+    color = '#00e5ff',
+    areaFill = false,
+    showDots = true,
+    height = 250,
+  } = options;
+
+  container.innerHTML = '';
+  if (data.length === 0) return;
+
+  const svgWidth = container.clientWidth || 500;
+  const paddingLeft = 45;
+  const paddingRight = 15;
+  const paddingTop = 15;
+  const paddingBottom = 30;
+  const chartW = svgWidth - paddingLeft - paddingRight;
+  const chartH = height - paddingTop - paddingBottom;
+
+  const maxVal = Math.max(...data.map(d => d.value), 1);
+  const svg = createSvg(svgWidth, height);
+
+  // Y-axis labels (5 ticks)
+  for (let i = 0; i <= 4; i++) {
+    const val = (maxVal / 4) * i;
+    const y = paddingTop + chartH - (i / 4) * chartH;
+    const text = createSvgEl('text', {
+      x: paddingLeft - 6,
+      y: y + 4,
+      fill: '#8892b0',
+      'font-size': '10',
+      'text-anchor': 'end',
+    });
+    text.textContent = formatNumber(val);
+    svg.appendChild(text);
+
+    // Grid line
+    const line = createSvgEl('line', {
+      x1: paddingLeft,
+      y1: y,
+      x2: svgWidth - paddingRight,
+      y2: y,
+      stroke: '#1e2a4a',
+      'stroke-width': 1,
+    });
+    svg.appendChild(line);
+  }
+
+  // Build points
+  const points = data.map((d, i) => {
+    const x = paddingLeft + (i / Math.max(data.length - 1, 1)) * chartW;
+    const y = paddingTop + chartH - (d.value / maxVal) * chartH;
+    return { x, y, label: d.label, value: d.value };
+  });
+
+  // Area fill
+  if (areaFill && points.length > 1) {
+    const areaPoints = [
+      `${points[0].x},${paddingTop + chartH}`,
+      ...points.map(p => `${p.x},${p.y}`),
+      `${points[points.length - 1].x},${paddingTop + chartH}`,
+    ].join(' ');
+    const polygon = createSvgEl('polygon', {
+      points: areaPoints,
+      fill: color,
+      opacity: 0.1,
+    });
+    svg.appendChild(polygon);
+  }
+
+  // Line
+  if (points.length > 1) {
+    const polyline = createSvgEl('polyline', {
+      points: points.map(p => `${p.x},${p.y}`).join(' '),
+      fill: 'none',
+      stroke: color,
+      'stroke-width': 2,
+      'stroke-linejoin': 'round',
+    });
+    svg.appendChild(polyline);
+  }
+
+  // Dots
+  if (showDots) {
+    points.forEach(p => {
+      const circle = createSvgEl('circle', {
+        cx: p.x,
+        cy: p.y,
+        r: 3,
+        fill: color,
+      });
+      circle.addEventListener('mouseenter', (e) => showTooltip(`${p.label}: ${formatNumber(p.value)}`, e.pageX, e.pageY));
+      circle.addEventListener('mouseleave', hideTooltip);
+      svg.appendChild(circle);
+    });
+  }
+
+  // X-axis labels (show up to ~10 evenly spaced)
+  const labelStep = Math.max(1, Math.floor(data.length / 10));
+  points.forEach((p, i) => {
+    if (i % labelStep !== 0 && i !== points.length - 1) return;
+    const text = createSvgEl('text', {
+      x: p.x,
+      y: height - 6,
+      fill: '#8892b0',
+      'font-size': '9',
+      'text-anchor': 'middle',
+    });
+    text.textContent = p.label;
+    svg.appendChild(text);
+  });
+
+  container.appendChild(svg);
+}
+
+/**
+ * Draw a heatmap grid using CSS grid.
+ * data = [{row, col, value}] where row=0-6 (Mon-Sun), col=0-23 (hours)
+ */
+export function drawHeatmapGrid(container, data, options = {}) {
+  const {
+    cellSize = 14,
+    gap = 2,
+    colorMin = '#12122a',
+    colorMax = '#00ff88',
+  } = options;
+
+  container.innerHTML = '';
+
+  const dayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  const maxVal = Math.max(...data.map(d => d.value), 1);
+
+  // Build value lookup
+  const valueMap = new Map();
+  data.forEach(d => valueMap.set(`${d.row}-${d.col}`, d.value));
+
+  const grid = document.createElement('div');
+  grid.style.display = 'grid';
+  grid.style.gridTemplateColumns = `40px repeat(24, ${cellSize}px)`;
+  grid.style.gridTemplateRows = `${cellSize}px repeat(7, ${cellSize}px)`;
+  grid.style.gap = `${gap}px`;
+  grid.style.alignItems = 'center';
+
+  // Top-left empty corner
+  const corner = document.createElement('div');
+  grid.appendChild(corner);
+
+  // Hour labels (top row)
+  for (let h = 0; h < 24; h++) {
+    const lbl = document.createElement('div');
+    lbl.textContent = h;
+    lbl.style.fontSize = '9px';
+    lbl.style.color = '#8892b0';
+    lbl.style.textAlign = 'center';
+    grid.appendChild(lbl);
+  }
+
+  // Rows
+  for (let r = 0; r < 7; r++) {
+    // Day label
+    const dayLbl = document.createElement('div');
+    dayLbl.textContent = dayLabels[r];
+    dayLbl.style.fontSize = '10px';
+    dayLbl.style.color = '#8892b0';
+    dayLbl.style.textAlign = 'right';
+    dayLbl.style.paddingRight = '4px';
+    grid.appendChild(dayLbl);
+
+    for (let c = 0; c < 24; c++) {
+      const val = valueMap.get(`${r}-${c}`) || 0;
+      const cell = document.createElement('div');
+      cell.style.width = `${cellSize}px`;
+      cell.style.height = `${cellSize}px`;
+      cell.style.borderRadius = '2px';
+      cell.style.backgroundColor = interpolateColor(val, 0, maxVal, colorMin, colorMax);
+      cell.style.cursor = 'pointer';
+      cell.addEventListener('mouseenter', (e) => showTooltip(`${dayLabels[r]} ${c}:00 - ${val}`, e.pageX, e.pageY));
+      cell.addEventListener('mouseleave', hideTooltip);
+      grid.appendChild(cell);
+    }
+  }
+
+  container.appendChild(grid);
+}
+
+/**
+ * Format a number for display: 0->"0", 999->"999", 1000->"1.0k", 1500->"1.5k", 1000000->"1.0M"
+ */
+export function formatNumber(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
+  return String(Math.round(n));
+}
+
+/**
+ * Show a tooltip div at the given page coordinates.
+ */
+export function showTooltip(text, x, y) {
+  let tip = document.querySelector('.chart-tooltip');
+  if (!tip) {
+    tip = document.createElement('div');
+    tip.className = 'chart-tooltip';
+    document.body.appendChild(tip);
+  }
+  tip.textContent = text;
+  tip.style.left = `${x + 10}px`;
+  tip.style.top = `${y - 28}px`;
+  tip.style.display = 'block';
+}
+
+/**
+ * Hide the tooltip.
+ */
+export function hideTooltip() {
+  const tip = document.querySelector('.chart-tooltip');
+  if (tip) tip.style.display = 'none';
+}
+
+/**
+ * Interpolate a hex color between colorStart and colorEnd based on value's position in [min, max].
+ */
+export function interpolateColor(value, min, max, colorStart = '#12122a', colorEnd = '#00ff88') {
+  const t = max === min ? 0 : Math.max(0, Math.min(1, (value - min) / (max - min)));
+  const r1 = parseInt(colorStart.slice(1, 3), 16);
+  const g1 = parseInt(colorStart.slice(3, 5), 16);
+  const b1 = parseInt(colorStart.slice(5, 7), 16);
+  const r2 = parseInt(colorEnd.slice(1, 3), 16);
+  const g2 = parseInt(colorEnd.slice(3, 5), 16);
+  const b2 = parseInt(colorEnd.slice(5, 7), 16);
+  const r = Math.round(r1 + (r2 - r1) * t);
+  const g = Math.round(g1 + (g2 - g1) * t);
+  const b = Math.round(b1 + (b2 - b1) * t);
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+
+// -- Internal helpers --
+
+function createSvg(width, height) {
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('width', width);
+  svg.setAttribute('height', height);
+  svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+  return svg;
+}
+
+function createSvgEl(tag, attrs) {
+  const el = document.createElementNS(SVG_NS, tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    el.setAttribute(k, v);
+  }
+  return el;
+}

package/public/js/historyPanel.js

@@ -0,0 +1,298 @@
+import * as db from './browserDb.js';
+
+let currentPage = 1;
+let debounceTimer = null;
+
+export async function init() {
+  // Fetch projects for dropdown
+  const projects = await db.getDistinctProjects();
+  const select = document.getElementById('history-project-filter');
+  projects.forEach(p => {
+    const opt = document.createElement('option');
+    opt.value = p.project_path;
+    opt.textContent = p.project_name;
+    select.appendChild(opt);
+  });
+
+  // Wire up filter change events
+  document.getElementById('search-input').addEventListener('input', () => {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => { currentPage = 1; loadSessions(); }, 300);
+  });
+  ['history-project-filter', 'history-status-filter', 'history-date-from', 'history-date-to', 'history-sort-by'].forEach(id => {
+    document.getElementById(id).addEventListener('change', () => { currentPage = 1; loadSessions(); });
+  });
+  document.getElementById('history-sort-dir').addEventListener('click', (e) => {
+    e.target.textContent = e.target.textContent === 'DESC' ? 'ASC' : 'DESC';
+    currentPage = 1;
+    loadSessions();
+  });
+}
+
+export async function refresh() {
+  await loadSessions();
+}
+
+async function loadSessions() {
+  const query = document.getElementById('search-input').value || undefined;
+  const project = document.getElementById('history-project-filter').value || undefined;
+  const statusVal = document.getElementById('history-status-filter').value;
+  let status, archived;
+  if (statusVal === 'archived') {
+    archived = 'true';
+  } else if (statusVal) {
+    status = statusVal;
+  }
+  const dateFromRaw = document.getElementById('history-date-from').value;
+  const dateFrom = dateFromRaw ? new Date(dateFromRaw).getTime() : undefined;
+  const dateToRaw = document.getElementById('history-date-to').value;
+  const dateTo = dateToRaw ? new Date(dateToRaw + 'T23:59:59').getTime() : undefined;
+  const sortByMap = { date: 'startedAt', duration: 'endedAt', prompts: 'totalPrompts', tools: 'totalToolCalls' };
+  const rawSort = document.getElementById('history-sort-by').value;
+  const sortBy = sortByMap[rawSort] || 'startedAt';
+  const sortDir = document.getElementById('history-sort-dir').textContent.toLowerCase();
+  const page = currentPage;
+  const pageSize = 50;
+
+  const result = await db.searchSessions({ query, project, status, dateFrom, dateTo, archived, sortBy, sortDir, page, pageSize });
+
+  // Map camelCase IndexedDB fields to snake_case expected by renderResults
+  const mapped = result.sessions.map(s => ({
+    id: s.id,
+    title: s.title || '',
+    project_name: s.projectName || '',
+    started_at: s.startedAt,
+    ended_at: s.endedAt,
+    status: s.status,
+    total_prompts: s.totalPrompts || 0,
+    total_tool_calls: s.totalToolCalls || 0,
+    git_branch: s.gitBranch || '',
+  }));
+  renderResults(mapped, result.total, result.page, result.pageSize);
+}
+
+function renderResults(sessions, total, page, pageSize) {
+  const container = document.getElementById('history-results');
+  if (sessions.length === 0) {
+    container.innerHTML = '<div class="tab-empty">No sessions found</div>';
+    document.getElementById('history-pagination').innerHTML = '';
+    return;
+  }
+
+  container.innerHTML = sessions.map(s => {
+    const duration = s.ended_at
+      ? formatDuration(s.ended_at - s.started_at)
+      : formatDuration(Date.now() - s.started_at);
+    const date = new Date(s.started_at).toLocaleString('en-US', {
+      year: 'numeric', month: 'short', day: 'numeric',
+      hour: '2-digit', minute: '2-digit', hour12: false,
+    });
+    return `<div class="history-row" data-session-id="${s.id}">
+      <span class="history-title">${escapeHtml(s.title)}</span>
+      <span class="history-project">${escapeHtml(s.project_name)}</span>
+      <span class="history-date">${date}</span>
+      <span class="history-duration">${duration}</span>
+      <span class="history-status ${s.status}">${s.status.toUpperCase()}</span>
+      <span class="history-prompts">${s.total_prompts} prompts</span>
+      <span class="history-tools">${s.total_tool_calls} tools</span>
+      <span class="history-branch">${escapeHtml(s.git_branch || '')}</span>
+      <button class="history-delete" title="Delete session">&times;</button>
+    </div>`;
+  }).join('');
+
+  // Click handler for rows
+  container.querySelectorAll('.history-row').forEach(row => {
+    row.addEventListener('click', (e) => {
+      if (e.target.closest('.history-delete')) return;
+      openHistoryDetail(row.dataset.sessionId);
+    });
+  });
+
+  // Delete button handler
+  container.querySelectorAll('.history-delete').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const row = btn.closest('.history-row');
+      const sid = row.dataset.sessionId;
+      if (!confirm('Delete this session from history? This cannot be undone.')) return;
+      await db.deleteSession(sid);
+      row.style.transition = 'opacity 0.3s';
+      row.style.opacity = '0';
+      setTimeout(() => {
+        row.remove();
+        // Reload if the page is now empty
+        if (container.querySelectorAll('.history-row').length === 0) loadSessions();
+      }, 300);
+    });
+  });
+
+  // Pagination
+  renderPagination(total, page, pageSize);
+}
+
+function renderPagination(total, page, pageSize) {
+  const container = document.getElementById('history-pagination');
+  const totalPages = Math.ceil(total / pageSize);
+  if (totalPages <= 1) {
+    container.innerHTML = '';
+    return;
+  }
+
+  const buttons = [];
+
+  // Previous button
+  buttons.push(
+    `<button class="page-btn${page <= 1 ? ' disabled' : ''}" data-page="${page - 1}"${page <= 1 ? ' disabled' : ''}>&laquo; Prev</button>`
+  );
+
+  // Page number buttons: show first, last, current +/- 2, with ellipses
+  const range = [];
+  for (let i = 1; i <= totalPages; i++) {
+    if (i === 1 || i === totalPages || (i >= page - 2 && i <= page + 2)) {
+      range.push(i);
+    }
+  }
+
+  let lastShown = 0;
+  range.forEach(i => {
+    if (lastShown && i - lastShown > 1) {
+      buttons.push('<span class="page-ellipsis">...</span>');
+    }
+    buttons.push(
+      `<button class="page-btn${i === page ? ' active' : ''}" data-page="${i}">${i}</button>`
+    );
+    lastShown = i;
+  });
+
+  // Next button
+  buttons.push(
+    `<button class="page-btn${page >= totalPages ? ' disabled' : ''}" data-page="${page + 1}"${page >= totalPages ? ' disabled' : ''}>Next &raquo;</button>`
+  );
+
+  container.innerHTML = buttons.join('');
+
+  // Wire click handlers
+  container.querySelectorAll('.page-btn:not(.disabled)').forEach(btn => {
+    btn.addEventListener('click', () => {
+      currentPage = parseInt(btn.dataset.page, 10);
+      loadSessions();
+    });
+  });
+}
+
+async function openHistoryDetail(sessionId) {
+  const data = await db.getSessionDetail(sessionId);
+  if (!data) return;
+  const s = {
+    session: data.session,
+    prompts: data.prompts,
+    responses: (data.responses || []).map(r => ({ ...r, text: r.textExcerpt || r.text || '' })),
+    tools: (data.tool_calls || []).map(t => ({ tool: t.toolName, input: t.toolInputSummary || '', timestamp: t.timestamp })),
+    events: data.events,
+    notes: data.notes,
+  };
+
+  // Populate header
+  const sess = s.session || s;
+  document.getElementById('detail-project-name').textContent = sess.projectName || sess.project_name || '';
+  const badge = document.getElementById('detail-status-badge');
+  badge.textContent = (sess.status || '').toUpperCase();
+  badge.className = `status-badge ${sess.status}`;
+  document.getElementById('detail-model').textContent = sess.model || '';
+  const startedAt = sess.startedAt || sess.started_at;
+  const endedAt = sess.endedAt || sess.ended_at;
+  document.getElementById('detail-duration').textContent = endedAt
+    ? formatDuration(endedAt - startedAt)
+    : formatDuration(Date.now() - startedAt);
+
+  // Character model selector + preview
+  const charSelect = document.getElementById('detail-char-model');
+  if (charSelect) {
+    charSelect.value = sess.characterModel || sess.character_model || '';
+    charSelect.dataset.sessionId = sessionId;
+  }
+  // Mini preview with session's accent color
+  const previewEl = document.getElementById('detail-char-preview');
+  if (previewEl) {
+    const model = sess.characterModel || sess.character_model || 'robot';
+    const accentColor = sess.accentColor || sess.accent_color || 'var(--accent-cyan)';
+    import('./robotManager.js').then(rm => {
+      previewEl.innerHTML = '';
+      const mini = document.createElement('div');
+      mini.className = `css-robot char-${model}`;
+      mini.dataset.status = sess.status || 'ended';
+      mini.style.setProperty('--robot-color', accentColor);
+      if (rm._getTemplates) {
+        const templates = rm._getTemplates();
+        if (templates[model]) mini.innerHTML = templates[model](accentColor);
+      }
+      previewEl.appendChild(mini);
+    });
+  }
+
+  // Conversation tab (interleaved prompts + responses, newest first)
+  const convoEl = document.getElementById('detail-conversation');
+  const allEntries = [
+    ...(s.prompts || []).map(p => ({ type: 'prompt', timestamp: p.timestamp, text: p.text })),
+    ...(s.responses || []).map(r => ({ type: 'response', timestamp: r.timestamp, text: r.text })),
+  ].sort((a, b) => a.timestamp - b.timestamp);
+  convoEl.innerHTML = allEntries.map(e => {
+    const cls = e.type === 'prompt' ? 'prompt-entry' : 'response-entry';
+    return `<div class="${cls}">
+      <span class="${e.type}-time">${formatTime(e.timestamp)}</span>
+      <div class="${e.type}-text">${escapeHtml(e.text)}</div>
+    </div>`;
+  }).join('');
+
+  // Activity tab (merged tool calls + events)
+  const histItems = [];
+  for (const t of (s.tools || [])) {
+    histItems.push({ kind: 'tool', tool: t.tool, input: t.input, timestamp: t.timestamp });
+  }
+  for (const e of (s.events || [])) {
+    histItems.push({ kind: 'event', type: e.type, detail: e.detail, timestamp: e.timestamp });
+  }
+  histItems.sort((a, b) => b.timestamp - a.timestamp);
+  const actEl = document.getElementById('detail-activity-log');
+  if (actEl) {
+    actEl.innerHTML = histItems.length > 0
+      ? histItems.map(item => {
+          if (item.kind === 'tool') {
+            return `<div class="activity-entry activity-tool">
+              <span class="activity-time">${formatTime(item.timestamp)}</span>
+              <span class="activity-badge activity-badge-tool">${escapeHtml(item.tool)}</span>
+              <span class="activity-detail">${escapeHtml(item.input)}</span>
+            </div>`;
+          } else {
+            return `<div class="activity-entry activity-event">
+              <span class="activity-time">${formatTime(item.timestamp)}</span>
+              <span class="activity-badge activity-badge-event">${escapeHtml(item.type)}</span>
+              <span class="activity-detail">${escapeHtml(item.detail)}</span>
+            </div>`;
+          }
+        }).join('')
+      : '<div class="tab-empty">No activity recorded</div>';
+  }
+
+  document.getElementById('session-detail-overlay').classList.remove('hidden');
+}
+
+// -- Helpers (same as sessionPanel.js) --
+
+function formatDuration(ms) {
+  const s = Math.floor(ms / 1000);
+  const m = Math.floor(s / 60);
+  const h = Math.floor(m / 60);
+  if (h > 0) return `${h}h ${m % 60}m`;
+  if (m > 0) return `${m}m ${s % 60}s`;
+  return `${s}s`;
+}
+
+function formatTime(ts) {
+  return new Date(ts).toLocaleTimeString('en-US', { hour12: false });
+}
+
+function escapeHtml(str) {
+  if (!str) return '';
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}