prism-debugger 0.2.0

package/public/app.js

@@ -0,0 +1,1516 @@
+const UI_TOKEN = new URLSearchParams(location.search).get('token') || 'ui-dev-token';
+const wsUrl = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws/ui?token=${encodeURIComponent(UI_TOKEN)}`;
+
+// ── Console elements ──
+const debuggerListEl    = document.getElementById('debuggerList');
+const debuggerSearchEl  = document.getElementById('debuggerSearch');
+const consoleTitleEl    = document.getElementById('consoleTitle');
+const consoleEl         = document.getElementById('console');
+const levelFilterEl     = document.getElementById('levelFilter');
+const categoryFilterEl  = document.getElementById('categoryFilter');
+const contextFilterEl   = document.getElementById('contextFilter');
+const textFilterEl      = document.getElementById('textFilter');
+const eventNameEl       = document.getElementById('eventName');
+const payloadEl         = document.getElementById('payload');
+const sendBtnEl         = document.getElementById('sendBtn');
+
+// ── Timeline elements ──
+const tlScrollEl            = document.getElementById('tl-scroll');
+const tlEmptyEl             = document.getElementById('tl-empty');
+const tlContextFilterEl     = document.getElementById('tl-context-filter');
+const tlLabelInputEl        = document.getElementById('tl-label-input');
+const tlLabelTagsEl         = document.getElementById('tl-label-tags');
+const tlLabelSuggestionsEl  = document.getElementById('tl-label-suggestions');
+const tlScaleEl             = document.getElementById('tl-scale');
+const tlScaleLabelEl        = document.getElementById('tl-scale-label');
+const tlStatsEl             = document.getElementById('tl-stats');
+const tlDetailEl            = document.getElementById('tl-detail');
+const tlDetailLabelEl       = document.getElementById('tl-detail-label');
+const tlDetailDurEl         = document.getElementById('tl-detail-dur');
+const tlDetailBodyEl        = document.getElementById('tl-detail-body');
+
+// ── Global nav ──
+const mainTabBtns  = document.querySelectorAll('.main-tab-btn');
+const mainViews    = document.querySelectorAll('.main-view');
+
+const LABEL_W = 240; // px — must match --label-w in CSS
+const LABEL_W_PX = `${LABEL_W}px`;
+document.documentElement.style.setProperty('--label-w', LABEL_W_PX);
+
+// ── State ──
+const state = {
+  selectedDebuggerId: null,
+  activeView: 'console',
+  debuggers: new Map(),
+  messagesByDebugger: new Map(),
+  perfpointsByDebugger: new Map(),
+  perfPointSpecsByDebugger: new Map(),
+  renderedMessageCount: 0,
+  lastFilterState: null,
+  availableContexts: new Set(),
+  tlScale: null,
+  tlLabelFilters: new Set(),
+  tlRenderKey: null,
+  tlRenderedPids: null,
+  tlPointMap: null,
+};
+
+// ── WebSocket ──
+const socket = new WebSocket(wsUrl);
+
+socket.addEventListener('open', () => {
+  socket.send(JSON.stringify({ action: 'list' }));
+});
+
+const showDisconnectedBanner = () => {
+  if (document.getElementById('disconnected-banner')) return;
+  const banner = document.createElement('div');
+  banner.id = 'disconnected-banner';
+  banner.className = 'disconnected-banner';
+  banner.textContent = 'Server disconnected';
+  document.body.appendChild(banner);
+};
+
+socket.addEventListener('close', showDisconnectedBanner);
+socket.addEventListener('error', showDisconnectedBanner);
+
+socket.addEventListener('message', (evt) => {
+  const msg = JSON.parse(evt.data);
+
+  if (msg.type === 'server.shutdown') {
+    showDisconnectedBanner();
+    return;
+  }
+
+  if (msg.type === 'debuggers.snapshot') {
+    state.debuggers.clear();
+    for (const item of msg.debuggers || []) {
+      state.debuggers.set(item.debuggerId, item);
+    }
+    if (state.selectedDebuggerId && !state.debuggers.has(state.selectedDebuggerId)) {
+      state.selectedDebuggerId = null;
+      state.messagesByDebugger.delete(state.selectedDebuggerId);
+      state.perfpointsByDebugger.delete(state.selectedDebuggerId);
+      state.perfPointSpecsByDebugger.delete(state.selectedDebuggerId);
+      consoleTitleEl.textContent = 'Console';
+      consoleEl.innerHTML = '';
+      state.renderedMessageCount = 0;
+    }
+    renderDebuggers();
+    return;
+  }
+
+  if (msg.type === 'debugger.update' && msg.debugger) {
+    state.debuggers.set(msg.debugger.debuggerId, msg.debugger);
+    renderDebuggers();
+    return;
+  }
+
+  if (msg.type === 'messages.history') {
+    state.messagesByDebugger.set(msg.debuggerId, msg.messages || []);
+    state.renderedMessageCount = 0;
+    renderConsole(true);
+    return;
+  }
+
+  if (msg.type === 'message' && msg.message) {
+    const id = msg.message.debuggerId;
+    if (!state.messagesByDebugger.has(id)) {
+      state.messagesByDebugger.set(id, []);
+    }
+    state.messagesByDebugger.get(id).push(msg.message);
+    if (state.selectedDebuggerId === id) {
+      renderConsole();
+    }
+    return;
+  }
+
+  if (msg.type === 'perfpoints.history') {
+    state.perfpointsByDebugger.set(msg.debuggerId, msg.points || []);
+    console.log('[ui] perfpoints.history received:', msg.debuggerId, (msg.points || []).length, 'points,', (msg.specs || []).length, 'specs');
+    if (msg.specs && msg.specs.length > 0) {
+      state.perfPointSpecsByDebugger.set(msg.debuggerId, msg.specs);
+    }
+    // Reset accumulated contexts so history is the new baseline
+    if (!state.tlContextsByDebugger) state.tlContextsByDebugger = new Map();
+    state.tlContextsByDebugger.delete(msg.debuggerId);
+    if (state.selectedDebuggerId === msg.debuggerId) {
+      renderTimeline();
+    }
+    return;
+  }
+
+  if (msg.type === 'perfpoints.specs' && msg.debuggerId) {
+    console.log('[ui] perfpoints.specs received:', msg.debuggerId, (msg.specs || []).length, 'spec(s)', (msg.specs || []).map(s => s.id));
+    state.perfPointSpecsByDebugger.set(msg.debuggerId, msg.specs || []);
+    if (state.selectedDebuggerId === msg.debuggerId && state.activeView === 'timeline') {
+      renderTimeline();
+    }
+    return;
+  }
+
+  if (msg.type === 'perfpoint' && msg.point) {
+    const id = msg.debuggerId;
+    if (!state.perfpointsByDebugger.has(id)) {
+      state.perfpointsByDebugger.set(id, []);
+    }
+    const points = state.perfpointsByDebugger.get(id);
+    points.push(msg.point);
+    if (points.length > 5000) points.shift();
+    if (state.selectedDebuggerId === id) {
+      scheduleTimelineRender();
+    }
+  }
+});
+
+// ── Global tab switching ──
+mainTabBtns.forEach(btn => {
+  btn.addEventListener('click', () => {
+    const view = btn.dataset.view;
+    state.activeView = view;
+    mainTabBtns.forEach(b => b.classList.toggle('active', b.dataset.view === view));
+    mainViews.forEach(v => v.classList.toggle('hidden', v.id !== `view-${view}`));
+    if (view === 'timeline') renderTimeline();
+  });
+});
+
+// ── Debugger list ──
+const renderDebuggers = () => {
+  const term = debuggerSearchEl.value.trim().toLowerCase();
+  const rows = [...state.debuggers.values()].filter((item) => {
+    const tags = JSON.stringify(item.tags || {}).toLowerCase();
+    const haystack = `${item.debuggerId} ${item.name || ''} ${tags}`.toLowerCase();
+    return !term || haystack.includes(term);
+  });
+
+  debuggerListEl.innerHTML = '';
+  for (const item of rows) {
+    const li = document.createElement('li');
+    if (item.debuggerId === state.selectedDebuggerId) {
+      li.classList.add('active');
+    }
+    const device = item.app?.deviceModel || item.app?.deviceName || '';
+    li.innerHTML = `
+      <div class="dbg-row"><span class="status-dot ${item.status}"></span><strong>${item.name || item.debuggerId}</strong></div>
+      <div class="muted" style="margin-left:15px">${item.debuggerId}${device ? ' · ' + device : ''}</div>
+    `;
+    li.onclick = () => selectDebugger(item.debuggerId, item.name);
+    debuggerListEl.append(li);
+  }
+};
+
+const selectDebugger = (debuggerId, name) => {
+  state.selectedDebuggerId = debuggerId;
+  state.renderedMessageCount = 0;
+  state.lastFilterState = null;
+  consoleTitleEl.textContent = `Console: ${name || debuggerId}`;
+  socket.send(JSON.stringify({ action: 'history', debuggerId }));
+  socket.send(JSON.stringify({ action: 'perfpoints.history', debuggerId }));
+  renderDebuggers();
+  if (state.activeView === 'timeline') renderTimeline();
+};
+
+// ── Console: JSON tree ──
+const getObjectPreview = (obj) => {
+  if (obj === null) return 'null';
+  if (obj === undefined) return 'undefined';
+  const type = typeof obj;
+  if (type === 'string') return `"${obj.length > 50 ? obj.substring(0, 50) + '...' : obj}"`;
+  if (type === 'number' || type === 'boolean') return String(obj);
+  if (Array.isArray(obj)) return obj.length === 0 ? '[]' : `Array(${obj.length})`;
+  if (type === 'object') {
+    const keys = Object.keys(obj);
+    if (keys.length === 0) return '{}';
+    const preview = keys.slice(0, 3).join(', ');
+    return keys.length > 3 ? `{${preview}, ...}` : `{${preview}}`;
+  }
+  return String(obj);
+};
+
+const createObjectNode = (value, key = null, depth = 0) => {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'json-node';
+  wrapper.style.paddingLeft = `${depth * 16}px`;
+
+  const type = typeof value;
+  const isExpandable = (value !== null && (type === 'object' || Array.isArray(value))) &&
+                       (Array.isArray(value) ? value.length > 0 : Object.keys(value).length > 0);
+
+  const line = document.createElement('div');
+  line.className = 'json-line';
+
+  if (isExpandable) {
+    const arrow = document.createElement('span');
+    arrow.className = 'json-arrow';
+    arrow.textContent = '▶';
+    line.appendChild(arrow);
+
+    if (key !== null) {
+      const keySpan = document.createElement('span');
+      keySpan.className = 'json-key';
+      keySpan.textContent = key + ': ';
+      line.appendChild(keySpan);
+    }
+
+    const preview = document.createElement('span');
+    preview.className = 'json-preview';
+    preview.textContent = getObjectPreview(value);
+    line.appendChild(preview);
+
+    const childrenContainer = document.createElement('div');
+    childrenContainer.className = 'json-children collapsed';
+
+    let expanded = false;
+    line.style.cursor = 'pointer';
+    line.addEventListener('click', (e) => {
+      e.stopPropagation();
+      expanded = !expanded;
+      arrow.textContent = expanded ? '▼' : '▶';
+      childrenContainer.classList.toggle('collapsed', !expanded);
+      if (expanded && childrenContainer.children.length === 0) {
+        if (Array.isArray(value)) {
+          value.forEach((item, index) => {
+            childrenContainer.appendChild(createObjectNode(item, `[${index}]`, depth + 1));
+          });
+        } else {
+          Object.entries(value).forEach(([k, v]) => {
+            childrenContainer.appendChild(createObjectNode(v, k, depth + 1));
+          });
+        }
+      }
+    });
+
+    wrapper.appendChild(line);
+    wrapper.appendChild(childrenContainer);
+  } else {
+    if (key !== null) {
+      const keySpan = document.createElement('span');
+      keySpan.className = 'json-key';
+      keySpan.textContent = key + ': ';
+      line.appendChild(keySpan);
+    }
+    const valueSpan = document.createElement('span');
+    if (value === null || value === undefined) {
+      valueSpan.className = 'json-null';
+      valueSpan.textContent = String(value);
+    } else if (type === 'string') {
+      valueSpan.className = 'json-string';
+      valueSpan.textContent = `"${escapeHtml(value)}"`;
+    } else if (type === 'number') {
+      valueSpan.className = 'json-number';
+      valueSpan.textContent = value;
+    } else if (type === 'boolean') {
+      valueSpan.className = 'json-boolean';
+      valueSpan.textContent = value;
+    }
+    line.appendChild(valueSpan);
+    wrapper.appendChild(line);
+  }
+
+  return wrapper;
+};
+
+const escapeHtml = (str) => {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+};
+
+const createConsoleRow = (row) => {
+  const div = document.createElement('div');
+  div.className = 'console-row';
+
+  const header = document.createElement('div');
+  header.className = 'console-row-header';
+
+  const timestamp = document.createElement('span');
+  timestamp.className = 'console-timestamp';
+  timestamp.textContent = row.ts || '';
+
+  const levelBadge = document.createElement('span');
+  levelBadge.className = `console-level ${row.level || 'info'}`;
+  levelBadge.textContent = row.level || 'info';
+
+  const eventName = document.createElement('span');
+  eventName.className = 'console-event-name';
+  eventName.textContent = row.eventName || '';
+
+  header.append(timestamp, levelBadge, eventName);
+  div.appendChild(header);
+
+  if (row.payload && Object.keys(row.payload).length > 0) {
+    const payloadWrapper = document.createElement('div');
+    payloadWrapper.className = 'console-payload';
+    payloadWrapper.appendChild(createObjectNode(row.payload, null, 0));
+    div.appendChild(payloadWrapper);
+  }
+
+  return div;
+};
+
+const isScrolledToBottom = (el) =>
+  el.scrollHeight - el.scrollTop - el.clientHeight < 50;
+
+// ── Console: context filter ──
+const extractContext = (message) => {
+  const payload = message?.payload;
+  if (!payload || typeof payload !== 'object') return '';
+  if (typeof payload.context === 'string') return payload.context;
+  if (payload.context && typeof payload.context === 'object') {
+    if (typeof payload.context.name === 'string') return payload.context.name;
+    if (typeof payload.context.id === 'string') return payload.context.id;
+  }
+  if (typeof payload.contextId === 'string') return payload.contextId;
+  if (typeof payload.screen === 'string') return payload.screen;
+  if (typeof payload.module === 'string') return payload.module;
+  return '';
+};
+
+const updateContextList = () => {
+  const messages = state.messagesByDebugger.get(state.selectedDebuggerId) || [];
+  const contexts = new Set(messages.map(m => extractContext(m)).filter(Boolean));
+  state.availableContexts = contexts;
+
+  const currentValue = contextFilterEl.value;
+  contextFilterEl.innerHTML = '<option value="all">All contexts</option>';
+  [...contexts].sort().forEach(ctx => {
+    const opt = document.createElement('option');
+    opt.value = ctx;
+    opt.textContent = ctx;
+    contextFilterEl.appendChild(opt);
+  });
+  if (currentValue === 'all' || contexts.has(currentValue)) {
+    contextFilterEl.value = currentValue;
+  } else {
+    contextFilterEl.value = 'all';
+  }
+};
+
+const getFilterState = () => ({
+  level: levelFilterEl.value,
+  category: categoryFilterEl.value.trim().toLowerCase(),
+  context: contextFilterEl.value,
+  text: textFilterEl.value.trim().toLowerCase(),
+  debuggerId: state.selectedDebuggerId
+});
+
+const filtersChanged = (a, b) => {
+  if (!a || !b) return true;
+  return a.level !== b.level || a.category !== b.category ||
+         a.context !== b.context || a.text !== b.text || a.debuggerId !== b.debuggerId;
+};
+
+const filterMessages = (messages, fs) =>
+  messages.filter((m) => {
+    const levelOk = fs.level === 'all' || m.level === fs.level;
+    const catOk   = !fs.category || String(m.category || '').toLowerCase().includes(fs.category);
+    const ctxOk   = fs.context === 'all' || extractContext(m) === fs.context;
+    const textOk  = !fs.text || JSON.stringify(m).toLowerCase().includes(fs.text);
+    return levelOk && catOk && ctxOk && textOk;
+  });
+
+// ── Console render ──
+const renderConsole = (forceRedraw = false) => {
+  const id = state.selectedDebuggerId;
+  if (!id) {
+    consoleEl.textContent = 'Select debugger instance';
+    state.renderedMessageCount = 0;
+    state.lastFilterState = null;
+    state.availableContexts.clear();
+    contextFilterEl.innerHTML = '<option value="all">All contexts</option>';
+    return;
+  }
+
+  updateContextList();
+
+  const currentFS = getFilterState();
+  const changed = filtersChanged(state.lastFilterState, currentFS);
+  const wasAtBottom = isScrolledToBottom(consoleEl);
+  const source = state.messagesByDebugger.get(id) || [];
+  const filtered = filterMessages(source, currentFS);
+  const toDisplay = filtered.slice(-500);
+
+  if (forceRedraw || changed) {
+    consoleEl.innerHTML = '';
+    for (const row of toDisplay) consoleEl.appendChild(createConsoleRow(row));
+    state.renderedMessageCount = toDisplay.length;
+    state.lastFilterState = currentFS;
+  } else {
+    const delta = toDisplay.length - state.renderedMessageCount;
+    if (delta > 0) {
+      const newRows = toDisplay.slice(-delta);
+      for (const row of newRows) consoleEl.appendChild(createConsoleRow(row));
+      state.renderedMessageCount = toDisplay.length;
+      while (consoleEl.children.length > 500) consoleEl.removeChild(consoleEl.firstChild);
+    } else if (delta < 0) {
+      consoleEl.innerHTML = '';
+      for (const row of toDisplay) consoleEl.appendChild(createConsoleRow(row));
+      state.renderedMessageCount = toDisplay.length;
+    }
+  }
+
+  if (wasAtBottom) consoleEl.scrollTop = consoleEl.scrollHeight;
+};
+
+// ── Timeline ──
+const formatDuration = (ms) => {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+};
+
+const barClass = (ms) => ms < 300 ? 'fast' : ms < 1000 ? 'medium' : 'slow';
+
+// Returns the badge spec for the current debugger by badge id, or null if unknown.
+const getBadgeSpec = (badgeKey) => {
+  const specs = state.perfPointSpecsByDebugger.get(state.selectedDebuggerId) || [];
+  const spec = specs.find(s => s.id === badgeKey);
+  if (!spec) return null;
+  return { bg: spec.color, fg: '#fff', name: spec.label };
+};
+
+// Normalize a badge string the same way the iOS SDK does:
+// lowercase, keep only letters/digits, replace runs of other chars with '-'
+const normalizeBadge = (raw) =>
+  raw.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+
+// Returns HTML with a colored badge chip + detail text.
+// badge: normalized badge id (e.g. 'http-request'); falls back to colon-split of label.
+const renderLabelHtml = (label, badge = null) => {
+  let badgeKey = badge || null;
+  let rest = label;
+  if (!badgeKey) {
+    const colonIdx = label.indexOf(':');
+    if (colonIdx !== -1) {
+      badgeKey = normalizeBadge(label.slice(0, colonIdx).trim());
+      rest = label.slice(colonIdx + 1).trim();
+    }
+  }
+  if (!badgeKey) return escapeHtml(label);
+  const spec  = getBadgeSpec(badgeKey);
+  const style = spec
+    ? `background:${spec.bg};color:${spec.fg}`
+    : `background:#4a5568;color:#e2e8f0`;
+  const displayName = spec?.name ?? badgeKey;
+  return `<span class="label-badge" style="${style}">${escapeHtml(displayName)}</span><span style="overflow:hidden;text-overflow:ellipsis">${escapeHtml(rest)}</span>`;
+};
+
+const updateTlContextFilter = (points) => {
+  // Accumulate all contexts ever seen for the selected debugger
+  const id = state.selectedDebuggerId;
+  if (!state.tlContextsByDebugger) state.tlContextsByDebugger = new Map();
+  if (!state.tlContextsByDebugger.has(id)) state.tlContextsByDebugger.set(id, new Set());
+  const knownContexts = state.tlContextsByDebugger.get(id);
+  for (const p of points) {
+    if (p.contextId) knownContexts.add(p.contextId);
+  }
+
+  const current = tlContextFilterEl.value;
+  tlContextFilterEl.innerHTML = '<option value="all">All contexts</option>';
+  [...knownContexts].sort().forEach(ctx => {
+    const opt = document.createElement('option');
+    opt.value = ctx;
+    opt.textContent = ctx;
+    tlContextFilterEl.appendChild(opt);
+  });
+  tlContextFilterEl.value = (current === 'all' || knownContexts.has(current)) ? current : 'all';
+};
+
+const isScrolledToRight = (el) =>
+  el.scrollWidth - el.scrollLeft - el.clientWidth < 40;
+
+// ── Label multi-filter ──
+const renderLabelTags = () => {
+  tlLabelTagsEl.innerHTML = '';
+  for (const label of state.tlLabelFilters) {
+    const tag = document.createElement('span');
+    tag.className = 'tl-label-tag';
+    tag.innerHTML =
+      `<span class="tl-label-tag-content">${renderLabelHtml(label)}</span>` +
+      `<span class="tl-label-tag-remove" data-label="${escapeHtml(label)}">✕</span>`;
+    tlLabelTagsEl.appendChild(tag);
+  }
+  tlLabelTagsEl.style.display = state.tlLabelFilters.size > 0 ? 'flex' : 'none';
+};
+
+const addLabelFilter = (label) => {
+  if (!label) return;
+  state.tlLabelFilters.add(label);
+  renderLabelTags();
+  renderTimeline();
+};
+
+const removeLabelFilter = (label) => {
+  state.tlLabelFilters.delete(label);
+  renderLabelTags();
+  renderTimeline();
+};
+
+const showLabelSuggestions = (query) => {
+  const id = state.selectedDebuggerId;
+  const allPoints = id ? (state.perfpointsByDebugger.get(id) || []) : [];
+  // Deduplicate by badge+label key; each entry carries badge and label separately
+  const allEntries = [...new Map(allPoints.map(p => {
+    const key = (p.badge ? p.badge + ':' : '') + p.label;
+    return [key, { key, badge: p.badge || null, label: p.label }];
+  })).values()]
+    .filter(e => !state.tlLabelFilters.has(e.key))
+    .sort((a, b) => a.key.localeCompare(b.key));
+
+  const q = query.trim().toLowerCase();
+  const matches = q
+    ? allEntries.filter(e => e.key.toLowerCase().includes(q)).slice(0, 12)
+    : allEntries.slice(0, 12);
+
+  if (matches.length === 0) {
+    tlLabelSuggestionsEl.classList.add('hidden');
+    return;
+  }
+
+  tlLabelSuggestionsEl.innerHTML = '';
+  for (const entry of matches) {
+    const item = document.createElement('div');
+    item.className = 'tl-label-suggestion-item';
+    item.dataset.label = entry.key;
+    item.innerHTML = renderLabelHtml(entry.label, entry.badge);
+    item.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      addLabelFilter(entry.key);
+      tlLabelInputEl.value = '';
+      tlLabelSuggestionsEl.classList.add('hidden');
+    });
+    tlLabelSuggestionsEl.appendChild(item);
+  }
+  tlLabelSuggestionsEl.classList.remove('hidden');
+};
+
+tlLabelInputEl.addEventListener('input', () => showLabelSuggestions(tlLabelInputEl.value));
+tlLabelInputEl.addEventListener('focus', () => showLabelSuggestions(tlLabelInputEl.value));
+tlLabelInputEl.addEventListener('blur',  () => setTimeout(() => tlLabelSuggestionsEl.classList.add('hidden'), 150));
+tlLabelInputEl.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    // If a suggestion is highlighted use it, otherwise use typed value
+    const active = tlLabelSuggestionsEl.querySelector('.active');
+    const val = active ? active.dataset.label : tlLabelInputEl.value.trim();
+    if (val) { addLabelFilter(val); tlLabelInputEl.value = ''; }
+    tlLabelSuggestionsEl.classList.add('hidden');
+  } else if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    const items = [...tlLabelSuggestionsEl.querySelectorAll('.tl-label-suggestion-item')];
+    const cur = tlLabelSuggestionsEl.querySelector('.active');
+    const next = cur ? (items[items.indexOf(cur) + 1] ?? items[0]) : items[0];
+    cur?.classList.remove('active');
+    next?.classList.add('active');
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    const items = [...tlLabelSuggestionsEl.querySelectorAll('.tl-label-suggestion-item')];
+    const cur = tlLabelSuggestionsEl.querySelector('.active');
+    const prev = cur ? (items[items.indexOf(cur) - 1] ?? items[items.length - 1]) : items[items.length - 1];
+    cur?.classList.remove('active');
+    prev?.classList.add('active');
+  } else if (e.key === 'Escape') {
+    tlLabelSuggestionsEl.classList.add('hidden');
+  }
+});
+
+document.getElementById('tl-label-filter-wrap').addEventListener('click', () => tlLabelInputEl.focus());
+
+tlLabelTagsEl.addEventListener('click', (e) => {
+  const btn = e.target.closest('.tl-label-tag-remove');
+  if (btn) removeLabelFilter(btn.dataset.label);
+});
+
+const showPerfPointDetail = (point, clientX, clientY) => {
+  tlDetailLabelEl.innerHTML = renderLabelHtml(point.label, point.badge || null);
+  tlDetailDurEl.textContent = formatDuration(point.duration ?? 0);
+  tlDetailBodyEl.innerHTML = '';
+  const info = {
+    duration: `${(point.duration ?? 0).toFixed(2)} ms`,
+    startTs: point.startTs,
+    endTs: point.endTs,
+    contextId: point.contextId || undefined,
+    ...(point.extra ?? {}),
+  };
+  Object.keys(info).forEach(k => { if (info[k] === undefined) delete info[k]; });
+  tlDetailBodyEl.appendChild(createObjectNode(info, null, 0));
+  // Авторасхлопнуть первый уровень
+  const firstLine = tlDetailBodyEl.querySelector('.json-line');
+  if (firstLine) firstLine.click();
+
+  tlDetailEl.classList.remove('hidden');
+
+  // Position near click, clamped to viewport.
+  // clientX/Y are in unzoomed CSS pixels; fixed elements are in zoomed space — compensate.
+  const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1;
+  const vw = window.innerWidth / zoom;
+  const vh = window.innerHeight / zoom;
+  const cx = clientX / zoom;
+  const cy = clientY / zoom;
+  const W = 360, H = 320;
+  let x = cx + 14;
+  let y = cy + 14;
+  if (x + W > vw - 8) x = cx - W - 14;
+  if (x < 8) x = 8;
+  if (y + H > vh - 8) y = vh - H - 8;
+  if (y < 8) y = 8;
+  tlDetailEl.style.left = x + 'px';
+  tlDetailEl.style.top  = y + 'px';
+};
+
+let _tlRenderTimer = null;
+const scheduleTimelineRender = () => {
+  if (_tlRenderTimer !== null) return;
+  _tlRenderTimer = setTimeout(() => {
+    _tlRenderTimer = null;
+    requestAnimationFrame(renderTimeline);
+  }, 200);
+};
+
+const renderTimeline = () => {
+  const id = state.selectedDebuggerId;
+
+  const allPoints = id ? (state.perfpointsByDebugger.get(id) || []) : [];
+  updateTlContextFilter(allPoints);
+
+  // Apply filters
+  const contextFilter = tlContextFilterEl.value;
+  const labelFilters  = state.tlLabelFilters;
+
+  let points = allPoints;
+  if (contextFilter !== 'all') points = points.filter(p => p.contextId === contextFilter);
+  if (labelFilters.size > 0)   points = points.filter(p => {
+    const pKey = (p.badge ? p.badge + ':' : '') + p.label;
+    return [...labelFilters].some(f => pKey.toLowerCase().includes(f.toLowerCase()));
+  });
+
+  if (points.length === 0) {
+    tlEmptyEl.style.display = 'flex';
+    tlScrollEl.classList.remove('visible');
+    tlScrollEl.innerHTML = '';
+    tlDetailEl.classList.add('hidden');
+    tlStatsEl.innerHTML = allPoints.length > 0 ? 'No results for current filter' : 'No PerfPoints yet';
+    state.tlRenderKey = null;
+    state.tlRenderedPids = null;
+    state.tlPointMap = null;
+    return;
+  }
+
+  tlEmptyEl.style.display = 'none';
+  tlScrollEl.classList.add('visible');
+
+  // Time range
+  const minTs = Math.min(...points.map(p => new Date(p.startTs).getTime()));
+  const maxTs = Math.max(...points.map(p => new Date(p.endTs).getTime()));
+  const totalMs = maxTs - minTs || 1;
+
+  // Scale: slider 1–100 maps to 0.02–2 px/ms
+  const sliderVal = Number(tlScaleEl.value);
+  const autoScale = Math.max(
+    0.05,
+    (tlScrollEl.clientWidth - LABEL_W - 40) / totalMs
+  );
+  const manualScale = 0.02 + (sliderVal / 100) * 1.98;
+  const scale = sliderVal === 50 ? autoScale : manualScale;
+  tlScaleLabelEl.textContent = sliderVal === 50
+    ? `auto (${(scale * 1000).toFixed(1)}px/s)`
+    : `${(scale * 1000).toFixed(1)}px/s`;
+
+  const PAD = 40;
+  const chartW = Math.round(totalMs * scale) + PAD;
+  const totalW = chartW + LABEL_W;
+
+  // Group by context then badge+label
+  const contextMap = new Map();
+  for (const p of points) {
+    const ctx = p.contextId || '(no context)';
+    if (!contextMap.has(ctx)) contextMap.set(ctx, new Map());
+    const labelMap = contextMap.get(ctx);
+    const rowKey = (p.badge ? p.badge + ':' : '') + p.label;
+    if (!labelMap.has(rowKey)) labelMap.set(rowKey, []);
+    labelMap.get(rowKey).push(p);
+  }
+
+  const wasAtRight = isScrolledToRight(tlScrollEl);
+
+  // Compute stats
+  let totalPoints = 0;
+  let totalDuration = 0;
+  let slowest = null;
+  for (const [, labelMap] of contextMap) {
+    for (const [rowKey, pts] of labelMap) {
+      for (const p of pts) {
+        const dur = p.duration ?? (new Date(p.endTs) - new Date(p.startTs));
+        totalPoints++;
+        totalDuration += dur;
+        if (!slowest || dur > slowest.dur) slowest = { label: rowKey, dur };
+      }
+    }
+  }
+
+  // ── Decide: incremental or full rebuild ──
+  const renderKey = `${scale}|${contextFilter}|${[...labelFilters].sort()}|${minTs}`;
+  const inner = tlScrollEl.querySelector('.tl-inner');
+  let didIncrement = false;
+
+  if (inner && state.tlRenderKey === renderKey && state.tlRenderedPids) {
+    didIncrement = tryIncrementalUpdate(inner, contextMap, scale, minTs, chartW, totalW, totalMs);
+  }
+
+  if (!didIncrement) {
+    state.tlRenderKey = renderKey;
+    state.tlRenderedPids = new Set();
+    state.tlPointMap = new Map();
+    fullTimelineRebuild(contextMap, scale, minTs, chartW, totalW, totalMs);
+  }
+
+  // Stats
+  const avgDur = totalPoints > 0 ? totalDuration / totalPoints : 0;
+  tlStatsEl.innerHTML = `<strong>${totalPoints}</strong> pts · avg <strong>${formatDuration(avgDur)}</strong> · max <strong>${formatDuration(slowest?.dur ?? 0)}</strong>`;
+
+  // Restore scroll position
+  if (wasAtRight) {
+    tlScrollEl.scrollTo({ left: tlScrollEl.scrollWidth, behavior: 'smooth' });
+  }
+};
+
+// ── Full timeline rebuild (innerHTML) ──
+const fullTimelineRebuild = (contextMap, scale, minTs, chartW, totalW, totalMs) => {
+  let html = `<div class="tl-inner" style="width:${totalW}px">`;
+
+  // Time axis
+  html += `<div class="tl-time-axis-row">`;
+  html += `<div class="tl-axis-corner"></div>`;
+  html += `<div class="tl-time-axis" style="width:${chartW}px">`;
+  const tickStep = pickTickStep(totalMs, chartW);
+  for (let ms = 0; ms <= totalMs + tickStep * 0.5; ms += tickStep) {
+    const px = Math.round(ms * scale);
+    if (px > chartW) break;
+    html += `<span class="tl-tick" style="left:${px}px">${formatDuration(ms)}</span>`;
+  }
+  html += `</div></div>`;
+
+  // Context groups
+  for (const [ctx, labelMap] of contextMap) {
+    html += `<div class="tl-group-header" data-ctx="${escapeHtml(ctx)}">`;
+    html += `<div class="tl-group-label" title="${escapeHtml(ctx)}">${escapeHtml(ctx)}</div>`;
+    html += `<div class="tl-group-stripe" style="width:${chartW}px"></div>`;
+    html += `</div>`;
+
+    for (const [rowKey, pts] of labelMap) {
+      const p0     = pts[0];
+      const sorted = [...pts].sort((a, b) => new Date(a.startTs) - new Date(b.startTs));
+
+      html += `<div class="tl-row" data-row-key="${escapeHtml(rowKey)}">`;
+      html += `<div class="tl-row-label" title="${escapeHtml(rowKey)}">${renderLabelHtml(p0.label, p0.badge || null)}</div>`;
+      html += `<div class="tl-row-bars" style="width:${chartW}px">`;
+
+      for (const p of sorted) {
+        const startMs  = new Date(p.startTs).getTime() - minTs;
+        const dur      = p.duration ?? (new Date(p.endTs) - new Date(p.startTs));
+        const left     = Math.round(startMs * scale);
+        const width    = Math.max(Math.round(dur * scale), 2);
+        const cls      = barClass(dur);
+        const durText  = formatDuration(dur);
+        const tooltip  = `${escapeHtml(rowKey)}\n${durText}${p.contextId ? ' [' + p.contextId + ']' : ''}\n${p.startTs}`;
+
+        html += `<div class="tl-bar ${cls}" style="left:${left}px;width:${width}px" title="${tooltip}" data-pid="${p.id}">`;
+        if (width > 35) html += `<span>${durText}</span>`;
+        html += `</div>`;
+
+        state.tlRenderedPids.add(p.id);
+        state.tlPointMap.set(p.id, p);
+      }
+
+      html += `</div></div>`;
+    }
+  }
+
+  html += '</div>';
+  tlScrollEl.innerHTML = html;
+
+  // Attach click handlers
+  tlScrollEl.querySelectorAll('[data-pid]').forEach(el => {
+    el.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const point = state.tlPointMap.get(el.dataset.pid);
+      if (point) showPerfPointDetail(point, e.clientX, e.clientY);
+    });
+  });
+};
+
+// ── Incremental update: append only new bars, no DOM rebuild ──
+const tryIncrementalUpdate = (inner, contextMap, scale, minTs, chartW, totalW, totalMs) => {
+  // Check if all new points fit into existing rows
+  for (const [, labelMap] of contextMap) {
+    for (const [rowKey, pts] of labelMap) {
+      if (pts.some(p => !state.tlRenderedPids.has(p.id))) {
+        if (!inner.querySelector(`[data-row-key="${CSS.escape(rowKey)}"]`)) {
+          return false; // new row needed — fall back to full rebuild
+        }
+      }
+    }
+  }
+
+  // Update container widths
+  inner.style.width = totalW + 'px';
+  inner.querySelectorAll('.tl-row-bars, .tl-time-axis, .tl-group-stripe').forEach(el => {
+    el.style.width = chartW + 'px';
+  });
+
+  // Rebuild time axis ticks
+  const timeAxis = inner.querySelector('.tl-time-axis');
+  if (timeAxis) {
+    let tickHtml = '';
+    const tickStep = pickTickStep(totalMs, chartW);
+    for (let ms = 0; ms <= totalMs + tickStep * 0.5; ms += tickStep) {
+      const px = Math.round(ms * scale);
+      if (px > chartW) break;
+      tickHtml += `<span class="tl-tick" style="left:${px}px">${formatDuration(ms)}</span>`;
+    }
+    timeAxis.innerHTML = tickHtml;
+  }
+
+  // Append new bars to existing rows
+  for (const [, labelMap] of contextMap) {
+    for (const [rowKey, pts] of labelMap) {
+      const newPts = pts.filter(p => !state.tlRenderedPids.has(p.id));
+      if (newPts.length === 0) continue;
+
+      const rowBars = inner.querySelector(`[data-row-key="${CSS.escape(rowKey)}"] .tl-row-bars`);
+      if (!rowBars) continue;
+
+      for (const p of newPts) {
+        const startMs = new Date(p.startTs).getTime() - minTs;
+        const dur     = p.duration ?? (new Date(p.endTs) - new Date(p.startTs));
+        const left    = Math.round(startMs * scale);
+        const width   = Math.max(Math.round(dur * scale), 2);
+        const cls     = barClass(dur);
+        const durText = formatDuration(dur);
+        const tooltip = `${rowKey}\n${durText}${p.contextId ? ' [' + p.contextId + ']' : ''}\n${p.startTs}`;
+
+        const bar = document.createElement('div');
+        bar.className = `tl-bar ${cls} tl-bar-new`;
+        bar.style.cssText = `left:${left}px;width:${width}px`;
+        bar.title = tooltip;
+        bar.dataset.pid = p.id;
+        if (width > 35) bar.innerHTML = `<span>${durText}</span>`;
+        bar.addEventListener('click', (e) => {
+          e.stopPropagation();
+          showPerfPointDetail(p, e.clientX, e.clientY);
+        });
+        rowBars.appendChild(bar);
+
+        state.tlRenderedPids.add(p.id);
+        state.tlPointMap.set(p.id, p);
+      }
+    }
+  }
+
+  return true;
+};
+
+// Pick a human-friendly tick interval
+const pickTickStep = (totalMs, widthPx) => {
+  const candidates = [10, 25, 50, 100, 250, 500, 1000, 2000, 5000, 10000, 30000, 60000];
+  const minPxPerTick = 60;
+  for (const step of candidates) {
+    const ticks = totalMs / step;
+    if (widthPx / ticks >= minPxPerTick) return step;
+  }
+  return candidates[candidates.length - 1];
+};
+
+// ── Clear inactive ──
+document.getElementById('clear-inactive-btn').addEventListener('click', () => {
+  const offlineCount = [...state.debuggers.values()].filter(d => d.status === 'offline').length;
+  if (offlineCount === 0) return;
+  if (!confirm(`Remove ${offlineCount} offline debugger(s) and their data?`)) return;
+  socket.send(JSON.stringify({ action: 'clear-inactive' }));
+});
+
+// ── Console event listeners ──
+debuggerSearchEl.addEventListener('input', renderDebuggers);
+levelFilterEl.addEventListener('change', () => renderConsole(true));
+categoryFilterEl.addEventListener('input', () => renderConsole(true));
+contextFilterEl.addEventListener('change', () => renderConsole(true));
+textFilterEl.addEventListener('input', () => renderConsole(true));
+
+// ── Report elements ──
+const reportPeriodEl  = document.getElementById('report-period');
+const reportFormatEl  = document.getElementById('report-format');
+const reportBtnEl     = document.getElementById('report-btn');
+
+// ── Timeline event listeners ──
+tlContextFilterEl.addEventListener('change', renderTimeline);
+tlScaleEl.addEventListener('input', renderTimeline);
+
+document.getElementById('tl-btn-start').addEventListener('click', () => { tlScrollEl.scrollLeft = 0; });
+document.getElementById('tl-btn-end').addEventListener('click',   () => { tlScrollEl.scrollLeft = tlScrollEl.scrollWidth; });
+
+document.getElementById('tl-detail-close').addEventListener('click', () => tlDetailEl.classList.add('hidden'));
+
+// Close popover on click outside
+document.addEventListener('click', (e) => {
+  if (!tlDetailEl.classList.contains('hidden') &&
+      !tlDetailEl.contains(e.target) &&
+      !e.target.closest('[data-pid]')) {
+    tlDetailEl.classList.add('hidden');
+  }
+  // Close context menu on click outside
+  const ctxMenu = document.getElementById('tl-ctx-menu');
+  if (ctxMenu && !ctxMenu.contains(e.target) &&
+      !e.target.closest('.tl-row-label') && !e.target.closest('.tl-group-label')) {
+    ctxMenu.classList.add('hidden');
+  }
+  // Close dropdowns on click outside
+  if (!e.target.closest('.tl-dropdown-wrap')) {
+    document.querySelectorAll('.tl-dropdown-menu').forEach(m => m.classList.add('hidden'));
+  }
+});
+
+// ── Timeline context menu ──
+const TL_ICON_FILTER_ADD = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 3h12L9 8.5V12l-2 1V8.5L2 3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M12 10h4M14 8v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+const TL_ICON_FILTER_DEL = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 3h12L9 8.5V12l-2 1V8.5L2 3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M11.5 10l3 3M14.5 10l-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+
+const showTlContextMenu = (x, y, items) => {
+  let menu = document.getElementById('tl-ctx-menu');
+  if (!menu) {
+    menu = document.createElement('div');
+    menu.id = 'tl-ctx-menu';
+    menu.className = 'tl-ctx-menu hidden';
+    document.body.appendChild(menu);
+  }
+  menu.innerHTML = '';
+  for (const item of items) {
+    const el = document.createElement('div');
+    el.className = 'tl-ctx-menu-item';
+    el.innerHTML = `<span class="tl-ctx-menu-item-icon">${item.icon}</span>${escapeHtml(item.text)}`;
+    el.addEventListener('click', (e) => {
+      e.stopPropagation();
+      menu.classList.add('hidden');
+      item.action();
+    });
+    menu.appendChild(el);
+  }
+  const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1;
+  menu.style.left = (x / zoom) + 'px';
+  menu.style.top  = (y / zoom) + 'px';
+  menu.classList.remove('hidden');
+  requestAnimationFrame(() => {
+    const rect = menu.getBoundingClientRect();
+    if (rect.right > window.innerWidth) menu.style.left = ((x / zoom) - rect.width) + 'px';
+    if (rect.bottom > window.innerHeight) menu.style.top = ((y / zoom) - rect.height) + 'px';
+  });
+};
+
+// Click on row label → context menu for badge filter
+tlScrollEl.addEventListener('click', (e) => {
+  const rowLabel = e.target.closest('.tl-row-label');
+  if (rowLabel) {
+    const row = rowLabel.closest('.tl-row');
+    const rowKey = row?.dataset.rowKey;
+    if (!rowKey) return;
+    const ci = rowKey.indexOf(':');
+    const badge = ci !== -1 ? rowKey.slice(0, ci) : rowKey;
+    e.stopPropagation();
+    const isFiltered = state.tlLabelFilters.has(badge);
+    const items = isFiltered
+      ? [{ icon: TL_ICON_FILTER_DEL, text: `Remove "${badge}"`, action: () => removeLabelFilter(badge) }]
+      : [{ icon: TL_ICON_FILTER_ADD, text: `Filter by "${badge}"`, action: () => addLabelFilter(badge) }];
+    showTlContextMenu(e.clientX, e.clientY, items);
+    return;
+  }
+
+  const groupLabel = e.target.closest('.tl-group-label');
+  if (groupLabel) {
+    const header = groupLabel.closest('.tl-group-header');
+    const ctx = header?.dataset.ctx;
+    if (!ctx) return;
+    e.stopPropagation();
+    const current = tlContextFilterEl.value;
+    const isFiltered = current === ctx;
+    const items = isFiltered
+      ? [{ icon: TL_ICON_FILTER_DEL, text: `Show all contexts`, action: () => { tlContextFilterEl.value = 'all'; renderTimeline(); } }]
+      : [{ icon: TL_ICON_FILTER_ADD, text: `Filter by "${ctx}"`, action: () => { tlContextFilterEl.value = ctx; renderTimeline(); } }];
+    showTlContextMenu(e.clientX, e.clientY, items);
+    return;
+  }
+});
+
+// ── Report generation ──
+
+const percentile = (arr, p) => {
+  const sorted = [...arr].sort((a, b) => a - b);
+  const idx = Math.max(0, Math.ceil((p / 100) * sorted.length) - 1);
+  return sorted[idx];
+};
+
+const durClass = (ms) => ms < 300 ? 'fast' : ms < 1000 ? 'medium' : 'slow';
+
+const PERIOD_LABELS = { '5': 'First 5 seconds', '60': 'First 60 seconds', 'all': 'Full period' };
+
+const buildReportData = (points, dbg, contextFilter, period) => {
+  // Group by badge+label
+  const byLabel = new Map();
+  for (const p of points) {
+    const key = (p.badge ? p.badge + ':' : '') + p.label;
+    if (!byLabel.has(key)) byLabel.set(key, []);
+    byLabel.get(key).push(p);
+  }
+
+  // Top slow: max duration per label, sorted desc
+  const topSlow = [...byLabel.entries()].map(([label, pts]) => {
+    const durations = pts.map(p => p.duration ?? 0);
+    const sum = durations.reduce((a, b) => a + b, 0);
+    return {
+      label,
+      count: pts.length,
+      total: sum,
+      max:   Math.max(...durations),
+      min:   Math.min(...durations),
+      avg:   sum / durations.length,
+      p95:   percentile(durations, 95),
+    };
+  }).sort((a, b) => b.max - a.max).slice(0, 30);
+
+  // Most frequent: sorted by count desc
+  const mostFrequent = [...byLabel.entries()].map(([label, pts]) => {
+    const durations = pts.map(p => p.duration ?? 0);
+    const sum = durations.reduce((a, b) => a + b, 0);
+    return {
+      label,
+      count: pts.length,
+      total: sum,
+      avg:   sum / durations.length,
+      max:   Math.max(...durations),
+    };
+  }).sort((a, b) => b.count - a.count).slice(0, 30);
+
+  // Repeated: 3+ calls within any 10s window (sliding window)
+  const repeated = [];
+  for (const [label, pts] of byLabel) {
+    const sorted = [...pts].sort((a, b) => new Date(a.startTs) - new Date(b.startTs));
+    let maxCount = 0, maxWindowStart = null;
+    let left = 0;
+    for (let right = 0; right < sorted.length; right++) {
+      const rTs = new Date(sorted[right].startTs).getTime();
+      while (new Date(sorted[left].startTs).getTime() < rTs - 10000) left++;
+      const count = right - left + 1;
+      if (count > maxCount) {
+        maxCount = count;
+        maxWindowStart = sorted[left].startTs;
+      }
+    }
+    if (maxCount >= 3) {
+      repeated.push({ label, maxInWindow: maxCount, windowStart: maxWindowStart, total: pts.length });
+    }
+  }
+  repeated.sort((a, b) => b.maxInWindow - a.maxInWindow);
+
+  const allTs = points.flatMap(p => [new Date(p.startTs).getTime(), new Date(p.endTs).getTime()]);
+  return {
+    meta: {
+      debugger: dbg?.name || dbg?.debuggerId || 'Unknown',
+      debuggerId: dbg?.debuggerId || '',
+      context: contextFilter,
+      period,
+      periodLabel: PERIOD_LABELS[period] || period,
+      generatedAt: new Date().toISOString(),
+      totalPoints: points.length,
+      from: new Date(Math.min(...allTs)).toISOString(),
+      to:   new Date(Math.max(...allTs)).toISOString(),
+    },
+    topSlow,
+    mostFrequent,
+    repeated,
+  };
+};
+
+const fmtDate = (iso) => {
+  const d = new Date(iso);
+  const pad = (n) => String(n).padStart(2, '0');
+  return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+};
+
+const fmtTime = (iso) => {
+  const d = new Date(iso);
+  const pad = (n) => String(n).padStart(2, '0');
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${String(d.getMilliseconds()).padStart(3, '0')}`;
+};
+
+const durHtml = (ms) =>
+  `<span class="dur-${durClass(ms)}">${formatDuration(ms)}</span>`;
+
+const labelBadgeReportHtml = (label) => {
+  const ci = label.indexOf(':');
+  if (ci === -1) return `<code>${escHtml(label)}</code>`;
+  const badgeKey = normalizeBadge(label.slice(0, ci).trim());
+  const rest     = label.slice(ci + 1).trim();
+  const spec = getBadgeSpec(badgeKey);
+  const bg   = spec?.bg || '#4a5568';
+  const name = spec?.name ?? badgeKey;
+  return `<span style="display:inline-block;padding:2px 7px;border-radius:3px;background:${bg};color:#fff;font-size:11px;font-weight:600;vertical-align:middle;margin-right:6px">${escHtml(name)}</span><span style="vertical-align:middle">${escHtml(rest)}</span>`;
+};
+
+const buildHtmlReport = (d) => {
+  const { meta, topSlow, mostFrequent, repeated } = d;
+
+  const tableHead = (...cols) =>
+    `<tr>${cols.map(c => `<th>${c}</th>`).join('')}</tr>`;
+
+  const topSlowRows = topSlow.map((r, i) => `
+    <tr>
+      <td>${i + 1}</td>
+      <td class="label-cell">${labelBadgeReportHtml(r.label)}</td>
+      <td>${r.count}</td>
+      <td>${durHtml(r.total)}</td>
+      <td>${durHtml(r.max)}</td>
+      <td>${durHtml(r.avg)}</td>
+      <td>${durHtml(r.p95)}</td>
+      <td>${durHtml(r.min)}</td>
+    </tr>`).join('');
+
+  const freqRows = mostFrequent.map((r, i) => `
+    <tr>
+      <td>${i + 1}</td>
+      <td class="label-cell">${labelBadgeReportHtml(r.label)}</td>
+      <td><strong>${r.count}</strong></td>
+      <td>${durHtml(r.total)}</td>
+      <td>${durHtml(r.avg)}</td>
+      <td>${durHtml(r.max)}</td>
+    </tr>`).join('');
+
+  const repeatRows = repeated.length === 0
+    ? `<tr><td colspan="4" class="empty">No repeated bursts detected</td></tr>`
+    : repeated.map(r => `
+      <tr>
+        <td class="label-cell">${labelBadgeReportHtml(r.label)}</td>
+        <td><span class="badge badge-danger">${r.maxInWindow}×</span></td>
+        <td>${r.total}</td>
+        <td class="ts-cell">${fmtTime(r.windowStart)}</td>
+      </tr>`).join('');
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>PerfPoint Report — ${escHtml(meta.debugger)}</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+  :root {
+    --bg: #f4f4f5; --card: #ffffff; --ink: #18181b; --muted: #71717a;
+    --border: #e4e4e7; --row-hover: #fafafa; --th-bg: #fafafa;
+    --section-border: #e4e4e7; --meta-border: #e4e4e7;
+    --h2-border: #e4e4e7; --ts-color: #71717a;
+    --badge-danger-bg: #fef2f2; --badge-danger-fg: #dc2626; --badge-danger-border: #fecaca;
+  }
+  [data-theme="dark"] {
+    --bg: #09090b; --card: #18181b; --ink: #fafafa; --muted: #a1a1aa;
+    --border: #27272a; --row-hover: #1c1c1e; --th-bg: #1c1c1e;
+    --section-border: #27272a; --meta-border: #27272a;
+    --h2-border: #27272a; --ts-color: #a1a1aa;
+    --badge-danger-bg: #2d1117; --badge-danger-fg: #f87171; --badge-danger-border: #6b1414;
+  }
+  *, *::before, *::after { box-sizing: border-box; }
+  body { font-family: 'Inter', -apple-system, "Segoe UI", sans-serif; margin: 0; padding: 40px 56px; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.6; transition: background 0.2s, color 0.2s; }
+  h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; color: var(--ink); letter-spacing: -0.3px; }
+  .meta-bar { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--meta-border); }
+  .meta-bar span strong { color: var(--ink); }
+  section { background: var(--card); border: 1px solid var(--section-border); border-radius: 0; padding: 24px 28px; margin-bottom: 24px; }
+  h2 { margin: 0 0 16px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--h2-border); padding-bottom: 10px; }
+  h2 small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 8px; text-transform: none; letter-spacing: 0; }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  th { text-align: left; padding: 9px 12px; background: var(--th-bg); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
+  td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
+  tr:last-child td { border-bottom: none; }
+  tr:hover td { background: var(--row-hover); }
+  .label-cell { font-size: 13px; max-width: 500px; }
+  .label-cell code { font-family: 'JetBrains Mono', Menlo, Monaco, monospace; font-size: 12px; }
+  .ts-cell { font-family: 'JetBrains Mono', Menlo, Monaco, monospace; font-size: 12px; color: var(--ts-color); white-space: nowrap; }
+  .dur-fast   { color: #16a34a; font-weight: 600; }
+  .dur-medium { color: #d97706; font-weight: 600; }
+  .dur-slow   { color: #dc2626; font-weight: 600; }
+  .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
+  .badge-danger { background: var(--badge-danger-bg); color: var(--badge-danger-fg); border: 1px solid var(--badge-danger-border); }
+  .empty { color: var(--muted); font-style: italic; text-align: center; padding: 20px 0; font-size: 13px; }
+  .theme-btn { position: fixed; top: 20px; right: 24px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 16px; cursor: pointer; line-height: 1; transition: background 0.2s, border-color 0.2s; }
+  .theme-btn:hover { background: var(--bg); border-color: var(--muted); }
+</style>
+</head>
+<body>
+<button class="theme-btn" id="rpt-theme-btn" title="Toggle theme">🌙</button>
+<script>
+(function() {
+  var btn = document.getElementById('rpt-theme-btn');
+  var dark = false;
+  try {
+    var saved = localStorage.getItem('prism-report-theme');
+    if (saved) { dark = saved === 'dark'; }
+    else { dark = window.matchMedia('(prefers-color-scheme: dark)').matches; }
+  } catch(e) {}
+  function apply(d) {
+    document.documentElement.setAttribute('data-theme', d ? 'dark' : '');
+    btn.textContent = d ? '☀️' : '🌙';
+  }
+  apply(dark);
+  btn.addEventListener('click', function() {
+    dark = !dark;
+    apply(dark);
+    try { localStorage.setItem('prism-report-theme', dark ? 'dark' : 'light'); } catch(e) {}
+  });
+})();
+</script>
+<h1>Performance Report</h1>
+<div class="meta-bar">
+  <span>Debugger: <strong>${escHtml(meta.debugger)}</strong></span>
+  <span>Context: <strong>${escHtml(meta.context)}</strong></span>
+  <span>Period: <strong>${escHtml(meta.periodLabel)}</strong></span>
+  <span>Points: <strong>${meta.totalPoints}</strong></span>
+  <span>From: <strong>${fmtDate(meta.from)}</strong></span>
+  <span>To: <strong>${fmtDate(meta.to)}</strong></span>
+</div>
+
+<section>
+  <h2>Top Slow Operations <small>by max duration, top 30</small></h2>
+  <table>
+    <thead>${tableHead('#', 'Label', 'Count', 'Total', 'Max', 'Avg', 'p95', 'Min')}</thead>
+    <tbody>${topSlowRows || '<tr><td colspan="8" class="empty">No data</td></tr>'}</tbody>
+  </table>
+</section>
+
+<section>
+  <h2>Frequently Repeated Operations <small>≥3 calls in any 10-second window</small></h2>
+  <table>
+    <thead>${tableHead('Label', 'Max burst', 'Total calls', 'First burst at')}</thead>
+    <tbody>${repeatRows}</tbody>
+  </table>
+</section>
+
+<section>
+  <h2>Most Frequent Operations <small>by call count, top 30</small></h2>
+  <table>
+    <thead>${tableHead('#', 'Label', 'Count', 'Total', 'Avg', 'Max')}</thead>
+    <tbody>${freqRows || '<tr><td colspan="6" class="empty">No data</td></tr>'}</tbody>
+  </table>
+</section>
+
+</body></html>`;
+};
+
+const escHtml = (str) => String(str ?? '')
+  .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+const buildCsvReport = (d) => {
+  const { meta, topSlow, mostFrequent, repeated } = d;
+  const lines = [];
+
+  lines.push(`"PerfPoint Report"`);
+  lines.push(`"Debugger","${meta.debugger}"`);
+  lines.push(`"Context","${meta.context}"`);
+  lines.push(`"Period","${meta.periodLabel}"`);
+  lines.push(`"Total points","${meta.totalPoints}"`);
+  lines.push(`"From","${meta.from}"`);
+  lines.push(`"To","${meta.to}"`);
+  lines.push(`"Generated","${meta.generatedAt}"`);
+  lines.push('');
+
+  lines.push('"TOP SLOW OPERATIONS"');
+  lines.push('"#","Label","Count","Max ms","Avg ms","p95 ms","Min ms"');
+  topSlow.forEach((r, i) =>
+    lines.push(`"${i + 1}","${r.label.replace(/"/g, '""')}","${r.count}","${r.max.toFixed(2)}","${r.avg.toFixed(2)}","${r.p95.toFixed(2)}","${r.min.toFixed(2)}"`)
+  );
+  lines.push('');
+
+  lines.push('"FREQUENTLY REPEATED OPERATIONS (3+ in 10s)"');
+  lines.push('"Label","Max burst","Total calls","First burst at"');
+  repeated.forEach(r =>
+    lines.push(`"${r.label.replace(/"/g, '""')}","${r.maxInWindow}","${r.total}","${r.windowStart}"`)
+  );
+  if (repeated.length === 0) lines.push('"No repeated bursts detected"');
+  lines.push('');
+
+  lines.push('"MOST FREQUENT OPERATIONS"');
+  lines.push('"#","Label","Count","Avg ms","Max ms"');
+  mostFrequent.forEach((r, i) =>
+    lines.push(`"${i + 1}","${r.label.replace(/"/g, '""')}","${r.count}","${r.avg.toFixed(2)}","${r.max.toFixed(2)}"`)
+  );
+
+  return lines.join('\r\n');
+};
+
+const downloadFile = (content, mimeType, filename) => {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 10000);
+};
+
+const generateReport = () => {
+  const id = state.selectedDebuggerId;
+  if (!id) { alert('Select a debugger first'); return; }
+
+  const allPoints = state.perfpointsByDebugger.get(id) || [];
+  if (allPoints.length === 0) { alert('No PerfPoints to report'); return; }
+
+  const contextFilter = tlContextFilterEl.value;
+  const labelFilters  = state.tlLabelFilters;
+  const period  = reportPeriodEl.value;
+  const format  = reportFormatEl.value;
+
+  let points = contextFilter === 'all'
+    ? allPoints
+    : allPoints.filter(p => p.contextId === contextFilter);
+
+  if (labelFilters.size > 0) {
+    points = points.filter(p => {
+      const pKey = (p.badge ? p.badge + ':' : '') + p.label;
+      return [...labelFilters].some(f => pKey.toLowerCase().includes(f.toLowerCase()));
+    });
+  }
+
+  if (period !== 'all') {
+    const sorted = [...points].sort((a, b) => new Date(a.startTs) - new Date(b.startTs));
+    if (sorted.length > 0) {
+      const cutoff = new Date(sorted[0].startTs).getTime() + Number(period) * 1000;
+      points = points.filter(p => new Date(p.startTs).getTime() <= cutoff);
+    }
+  }
+
+  if (points.length === 0) { alert('No data for the selected period / context'); return; }
+
+  const dbg  = state.debuggers.get(id) ?? null;
+  const data = buildReportData(points, dbg, contextFilter, period);
+  const ts   = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+
+  if (format === 'html') {
+    const html = buildHtmlReport(data);
+    const blob = new Blob([html], { type: 'text/html' });
+    window.open(URL.createObjectURL(blob), '_blank');
+  } else if (format === 'csv') {
+    downloadFile(buildCsvReport(data), 'text/csv;charset=utf-8', `perf-report-${ts}.csv`);
+  } else if (format === 'json') {
+    downloadFile(JSON.stringify(data, null, 2), 'application/json', `perf-report-${ts}.json`);
+  }
+};
+
+reportBtnEl.addEventListener('click', () => {
+  generateReport();
+  document.getElementById('tl-report-menu')?.classList.add('hidden');
+});
+
+// ── Dropdown toggles ──
+const toggleDropdown = (menuId) => {
+  const menu = document.getElementById(menuId);
+  if (!menu) return;
+  // Close all other dropdowns first
+  document.querySelectorAll('.tl-dropdown-menu').forEach(m => {
+    if (m.id !== menuId) m.classList.add('hidden');
+  });
+  menu.classList.toggle('hidden');
+};
+
+document.getElementById('tl-legend-btn')?.addEventListener('click', (e) => {
+  e.stopPropagation();
+  toggleDropdown('tl-legend-popup');
+});
+
+document.getElementById('tl-report-btn')?.addEventListener('click', (e) => {
+  e.stopPropagation();
+  toggleDropdown('tl-report-menu');
+});
+
+// ── Theme toggle ──
+const themeToggleEl = document.getElementById('theme-toggle');
+const applyTheme = (dark) => {
+  document.documentElement.setAttribute('data-theme', dark ? 'dark' : '');
+  themeToggleEl.textContent = dark ? '☀️' : '🌙';
+  try { localStorage.setItem('prism-theme', dark ? 'dark' : 'light'); } catch {}
+};
+themeToggleEl.addEventListener('click', () => {
+  applyTheme(document.documentElement.getAttribute('data-theme') !== 'dark');
+});
+// Restore saved theme
+try {
+  const saved = localStorage.getItem('prism-theme');
+  if (saved === 'dark') applyTheme(true);
+  else if (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches) applyTheme(true);
+} catch {}
+
+// ── Send command ──
+sendBtnEl.addEventListener('click', () => {
+  if (!state.selectedDebuggerId) {
+    alert('Select debugger first');
+    return;
+  }
+  let payload;
+  try {
+    payload = JSON.parse(payloadEl.value || '{}');
+  } catch {
+    alert('Payload must be valid JSON');
+    return;
+  }
+  socket.send(JSON.stringify({
+    action: 'send',
+    debuggerId: state.selectedDebuggerId,
+    eventName: eventNameEl.value || 'command.execute',
+    payload
+  }));
+});
+
+// ── Connect modal ──
+const connectBtnEl      = document.getElementById('connect-btn');
+const connectModalEl    = document.getElementById('connect-modal');
+const connectModalClose = document.getElementById('connect-modal-close');
+const connectQrEl       = document.getElementById('connect-qr');
+const connectUrlEl      = document.getElementById('connect-url');
+const connectCopyEl     = document.getElementById('connect-copy');
+
+function renderConnectUrl(wsLink) {
+  const url = `http://prism.connect/?wslink=${encodeURIComponent(wsLink)}`;
+  connectUrlEl.value = url;
+
+  connectQrEl.innerHTML = '';
+  if (typeof qrcode !== 'undefined') {
+    const qr = qrcode(0, 'M');
+    qr.addData(url);
+    qr.make();
+    connectQrEl.innerHTML = qr.createImgTag(5, 8);
+  }
+}
+
+function showConnectModal() {
+  connectModalEl.classList.remove('hidden');
+  connectQrEl.innerHTML = '<span class="muted">Loading...</span>';
+  connectUrlEl.value = '';
+
+  fetch('/api/connect-info')
+    .then(r => r.json())
+    .then(data => renderConnectUrl(data.wsLink))
+    .catch(() => {
+      const fallback = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}`;
+      renderConnectUrl(fallback);
+    });
+}
+
+function hideConnectModal() {
+  connectModalEl.classList.add('hidden');
+}
+
+connectBtnEl.addEventListener('click', showConnectModal);
+connectModalClose.addEventListener('click', hideConnectModal);
+connectModalEl.addEventListener('click', (e) => {
+  if (e.target === connectModalEl) hideConnectModal();
+});
+
+connectCopyEl.addEventListener('click', () => {
+  navigator.clipboard.writeText(connectUrlEl.value).then(() => {
+    const prev = connectCopyEl.textContent;
+    connectCopyEl.textContent = 'Copied!';
+    setTimeout(() => { connectCopyEl.textContent = prev; }, 1500);
+  });
+});