CONFLICT 1:
<<<<<<< HEAD
function makeItemTooltip(n, isActive, pathMap, turnMap) {
  const path = pathMap && pathMap[n];
  const turn = (turnMap && turnMap[n] != null) ? turnMap[n] : null;
  const pathLine = path ? 'Path: ' + path : 'Built-in (no file path)';
  if (!isActive) {
    // Not invoked Ã¢â‚¬â€ just show where it comes from
    return pathLine;
  }
  // Invoked / loaded Ã¢â‚¬â€ show path and which turn it entered context
  let t = pathLine;
  if (turn != null) { t += '\nIn context from: Turn ' + turn; }
  return t;
}
=======
function renderDiscoveryBreakdown(ctx) {
  if (!ctx) return '<div class="empty">No discovery data</div>';
>>>>>>> main

---
CONFLICT 2:
<<<<<<< HEAD
  const sid = escapeHtml(sessionId || '');

  const tabBtns = tabs.map((t, i) =>
    `<button class="ctx-tab-btn${i === 0 ? ' active' : ''}" data-ctx-sid="${sid}" data-ctx-tab="${t.id}">${t.label}</button>`
  ).join('');

  // Mode line Ã¢â‚¬â€ counts are already visible in the tab labels just below
  const modeHtml = `<span class="ctx-header-mode">${escapeHtml(ctx.agentMode || 'Agent')} mode</span>`;

  // Skills panel Ã¢â‚¬â€ invoked first, then rest
  let skillsHtml = '';
  if (skills.length === 0) {
    skillsHtml = '<span class="text-muted" style="font-size:12px">No skills available</span>';
  } else {
    skillsHtml = ctxTagList(skills, skillsInvoked, '', '', ctx.skillPaths, ctx.skillsFirstTurn);
  }

  // Agents panel Ã¢â‚¬â€ invoked first, then rest
  let agentsHtml = '';
  if (agents.length === 0) {
    agentsHtml = '<span class="text-muted" style="font-size:12px">No agents available</span>';
  } else {
    agentsHtml = ctxTagList(agents, agentsInvoked, '', '', ctx.agentPaths, ctx.agentsFirstTurn);
  }

  // Instructions panel Ã¢â‚¬â€ show names as tags with path/turn on hover
  let instrHtml = '';
  if (instrCount === 0) {
    instrHtml = '<span class="text-muted" style="font-size:12px">No instruction files were loaded for this session.</span>';
  } else {
    instrHtml = `<div class="ctx-tag-row">${instructions.map(n => {
      const t = makeItemTooltip(n, true, ctx.instructionPaths, ctx.instructionsFirstTurn);
      return `<span class="ctx-tag ctx-tag-active" data-ctx-info="${escapeHtml(t)}">${escapeHtml(n)}</span>`;
    }).join('')}</div>`;
  }

  return `<div class="ctx-section" data-ctx-sid="${sid}">
    <div class="ctx-header">
      <span style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">Session Context</span>
      ${modeHtml}
    </div>
    <div class="ctx-tabs">${tabBtns}</div>
    <div class="ctx-tab-panel" data-ctx-sid="${sid}" data-ctx-panel="skills">${skillsHtml}</div>
    <div class="ctx-tab-panel" data-ctx-sid="${sid}" data-ctx-panel="agents" style="display:none">${agentsHtml}</div>
    <div class="ctx-tab-panel" data-ctx-sid="${sid}" data-ctx-panel="instructions" style="display:none">${instrHtml}</div>
  </div>`;
=======
  return `
    <div class="model-breakdown">
      ${sections.map(section => `
        <div class="model-card">
          <div class="model-card-head">
            <div>
              <div class="model-name">${escapeHtml(section.title)}</div>
              <div class="text-muted" style="font-size:11px">${escapeHtml(section.subtitle)}</div>
            </div>
            <div class="mono text-accent" style="font-size:18px;font-weight:600">${section.items.length}</div>
          </div>
          ${section.items.length
            ? `<div class="dd-tool-chips" style="margin-top:10px">${section.items.map(item => `<span class="dd-tool-chip" title="${escapeHtml(item.tip)}">${escapeHtml(item.name)}</span>`).join('')}</div>`
            : '<div class="text-muted" style="font-size:12px;margin-top:10px">None</div>'}
        </div>`).join('')}
    </div>`;
>>>>>>> main

---
CONFLICT 3:
<<<<<<< HEAD
      <td style="font-weight:600"><span class="${arrowCls}">Ã¢â€“Â¶</span> <b>${escapeHtml(turnLabel)}</b>&nbsp;<span style="font-size:11px;font-weight:400;color:var(--text)">(${t.calls} calls)</span>${summBadge}${userMsgPreview}</td>
=======
      <td style="font-weight:600"><span class="${arrowCls}">▶</span> <b>${escapeHtml(turnLabel)}</b>&nbsp;<span style="font-size:11px;font-weight:400;color:var(--text)">(${t.calls} calls)</span>${toolCountBadge}${agentCountBadge}${skillCountBadge}${instructionCountBadge}${summBadge}${userMsgPreview}</td>
>>>>>>> main

---
CONFLICT 4:
<<<<<<< HEAD
      <span style="font-size:13px;font-weight:600">Analysis Ã¢â‚¬â€ ${totals.turns} turn${totals.turns !== 1 ? 's' : ''}, ${totals.calls} call${totals.calls !== 1 ? 's' : ''}</span>
=======
      <span style="font-size:13px;font-weight:600">Analysis — ${totals.turns} turn${totals.turns !== 1 ? 's' : ''}, ${totals.calls} LLM call${totals.calls !== 1 ? 's' : ''}${toolsLabel}${agentsLabel}</span>
>>>>>>> main

---
