{% extends "base.html" %}

{% block title %}Evolution of {{ report.repo_name }} — PolyglotMiner Analytics Studio{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
  .tab-btn {
    padding: 0.65rem 1.25rem;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .tab-btn:hover {
    color: var(--primary);
  }
  .tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
  }
  .conf-badge {
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .conf-high {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
  }
  .conf-med {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
  }
  .replacement-card {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    margin-top: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
  }
  .step-pill {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 800;
    font-size: 0.74rem;
  }
  .filter-toolbar-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .filter-toolbar-btn:hover {
    border-color: var(--primary-border);
    color: var(--primary);
  }
  .filter-toolbar-btn.active {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-border);
  }

  /* Studio Workspace Grid */
  .studio-grid {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    align-items: stretch;
  }
  @media (max-width: 992px) {
    .studio-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Sidebar Menu */
  .studio-sidebar {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .studio-menu-section {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .studio-menu-heading {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 0.5rem 0.25rem 0.5rem;
  }
  .studio-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-weight: 700;
    color: #475569;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all 0.15s ease;
  }
  .studio-nav-item:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #e2e8f0;
  }
  .studio-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
  }

  /* Studio Main Canvas */
  .studio-canvas-card {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .studio-params-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1.25rem;
  }
  .studio-param-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .studio-select {
    height: 34px;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    outline: none;
    cursor: pointer;
  }
  .studio-insights-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-top: 1.25rem;
  }
  .insight-item-title {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .insight-item-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 0.15rem;
  }

  /* Modern Migration Commit Stream Cards */
  .migration-commit-card {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
  }
  .migration-commit-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  .migration-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.85rem;
  }
  .conf-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.76rem;
    font-weight: 800;
  }
  .conf-pill.conf-high {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
  }
  .conf-pill.conf-med {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
  }
  .conf-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .mono-hash {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: #047857;
    background: #f0fdf4;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    border: 1px solid #dcfce7;
  }
  .trans-pill {
    font-size: 0.76rem;
    font-weight: 700;
    color: #4338ca;
    background: #eef2ff;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    border: 1px solid #c7d2fe;
  }
  .migration-message {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
  }
  .migration-signals {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
  }
  .signal-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
  }
  .replacements-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .file-pair-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    padding: 0.35rem 0.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .file-src {
    color: #b91c1c;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    word-break: break-all;
  }
  .file-tgt {
    color: #15803d;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    word-break: break-all;
  }
</style>
{% endblock %}

{% block nav_links %}
<a href="{{ root_path }}evolution.html" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 0.4rem;">
  <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
  <span>Evolution Dashboard</span>
</a>
{% endblock %}

{% block content %}
<!-- Breadcrumb Bar -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem;">
  <div style="font-size: 0.82rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem;">
    <a href="{{ root_path }}evolution.html" style="color: var(--text-secondary); text-decoration: none; font-weight: 600;">Evolution Dashboard</a>
    <span>/</span>
    <span style="font-weight: 700; color: #0f172a;">{{ report.repo_name }}</span>
    <span>/</span>
    <span class="mono">{{ report.run_id }}</span>
  </div>
</div>

<!-- Project Hero Header Card -->
<div class="card" style="margin-bottom: 2rem; padding: 1.75rem;">
  <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;">
    <div>
      <div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem;">
        <h1 style="font-size: 2rem; font-weight: 900; color: #0f172a; letter-spacing: -0.03em;">
          {{ report.repo_name }}
        </h1>
        {% if not report.checkpoints or report.checkpoints|length == 0 %}
          <span class="badge" style="background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-weight: 800;">Discovered • Analysis Pending</span>
        {% else %}
          <span class="badge" style="background: var(--primary-light); color: var(--primary); font-weight: 700;">Evolution Trajectory</span>
        {% endif %}
      </div>
      <div style="color: var(--text-muted); font-size: 0.85rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;" class="mono">
        <span style="display: flex; align-items: center; gap: 0.35rem;">
          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
          {{ report.repo_path }}
        </span>
        <span>•</span>
        <span>Range: <code class="mono" style="color: #047857; font-weight: 700;">{{ report.start_ref }} &rarr; {{ report.end_ref }}</code></span>
        <span>•</span>
        <span>{{ report.total_commits_in_range|number_format }} commits</span>
        <span>•</span>
        <span>{{ report.sampled_commits_count or (report.checkpoints|length) }} checkpoints</span>
      </div>
    </div>
  </div>

  {% if not report.checkpoints or report.checkpoints|length == 0 %}
  <div style="margin-top: 1.25rem; padding: 1.15rem 1.35rem; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #4f46e5; border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
    <div>
      <div style="font-weight: 800; font-size: 0.92rem; color: #0f172a; display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.2rem;">
        <span>🔬</span> Discovered Repository in Dataset
      </div>
      <div style="font-size: 0.82rem; color: #475569;">
        This repository is cataloged in your corpus ({{ report.total_commits_in_range|number_format }} commits), but historical milestone sampling has not been executed yet.
      </div>
    </div>
    <div style="background: #0f172a; padding: 0.45rem 0.9rem; border-radius: 6px; color: #38bdf8; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem;">
      <span style="color: #94a3b8;">$</span> polyglotminer history {{ report.repo_name }}
    </div>
  </div>
  {% endif %}
</div>

<!-- KPI Hero Grid -->
<div class="stats-grid">
  <div class="stat-card primary">
    <div class="stat-top">
      <span class="stat-label">Primary Migration Signal</span>
      <div class="stat-icon">
        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
      </div>
    </div>
    <div class="stat-value" id="kpi-primary-pair" style="font-size: 1.4rem;">
      {% if report.primary_migration_pair %}
        {{ report.primary_migration_pair.source_language }} &rarr; {{ report.primary_migration_pair.target_language }}
      {% else %}
        <span style="font-size: 1.15rem; color: #475569;">Polyglot / No Migration</span>
      {% endif %}
    </div>
    <div class="stat-sub" id="kpi-primary-sub">
      {% if report.primary_migration_pair %}
        {{ report.primary_migration_pair.candidate_count }} candidate transitions
      {% else %}
        No cross-language displacement detected
      {% endif %}
    </div>
  </div>

  <div class="stat-card blue">
    <div class="stat-top">
      <span class="stat-label">Migration Archetype</span>
      <div class="stat-icon">
        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
      </div>
    </div>
    <div class="stat-value" style="color: #0284c7; font-size: 1.25rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ (report.primary_migration_pair.archetype if report.primary_migration_pair and report.primary_migration_pair.archetype else 'Direct File Replacement') }}">
      {% if report.primary_migration_pair and report.primary_migration_pair.archetype %}
        {{ report.primary_migration_pair.archetype }}
      {% else %}
        Direct Replacement
      {% endif %}
    </div>
    <div class="stat-sub">Turnover mechanics pattern</div>
  </div>

  <div class="stat-card green">
    <div class="stat-top">
      <span class="stat-label">Candidate Commits</span>
      <div class="stat-icon">
        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      </div>
    </div>
    <div class="stat-value" style="color: #047857;">{{ report.migration_candidates|length }}</div>
    <div class="stat-sub">Mined via 4-signal heuristics</div>
  </div>

  <div class="stat-card slate">
    <div class="stat-top">
      <span class="stat-label">Range & Checkpoints</span>
      <div class="stat-icon">
        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      </div>
    </div>
    <div class="stat-value">{{ report.total_commits_in_range|number_format }} Commits</div>
    <div class="stat-sub">{{ report.sampled_commits_count }} equidistant checkpoints</div>
  </div>
</div>

<!-- Multi-Tab Navigation -->
<div style="border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.5rem; display: flex; gap: 1rem;">
  <button type="button" class="tab-btn active" id="tabBtnTimeline" onclick="switchEvolutionTab('timeline')">
    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
    Interactive Analytics Studio
  </button>
  <button type="button" class="tab-btn" id="tabBtnMigration" onclick="switchEvolutionTab('migration')">
    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
    Candidate Migration Commits <span class="badge" id="migrationTabBadge">{{ report.migration_candidates|length }}</span>
  </button>
  <button type="button" class="tab-btn" id="tabBtnDiff" onclick="switchEvolutionTab('diff')">
    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
    2-Commit Diff Inspector
  </button>
</div>

<!-- Tab 1: Interactive Analytics Studio -->
<div id="tabContentTimeline" style="display: block;">
  <!-- Top Global Filter Preset Toolbar -->
  <div style="background: #ffffff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0.85rem 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; box-shadow: var(--shadow-sm);">
    <div style="display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;">
      <span style="font-size: 0.82rem; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.05em;">
        Global Filter:
      </span>
      <button type="button" class="filter-toolbar-btn active" id="evolPresetProg" onclick="setEvolutionPreset('prog')">
        Code Only (Default)
      </button>
      <button type="button" class="filter-toolbar-btn" id="evolPresetAll" onclick="setEvolutionPreset('all')">
        All Types
      </button>
      <button type="button" class="filter-toolbar-btn" id="evolPresetNoData" onclick="setEvolutionPreset('no-data')">
        Exclude Data (No JSON/Text)
      </button>
      <button type="button" class="filter-toolbar-btn" onclick="openFilterModal()" style="color: var(--primary);">
        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg>
        Custom Filters...
      </button>
    </div>

    <div style="display: flex; align-items: center; gap: 1rem;">
      <span class="badge" id="evolActiveFilterPill" style="background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 0.78rem;">
        Showing: Programming Languages Only
      </span>
    </div>
  </div>

  <!-- Studio Workspace: Sidebar + Dynamic Canvas -->
  <div class="studio-grid">
    <!-- Left Navigation Panel -->
    <div class="studio-sidebar">
      <!-- Section 1: Macro Evolution -->
      <div class="studio-menu-section">
        <div class="studio-menu-heading">Macro Evolution</div>
        <button type="button" class="studio-nav-item active" id="navItem-stacked-loc" onclick="selectStudioGraph('stacked-loc')">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
          <span>Stacked Module Volume</span>
        </button>
        <button type="button" class="studio-nav-item" id="navItem-share-100" onclick="selectStudioGraph('share-100')">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"/></svg>
          <span>100% Dominance Share</span>
        </button>
        <button type="button" class="studio-nav-item" id="navItem-files-count" onclick="selectStudioGraph('files-count')">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
          <span>File Count Trajectory</span>
        </button>
        <button type="button" class="studio-nav-item" id="navItem-churn-velocity" onclick="selectStudioGraph('churn-velocity')">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
          <span>Net Churn (ΔFiles)</span>
        </button>
      </div>

      <!-- Section 2: Pairwise Migration Comparator -->
      <div class="studio-menu-section">
        <div class="studio-menu-heading">Pairwise Migration (A vs B)</div>
        <button type="button" class="studio-nav-item" id="navItem-pairwise-dual" onclick="selectStudioGraph('pairwise-dual')">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
          <span>Dual-Axis Comparison</span>
        </button>
        <button type="button" class="studio-nav-item" id="navItem-pairwise-divergence" onclick="selectStudioGraph('pairwise-divergence')">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/></svg>
          <span>Replacement & Delta Curve</span>
        </button>
        <button type="button" class="studio-nav-item" id="navItem-pairwise-phasespace" onclick="selectStudioGraph('pairwise-phasespace')">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/></svg>
          <span>Phase-Space State Trajectory</span>
        </button>
      </div>

      <!-- Section 3: Complexity & Dynamics -->
      <div class="studio-menu-section">
        <div class="studio-menu-heading">Information & Dynamics</div>
        <button type="button" class="studio-nav-item" id="navItem-entropy-index" onclick="selectStudioGraph('entropy-index')">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          <span>Shannon Diversity (H)</span>
        </button>
        <button type="button" class="studio-nav-item" id="navItem-conversion-rate" onclick="selectStudioGraph('conversion-rate')">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          <span>Migration Conversion Rate</span>
        </button>
      </div>
    </div>

    <!-- Main Analytics Canvas -->
    <div class="studio-canvas-card">
      <div>
        <!-- Contextual Parameter Bar -->
        <div class="studio-params-bar">
          <div>
            <h3 style="font-size: 1.15rem; font-weight: 800; color: #0f172a;" id="studioGraphTitle">Stacked Module Volume Trajectory</h3>
            <div style="font-size: 0.78rem; color: var(--text-muted);" id="studioGraphSubtitle">Language module composition over historical checkpoints (File Ground Truth)</div>
          </div>

          <!-- Dynamic Parameter Controls -->
          <div class="studio-param-group">
            <!-- Pairwise Controls (shown only when pairwise mode is active) -->
            <div id="pairwiseControls" style="display: none; align-items: center; gap: 0.4rem;">
              <span style="font-size: 0.78rem; font-weight: 700; color: #475569;">Lang A:</span>
              <select id="selectLangA" class="studio-select" onchange="onPairwiseLangChange()"></select>
              <span style="font-size: 0.78rem; font-weight: 800; color: var(--primary);">&rarr;</span>
              <span style="font-size: 0.78rem; font-weight: 700; color: #475569;">Lang B:</span>
              <select id="selectLangB" class="studio-select" onchange="onPairwiseLangChange()"></select>
            </div>

            <!-- Metric Selector -->
            <div id="metricControls" style="display: flex; align-items: center; gap: 0.35rem;">
              <span style="font-size: 0.78rem; font-weight: 700; color: #475569;">Metric:</span>
              <select id="selectMetricType" class="studio-select" onchange="onMetricTypeChange(this.value)">
                <option value="files" selected>Files / Modules (Empirical)</option>
                <option value="loc">Estimated Lines of Code (LOC)</option>
                <option value="share">Proportional Share (%)</option>
              </select>
            </div>

            <!-- Scale Toggle -->
            <div id="scaleControls" style="display: flex; align-items: center; gap: 0.35rem;">
              <select id="selectScaleType" class="studio-select" onchange="onScaleTypeChange(this.value)">
                <option value="linear" selected>Linear Scale</option>
                <option value="logarithmic">Log Scale</option>
              </select>
            </div>

            <!-- Export Buttons -->
            <button type="button" class="btn btn-secondary" onclick="exportActiveChartPNG()" style="height: 34px; padding: 0 0.65rem; font-size: 0.78rem;" title="Download PNG Chart">
              PNG
            </button>
            <button type="button" class="btn btn-secondary" onclick="exportCheckpointsCSV()" style="height: 34px; padding: 0 0.65rem; font-size: 0.78rem;" title="Export Milestones CSV">
              CSV
            </button>
          </div>
        </div>

        <!-- Canvas Container -->
        <div id="studioCanvasContainer" style="width: 100%; height: 380px; position: relative;">
          <canvas id="studioMainCanvas"></canvas>
          <div id="studioEmptyState" style="display: none; position: absolute; inset: 0; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: #ffffff; padding: 2rem; border-radius: var(--radius-sm);">
            <div style="font-size: 2.2rem; margin-bottom: 0.5rem;">📊</div>
            <h4 style="font-size: 1.1rem; font-weight: 800; color: #0f172a; margin-bottom: 0.35rem;">Milestone Timeline Not Yet Mined</h4>
            <p style="font-size: 0.85rem; color: var(--text-muted); max-width: 480px; margin: 0 0 1.25rem 0;">
              This repository is cataloged in the research corpus. Run the history command in your CLI to clone, sample 10 milestones, and render full multi-language curves:
            </p>
            <div style="background: #0f172a; color: #38bdf8; padding: 0.55rem 1.15rem; border-radius: 8px; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.45rem;">
              <span style="color: #94a3b8;">$</span> polyglotminer history {{ report.repo_name }}
            </div>
          </div>

          <!-- Dedicated In-Canvas Callout for Physical LOC Deep Dive -->
          <div id="studioLocCallout" style="display: none; position: absolute; inset: 0; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: var(--bg-surface); padding: 2.25rem 2rem; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);">
            <div style="width: 52px; height: 52px; border-radius: 12px; background: rgba(99, 102, 241, 0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 0.85rem;">
              <svg width="26" height="26" fill="none" stroke="var(--primary)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <h4 style="font-size: 1.15rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.35rem;">Physical LOC Scan Required</h4>
            <p style="font-size: 0.84rem; color: var(--text-muted); max-width: 500px; margin: 0 0 1.25rem 0; line-height: 1.5;">
              This trajectory was harvested in <strong>Fast Blobless Tree Mode</strong> (module/file units). To download code blobs and extract physical line-by-line metrics, run the deep scanner:
            </p>
            <div style="background: var(--bg-surface-alt); border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.4rem 0.5rem 0.4rem 1.1rem; display: inline-flex; align-items: center; gap: 0.75rem; box-shadow: var(--shadow-sm); margin-bottom: 1.25rem;">
              <code class="mono" id="cliLocCmdText" style="color: var(--primary); font-size: 0.85rem; font-weight: 700;">polyglotminer history {{ report.repo_name }} --full-loc</code>
              <button type="button" class="btn" id="copyLocCmdBtn" onclick="copyLocCommand()" style="background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 6px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.3rem;">
                <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                <span id="copyLocBtnLabel">Copy</span>
              </button>
            </div>
            <div>
              <button type="button" class="btn btn-primary" onclick="setMetricToFiles()" style="font-size: 0.82rem; padding: 0.45rem 1.15rem; display: inline-flex; align-items: center; gap: 0.45rem;">
                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                Switch Back to Module View (Files)
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Live Contextual Insights Strip -->
      <div class="studio-insights-strip" id="studioInsightsStrip">
        <!-- Dynamically populated -->
      </div>
    </div>
  </div>

  <!-- Interactive Milestone Commit Navigator -->
  <div class="card" id="commitNavigatorCard" style="margin-bottom: 1.75rem; background: #ffffff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm);">
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.85rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 0.75rem;">
      <div style="display: flex; align-items: center; gap: 0.5rem;">
        <div style="font-size: 1.15rem; line-height: 1;">🧭</div>
        <div>
          <h4 style="font-size: 0.95rem; font-weight: 800; color: #0f172a; margin: 0;">Milestone Commit Navigator</h4>
          <div style="font-size: 0.75rem; color: var(--text-muted);">Navigate repository timeline checkpoints and copy commit URLs directly</div>
        </div>
      </div>
      <div style="display: flex; align-items: center; gap: 0.4rem;">
        <button type="button" class="btn btn-secondary" id="navBtnPrev" onclick="navigateMilestone(-1)" style="padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 700;">
          ◀ Prev
        </button>
        <select id="milestoneNavSelect" class="studio-select" onchange="onMilestoneNavSelectChange(this.value)" style="max-width: 340px; font-weight: 600; font-size: 0.8rem;">
          <!-- Populated dynamically with checkpoints -->
        </select>
        <button type="button" class="btn btn-secondary" id="navBtnNext" onclick="navigateMilestone(1)" style="padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 700;">
          Next ▶
        </button>
      </div>
    </div>

    <!-- Active Milestone Display Strip -->
    <div id="activeMilestoneInfo" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
      <!-- Populated dynamically with hash, author, message, and copy buttons -->
    </div>
  </div>

  <!-- Checkpoints Table -->
  <div style="margin-bottom: 3.5rem;">
    <div class="section-title" style="margin-bottom: 1rem;">
      Sampled Checkpoint Milestones
    </div>
    <div class="table-container">
      <table class="data-table" id="checkpointsTable">
        <thead>
          <tr>
            <th>Checkpoint</th>
            <th>Commit</th>
            <th>Date</th>
            <th>Author</th>
            <th style="text-align: right;">Filtered Files</th>
            <th id="thCodeLoc" style="text-align: right;">Filtered Code LOC</th>
            <th>Dominant Languages</th>
            <th>Commit Message</th>
          </tr>
        </thead>
        <tbody id="checkpointsTbody">
          <!-- Dynamically populated -->
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Tab 2: Candidate Migration Commits -->
<div id="tabContentMigration" style="display: none;">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;">
    <div>
      <div class="section-title" style="margin-bottom: 0.2rem;">
        Mined Candidate Migration Commits
      </div>
      <div style="font-size: 0.82rem; color: var(--text-muted);">
        Commits matching file replacements, inverse churn, and language migration intent signals.
      </div>
    </div>
    <div class="search-wrapper">
      <svg class="search-icon" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
      <input type="text" id="candSearchInput" class="search-input" placeholder="Search commit, message, author..." oninput="renderMigrationCandidatesTable()">
    </div>
  </div>

  <!-- Transition Filter Pills -->
  <div id="candFilterPillContainer" style="display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1rem;">
    <!-- Dynamically populated with primary pair and transition pills -->
  </div>

  <div id="migrationCandidatesContainer" style="display: flex; flex-direction: column; gap: 1rem;">
    <!-- Dynamically populated as modern research cards -->
  </div>
</div>

<!-- Tab 3: 2-Commit Diff Inspector -->
<div id="tabContentDiff" style="display: none;">
  <div class="card" style="margin-bottom: 1.5rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
      <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
        <div>
          <label style="display: block; font-size: 0.8rem; font-weight: 700; color: #334155; margin-bottom: 0.25rem;">Base Commit ($A$)</label>
          <div style="display: flex; align-items: center; gap: 0.35rem;">
            <select id="diffBaseSelect" class="select-input" style="min-width: 200px;"></select>
            <button type="button" class="btn-copy-commit" onclick="copyCommitUrlFromSelect('diffBaseSelect', this)" title="Copy Base Commit ($A$) URL">
              <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
              <span>Copy URL</span>
            </button>
          </div>
        </div>
        <div style="font-size: 1.25rem; font-weight: 800; color: var(--text-muted); margin-top: 1.1rem;">&rarr;</div>
        <div>
          <label style="display: block; font-size: 0.8rem; font-weight: 700; color: #334155; margin-bottom: 0.25rem;">Target Commit ($B$)</label>
          <div style="display: flex; align-items: center; gap: 0.35rem;">
            <select id="diffTargetSelect" class="select-input" style="min-width: 200px;"></select>
            <button type="button" class="btn-copy-commit" onclick="copyCommitUrlFromSelect('diffTargetSelect', this)" title="Copy Target Commit ($B$) URL">
              <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
              <span>Copy URL</span>
            </button>
          </div>
        </div>
      </div>
      <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem;">
        <button type="button" class="btn btn-secondary" onclick="copyCompareFromDiffSelectors(this)" title="Copy Compare Diff URL (A...B)" style="display: inline-flex; align-items: center; gap: 0.35rem;">
          <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
          <span>Copy Compare URL</span>
        </button>
        <button type="button" class="btn btn-primary" onclick="inspectSelectedCommitDiff()">
          Inspect Diff
        </button>
      </div>
    </div>
  </div>

  <div id="diffResultContainer" style="display: none;">
    <!-- Rendered via JS -->
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const ACTIVE_REPORT = {{ report_json|safe }};
  let activeStudioChart = null;
  let activeStudioGraphId = 'stacked-loc';
  let currentEvolPreset = 'prog';
  let activeMetricType = 'files'; // 'files', 'loc', 'share'
  let activeScaleType = 'linear'; // 'linear', 'logarithmic'
  let langA = '';
  let langB = '';
  let currentMilestoneIndex = 0;

  if (window.Chart) {
    Chart.defaults.onClick = function(evt, elements) {
      if (elements && elements.length > 0) {
        const idx = elements[0].index;
        if (typeof setMilestoneIndex === 'function' && ACTIVE_REPORT && ACTIVE_REPORT.checkpoints && idx < ACTIVE_REPORT.checkpoints.length) {
          setMilestoneIndex(idx);
        }
      }
    };
  }

  function getCommitUrl(commitHash) {
    if (!commitHash) return '';
    const repoPath = (ACTIVE_REPORT.repo_path || '').trim();
    const repoName = (ACTIVE_REPORT.repo_name || '').trim();
    const urlMeta = (ACTIVE_REPORT.metadata && (ACTIVE_REPORT.metadata.url || ACTIVE_REPORT.metadata.repo_url)) || '';

    if (urlMeta && (urlMeta.startsWith('http://') || urlMeta.startsWith('https://'))) {
      return `${urlMeta.replace(/\.git$/, '')}/commit/${commitHash}`;
    }
    if (repoPath.startsWith('http://') || repoPath.startsWith('https://')) {
      return `${repoPath.replace(/\.git$/, '')}/commit/${commitHash}`;
    }
    if (repoPath.startsWith('git@github.com:')) {
      const slug = repoPath.replace('git@github.com:', '').replace(/\.git$/, '');
      return `https://github.com/${slug}/commit/${commitHash}`;
    }
    if (repoName.includes('/') && !repoName.startsWith('.') && !repoName.startsWith('/') && !repoName.includes('\\')) {
      return `https://github.com/${repoName}/commit/${commitHash}`;
    }
    return commitHash;
  }

  function getCompareUrl(hashA, hashB) {
    if (!hashA || !hashB) return '';
    const repoPath = (ACTIVE_REPORT.repo_path || '').trim();
    const repoName = (ACTIVE_REPORT.repo_name || '').trim();
    const urlMeta = (ACTIVE_REPORT.metadata && (ACTIVE_REPORT.metadata.url || ACTIVE_REPORT.metadata.repo_url)) || '';

    let baseUrl = '';
    if (urlMeta && (urlMeta.startsWith('http://') || urlMeta.startsWith('https://'))) {
      baseUrl = urlMeta.replace(/\.git$/, '');
    } else if (repoPath.startsWith('http://') || repoPath.startsWith('https://')) {
      baseUrl = repoPath.replace(/\.git$/, '');
    } else if (repoPath.startsWith('git@github.com:')) {
      baseUrl = `https://github.com/${repoPath.replace('git@github.com:', '').replace(/\.git$/, '')}`;
    } else if (repoName.includes('/') && !repoName.startsWith('.') && !repoName.startsWith('/') && !repoName.includes('\\')) {
      baseUrl = `https://github.com/${repoName}`;
    }
    if (baseUrl) {
      return `${baseUrl}/compare/${hashA}...${hashB}`;
    }
    return `${hashA}...${hashB}`;
  }

  function copyCommitUrl(commitHash, btnEl) {
    const url = getCommitUrl(commitHash);
    const isWeb = url.startsWith('http://') || url.startsWith('https://');
    const msg = isWeb ? `📋 Copied Commit URL (${commitHash.slice(0, 8)})` : `📋 Copied Commit Hash: ${commitHash}`;
    window.copyTextToClipboard(url, btnEl, msg);
  }

  function copyCompareUrl(hashA, hashB, btnEl) {
    const url = getCompareUrl(hashA, hashB);
    const isWeb = url.startsWith('http://') || url.startsWith('https://');
    const msg = isWeb ? `🔗 Copied Compare URL (${hashA.slice(0, 7)}...${hashB.slice(0, 7)})` : `📋 Copied Range: ${url}`;
    window.copyTextToClipboard(url, btnEl, msg);
  }

  function copyCommitUrlFromSelect(selectId, btnEl) {
    const sel = document.getElementById(selectId);
    if (!sel || !sel.value) return;
    copyCommitUrl(sel.value, btnEl);
  }

  function copyCompareFromDiffSelectors(btnEl) {
    const hashA = document.getElementById('diffBaseSelect')?.value;
    const hashB = document.getElementById('diffTargetSelect')?.value;
    if (!hashA || !hashB) return;
    copyCompareUrl(hashA, hashB, btnEl);
  }

  function populateMilestoneNavigator() {
    const selectEl = document.getElementById('milestoneNavSelect');
    if (!selectEl || !ACTIVE_REPORT || !ACTIVE_REPORT.checkpoints || ACTIVE_REPORT.checkpoints.length === 0) return;

    selectEl.innerHTML = '';
    ACTIVE_REPORT.checkpoints.forEach((cp, idx) => {
      const opt = document.createElement('option');
      opt.value = idx;
      opt.textContent = `Milestone #${idx + 1}: ${cp.percentile}% (#${cp.short_hash}) — ${(cp.commit_date || '').split('T')[0]}`;
      selectEl.appendChild(opt);
    });

    selectEl.value = currentMilestoneIndex;
    renderCurrentMilestoneDetails();
  }

  function setMilestoneIndex(idx) {
    if (!ACTIVE_REPORT || !ACTIVE_REPORT.checkpoints || ACTIVE_REPORT.checkpoints.length === 0) return;
    currentMilestoneIndex = Math.max(0, Math.min(idx, ACTIVE_REPORT.checkpoints.length - 1));
    const selectEl = document.getElementById('milestoneNavSelect');
    if (selectEl) selectEl.value = currentMilestoneIndex;
    renderCurrentMilestoneDetails();
  }

  function navigateMilestone(delta) {
    setMilestoneIndex(currentMilestoneIndex + delta);
  }

  function onMilestoneNavSelectChange(val) {
    setMilestoneIndex(parseInt(val, 10));
  }

  function renderCurrentMilestoneDetails() {
    const container = document.getElementById('activeMilestoneInfo');
    if (!container || !ACTIVE_REPORT || !ACTIVE_REPORT.checkpoints || ACTIVE_REPORT.checkpoints.length === 0) return;

    const total = ACTIVE_REPORT.checkpoints.length;
    const cp = ACTIVE_REPORT.checkpoints[currentMilestoneIndex];
    if (!cp) return;

    const prevBtn = document.getElementById('navBtnPrev');
    const nextBtn = document.getElementById('navBtnNext');
    if (prevBtn) prevBtn.disabled = (currentMilestoneIndex === 0);
    if (nextBtn) nextBtn.disabled = (currentMilestoneIndex === total - 1);

    const commitUrl = getCommitUrl(cp.commit_hash);
    const isWeb = commitUrl.startsWith('http://') || commitUrl.startsWith('https://');

    const colors = ACTIVE_REPORT.language_colors || {};
    const allowed = new Set(getActiveAllowedLanguages());
    const topLangs = Object.entries(cp.language_files || cp.language_loc || {})
      .filter(([l]) => allowed.has(l))
      .sort((a, b) => b[1] - a[1])
      .slice(0, 3)
      .map(([l, v]) => {
        const col = colors[l] || '#94a3b8';
        return `<span class="badge" style="font-size: 0.72rem; padding: 0.15rem 0.45rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; gap: 0.3rem;"><span class="lang-dot" style="background:${col}; width:6px; height:6px;"></span>${l} <strong>${v.toLocaleString()}</strong></span>`;
      }).join(' ');

    container.innerHTML = `
      <div style="display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; flex: 1; min-width: 0;">
        <div style="display: flex; align-items: center; gap: 0.45rem;">
          <span class="badge" style="background: var(--primary-light); color: var(--primary); font-weight: 800; font-size: 0.8rem; padding: 0.25rem 0.6rem;">
            Milestone ${currentMilestoneIndex + 1}/${total} (${cp.percentile}%)
          </span>
          <code class="mono-hash" style="font-size: 0.88rem; font-weight: 700; color: #0f172a; padding: 0.2rem 0.55rem; background: var(--bg-surface-alt); border: 1px solid var(--border-subtle); border-radius: 6px;">#${cp.short_hash}</code>
        </div>
        <div style="font-size: 0.82rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
          <span><strong>${cp.author_name || 'Author'}</strong></span>
          <span>•</span>
          <span class="mono">${(cp.commit_date || '').split('T')[0]}</span>
          ${cp.message ? `<span>•</span> <span style="font-style: italic; color: #334155; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${cp.message}">"${cp.message}"</span>` : ''}
        </div>
        <div style="display: flex; gap: 0.35rem; align-items: center;">
          ${topLangs}
        </div>
      </div>

      <div style="display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0;">
        <button type="button" class="btn btn-primary" onclick="copyCommitUrl('${cp.commit_hash}', this)" style="padding: 0.35rem 0.85rem; font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem;">
          <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
          <span>Copy Commit URL</span>
        </button>
        <button type="button" class="btn btn-secondary" onclick="window.copyTextToClipboard('${cp.commit_hash}', this, '📋 Copied Full SHA: ${cp.commit_hash}')" style="padding: 0.35rem 0.65rem; font-size: 0.8rem; font-weight: 600; font-family: var(--font-mono);" title="Copy Full 40-char SHA Hash">
          Copy SHA
        </button>
        ${isWeb ? `
          <a href="${commitUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="padding: 0.35rem 0.65rem; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem;" title="Open commit in remote repository">
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
            <span>Open</span>
          </a>
        ` : ''}
      </div>
    `;
  }

  function getLanguageCategoryMap() {
    const map = {};
    if (!ACTIVE_REPORT || !ACTIVE_REPORT.checkpoints) return map;
    ACTIVE_REPORT.checkpoints.forEach(cp => {
      if (cp.languages) {
        Object.entries(cp.languages).forEach(([name, stat]) => {
          if (stat.category) map[name] = stat.category;
        });
      }
    });
    return map;
  }

  function getActiveAllowedLanguages() {
    if (!ACTIVE_REPORT) return [];
    const catMap = getLanguageCategoryMap();
    const allLangs = ACTIVE_REPORT.all_languages || [];

    if (currentEvolPreset === 'prog') {
      return allLangs.filter(l => catMap[l] === 'Programming');
    } else if (currentEvolPreset === 'no-data') {
      return allLangs.filter(l => catMap[l] !== 'Data' && catMap[l] !== 'Other');
    } else if (currentEvolPreset === 'all') {
      return allLangs;
    } else {
      try {
        const stored = JSON.parse(localStorage.getItem('polyglotminer_filter_settings') || '{}');
        if (stored.disabled_languages) {
          return allLangs.filter(l => !stored.disabled_languages.includes(l));
        }
      } catch (e) {}
      return allLangs.filter(l => catMap[l] === 'Programming');
    }
  }

  function setEvolutionPreset(preset) {
    currentEvolPreset = preset;
    document.querySelectorAll('.filter-toolbar-btn').forEach(b => b.classList.remove('active'));
    if (preset === 'prog') {
      document.getElementById('evolPresetProg')?.classList.add('active');
      document.getElementById('evolActiveFilterPill').textContent = 'Showing: Programming Languages Only';
    } else if (preset === 'all') {
      document.getElementById('evolPresetAll')?.classList.add('active');
      document.getElementById('evolActiveFilterPill').textContent = 'Showing: All File Types';
    } else if (preset === 'no-data') {
      document.getElementById('evolPresetNoData')?.classList.add('active');
      document.getElementById('evolActiveFilterPill').textContent = 'Showing: Exclude Data (No JSON/Text)';
    }
    populateLanguagePairSelectors();
    renderActiveStudioChart();
    renderCheckpointsTable();
  }

  function switchEvolutionTab(tab) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.getElementById('tabContentTimeline').style.display = 'none';
    document.getElementById('tabContentMigration').style.display = 'none';
    document.getElementById('tabContentDiff').style.display = 'none';

    if (tab === 'timeline') {
      document.getElementById('tabBtnTimeline').classList.add('active');
      document.getElementById('tabContentTimeline').style.display = 'block';
      renderActiveStudioChart();
    } else if (tab === 'migration') {
      document.getElementById('tabBtnMigration').classList.add('active');
      document.getElementById('tabContentMigration').style.display = 'block';
      renderMigrationCandidatesTable();
    } else if (tab === 'diff') {
      document.getElementById('tabBtnDiff').classList.add('active');
      document.getElementById('tabContentDiff').style.display = 'block';
      populateDiffSelectors();
    }
  }

  const repoSlug = (ACTIVE_REPORT.metadata && ACTIVE_REPORT.metadata.slug) || (ACTIVE_REPORT.repo_name || 'repo').replace(/[\/\\]/g, '_');
  const storageKeyGraph = 'pm_graph_' + repoSlug;
  const storageKeyMetric = 'pm_metric_' + repoSlug;
  const storageKeyLangA = 'pm_langA_' + repoSlug;
  const storageKeyLangB = 'pm_langB_' + repoSlug;

  const hasPhysicalLoc = (ACTIVE_REPORT.metadata && (ACTIVE_REPORT.metadata.full_loc === true || ACTIVE_REPORT.metadata.analysis_mode === 'physical_loc')) ||
    (ACTIVE_REPORT.checkpoints && ACTIVE_REPORT.checkpoints.some(c => (c.total_code_lines || 0) > ((c.total_files || 0) * 1.5)));

  // Restore saved state if present
  try {
    const savedGraph = sessionStorage.getItem(storageKeyGraph);
    const savedMetric = sessionStorage.getItem(storageKeyMetric);
    if (savedGraph) activeStudioGraphId = savedGraph;
    if (savedMetric && (savedMetric === 'files' || hasPhysicalLoc)) {
      activeMetricType = savedMetric;
    } else {
      activeMetricType = hasPhysicalLoc ? 'loc' : 'files';
    }
    const metricSel = document.getElementById('selectMetricType');
    if (metricSel) metricSel.value = activeMetricType;
  } catch (e) {}

  function populateLanguagePairSelectors() {
    const selA = document.getElementById('selectLangA');
    const selB = document.getElementById('selectLangB');
    if (!selA || !selB || !ACTIVE_REPORT) return;

    const allowed = getActiveAllowedLanguages();

    selA.innerHTML = '';
    selB.innerHTML = '';

    allowed.forEach(l => {
      const optA = document.createElement('option');
      optA.value = l;
      optA.textContent = l;
      selA.appendChild(optA);

      const optB = document.createElement('option');
      optB.value = l;
      optB.textContent = l;
      selB.appendChild(optB);
    });

    let restored = false;
    try {
      const savedA = sessionStorage.getItem(storageKeyLangA);
      const savedB = sessionStorage.getItem(storageKeyLangB);
      if (savedA && allowed.includes(savedA) && savedB && allowed.includes(savedB) && savedA !== savedB) {
        selA.value = savedA;
        selB.value = savedB;
        restored = true;
      }
    } catch (e) {}

    if (!restored) {
      // Default to primary migration pair if available
      const primary = ACTIVE_REPORT.primary_migration_pair;
      if (primary && allowed.includes(primary.source_language) && allowed.includes(primary.target_language)) {
        selA.value = primary.source_language;
        selB.value = primary.target_language;
      } else if (allowed.length >= 2) {
        selA.value = allowed[0];
        selB.value = allowed[1];
      }
    }

    langA = selA.value;
    langB = selB.value;
  }

  function copyLocCommand() {
    const codeEl = document.getElementById('cliLocCmdText');
    const btnLabel = document.getElementById('copyLocBtnLabel');
    if (!codeEl) return;
    const textToCopy = codeEl.textContent.trim();
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(textToCopy).then(() => {
        if (btnLabel) btnLabel.textContent = 'Copied!';
        setTimeout(() => { if (btnLabel) btnLabel.textContent = 'Copy'; }, 2000);
      }).catch(() => fallbackCopy(textToCopy, btnLabel));
    } else {
      fallbackCopy(textToCopy, btnLabel);
    }
  }

  function fallbackCopy(text, btnLabel) {
    const ta = document.createElement('textarea');
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    try {
      document.execCommand('copy');
      if (btnLabel) btnLabel.textContent = 'Copied!';
      setTimeout(() => { if (btnLabel) btnLabel.textContent = 'Copy'; }, 2000);
    } catch (e) {}
    document.body.removeChild(ta);
  }

  function onPairwiseLangChange() {
    langA = document.getElementById('selectLangA').value;
    langB = document.getElementById('selectLangB').value;
    try {
      sessionStorage.setItem(storageKeyLangA, langA);
      sessionStorage.setItem(storageKeyLangB, langB);
    } catch (e) {}
    renderActiveStudioChart();
  }

  function onMetricTypeChange(val) {
    activeMetricType = val;
    try { sessionStorage.setItem(storageKeyMetric, val); } catch (e) {}
    renderActiveStudioChart();
  }

  function setMetricToFiles() {
    const sel = document.getElementById('selectMetricType');
    if (sel) sel.value = 'files';
    onMetricTypeChange('files');
  }

  function onScaleTypeChange(val) {
    activeScaleType = val;
    renderActiveStudioChart();
  }

  function selectStudioGraph(graphId) {
    activeStudioGraphId = graphId;
    try { sessionStorage.setItem(storageKeyGraph, graphId); } catch (e) {}
    document.querySelectorAll('.studio-nav-item').forEach(i => i.classList.remove('active'));
    document.getElementById(`navItem-${graphId}`)?.classList.add('active');

    const pairwiseControls = document.getElementById('pairwiseControls');
    const metricControls = document.getElementById('metricControls');
    const scaleControls = document.getElementById('scaleControls');

    const isPairwise = graphId.startsWith('pairwise-');
    if (pairwiseControls) pairwiseControls.style.display = isPairwise ? 'flex' : 'none';
    if (metricControls) metricControls.style.display = (graphId === 'stacked-loc' || graphId === 'files-count' || graphId === 'pairwise-dual') ? 'flex' : 'none';
    if (scaleControls) scaleControls.style.display = (graphId !== 'share-100' && graphId !== 'entropy-index') ? 'flex' : 'none';

    renderActiveStudioChart();
  }

  function renderActiveStudioChart() {
    if (!ACTIVE_REPORT) return;
    const ctx = document.getElementById('studioMainCanvas');
    if (!ctx) return;

    if (activeStudioChart) {
      activeStudioChart.destroy();
      activeStudioChart = null;
    }

    const emptyEl = document.getElementById('studioEmptyState');
    const locCalloutEl = document.getElementById('studioLocCallout');
    const insightsEl = document.getElementById('studioInsightsStrip');

    if (!ACTIVE_REPORT.checkpoints || ACTIVE_REPORT.checkpoints.length === 0) {
      if (emptyEl) emptyEl.style.display = 'flex';
      if (locCalloutEl) locCalloutEl.style.display = 'none';
      ctx.style.display = 'none';
      if (insightsEl) {
        insightsEl.innerHTML = `
          <div class="insight-pill" style="border-left: 3px solid #6366f1;">
            <strong>Awaiting Analysis:</strong> Run <code>polyglotminer history ${ACTIVE_REPORT.repo_name}</code> from your CLI to clone and compute milestones.
          </div>
        `;
      }
      return;
    }

    if (activeMetricType === 'loc' && !hasPhysicalLoc) {
      if (locCalloutEl) locCalloutEl.style.display = 'flex';
      if (emptyEl) emptyEl.style.display = 'none';
      ctx.style.display = 'none';
      if (insightsEl) {
        insightsEl.innerHTML = `
          <div>
            <div class="insight-item-title">Analysis Mode</div>
            <div class="insight-item-value" style="color: #6366f1;">Empirical Blobless Tree</div>
          </div>
          <div>
            <div class="insight-item-title">Active Metric</div>
            <div class="insight-item-value">Exact File / Module Units</div>
          </div>
          <div>
            <div class="insight-item-title">Physical Lines of Code</div>
            <div class="insight-item-value" style="color: #d97706;">Deep Scan Required</div>
          </div>
        `;
      }
      return;
    }

    if (locCalloutEl) locCalloutEl.style.display = 'none';
    if (emptyEl) emptyEl.style.display = 'none';
    ctx.style.display = 'block';

    const labels = ACTIVE_REPORT.checkpoints.map(c => `${c.percentile}% (${c.short_hash})`);
    const colors = ACTIVE_REPORT.language_colors || {};
    const allowedLangs = getActiveAllowedLanguages();

    const titleEl = document.getElementById('studioGraphTitle');
    const subEl = document.getElementById('studioGraphSubtitle');

    // 1. Stacked Module Volume Trajectory
    if (activeStudioGraphId === 'stacked-loc') {
      const metricLabel = activeMetricType === 'loc' ? 'LOC' : 'Module / File Units';
      titleEl.textContent = 'Stacked Module Volume Trajectory';
      subEl.textContent = `Cumulative growth and composition across historical checkpoints (${metricLabel})`;

      const datasets = allowedLangs.map(lang => {
        const col = colors[lang] || '#94a3b8';
        const data = ACTIVE_REPORT.checkpoints.map(c => {
          if (activeMetricType === 'loc') return c.language_loc[lang] || 0;
          return (c.language_files && c.language_files[lang]) || c.language_loc[lang] || 0;
        });
        return {
          label: lang,
          data: data,
          backgroundColor: col,
          borderColor: col,
          fill: true,
          tension: 0.35,
          pointRadius: 3,
        };
      });

      activeStudioChart = new Chart(ctx, {
        type: 'line',
        data: { labels, datasets },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: { mode: 'index', intersect: false },
          scales: {
            x: { grid: { display: false } },
            y: { stacked: true, type: activeScaleType, grid: { color: '#f1f5f9' }, ticks: { callback: v => v.toLocaleString() } }
          },
          plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } } }
        }
      });

      // Compute Insights
      const lastCp = ACTIVE_REPORT.checkpoints[ACTIVE_REPORT.checkpoints.length - 1];
      let topLang = 'None', topUnits = 0, totalUnits = 0;
      allowedLangs.forEach(l => {
        const val = activeMetricType === 'loc' ? (lastCp.language_loc[l] || 0) : ((lastCp.language_files && lastCp.language_files[l]) || lastCp.language_loc[l] || 0);
        totalUnits += val;
        if (val > topUnits) { topUnits = val; topLang = l; }
      });

      const unitSuffix = activeMetricType === 'loc' ? 'LOC' : 'Files';
      insightsEl.innerHTML = `
        <div>
          <div class="insight-item-title">Active Filter Codebase Volume</div>
          <div class="insight-item-value">${totalUnits.toLocaleString()} ${unitSuffix}</div>
        </div>
        <div>
          <div class="insight-item-title">Current Dominant Language</div>
          <div class="insight-item-value" style="color:#047857;">${topLang} (${totalUnits > 0 ? ((topUnits / totalUnits) * 100).toFixed(1) : 0}%)</div>
        </div>
        <div>
          <div class="insight-item-title">Sampled Checkpoints</div>
          <div class="insight-item-value">${ACTIVE_REPORT.sampled_commits_count} Milestones</div>
        </div>
      `;
    }

    // 2. 100% Proportional Share Dynamics
    else if (activeStudioGraphId === 'share-100') {
      titleEl.textContent = '100% Normalized Dominance Share Dynamics';
      subEl.textContent = 'Proportional language balance highlighting crossover and inflection points';

      const datasets = allowedLangs.map(lang => {
        const col = colors[lang] || '#94a3b8';
        const data = ACTIVE_REPORT.checkpoints.map(c => {
          const filteredTotal = allowedLangs.reduce((sum, l) => sum + (c.language_loc[l] || 0), 0);
          if (filteredTotal <= 0) return 0;
          return Math.round(((c.language_loc[lang] || 0) / filteredTotal) * 1000) / 10;
        });
        return {
          label: lang,
          data: data,
          backgroundColor: col,
          borderColor: col,
          fill: true,
          tension: 0.35,
          pointRadius: 3,
        };
      });

      activeStudioChart = new Chart(ctx, {
        type: 'line',
        data: { labels, datasets },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: { mode: 'index', intersect: false },
          scales: {
            x: { grid: { display: false } },
            y: { stacked: true, max: 100, grid: { color: '#f1f5f9' }, ticks: { callback: v => `${v}%` } }
          },
          plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } } }
        }
      });

      const inflections = ACTIVE_REPORT.crossover_inflections || [];
      const firstInf = inflections[0];
      const domLang = firstInf ? (firstInf.dominant_language || firstInf.target_language || 'Target') : '';
      const surLang = firstInf ? (firstInf.surpassed_language || firstInf.source_language || 'Source') : '';

      insightsEl.innerHTML = `
        <div>
          <div class="insight-item-title">Detected Crossover Inflections</div>
          <div class="insight-item-value" style="color:#0284c7;">${inflections.length} Points</div>
        </div>
        <div>
          <div class="insight-item-title">Major Crossover Milestone</div>
          <div class="insight-item-value">${firstInf ? `${surLang} &rarr; ${domLang} at ${firstInf.percentile}%` : 'None'}</div>
        </div>
        <div>
          <div class="insight-item-title">Dominance Shift</div>
          <div class="insight-item-value" style="color:#047857;">${firstInf ? `${domLang} overtook ${surLang}` : 'Stable'}</div>
        </div>
      `;
    }

    // 3. File Count Trajectory
    else if (activeStudioGraphId === 'files-count') {
      titleEl.textContent = 'Language File Count Evolution';
      subEl.textContent = 'Number of files per technology across evolutionary checkpoints';

      const datasets = allowedLangs.map(lang => {
        const col = colors[lang] || '#94a3b8';
        const data = ACTIVE_REPORT.checkpoints.map(c => c.language_files[lang] || 0);
        return {
          label: lang,
          data: data,
          borderColor: col,
          backgroundColor: col,
          fill: false,
          tension: 0.3,
          borderWidth: 2.5,
          pointRadius: 4,
        };
      });

      activeStudioChart = new Chart(ctx, {
        type: 'line',
        data: { labels, datasets },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: { mode: 'index', intersect: false },
          scales: {
            x: { grid: { display: false } },
            y: { type: activeScaleType, grid: { color: '#f1f5f9' }, ticks: { callback: v => v.toLocaleString() } }
          },
          plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } } }
        }
      });

      const lastCp = ACTIVE_REPORT.checkpoints[ACTIVE_REPORT.checkpoints.length - 1];
      const totalFiles = allowedLangs.reduce((sum, l) => sum + (lastCp.language_files[l] || 0), 0);
      insightsEl.innerHTML = `
        <div>
          <div class="insight-item-title">Current Filtered Files</div>
          <div class="insight-item-value">${totalFiles.toLocaleString()} Files</div>
        </div>
        <div>
          <div class="insight-item-title">Initial Filtered Files (0%)</div>
          <div class="insight-item-value">${allowedLangs.reduce((sum, l) => sum + (ACTIVE_REPORT.checkpoints[0].language_files[l] || 0), 0).toLocaleString()} Files</div>
        </div>
        <div>
          <div class="insight-item-title">Net File Delta</div>
          <div class="insight-item-value" style="color:#047857;">+${Math.max(0, totalFiles - allowedLangs.reduce((sum, l) => sum + (ACTIVE_REPORT.checkpoints[0].language_files[l] || 0), 0))}</div>
        </div>
      `;
    }

    // 4. Net Churn Velocity (ΔLOC per Milestone)
    else if (activeStudioGraphId === 'churn-velocity') {
      titleEl.textContent = 'Net Churn Velocity (ΔLOC per Milestone)';
      subEl.textContent = 'Additions vs reductions between consecutive checkpoints';

      const stepLabels = [];
      for (let i = 1; i < ACTIVE_REPORT.checkpoints.length; i++) {
        const prev = ACTIVE_REPORT.checkpoints[i-1];
        const curr = ACTIVE_REPORT.checkpoints[i];
        stepLabels.push(`${prev.percentile}% &rarr; ${curr.percentile}%`);
      }

      const datasets = allowedLangs.map(lang => {
        const col = colors[lang] || '#94a3b8';
        const deltas = [];
        for (let i = 1; i < ACTIVE_REPORT.checkpoints.length; i++) {
          const locA = ACTIVE_REPORT.checkpoints[i-1].language_loc[lang] || 0;
          const locB = ACTIVE_REPORT.checkpoints[i].language_loc[lang] || 0;
          deltas.push(locB - locA);
        }
        return {
          label: lang,
          data: deltas,
          backgroundColor: col,
          borderRadius: 4,
        };
      });

      activeStudioChart = new Chart(ctx, {
        type: 'bar',
        data: { labels: stepLabels, datasets },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: { mode: 'index', intersect: false },
          scales: {
            x: { grid: { display: false } },
            y: { grid: { color: '#f1f5f9' }, ticks: { callback: v => v.toLocaleString() } }
          },
          plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } } }
        }
      });

      insightsEl.innerHTML = `
        <div>
          <div class="insight-item-title">Churn Metric Mode</div>
          <div class="insight-item-value">Net ΔLOC per Interval</div>
        </div>
        <div>
          <div class="insight-item-title">Peak Conversion Acceleration</div>
          <div class="insight-item-value" style="color:#047857;">Interval 40% &rarr; 60%</div>
        </div>
        <div>
          <div class="insight-item-title">Migration Signal</div>
          <div class="insight-item-value">Inverse churn detected</div>
        </div>
      `;
    }

    // 5. Pairwise Dual-Axis Comparison (A vs B)
    else if (activeStudioGraphId === 'pairwise-dual') {
      titleEl.textContent = `Pairwise Comparison: ${langA} vs ${langB}`;
      subEl.textContent = 'Direct synchronized comparison of module counts and trajectory';

      const colA = colors[langA] || '#b07219';
      const colB = colors[langB] || '#a97bff';

      const dataA = ACTIVE_REPORT.checkpoints.map(c => activeMetricType === 'loc' ? (c.language_loc[langA] || 0) : ((c.language_files && c.language_files[langA]) || c.language_loc[langA] || 0));
      const dataB = ACTIVE_REPORT.checkpoints.map(c => activeMetricType === 'loc' ? (c.language_loc[langB] || 0) : ((c.language_files && c.language_files[langB]) || c.language_loc[langB] || 0));

      const unitLabel = activeMetricType === 'loc' ? 'LOC' : 'Files';
      activeStudioChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels,
          datasets: [
            {
              label: `${langA} (${unitLabel})`,
              data: dataA,
              borderColor: colA,
              backgroundColor: colA,
              borderWidth: 3,
              fill: false,
              tension: 0.35,
              pointRadius: 5,
            },
            {
              label: `${langB} (${unitLabel})`,
              data: dataB,
              borderColor: colB,
              backgroundColor: colB,
              borderWidth: 3,
              fill: false,
              tension: 0.35,
              pointRadius: 5,
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: { mode: 'index', intersect: false },
          scales: {
            x: { grid: { display: false } },
            y: { type: activeScaleType, grid: { color: '#f1f5f9' }, ticks: { callback: v => v.toLocaleString() } }
          },
          plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 10 } } }
        }
      });

      // Compute True Crossover (Only if Lang A was initially dominant over Lang B)
      let crossPercentile = 'None (Co-Evolution)';
      let initiallyDominant = dataA[0] > dataB[0];
      if (initiallyDominant) {
        for (let i = 1; i < ACTIVE_REPORT.checkpoints.length; i++) {
          if (dataB[i] > dataA[i]) {
            crossPercentile = `${ACTIVE_REPORT.checkpoints[i].percentile}% (${ACTIVE_REPORT.checkpoints[i].short_hash})`;
            break;
          }
        }
      } else if (dataA[0] === 0 && dataB[0] === 0) {
        // Both started at zero
        crossPercentile = 'None (Both Co-Originated)';
      } else {
        crossPercentile = `None (${langB} Dominant From Start)`;
      }

      // Pearson Correlation r
      const n = dataA.length;
      const meanA = dataA.reduce((a,b)=>a+b,0)/n;
      const meanB = dataB.reduce((a,b)=>a+b,0)/n;
      let num = 0, denA = 0, denB = 0;
      for (let i = 0; i < n; i++) {
        const da = dataA[i] - meanA;
        const db = dataB[i] - meanB;
        num += da * db;
        denA += da * da;
        denB += db * db;
      }
      const numR = (denA > 0 && denB > 0) ? (num / Math.sqrt(denA * denB)) : 0;
      const rStr = numR.toFixed(3);

      let correlationLabel = 'Uncorrelated';
      let correlationColor = '#64748b';
      if (numR <= -0.3) {
        correlationLabel = 'Inverse Displacement (Migration)';
        correlationColor = '#dc2626';
      } else if (numR >= 0.3) {
        correlationLabel = 'Co-Growth (Polyglot Expansion)';
        correlationColor = '#2563eb';
      }

      const maxA = Math.max(...dataA, 0);
      const finalA = dataA[n-1] || 0;
      const initialA = dataA[0] || 0;
      const contractionA = maxA > 0 ? ((maxA - finalA) / maxA) * 100 : 0;
      
      const maxB = Math.max(...dataB, 0);
      const finalB = dataB[n-1] || 0;
      const initialB = dataB[0] || 0;

      let patternVerdict = 'Heterogeneous Interop (Co-Existence)';
      let patternColor = '#64748b';

      // 1. Authoritative check against verified primary migration pair from backend
      const primary = ACTIVE_REPORT.primary_migration_pair;
      const isPrimaryPair = primary && primary.source_language === langA && primary.target_language === langB;
      const hasCrossover = crossPercentile && !crossPercentile.includes('None');

      if (isPrimaryPair && primary.archetype) {
        patternVerdict = primary.archetype;
        patternColor = '#047857';
      } else if (numR <= -0.25 || (contractionA >= 25 && finalB > initialB) || (hasCrossover && contractionA >= 20)) {
        // Check if there were file replacements between these two languages in migration candidates
        const hasReplacements = (ACTIVE_REPORT.migration_candidates || []).some(m => 
          (m.source_language === langA && m.target_language === langB && (m.file_replacements || []).length > 0)
        );
        if (hasReplacements) {
          patternVerdict = 'Direct File Replacement';
        } else {
          patternVerdict = 'Incremental Migration (Displacement)';
        }
        patternColor = '#047857';
      } else if (numR >= 0.25 && finalA > initialA && finalB > initialB && contractionA < 20) {
        patternVerdict = 'Polyglot Co-Growth (Expansion)';
        patternColor = '#2563eb';
      } else if (numR <= -0.25 && finalB < initialB) {
        patternVerdict = 'Inverse Deprecation';
        patternColor = '#dc2626';
      }

      insightsEl.innerHTML = `
        <div>
          <div class="insight-item-title">Crossover Inflection (${langB} > ${langA})</div>
          <div class="insight-item-value" style="color:${crossPercentile.includes('None') ? '#64748b' : '#047857'};">${crossPercentile}</div>
        </div>
        <div>
          <div class="insight-item-title">Trajectory Correlation (r)</div>
          <div class="insight-item-value" style="color:${correlationColor};">${rStr} <span style="font-size:0.75rem; font-weight:600;">(${correlationLabel})</span></div>
        </div>
        <div>
          <div class="insight-item-title">Trajectory Pattern</div>
          <div class="insight-item-value" style="color:${patternColor};">${patternVerdict}</div>
        </div>
      `;
    }

    // 6. Pairwise Replacement & Divergence Curve (B - A)
    else if (activeStudioGraphId === 'pairwise-divergence') {
      const unitLabel = activeMetricType === 'loc' ? 'LOC' : 'Files';
      titleEl.textContent = `Replacement & Net Divergence: (${langB} - ${langA})`;
      subEl.textContent = `Net advantage delta over time: crossing 0 marks the crossover point (${unitLabel})`;

      const deltas = ACTIVE_REPORT.checkpoints.map(c => {
        const a = activeMetricType === 'loc' ? (c.language_loc[langA] || 0) : ((c.language_files && c.language_files[langA]) || c.language_loc[langA] || 0);
        const b = activeMetricType === 'loc' ? (c.language_loc[langB] || 0) : ((c.language_files && c.language_files[langB]) || c.language_loc[langB] || 0);
        return b - a;
      });

      const backgroundColors = deltas.map(d => d >= 0 ? '#10b981' : '#f43f5e');

      activeStudioChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels,
          datasets: [{
            label: `Net Advantage (${langB} - ${langA} ${unitLabel})`,
            data: deltas,
            backgroundColor: backgroundColors,
            borderRadius: 4,
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            x: { grid: { display: false } },
            y: { grid: { color: '#f1f5f9' }, ticks: { callback: v => (v > 0 ? `+${v.toLocaleString()}` : v.toLocaleString()) } }
          },
          plugins: { legend: { display: false } }
        }
      });

      const finalDelta = deltas[deltas.length - 1];
      insightsEl.innerHTML = `
        <div>
          <div class="insight-item-title">Final Migration Lead</div>
          <div class="insight-item-value" style="color:${finalDelta >= 0 ? '#047857' : '#dc2626'};">${finalDelta >= 0 ? `+${finalDelta.toLocaleString()}` : finalDelta.toLocaleString()} ${unitLabel}</div>
        </div>
        <div>
          <div class="insight-item-title">Zero-Axis Crossing</div>
          <div class="insight-item-value">Inflection Milestone reached</div>
        </div>
        <div>
          <div class="insight-item-title">Migration Status</div>
          <div class="insight-item-value" style="color:#047857;">${finalDelta > 0 ? 'Target Dominant' : 'Source Dominant'}</div>
        </div>
      `;
    }

    // 7. Phase-Space Trajectory (A vs B)
    else if (activeStudioGraphId === 'pairwise-phasespace') {
      titleEl.textContent = `Phase-Space Trajectory: (${langA} LOC vs ${langB} LOC)`;
      subEl.textContent = 'Parametric state evolution: trajectory moves from (High A, 0 B) towards (0 A, High B)';

      const scatterData = ACTIVE_REPORT.checkpoints.map(c => ({
        x: c.language_loc[langA] || 0,
        y: c.language_loc[langB] || 0,
        percentile: c.percentile,
        hash: c.short_hash,
      }));

      activeStudioChart = new Chart(ctx, {
        type: 'scatter',
        data: {
          datasets: [{
            label: `State Evolution Trajectory (${langA} &rarr; ${langB})`,
            data: scatterData,
            borderColor: '#2563eb',
            backgroundColor: '#3b82f6',
            showLine: true,
            tension: 0.25,
            borderWidth: 3,
            pointRadius: 6,
            pointHoverRadius: 8,
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            x: { title: { display: true, text: `${langA} Volume (LOC)` }, grid: { color: '#f1f5f9' }, ticks: { callback: v => v.toLocaleString() } },
            y: { title: { display: true, text: `${langB} Volume (LOC)` }, grid: { color: '#f1f5f9' }, ticks: { callback: v => v.toLocaleString() } }
          },
          plugins: {
            tooltip: {
              callbacks: {
                label: (ctx) => {
                  const raw = ctx.raw;
                  return `${raw.percentile}% (${raw.hash}): ${langA}=${raw.x.toLocaleString()} LOC, ${langB}=${raw.y.toLocaleString()} LOC`;
                }
              }
            }
          }
        }
      });

      insightsEl.innerHTML = `
        <div>
          <div class="insight-item-title">State Vector Direction</div>
          <div class="insight-item-value" style="color:#047857;">&rarr; Migration Attractor</div>
        </div>
        <div>
          <div class="insight-item-title">Phase Start (0%)</div>
          <div class="insight-item-value">(${scatterData[0].x.toLocaleString()}, ${scatterData[0].y.toLocaleString()})</div>
        </div>
        <div>
          <div class="insight-item-title">Phase End (100%)</div>
          <div class="insight-item-value">(${scatterData[scatterData.length-1].x.toLocaleString()}, ${scatterData[scatterData.length-1].y.toLocaleString()})</div>
        </div>
      `;
    }

    // 8. Shannon Diversity Index (H)
    else if (activeStudioGraphId === 'entropy-index') {
      titleEl.textContent = 'Codebase Shannon Entropy Diversity Index (H)';
      subEl.textContent = 'Information entropy: high H = multi-language fragmentation; low H = unified codebase';

      const entropyData = ACTIVE_REPORT.checkpoints.map(c => {
        const total = allowedLangs.reduce((sum, l) => sum + (c.language_loc[l] || 0), 0);
        if (total <= 0) return 0;
        let h = 0;
        allowedLangs.forEach(l => {
          const p = (c.language_loc[l] || 0) / total;
          if (p > 0) h -= p * Math.log2(p);
        });
        return Math.round(h * 1000) / 1000;
      });

      activeStudioChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels,
          datasets: [{
            label: 'Shannon Entropy H (bits)',
            data: entropyData,
            borderColor: '#7c3aed',
            backgroundColor: 'rgba(124, 58, 237, 0.12)',
            fill: true,
            tension: 0.35,
            borderWidth: 3,
            pointRadius: 4,
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            x: { grid: { display: false } },
            y: { title: { display: true, text: 'Entropy H (bits)' }, grid: { color: '#f1f5f9' }, min: 0 }
          }
        }
      });

      const currentH = entropyData[entropyData.length - 1];
      const maxH = Math.max(...entropyData);
      insightsEl.innerHTML = `
        <div>
          <div class="insight-item-title">Current Shannon Entropy</div>
          <div class="insight-item-value" style="color:#7c3aed;">${currentH} bits</div>
        </div>
        <div>
          <div class="insight-item-title">Peak Entropy (Maximum Fragmentation)</div>
          <div class="insight-item-value">${maxH} bits (during transition)</div>
        </div>
        <div>
          <div class="insight-item-title">Current State</div>
          <div class="insight-item-value" style="color:#047857;">${currentH < 0.6 ? 'Consolidated on Target' : 'Multi-Language Ecosystem'}</div>
        </div>
      `;
    }

    // 9. Migration Conversion Rate
    else if (activeStudioGraphId === 'conversion-rate') {
      titleEl.textContent = 'Migration Conversion Velocity';
      subEl.textContent = 'Rate of target code adoption per 100 historical commits';

      const stepLabels = [];
      const conversionRates = [];
      for (let i = 1; i < ACTIVE_REPORT.checkpoints.length; i++) {
        const prev = ACTIVE_REPORT.checkpoints[i-1];
        const curr = ACTIVE_REPORT.checkpoints[i];
        stepLabels.push(`${prev.percentile}% &rarr; ${curr.percentile}%`);

        const locB_prev = prev.language_loc[langB] || 0;
        const locB_curr = curr.language_loc[langB] || 0;
        const delta = Math.max(0, locB_curr - locB_prev);
        conversionRates.push(delta);
      }

      activeStudioChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: stepLabels,
          datasets: [{
            label: `New ${langB} LOC Added per Interval`,
            data: conversionRates,
            backgroundColor: '#3b82f6',
            borderRadius: 4,
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            x: { grid: { display: false } },
            y: { grid: { color: '#f1f5f9' }, ticks: { callback: v => v.toLocaleString() } }
          }
        }
      });

      const maxRate = Math.max(...conversionRates);
      insightsEl.innerHTML = `
        <div>
          <div class="insight-item-title">Peak Conversion Surge</div>
          <div class="insight-item-value" style="color:#047857;">+${maxRate.toLocaleString()} LOC / interval</div>
        </div>
        <div>
          <div class="insight-item-title">Target Language</div>
          <div class="insight-item-value">${langB}</div>
        </div>
        <div>
          <div class="insight-item-title">Momentum</div>
          <div class="insight-item-value">Active Acceleration Phase</div>
        </div>
      `;
    }
  }

  function exportActiveChartPNG() {
    if (!activeStudioChart) return;
    const a = document.createElement('a');
    a.href = activeStudioChart.toBase64Image('image/png', 1.0);
    a.download = `${ACTIVE_REPORT.repo_name}_${activeStudioGraphId}.png`;
    a.click();
  }

  function exportCheckpointsCSV() {
    if (!ACTIVE_REPORT || !ACTIVE_REPORT.checkpoints) return;
    const allowed = getActiveAllowedLanguages();
    let csv = 'Checkpoint,Percentile,Commit,Date,Author,' + allowed.join(',') + '\n';

    ACTIVE_REPORT.checkpoints.forEach((cp, idx) => {
      const row = [
        `Checkpoint ${idx + 1}`,
        `${cp.percentile}%`,
        cp.short_hash,
        cp.commit_date.split('T')[0],
        `"${cp.author_name.replace(/"/g, '""')}"`,
        ...allowed.map(l => cp.language_loc[l] || 0)
      ];
      csv += row.join(',') + '\n';
    });

    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${ACTIVE_REPORT.repo_name}_evolution_milestones.csv`;
    a.click();
  }

  function toggleReplacementAccordion(commitHash) {
    const el = document.getElementById(`more-files-${commitHash}`);
    const btn = document.getElementById(`btn-more-${commitHash}`);
    if (!el || !btn) return;
    if (el.style.display === 'none') {
      el.style.display = 'flex';
      btn.textContent = 'Hide extra files ▲';
    } else {
      el.style.display = 'none';
      btn.textContent = `+${el.dataset.count} more file replacements ▼`;
    }
  }

  function toggleChangesAccordion(commitHash) {
    const el = document.getElementById(`more-changes-${commitHash}`);
    const btn = document.getElementById(`btn-more-chg-${commitHash}`);
    if (!el || !btn) return;
    if (el.style.display === 'none') {
      el.style.display = 'flex';
      btn.textContent = 'Hide extra files ▲';
    } else {
      el.style.display = 'none';
      btn.textContent = `+${el.dataset.count} more modified files ▼`;
    }
  }

  let activeCandPairFilter = 'primary'; // 'primary' | 'all' | '<src> -> <tgt>'

  function setCandPairFilter(filterVal) {
    activeCandPairFilter = filterVal;
    renderMigrationCandidatesTable();
  }

  function renderMigrationCandidatesTable() {
    const container = document.getElementById('migrationCandidatesContainer');
    if (!container || !ACTIVE_REPORT) return;
    container.innerHTML = '';

    const prim = ACTIVE_REPORT.primary_migration_pair;
    const primKey = prim ? `${prim.source_language} -> ${prim.target_language}` : null;
    const allCands = ACTIVE_REPORT.migration_candidates || [];

    // Dynamically render transition filter pills
    const pillContainer = document.getElementById('candFilterPillContainer');
    if (pillContainer) {
      const pairCounts = {};
      allCands.forEach(c => {
        const k = `${c.source_language} -> ${c.target_language}`;
        pairCounts[k] = (pairCounts[k] || 0) + 1;
      });

      let pillsHtml = '';
      if (primKey && pairCounts[primKey]) {
        const isPrimActive = activeCandPairFilter === 'primary' || activeCandPairFilter === primKey;
        pillsHtml += `
          <button type="button" onclick="setCandPairFilter('primary')" class="btn ${isPrimActive ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto;">
            ★ Primary: ${primKey} (${pairCounts[primKey]})
          </button>
        `;
      }
      const isAllActive = activeCandPairFilter === 'all' || (!primKey && activeCandPairFilter === 'primary');
      pillsHtml += `
        <button type="button" onclick="setCandPairFilter('all')" class="btn ${isAllActive ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto;">
          All Transitions (${allCands.length})
        </button>
      `;

      Object.keys(pairCounts).forEach(k => {
        if (k !== primKey) {
          const isThisActive = activeCandPairFilter === k;
          pillsHtml += `
            <button type="button" onclick="setCandPairFilter('${k}')" class="btn ${isThisActive ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto;">
              ${k} (${pairCounts[k]})
            </button>
          `;
        }
      });
      pillContainer.innerHTML = pillsHtml;
    }

    const query = (document.getElementById('candSearchInput')?.value || '').toLowerCase().trim();
    const candidates = allCands.filter(c => {
      const pairKey = `${c.source_language} -> ${c.target_language}`;
      if (activeCandPairFilter === 'primary' && primKey) {
        if (pairKey !== primKey) return false;
      } else if (activeCandPairFilter !== 'all' && activeCandPairFilter !== 'primary') {
        if (pairKey !== activeCandPairFilter) return false;
      }
      return !query || c.message.toLowerCase().includes(query) || c.author.toLowerCase().includes(query) || c.short_hash.toLowerCase().includes(query);
    });

    if (candidates.length === 0) {
      container.innerHTML = `
        <div class="card" style="text-align: center; padding: 3rem 1.5rem; color: var(--text-muted);">
          <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🔍</div>
          <div style="font-weight: 700; font-size: 1rem; color: #0f172a; margin-bottom: 0.25rem;">No Candidate Migration Commits Found</div>
          <div style="font-size: 0.84rem;">Try adjusting your search or transition filter above.</div>
        </div>
      `;
      return;
    }

    candidates.forEach(cand => {
      const card = document.createElement('div');
      card.className = 'migration-commit-card';

      let filesHtml = '';
      const pairs = cand.replacement_pairs || [];
      const fileChanges = cand.file_changes || [];

      if (pairs.length > 0) {
        const initialPairs = pairs.slice(0, 3);
        const hiddenPairs = pairs.slice(3);

        const renderPairRow = (p) => {
          const srcParts = p.source_file.split('/');
          const srcBase = srcParts.pop();
          const srcDir = srcParts.length ? srcParts.join('/') + '/' : '';

          const tgtParts = p.target_file.split('/');
          const tgtBase = tgtParts.pop();
          const tgtDir = tgtParts.length ? tgtParts.join('/') + '/' : '';

          return `
            <div class="file-pair-row">
              <div style="display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0;">
                <div class="file-src">
                  <span style="color: #991b1b; font-weight: 800;">-</span>
                  <span style="color: #94a3b8; font-weight: 400;">${srcDir}</span>
                  <span style="font-weight: 700; color: #991b1b;">${srcBase}</span>
                </div>
                <span style="color: #94a3b8; font-weight: 800; font-size: 0.85rem; padding: 0 0.2rem;">&rarr;</span>
                <div class="file-tgt">
                  <span style="color: #166534; font-weight: 800;">+</span>
                  <span style="color: #94a3b8; font-weight: 400;">${tgtDir}</span>
                  <span style="font-weight: 700; color: #166534;">${tgtBase}</span>
                </div>
              </div>
              <span class="badge" style="font-size: 0.68rem; font-family: var(--font-main); background: #ffffff; border: 1px solid #e2e8f0; color: #475569;">
                ${p.match_type.replace(/_/g, ' ')}
              </span>
            </div>
          `;
        };

        let hiddenBlock = '';
        let toggleBtn = '';
        if (hiddenPairs.length > 0) {
          hiddenBlock = `
            <div id="more-files-${cand.short_hash}" data-count="${hiddenPairs.length}" style="display: none; flex-direction: column; gap: 0.45rem; margin-top: 0.45rem;">
              ${hiddenPairs.map(renderPairRow).join('')}
            </div>
          `;
          toggleBtn = `
            <button type="button" id="btn-more-${cand.short_hash}" onclick="toggleReplacementAccordion('${cand.short_hash}')" class="btn btn-secondary" style="align-self: flex-start; font-size: 0.72rem; padding: 0.25rem 0.65rem; height: auto; margin-top: 0.35rem;">
              +${hiddenPairs.length} more file replacements ▼
            </button>
          `;
        }

        filesHtml = `
          <div class="replacements-box">
            <div style="font-size: 0.72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.35rem;">
              Direct File Replacements (${pairs.length} files)
            </div>
            ${initialPairs.map(renderPairRow).join('')}
            ${hiddenBlock}
            ${toggleBtn}
          </div>
        `;
      } else if (fileChanges.length > 0) {
        const initialFiles = fileChanges.slice(0, 5);
        const hiddenFiles = fileChanges.slice(5);

        const renderFileRow = (fc) => {
          const parts = fc.path.split('/');
          const baseName = parts.pop();
          const dirPath = parts.length ? parts.join('/') + '/' : '';

          let badgeHtml = '';
          let nameColor = '#334155';
          if (fc.status === 'deleted') {
            badgeHtml = `<span style="background: #fee2e2; color: #991b1b; padding: 0.15rem 0.45rem; border-radius: 4px; font-weight: 700; font-size: 0.72rem;">Deleted</span>`;
            nameColor = '#991b1b';
          } else if (fc.status === 'added') {
            badgeHtml = `<span style="background: #dcfce7; color: #166534; padding: 0.15rem 0.45rem; border-radius: 4px; font-weight: 700; font-size: 0.72rem;">Added</span>`;
            nameColor = '#166534';
          } else if (fc.status === 'renamed') {
            badgeHtml = `<span style="background: #e0e7ff; color: #4338ca; padding: 0.15rem 0.45rem; border-radius: 4px; font-weight: 700; font-size: 0.72rem;">Replaced</span>`;
            nameColor = '#4338ca';
          } else {
            badgeHtml = `<span style="background: #f1f5f9; color: #475569; padding: 0.15rem 0.45rem; border-radius: 4px; font-weight: 600; font-size: 0.72rem;">Modified</span>`;
          }

          return `
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.65rem; background: #ffffff; border: 1px solid #f1f5f9; border-radius: 6px; font-size: 0.78rem; font-family: var(--font-mono);">
              <div style="display: flex; align-items: center; gap: 0.45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                <span class="badge" style="font-size: 0.65rem; padding: 0.05rem 0.35rem; background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; font-family: var(--font-main);">${fc.language}</span>
                <span style="color: #94a3b8;">${dirPath}</span>
                <span style="font-weight: 700; color: ${nameColor};">${baseName}</span>
              </div>
              <div>${badgeHtml}</div>
            </div>
          `;
        };

        let hiddenBlock = '';
        let toggleBtn = '';
        if (hiddenFiles.length > 0) {
          hiddenBlock = `
            <div id="more-changes-${cand.short_hash}" data-count="${hiddenFiles.length}" style="display: none; flex-direction: column; gap: 0.35rem; margin-top: 0.35rem;">
              ${hiddenFiles.map(renderFileRow).join('')}
            </div>
          `;
          toggleBtn = `
            <button type="button" id="btn-more-chg-${cand.short_hash}" onclick="toggleChangesAccordion('${cand.short_hash}')" class="btn btn-secondary" style="align-self: flex-start; font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; margin-top: 0.35rem;">
              +${hiddenFiles.length} more modified files ▼
            </button>
          `;
        }

        filesHtml = `
          <div class="replacements-box" style="background: #fafafa; border-color: #e2e8f0;">
            <div style="font-size: 0.72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.35rem;">
              Touched Multi-Language Files (${fileChanges.length} files)
            </div>
            <div style="display: flex; flex-direction: column; gap: 0.35rem;">
              ${initialFiles.map(renderFileRow).join('')}
              ${hiddenBlock}
              ${toggleBtn}
            </div>
          </div>
        `;
      }

      const candUrl = getCommitUrl(cand.commit_hash);
      const isWebUrl = candUrl.startsWith('http://') || candUrl.startsWith('https://');
      const extLinkHtml = isWebUrl 
        ? `<a href="${candUrl}" target="_blank" rel="noopener noreferrer" class="btn-commit-ext" title="Open commit in remote repository">↗</a>` 
        : '';

      card.innerHTML = `
        <div class="migration-card-header">
          <div style="display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;">
            <code class="mono-hash">#${cand.short_hash}</code>
            <button type="button" class="btn-copy-commit" onclick="copyCommitUrl('${cand.commit_hash}', this)" title="Copy commit URL to clipboard">
              <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
              <span>Copy URL</span>
            </button>
            <button type="button" class="btn-copy-commit" onclick="window.copyTextToClipboard('${cand.commit_hash}', this, '📋 Copied SHA: ${cand.commit_hash}')" title="Copy full 40-character SHA" style="font-family: var(--font-mono); font-size: 0.7rem; padding: 0.15rem 0.4rem;">
              SHA
            </button>
            ${extLinkHtml}
            <span class="trans-pill">${cand.source_language} &rarr; ${cand.target_language}</span>
          </div>
          <div style="display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.8rem;">
            <span><strong style="color: #1e293b;">${cand.author}</strong></span>
            <span>•</span>
            <span class="mono">${cand.commit_date.replace('T', ' ').split('.')[0]}</span>
          </div>
        </div>

        <div>
          <div class="migration-message">${cand.message}</div>
          <div class="migration-signals" style="margin-bottom: 0.5rem;">
            ${cand.matched_signals.map(s => `<span class="signal-badge">✓ ${s}</span>`).join('')}
          </div>
          ${filesHtml}
        </div>
      `;

      container.appendChild(card);
    });
  }

  function populateDiffSelectors() {
    if (!ACTIVE_REPORT || !ACTIVE_REPORT.checkpoints) return;
    const baseSel = document.getElementById('diffBaseSelect');
    const tgtSel = document.getElementById('diffTargetSelect');
    if (!baseSel || !tgtSel) return;

    baseSel.innerHTML = '';
    tgtSel.innerHTML = '';

    ACTIVE_REPORT.checkpoints.forEach((cp) => {
      const optA = document.createElement('option');
      optA.value = cp.commit_hash;
      optA.textContent = `${cp.percentile}% (${cp.short_hash}) — ${cp.commit_date.split('T')[0]}`;
      baseSel.appendChild(optA);

      const optB = document.createElement('option');
      optB.value = cp.commit_hash;
      optB.textContent = `${cp.percentile}% (${cp.short_hash}) — ${cp.commit_date.split('T')[0]}`;
      tgtSel.appendChild(optB);
    });

    if (ACTIVE_REPORT.checkpoints.length >= 2) {
      baseSel.selectedIndex = 0;
      tgtSel.selectedIndex = ACTIVE_REPORT.checkpoints.length - 1;
    }
  }

  function inspectSelectedCommitDiff() {
    const baseHash = document.getElementById('diffBaseSelect').value;
    const tgtHash = document.getElementById('diffTargetSelect').value;
    if (!baseHash || !tgtHash) return;

    const cpA = ACTIVE_REPORT.checkpoints.find(c => c.commit_hash === baseHash);
    const cpB = ACTIVE_REPORT.checkpoints.find(c => c.commit_hash === tgtHash);
    if (!cpA || !cpB) return;

    const allowedLangs = new Set(getActiveAllowedLanguages());
    const res = document.getElementById('diffResultContainer');
    res.style.display = 'block';

    let netLocDelta = 0;
    let netFilesDelta = 0;
    let rowsHtml = '';

    ACTIVE_REPORT.all_languages.forEach(lang => {
      if (!allowedLangs.has(lang)) return;

      const locA = cpA.language_loc[lang] || 0;
      const locB = cpB.language_loc[lang] || 0;
      const dLoc = locB - locA;

      const fA = cpA.language_files[lang] || 0;
      const fB = cpB.language_files[lang] || 0;
      const dF = fB - fA;

      netLocDelta += dLoc;
      netFilesDelta += dF;

      if (locA > 0 || locB > 0) {
        const col = (ACTIVE_REPORT.language_colors && ACTIVE_REPORT.language_colors[lang]) || '#94a3b8';
        const dLocFormatted = dLoc > 0 ? `+${dLoc.toLocaleString()}` : (dLoc < 0 ? dLoc.toLocaleString() : '0');
        const dLocColor = dLoc > 0 ? '#16a34a' : (dLoc < 0 ? '#dc2626' : 'var(--text-muted)');

        rowsHtml += `
          <tr>
            <td><span class="lang-dot" style="background:${col}"></span><strong>${lang}</strong></td>
            <td style="text-align:right;">${locA.toLocaleString()}</td>
            <td style="text-align:right;">${locB.toLocaleString()}</td>
            <td style="text-align:right; font-weight:700; color:${dLocColor};">${dLocFormatted}</td>
            <td style="text-align:right;">${fA}</td>
            <td style="text-align:right;">${fB}</td>
            <td style="text-align:right; font-weight:600;">${dF > 0 ? `+${dF}` : dF}</td>
          </tr>
        `;
      }
    });

    const compareUrl = getCompareUrl(cpA.commit_hash, cpB.commit_hash);
    const isCompareWeb = compareUrl.startsWith('http://') || compareUrl.startsWith('https://');

    res.innerHTML = `
      <div class="card" style="margin-top:1.5rem;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:0.75rem;">
          <div>
            <h3 style="font-size:1.1rem; font-weight:800; color:#0f172a; margin-bottom:0.4rem; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;">
              <span>Delta:</span>
              <code class="mono-hash">#${cpA.short_hash}</code> (${cpA.percentile}%)
              <button type="button" class="btn-copy-commit" onclick="copyCommitUrl('${cpA.commit_hash}', this)" title="Copy Base Commit ($A$) URL">
                <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                <span>Copy A</span>
              </button>
              <span>&rarr;</span>
              <code class="mono-hash">#${cpB.short_hash}</code> (${cpB.percentile}%)
              <button type="button" class="btn-copy-commit" onclick="copyCommitUrl('${cpB.commit_hash}', this)" title="Copy Target Commit ($B$) URL">
                <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                <span>Copy B</span>
              </button>
            </h3>
            <div style="display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap;">
              <button type="button" class="btn-copy-commit" onclick="copyCompareUrl('${cpA.commit_hash}', '${cpB.commit_hash}', this)" style="font-size:0.75rem; padding:0.25rem 0.6rem; color:var(--primary); font-weight:700;">
                <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
                <span>Copy Compare URL (${cpA.short_hash}...${cpB.short_hash})</span>
              </button>
              ${isCompareWeb ? `
                <a href="${compareUrl}" target="_blank" rel="noopener noreferrer" class="btn-commit-ext" style="font-size:0.75rem; padding:0.25rem 0.5rem;" title="Open GitHub / GitLab Compare View">
                  ↗ Open in GitHub
                </a>
              ` : ''}
            </div>
          </div>
          <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
            <span class="badge" style="font-weight:700;">Filtered Net LOC: <strong style="color:${netLocDelta >= 0 ? '#16a34a' : '#dc2626'};">${netLocDelta >= 0 ? `+${netLocDelta.toLocaleString()}` : netLocDelta.toLocaleString()}</strong></span>
            <span class="badge" style="font-weight:700;">Filtered Net Files: <strong>${netFilesDelta >= 0 ? `+${netFilesDelta}` : netFilesDelta}</strong></span>
          </div>
        </div>

        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th>Language</th>
                <th style="text-align:right;">Base LOC (${cpA.short_hash})</th>
                <th style="text-align:right;">Target LOC (${cpB.short_hash})</th>
                <th style="text-align:right;">Net LOC Delta</th>
                <th style="text-align:right;">Base Files</th>
                <th style="text-align:right;">Target Files</th>
                <th style="text-align:right;">Net Files Delta</th>
              </tr>
            </thead>
            <tbody>
              ${rowsHtml || '<tr><td colspan="7" style="text-align:center; color:var(--text-muted);">No changes in active filtered languages.</td></tr>'}
            </tbody>
          </table>
        </div>
      </div>
    `;
  }

  // Filter modal functions
  function openFilterModal() {
    renderEvolutionModalChecklist();
    const modal = document.getElementById('filterModal');
    if (modal) modal.style.display = 'flex';
  }

  function closeFilterModal() {
    const modal = document.getElementById('filterModal');
    if (modal) modal.style.display = 'none';
  }

  function renderEvolutionModalChecklist() {
    const container = document.getElementById('modalFilterBody');
    if (!container || !ACTIVE_REPORT) return;
    container.innerHTML = '';

    const catMap = getLanguageCategoryMap();
    const allLangs = ACTIVE_REPORT.all_languages || [];
    const colors = ACTIVE_REPORT.language_colors || {};
    const allowed = new Set(getActiveAllowedLanguages());

    const categories = ['Programming', 'Data', 'Markup', 'Config', 'Other'];
    const grouped = {};
    categories.forEach(c => grouped[c] = []);

    allLangs.forEach(l => {
      const cat = catMap[l] || 'Other';
      if (!grouped[cat]) grouped[cat] = [];
      grouped[cat].push(l);
    });

    categories.forEach(cat => {
      const langs = grouped[cat];
      if (!langs || langs.length === 0) return;

      const groupEl = document.createElement('div');
      groupEl.className = 'category-group';

      const allEnabled = langs.every(l => allowed.has(l));
      const catEmoji = cat === 'Programming' ? '💻' : (cat === 'Data' ? '🗄️' : (cat === 'Markup' ? '🎨' : '⚙️'));

      groupEl.innerHTML = `
        <div class="category-group-header" onclick="toggleCategoryGroup('${cat}')">
          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin: 0;" onclick="event.stopPropagation()">
            <input type="checkbox" id="cat-chk-${cat}" ${allEnabled ? 'checked' : ''} onchange="onCategoryCheckboxChange('${cat}', this.checked)">
            <span style="font-weight: 700; font-size: 0.88rem; color: #0f172a;">${catEmoji} ${cat}</span>
            <span class="badge" style="font-size: 0.7rem;">${langs.length} file type${langs.length > 1 ? 's' : ''}</span>
          </label>
          <span style="font-size: 0.78rem; color: var(--text-muted);">Click to toggle all</span>
        </div>
        <div class="lang-checkbox-grid" id="grid-${cat}">
          ${langs.map(l => `
            <label class="lang-item-label">
              <input type="checkbox" class="lang-chk" data-lang="${l}" data-cat="${cat}" ${allowed.has(l) ? 'checked' : ''} onchange="onSingleLangCheckboxChange()">
              <span class="lang-dot" style="background-color: ${colors[l] || '#94a3b8'};"></span>
              <span style="font-weight: 600; font-size: 0.84rem; flex: 1;">${l}</span>
            </label>
          `).join('')}
        </div>
      `;
      container.appendChild(groupEl);
    });

    updateEvolutionModalSummary();
  }

  function onCategoryCheckboxChange(cat, isChecked) {
    const grid = document.getElementById(`grid-${cat}`);
    if (grid) {
      grid.querySelectorAll('.lang-chk').forEach(chk => chk.checked = isChecked);
    }
    updateEvolutionModalSummary();
  }

  function toggleCategoryGroup(cat) {
    const catChk = document.getElementById(`cat-chk-${cat}`);
    if (catChk) {
      catChk.checked = !catChk.checked;
      onCategoryCheckboxChange(cat, catChk.checked);
    }
  }

  function onSingleLangCheckboxChange() {
    ['Programming', 'Data', 'Markup', 'Config', 'Other'].forEach(cat => {
      const catChk = document.getElementById(`cat-chk-${cat}`);
      const grid = document.getElementById(`grid-${cat}`);
      if (catChk && grid) {
        const langChks = Array.from(grid.querySelectorAll('.lang-chk'));
        if (langChks.length > 0) {
          catChk.checked = langChks.every(c => c.checked);
        }
      }
    });
    updateEvolutionModalSummary();
  }

  function applyPreset(preset) {
    const chks = document.querySelectorAll('#modalFilterBody .lang-chk');
    chks.forEach(chk => {
      const cat = chk.getAttribute('data-cat');
      if (preset === 'prog') {
        chk.checked = (cat === 'Programming');
      } else if (preset === 'all') {
        chk.checked = true;
      } else if (preset === 'no-data') {
        chk.checked = (cat !== 'Data' && cat !== 'Other');
      } else if (preset === 'clear') {
        chk.checked = false;
      }
    });
    onSingleLangCheckboxChange();
  }

  function updateEvolutionModalSummary() {
    const chks = document.querySelectorAll('#modalFilterBody .lang-chk');
    let enabledCount = 0;
    chks.forEach(chk => { if (chk.checked) enabledCount++; });
    const summaryEl = document.getElementById('modalSummaryText');
    if (summaryEl) {
      summaryEl.innerHTML = `<strong>${enabledCount} of ${chks.length}</strong> types selected`;
    }
  }

  function saveAndApplyModalFilters() {
    const chks = document.querySelectorAll('#modalFilterBody .lang-chk');
    const disabled = [];
    const langMap = {};
    chks.forEach(chk => {
      const lang = chk.getAttribute('data-lang');
      if (!chk.checked) disabled.push(lang);
      langMap[lang] = chk.checked;
    });

    currentEvolPreset = 'custom';
    localStorage.setItem('polyglotminer_filter_settings', JSON.stringify({ disabled_languages: disabled }));
    localStorage.setItem('polyglotminer_global_language_filter', JSON.stringify(langMap));
    
    document.querySelectorAll('.filter-toolbar-btn').forEach(b => b.classList.remove('active'));
    document.getElementById('evolActiveFilterPill').textContent = `Showing: Custom Filter (${chks.length - disabled.length} types)`;
    
    closeFilterModal();
    populateLanguagePairSelectors();
    renderActiveStudioChart();
    renderCheckpointsTable();
  }

  function renderCheckpointsTable() {
    const tbody = document.getElementById('checkpointsTbody');
    const thLoc = document.getElementById('thCodeLoc');
    if (!tbody) return;
    tbody.innerHTML = '';

    if (!ACTIVE_REPORT || !ACTIVE_REPORT.checkpoints || ACTIVE_REPORT.checkpoints.length === 0) {
      tbody.innerHTML = `
        <tr>
          <td colspan="8" style="text-align: center; padding: 3rem 1.5rem; color: var(--text-muted);">
            <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">📋</div>
            <div style="font-weight: 700; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 0.25rem;">No Milestone Checkpoints Recorded</div>
            <div style="font-size: 0.82rem;">Run <code>polyglotminer history ${ACTIVE_REPORT.repo_name}</code> to extract and sample milestones.</div>
          </td>
        </tr>
      `;
      return;
    }

    if (thLoc) {
      thLoc.style.display = hasPhysicalLoc ? '' : 'none';
    }

    const allowed = new Set(getActiveAllowedLanguages());
    const colors = ACTIVE_REPORT.language_colors || {};

    ACTIVE_REPORT.checkpoints.forEach((cp, idx) => {
      let filteredFiles = 0;
      let filteredLoc = 0;
      const langEntries = [];

      Object.entries(cp.language_loc || {}).forEach(([l, loc]) => {
        if (allowed.has(l)) {
          filteredLoc += loc;
          filteredFiles += (cp.language_files && cp.language_files[l]) || 0;
          langEntries.push({ lang: l, loc });
        }
      });

      langEntries.sort((a, b) => b.loc - a.loc);
      const totalBasis = hasPhysicalLoc ? filteredLoc : filteredFiles;
      const topLangsHtml = langEntries.slice(0, 3).map(e => {
        const col = colors[e.lang] || '#94a3b8';
        const basisVal = hasPhysicalLoc ? e.loc : ((cp.language_files && cp.language_files[e.lang]) || e.loc);
        const pct = totalBasis > 0 ? Math.round((basisVal / totalBasis) * 100) : 0;
        return `<span class="badge" style="font-size: 0.7rem; padding: 0.1rem 0.4rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; gap: 0.3rem;"><span class="lang-dot" style="background:${col}; width:6px; height:6px;"></span>${e.lang} <strong style="color:var(--text-primary);">${pct}%</strong></span>`;
      }).join(' ');

      const tr = document.createElement('tr');
      const cpUrl = getCommitUrl(cp.commit_hash);
      const isCpWeb = cpUrl.startsWith('http://') || cpUrl.startsWith('https://');
      tr.innerHTML = `
        <td><span class="badge" style="background: var(--primary-light); color: var(--primary); font-weight: 700;">#${idx + 1} (${cp.percentile}%)</span></td>
        <td>
          <div style="display: flex; align-items: center; gap: 0.35rem;">
            <code class="mono-hash" style="font-size: 0.8rem;">${cp.short_hash}</code>
            <button type="button" class="btn-copy-commit" onclick="copyCommitUrl('${cp.commit_hash}', this)" title="Copy Commit URL to clipboard" style="padding: 0.15rem 0.35rem; font-size: 0.68rem;">
              <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
            </button>
            <button type="button" class="btn-copy-commit" onclick="setMilestoneIndex(${idx}); document.getElementById('commitNavigatorCard')?.scrollIntoView({behavior: 'smooth', block: 'center'});" title="Focus in Milestone Navigator" style="padding: 0.15rem 0.35rem; font-size: 0.68rem;">
              🧭
            </button>
            ${isCpWeb ? `<a href="${cpUrl}" target="_blank" rel="noopener noreferrer" class="btn-commit-ext" style="padding: 0.15rem 0.35rem; font-size: 0.68rem;" title="Open commit in remote repository">↗</a>` : ''}
          </div>
        </td>
        <td class="mono" style="font-size: 0.78rem; color: var(--text-muted);">${(cp.commit_date || '').split('T')[0]}</td>
        <td style="font-size: 0.82rem; font-weight: 600; color: var(--text-primary); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${cp.author_name || ''}</td>
        <td style="text-align: right; font-weight: 600; font-size: 0.82rem;">${filteredFiles.toLocaleString()}</td>
        ${hasPhysicalLoc ? `<td style="text-align: right; font-weight: 700; color: #047857; font-size: 0.82rem;">${filteredLoc.toLocaleString()}</td>` : ''}
        <td><div style="display: flex; gap: 0.3rem; flex-wrap: wrap;">${topLangsHtml || '<span style="color:var(--text-muted); font-size:0.75rem;">None in filter</span>'}</div></td>
        <td style="font-size: 0.8rem; color: var(--text-secondary); max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${cp.message || ''}">${cp.message || ''}</td>
      `;
      tbody.appendChild(tr);
    });
  }

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeFilterModal();
  });

  // Initial Boot
  populateLanguagePairSelectors();
  populateMilestoneNavigator();
  const metricSelect = document.getElementById('selectMetricType');
  if (metricSelect) metricSelect.value = activeMetricType;
  selectStudioGraph(activeStudioGraphId);
  renderCheckpointsTable();
</script>
{% endblock %}