{% extends "base.html" %}

{% block title %}PolyglotMiner — Evolution & Migration Dashboard{% endblock %}

{% block extra_head %}
<style>
  .delete-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .delete-icon-btn:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
  }
  .migration-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 700;
  }
  .migration-tag.detected {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
  }
  .migration-tag.none {
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
  }

  /* Skeleton Loading Shimmer System */
  @keyframes shimmer-wave {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  .skeleton-shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer-wave 1.6s infinite ease-in-out;
    border-radius: 6px;
  }
  .skeleton-card {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    box-shadow: var(--shadow-sm);
  }
  .skeleton-line {
    height: 14px;
    width: 100%;
    border-radius: 4px;
  }

  .pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .pagination-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
  }
  .pagination-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
  }
  .pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .chart-type-pill {
    padding: 0.25rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .chart-type-pill.active {
    background: #ffffff;
    color: #4f46e5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* Research Studio Sidebar & Left Panel Styling */
  .studio-sidebar-panel {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  }
  .studio-sidebar-header {
    font-size: 0.78rem;
    font-weight: 800;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .graph-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    margin-bottom: 0.35rem;
  }
  .graph-nav-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    transform: translateX(2px);
  }
  .graph-nav-btn.active {
    background: #eef2ff;
    border-color: #4f46e5;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.18);
  }
  .graph-nav-btn .nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .graph-nav-btn .nav-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 0.15rem;
  }
  .graph-nav-btn.active .nav-title {
    color: #4338ca;
    font-weight: 800;
  }
  .graph-nav-btn .nav-desc {
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    line-height: 1.2;
  }
  .graph-nav-btn.active .nav-desc {
    color: #4f46e5;
    font-weight: 600;
  }
  .tuning-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
  }
  .tuning-val {
    font-size: 0.82rem;
    font-weight: 800;
    color: #4f46e5;
  }
  .tuning-select {
    width: 100%;
    height: 38px;
    padding: 0 0.75rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.84rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s ease;
  }
  .tuning-select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  }
  .spotlight-stage {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md);
    padding: 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  }
  .mini-preview-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .mini-preview-card:hover {
    background: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.1);
  }

  /* =========================================================================
     Modernized Evolution Filter Toolbar & Interactive Controls
     ========================================================================= */
  .evol-filter-card {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.75rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
  }
  .evol-filter-card:focus-within {
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.07);
  }

  .evol-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.95rem;
    align-items: center;
    justify-content: space-between;
  }

  /* Enhanced Search Wrapper */
  .search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 240px;
    flex: 1 1 280px;
    max-width: 360px;
  }
  .search-input {
    width: 100%;
    height: 38px;
    padding: 0 2.2rem 0 2.35rem;
    font-size: 0.82rem;
    font-family: inherit;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    color: var(--text-primary);
    transition: all 0.18s ease;
  }
  .search-input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  }
  .search-input::placeholder {
    color: #94a3b8;
  }
  .search-icon {
    position: absolute;
    left: 10px;
    color: #94a3b8;
    pointer-events: none;
  }
  .search-clear-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.15s ease;
  }
  .search-clear-btn:hover {
    background: #e2e8f0;
    color: #334155;
  }
  .search-shortcut-badge {
    position: absolute;
    right: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    pointer-events: none;
    font-family: var(--font-mono);
  }

  /* Segmented Controls Group */
  .filter-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .segmented-control {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 9px;
    border: 1px solid var(--border-subtle);
    gap: 2px;
  }
  .segmented-pill {
    padding: 0.32rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: all 0.16s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    user-select: none;
  }
  .segmented-pill:hover:not(.active) {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
  }
  .segmented-pill.active {
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
  }
  .status-dot.all { background: #94a3b8; }
  .status-dot.mig { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.45); }
  .status-dot.poly { background: #8b5cf6; box-shadow: 0 0 6px rgba(139, 92, 246, 0.45); }

  /* Candidate Stepper Chips */
  .stepper-chip-group {
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    gap: 2px;
  }
  .stepper-chip {
    padding: 0.28rem 0.55rem;
    font-size: 0.76rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
  }
  .stepper-chip:hover:not(.active) {
    color: #0f172a;
    background: #e2e8f0;
  }
  .stepper-chip.active {
    background: #4f46e5;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
  }

  /* Custom Searchable Popover Combobox for Pairs */
  .pair-combobox-wrapper {
    position: relative;
  }
  .pair-combobox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: 38px;
    padding: 0 0.8rem;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-sm);
    max-width: 270px;
    min-width: 175px;
  }
  .pair-combobox-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }
  .pair-combobox-btn.active-filter {
    border-color: var(--primary-border);
    background: var(--primary-light);
    color: var(--primary);
  }
  .pair-combobox-btn:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  }
  .pair-combobox-btn .chevron {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    color: #94a3b8;
    flex-shrink: 0;
  }
  .pair-combobox-btn.open .chevron {
    transform: rotate(180deg);
  }
  .pair-combobox-clear {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    border-radius: 50%;
    margin-right: -0.2rem;
  }
  .pair-combobox-clear:hover {
    color: #ef4444;
    background: #fee2e2;
  }

  /* Popover Panel */
  .pair-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 310px;
    max-width: 360px;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg), 0 10px 25px -5px rgba(15, 23, 42, 0.12);
    z-index: 999;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: popover-fade 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes popover-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .popover-search-wrap {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .popover-search-input {
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    outline: none;
    transition: border-color 0.15s;
    background: #ffffff;
    font-family: inherit;
  }
  .popover-search-input:focus {
    border-color: var(--primary);
  }
  .popover-list {
    overflow-y: auto;
    max-height: 280px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .popover-option {
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    font-size: 0.79rem;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.12s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
  }
  .popover-option:hover {
    background: #f1f5f9;
    color: #0f172a;
  }
  .popover-option.selected {
    background: #eef2ff;
    color: #4338ca;
    font-weight: 700;
  }
  .popover-option .count-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
  }
  .popover-option.selected .count-pill {
    background: #c7d2fe;
    color: #3730a3;
  }
  .pair-lang-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.38rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid var(--border-subtle);
  }

  /* Reset Button */
  .btn-reset-filters {
    height: 38px;
    padding: 0 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.16s ease;
  }
  .btn-reset-filters:hover {
    border-color: #cbd5e1;
    color: #0f172a;
    background: #f8fafc;
  }
  .btn-reset-filters.has-active {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #dc2626;
  }
  .btn-reset-filters.has-active:hover {
    background: #fee2e2;
    border-color: #f87171;
  }
  .reset-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: 999px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
  }

  /* Active Filter Tags Bar */
  .active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid var(--border-subtle);
    transition: all 0.15s ease;
  }
  .active-filter-tag:hover {
    border-color: #cbd5e1;
  }
  .active-filter-tag .tag-remove {
    cursor: pointer;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
  }
  .active-filter-tag .tag-remove:hover {
    color: #dc2626;
  }

  /* =========================================================================
     Workspace Tabs & Faceted Explorer Architecture
     ========================================================================= */
  .workspace-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--border-subtle);
    margin-bottom: 1.75rem;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .workspace-tabs-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .workspace-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.15rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    margin-bottom: -2px;
  }
  .workspace-tab:hover {
    color: var(--text-primary);
  }
  .workspace-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
  }
  .tab-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
  }
  .workspace-tab.active .tab-badge {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-border);
  }
  .tab-badge.special {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
  }

  /* 2-Column Faceted Explorer Layout */
  .faceted-explorer-container {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 3.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  @media (max-width: 1024px) {
    .faceted-explorer-container {
      grid-template-columns: 1fr;
    }
  }

  /* Left Facet Rail (Natural height, no inner scrollbar) */
  .faceted-rail {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.15rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    box-sizing: border-box;
  }
  .rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
  }
  .rail-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .rail-reset-link {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: background 0.15s;
  }
  .rail-reset-link:hover {
    background: var(--primary-light);
  }
  .rail-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .rail-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .rail-search-box {
    position: relative;
    display: flex;
    align-items: center;
  }
  .rail-search-input {
    width: 100%;
    height: 36px;
    padding: 0 2rem 0 2.2rem;
    font-size: 0.8rem;
    font-family: inherit;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    color: var(--text-primary);
    transition: all 0.15s ease;
  }
  .rail-search-input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  }
  .facet-pill-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .facet-pill-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
  }
  .facet-pill-btn:hover:not(.active) {
    background: #f8fafc;
    color: #0f172a;
  }
  .facet-pill-btn.active {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-border);
    font-weight: 700;
  }
  .facet-count {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--bg-surface-alt);
    color: #64748b;
  }
  .facet-pill-btn.active .facet-count {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .rail-stepper-row {
    display: flex;
    align-items: center;
    gap: 3px;
    background: #f8fafc;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
  }
  .rail-pair-search-box {
    margin-bottom: 0.35rem;
  }
  .rail-pair-search-input {
    width: 100%;
    height: 28px;
    padding: 0 0.55rem;
    font-size: 0.74rem;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: #ffffff;
    font-family: inherit;
    outline: none;
  }
  .rail-pair-search-input:focus {
    border-color: var(--primary);
  }
  /* Faceted Lists (Natural height, no scrollbars, collapsible accordions) */
  .collapsible-rail-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.85rem;
    margin-top: 0.85rem;
  }
  .collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0.25rem 0;
    cursor: pointer;
    text-align: left;
    user-select: none;
  }
  .collapsible-header:hover .collapsible-title {
    color: var(--primary);
  }
  .collapsible-title {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: color 0.15s ease;
  }
  .collapsible-chevron {
    font-size: 0.62rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
    display: inline-block;
  }
  .collapsible-chevron.collapsed {
    transform: rotate(-90deg);
  }
  .collapsible-body {
    display: block;
    margin-top: 0.4rem;
  }
  .collapsible-body.collapsed {
    display: none;
  }
  .rail-sub-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    margin: 0.3rem 0 0.5rem 0;
    padding: 0 0.1rem;
  }
  .rail-pair-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .rail-pair-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.76rem;
    color: #475569;
    cursor: pointer;
    transition: background 0.12s ease;
    width: 100%;
    user-select: none;
    box-sizing: border-box;
  }
  .rail-pair-item:hover {
    background: #f8fafc;
    color: #0f172a;
  }
  /* Neutral un-tinted styling for checked rows (no blue background) */
  .rail-pair-item.selected {
    background: transparent;
    color: inherit;
    border-color: transparent;
  }
  .rail-pair-checkbox {
    cursor: pointer;
    accent-color: var(--primary);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin: 0;
  }
  .btn-pair-select-action {
    background: none;
    border: none;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    transition: background 0.12s ease;
  }
  .btn-pair-select-action:hover {
    background: var(--primary-light);
  }

  /* Stage Controls */
  .stage-control-card {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
  }
  .stage-count-badge {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
  }
  /* Optimized Repository Data Table (Responsive, Zero Horizontal Scroll) */
  .repo-table-card {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .repo-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.82rem;
    table-layout: fixed;
    box-sizing: border-box;
  }
  .repo-data-table th {
    background: #f8fafc;
    padding: 0.85rem 0.85rem;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    box-sizing: border-box;
    white-space: nowrap;
  }
  .repo-data-table td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    vertical-align: middle;
    box-sizing: border-box;
  }
  /* Generous edge padding: prevents right-edge clipping and provides premium framing */
  .repo-data-table th:first-child,
  .repo-data-table td:first-child {
    padding-left: 1.5rem !important;
  }
  .repo-data-table th:last-child,
  .repo-data-table td:last-child {
    padding-right: 1.5rem !important;
  }
  .repo-data-table tbody tr:hover td {
    background: #f8fafc;
  }
  .repo-data-table tbody tr:last-child td {
    border-bottom: none;
  }
  .timeline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff !important;
    background: var(--primary);
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.25);
    transition: all 0.15s ease;
  }
  .timeline-btn:hover {
    background: var(--primary-hover);
    box-shadow: 0 3px 8px rgba(79, 70, 229, 0.35);
    transform: translateY(-1px);
    color: #ffffff !important;
    text-decoration: none !important;
  }
  .timeline-btn span:last-child {
    display: inline-block;
    transition: transform 0.15s ease;
  }
  .timeline-btn:hover span:last-child {
    transform: translateX(2px);
  }
  .repo-data-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, color 0.12s;
  }
  .repo-data-table th.sortable:hover {
    background: #f1f5f9;
    color: var(--primary);
  }
  .sort-icon {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.68rem;
    opacity: 0.4;
    vertical-align: middle;
  }
  .repo-data-table th.sorted-asc .sort-icon,
  .repo-data-table th.sorted-desc .sort-icon {
    opacity: 1;
    color: var(--primary);
  }
  .repo-name-link {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.12s;
  }
  .repo-name-link:hover {
    color: var(--primary);
    text-decoration: underline;
  }
  .stage-select-input {
    height: 34px;
    padding: 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    color: #334155;
    outline: none;
    cursor: pointer;
  }
  .stage-select-input:focus {
    border-color: var(--primary);
  }
  .pagination-footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0.85rem 0.25rem;
    border-top: 1px solid var(--border-subtle);
  }
  .pagination-info-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
  }
</style>
{% endblock %}

{% block content %}
<!-- Evolution Dashboard Header -->
<div style="display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem;">
  <div>
    <div style="display: flex; align-items: center; gap: 0.5rem; color: var(--primary); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.35rem;">
      <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
      Timeline & Migration Intelligence
    </div>
    <h1 style="font-size: 2.25rem; font-weight: 800; color: #0f172a; letter-spacing: -0.03em; margin-bottom: 0.4rem;">
      Evolution & Migration Dashboard
    </h1>
    <p style="color: var(--text-secondary); font-size: 0.98rem; max-width: 750px;">
      Explore codebase trajectories, migration milestones, and historical commit sampling across all analyzed projects.
    </p>
  </div>
</div>

<!-- Global Evolution KPI Cards -->
<div class="stats-grid">
  <div class="stat-card primary">
    <div class="stat-top">
      <span class="stat-label">Analyzed Projects</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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
      </div>
    </div>
    <div class="stat-value" id="globalStatAnalyzedProjects">{{ (total_projects_count|default(evol_summaries|length))|number_format }}</div>
    <div class="stat-sub">Tracked repositories</div>
  </div>

  <div class="stat-card blue">
    <div class="stat-top">
      <span class="stat-label">Migration Yield Rate</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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
      </div>
    </div>
    <div class="stat-value" id="globalStatYieldRate" style="color: #0284c7;">
      {% set proj_total = total_projects_count|default(evol_summaries|length) %}
      {% if proj_total > 0 %}
        {{ ((migration_count / proj_total) * 100)|round(1) }}%
      {% else %}
        0%
      {% endif %}
    </div>
    <div class="stat-sub" id="globalStatYieldRateSub">{% set proj_total = total_projects_count|default(evol_summaries|length) %}{{ migration_count }} of {{ proj_total|number_format }} repositories transitioned</div>
  </div>

  <div class="stat-card green">
    <div class="stat-top">
      <span class="stat-label">Migration Patterns</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="globalStatMigrationPatterns" style="color: #047857;">{{ migration_count }}</div>
    <div class="stat-sub">Cross-language transitions detected</div>
  </div>

  <div class="stat-card amber">
    <div class="stat-top">
      <span class="stat-label">Total Commits Analyzed</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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
      </div>
    </div>
    <div class="stat-value" id="globalStatTotalCommits" style="color: #d97706;">{{ total_commits_sum|number_format }}</div>
    <div class="stat-sub">Across evolutionary milestones</div>
  </div>
</div>

{% if (total_projects_count|default(evol_summaries|length)) == 0 %}
<div class="card" style="text-align: center; padding: 4rem 2rem; border: 2px dashed var(--border-strong); background: #fafafa;">
  <div style="width: 56px; height: 56px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto;">
    <svg width="28" height="28" 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>
  </div>
  <h3 style="font-size: 1.35rem; font-weight: 800; color: #0f172a; margin-bottom: 0.5rem;">No Evolution Data Available Yet</h3>
  <p style="color: var(--text-secondary); max-width: 520px; margin: 0 auto 1.5rem auto; font-size: 0.95rem;">
    Run <code class="mono" style="background: var(--bg-surface-alt); padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 600;">polyglotminer history &lt;target&gt; --samples 10</code> in your terminal.
  </p>
</div>
{% else %}
<!-- =========================================================================
     Workspace Tabs Architecture (Explorer | Studio | Historical Runs)
     ========================================================================= -->
<div class="workspace-tabs-bar">
  <div class="workspace-tabs-group" role="tablist" aria-label="Dashboard Workspaces">
    <button type="button" class="workspace-tab active" id="tabBtn_explorer" onclick="switchWorkspaceTab('explorer')" role="tab" aria-selected="true">
      <svg width="17" height="17" 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>
      <span>Repositories Explorer</span>
      <span class="tab-badge" id="tabBadge_explorer">{{ migration_count }}</span>
    </button>
    <button type="button" class="workspace-tab" id="tabBtn_studio" onclick="switchWorkspaceTab('studio')" role="tab" aria-selected="false">
      <svg width="17" height="17" 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>Empirical Analytics Studio</span>
      <span class="tab-badge special">6 Views</span>
    </button>
  </div>
</div>

<!-- =========================================================================
     WORKSPACE 1: Repositories Explorer (2-Column Faceted Rail + Stage)
     ========================================================================= -->
<div id="workspacePane_explorer" class="faceted-explorer-container">
  
  <!-- LEFT FACET RAIL (Sticky Sidebar) -->
  <aside class="faceted-rail" aria-label="Repository Filters & Facets">
    <!-- Rail Header -->
    <div class="rail-header">
      <div class="rail-title">
        <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 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
        <span>Filters & Facets</span>
      </div>
      <button type="button" class="rail-reset-link" id="railResetBtn" onclick="resetEvolutionFilters()" style="visibility: hidden;">Reset</button>
    </div>

    <!-- Hidden form inputs maintaining 100% backward compatibility -->
    <input type="hidden" id="filterMigrationStatus" value="migrations_only">
    <input type="hidden" id="filterMigrationPair" value="all">
    <input type="hidden" id="filterMinCandidates" value="0">

    <!-- Search Facet -->
    <div class="rail-section">
      <span class="rail-section-label">Search Repository</span>
      <div class="rail-search-box">
        <svg class="search-icon" width="14" height="14" 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="evolSearchInput" class="rail-search-input" placeholder="Filter by name, URL..." oninput="handleSearchInputChange(this.value)">
        <button type="button" id="searchClearBtn" class="search-clear-btn" onclick="clearSearchInput()" title="Clear search">✕</button>
        <span id="searchShortcutHint" class="search-shortcut-badge" title="Press / to search">/</span>
      </div>
    </div>

    <!-- Migration Status Facet (Confirmed Migrations default) -->
    <div class="rail-section">
      <span class="rail-section-label">Migration Status</span>
      <div class="facet-pill-list" role="radiogroup" aria-label="Migration Status Filter">
        <button type="button" class="facet-pill-btn active" id="statusFacet_migrations_only" onclick="setMigrationStatus('migrations_only')">
          <span style="display: flex; align-items: center; gap: 0.45rem;">
            <span class="status-dot mig"></span>
            <span>Confirmed Migrations</span>
          </span>
          <span class="facet-count" id="statusCount_mig">{{ migration_count }}</span>
        </button>
        <button type="button" class="facet-pill-btn" id="statusFacet_all" onclick="setMigrationStatus('all')">
          <span style="display: flex; align-items: center; gap: 0.45rem;">
            <span class="status-dot all"></span>
            <span>All Repositories</span>
          </span>
          <span class="facet-count" id="statusCount_all">{{ total_projects_count|default(evol_summaries|length) }}</span>
        </button>
        <button type="button" class="facet-pill-btn" id="statusFacet_polyglot_only" onclick="setMigrationStatus('polyglot_only')">
          <span style="display: flex; align-items: center; gap: 0.45rem;">
            <span class="status-dot poly"></span>
            <span>Polyglot Only</span>
          </span>
          <span class="facet-count" id="statusCount_poly">{% set proj_total = total_projects_count|default(evol_summaries|length) %}{{ [0, proj_total - migration_count]|max }}</span>
        </button>
      </div>
    </div>

    <!-- Candidate Commits Threshold Facet with Number Input & Stepper Choices -->
    <div class="rail-section">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem;">
        <span class="rail-section-label" style="margin-bottom: 0;" title="Minimum candidate co-change commits required">Candidate Commits</span>
        <div style="display: inline-flex; align-items: center; gap: 0.25rem;">
          <span style="font-size: 0.72rem; color: var(--text-muted); font-weight: 700;">&ge;</span>
          <input type="number" id="candNumberInput" min="0" max="1000" value="0"
                 oninput="onCandInputChange(this.value)"
                 style="width: 52px; height: 26px; padding: 0 0.35rem; font-size: 0.76rem; font-weight: 700; text-align: center; border: 1px solid var(--border-subtle); border-radius: 6px; background: #ffffff; color: var(--primary); outline: none;">
        </div>
      </div>
      <!-- Preset Chips: Any, +1, +10, +25, +50 -->
      <div class="rail-stepper-row" role="group" aria-label="Candidate Commits Threshold">
        <button type="button" class="stepper-chip active" id="candChip_0" onclick="setMinCandidates(0)">Any</button>
        <button type="button" class="stepper-chip" id="candChip_1" onclick="setMinCandidates(1)">+1</button>
        <button type="button" class="stepper-chip" id="candChip_10" onclick="setMinCandidates(10)">+10</button>
        <button type="button" class="stepper-chip" id="candChip_25" onclick="setMinCandidates(25)">+25</button>
        <button type="button" class="stepper-chip" id="candChip_50" onclick="setMinCandidates(50)">+50</button>
      </div>
    </div>

    <!-- 1. Primary Migration Pairs Facet (Checkboxes, All & None, Collapsible) -->
    <div class="rail-section collapsible-rail-section" id="section_pairs" style="border-top: none; margin-top: 0; padding-top: 0;">
      <button type="button" class="collapsible-header" onclick="toggleRailSection('pairs')">
        <span class="collapsible-title">
          <span class="collapsible-chevron" id="chevron_pairs">&#9660;</span>
          <span>Transition Pairs</span>
        </span>
        <span class="facet-count" id="badge_pairs_count">0</span>
      </button>
      <div class="collapsible-body" id="body_pairs">
        <div class="rail-pair-search-box">
          <input type="text" id="railPairSearchInput" class="rail-pair-search-input" placeholder="Search pairs..." oninput="filterRailPairs(this.value)">
        </div>
        <div class="rail-sub-actions">
          <button type="button" class="btn-pair-select-action" onclick="selectAllPairs()" title="Select all transition pairs">All</button>
          <span style="color: #cbd5e1; font-size: 0.7rem;">|</span>
          <button type="button" class="btn-pair-select-action" onclick="unselectAllPairs()" title="Deselect all transition pairs">None</button>
        </div>
        <div class="rail-pair-list" id="railPairList">
          <!-- Populated via populateRailPairs() with checkboxes -->
        </div>
      </div>
    </div>

    <!-- 2. Source Languages Facet (Checkboxes, All & None, Collapsible, Collapsed by default) -->
    <div class="rail-section collapsible-rail-section" id="section_sources">
      <button type="button" class="collapsible-header" onclick="toggleRailSection('sources')">
        <span class="collapsible-title">
          <span class="collapsible-chevron collapsed" id="chevron_sources">&#9660;</span>
          <span>Source Languages</span>
        </span>
        <span class="facet-count" id="badge_sources_count">0</span>
      </button>
      <div class="collapsible-body collapsed" id="body_sources">
        <div class="rail-pair-search-box">
          <input type="text" id="railSourceSearchInput" class="rail-pair-search-input" placeholder="Search sources..." oninput="filterRailSources(this.value)">
        </div>
        <div class="rail-sub-actions">
          <button type="button" class="btn-pair-select-action" onclick="selectAllSources()" title="Select all source languages">All</button>
          <span style="color: #cbd5e1; font-size: 0.7rem;">|</span>
          <button type="button" class="btn-pair-select-action" onclick="unselectAllSources()" title="Deselect all source languages">None</button>
        </div>
        <div class="rail-pair-list" id="railSourceList">
          <!-- Populated via populateRailSources() with checkboxes -->
        </div>
      </div>
    </div>

    <!-- 3. Destination Languages Facet (Checkboxes, All & None, Collapsible, Collapsed by default) -->
    <div class="rail-section collapsible-rail-section" id="section_targets">
      <button type="button" class="collapsible-header" onclick="toggleRailSection('targets')">
        <span class="collapsible-title">
          <span class="collapsible-chevron collapsed" id="chevron_targets">&#9660;</span>
          <span>Destination Languages</span>
        </span>
        <span class="facet-count" id="badge_targets_count">0</span>
      </button>
      <div class="collapsible-body collapsed" id="body_targets">
        <div class="rail-pair-search-box">
          <input type="text" id="railTargetSearchInput" class="rail-pair-search-input" placeholder="Search destinations..." oninput="filterRailTargets(this.value)">
        </div>
        <div class="rail-sub-actions">
          <button type="button" class="btn-pair-select-action" onclick="selectAllTargets()" title="Select all destination languages">All</button>
          <span style="color: #cbd5e1; font-size: 0.7rem;">|</span>
          <button type="button" class="btn-pair-select-action" onclick="unselectAllTargets()" title="Deselect all destination languages">None</button>
        </div>
        <div class="rail-pair-list" id="railTargetList">
          <!-- Populated via populateRailTargets() with checkboxes -->
        </div>
      </div>
    </div>

  </aside>

  <!-- RIGHT STAGE AREA -->
  <main class="explorer-stage">
    
    <!-- Stage Control Toolbar -->
    <div class="stage-control-card">
      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;">
        <div style="display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;">
          <span style="font-size: 0.88rem; font-weight: 600; color: #334155;">
            Showing <span class="stage-count-badge" id="stageMatchCount">{{ migration_count }}</span> repositories
          </span>
          <div id="stageActiveTagsContainer" style="display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;"></div>
        </div>
      </div>
    </div>

    <!-- Compact Table View (Primary & Only View) -->
    <div id="repoTableViewContainer" style="width: 100%; max-width: 100%; min-width: 0;">
      <div class="repo-table-card">
        <table class="repo-data-table">
          <colgroup>
            <col style="width: 36%;">
            <col style="width: 24%;">
            <col style="width: 12%;">
            <col style="width: 12%;">
            <col style="width: 16%;">
          </colgroup>
          <thead>
            <tr>
              <th style="width: 36%;" class="sortable" id="thCol_name" onclick="sortTableByColumn('name')" title="Sort by Repository Name">
                <span>Repository</span>
                <span class="sort-icon" id="sortIcon_name">&varr;</span>
              </th>
              <th style="width: 24%;" class="sortable" id="thCol_pair" onclick="sortTableByColumn('pair')" title="Sort by Transition Pair">
                <span>Primary Migration</span>
                <span class="sort-icon" id="sortIcon_pair">&varr;</span>
              </th>
              <th style="width: 12%; text-align: right; white-space: nowrap;" class="sortable" id="thCol_commits" onclick="sortTableByColumn('commits')" title="Sort by Total Commits">
                <span>Commits</span>
                <span class="sort-icon" id="sortIcon_commits">&varr;</span>
              </th>
              <th style="width: 12%; text-align: right; white-space: nowrap;" class="sortable sorted-desc" id="thCol_candidates" onclick="sortTableByColumn('candidates')" title="Sort by Candidate Commits">
                <span>Candidates</span>
                <span class="sort-icon" id="sortIcon_candidates">&darr;</span>
              </th>
              <th style="width: 16%; text-align: right; white-space: nowrap;">Action</th>
            </tr>
          </thead>
          <tbody id="repoCompactTableBody">
            {% for summary in evol_summaries[:15] %}
              {% set latest = summary.latest or {} %}
              {% set prim_pair = latest.primary_migration_pair %}
              {% set repo_name = summary.repo_name or 'Repository' %}
              {% set repo_slug = summary.slug or repo_name|replace('/', '_') %}
              {% set repo_path = latest.repo_path or repo_name %}
              {% set repo_url = repo_path if (repo_path.startswith('http://') or repo_path.startswith('https://')) else ('https://github.com/' ~ repo_name if '/' in repo_name else repo_path) %}
              {% set cand_num = prim_pair.candidate_count if prim_pair else (latest.candidates_count or 0) %}
              <tr>
                <td>
                  <div style="display: flex; align-items: center; gap: 0.45rem; min-width: 0;">
                    <button type="button" class="btn-copy-commit" onclick="window.copyTextToClipboard('{{ repo_url }}', this, '📋 Copied URL: {{ repo_url }}')" title="Copy repository URL" style="padding: 0.08rem 0.32rem; font-size: 0.65rem; flex-shrink: 0;">📋</button>
                    {% if repo_url.startswith('http') %}
                      <a href="{{ repo_url }}" target="_blank" rel="noopener noreferrer" style="font-weight: 700; color: #0f172a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" class="repo-name-link" title="{{ repo_name }} (Open in GitHub)">{{ repo_name }}</a>
                    {% else %}
                      <span style="font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ repo_name }}">{{ repo_name }}</span>
                    {% endif %}
                  </div>
                </td>
                <td>
                  {% if prim_pair and prim_pair.source_language and prim_pair.target_language %}
                    <span class="badge" style="background: #ecfdf5; color: #047857; font-weight: 700; border: 1px solid #a7f3d0; font-size: 0.72rem; padding: 0.18rem 0.45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;" title="{{ prim_pair.source_language }} &rarr; {{ prim_pair.target_language }}">
                      {{ prim_pair.source_language }} &rarr; {{ prim_pair.target_language }}
                    </span>
                  {% else %}
                    <span class="badge" style="background: var(--bg-surface-alt); color: #64748b; font-weight: 600; border: 1px solid var(--border-subtle); font-size: 0.72rem; padding: 0.18rem 0.45rem;">
                      Polyglot / None
                    </span>
                  {% endif %}
                </td>
                <td style="text-align: right; font-weight: 600; color: #334155;">{{ (latest.total_commits_in_range or 0)|number_format }}</td>
                <td style="text-align: right; font-weight: 800; color: #4f46e5;">{{ cand_num }}</td>
                <td style="text-align: right;">
                  <a href="{{ repo_slug }}/evolution_latest.html" class="timeline-btn" title="View Evolution Details">
                    <span>Details</span>
                    <span>&rarr;</span>
                  </a>
                </td>
              </tr>
            {% else %}
              {% for i in range(5) %}
              <tr>
                <td colspan="5"><div class="skeleton-shimmer skeleton-line" style="height: 24px;"></div></td>
              </tr>
              {% endfor %}
            {% endfor %}
          </tbody>
        </table>
      </div>

      <!-- Table Pagination Footer -->
      <div id="compactTablePaginationWrapper" class="pagination-footer-wrapper" style="margin-top: 1rem; display: flex; justify-content: space-between; align-items: center;">
        <div id="compactTablePaginationInfo" class="pagination-info-text" style="font-size: 0.8rem; color: var(--text-muted);">
          Showing 1–15 of {{ migration_count }} projects
        </div>
        <div id="compactTablePaginationControls" style="display: flex; align-items: center; gap: 0.35rem;"></div>
      </div>
    </div>

  </main>
</div>

<!-- =========================================================================
     WORKSPACE 2: Empirical Analytics Studio (Thesis Views & Heuristics)
     ========================================================================= -->
<div id="workspacePane_studio" style="display: none; margin-bottom: 3.5rem;">
  <div class="card" style="background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: 1.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);">
    <!-- Studio Header -->
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-subtle);">
      <div>
        <div style="display: flex; align-items: center; gap: 0.5rem; color: var(--primary); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem;">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.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>
          Empirical Thesis & Research Analytics Studio
        </div>
        <h2 style="font-size: 1.35rem; font-weight: 800; color: var(--text-primary); margin: 0; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.65rem;">
          Migration Dynamics & Empirical Distributions
          <span id="kpiActiveCountBadge" class="badge" style="background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary-border); font-size: 0.75rem; font-weight: 700;">{{ migration_count }} Migrations</span>
        </h2>
        
        <div style="display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-top: 0.6rem;">
          <span class="badge" style="background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary-border); font-weight: 700; padding: 0.2rem 0.6rem; font-size: 0.76rem;">
            <span id="kpiStatMigrations">{{ migration_count }}</span> Confirmed Migrations
          </span>
          <span class="badge" style="background: var(--bg-surface-alt); color: var(--text-secondary); border: 1px solid var(--border-subtle); font-weight: 600; padding: 0.2rem 0.6rem; font-size: 0.76rem;">
            Top Pair: <strong id="kpiStatTopPair" style="color: var(--primary); margin-left: 0.25rem;">{% if top_pairs %}{{ top_pairs[0].pair }} ({{ top_pairs[0].pct }}%){% else %}None{% endif %}</strong>
          </span>
          <span class="badge" style="background: var(--bg-surface-alt); color: var(--text-secondary); border: 1px solid var(--border-subtle); font-weight: 600; padding: 0.2rem 0.6rem; font-size: 0.76rem;">
            Dominant: <strong id="kpiStatTopArch" style="color: var(--success); margin-left: 0.25rem;">{% if top_archetypes %}{{ top_archetypes[0].archetype }}{% else %}None{% endif %}</strong>
          </span>
          <span class="badge" style="background: var(--bg-surface-alt); color: var(--text-secondary); border: 1px solid var(--border-subtle); font-weight: 600; padding: 0.2rem 0.6rem; font-size: 0.76rem;">
            Mean Commits: <strong id="kpiStatAvgCommits" style="color: var(--accent); margin-left: 0.25rem;">{% set proj_total = total_projects_count|default(evol_summaries|length) %}{% if proj_total > 0 %}{{ (total_commits_sum // proj_total)|number_format }}{% else %}0{% endif %}</strong>
          </span>
        </div>
      </div>

      <!-- Export Buttons -->
      <div style="display: inline-flex; align-items: center; background: #ffffff; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 0.2rem; box-shadow: 0 1px 2px rgba(0,0,0,0.03); gap: 0.25rem;">
        <button type="button" class="btn btn-secondary" onclick="exportActiveChartPng()" style="border: none; background: transparent; font-size: 0.78rem; padding: 0.4rem 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem;" title="Download publication-ready figure (PNG)">
          <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
          <span>High-Res PNG</span>
        </button>
        <div style="width: 1px; height: 18px; background: var(--border-subtle);"></div>
        <button type="button" class="btn btn-secondary" onclick="exportMigrationsCsv()" style="border: none; background: transparent; font-size: 0.78rem; padding: 0.4rem 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem;" title="Export dataset to CSV">
          <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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>CSV</span>
        </button>
        <div style="width: 1px; height: 18px; background: var(--border-subtle);"></div>
        <button type="button" class="btn btn-secondary" onclick="copyLatexTable()" id="copyLatexBtn" style="border: none; background: transparent; font-size: 0.78rem; padding: 0.4rem 0.75rem; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 0.35rem;" title="Copy LaTeX formatted snippet">
          <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="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
          <span>LaTeX Table</span>
        </button>
      </div>
    </div>

    <!-- Studio 2-Column: Views Navigation + Spotlight Stage -->
    <div style="display: grid; grid-template-columns: 290px 1fr; gap: 1.25rem; align-items: start;">
      <!-- Sidebar Views -->
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        <div class="studio-sidebar-panel">
          <div class="studio-sidebar-header">
            <span>Analytics Views</span>
          </div>
          <div style="display: flex; flex-direction: column;" id="graphSelectorList">
            <button type="button" class="graph-nav-btn active" onclick="switchMainGraph('pairs')" id="navBtn_pairs">
              <div class="nav-icon" style="background: var(--primary-light); color: var(--primary);">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
              </div>
              <div style="text-align: left; flex: 1; min-width: 0;">
                <div class="nav-title">Transition Ecosystems</div>
                <div class="nav-desc">Source &rarr; Target pair ranking</div>
              </div>
            </button>
            <button type="button" class="graph-nav-btn" onclick="switchMainGraph('archetypes')" id="navBtn_archetypes">
              <div class="nav-icon" style="background: var(--success-light); color: var(--success);">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"/></svg>
              </div>
              <div style="text-align: left; flex: 1; min-width: 0;">
                <div class="nav-title">Turnover Archetypes</div>
                <div class="nav-desc">Replacement mechanics</div>
              </div>
            </button>
            <button type="button" class="graph-nav-btn" onclick="switchMainGraph('stars')" id="navBtn_stars">
              <div class="nav-icon" style="background: var(--accent-light); color: var(--accent);">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.196-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
              </div>
              <div style="text-align: left; flex: 1; min-width: 0;">
                <div class="nav-title">Stars vs Migrations</div>
                <div class="nav-desc">GitHub popularity brackets</div>
              </div>
            </button>
            <button type="button" class="graph-nav-btn" onclick="switchMainGraph('commits')" id="navBtn_commits">
              <div class="nav-icon" style="background: var(--warning-light); color: var(--warning);">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" stroke-width="2.2"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M3 12h6m6 0h6"/></svg>
              </div>
              <div style="text-align: left; flex: 1; min-width: 0;">
                <div class="nav-title">Commit Depth Scale</div>
                <div class="nav-desc">Evolutionary milestone brackets</div>
              </div>
            </button>
            <button type="button" class="graph-nav-btn" onclick="switchMainGraph('source_langs')" id="navBtn_source_langs">
              <div class="nav-icon" style="background: #fdf4ff; color: #c026d3;">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
              </div>
              <div style="text-align: left; flex: 1; min-width: 0;">
                <div class="nav-title">Displaced Technologies</div>
                <div class="nav-desc">Source language breakdown</div>
              </div>
            </button>
            <button type="button" class="graph-nav-btn" onclick="switchMainGraph('confidence')" id="navBtn_confidence">
              <div class="nav-icon" style="background: var(--danger-light); color: var(--danger);">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
              </div>
              <div style="text-align: left; flex: 1; min-width: 0;">
                <div class="nav-title">Confidence Spectrum</div>
                <div class="nav-desc">Empirical certainty tiers</div>
              </div>
            </button>
          </div>
        </div>
      </div>

      <!-- Spotlight Stage -->
      <div class="spotlight-stage">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border-subtle);">
          <div>
            <h3 id="spotlightTitle" style="font-size: 1.15rem; font-weight: 800; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 0.4rem;">
              Top Language Transition Ecosystems
            </h3>
            <p id="spotlightDesc" style="font-size: 0.8rem; color: var(--text-muted); margin: 0.15rem 0 0 0;">
              Source &rarr; Target migration frequency ranking across active dataset.
            </p>
          </div>
          <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
            <div style="display: inline-flex; background: var(--bg-surface-alt); padding: 0.15rem; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);">
              <button type="button" class="chart-type-pill active" onclick="setChartType('bar')" id="chartTypeBtn_bar">Bars</button>
              <button type="button" class="chart-type-pill" onclick="setChartType('doughnut')" id="chartTypeBtn_doughnut">Ring</button>
              <button type="button" class="chart-type-pill" onclick="setChartType('line')" id="chartTypeBtn_line">Trend</button>
            </div>
            <select id="stageTopNSelect" class="stage-select-input" onchange="onStageConfigChange()">
              <option value="5">Top 5</option>
              <option value="8" selected>Top 8</option>
              <option value="12">Top 12</option>
              <option value="all">All Items</option>
            </select>
            <select id="stageSortSelect" class="stage-select-input" onchange="onStageConfigChange()">
              <option value="desc" selected>Highest First</option>
              <option value="asc">Lowest First</option>
              <option value="alpha">A-Z Name</option>
            </select>
          </div>
        </div>

        <div style="position: relative; height: 380px; width: 100%; min-height: 380px;">
          <canvas id="mainSpotlightCanvas"></canvas>
        </div>

        <!-- Quick Secondary Previews Row -->
        <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle);">
          <div style="font-size: 0.72rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.65rem;">
            Quick Distribution Previews (Click to Spotlight)
          </div>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem;">
            <div class="mini-preview-card" onclick="switchMainGraph('archetypes')">
              <div style="font-size: 0.7rem; font-weight: 700; color: var(--text-muted);">Archetypes Breakdown</div>
              <div id="miniVal_archetypes" style="font-size: 1rem; font-weight: 800; color: var(--success); margin-top: 0.2rem;">-</div>
            </div>
            <div class="mini-preview-card" onclick="switchMainGraph('stars')">
              <div style="font-size: 0.7rem; font-weight: 700; color: var(--text-muted);">Star Tier Distribution</div>
              <div id="miniVal_stars" style="font-size: 1rem; font-weight: 800; color: var(--accent); margin-top: 0.2rem;">-</div>
            </div>
            <div class="mini-preview-card" onclick="switchMainGraph('commits')">
              <div style="font-size: 0.7rem; font-weight: 700; color: var(--text-muted);">Commit Depth Scale</div>
              <div id="miniVal_commits" style="font-size: 1rem; font-weight: 800; color: var(--warning); margin-top: 0.2rem;">-</div>
            </div>
            <div class="mini-preview-card" onclick="switchMainGraph('source_langs')">
              <div style="font-size: 0.7rem; font-weight: 700; color: var(--text-muted);">Top Source Language</div>
              <div id="miniVal_source" style="font-size: 1rem; font-weight: 800; color: #c026d3; margin-top: 0.2rem;">-</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endif %}
{% endblock %}

{% block scripts %}
<script>
  // Embedded Datasets from Backend (Lightweight Initial Page Slice)
  const INITIAL_PROJECTS = {{ evol_summaries_json|default('[]')|safe }};
  const SPOTLIGHT_STATS = {{ spotlight_stats_json|default('{}')|safe }};
  const TOTAL_BASELINE_PROJECTS = {{ total_projects_count|default(0) }};
  const TOTAL_BASELINE_MIGRATIONS = {{ migration_count|default(0) }};
  let totalProjectsCount = TOTAL_BASELINE_MIGRATIONS;

  // State Management
  const ROWS_PER_PAGE = 15;

  let currentWorkspaceTab = 'explorer'; // 'explorer', 'studio'
  let currentSortColumn = 'candidates'; // 'candidates', 'name', 'commits', 'pair'
  let currentSortDirection = 'desc'; // 'desc', 'asc'
  let currentCompactTablePage = 1;
  let filteredSummaries = [...INITIAL_PROJECTS];
  let activeSearchDebounce = null;
  let selectedPairs = new Set();
  let allAvailablePairs = [];
  let selectedSources = new Set();
  let allAvailableSources = [];
  let selectedTargets = new Set();
  let allAvailableTargets = [];
  let sectionCollapsed = { pairs: false, sources: true, targets: true };

  // Active Studio State
  let currentMainView = 'pairs'; // 'pairs', 'archetypes', 'stars', 'commits', 'source_langs', 'confidence'
  let currentChartType = 'bar'; // 'bar', 'doughnut', 'line'
  let spotlightChartInstance = null;

  const VIEW_META = {
    pairs: {
      title: 'Top Language Transition Ecosystems',
      desc: 'Source \u2794 Target migration frequency ranking across active filtered dataset.'
    },
    archetypes: {
      title: 'Migration Archetypes Distribution',
      desc: 'Classification of replacement mechanics (Direct File Replacement, Incremental, etc.).'
    },
    stars: {
      title: 'Repository Popularity vs Migration Density',
      desc: 'Distribution of confirmed migrations across GitHub star tiers.'
    },
    commits: {
      title: 'Commit History Scale Distribution',
      desc: 'Total evolutionary commit depth across analyzed projects.'
    },
    source_langs: {
      title: 'Displaced Technologies (Source Languages)',
      desc: 'Breakdown of originating technologies being migrated away from.'
    },
    confidence: {
      title: 'Heuristic Confidence Spectrum',
      desc: 'Empirical confidence distribution of detected cross-language transitions.'
    }
  };

  // Safe Studio Bootloader with Persistent State Hydration
  function bootStudio() {
    try {
      const savedState = EvolutionCache.loadState();
      if (savedState) {
        // Restore search query
        const searchInput = document.getElementById('evolSearchInput');
        if (searchInput && savedState.q) {
          searchInput.value = savedState.q;
          const clearBtn = document.getElementById('searchClearBtn');
          const hint = document.getElementById('searchShortcutHint');
          if (clearBtn) clearBtn.style.display = 'inline-flex';
          if (hint) hint.style.display = 'none';
        }

        // Restore status (default: 'migrations_only')
        setMigrationStatus(savedState.status || 'migrations_only', false);

        // Restore candidate threshold
        if (savedState.minCandidates !== undefined) {
          setMinCandidates(savedState.minCandidates, false);
        } else {
          setMinCandidates(0, false);
        }

        // Restore sort column & direction
        if (savedState.sortCol) currentSortColumn = savedState.sortCol;
        if (savedState.sortDir) currentSortDirection = savedState.sortDir;

        // Restore selected sets
        if (Array.isArray(savedState.selectedPairs)) {
          selectedPairs = new Set(savedState.selectedPairs);
        }
        if (Array.isArray(savedState.selectedSources)) {
          selectedSources = new Set(savedState.selectedSources);
        }
        if (Array.isArray(savedState.selectedTargets)) {
          selectedTargets = new Set(savedState.selectedTargets);
        }

        // Restore collapsible section accordion state
        if (savedState.sectionCollapsed && typeof savedState.sectionCollapsed === 'object') {
          sectionCollapsed = { ...sectionCollapsed, ...savedState.sectionCollapsed };
        }

        // Restore active views & pages
        if (savedState.mainView) currentMainView = savedState.mainView;
        if (savedState.chartType) currentChartType = savedState.chartType;
        if (savedState.compactTablePage) currentCompactTablePage = savedState.compactTablePage;

        // Apply UI accordions state
        ['pairs', 'sources', 'targets'].forEach(k => updateCollapsibleSectionUI(k));

        // Populate rail facets with checkboxes
        populateRailPairs();
        populateRailSources();
        populateRailTargets();

        // Restore workspace tab
        if (savedState.activeTab && (savedState.activeTab === 'explorer' || savedState.activeTab === 'studio')) {
          switchWorkspaceTab(savedState.activeTab);
        }
      } else {
        setMigrationStatus('migrations_only', false);
        setMinCandidates(0, false);
        ['pairs', 'sources', 'targets'].forEach(k => updateCollapsibleSectionUI(k));
        populateRailPairs();
        populateRailSources();
        populateRailTargets();
      }

      updateTableSortIcons();
      applyEvolutionFilters();
    } catch (err) {
      console.error('[PolyglotMiner] Studio boot error:', err);
    }
  }

  // Register Global Event Listeners (Keyboard shortcuts)
  document.addEventListener('keydown', (e) => {
    if (e.key === '/' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName)) {
      e.preventDefault();
      const input = document.getElementById('evolSearchInput');
      if (input) {
        input.focus();
        input.select();
      }
    }
  });

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', bootStudio);
  } else {
    bootStudio();
  }
  window.addEventListener('load', () => {
    try {
      renderSpotlightChart();
    } catch (e) {}
  });

  function switchMainGraph(viewKey) {
    currentMainView = viewKey;
    
    // Update active nav button
    document.querySelectorAll('.graph-nav-btn').forEach(btn => btn.classList.remove('active'));
    const activeBtn = document.getElementById(`navBtn_${viewKey}`);
    if (activeBtn) activeBtn.classList.add('active');

    // Update Header
    const meta = VIEW_META[viewKey] || VIEW_META.pairs;
    const titleEl = document.getElementById('spotlightTitle');
    const descEl = document.getElementById('spotlightDesc');
    if (titleEl) titleEl.textContent = meta.title;
    if (descEl) descEl.textContent = meta.desc;

    renderSpotlightChart();
  }

  function setChartType(typeKey) {
    currentChartType = typeKey;
    document.querySelectorAll('.chart-type-pill').forEach(btn => btn.classList.remove('active'));
    const activeBtn = document.getElementById(`chartTypeBtn_${typeKey}`);
    if (activeBtn) activeBtn.classList.add('active');

    renderSpotlightChart();
  }

  function onStageConfigChange() {
    renderSpotlightChart();
  }

  function evaluateMigrationHeuristics(item) {
    const latest = item.latest || item;
    const primPair = latest.primary_migration_pair;
    if (!primPair || !primPair.source_language || !primPair.target_language || primPair.source_language === primPair.target_language) {
      return { isMigration: false, candCount: latest.candidates_count || 0, conf: 0, arch: '', primPair: null, passesPairs: false, passesConf: false, passesArch: false };
    }
    const candCount = primPair.candidate_count || primPair.file_replacements_count || latest.candidates_count || 1;
    const conf = primPair.confidence !== undefined ? primPair.confidence : 85.0;
    const arch = primPair.archetype || 'Direct File Replacement';
    const isMigration = true;

    return { isMigration, candCount, conf, arch, primPair, passesPairs: true, passesConf: true, passesArch: true };
  }

  // =========================================================================
  // PolyglotMiner Client-Side State & Performance Cache System
  // =========================================================================
  const EVOL_CACHE_KEY_STATE = 'polyglotminer_evol_state_v2';
  const EVOL_CACHE_KEY_API_PREFIX = 'polyglotminer_evol_api_';
  const API_CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes TTL

  // Fast In-Memory Query Cache Map
  const apiMemoryCache = new Map();

  function escapeHtml(str) {
    if (!str) return '';
    return String(str)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }

  const EvolutionCache = {
    // 1. UI State Persistence (sessionStorage)
    saveState: function() {
      try {
        const state = {
          q: (document.getElementById('evolSearchInput')?.value || '').trim(),
          status: document.getElementById('filterMigrationStatus')?.value || 'migrations_only',
          selectedPairs: Array.from(selectedPairs),
          selectedSources: Array.from(selectedSources),
          selectedTargets: Array.from(selectedTargets),
          sectionCollapsed: sectionCollapsed,
          minCandidates: parseInt(document.getElementById('filterMinCandidates')?.value || '0', 10),
          activeTab: currentWorkspaceTab,
          sortCol: currentSortColumn,
          sortDir: currentSortDirection,
          compactTablePage: currentCompactTablePage,
          mainView: currentMainView,
          chartType: currentChartType,
          savedAt: Date.now()
        };
        sessionStorage.setItem(EVOL_CACHE_KEY_STATE, JSON.stringify(state));
      } catch (e) {
        console.debug('[Cache] Unable to save filter state to sessionStorage:', e);
      }
    },

    loadState: function() {
      try {
        const raw = sessionStorage.getItem(EVOL_CACHE_KEY_STATE);
        if (!raw) return null;
        const state = JSON.parse(raw);
        if (state.savedAt && (Date.now() - state.savedAt > 2 * 3600 * 1000)) {
          sessionStorage.removeItem(EVOL_CACHE_KEY_STATE);
          return null;
        }
        return state;
      } catch (e) {
        return null;
      }
    },

    clearState: function() {
      try {
        sessionStorage.removeItem(EVOL_CACHE_KEY_STATE);
      } catch (e) {}
    },

    // 2. Query Results Caching (In-memory + Session fallback)
    getQueryCacheKey: function(payload) {
      const pairKey = Array.isArray(payload.pair) ? payload.pair.join(',') : (payload.pair || 'all');
      const srcKey = Array.isArray(payload.source) ? payload.source.join(',') : (payload.source || 'all');
      const tgtKey = Array.isArray(payload.target) ? payload.target.join(',') : (payload.target || 'all');
      return `${payload.view}_q:${payload.query || ''}_s:${payload.status}_p:${pairKey}_src:${srcKey}_tgt:${tgtKey}_c:${payload.min_candidates}_sort:${payload.sort_by}_dir:${payload.sort_order}_pg:${payload.page}_sz:${payload.page_size}`;
    },

    getApiData: function(key) {
      const memHit = apiMemoryCache.get(key);
      if (memHit && (Date.now() - memHit.timestamp < API_CACHE_TTL_MS)) {
        return memHit.data;
      }
      try {
        const sessRaw = sessionStorage.getItem(EVOL_CACHE_KEY_API_PREFIX + key);
        if (sessRaw) {
          const parsed = JSON.parse(sessRaw);
          if (Date.now() - parsed.timestamp < API_CACHE_TTL_MS) {
            apiMemoryCache.set(key, parsed);
            return parsed.data;
          } else {
            sessionStorage.removeItem(EVOL_CACHE_KEY_API_PREFIX + key);
          }
        }
      } catch (e) {}
      return null;
    },

    setApiData: function(key, data) {
      const entry = { data: data, timestamp: Date.now() };
      apiMemoryCache.set(key, entry);
      if (apiMemoryCache.size > 80) {
        const firstKey = apiMemoryCache.keys().next().value;
        apiMemoryCache.delete(firstKey);
      }
      try {
        sessionStorage.setItem(EVOL_CACHE_KEY_API_PREFIX + key, JSON.stringify(entry));
      } catch (e) {
        this.pruneSessionCache();
      }
    },

    pruneSessionCache: function() {
      try {
        const keysToRemove = [];
        for (let i = 0; i < sessionStorage.length; i++) {
          const k = sessionStorage.key(i);
          if (k && k.startsWith(EVOL_CACHE_KEY_API_PREFIX)) {
            keysToRemove.push(k);
          }
        }
        keysToRemove.slice(0, Math.floor(keysToRemove.length / 2)).forEach(k => sessionStorage.removeItem(k));
      } catch (e) {}
    }
  };

  // =========================================================================
  // Workspace Tabs & View Modes Control
  // =========================================================================
  function switchWorkspaceTab(tabKey) {
    currentWorkspaceTab = tabKey;
    ['explorer', 'studio'].forEach(k => {
      const btn = document.getElementById(`tabBtn_${k}`);
      const pane = document.getElementById(`workspacePane_${k}`);
      if (btn) {
        if (k === tabKey) {
          btn.classList.add('active');
          btn.setAttribute('aria-selected', 'true');
        } else {
          btn.classList.remove('active');
          btn.setAttribute('aria-selected', 'false');
        }
      }
      if (pane) {
        if (k === tabKey) {
          pane.style.display = (k === 'explorer') ? 'grid' : 'block';
        } else {
          pane.style.display = 'none';
        }
      }
    });

    if (tabKey === 'studio') {
      try {
        renderSpotlightChart();
      } catch (e) {}
    }

    EvolutionCache.saveState();
  }

  // =========================================================================
  // Table Sorting (Repository, Primary Migration, Commits, Candidates)
  // =========================================================================
  function sortTableByColumn(colKey) {
    if (currentSortColumn === colKey) {
      currentSortDirection = (currentSortDirection === 'asc') ? 'desc' : 'asc';
    } else {
      currentSortColumn = colKey;
      currentSortDirection = (colKey === 'name') ? 'asc' : 'desc';
    }
    updateTableSortIcons();
    currentCompactTablePage = 1;
    applyEvolutionFilters();
  }

  function updateTableSortIcons() {
    const cols = ['name', 'pair', 'commits', 'candidates'];
    cols.forEach(col => {
      const th = document.getElementById(`thCol_${col}`);
      const icon = document.getElementById(`sortIcon_${col}`);
      if (th) {
        th.classList.remove('sorted-asc', 'sorted-desc');
        if (col === currentSortColumn) {
          th.classList.add(currentSortDirection === 'asc' ? 'sorted-asc' : 'sorted-desc');
        }
      }
      if (icon) {
        if (col === currentSortColumn) {
          icon.innerHTML = currentSortDirection === 'asc' ? '&uarr;' : '&darr;';
        } else {
          icon.innerHTML = '&varr;';
        }
      }
    });
  }

  function sortFilteredSummaries() {
    if (!filteredSummaries || filteredSummaries.length === 0) return;
    const dir = currentSortDirection === 'asc' ? 1 : -1;

    filteredSummaries.sort((a, b) => {
      const latestA = a.latest || a;
      const latestB = b.latest || b;
      const evalA = evaluateMigrationHeuristics(a);
      const evalB = evaluateMigrationHeuristics(b);

      if (currentSortColumn === 'name') {
        const nameA = a.repo_name || '';
        const nameB = b.repo_name || '';
        return dir * nameA.localeCompare(nameB);
      } else if (currentSortColumn === 'pair') {
        const pA = evalA.primPair ? `${evalA.primPair.source_language} -> ${evalA.primPair.target_language}` : '';
        const pB = evalB.primPair ? `${evalB.primPair.source_language} -> ${evalB.primPair.target_language}` : '';
        return dir * pA.localeCompare(pB);
      } else if (currentSortColumn === 'commits') {
        const cA = latestA.total_commits_in_range || 0;
        const cB = latestB.total_commits_in_range || 0;
        return dir * (cA - cB);
      } else {
        // candidates (default)
        const candA = evalA.candCount || 0;
        const candB = evalB.candCount || 0;
        if (candB !== candA) return dir * (candA - candB);
        return dir * ((latestA.total_commits_in_range || 0) - (latestB.total_commits_in_range || 0));
      }
    });
  }

  // =========================================================================
  // Collapsible Accordions Control
  // =========================================================================
  function toggleRailSection(sectionKey) {
    sectionCollapsed[sectionKey] = !sectionCollapsed[sectionKey];
    updateCollapsibleSectionUI(sectionKey);
    EvolutionCache.saveState();
  }

  function updateCollapsibleSectionUI(sectionKey) {
    const isCollapsed = !!sectionCollapsed[sectionKey];
    const body = document.getElementById(`body_${sectionKey}`);
    const chevron = document.getElementById(`chevron_${sectionKey}`);
    if (body) {
      if (isCollapsed) body.classList.add('collapsed');
      else body.classList.remove('collapsed');
    }
    if (chevron) {
      if (isCollapsed) chevron.classList.add('collapsed');
      else chevron.classList.remove('collapsed');
    }
  }

  // =========================================================================
  // Faceted Rail Controls: Status, Candidates & 3 Accordion Checkbox Lists
  // =========================================================================
  function setMigrationStatus(statusVal, triggerChange = true) {
    const input = document.getElementById('filterMigrationStatus');
    if (input) input.value = statusVal;

    ['migrations_only', 'all', 'polyglot_only'].forEach(s => {
      const facet = document.getElementById(`statusFacet_${s}`);
      if (facet) {
        if (s === statusVal) facet.classList.add('active');
        else facet.classList.remove('active');
      }
    });

    if (triggerChange) {
      currentCompactTablePage = 1;
      onEvolutionFilterChange(true);
    }
  }

  function setMinCandidates(candVal, triggerChange = true) {
    const val = Math.max(0, parseInt(candVal, 10) || 0);
    const input = document.getElementById('filterMinCandidates');
    if (input) input.value = val;

    const numInput = document.getElementById('candNumberInput');
    if (numInput && parseInt(numInput.value, 10) !== val) numInput.value = val;

    [0, 1, 10, 25, 50].forEach(c => {
      const chip = document.getElementById(`candChip_${c}`);
      if (chip) {
        if (c === val) chip.classList.add('active');
        else chip.classList.remove('active');
      }
    });

    if (triggerChange) {
      currentCompactTablePage = 1;
      onEvolutionFilterChange(true);
    }
  }

  function onCandInputChange(val) {
    const v = Math.max(0, parseInt(val, 10) || 0);
    setMinCandidates(v, false);
    onEvolutionFilterChange(false);
  }

  // 1. Transition Pairs Facet
  function populateRailPairs() {
    const pairCounts = {};
    const corpus = (INITIAL_PROJECTS && INITIAL_PROJECTS.length > 0) ? INITIAL_PROJECTS : filteredSummaries;

    corpus.forEach(s => {
      const evalRes = evaluateMigrationHeuristics(s);
      if (evalRes.isMigration && evalRes.primPair) {
        const key = `${evalRes.primPair.source_language} -> ${evalRes.primPair.target_language}`;
        pairCounts[key] = (pairCounts[key] || 0) + 1;
      }
    });

    allAvailablePairs = Object.keys(pairCounts).sort((a, b) => {
      if (pairCounts[b] !== pairCounts[a]) return pairCounts[b] - pairCounts[a];
      return a.localeCompare(b);
    });

    const badge = document.getElementById('badge_pairs_count');
    if (badge) badge.textContent = allAvailablePairs.length;

    if (!window._selectedPairsInitialized) {
      if (selectedPairs.size === 0) selectedPairs = new Set(allAvailablePairs);
      window._selectedPairsInitialized = true;
    }

    const railList = document.getElementById('railPairList');
    if (railList) {
      let html = '';
      allAvailablePairs.forEach(pairKey => {
        const count = pairCounts[pairKey] || 0;
        const parts = pairKey.split('->').map(s => s.trim());
        const isChecked = selectedPairs.has(pairKey);

        html += `
          <label class="rail-pair-item" data-pair="${escapeHtml(pairKey)}">
            <div style="display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; overflow: hidden;">
              <input type="checkbox" class="rail-pair-checkbox" value="${escapeHtml(pairKey)}" ${isChecked ? 'checked' : ''} onchange="onPairCheckboxChange('${escapeHtml(pairKey)}', this.checked)">
              <span style="display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                <span class="pair-lang-badge">${escapeHtml(parts[0] || '')}</span>
                <span style="color: #94a3b8; font-weight: 700; font-size: 0.7rem;">&rarr;</span>
                <span class="pair-lang-badge target">${escapeHtml(parts[1] || '')}</span>
              </span>
            </div>
            <span class="facet-count">${count}</span>
          </label>
        `;
      });
      railList.innerHTML = html;
    }
  }

  function onPairCheckboxChange(pairKey, isChecked) {
    if (isChecked) selectedPairs.add(pairKey);
    else selectedPairs.delete(pairKey);
    currentCompactTablePage = 1;
    onEvolutionFilterChange(true);
  }

  function selectAllPairs() {
    selectedPairs = new Set(allAvailablePairs);
    document.querySelectorAll('#railPairList .rail-pair-checkbox').forEach(cb => cb.checked = true);
    currentCompactTablePage = 1;
    onEvolutionFilterChange(true);
  }

  function unselectAllPairs() {
    selectedPairs.clear();
    document.querySelectorAll('#railPairList .rail-pair-checkbox').forEach(cb => cb.checked = false);
    currentCompactTablePage = 1;
    onEvolutionFilterChange(true);
  }

  function filterRailPairs(q) {
    const filterText = (q || '').trim().toLowerCase();
    document.querySelectorAll('#railPairList .rail-pair-item').forEach(item => {
      const pairKey = (item.getAttribute('data-pair') || '').toLowerCase();
      item.style.display = (!filterText || pairKey.includes(filterText)) ? 'flex' : 'none';
    });
  }

  // 2. Source Languages Facet
  function populateRailSources() {
    const sourceCounts = {};
    const corpus = (INITIAL_PROJECTS && INITIAL_PROJECTS.length > 0) ? INITIAL_PROJECTS : filteredSummaries;

    corpus.forEach(s => {
      const evalRes = evaluateMigrationHeuristics(s);
      if (evalRes.isMigration && evalRes.primPair && evalRes.primPair.source_language) {
        const src = evalRes.primPair.source_language;
        sourceCounts[src] = (sourceCounts[src] || 0) + 1;
      }
    });

    allAvailableSources = Object.keys(sourceCounts).sort((a, b) => {
      if (sourceCounts[b] !== sourceCounts[a]) return sourceCounts[b] - sourceCounts[a];
      return a.localeCompare(b);
    });

    const badge = document.getElementById('badge_sources_count');
    if (badge) badge.textContent = allAvailableSources.length;

    if (!window._selectedSourcesInitialized) {
      if (selectedSources.size === 0) selectedSources = new Set(allAvailableSources);
      window._selectedSourcesInitialized = true;
    }

    const railList = document.getElementById('railSourceList');
    if (railList) {
      let html = '';
      allAvailableSources.forEach(srcKey => {
        const count = sourceCounts[srcKey] || 0;
        const isChecked = selectedSources.has(srcKey);

        html += `
          <label class="rail-pair-item" data-source="${escapeHtml(srcKey)}">
            <div style="display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; overflow: hidden;">
              <input type="checkbox" class="rail-pair-checkbox" value="${escapeHtml(srcKey)}" ${isChecked ? 'checked' : ''} onchange="onSourceCheckboxChange('${escapeHtml(srcKey)}', this.checked)">
              <span class="pair-lang-badge">${escapeHtml(srcKey)}</span>
            </div>
            <span class="facet-count">${count}</span>
          </label>
        `;
      });
      railList.innerHTML = html;
    }
  }

  function onSourceCheckboxChange(srcKey, isChecked) {
    if (isChecked) selectedSources.add(srcKey);
    else selectedSources.delete(srcKey);
    currentCompactTablePage = 1;
    onEvolutionFilterChange(true);
  }

  function selectAllSources() {
    selectedSources = new Set(allAvailableSources);
    document.querySelectorAll('#railSourceList .rail-pair-checkbox').forEach(cb => cb.checked = true);
    currentCompactTablePage = 1;
    onEvolutionFilterChange(true);
  }

  function unselectAllSources() {
    selectedSources.clear();
    document.querySelectorAll('#railSourceList .rail-pair-checkbox').forEach(cb => cb.checked = false);
    currentCompactTablePage = 1;
    onEvolutionFilterChange(true);
  }

  function filterRailSources(q) {
    const filterText = (q || '').trim().toLowerCase();
    document.querySelectorAll('#railSourceList .rail-pair-item').forEach(item => {
      const srcKey = (item.getAttribute('data-source') || '').toLowerCase();
      item.style.display = (!filterText || srcKey.includes(filterText)) ? 'flex' : 'none';
    });
  }

  // 3. Destination Languages Facet
  function populateRailTargets() {
    const targetCounts = {};
    const corpus = (INITIAL_PROJECTS && INITIAL_PROJECTS.length > 0) ? INITIAL_PROJECTS : filteredSummaries;

    corpus.forEach(s => {
      const evalRes = evaluateMigrationHeuristics(s);
      if (evalRes.isMigration && evalRes.primPair && evalRes.primPair.target_language) {
        const tgt = evalRes.primPair.target_language;
        targetCounts[tgt] = (targetCounts[tgt] || 0) + 1;
      }
    });

    allAvailableTargets = Object.keys(targetCounts).sort((a, b) => {
      if (targetCounts[b] !== targetCounts[a]) return targetCounts[b] - targetCounts[a];
      return a.localeCompare(b);
    });

    const badge = document.getElementById('badge_targets_count');
    if (badge) badge.textContent = allAvailableTargets.length;

    if (!window._selectedTargetsInitialized) {
      if (selectedTargets.size === 0) selectedTargets = new Set(allAvailableTargets);
      window._selectedTargetsInitialized = true;
    }

    const railList = document.getElementById('railTargetList');
    if (railList) {
      let html = '';
      allAvailableTargets.forEach(tgtKey => {
        const count = targetCounts[tgtKey] || 0;
        const isChecked = selectedTargets.has(tgtKey);

        html += `
          <label class="rail-pair-item" data-target="${escapeHtml(tgtKey)}">
            <div style="display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; overflow: hidden;">
              <input type="checkbox" class="rail-pair-checkbox" value="${escapeHtml(tgtKey)}" ${isChecked ? 'checked' : ''} onchange="onTargetCheckboxChange('${escapeHtml(tgtKey)}', this.checked)">
              <span class="pair-lang-badge target">${escapeHtml(tgtKey)}</span>
            </div>
            <span class="facet-count">${count}</span>
          </label>
        `;
      });
      railList.innerHTML = html;
    }
  }

  function onTargetCheckboxChange(tgtKey, isChecked) {
    if (isChecked) selectedTargets.add(tgtKey);
    else selectedTargets.delete(tgtKey);
    currentCompactTablePage = 1;
    onEvolutionFilterChange(true);
  }

  function selectAllTargets() {
    selectedTargets = new Set(allAvailableTargets);
    document.querySelectorAll('#railTargetList .rail-pair-checkbox').forEach(cb => cb.checked = true);
    currentCompactTablePage = 1;
    onEvolutionFilterChange(true);
  }

  function unselectAllTargets() {
    selectedTargets.clear();
    document.querySelectorAll('#railTargetList .rail-pair-checkbox').forEach(cb => cb.checked = false);
    currentCompactTablePage = 1;
    onEvolutionFilterChange(true);
  }

  function filterRailTargets(q) {
    const filterText = (q || '').trim().toLowerCase();
    document.querySelectorAll('#railTargetList .rail-pair-item').forEach(item => {
      const tgtKey = (item.getAttribute('data-target') || '').toLowerCase();
      item.style.display = (!filterText || tgtKey.includes(filterText)) ? 'flex' : 'none';
    });
  }

  function handleSearchInputChange(val) {
    const clearBtn = document.getElementById('searchClearBtn');
    const hint = document.getElementById('searchShortcutHint');
    if (val && val.trim().length > 0) {
      if (clearBtn) clearBtn.style.display = 'inline-flex';
      if (hint) hint.style.display = 'none';
    } else {
      if (clearBtn) clearBtn.style.display = 'none';
      if (hint) hint.style.display = 'inline-block';
    }
    onEvolutionFilterChange();
  }

  function clearSearchInput() {
    const input = document.getElementById('evolSearchInput');
    if (input) {
      input.value = '';
      input.focus();
    }
    const clearBtn = document.getElementById('searchClearBtn');
    const hint = document.getElementById('searchShortcutHint');
    if (clearBtn) clearBtn.style.display = 'none';
    if (hint) hint.style.display = 'inline-block';
    onEvolutionFilterChange(true);
  }

  function updateActiveFilterTags(q, status, selectedPairsSet, selectedSourcesSet, selectedTargetsSet, minCandidates) {
    let activeCount = 0;
    const chips = [];

    if (q) {
      activeCount++;
      chips.push(`
        <span class="active-filter-tag">
          Query: "<strong>${escapeHtml(q)}</strong>"
          <button type="button" class="tag-remove" onclick="clearSearchInput()" title="Remove search filter">✕</button>
        </span>
      `);
    }

    // Default status is 'migrations_only'. If user changes it to 'all' or 'polyglot_only', show tag:
    if (status && status !== 'migrations_only') {
      activeCount++;
      const label = status === 'all' ? 'All Repositories' : 'Polyglot Only';
      chips.push(`
        <span class="active-filter-tag">
          Status: <strong>${label}</strong>
          <button type="button" class="tag-remove" onclick="setMigrationStatus('migrations_only')" title="Reset to Confirmed Migrations">✕</button>
        </span>
      `);
    }

    if (allAvailablePairs.length > 0 && selectedPairsSet && selectedPairsSet.size < allAvailablePairs.length) {
      activeCount++;
      const pairText = selectedPairsSet.size === 0
        ? 'None'
        : (selectedPairsSet.size === 1 ? Array.from(selectedPairsSet)[0] : `${selectedPairsSet.size} Selected`);
      chips.push(`
        <span class="active-filter-tag">
          Pairs: <strong>${escapeHtml(pairText)}</strong>
          <button type="button" class="tag-remove" onclick="selectAllPairs()" title="Reset to all pairs">✕</button>
        </span>
      `);
    }

    if (allAvailableSources.length > 0 && selectedSourcesSet && selectedSourcesSet.size < allAvailableSources.length) {
      activeCount++;
      const srcText = selectedSourcesSet.size === 0
        ? 'None'
        : (selectedSourcesSet.size === 1 ? Array.from(selectedSourcesSet)[0] : `${selectedSourcesSet.size} Selected`);
      chips.push(`
        <span class="active-filter-tag">
          Sources: <strong>${escapeHtml(srcText)}</strong>
          <button type="button" class="tag-remove" onclick="selectAllSources()" title="Reset to all sources">✕</button>
        </span>
      `);
    }

    if (allAvailableTargets.length > 0 && selectedTargetsSet && selectedTargetsSet.size < allAvailableTargets.length) {
      activeCount++;
      const tgtText = selectedTargetsSet.size === 0
        ? 'None'
        : (selectedTargetsSet.size === 1 ? Array.from(selectedTargetsSet)[0] : `${selectedTargetsSet.size} Selected`);
      chips.push(`
        <span class="active-filter-tag">
          Destinations: <strong>${escapeHtml(tgtText)}</strong>
          <button type="button" class="tag-remove" onclick="selectAllTargets()" title="Reset to all destinations">✕</button>
        </span>
      `);
    }

    if (minCandidates > 0) {
      activeCount++;
      chips.push(`
        <span class="active-filter-tag">
          Candidates: <strong>&ge; ${minCandidates}</strong>
          <button type="button" class="tag-remove" onclick="setMinCandidates(0)" title="Remove candidates threshold">✕</button>
        </span>
      `);
    }

    const stageActiveContainer = document.getElementById('stageActiveTagsContainer');
    if (stageActiveContainer) {
      if (activeCount > 0) {
        stageActiveContainer.innerHTML = chips.join('') + `
          <button type="button" onclick="resetEvolutionFilters()" style="background: none; border: none; font-size: 0.72rem; color: var(--primary); font-weight: 700; cursor: pointer; padding: 0.15rem 0.35rem; margin-left: 0.25rem;">Clear All</button>
        `;
        stageActiveContainer.style.display = 'inline-flex';
      } else {
        stageActiveContainer.innerHTML = '';
        stageActiveContainer.style.display = 'none';
      }
    }

    const railResetBtn = document.getElementById('railResetBtn');
    if (railResetBtn) {
      railResetBtn.style.visibility = (activeCount > 0) ? 'visible' : 'hidden';
    }
  }

  function onEvolutionFilterChange(immediate = false) {
    if (activeSearchDebounce) clearTimeout(activeSearchDebounce);
    if (immediate) {
      currentCompactTablePage = 1;
      applyEvolutionFilters();
    } else {
      activeSearchDebounce = setTimeout(() => {
        currentCompactTablePage = 1;
        applyEvolutionFilters();
      }, 250);
    }
  }

  function resetEvolutionFilters() {
    clearSearchInput();
    setMigrationStatus('migrations_only', false);
    setMinCandidates(0, false);
    selectedPairs = new Set(allAvailablePairs);
    selectedSources = new Set(allAvailableSources);
    selectedTargets = new Set(allAvailableTargets);
    currentSortColumn = 'candidates';
    currentSortDirection = 'desc';

    currentCompactTablePage = 1;
    EvolutionCache.clearState();
    populateRailPairs();
    populateRailSources();
    populateRailTargets();
    updateTableSortIcons();
    applyEvolutionFilters();
  }

  async function applyEvolutionFilters() {
    const q = (document.getElementById('evolSearchInput')?.value || '').trim();
    const status = document.getElementById('filterMigrationStatus')?.value || 'migrations_only';
    const minCandidates = parseInt(document.getElementById('filterMinCandidates')?.value || '0', 10);

    let pairPayload = "all";
    if (selectedPairs.size === 0) {
      pairPayload = "none";
    } else if (allAvailablePairs.length > 0 && selectedPairs.size < allAvailablePairs.length) {
      pairPayload = Array.from(selectedPairs);
    }

    let sourcePayload = "all";
    if (selectedSources.size === 0) {
      sourcePayload = "none";
    } else if (allAvailableSources.length > 0 && selectedSources.size < allAvailableSources.length) {
      sourcePayload = Array.from(selectedSources);
    }

    let targetPayload = "all";
    if (selectedTargets.size === 0) {
      targetPayload = "none";
    } else if (allAvailableTargets.length > 0 && selectedTargets.size < allAvailableTargets.length) {
      targetPayload = Array.from(selectedTargets);
    }

    // Update active filter badge & tag chips, then persist state
    updateActiveFilterTags(q, status, selectedPairs, selectedSources, selectedTargets, minCandidates);
    EvolutionCache.saveState();

    // Fast Server-Side API Search if hosted on HTTP with 0ms Client Cache
    if (window.location.protocol.startsWith('http')) {
      try {
        const projPayload = {
          query: q,
          status: status,
          pair: pairPayload,
          source: sourcePayload,
          target: targetPayload,
          min_candidates: minCandidates,
          min_confidence: 40,
          archetype: 'all',
          sort_by: currentSortColumn,
          sort_order: currentSortDirection,
          page: currentCompactTablePage,
          page_size: ROWS_PER_PAGE,
          view: 'projects'
        };

        const projKey = EvolutionCache.getQueryCacheKey(projPayload);
        let projData = EvolutionCache.getApiData(projKey);

        if (!projData) {
          const projRes = await fetch('/api/evolution/search', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(projPayload)
          });

          if (projRes && projRes.ok) {
            projData = await projRes.json();
            if (projData.status === 'ok') EvolutionCache.setApiData(projKey, projData);
          }
        }

        if (projData && projData.status === 'ok') {
          filteredSummaries = projData.results || [];
          totalProjectsCount = projData.total !== undefined ? projData.total : filteredSummaries.length;

          updateDashboardBadges();

          renderCompactTable();
          renderSpotlightChart();
          return;
        }
      } catch (err) {
        console.warn('[PolyglotMiner] Evolution API error, falling back to local slice:', err);
      }
    }

    // Local in-memory filtering fallback
    filteredSummaries = (INITIAL_PROJECTS || []).filter(s => {
      const latest = s.latest || {};
      const repoName = (s.repo_name || '').toLowerCase();
      const repoPath = (latest.repo_path || '').toLowerCase();
      const evalRes = evaluateMigrationHeuristics(s);
      const isConsideredMigration = evalRes.isMigration;
      const candCount = evalRes.candCount;
      const primPair = evalRes.primPair;

      if (q && !repoName.includes(q.toLowerCase()) && !repoPath.includes(q.toLowerCase())) return false;
      if (status === 'migrations_only' && !isConsideredMigration) return false;
      if (status === 'polyglot_only' && isConsideredMigration) return false;

      if (isConsideredMigration && primPair) {
        const src = primPair.source_language;
        const tgt = primPair.target_language;
        const pairKey = `${src} -> ${tgt}`;

        if (selectedPairs.size === 0) return false;
        if (selectedSources.size === 0) return false;
        if (selectedTargets.size === 0) return false;

        if (allAvailablePairs.length > 0 && !selectedPairs.has(pairKey)) return false;
        if (allAvailableSources.length > 0 && !selectedSources.has(src)) return false;
        if (allAvailableTargets.length > 0 && !selectedTargets.has(tgt)) return false;
      } else if (status === 'migrations_only') {
        return false;
      }

      if (candCount < minCandidates) return false;
      return true;
    });

    totalProjectsCount = filteredSummaries.length;

    sortFilteredSummaries();
    updateDashboardBadges();

    renderCompactTable();
    renderSpotlightChart();
  }

  function updateDashboardBadges() {
    const stageMatchCount = document.getElementById('stageMatchCount');
    if (stageMatchCount) stageMatchCount.textContent = totalProjectsCount.toLocaleString();

    const tabBadgeExplorer = document.getElementById('tabBadge_explorer');
    if (tabBadgeExplorer) tabBadgeExplorer.textContent = totalProjectsCount.toLocaleString();

    const q = (document.getElementById('evolSearchInput')?.value || '').trim().toLowerCase();

    // Maintain baseline facet counts on the left rail so selecting Confirmed Migrations doesn't overwrite All Repositories!
    let countAll = TOTAL_BASELINE_PROJECTS;
    let countMig = TOTAL_BASELINE_MIGRATIONS;
    let countPoly = Math.max(0, TOTAL_BASELINE_PROJECTS - TOTAL_BASELINE_MIGRATIONS);

    if (q) {
      countAll = 0;
      countMig = 0;
      countPoly = 0;
      (INITIAL_PROJECTS || []).forEach(s => {
        const repoName = (s.repo_name || '').toLowerCase();
        const repoPath = ((s.latest && s.latest.repo_path) || '').toLowerCase();
        if (repoName.includes(q) || repoPath.includes(q)) {
          countAll++;
          const evalRes = evaluateMigrationHeuristics(s);
          if (evalRes.isMigration) countMig++;
          else countPoly++;
        }
      });
    }

    const statusAll = document.getElementById('statusCount_all');
    if (statusAll) statusAll.textContent = countAll.toLocaleString();

    const statusMig = document.getElementById('statusCount_mig');
    if (statusMig) statusMig.textContent = countMig.toLocaleString();

    const statusPoly = document.getElementById('statusCount_poly');
    if (statusPoly) statusPoly.textContent = countPoly.toLocaleString();
  }

  function renderSpotlightChart() {
    const canvas = document.getElementById('mainSpotlightCanvas');
    if (!canvas) return;
    const topN = document.getElementById('stageTopNSelect')?.value || '8';
    const sortOrder = document.getElementById('stageSortSelect')?.value || 'desc';

    // 1. Data Aggregation (Fast-Path via Pre-Aggregated SQLite Stats or Local Fallback)
    let sortedPairs = [];
    let sortedArch = [];
    let sortedSrc = [];
    let starBuckets = [0, 0, 0, 0]; // <100, 100-500, 500-2k, 2k-15k
    let commitBuckets = [0, 0, 0, 0, 0]; // 100-500, 500-1k, 1k-1.5k, 1.5k-2k, 2k-2.5k
    let confBuckets = [0, 0, 0, 0]; // 40-60%, 60-80%, 80-95%, 95-100%
    let totalMigrationCount = 0;
    let totalCommits = 0;

    const q = (document.getElementById('evolSearchInput')?.value || '').trim();
    const status = document.getElementById('filterMigrationStatus')?.value || 'migrations_only';
    const pair = document.getElementById('filterMigrationPair')?.value || 'all';
    const minCandidates = parseInt(document.getElementById('filterMinCandidates')?.value || '0', 10);
    const isDefaultFilter = (!q && status === 'migrations_only' && pair === 'all' && minCandidates === 0);

    if (isDefaultFilter && SPOTLIGHT_STATS && (SPOTLIGHT_STATS.total_projects > 0 || SPOTLIGHT_STATS.migration_count > 0)) {
      totalMigrationCount = SPOTLIGHT_STATS.migration_count || 0;
      totalCommits = SPOTLIGHT_STATS.total_commits_sum || 0;
      starBuckets = SPOTLIGHT_STATS.star_buckets || [0, 0, 0, 0];
      commitBuckets = SPOTLIGHT_STATS.commit_buckets || [0, 0, 0, 0, 0];
      confBuckets = SPOTLIGHT_STATS.conf_buckets || [0, 0, 0, 0];
      sortedPairs = (SPOTLIGHT_STATS.top_pairs || []).map(p => [p.pair, p.count]);
      sortedArch = (SPOTLIGHT_STATS.top_archetypes || [])
        .filter(a => a.archetype !== 'Polyglot' && a.archetype !== 'Polyglot Co-existence')
        .map(a => [a.archetype, a.count]);
      sortedSrc = (SPOTLIGHT_STATS.source_langs || []).map(s => [s.language, s.count]);
    } else {
      const pairCounts = {};
      const archCounts = {};
      const sourceCounts = {};
      const corpus = (INITIAL_PROJECTS && INITIAL_PROJECTS.length > 0) ? INITIAL_PROJECTS : filteredSummaries;

      corpus.forEach(s => {
        const latest = s.latest || {};
        const repoName = (s.repo_name || '').toLowerCase();
        const repoPath = (latest.repo_path || '').toLowerCase();
        const evalRes = evaluateMigrationHeuristics(s);
        const isConsideredMigration = evalRes.isMigration;
        const candCount = evalRes.candCount;
        const primPair = evalRes.primPair;

        if (q && !repoName.includes(q.toLowerCase()) && !repoPath.includes(q.toLowerCase())) return;
        if (status === 'migrations_only' && !isConsideredMigration) return;
        if (status === 'polyglot_only' && isConsideredMigration) return;
        if (pair !== 'all' && (!isConsideredMigration || `${primPair.source_language} -> ${primPair.target_language}` !== pair)) return;
        if (candCount < minCandidates) return;

        const commits = latest.total_commits_in_range || 0;
        const stars = s.stars || latest.stars || 0;
        totalCommits += commits;

        if (evalRes.isMigration && primPair) {
          totalMigrationCount++;
          
          const pKey = `${primPair.source_language} \u2192 ${primPair.target_language}`;
          pairCounts[pKey] = (pairCounts[pKey] || 0) + 1;

          const archKey = evalRes.arch || 'Direct File Replacement';
          if (archKey !== 'Polyglot' && archKey !== 'Polyglot Co-existence') {
            archCounts[archKey] = (archCounts[archKey] || 0) + 1;
          }

          const sLang = primPair.source_language;
          sourceCounts[sLang] = (sourceCounts[sLang] || 0) + 1;

          // Stars
          if (stars < 100) starBuckets[0]++;
          else if (stars < 500) starBuckets[1]++;
          else if (stars < 2000) starBuckets[2]++;
          else starBuckets[3]++;

          // Commits
          if (commits < 500) commitBuckets[0]++;
          else if (commits < 1000) commitBuckets[1]++;
          else if (commits < 1500) commitBuckets[2]++;
          else if (commits < 2000) commitBuckets[3]++;
          else commitBuckets[4]++;

          // Confidence
          if (evalRes.conf < 60) confBuckets[0]++;
          else if (evalRes.conf < 80) confBuckets[1]++;
          else if (evalRes.conf < 95) confBuckets[2]++;
          else confBuckets[3]++;
        }
      });

      sortedPairs = Object.entries(pairCounts).sort((a, b) => b[1] - a[1]);
      sortedArch = Object.entries(archCounts).sort((a, b) => b[1] - a[1]);
      sortedSrc = Object.entries(sourceCounts).sort((a, b) => b[1] - a[1]);
    }

    // Update Highlights & Mini Previews
    const badgeEl = document.getElementById('kpiActiveCountBadge');
    if (badgeEl) badgeEl.textContent = `${totalMigrationCount} Migrations`;

    const migStatEl = document.getElementById('kpiStatMigrations');
    if (migStatEl) migStatEl.textContent = totalMigrationCount.toLocaleString();

    const topPairEl = document.getElementById('kpiStatTopPair');
    if (topPairEl) {
      if (sortedPairs.length > 0) {
        const topPct = ((sortedPairs[0][1] / Math.max(1, totalMigrationCount)) * 100).toFixed(1);
        topPairEl.textContent = `${sortedPairs[0][0]} (${topPct}%)`;
      } else {
        topPairEl.textContent = 'None Matching';
      }
    }

    const topArchEl = document.getElementById('kpiStatTopArch');
    if (topArchEl) {
      if (sortedArch.length > 0) {
        const archPct = ((sortedArch[0][1] / Math.max(1, totalMigrationCount)) * 100).toFixed(1);
        topArchEl.textContent = `${sortedArch[0][0]} (${archPct}%)`;
      } else {
        topArchEl.textContent = 'None Matching';
      }
    }

    const avgCommitsEl = document.getElementById('kpiStatAvgCommits');
    if (avgCommitsEl) {
      const denom = (totalProjectsCount > 0 ? totalProjectsCount : (SPOTLIGHT_STATS.total_projects || filteredSummaries.length));
      const avgVal = denom > 0 ? Math.round(totalCommits / denom) : 0;
      avgCommitsEl.textContent = avgVal.toLocaleString();
    }

    // Synchronize top Global Evolution KPI Cards with authoritative metrics
    const gProjEl = document.getElementById('globalStatAnalyzedProjects');
    const gYieldEl = document.getElementById('globalStatYieldRate');
    const gYieldSubEl = document.getElementById('globalStatYieldRateSub');
    const gMigEl = document.getElementById('globalStatMigrationPatterns');
    const gCommitsEl = document.getElementById('globalStatTotalCommits');

    const totalTracked = SPOTLIGHT_STATS.total_projects || totalProjectsCount || 0;
    const totalMig = SPOTLIGHT_STATS.migration_count !== undefined ? SPOTLIGHT_STATS.migration_count : totalMigrationCount;
    if (gProjEl && totalTracked > 0) gProjEl.textContent = totalTracked.toLocaleString();
    if (gYieldEl && totalTracked > 0) {
      gYieldEl.textContent = `${((totalMig / totalTracked) * 100).toFixed(1)}%`;
    }
    if (gYieldSubEl && totalTracked > 0) {
      gYieldSubEl.textContent = `${totalMig} of ${totalTracked.toLocaleString()} repositories transitioned`;
    }
    if (gMigEl) gMigEl.textContent = totalMig.toLocaleString();
    if (gCommitsEl && (SPOTLIGHT_STATS.total_commits_sum || totalCommits)) {
      gCommitsEl.textContent = (SPOTLIGHT_STATS.total_commits_sum || totalCommits).toLocaleString();
    }

    // Mini preview chips
    const mArch = document.getElementById('miniVal_archetypes');
    if (mArch) mArch.textContent = sortedArch.length > 0 ? `${sortedArch[0][0]} (${sortedArch[0][1]})` : '0';

    const mStars = document.getElementById('miniVal_stars');
    if (mStars) mStars.textContent = `${starBuckets[1] + starBuckets[2]} in 100-2k Stars`;

    const mCommits = document.getElementById('miniVal_commits');
    if (mCommits) mCommits.textContent = `${commitBuckets[0]} in 100-500`;

    const mSrc = document.getElementById('miniVal_source');
    if (mSrc) mSrc.textContent = sortedSrc.length > 0 ? `${sortedSrc[0][0]} (${sortedSrc[0][1]})` : 'None';

    // 2. Prepare Dataset for Active View
    let chartLabels = [];
    let chartData = [];
    let chartColors = ['#4f46e5', '#0284c7', '#059669', '#d97706', '#8b5cf6', '#c026d3', '#e11d48', '#0891b2'];
    let chartLabel = 'Count';

    if (currentMainView === 'pairs') {
      chartLabel = 'Migration Count';
      let items = [...sortedPairs];
      if (sortOrder === 'asc') items.reverse();
      else if (sortOrder === 'alpha') items.sort((a, b) => a[0].localeCompare(b[0]));
      
      const limit = topN === 'all' ? items.length : parseInt(topN, 10);
      items = items.slice(0, limit);
      chartLabels = items.map(x => x[0]);
      chartData = items.map(x => x[1]);
    } else if (currentMainView === 'archetypes') {
      chartLabel = 'Archetype Count';
      let items = [...sortedArch];
      chartLabels = items.map(x => x[0]);
      chartData = items.map(x => x[1]);
      chartColors = ['#4f46e5', '#059669', '#d97706', '#8b5cf6', '#0284c7'];
    } else if (currentMainView === 'stars') {
      chartLabel = 'Migrations by Star Tier';
      chartLabels = ['< 100 Stars', '100–500 Stars', '500–2k Stars', '2k–15k Stars'];
      chartData = starBuckets;
      chartColors = ['#0284c7'];
    } else if (currentMainView === 'commits') {
      chartLabel = 'Commit Depth Brackets';
      chartLabels = ['100–500', '500–1k', '1k–1.5k', '1.5k–2k', '2k–2.5k'];
      chartData = commitBuckets;
      chartColors = ['#d97706'];
    } else if (currentMainView === 'source_langs') {
      chartLabel = 'Originating Language Count';
      const limit = topN === 'all' ? sortedSrc.length : parseInt(topN, 10);
      const items = sortedSrc.slice(0, limit);
      chartLabels = items.map(x => x[0]);
      chartData = items.map(x => x[1]);
      chartColors = ['#c026d3'];
    } else if (currentMainView === 'confidence') {
      chartLabel = 'Confidence Tiers';
      chartLabels = ['40–60% (Exploratory)', '60–80% (Moderate)', '80–95% (Strong)', '95–100% (Direct Only)'];
      chartData = confBuckets;
      chartColors = ['#e11d48'];
    }

    // 3. Render via Chart.js or Pure Canvas Engine
    if (!chartLabels || chartLabels.length === 0) {
      if (spotlightChartInstance) {
        spotlightChartInstance.destroy();
        spotlightChartInstance = null;
      }
      drawPureCanvasFallback(canvas, [], [], chartLabel);
      return;
    }

    if (typeof Chart !== 'undefined') {
      if (spotlightChartInstance) {
        spotlightChartInstance.destroy();
        spotlightChartInstance = null;
      }

      const ctx = canvas.getContext('2d');
      const fontPrimary = { family: "'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" };

      const chartConfig = {
        type: currentChartType === 'bar' ? 'bar' : (currentChartType === 'doughnut' ? 'doughnut' : 'line'),
        data: {
          labels: chartLabels,
          datasets: [{
            label: chartLabel,
            data: chartData,
            backgroundColor: currentChartType === 'doughnut' ? chartColors : chartColors[0],
            borderColor: currentChartType === 'doughnut' ? '#ffffff' : chartColors[0],
            borderWidth: currentChartType === 'doughnut' ? 2 : 2,
            borderRadius: currentChartType === 'bar' ? 6 : 0,
            fill: currentChartType === 'line',
            tension: 0.35,
            maxBarThickness: 45
          }]
        },
        options: {
          indexAxis: (currentMainView === 'pairs' && currentChartType === 'bar') ? 'y' : 'x',
          responsive: true,
          maintainAspectRatio: false,
          devicePixelRatio: window.devicePixelRatio || 2,
          plugins: {
            legend: {
              display: currentChartType === 'doughnut',
              position: 'bottom',
              labels: { font: { ...fontPrimary, weight: '700', size: 12 }, color: '#0f172a', padding: 14 }
            },
            tooltip: {
              backgroundColor: 'rgba(15, 23, 42, 0.95)',
              titleFont: { ...fontPrimary, weight: '700', size: 12 },
              bodyFont: { ...fontPrimary, size: 12 },
              padding: 10,
              cornerRadius: 8
            }
          },
          scales: currentChartType === 'doughnut' ? {} : {
            x: {
              beginAtZero: true,
              grid: { color: '#f1f5f9' },
              ticks: { font: { ...fontPrimary, weight: '700', size: 12 }, color: '#0f172a', precision: 0 }
            },
            y: {
              beginAtZero: true,
              grid: { color: '#f1f5f9' },
              ticks: { font: { ...fontPrimary, weight: '700', size: 12 }, color: '#0f172a', precision: 0 }
            }
          }
        }
      };

      try {
        spotlightChartInstance = new Chart(ctx, chartConfig);
      } catch (e) {
        console.warn('[PolyglotMiner] Chart.js render failed, drawing Pure Canvas fallback:', e);
        drawPureCanvasFallback(canvas, chartLabels, chartData, chartLabel);
      }
    } else {
      // Pure Canvas 2D Fallback if Chart.js is not loaded
      drawPureCanvasFallback(canvas, chartLabels, chartData, chartLabel);
    }
  }

  function drawPureCanvasFallback(canvas, labels, data, title) {
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const dpr = window.devicePixelRatio || 2;
    const clientW = canvas.parentElement.clientWidth || 800;
    const clientH = canvas.parentElement.clientHeight || 380;
    
    canvas.width = clientW * dpr;
    canvas.height = clientH * dpr;
    canvas.style.width = `${clientW}px`;
    canvas.style.height = `${clientH}px`;
    ctx.scale(dpr, dpr);

    const w = clientW;
    const h = clientH;

    ctx.clearRect(0, 0, w, h);

    if (!labels || labels.length === 0 || !data || data.length === 0) {
      ctx.fillStyle = '#f8fafc';
      ctx.strokeStyle = '#e2e8f0';
      ctx.lineWidth = 1;
      if (ctx.roundRect) {
        ctx.beginPath();
        ctx.roundRect(w * 0.08, h * 0.15, w * 0.84, h * 0.7, 12);
        ctx.fill();
        ctx.stroke();
      } else {
        ctx.fillRect(w * 0.08, h * 0.15, w * 0.84, h * 0.7);
        ctx.strokeRect(w * 0.08, h * 0.15, w * 0.84, h * 0.7);
      }

      ctx.fillStyle = '#0f172a';
      ctx.font = '700 15px "Plus Jakarta Sans", sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText('No Migration Patterns Match Current Filter', w / 2, h / 2 - 12);

      ctx.fillStyle = '#64748b';
      ctx.font = '500 13px "Plus Jakarta Sans", sans-serif';
      ctx.fillText('Adjust the live heuristic tuning sliders on the left or select another analytics view.', w / 2, h / 2 + 16);
      return;
    }

    const padding = { top: 40, right: 30, bottom: 60, left: 140 };
    const chartW = w - padding.left - padding.right;
    const chartH = h - padding.top - padding.bottom;
    const maxVal = Math.max(...data, 1);

    const barH = Math.min(32, (chartH / labels.length) - 8);

    labels.forEach((label, i) => {
      const val = data[i] || 0;
      const barW = (val / maxVal) * chartW;
      const y = padding.top + i * (chartH / labels.length);

      // Label
      ctx.fillStyle = '#1e293b';
      ctx.font = '700 12px "Plus Jakarta Sans", sans-serif';
      ctx.textAlign = 'right';
      ctx.fillText(label, padding.left - 12, y + barH / 1.4);

      // Bar with gradient
      const grad = ctx.createLinearGradient(padding.left, 0, padding.left + barW, 0);
      grad.addColorStop(0, '#4f46e5');
      grad.addColorStop(1, '#818cf8');
      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.roundRect ? ctx.roundRect(padding.left, y, Math.max(4, barW), barH, 4) : ctx.fillRect(padding.left, y, Math.max(4, barW), barH);
      ctx.fill();

      // Value text
      ctx.fillStyle = '#4f46e5';
      ctx.font = '800 12px "Plus Jakarta Sans", sans-serif';
      ctx.textAlign = 'left';
      ctx.fillText(`${val}`, padding.left + barW + 8, y + barH / 1.4);
    });
  }

  function exportActiveChartPng() {
    const meta = (typeof VIEW_META !== 'undefined' && VIEW_META[currentMainView]) ? VIEW_META[currentMainView] : null;
    const titleEl = document.getElementById('spotlightTitle');
    const descEl = document.getElementById('spotlightDesc');
    const viewTitle = meta ? meta.title : (titleEl ? titleEl.textContent.trim() : 'Migration Intelligence');
    const viewDesc = meta ? meta.desc : (descEl ? descEl.textContent.trim() : 'Empirical dataset distribution');

    let labels = [];
    let values = [];
    let totalCount = 0;

    // 1. If Chart.js instance is active, directly read its rendered labels & dataset
    if (spotlightChartInstance && spotlightChartInstance.data && spotlightChartInstance.data.labels && spotlightChartInstance.data.labels.length > 0) {
      labels = [...spotlightChartInstance.data.labels];
      values = [...(spotlightChartInstance.data.datasets[0]?.data || [])];
      totalCount = values.reduce((a, b) => a + (typeof b === 'number' ? b : 0), 0);
    }

    // 2. Fallback direct calculation across all 6 studio views
    if (!labels || labels.length === 0) {
      const pairCounts = {};
      const archCounts = {};
      const starBuckets = [0, 0, 0, 0];
      const commitBuckets = [0, 0, 0, 0, 0];
      const sourceCounts = {};
      const confBuckets = [0, 0, 0, 0];

      filteredSummaries.forEach(s => {
        const latest = s.latest || {};
        const commits = latest.total_commits_in_range || 0;
        const stars = s.stars || latest.stars || 0;
        const evalRes = evaluateMigrationHeuristics(s);

        if (evalRes.isMigration && evalRes.primPair) {
          totalCount++;
          const p = evalRes.primPair;
          const k = `${p.source_language} \u2192 ${p.target_language}`;
          pairCounts[k] = (pairCounts[k] || 0) + 1;
          archCounts[evalRes.arch] = (archCounts[evalRes.arch] || 0) + 1;
          sourceCounts[p.source_language] = (sourceCounts[p.source_language] || 0) + 1;

          if (stars < 100) starBuckets[0]++;
          else if (stars < 500) starBuckets[1]++;
          else if (stars < 2000) starBuckets[2]++;
          else starBuckets[3]++;

          if (commits < 500) commitBuckets[0]++;
          else if (commits < 1000) commitBuckets[1]++;
          else if (commits < 1500) commitBuckets[2]++;
          else if (commits < 2000) commitBuckets[3]++;
          else commitBuckets[4]++;

          if (evalRes.conf < 60) confBuckets[0]++;
          else if (evalRes.conf < 80) confBuckets[1]++;
          else if (evalRes.conf < 95) confBuckets[2]++;
          else confBuckets[3]++;
        }
      });

      if (currentMainView === 'pairs') {
        const sorted = Object.entries(pairCounts).sort((a, b) => b[1] - a[1]).slice(0, 10);
        labels = sorted.map(e => e[0]);
        values = sorted.map(e => e[1]);
      } else if (currentMainView === 'archetypes') {
        const sorted = Object.entries(archCounts).sort((a, b) => b[1] - a[1]);
        labels = sorted.map(e => e[0]);
        values = sorted.map(e => e[1]);
      } else if (currentMainView === 'stars') {
        labels = ['< 100 Stars', '100 – 500 Stars', '500 – 2k Stars', '2k – 15k Stars'];
        values = starBuckets;
      } else if (currentMainView === 'commits') {
        labels = ['100–500', '500–1k', '1k–1.5k', '1.5k–2k', '2k–2.5k'];
        values = commitBuckets;
      } else if (currentMainView === 'source_langs') {
        const sorted = Object.entries(sourceCounts).sort((a, b) => b[1] - a[1]).slice(0, 10);
        labels = sorted.map(e => e[0]);
        values = sorted.map(e => e[1]);
      } else if (currentMainView === 'confidence') {
        labels = ['40–60%', '60–80%', '80–95%', '95–100%'];
        values = confBuckets;
      }
    }

    // Create high-res publication canvas (2000 x 1100 px @ 300 DPI clarity)
    const exportW = 1600;
    const exportH = 900;
    const offCanvas = document.createElement('canvas');
    offCanvas.width = exportW;
    offCanvas.height = exportH;
    const ctx = offCanvas.getContext('2d');

    // Background
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, exportW, exportH);

    // Decorative top accent bar
    const barGrad = ctx.createLinearGradient(0, 0, exportW, 0);
    barGrad.addColorStop(0, '#2563eb');
    barGrad.addColorStop(1, '#7c3aed');
    ctx.fillStyle = barGrad;
    ctx.fillRect(0, 0, exportW, 8);

    // Academic Header
    ctx.fillStyle = '#2563eb';
    ctx.font = '700 16px "Plus Jakarta Sans", system-ui, sans-serif';
    ctx.fillText('POLYGLOTMINER RESEARCH PLATFORM  ·  EMPIRICAL MIGRATION INTELLIGENCE', 60, 60);

    ctx.fillStyle = '#0f172a';
    ctx.font = '800 32px "Plus Jakarta Sans", system-ui, sans-serif';
    ctx.fillText(viewTitle, 60, 105);

    ctx.fillStyle = '#64748b';
    ctx.font = '500 18px "Plus Jakarta Sans", system-ui, sans-serif';
    ctx.fillText(`${viewDesc}  (Sample Size: N = ${totalCount || filteredSummaries.length} repositories)`, 60, 140);

    // Draw Divider Line
    ctx.strokeStyle = '#e2e8f0';
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(60, 165);
    ctx.lineTo(exportW - 60, 165);
    ctx.stroke();

    // Chart Layout Calculations
    const pad = { top: 210, right: 100, bottom: 90, left: 320 };
    const chartW = exportW - pad.left - pad.right;
    const chartH = exportH - pad.top - pad.bottom;
    const maxVal = Math.max(...values, 1);
    const count = labels.length || 1;
    const barH = Math.min(48, Math.max(28, (chartH / count) - 16));

    // Draw Gridlines
    const gridCols = 5;
    ctx.strokeStyle = '#f1f5f9';
    ctx.lineWidth = 1;
    ctx.fillStyle = '#94a3b8';
    ctx.font = '600 14px "Plus Jakarta Sans", system-ui, sans-serif';
    ctx.textAlign = 'center';

    for (let g = 0; g <= gridCols; g++) {
      const gVal = Math.round((maxVal / gridCols) * g);
      const gx = pad.left + (chartW / gridCols) * g;
      ctx.beginPath();
      ctx.moveTo(gx, pad.top - 20);
      ctx.lineTo(gx, pad.top + chartH);
      ctx.stroke();
      ctx.fillText(`${gVal}`, gx, pad.top + chartH + 28);
    }

    // Render Bars
    labels.forEach((label, i) => {
      const val = values[i] || 0;
      const barW = (val / maxVal) * chartW;
      const y = pad.top + i * (chartH / count) + ((chartH / count - barH) / 2);

      // Label on the left
      ctx.fillStyle = '#1e293b';
      ctx.font = '700 18px "Plus Jakarta Sans", system-ui, sans-serif';
      ctx.textAlign = 'right';
      ctx.fillText(label, pad.left - 20, y + barH * 0.68);

      // Bar with gradient
      const grad = ctx.createLinearGradient(pad.left, 0, pad.left + Math.max(8, barW), 0);
      grad.addColorStop(0, '#3b82f6');
      grad.addColorStop(1, '#6366f1');
      ctx.fillStyle = grad;
      ctx.beginPath();
      if (ctx.roundRect) {
        ctx.roundRect(pad.left, y, Math.max(8, barW), barH, 6);
      } else {
        ctx.fillRect(pad.left, y, Math.max(8, barW), barH);
      }
      ctx.fill();

      // Value and percentage
      const pct = totalCount > 0 ? ` (${((val / totalCount) * 100).toFixed(1)}%)` : '';
      ctx.fillStyle = '#1e293b';
      ctx.font = '800 17px "Plus Jakarta Sans", system-ui, sans-serif';
      ctx.textAlign = 'left';
      ctx.fillText(`${val}${pct}`, pad.left + Math.max(8, barW) + 14, y + barH * 0.68);
    });

    // Academic Footer
    ctx.fillStyle = '#94a3b8';
    ctx.font = '500 13px "Plus Jakarta Sans", system-ui, sans-serif';
    ctx.textAlign = 'left';
    ctx.fillText('PolyglotMiner Empirical Repository Intelligence Suite', 60, exportH - 30);
    ctx.textAlign = 'right';
    ctx.fillText(new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }), exportW - 60, exportH - 30);

    // Trigger PNG Download
    const imageUri = offCanvas.toDataURL('image/png', 1.0);
    const link = document.createElement('a');
    link.download = `polyglotminer_${currentMainView}_thesis_figure.png`;
    link.href = imageUri;
    link.click();

    if (typeof window.showToast === 'function') {
      window.showToast(`📊 Exported high-resolution publication figure (PNG)!`);
    }
  }

  function exportMigrationsCsv() {
    const rows = [
      ['Repository', 'Source Language', 'Target Language', 'Archetype', 'Candidates Count', 'Total Commits', 'Repository URL']
    ];

    filteredSummaries.forEach(s => {
      const evalRes = evaluateMigrationHeuristics(s);
      if (evalRes.isMigration && evalRes.primPair) {
        const p = evalRes.primPair;
        const latest = s.latest || {};
        rows.push([
          `"${s.repo_name || ''}"`,
          `"${p.source_language || ''}"`,
          `"${p.target_language || ''}"`,
          `"${evalRes.arch || 'Direct File Replacement'}"`,
          evalRes.candCount || 1,
          latest.total_commits_in_range || 0,
          `"${latest.repo_path || ''}"`
        ]);
      }
    });

    const csvContent = 'data:text/csv;charset=utf-8,' + rows.map(e => e.join(',')).join('\n');
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', `polyglotminer_migrations_${rows.length - 1}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    if (typeof window.showToast === 'function') {
      window.showToast(`📥 Exported ${rows.length - 1} migration records to CSV!`);
    }
  }

  function copyLatexTable() {
    const pairCounts = {};
    let total = 0;
    filteredSummaries.forEach(s => {
      const evalRes = evaluateMigrationHeuristics(s);
      if (evalRes.isMigration && evalRes.primPair) {
        const p = evalRes.primPair;
        const key = `${p.source_language} $\\to$ ${p.target_language}`;
        pairCounts[key] = (pairCounts[key] || 0) + 1;
        total++;
      }
    });

    const sorted = Object.entries(pairCounts).sort((a, b) => b[1] - a[1]);
    let latex = `% =========================================================\n`;
    latex += `% PolyglotMiner Empirical Language Transition Table\n`;
    latex += `% Sample Size: N = ${total} verified transitions\n`;
    latex += `% =========================================================\n`;
    latex += `\\begin{table}[htbp]\n`;
    latex += `  \\centering\n`;
    latex += `  \\caption{Empirical Distribution of Primary Language Transitions ($N=${total}$)}\n`;
    latex += `  \\label{tab:polyglot_transitions}\n`;
    latex += `  \\begin{tabular}{lrr}\n`;
    latex += `    \\toprule\n`;
    latex += `    \\textbf{Language Transition Pair} & \\textbf{Repositories} & \\textbf{Share (\\%)} \\\\\n`;
    latex += `    \\midrule\n`;

    sorted.slice(0, 10).forEach(([pair, count]) => {
      const pct = ((count / Math.max(1, total)) * 100).toFixed(1);
      latex += `    ${pair} & ${count} & ${pct}\\% \\\\\n`;
    });

    latex += `    \\bottomrule\n`;
    latex += `  \\end{tabular}\n`;
    latex += `\\end{table}\n`;

    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(latex).then(() => {
        if (typeof window.showToast === 'function') {
          window.showToast(`📋 Copied LaTeX table snippet to clipboard!`);
        }
      }).catch(() => fallbackCopy(latex));
    } else {
      fallbackCopy(latex);
    }
  }

  function renderCompactTable() {
    const tbody = document.getElementById('repoCompactTableBody');
    if (!tbody) return;

    if (!filteredSummaries || filteredSummaries.length === 0) {
      tbody.innerHTML = `
        <tr>
          <td colspan="5" style="text-align: center; padding: 2.5rem 1rem; color: var(--text-muted);">
            No matching repositories found.
          </td>
        </tr>
      `;
      const wrapper = document.getElementById('compactTablePaginationWrapper');
      if (wrapper) wrapper.style.display = 'none';
      return;
    }

    const wrapper = document.getElementById('compactTablePaginationWrapper');
    if (wrapper) wrapper.style.display = 'flex';

    const totalPages = Math.max(1, Math.ceil(totalProjectsCount / ROWS_PER_PAGE));
    if (currentCompactTablePage > totalPages) currentCompactTablePage = totalPages;
    if (currentCompactTablePage < 1) currentCompactTablePage = 1;

    const startIdx = (currentCompactTablePage - 1) * ROWS_PER_PAGE;
    const endIdx = Math.min(startIdx + ROWS_PER_PAGE, filteredSummaries.length);
    const pageItems = (filteredSummaries.length <= ROWS_PER_PAGE)
      ? filteredSummaries
      : filteredSummaries.slice(startIdx, endIdx);

    try {
      tbody.innerHTML = pageItems.map(summary => {
        const repoName = summary.repo_name || 'Repository';
        const repoSlug = summary.slug || repoName.replace(/[^a-zA-Z0-9_-]/g, '_');
        const latest = summary.latest || {};
        const evalRes = evaluateMigrationHeuristics(summary);
        const primPair = evalRes.primPair;
        const repoPath = latest.repo_path || repoName;
        const repoUrl = (repoPath.startsWith('http://') || repoPath.startsWith('https://'))
          ? repoPath
          : (repoName.includes('/') ? `https://github.com/${repoName}` : repoPath);

        let migrationBadgeHtml = '';
        if (evalRes.isMigration && primPair) {
          migrationBadgeHtml = `
            <span class="badge" style="background: #ecfdf5; color: #047857; font-weight: 700; border: 1px solid #a7f3d0; font-size: 0.72rem; padding: 0.18rem 0.45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;" title="${escapeHtml(primPair.source_language)} &rarr; ${escapeHtml(primPair.target_language)}">
              ${escapeHtml(primPair.source_language)} &rarr; ${escapeHtml(primPair.target_language)}
            </span>
          `;
        } else if (primPair) {
          migrationBadgeHtml = `
            <span class="badge" style="background: #fff1f2; color: #e11d48; font-weight: 600; border: 1px solid #fecdd3; font-size: 0.72rem; padding: 0.18rem 0.45rem;">
              ${escapeHtml(primPair.source_language)} &rarr; ${escapeHtml(primPair.target_language)} (Sub-Threshold)
            </span>
          `;
        } else {
          migrationBadgeHtml = `
            <span class="badge" style="background: var(--bg-surface-alt); color: #64748b; font-weight: 600; border: 1px solid var(--border-subtle); font-size: 0.72rem; padding: 0.18rem 0.45rem;">
              Polyglot / None
            </span>
          `;
        }

        return `
          <tr>
            <td>
              <div style="display: flex; align-items: center; gap: 0.45rem; min-width: 0;">
                <button type="button" class="btn-copy-commit" onclick="window.copyTextToClipboard('${escapeHtml(repoUrl)}', this, '📋 Copied URL: ${escapeHtml(repoUrl)}')" title="Copy repository URL" style="padding: 0.08rem 0.32rem; font-size: 0.65rem; flex-shrink: 0;">📋</button>
                ${repoUrl.startsWith('http')
                  ? `<a href="${escapeHtml(repoUrl)}" target="_blank" rel="noopener noreferrer" style="font-weight: 700; color: #0f172a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" class="repo-name-link" title="${escapeHtml(repoName)} (Open in GitHub)">${escapeHtml(repoName)}</a>`
                  : `<span style="font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${escapeHtml(repoName)}">${escapeHtml(repoName)}</span>`
                }
              </div>
            </td>
            <td>${migrationBadgeHtml}</td>
            <td style="text-align: right; font-weight: 600; color: #334155;">${(latest.total_commits_in_range || 0).toLocaleString()}</td>
            <td style="text-align: right; font-weight: 800; color: #4f46e5;">${evalRes.candCount || 0}</td>
            <td style="text-align: right;">
              <a href="${encodeURIComponent(repoSlug)}/evolution_latest.html" class="timeline-btn" title="View Evolution Details">
                <span>Details</span>
                <span>&rarr;</span>
              </a>
            </td>
          </tr>
        `;
      }).join('');
    } catch (err) {
      console.error('[PolyglotMiner] Compact table rendering error:', err);
    }

    const displayEndIdx = Math.min(startIdx + (pageItems ? pageItems.length : 0), totalProjectsCount);
    const infoEl = document.getElementById('compactTablePaginationInfo');
    if (infoEl) infoEl.textContent = `Showing ${startIdx + 1}–${displayEndIdx} of ${totalProjectsCount.toLocaleString()} projects`;
    renderPaginationPills('compactTablePaginationControls', currentCompactTablePage, totalPages, (p) => {
      currentCompactTablePage = p;
      if (window.location.protocol.startsWith('http')) {
        applyEvolutionFilters();
      } else {
        renderCompactTable();
      }
      document.getElementById('repoTableViewContainer')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    });
  }

  function renderPaginationPills(containerId, currentPage, totalPages, onPageClick) {
    const container = document.getElementById(containerId);
    if (!container) return;
    container.innerHTML = '';

    if (totalPages <= 1) return;

    // Previous Button
    const prevBtn = document.createElement('button');
    prevBtn.type = 'button';
    prevBtn.className = 'pagination-btn';
    prevBtn.disabled = currentPage <= 1;
    prevBtn.innerHTML = '&larr;';
    prevBtn.title = 'Previous Page';
    prevBtn.onclick = () => onPageClick(currentPage - 1);
    container.appendChild(prevBtn);

    // Page Number Pills
    let pages = [];
    if (totalPages <= 7) {
      for (let i = 1; i <= totalPages; i++) pages.push(i);
    } else {
      pages.push(1);
      if (currentPage > 3) pages.push('...');
      const start = Math.max(2, currentPage - 1);
      const end = Math.min(totalPages - 1, currentPage + 1);
      for (let i = start; i <= end; i++) pages.push(i);
      if (currentPage < totalPages - 2) pages.push('...');
      pages.push(totalPages);
    }

    pages.forEach(p => {
      if (p === '...') {
        const dots = document.createElement('span');
        dots.style.padding = '0 0.35rem';
        dots.style.color = 'var(--text-muted)';
        dots.style.fontSize = '0.85rem';
        dots.textContent = '...';
        container.appendChild(dots);
      } else {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = `pagination-btn ${p === currentPage ? 'active' : ''}`;
        btn.textContent = p;
        btn.onclick = () => onPageClick(p);
        container.appendChild(btn);
      }
    });

    // Next Button
    const nextBtn = document.createElement('button');
    nextBtn.type = 'button';
    nextBtn.className = 'pagination-btn';
    nextBtn.disabled = currentPage >= totalPages;
    nextBtn.innerHTML = '&rarr;';
    nextBtn.title = 'Next Page';
    nextBtn.onclick = () => onPageClick(currentPage + 1);
    container.appendChild(nextBtn);
  }
</script>
{% endblock %}