{% 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;
  }
  /* Direct File Replacements Container */
  .replacements-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  }
  .replacements-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #f1f5f9;
  }
  .replacements-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .replacements-title-text {
    font-size: 0.74rem;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .replacements-count-badge {
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
  }
  .replacements-type-pills {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
  }
  .type-pill {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .type-pill.pill-exact {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
  }
  .type-pill.pill-subtoken {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
  }
  .type-pill.pill-normalized {
    background: #ecfeff;
    color: #0e7490;
    border: 1px solid #a5f3fc;
  }
  .type-pill.pill-neural {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
  }
  .type-pill.pill-strangler {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
  }
  .type-pill.pill-contract {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
  }

  /* File Pair Card Row */
  .file-pair-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    padding: 0.45rem 0.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    gap: 0.75rem;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .file-pair-row:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  /* Match-Specific Left Border & Tints */
  .file-pair-row.pair-row-exact {
    border-left: 4px solid #10b981;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 1) 160px);
  }
  .file-pair-row.pair-row-exact:hover {
    border-color: #10b981;
    border-left-width: 4px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.09) 0%, rgba(255, 255, 255, 1) 200px);
  }

  .file-pair-row.pair-row-strangler {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, rgba(255, 255, 255, 1) 160px);
    border-top-color: #fef3c7;
    border-right-color: #fef3c7;
    border-bottom-color: #fef3c7;
  }
  .file-pair-row.pair-row-strangler:hover {
    border-color: #f59e0b;
    border-left-width: 4px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.11) 0%, rgba(255, 255, 255, 1) 200px);
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.14);
  }

  .file-pair-row.pair-row-contract {
    border-left: 4px solid #059669;
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.06) 0%, rgba(255, 255, 255, 1) 160px);
    border-top-color: #d1fae5;
    border-right-color: #d1fae5;
    border-bottom-color: #d1fae5;
  }
  .file-pair-row.pair-row-contract:hover {
    border-color: #059669;
    border-left-width: 4px;
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.11) 0%, rgba(255, 255, 255, 1) 200px);
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.14);
  }

  .file-pair-row.pair-row-normalized {
    border-left: 4px solid #06b6d4;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.05) 0%, rgba(255, 255, 255, 1) 160px);
  }
  .file-pair-row.pair-row-normalized:hover {
    border-color: #06b6d4;
    border-left-width: 4px;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.09) 0%, rgba(255, 255, 255, 1) 200px);
  }

  .file-pair-row.pair-row-subtoken {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, rgba(255, 255, 255, 1) 160px);
  }
  .file-pair-row.pair-row-subtoken:hover {
    border-color: #3b82f6;
    border-left-width: 4px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.09) 0%, rgba(255, 255, 255, 1) 200px);
  }

  .file-pair-row.pair-row-neural {
    border-left: 4px solid #8b5cf6;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.06) 0%, rgba(255, 255, 255, 1) 160px);
    border-top-color: #ede9fe;
    border-right-color: #ede9fe;
    border-bottom-color: #ede9fe;
  }
  .file-pair-row.pair-row-neural:hover {
    border-color: #8b5cf6;
    border-left-width: 4px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.10) 0%, rgba(255, 255, 255, 1) 200px);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.12);
  }

  .file-pair-row.pair-row-general {
    border-left: 4px solid #94a3b8;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.04) 0%, rgba(255, 255, 255, 1) 160px);
  }

  /* Internal Grid & Path Components */
  .pair-files-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
  }
  .file-col {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
  }
  .file-diff-symbol {
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
  }
  .file-diff-symbol.del-symbol {
    color: #ef4444;
  }
  .file-diff-symbol.add-symbol {
    color: #10b981;
  }
  .file-dir-path {
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left;
    flex-shrink: 1;
    min-width: 30px;
  }
  .file-basename-highlight {
    font-weight: 700;
    font-size: 0.80rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .decomposition-box .file-col,
  .consolidation-box .file-col,
  .strangler-arc-card .file-col {
    flex-wrap: wrap;
    align-items: baseline;
  }
  .decomposition-box .file-basename-highlight,
  .consolidation-box .file-basename-highlight,
  .strangler-arc-card .file-basename-highlight {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex-shrink: 1;
  }
  .file-basename-highlight.del-basename {
    color: #991b1b;
  }
  .file-basename-highlight.add-basename {
    color: #166534;
  }
  .pair-arrow-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 0 0.15rem;
    flex-shrink: 0;
    user-select: none;
  }
  .pair-badge-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  /* Specific Badge Styles */
  .match-badge {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-main);
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
  }
  .match-badge.badge-exact {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
  }
  .match-badge.badge-normalized {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #0891b2;
  }
  .match-badge.badge-subtoken {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
  }
  .match-badge.badge-neural {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #c4b5fd;
    color: #5b21b6;
    box-shadow: 0 1px 2px rgba(139, 92, 246, 0.1);
  }
  .match-badge.badge-strangler {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    color: #b45309;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.1);
  }
  .match-badge.badge-contract {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #6ee7b7;
    color: #047857;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.1);
  }
  .match-badge.badge-consolidation {
    background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
    border: 1px solid #c7d2fe;
    color: #4338ca;
    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.1);
  }
  .pair-row-consolidation {
    background-color: #faf5ff !important;
  }
  .match-badge.badge-general {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
  }

  /* Strangler Lifecycle Arc Styles */
  /* Strangler Lifecycle Arc Styles - Clean Research Cards */
  .strangler-arc-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #6366f1;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    margin-bottom: 1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .strangler-arc-card:hover {
    border-color: #cbd5e1;
    border-left-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
  }
  .strangler-arc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #f1f5f9;
  }
  .strangler-arc-badge {
    background: #eef2ff;
    color: #4338ca;
    font-weight: 700;
    font-size: 0.70rem;
    padding: 0.2rem 0.55rem;
    border-radius: 5px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #e0e7ff;
  }
  .strangler-timeline-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
  }
  @media (max-width: 900px) {
    .strangler-timeline-grid {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
  }
  .timeline-node {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }
  .timeline-node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .timeline-node-intro .timeline-node-header {
    color: #047857;
  }
  .timeline-node-decom .timeline-node-header {
    color: #b91c1c;
  }
  .timeline-node-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .timeline-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.5rem;
    min-width: 155px;
  }
  .timeline-bridge-line {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
  }
  .timeline-bridge-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.70rem;
    font-weight: 700;
    color: #475569;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
  }
  .btn-range-diff {
    background: #f1f5f9;
    color: #334155 !important;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
  }
  .btn-range-diff:hover {
    background: #e2e8f0;
    color: #0f172a !important;
    border-color: #94a3b8;
    transform: translateY(-1px);
  }
  .strangler-inline-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: #fffdfa;
    border: 1px solid #fde68a;
    border-radius: 6px;
    margin-top: 0.45rem;
    font-size: 0.72rem;
  }
  .file-src, .file-tgt {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
  }
  .decomposition-box {
    background: #fdf4ff;
    border: 1px solid #f0abfc;
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .consolidation-box {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .bundle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .bundle-badge-1ton {
    background: linear-gradient(135deg, #a855f7, #c026d3);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 2px rgba(192, 38, 211, 0.2);
  }
  .bundle-badge-nto1 {
    background: linear-gradient(135deg, #059669, #0d9488);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
  }
  .bundle-metrics {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
  }
  .bundle-metric-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
  }
  .bundle-invariants-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.70rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    padding: 0.12rem 0.45rem;
    border-radius: 3px;
  }
</style>
{% endblock %}

{% block nav_links %}
<a href="{{ root_path }}index.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 }}index.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;">
        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        <span>Discovered Repository in Dataset</span>
      </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 %}
        {{ total_file_repls|default(report.primary_migration_pair.file_replacements_count)|default(report.primary_migration_pair.candidate_count) }} file transitions across {{ report.migration_candidates|length }} commits
      {% 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 'None / Polyglot') }}">
      {% if report.primary_migration_pair and report.primary_migration_pair.archetype %}
        {{ report.primary_migration_pair.archetype }}
      {% else %}
        None / Polyglot
      {% endif %}
    </div>
    <div class="stat-sub">Turnover mechanics pattern</div>
  </div>

  <div class="stat-card green">
    <div class="stat-top">
      <span class="stat-label">File Transitions</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" style="color: #047857;">{{ total_file_repls|default(report.primary_migration_pair.file_replacements_count if report.primary_migration_pair else 0) }} Files</div>
    <div class="stat-sub">Across {{ report.migration_candidates|length }} commit touchpoints{% if total_strangler_repls and total_strangler_repls > 0 %} · {{ total_strangler_repls }} phased{% endif %}</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>
    Direct Migration Touchpoints <span class="badge" id="migrationTabBadge">{{ direct_repls_count|default(total_file_repls|default(report.migration_candidates|length)) }} Files</span>
  </button>
  <button type="button" class="tab-btn" id="tabBtnPhased" onclick="switchEvolutionTab('phased')">
    <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 10V3L4 14h7v7l9-11h-7z"/></svg>
    Phased Migrations <span class="badge" id="phasedTabBadge" style="background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe;">{{ total_strangler_repls|default(0) }} Transitions</span>
  </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="width: 48px; height: 48px; border-radius: 12px; background: rgba(99, 102, 241, 0.1); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.75rem;">
              <svg width="24" height="24" fill="none" stroke="var(--primary)" 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>
            </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="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(79, 70, 229, 0.1); color: var(--primary);">
          <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 2a10 10 0 100 20 10 10 0 000-20zm3.5 6.5l-2.1 5.6-5.6 2.1 2.1-5.6 5.6-2.1z"/></svg>
        </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; display: inline-flex; align-items: center; gap: 0.35rem;">
          <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/></svg>
          <span>Prev</span>
        </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; display: inline-flex; align-items: center; gap: 0.35rem;">
          <span>Next</span>
          <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
        </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: Direct Migration Touchpoints -->
<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;">
        Direct Migration Touchpoints
      </div>
      <div style="font-size: 0.82rem; color: var(--text-muted);">
        Atomic single-commit file replacements, decompositions, and consolidations across repository history.
      </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: Phased Migrations (Strangler Lifecycle Arcs) -->
<div id="tabContentPhased" 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;">
        Phased Migrations & Strangler Lifecycle Arcs
      </div>
      <div style="font-size: 0.82rem; color: var(--text-muted);">
        Asynchronous multi-commit transitions where replacement implementations coexisted across repository commit history before final retirement.
      </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="phasedSearchInput" class="search-input" placeholder="Search phased file transitions..." oninput="renderPhasedMigrationsList()">
    </div>
  </div>

  <!-- Phased Transition Filter Pills -->
  <div id="phasedFilterPillContainer" style="display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1rem;">
    <!-- Populated dynamically via JS -->
  </div>

  <div id="phasedTransitionsContainer" style="display: flex; flex-direction: column; gap: 1rem;">
    <!-- Rendered lifecycle arc cards -->
  </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';
    const phasedEl = document.getElementById('tabContentPhased');
    if (phasedEl) phasedEl.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 === 'phased' || tab === 'diff') {
      document.getElementById('tabBtnPhased')?.classList.add('active');
      if (phasedEl) {
        phasedEl.style.display = 'block';
        renderPhasedMigrationsList();
      }
    }
  }

  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>'
  let activeCandMechFilter = 'all'; // 'all' | 'ai_semantic' | 'consolidation' | 'decomposition' | 'contract' | 'exact'

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

  function setCandMechFilter(filterVal) {
    activeCandMechFilter = filterVal;
    renderMigrationCandidatesTable();
  }

  let activePhasedPairFilter = 'all'; // 'all' | 'primary' | '<src> -> <tgt>'
  let activePhasedMechFilter = 'all'; // 'all' | 'consolidation' | 'decomposition' | 'ai_semantic' | 'contract' | 'exact' | 'subtoken'

  function setPhasedPairFilter(filterVal) {
    activePhasedPairFilter = filterVal;
    renderPhasedMigrationsList();
  }

  function setPhasedMechFilter(filterVal) {
    activePhasedMechFilter = filterVal;
    renderPhasedMigrationsList();
  }

  function jumpToPhasedMechanism(filterVal) {
    activePhasedMechFilter = filterVal;
    switchEvolutionTab('phased');
  }

  function getMatchIconSvg(category) {
    if (category === 'exact') {
      return `<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -1px; display: inline-block; flex-shrink: 0;"><circle cx="12" cy="12" r="9" stroke-width="2"/><circle cx="12" cy="12" r="3" stroke-width="2"/><path stroke-linecap="round" stroke-width="2" d="M12 3v3m0 12v3M3 12h3m12 0h3"/></svg>`;
    } else if (category === 'subtoken') {
      return `<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -1px; display: inline-block; flex-shrink: 0;"><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>`;
    } else if (category === 'normalized') {
      return `<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -1px; display: inline-block; flex-shrink: 0;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7h6m-3 0v10m6-6h5m-2.5-4v8m6-2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>`;
    } else if (category === 'neural') {
      return `<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -1px; display: inline-block; flex-shrink: 0;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/></svg>`;
    } else if (category === 'strangler') {
      return `<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -1px; display: inline-block; flex-shrink: 0;"><circle cx="6" cy="6" r="3" stroke-width="2"/><circle cx="6" cy="18" r="3" stroke-width="2"/><circle cx="18" cy="18" r="3" stroke-width="2"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9v6m0 0a9 9 0 009-9h3"/></svg>`;
    } else if (category === 'contract') {
      return `<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -1px; display: inline-block; flex-shrink: 0;"><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>`;
    } else {
      return `<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -1px; display: inline-block; flex-shrink: 0;"><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>`;
    }
  }

  function getPairMatchMeta(p) {
    const matchType = p.match_type || 'same_basename';
    const score = p.similarity_score != null ? Math.round(p.similarity_score * 100) : 100;

    let role = p.architectural_role;
    if (!role || role === 'OTHER') {
      const extractRole = (filePath) => {
        if (!filePath) return null;
        const fileName = filePath.split('/').pop().split('.')[0].toLowerCase();
        let s = fileName;
        for (const ts of ['screentest', 'daotest', 'controllertest', 'repositorytest', 'viewmodeltest', 'presentertest', 'testcase', 'test', 'tests', 'spec']) {
          if (s.endsWith(ts) && s.length > ts.length) { s = s.slice(0, -ts.length); break; }
        }
        if (s.endsWith('viewmodel') || s.endsWith('presenter') || s.endsWith('store')) return 'State Logic';
        if (['activity', 'fragment', 'screen', 'view', 'page', 'dialog', 'sheet'].some(x => s.endsWith(x))) return 'UI Screen';
        if (['dao', 'database', 'datasource', 'repository', 'repo', 'entity'].some(x => s.endsWith(x))) return 'Data Layer';
        if (['api', 'client', 'controller', 'endpoint', 'service'].some(x => s.endsWith(x))) return 'Network/API';
        if (['executor', 'executors', 'thread', 'dispatcher'].some(x => s.endsWith(x))) return 'Concurrency';
        if (['contract', 'interface'].some(x => s.endsWith(x))) return 'Contract';
        if (['matcher', 'action', 'actions', 'rule'].some(x => s.endsWith(x))) return 'Test Infra';
        if (s.endsWith('adapter')) return 'Adapter';
        if (['util', 'utils', 'helper', 'ext', 'extension'].some(x => s.endsWith(x))) return 'Utility';
        return null;
      };
      role = extractRole(p.target_file) || extractRole(p.source_file);
    } else {
      role = role.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase());
    }

    if (matchType === 'contract_invariant' || matchType === 'strangler_contract') {
      const rolePart = role ? ` · ${role}` : '';
      const invCount = (p.matched_invariants || []).length;
      const invText = invCount > 0 ? ` · ${invCount} Invariants` : '';
      return {
        category: 'contract',
        rowClass: 'pair-row-contract',
        badgeClass: 'match-badge badge-contract',
        title: `API Route & Schema Invariant Match with ${score}% contract confidence`,
        badgeText: `${getMatchIconSvg('contract')} Route/Schema${rolePart}${invText} · ${score}%`,
      };
    }

    if (matchType === 'header_impl_consolidation' || matchType === 'n_to_1_consolidation' || matchType === 'strangler_consolidation') {
      const rolePart = role ? ` · ${role}` : '';
      const label = matchType === 'header_impl_consolidation' ? 'Header+Impl Consolidation' : (matchType === 'strangler_consolidation' ? 'Strangler Consolidation' : 'N → 1 Consolidation');
      return {
        category: 'consolidation',
        rowClass: 'pair-row-consolidation',
        badgeClass: 'match-badge badge-consolidation',
        title: `Consolidation refactoring where multiple legacy files merged into 1 modern target with ${score}% confidence`,
        badgeText: `${getMatchIconSvg('contract')} ${label}${rolePart} · ${score}%`,
      };
    }

    if (matchType.startsWith('strangler_') || p.commit_distance != null) {
      const lagStr = p.commit_distance != null ? `${p.commit_distance} Commits Lag` : 'Multi-Commit';
      const subType = matchType.replace('strangler_', '').replace(/_/g, ' ');
      const isNeural = subType.includes('neural') || !!p.embedding_model;
      const subTypeLabel = isNeural ? 'AI Semantic' : (subType === 'exact' ? 'Exact Stem' : (subType === 'normalized' ? 'Case/Delim' : (subType === 'subtoken' ? 'Sub-Token' : subType)));
      const rolePart = role ? ` · ${role}` : '';
      const daysPart = p.duration_days ? ` (${p.duration_days}d)` : '';
      const introHash = p.commit_added ? p.commit_added.substring(0, 8) : '';
      const decomHash = p.commit_deleted ? p.commit_deleted.substring(0, 8) : '';
      const historyTitle = introHash && decomHash ? ` [Added ${introHash} → Deleted ${decomHash}]` : '';
      const badgeIcon = isNeural ? getMatchIconSvg('neural') : getMatchIconSvg('strangler');
      const badgeLabel = isNeural ? 'AI Semantic Strangler' : 'Strangler Fig';

      return {
        category: isNeural ? 'neural' : 'strangler',
        rowClass: 'pair-row-strangler',
        badgeClass: isNeural ? 'match-badge badge-neural' : 'match-badge badge-strangler',
        title: `${badgeLabel} Asynchronous Migration${historyTitle}${role ? ' [' + role + ']' : ''}: ${lagStr}${daysPart} with ${score}% match quality`,
        badgeText: `${badgeIcon} ${badgeLabel}${rolePart} · ${lagStr} · ${score}%`,
      };
    }

    if (matchType === 'neural_embedding' || matchType.includes('neural') || !!p.embedding_model) {
      const rolePart = role ? ` · ${role}` : '';
      return {
        category: 'neural',
        rowClass: 'pair-row-neural',
        badgeClass: 'match-badge badge-neural',
        title: `AI Code Embedding (Dense Vector Representation)${role ? ' [' + role + ']' : ''} with ${score}% semantic affinity`,
        badgeText: `${getMatchIconSvg('neural')} AI Semantic${rolePart} · ${score}%`,
      };
    }

    if (matchType === 'same_basename' || matchType === 'exact_stem') {
      return {
        category: 'exact',
        rowClass: 'pair-row-exact',
        badgeClass: 'match-badge badge-exact',
        title: 'Exact File Name Match (100% stem identity across languages)',
        badgeText: `${getMatchIconSvg('exact')} Exact Stem · ${score}%`,
      };
    }

    if (matchType === 'normalized_stem') {
      return {
        category: 'normalized',
        rowClass: 'pair-row-normalized',
        badgeClass: 'match-badge badge-normalized',
        title: 'Case and Delimiter Normalized Match (e.g. CamelCase ↔ snake_case)',
        badgeText: `${getMatchIconSvg('normalized')} Case/Delim · ${score}%`,
      };
    }

    if (matchType === 'subtoken_similarity') {
      const rolePart = role ? ` · ${role}` : '';
      return {
        category: 'subtoken',
        rowClass: 'pair-row-subtoken',
        badgeClass: 'match-badge badge-subtoken',
        title: `Sub-Token Morphological Overlap (${score}% shared identifier tokens)`,
        badgeText: `${getMatchIconSvg('subtoken')} Sub-Token${rolePart} · ${score}%`,
      };
    }

    return {
      category: 'general',
      rowClass: 'pair-row-general',
      badgeClass: 'match-badge badge-general',
      title: `${matchType.replace(/_/g, ' ')} (${score}%)`,
      badgeText: `${getMatchIconSvg('general')} ${matchType.replace(/_/g, ' ')} · ${score}%`,
    };
  }

  function getAllStranglerTransitions() {
    const list = [];
    const seen = new Set();

    (ACTIVE_REPORT.migration_candidates || []).forEach(cand => {
      (cand.replacement_pairs || []).forEach(p => {
        const matchType = p.match_type || '';
        const dist = p.commit_distance;
        if (matchType.startsWith('strangler_') || (dist != null && dist > 0)) {
          const key = `${p.source_file}->${p.target_file}->${p.commit_added || ''}->${p.commit_deleted || cand.commit_hash || ''}`;
          if (!seen.has(key)) {
            seen.add(key);
            list.push({ pair: p, cand: cand });
          }
        }
      });
      (cand.strangler_transitions || []).forEach(p => {
        const key = `${p.source_file}->${p.target_file}->${p.commit_added || ''}->${p.commit_deleted || cand.commit_hash || ''}`;
        if (!seen.has(key)) {
          seen.add(key);
          list.push({ pair: p, cand: cand });
        }
      });
    });

    (ACTIVE_REPORT.strangler_transitions || []).forEach(p => {
      const key = `${p.source_file}->${p.target_file}->${p.commit_added || ''}->${p.commit_deleted || ''}`;
      if (!seen.has(key)) {
        seen.add(key);
        list.push({
          pair: p,
          cand: {
            commit_hash: p.commit_deleted || p.commit_added || '',
            short_hash: (p.commit_deleted || p.commit_added || '').slice(0, 8),
            message: p.commit_message || '',
            author: p.author || '',
            commit_date: p.commit_date || ''
          }
        });
      }
    });

    return list;
  }

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

    const allTransitions = getAllStranglerTransitions();
    const prim = ACTIVE_REPORT.primary_migration_pair;
    const primKey = prim ? `${prim.source_language} -> ${prim.target_language}` : null;

    // Precompute true multi-file group sizes across phased transitions so 1:1 edges are never labeled N:1 or 1:N
    const tgtGroupSources = new Map();
    const srcGroupTargets = new Map();
    allTransitions.forEach(({ pair }) => {
      const sLang = pair.source_language || pair.source_lang || '';
      const tLang = pair.target_language || pair.target_lang || '';
      const tKey = `${sLang}->${tLang}::${pair.target_file || ''}`;
      const sKey = `${sLang}->${tLang}::${pair.source_file || ''}`;
      if (!tgtGroupSources.has(tKey)) tgtGroupSources.set(tKey, new Set());
      if (pair.source_file) tgtGroupSources.get(tKey).add(pair.source_file);
      if (!srcGroupTargets.has(sKey)) srcGroupTargets.set(sKey, new Set());
      if (pair.target_file) srcGroupTargets.get(sKey).add(pair.target_file);
    });

    const getStemLower = (fp) => {
      const base = (fp || '').split('/').pop() || '';
      const dot = base.lastIndexOf('.');
      return (dot > 0 ? base.slice(0, dot) : base).toLowerCase();
    };

    const getPhasedMech = (pair) => {
      const mt = (pair.match_type || '').toLowerCase();
      const hasEmbed = !!(pair.embedding_model || mt.includes('neural') || mt.includes('ai_'));
      if (hasEmbed) return 'ai_semantic';
      const sLang = pair.source_language || pair.source_lang || '';
      const tLang = pair.target_language || pair.target_lang || '';
      const tKey = `${sLang}->${tLang}::${pair.target_file || ''}`;
      const sKey = `${sLang}->${tLang}::${pair.source_file || ''}`;
      const nSources = tgtGroupSources.get(tKey)?.size || 0;
      const nTargets = srcGroupTargets.get(sKey)?.size || 0;
      if (nSources >= 2) return 'consolidation';
      if (nTargets >= 2) return 'decomposition';
      if (mt.includes('contract')) return 'contract';
      const sStem = getStemLower(pair.source_file);
      const tStem = getStemLower(pair.target_file);
      if (mt.includes('exact') || mt === 'same_basename' || (sStem && sStem === tStem)) return 'exact';
      return 'subtoken';
    };

    // Update tab badge count dynamically
    const tabBadge = document.getElementById('phasedTabBadge');
    if (tabBadge) {
      tabBadge.textContent = `${allTransitions.length} Transitions`;
    }

    // Render filter pills for Phased Migrations
    const pillContainer = document.getElementById('phasedFilterPillContainer');
    if (pillContainer) {
      const pairCounts = {};
      allTransitions.forEach(({ pair }) => {
        const src = pair.source_language || pair.source_lang || 'Source';
        const tgt = pair.target_language || pair.target_lang || 'Target';
        const k = `${src} -> ${tgt}`;
        pairCounts[k] = (pairCounts[k] || 0) + 1;
      });

      // Fallback to 'all' if primary pair has no phased transitions
      if (activePhasedPairFilter === 'primary' && (!primKey || !pairCounts[primKey])) {
        activePhasedPairFilter = 'all';
      }

      let pillsHtml = `
        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; width: 100%; margin-bottom: 0.5rem;">
          <div style="display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;">
            <span style="font-size: 0.72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.2rem;">Language Transition:</span>
            <button type="button" onclick="setPhasedPairFilter('all')" class="btn ${activePhasedPairFilter === 'all' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto;">
              All Transitions (${allTransitions.length})
            </button>
      `;

      if (primKey && pairCounts[primKey]) {
        const isPrim = activePhasedPairFilter === 'primary' || activePhasedPairFilter === primKey;
        pillsHtml += `
          <button type="button" onclick="setPhasedPairFilter('primary')" class="btn ${isPrim ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto;">
            Primary: ${primKey} (${pairCounts[primKey]})
          </button>
        `;
      }

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

      // Compute Detection Mechanism counts across phased transitions matching current language filter
      let pConsolCount = 0, pDecompCount = 0, pAiCount = 0, pContractCount = 0, pExactCount = 0, pSubtokenCount = 0;
      allTransitions.forEach(({ pair }) => {
        const src = pair.source_language || pair.source_lang || '';
        const tgt = pair.target_language || pair.target_lang || '';
        const pairKey = `${src} -> ${tgt}`;
        const matchesPair = (activePhasedPairFilter === 'all') ||
                            (activePhasedPairFilter === 'primary' && primKey && pairKey === primKey) ||
                            (!primKey && activePhasedPairFilter === 'primary') ||
                            (pairKey === activePhasedPairFilter);
        if (!matchesPair) return;

        const mech = getPhasedMech(pair);
        if (mech === 'ai_semantic') pAiCount++;
        else if (mech === 'consolidation') pConsolCount++;
        else if (mech === 'decomposition') pDecompCount++;
        else if (mech === 'contract') pContractCount++;
        else if (mech === 'subtoken') pSubtokenCount++;
        else pExactCount++;
      });

      pillsHtml += `
          </div>
        </div>
        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; width: 100%; margin-bottom: 0.85rem; padding-top: 0.45rem; border-top: 1px dashed var(--border-subtle);">
          <div style="display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;">
            <span style="font-size: 0.72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.2rem;">Detection Mechanism:</span>
            <button type="button" onclick="setPhasedMechFilter('all')" class="btn ${activePhasedMechFilter === 'all' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
              <span>All Mechanisms</span>
            </button>
            ${pConsolCount > 0 ? `
              <button type="button" onclick="setPhasedMechFilter('consolidation')" class="btn ${activePhasedMechFilter === 'consolidation' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M6 21V9a9 9 0 0 0 9 9"></path></svg>
                <span>N:1 Consolidation (${pConsolCount})</span>
              </button>
            ` : ''}
            ${pDecompCount > 0 ? `
              <button type="button" onclick="setPhasedMechFilter('decomposition')" class="btn ${activePhasedMechFilter === 'decomposition' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>
                <span>1:N Decomposition (${pDecompCount})</span>
              </button>
            ` : ''}
            ${pAiCount > 0 ? `
              <button type="button" onclick="setPhasedMechFilter('ai_semantic')" class="btn ${activePhasedMechFilter === 'ai_semantic' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
                <span>AI Semantic (${pAiCount})</span>
              </button>
            ` : ''}
            ${pContractCount > 0 ? `
              <button type="button" onclick="setPhasedMechFilter('contract')" class="btn ${activePhasedMechFilter === 'contract' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Invariants/Routes (${pContractCount})</span>
              </button>
            ` : ''}
            ${pExactCount > 0 ? `
              <button type="button" onclick="setPhasedMechFilter('exact')" class="btn ${activePhasedMechFilter === 'exact' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
                <span>Exact Stem (${pExactCount})</span>
              </button>
            ` : ''}
            ${pSubtokenCount > 0 ? `
              <button type="button" onclick="setPhasedMechFilter('subtoken')" class="btn ${activePhasedMechFilter === 'subtoken' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path 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>
                <span>Subtoken (${pSubtokenCount})</span>
              </button>
            ` : ''}
          </div>
        </div>
      `;
      pillContainer.innerHTML = pillsHtml;
    }

    if (allTransitions.length === 0) {
      container.innerHTML = `
        <div class="card" style="text-align: center; padding: 3rem 1.5rem; color: var(--text-muted);">
          <div style="width: 44px; height: 44px; border-radius: 10px; background: rgba(148, 163, 184, 0.12); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; color: var(--text-muted);">
            <svg width="22" height="22" 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>
          </div>
          <div style="font-weight: 700; font-size: 1rem; color: #0f172a; margin-bottom: 0.25rem;">No Phased Migrations Detected</div>
          <div style="font-size: 0.84rem;">All detected file transitions in this repository occurred atomically within single commits.</div>
        </div>
      `;
      return;
    }

    const query = (document.getElementById('phasedSearchInput')?.value || '').toLowerCase().trim();
    const filtered = allTransitions.filter(({ pair, cand }) => {
      const src = pair.source_language || pair.source_lang || '';
      const tgt = pair.target_language || pair.target_lang || '';
      const pairKey = `${src} -> ${tgt}`;

      if (activePhasedPairFilter === 'primary' && primKey) {
        if (pairKey !== primKey) return false;
      } else if (activePhasedPairFilter !== 'all' && activePhasedPairFilter !== 'primary') {
        if (pairKey !== activePhasedPairFilter) return false;
      }

      if (activePhasedMechFilter !== 'all') {
        if (getPhasedMech(pair) !== activePhasedMechFilter) return false;
      }

      if (!query) return true;
      const srcFile = (pair.source_file || '').toLowerCase();
      const tgtFile = (pair.target_file || '').toLowerCase();
      const msg = (cand.message || '').toLowerCase();
      const hashA = (pair.commit_added || '').toLowerCase();
      const hashD = (pair.commit_deleted || cand.commit_hash || '').toLowerCase();
      return srcFile.includes(query) || tgtFile.includes(query) || msg.includes(query) || hashA.includes(query) || hashD.includes(query);
    });

    if (filtered.length === 0) {
      container.innerHTML = `
        <div class="card" style="text-align: center; padding: 3rem 1.5rem; color: var(--text-muted);">
          <div style="font-weight: 700; font-size: 1rem; color: #0f172a; margin-bottom: 0.25rem;">No Phased Transitions Match Current Filter</div>
          <div style="font-size: 0.84rem;">Try clearing the search query or selecting "All Transitions".</div>
        </div>
      `;
      return;
    }

    // Group N:1 Consolidation transitions by target_file and 1:N Decomposition transitions by source_file
    // so multi-file phased migrations render as genuine N->1 or 1->N cards instead of 1:1 cards
    const displayCards = [];
    const seenConsolGroups = new Set();
    const seenDecompGroups = new Set();

    filtered.forEach(item => {
      const p = item.pair;
      const mech = getPhasedMech(p);
      const sLang = p.source_language || p.source_lang || '';
      const tLang = p.target_language || p.target_lang || '';
      if (mech === 'consolidation') {
        const gKey = `${sLang}->${tLang}::${p.target_file || ''}`;
        if (!seenConsolGroups.has(gKey)) {
          seenConsolGroups.add(gKey);
          const groupItems = allTransitions.filter(x => {
            const xp = x.pair;
            const xs = xp.source_language || xp.source_lang || '';
            const xt = xp.target_language || xp.target_lang || '';
            return `${xs}->${xt}::${xp.target_file || ''}` === gKey;
          });
          displayCards.push({ cardType: 'consolidation', mech, items: groupItems.length >= 2 ? groupItems : [item] });
        }
      } else if (mech === 'decomposition') {
        const gKey = `${sLang}->${tLang}::${p.source_file || ''}`;
        if (!seenDecompGroups.has(gKey)) {
          seenDecompGroups.add(gKey);
          const groupItems = allTransitions.filter(x => {
            const xp = x.pair;
            const xs = xp.source_language || xp.source_lang || '';
            const xt = xp.target_language || xp.target_lang || '';
            return `${xs}->${xt}::${xp.source_file || ''}` === gKey;
          });
          displayCards.push({ cardType: 'decomposition', mech, items: groupItems.length >= 2 ? groupItems : [item] });
        }
      } else {
        displayCards.push({ cardType: 'single', mech, items: [item] });
      }
    });

    displayCards.forEach(({ cardType, mech, items }) => {
      const p = items[0].pair;
      const cand = items[0].cand;
      const arcCard = document.createElement('div');
      arcCard.className = 'strangler-arc-card';

      const introHash = p.commit_added || '';
      const decomHash = p.commit_deleted || cand.commit_hash;
      const introShort = introHash ? introHash.slice(0, 8) : 'unknown';
      const decomShort = decomHash ? decomHash.slice(0, 8) : cand.short_hash;
      const introUrl = getCommitUrl(introHash);
      const decomUrl = getCommitUrl(decomHash);
      const compareUrl = getCompareUrl(introHash, decomHash);

      const srcLang = p.source_language || p.source_lang || 'Source';
      const tgtLang = p.target_language || p.target_lang || 'Target';

      const lagStr = p.commit_distance != null ? `${p.commit_distance} Commits Lag` : 'Multi-Commit';
      const daysStr = p.duration_days ? `${p.duration_days} Days Coexistence` : '';
      const avgScore = Math.round(items.reduce((acc, x) => acc + ((x.pair.similarity_score != null ? x.pair.similarity_score : 1.0) * 100), 0) / items.length);
      const meta = getPairMatchMeta(p);
      const mechLabel = mech === 'ai_semantic'
        ? 'AI Semantic'
        : mech === 'consolidation'
        ? `N:1 Consolidation (${items.length} → 1)`
        : mech === 'decomposition'
        ? `1:N Decomposition (1 → ${items.length})`
        : mech === 'contract'
        ? 'Invariants/Routes'
        : mech === 'exact'
        ? 'Exact Stem'
        : 'Subtoken';

      const renderFileRow = (filePath, isTarget, commitSha) => {
        const parts = (filePath || '').split('/');
        const base = parts.pop() || '';
        const dir = parts.length ? parts.join('/') + '/' : '';
        const shortSha = commitSha ? commitSha.slice(0, 8) : '';
        const cUrl = commitSha ? getCommitUrl(commitSha) : '';
        return `
          <div class="file-col ${isTarget ? 'file-col-tgt' : 'file-col-src'}" title="${filePath}" style="display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;">
            <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
              <span class="file-diff-symbol ${isTarget ? 'add-symbol' : 'del-symbol'}">${isTarget ? '+' : '-'}</span>
              <span class="file-dir-path">${dir}</span>
              <span class="file-basename-highlight ${isTarget ? 'add-basename' : 'del-basename'}">${base}</span>
            </div>
            ${shortSha ? `<a href="${cUrl}" target="_blank" rel="noopener noreferrer" class="mono-hash" style="font-size: 0.66rem; text-decoration: none; flex-shrink: 0;" title="Commit #${shortSha}">#${shortSha}</a>` : ''}
          </div>
        `;
      };

      const introFilesHtml = cardType === 'decomposition'
        ? `<div style="display: flex; flex-direction: column; gap: 0.3rem;">${items.map(x => renderFileRow(x.pair.target_file, true, x.pair.commit_added)).join('')}</div>`
        : renderFileRow(p.target_file, true, '');

      const decomFilesHtml = cardType === 'consolidation'
        ? `<div style="display: flex; flex-direction: column; gap: 0.3rem;">${items.map(x => renderFileRow(x.pair.source_file, false, x.pair.commit_deleted || x.cand?.commit_hash)).join('')}</div>`
        : renderFileRow(p.source_file, false, '');

      const introTitle = cardType === 'decomposition'
        ? `Introduced (${tgtLang}) · ${items.length} Files`
        : `Introduced (${tgtLang})`;

      const decomTitle = cardType === 'consolidation'
        ? `Retired (${srcLang}) · ${items.length} Files`
        : `Retired (${srcLang})`;

      const bridgeSubtext = cardType === 'consolidation'
        ? `Consolidated ${items.length} legacy files → 1${daysStr ? ` · ${daysStr}` : ''}`
        : cardType === 'decomposition'
        ? `Decomposed 1 legacy file → ${items.length}${daysStr ? ` · ${daysStr}` : ''}`
        : (daysStr || 'Both implementations coexisted');

      arcCard.innerHTML = `
        <div class="strangler-arc-header">
          <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
            <span class="trans-pill">${srcLang} &rarr; ${tgtLang}</span>
            <span class="strangler-arc-badge">
              <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 10V3L4 14h7v7l9-11h-7z"/></svg>
              Phased Arc
            </span>
            <span class="badge" style="background: rgba(99, 102, 241, 0.08); color: #4338ca; border: 1px solid rgba(99, 102, 241, 0.2); font-size: 0.70rem; font-weight: 700;">
              ${mechLabel}
            </span>
            <span class="badge" style="background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; font-size: 0.72rem; font-weight: 600;">
              ${lagStr}${daysStr ? ` · ${daysStr}` : ''}
            </span>
            <span class="match-badge" style="background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; font-size: 0.70rem;">
              ${avgScore}% Match
            </span>
            ${meta.rolePart ? `<span style="font-size: 0.70rem; color: #64748b; font-weight: 600;">${meta.rolePart.replace(' · ', '')}</span>` : ''}
          </div>
          <div style="display: flex; align-items: center; gap: 0.45rem;">
            ${compareUrl ? `
            <a href="${compareUrl}" target="_blank" rel="noopener noreferrer" class="btn-range-diff" title="Open Range Comparison Diff in GitHub (${introShort}...${decomShort})">
              <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 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
              <span>Compare Range (A...B)</span>
            </a>
            <button type="button" class="btn-copy-commit" onclick="copyCompareUrl('${introHash}', '${decomHash}', this)" title="Copy Range Diff 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</span>
            </button>` : ''}
          </div>
        </div>

        <div class="strangler-timeline-grid">
          <!-- Point A: Introduction -->
          <div class="timeline-node timeline-node-intro">
            <div class="timeline-node-header">
              <span>${introTitle}</span>
              <div style="display: flex; align-items: center; gap: 0.35rem;">
                <code class="mono-hash">#${introShort}</code>
                ${introUrl.startsWith('http') ? `<a href="${introUrl}" target="_blank" rel="noopener noreferrer" class="btn-commit-ext" title="Open Introduction Commit in GitHub">↗</a>` : ''}
                <button type="button" class="btn-copy-commit" onclick="copyCommitUrl('${introHash}', this)" title="Copy Commit URL">Copy</button>
              </div>
            </div>
            <div class="timeline-node-box">
              ${introFilesHtml}
            </div>
          </div>

          <!-- Coexistence Bridge -->
          <div class="timeline-bridge">
            <div class="timeline-bridge-pill">
              <span>Dual-Run: <strong>${lagStr}</strong></span>
            </div>
            <div class="timeline-bridge-line" style="color: #94a3b8; width: 100%; display: flex; align-items: center;">
              <span style="flex: 1; border-top: 1.5px dashed #cbd5e1;"></span>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: -2px; color: #94a3b8;"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </div>
            <div style="font-size: 0.68rem; color: #94a3b8; font-weight: 500; text-align: center;">
              ${bridgeSubtext}
            </div>
          </div>

          <!-- Point B: Decommission -->
          <div class="timeline-node timeline-node-decom">
            <div class="timeline-node-header">
              <span>${decomTitle}</span>
              <div style="display: flex; align-items: center; gap: 0.35rem;">
                <code class="mono-hash">#${decomShort}</code>
                ${decomUrl.startsWith('http') ? `<a href="${decomUrl}" target="_blank" rel="noopener noreferrer" class="btn-commit-ext" title="Open Decommission Commit in GitHub">↗</a>` : ''}
                <button type="button" class="btn-copy-commit" onclick="copyCommitUrl('${decomHash}', this)" title="Copy Commit URL">Copy</button>
              </div>
            </div>
            <div class="timeline-node-box">
              ${decomFilesHtml}
              ${cand.message ? `<div style="font-size: 0.72rem; color: #64748b; font-family: var(--font-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.2rem;" title="${cand.message}">Commit msg: "${cand.message}"</div>` : ''}
            </div>
          </div>
        </div>
      `;

      container.appendChild(arcCard);
    });
  }

  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 || [];

    // Helper to extract strictly atomic (single-commit) direct pairs and bundles for Tab 2
    const getBundleEdgeCount = (b) => Math.max(new Set(b.source_files || []).size, new Set(b.target_files || []).size);
    const getAtomicCandView = (c) => {
      const allPairs = c.replacement_pairs || [];
      const stranglerPairKeys = new Set();
      const atomicPairFiles = new Set();
      const atomicPairs = [];

      allPairs.forEach(p => {
        const mt = (p.match_type || '').toLowerCase();
        const isPhased = mt.startsWith('strangler_') || (p.commit_distance != null && p.commit_distance > 0);
        if (isPhased) {
          stranglerPairKeys.add(`${p.source_file}->${p.target_file}`);
        } else {
          atomicPairs.push(p);
          if (p.source_file) atomicPairFiles.add(p.source_file);
          if (p.target_file) atomicPairFiles.add(p.target_file);
        }
      });

      const fcs = c.file_changes || [];
      const touchedPaths = fcs.length > 0 ? new Set(fcs.map(fc => fc.path)) : null;

      const atomicBundles = (c.decomposition_bundles || []).filter(b => {
        const srcs = b.source_files || [];
        const tgts = b.target_files || [];
        if (srcs.length === 0 || tgts.length === 0) return false;
        const hasStranglerEdge = srcs.some(s => tgts.some(t => stranglerPairKeys.has(`${s}->${t}`)));
        if (hasStranglerEdge) return false;
        if (touchedPaths && touchedPaths.size > 0) {
          const allSrcTouched = srcs.every(s => touchedPaths.has(s) || atomicPairFiles.has(s));
          const allTgtTouched = tgts.every(t => touchedPaths.has(t) || atomicPairFiles.has(t));
          if (!allSrcTouched || !allTgtTouched) return false;
        }
        return true;
      });

      const bundleSrcSet = new Set(atomicBundles.flatMap(b => b.source_files || []));
      const bundleTgtSet = new Set(atomicBundles.flatMap(b => b.target_files || []));

      const direct1to1Pairs = [];
      const unbundledConsolPairs = [];
      const unbundledDecompPairs = [];

      atomicPairs.forEach(p => {
        const mt = (p.match_type || '').toLowerCase();
        const isConsol = mt.includes('consolidation') || mt.includes('n_to_1');
        const isDecomp = mt.includes('decomposition') || mt.includes('1_to_n');
        const inBundle = bundleSrcSet.has(p.source_file) && bundleTgtSet.has(p.target_file);
        if (isConsol) {
          if (!inBundle) unbundledConsolPairs.push(p);
        } else if (isDecomp) {
          if (!inBundle) unbundledDecompPairs.push(p);
        } else if (!inBundle) {
          direct1to1Pairs.push(p);
        }
      });

      const consolBundles = atomicBundles.filter(b => b.bundle_type !== '1_TO_N');
      const decompBundles = atomicBundles.filter(b => b.bundle_type === '1_TO_N');
      const consolCount = consolBundles.reduce((acc, b) => acc + getBundleEdgeCount(b), 0) + unbundledConsolPairs.length;
      const decompCount = decompBundles.reduce((acc, b) => acc + getBundleEdgeCount(b), 0) + unbundledDecompPairs.length;

      let aiCount = 0, contractCount = 0, exactCount = 0;
      direct1to1Pairs.forEach(p => {
        const mt = (p.match_type || '').toLowerCase();
        const isAi = !!(p.embedding_model || mt.includes('neural') || mt.includes('ai_'));
        const isContract = mt.includes('contract');
        if (isAi) aiCount++;
        else if (isContract) contractCount++;
        else exactCount++;
      });

      const totalFiles = direct1to1Pairs.length + consolCount + decompCount;
      return {
        atomicBundles,
        consolBundles,
        decompBundles,
        direct1to1Pairs,
        unbundledConsolPairs,
        unbundledDecompPairs,
        consolCount,
        decompCount,
        aiCount,
        contractCount,
        exactCount,
        totalFiles,
      };
    };

    // Filter to candidates that have direct atomic replacements or atomic decomposition bundles
    const pairCommitCounts = {};
    const pairReplCounts = {};
    let totalDirectRepls = 0;

    allCands.forEach(c => {
      const k = `${c.source_language} -> ${c.target_language}`;
      const view = getAtomicCandView(c);
      if (view.totalFiles > 0) {
        pairCommitCounts[k] = (pairCommitCounts[k] || 0) + 1;
        pairReplCounts[k] = (pairReplCounts[k] || 0) + view.totalFiles;
        totalDirectRepls += view.totalFiles;
      }
    });

    // Fallback activeCandPairFilter to 'all' if primary pair has no direct touchpoints
    if (activeCandPairFilter === 'primary' && (!primKey || !pairCommitCounts[primKey])) {
      activeCandPairFilter = 'all';
    }

    // Update Tab 2 badge count
    const migrationTabBadge = document.getElementById('migrationTabBadge');
    if (migrationTabBadge) {
      migrationTabBadge.textContent = `${totalDirectRepls} Files`;
    }

    // Calculate Detection Mechanism counts across direct touchpoints and phased transitions
    let mechAiCount = 0, mechConsolCount = 0, mechDecompCount = 0, mechContractCount = 0, mechExactCount = 0;
    let phasedConsolCount = 0, phasedDecompCount = 0, phasedAiCount = 0, phasedContractCount = 0;

    allCands.forEach(c => {
      const pairKey = `${c.source_language} -> ${c.target_language}`;
      const matchesPair = (activeCandPairFilter === 'all') ||
                          (activeCandPairFilter === 'primary' && primKey && pairKey === primKey) ||
                          (!primKey && activeCandPairFilter === 'primary') ||
                          (pairKey === activeCandPairFilter);
      if (!matchesPair) return;

      const view = getAtomicCandView(c);
      mechAiCount += view.aiCount;
      mechConsolCount += view.consolCount;
      mechDecompCount += view.decompCount;
      mechContractCount += view.contractCount;
      mechExactCount += view.exactCount;

      (c.replacement_pairs || []).forEach(p => {
        const mt = (p.match_type || '').toLowerCase();
        const dist = p.commit_distance;
        const isPhased = mt.startsWith('strangler_') || (dist != null && dist > 0);
        if (!isPhased) return;
        const isAi = !!(p.embedding_model || mt.includes('neural') || mt.includes('ai_'));
        const isConsol = mt.includes('consolidation') || mt.includes('n_to_1');
        const isDecomp = mt.includes('decomposition') || mt.includes('1_to_n');
        const isContract = mt.includes('contract');

        if (isAi) phasedAiCount++;
        else if (isConsol) phasedConsolCount++;
        else if (isDecomp) phasedDecompCount++;
        else if (isContract) phasedContractCount++;
      });
    });

    // Render Clean Language Filter Pills & Mechanism Filter Pills
    const pillContainer = document.getElementById('candFilterPillContainer');
    if (pillContainer) {
      let pillsHtml = `
        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; width: 100%; margin-bottom: 0.5rem;">
          <div style="display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;">
            <span style="font-size: 0.72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.2rem;">Language Transition:</span>
      `;

      if (primKey && pairCommitCounts[primKey]) {
        const isPrimActive = activeCandPairFilter === 'primary' || activeCandPairFilter === primKey;
        const pRepls = pairReplCounts[primKey] || 0;
        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} (${pRepls} files)
          </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 Pairs (${totalDirectRepls} files)
        </button>
      `;

      Object.keys(pairCommitCounts).forEach(k => {
        if (k !== primKey) {
          const isThisActive = activeCandPairFilter === k;
          const kRepls = pairReplCounts[k] || 0;
          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} (${kRepls} files)
            </button>
          `;
        }
      });
      pillsHtml += `
          </div>
        </div>
        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; width: 100%; margin-bottom: 0.85rem; padding-top: 0.45rem; border-top: 1px dashed var(--border-subtle);">
          <div style="display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;">
            <span style="font-size: 0.72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.2rem;">Detection Mechanism:</span>
            <button type="button" onclick="setCandMechFilter('all')" class="btn ${activeCandMechFilter === 'all' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
              <span>All Mechanisms</span>
            </button>
            ${mechAiCount > 0 ? `
              <button type="button" onclick="setCandMechFilter('ai_semantic')" class="btn ${activeCandMechFilter === 'ai_semantic' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><rect x="4" y="4" width="16" height="16" rx="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
                <span>AI Semantic (${mechAiCount})</span>
              </button>
            ` : (phasedAiCount > 0 ? `
              <button type="button" onclick="jumpToPhasedMechanism('ai_semantic')" class="btn btn-secondary" title="View phased AI semantic transitions in Tab 3" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px dashed #6366f1; color: #4338ca; background: #eef2ff;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><rect x="4" y="4" width="16" height="16" rx="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
                <span>AI Semantic (${phasedAiCount} in Phased Tab ↗)</span>
              </button>
            ` : '')}
            ${mechConsolCount > 0 ? `
              <button type="button" onclick="setCandMechFilter('consolidation')" class="btn ${activeCandMechFilter === 'consolidation' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M6 21V9a9 9 0 0 0 9 9"></path></svg>
                <span>N:1 Consolidation (${mechConsolCount})</span>
              </button>
            ` : (phasedConsolCount > 0 ? `
              <button type="button" onclick="jumpToPhasedMechanism('consolidation')" class="btn btn-secondary" title="View phased N:1 consolidations in Tab 3" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px dashed #6366f1; color: #4338ca; background: #eef2ff;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M6 21V9a9 9 0 0 0 9 9"></path></svg>
                <span>N:1 Consolidation (${phasedConsolCount} in Phased Tab ↗)</span>
              </button>
            ` : '')}
            ${mechDecompCount > 0 ? `
              <button type="button" onclick="setCandMechFilter('decomposition')" class="btn ${activeCandMechFilter === 'decomposition' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>
                <span>1:N Decomposition (${mechDecompCount})</span>
              </button>
            ` : (phasedDecompCount > 0 ? `
              <button type="button" onclick="jumpToPhasedMechanism('decomposition')" class="btn btn-secondary" title="View phased 1:N decompositions in Tab 3" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px dashed #6366f1; color: #4338ca; background: #eef2ff;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>
                <span>1:N Decomposition (${phasedDecompCount} in Phased Tab ↗)</span>
              </button>
            ` : '')}
            ${mechContractCount > 0 ? `
              <button type="button" onclick="setCandMechFilter('contract')" class="btn ${activeCandMechFilter === 'contract' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Invariants/Routes (${mechContractCount})</span>
              </button>
            ` : (phasedContractCount > 0 ? `
              <button type="button" onclick="jumpToPhasedMechanism('contract')" class="btn btn-secondary" title="View phased invariants in Tab 3" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px dashed #6366f1; color: #4338ca; background: #eef2ff;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Invariants/Routes (${phasedContractCount} in Phased Tab ↗)</span>
              </button>
            ` : '')}
            ${mechExactCount > 0 ? `
              <button type="button" onclick="setCandMechFilter('exact')" class="btn ${activeCandMechFilter === 'exact' ? 'btn-primary' : 'btn-secondary'}" style="font-size: 0.72rem; padding: 0.2rem 0.6rem; height: auto; display: inline-flex; align-items: center; gap: 0.35rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
                <span>Exact/Stem (${mechExactCount})</span>
              </button>
            ` : ''}
          </div>
        </div>
      `;
      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;
      }

      const view = getAtomicCandView(c);
      if (view.totalFiles === 0) return false;

      if (activeCandMechFilter !== 'all') {
        if (activeCandMechFilter === 'ai_semantic' && view.aiCount === 0) return false;
        if (activeCandMechFilter === 'consolidation' && view.consolCount === 0) return false;
        if (activeCandMechFilter === 'decomposition' && view.decompCount === 0) return false;
        if (activeCandMechFilter === 'contract' && view.contractCount === 0) return false;
        if (activeCandMechFilter === 'exact' && view.exactCount === 0) 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="width: 44px; height: 44px; border-radius: 10px; background: rgba(148, 163, 184, 0.12); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; color: var(--text-muted);">
            <svg width="22" height="22" 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>
          </div>
          <div style="font-weight: 700; font-size: 1rem; color: #0f172a; margin-bottom: 0.25rem;">No Direct Commit Touchpoints Found</div>
          <div style="font-size: 0.84rem;">Try adjusting your search or language filter above.</div>
        </div>
      `;
      return;
    }

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

      let filesHtml = '';
      let bundlesHtml = '';
      const view = getAtomicCandView(cand);
      let bundles = view.atomicBundles;
      let pairs = view.direct1to1Pairs;
      if (activeCandMechFilter === 'consolidation') {
        bundles = view.consolBundles;
        pairs = view.unbundledConsolPairs;
      } else if (activeCandMechFilter === 'decomposition') {
        bundles = view.decompBundles;
        pairs = view.unbundledDecompPairs;
      } else if (activeCandMechFilter === 'ai_semantic') {
        bundles = [];
        pairs = view.direct1to1Pairs.filter(p => !!(p.embedding_model || (p.match_type || '').toLowerCase().includes('neural') || (p.match_type || '').toLowerCase().includes('ai_')));
      } else if (activeCandMechFilter === 'contract') {
        bundles = [];
        pairs = view.direct1to1Pairs.filter(p => {
          const mt = (p.match_type || '').toLowerCase();
          return !(p.embedding_model || mt.includes('neural') || mt.includes('ai_')) && mt.includes('contract');
        });
      } else if (activeCandMechFilter === 'exact') {
        bundles = [];
        pairs = view.direct1to1Pairs.filter(p => {
          const mt = (p.match_type || '').toLowerCase();
          return !(p.embedding_model || mt.includes('neural') || mt.includes('ai_') || mt.includes('contract'));
        });
      }
      const fileChanges = cand.file_changes || [];

      if (bundles.length > 0) {
        bundlesHtml = bundles.map((b) => {
          const is1toN = b.bundle_type === '1_TO_N';
          const typeLabel = is1toN ? '1 → N Modular Decomposition' : 'N → 1 Consolidation';
          const badgeClass = is1toN ? 'bundle-badge-1ton' : 'bundle-badge-nto1';
          const boxClass = is1toN ? 'decomposition-box' : 'consolidation-box';

          const isHeaderImpl = (b.source_files || []).some(f => {
            const ext = f.split('.').pop().toLowerCase();
            return ['h', 'hpp', 'hxx', 'hh'].includes(ext);
          });
          const hasMeasuredMetrics = b.token_coverage != null && b.contamination != null && !(b.token_coverage === 0.9 && b.contamination === 0.05);

          let metricsPills = '';
          if (hasMeasuredMetrics) {
            const covPct = Math.round(b.token_coverage * 100);
            const contPct = Math.round(b.contamination * 100);
            const confScore = Math.round(b.confidence_score || 0);
            metricsPills = `
              <span class="bundle-metric-pill" title="Lexical Subtoken Overlap">Coverage: <strong>${covPct}%</strong></span>
              <span class="bundle-metric-pill" title="Foreign / Unmatched Token Ratio">Contamination: <strong>${contPct}%</strong></span>
              <span class="bundle-metric-pill" style="color: var(--primary); font-weight: 800;">Conf: <strong>${confScore}%</strong></span>
            `;
          } else if (isHeaderImpl) {
            metricsPills = `
              <span class="bundle-metric-pill" style="background: #f1f5f9; color: #334155; font-weight: 700; border: 1px solid #cbd5e1;" title="Deterministic pairing of C/C++ companion header and implementation files into a unified modern class">Exact Header/Impl Match</span>
              <span class="bundle-metric-pill" style="color: var(--primary); font-weight: 800;">Conf: <strong>100%</strong></span>
            `;
          } else {
            const confScore = Math.round(b.confidence_score || 100);
            metricsPills = `
              <span class="bundle-metric-pill" style="background: #f1f5f9; color: #334155; font-weight: 700; border: 1px solid #cbd5e1;" title="Deterministic structural pairing based on stem identity">Exact Structural Match</span>
              <span class="bundle-metric-pill" style="color: var(--primary); font-weight: 800;">Conf: <strong>${confScore}%</strong></span>
            `;
          }

          const renderSrcFile = (f) => {
            const parts = f.split('/');
            const base = parts.pop();
            const dir = parts.length ? parts.join('/') + '/' : '';
            return `<div class="file-col file-col-src" title="${f}"><span class="file-diff-symbol del-symbol">-</span><span class="file-dir-path">${dir}</span><span class="file-basename-highlight del-basename">${base}</span></div>`;
          };

          const renderTgtFile = (f) => {
            const parts = f.split('/');
            const base = parts.pop();
            const dir = parts.length ? parts.join('/') + '/' : '';
            return `<div class="file-col file-col-tgt" title="${f}"><span class="file-diff-symbol add-symbol">+</span><span class="file-dir-path">${dir}</span><span class="file-basename-highlight add-basename">${base}</span></div>`;
          };

          const stringsHtml = (b.matched_string_literals && b.matched_string_literals.length > 0)
            ? `<div style="display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem;">
                <span style="font-size: 0.68rem; font-weight: 700; color: #64748b;">Invariant Strings:</span>
                ${b.matched_string_literals.map(s => `<span class="bundle-invariants-tag">"${s}"</span>`).join('')}
              </div>`
            : '';

          return `
            <div class="${boxClass}">
              <div class="bundle-header">
                <div style="display: flex; align-items: center; gap: 0.5rem;">
                  <span class="${badgeClass}">${typeLabel}</span>
                  <span style="font-size: 0.75rem; font-weight: 700; color: #475569;">
                    ${b.source_language} &rarr; ${b.target_language}
                  </span>
                </div>
                <div class="bundle-metrics">
                  ${metricsPills}
                </div>
              </div>

              <div style="display: flex; align-items: flex-start; gap: 0.75rem; background: #ffffff; padding: 0.55rem 0.75rem; border-radius: 6px; border: 1px solid rgba(0,0,0,0.06); font-family: var(--font-mono); font-size: 0.78rem;">
                <div style="display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0;">
                  ${[...new Set(b.source_files || [])].map(renderSrcFile).join('')}
                </div>
                <div style="color: #94a3b8; font-weight: 800; font-size: 1.1rem; padding: 0.2rem 0.2rem; align-self: center;">&rarr;</div>
                <div style="display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0;">
                  ${[...new Set(b.target_files || [])].map(renderTgtFile).join('')}
                </div>
              </div>
              ${stringsHtml}
            </div>
          `;
        }).join('');
      }

      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('/') + '/' : '';

          const meta = getPairMatchMeta(p);

          const invsHtml = (p.matched_invariants && p.matched_invariants.length > 0)
            ? `<div class="pair-invariants-wrap" style="display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; padding-left: 0.25rem;">
                ${p.matched_invariants.slice(0, 4).map(inv => `<span class="bundle-invariants-tag" style="background: rgba(16, 185, 129, 0.1); color: #047857; border: 1px solid rgba(16, 185, 129, 0.25); font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 4px;">${inv}</span>`).join('')}
                ${p.matched_invariants.length > 4 ? `<span style="font-size: 0.65rem; color: #64748b; align-self: center;">+${p.matched_invariants.length - 4} more</span>` : ''}
              </div>`
            : '';

          return `
            <div class="file-pair-row ${meta.rowClass}" style="flex-direction: column; align-items: stretch;">
              <div style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.75rem;">
                <div class="pair-files-container">
                  <div class="file-col file-col-src" title="${p.source_file}">
                    <span class="file-diff-symbol del-symbol" title="Deleted / Replaced from">-</span>
                    <span class="file-dir-path">${srcDir}</span>
                    <span class="file-basename-highlight del-basename">${srcBase}</span>
                  </div>
                  <div class="pair-arrow-wrap">
                    <span class="pair-arrow">&rarr;</span>
                  </div>
                  <div class="file-col file-col-tgt" title="${p.target_file}">
                    <span class="file-diff-symbol add-symbol" title="Added / Replaced to">+</span>
                    <span class="file-dir-path">${tgtDir}</span>
                    <span class="file-basename-highlight add-basename">${tgtBase}</span>
                  </div>
                </div>
                <div class="pair-badge-wrap">
                  <span class="${meta.badgeClass}" title="${meta.title}">
                    ${meta.badgeText}
                  </span>
                </div>
              </div>
              ${invsHtml}
            </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>
          `;
        }

        const typeCounts = { exact: 0, contract: 0, subtoken: 0, normalized: 0, neural: 0 };
        pairs.forEach(p => {
          const m = getPairMatchMeta(p);
          if (typeCounts[m.category] !== undefined) typeCounts[m.category]++;
        });

        const pillsHtml = `
          <div class="replacements-type-pills">
            ${typeCounts.exact > 0 ? `<span class="type-pill pill-exact" title="Exact stem matches">${getMatchIconSvg('exact')} ${typeCounts.exact} Exact</span>` : ''}
            ${typeCounts.contract > 0 ? `<span class="type-pill pill-contract" title="API Route & Database Schema Invariants">${getMatchIconSvg('contract')} ${typeCounts.contract} Route/Schema</span>` : ''}
            ${typeCounts.subtoken > 0 ? `<span class="type-pill pill-subtoken" title="Morphological subtoken overlaps">${getMatchIconSvg('subtoken')} ${typeCounts.subtoken} Sub-Token</span>` : ''}
            ${typeCounts.normalized > 0 ? `<span class="type-pill pill-normalized" title="Case and delimiter normalized">${getMatchIconSvg('normalized')} ${typeCounts.normalized} Normalized</span>` : ''}
            ${typeCounts.neural > 0 ? `<span class="type-pill pill-neural" title="AI code embedding semantic matches">${getMatchIconSvg('neural')} ${typeCounts.neural} AI Semantic</span>` : ''}
          </div>
        `;

        const titleText = 'Direct File Replacements';

        filesHtml = `
          <div class="replacements-box">
            <div class="replacements-header">
              <div class="replacements-title">
                <span class="replacements-title-text">${titleText}</span>
                <span class="replacements-count-badge">${pairs.length} files</span>
              </div>
              ${pillsHtml}
            </div>
            ${initialPairs.map(renderPairRow).join('')}
            ${hiddenBlock}
            ${toggleBtn}
          </div>
        `;
      } else if (fileChanges.length > 0 && bundles.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; white-space: nowrap; flex: 1; min-width: 0;">
                <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); flex-shrink: 0;">${fc.language}</span>
                <span class="file-dir-path" title="${fc.path}">${dirPath}</span>
                <span class="file-basename-highlight" style="color: ${nameColor};">${baseName}</span>
              </div>
              <div style="flex-shrink: 0;">${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>` 
        : '';

      const cardTransCount = pairs.length + bundles.reduce((acc, b) => acc + Math.max(new Set(b.source_files || []).size, new Set(b.target_files || []).size), 0);
      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>
            ${cardTransCount > 0 ? `<span class="badge" style="background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; font-size: 0.72rem; font-weight: 700;">${cardTransCount} ${cardTransCount === 1 ? 'file transition' : 'file transitions'}</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>
          ${bundlesHtml}
          ${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 getCategoryIconSvg(cat) {
    if (cat === 'Programming') {
      return `<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -2px; display: inline-block;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>`;
    } else if (cat === 'Data') {
      return `<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -2px; display: inline-block;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/></svg>`;
    } else if (cat === 'Markup') {
      return `<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -2px; display: inline-block;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>`;
    } else {
      return `<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: -2px; display: inline-block;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>`;
    }
  }

  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));

      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; display: inline-flex; align-items: center; gap: 0.4rem;">${getCategoryIconSvg(cat)} ${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="width: 40px; height: 40px; border-radius: 8px; background: rgba(148, 163, 184, 0.12); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; color: var(--text-muted);">
              <svg width="20" height="20" 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>
            </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; display: inline-flex; align-items: center; justify-content: center;">
              <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="M12 2a10 10 0 100 20 10 10 0 000-20zm3.5 6.5l-2.1 5.6-5.6 2.1 2.1-5.6 5.6-2.1z"/></svg>
            </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 %}