Switch to static HTML + Plotly.js dashboard

- Replace Gradio with a pure HTML/CSS/JS dashboard (sdk: static)
- Plotly.js CDN for all interactive charts
- Custom Inter-based design with full color control
- Loads pre-computed dashboard_data.json at runtime
- 4 tabs: Pipeline, Compensation, Top Earners, Data Quality

README.md

@@ -1,14 +1,22 @@
 ---
-title: Execcomp AI Dashboard
-emoji: 💻
+title: Execcomp-AI Dashboard
+emoji: 📊
 colorFrom: blue
-colorTo: pink
-sdk: gradio
-sdk_version: 6.8.0
-app_file: app.py
-pinned: false
+colorTo: green
+sdk: static
+pinned: true
 license: mit
-short_description: dashboard showing data from pierjoe/execcomp-ai dataset
+short_description: AI-extracted SEC executive compensation analytics
+tags:
+  - finance
+  - sec
+  - executive-compensation
+  - analytics
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Execcomp-AI Dashboard
+
+Interactive dashboard for exploring executive compensation data extracted from **100K+ SEC DEF 14A** proxy statements (2005–2022) using vision-language models.
+
+- **Dataset**: [pierjoe/execcomp-ai-sample](https://huggingface.co/datasets/pierjoe/execcomp-ai-sample)
+- **GitHub**: [pierpierpy/Execcomp-AI](https://github.com/pierpierpy/Execcomp-AI)

dashboard_data.json

@@ -0,0 +1,697 @@
+{
+  "generated_at": "2026-03-05T13:42:51.454903",
+  "pipeline": {
+    "total_docs": 83020,
+    "funds": 15540,
+    "with_sct": 44555,
+    "no_sct": 3119,
+    "pending": 19806,
+    "total_tables": 55446,
+    "multi_table_docs": 10891,
+    "non_funds": 67480
+  },
+  "compensation": {
+    "total_exec_records": 1254296,
+    "unique_companies": 7696,
+    "year_range": [
+      2005,
+      2022
+    ],
+    "mean_total": 2456896.521673243,
+    "median_total": 1153750.0,
+    "max_total": 2284044884.0,
+    "mean_salary": 2860569.116454856,
+    "median_salary": 350000.0,
+    "breakdown": {
+      "salary": {
+        "mean": 2860569.116454856,
+        "median": 350000.0,
+        "max": 522917979305.0
+      },
+      "bonus": {
+        "mean": 113074.67574370805,
+        "median": 0.0,
+        "max": 75000000.0
+      },
+      "stock_awards": {
+        "mean": 919397.2323141032,
+        "median": 150240.0,
+        "max": 413369623.0
+      },
+      "option_awards": {
+        "mean": 349692.59025496925,
+        "median": 0.0,
+        "max": 2283988504.0
+      },
+      "non_equity_incentive": {
+        "mean": 369550.0949133218,
+        "median": 64000.0,
+        "max": 71237675.0
+      },
+      "change_in_pension": {
+        "mean": 72289.63039287206,
+        "median": 0.0,
+        "max": 45422412.0
+      },
+      "other_compensation": {
+        "mean": 116803.38838251916,
+        "median": 19253.0,
+        "max": 4412354000.0
+      },
+      "total": {
+        "mean": 2456896.521673243,
+        "median": 1153750.0,
+        "max": 2284044884.0
+      }
+    }
+  },
+  "top10": [
+    {
+      "name": "Elon Musk",
+      "company": "Tesla, Inc.",
+      "title": "Chief Executive Officer",
+      "fiscal_year": 2018,
+      "total": 2284044884.0
+    },
+    {
+      "name": "Alexander Karp",
+      "company": "Palantir Technologies Inc.",
+      "title": "Chief Executive Officer",
+      "fiscal_year": 2020,
+      "total": 1098513297.0
+    },
+    {
+      "name": "Eric M. Green",
+      "company": "WEST PHARMACEUTICAL SERVICES INC",
+      "title": "President & Chief Executive Officer",
+      "fiscal_year": 2016,
+      "total": 641423648.127
+    },
+    {
+      "name": "Eric M. Green",
+      "company": "WEST PHARMACEUTICAL SERVICES INC",
+      "title": "President & Chief Executive Officer",
+      "fiscal_year": 2017,
+      "total": 611724756.563
+    },
+    {
+      "name": "Alan N. Forman",
+      "company": "STR HOLDINGS, INC.",
+      "title": "Senior Vice President, General Counsel and Secretary",
+      "fiscal_year": 2010,
+      "total": 577181228.0
+    },
+    {
+      "name": "Max Levchin",
+      "company": "Affirm Holdings, Inc.",
+      "title": "Chief Executive Officer",
+      "fiscal_year": 2021,
+      "total": 451207726.0
+    },
+    {
+      "name": "Eric M. Green",
+      "company": "WEST PHARMACEUTICAL SERVICES INC",
+      "title": "President & Chief Executive Officer",
+      "fiscal_year": 2018,
+      "total": 426215378.813
+    },
+    {
+      "name": "Tony Xu",
+      "company": "DoorDash, Inc.",
+      "title": "Chief Executive Officer and Chair",
+      "fiscal_year": 2020,
+      "total": 413669920.0
+    },
+    {
+      "name": "Timothy Cook",
+      "company": "APPLE INC",
+      "title": "Chief Executive Officer",
+      "fiscal_year": 2011,
+      "total": 377996537.0
+    },
+    {
+      "name": "Robert Antokol",
+      "company": "Playtika Holding Corp.",
+      "title": "Chief Executive Officer",
+      "fiscal_year": 2020,
+      "total": 372008176.0
+    }
+  ],
+  "tables_by_year": {
+    "2005": 1872,
+    "2006": 1968,
+    "2007": 2048,
+    "2008": 1944,
+    "2009": 1888,
+    "2010": 1716,
+    "2011": 1736,
+    "2012": 6771,
+    "2013": 6531,
+    "2014": 6646,
+    "2015": 6676,
+    "2016": 11192,
+    "2017": 10816,
+    "2018": 10452,
+    "2019": 15176,
+    "2020": 19468,
+    "2021": 15750,
+    "2022": 1544
+  },
+  "trends": [
+    {
+      "year": 2005,
+      "mean": 1176120.5818593563,
+      "median": 378068.0,
+      "count": 1678
+    },
+    {
+      "year": 2006,
+      "mean": 1538449.196346523,
+      "median": 571105.0,
+      "count": 16149
+    },
+    {
+      "year": 2007,
+      "mean": 1501451.7845541562,
+      "median": 593075.0,
+      "count": 19850
+    },
+    {
+      "year": 2008,
+      "mean": 1556407.9691994055,
+      "median": 641000.0,
+      "count": 18836
+    },
+    {
+      "year": 2009,
+      "mean": 1501001.4062882576,
+      "median": 687160.0,
+      "count": 29994
+    },
+    {
+      "year": 2010,
+      "mean": 1784004.6605899297,
+      "median": 800000.0,
+      "count": 46175
+    },
+    {
+      "year": 2011,
+      "mean": 1907676.4098720532,
+      "median": 854464.0,
+      "count": 65027
+    },
+    {
+      "year": 2012,
+      "mean": 2014388.0489255064,
+      "median": 922869.0,
+      "count": 68395
+    },
+    {
+      "year": 2013,
+      "mean": 2102510.0059140464,
+      "median": 999010.0,
+      "count": 77693
+    },
+    {
+      "year": 2014,
+      "mean": 2404274.576444018,
+      "median": 1139784.0,
+      "count": 91280
+    },
+    {
+      "year": 2015,
+      "mean": 2351306.0412694626,
+      "median": 1149955.0,
+      "count": 106423
+    },
+    {
+      "year": 2016,
+      "mean": 2415104.6348501956,
+      "median": 1225273.0,
+      "count": 114843
+    },
+    {
+      "year": 2017,
+      "mean": 2656081.7441396704,
+      "median": 1353473.0,
+      "count": 133450
+    },
+    {
+      "year": 2018,
+      "mean": 2943145.039610786,
+      "median": 1420392.0,
+      "count": 154442
+    },
+    {
+      "year": 2019,
+      "mean": 2809051.7051841086,
+      "median": 1410006.0,
+      "count": 135871
+    },
+    {
+      "year": 2020,
+      "mean": 3169163.9675259963,
+      "median": 1474761.0,
+      "count": 76934
+    },
+    {
+      "year": 2021,
+      "mean": 3639795.761156471,
+      "median": 1563576.5,
+      "count": 16412
+    },
+    {
+      "year": 2022,
+      "mean": 4849358.698901099,
+      "median": 1460000.0,
+      "count": 1365
+    }
+  ],
+  "distribution": {
+    "values": [
+      222170,
+      191104,
+      143572,
+      106907,
+      79511,
+      61439,
+      47401,
+      38199,
+      32203,
+      25248,
+      22382,
+      18732,
+      16406,
+      13647,
+      11475,
+      10104,
+      8838,
+      8089,
+      7242,
+      6227,
+      5575,
+      4776,
+      5140,
+      4422,
+      3831,
+      3326,
+      3190,
+      2585,
+      2595,
+      2300,
+      2292,
+      2312,
+      1886,
+      1585,
+      1517,
+      1478,
+      1376,
+      1358,
+      1193,
+      1090,
+      1053,
+      998,
+      795,
+      945,
+      942,
+      676,
+      670,
+      657,
+      776,
+      666
+    ],
+    "edges": [
+      1e-06,
+      0.38450903999999997,
+      0.76901708,
+      1.1535251199999998,
+      1.53803316,
+      1.9225412,
+      2.30704924,
+      2.69155728,
+      3.07606532,
+      3.46057336,
+      3.8450814,
+      4.22958944,
+      4.61409748,
+      4.99860552,
+      5.38311356,
+      5.7676216,
+      6.15212964,
+      6.53663768,
+      6.92114572,
+      7.30565376,
+      7.6901618,
+      8.074669839999999,
+      8.459177879999999,
+      8.843685919999999,
+      9.228193959999999,
+      9.612701999999999,
+      9.997210039999999,
+      10.381718079999999,
+      10.766226119999999,
+      11.150734159999999,
+      11.535242199999999,
+      11.919750239999999,
+      12.304258279999999,
+      12.68876632,
+      13.07327436,
+      13.4577824,
+      13.84229044,
+      14.22679848,
+      14.61130652,
+      14.99581456,
+      15.3803226,
+      15.76483064,
+      16.14933868,
+      16.53384672,
+      16.91835476,
+      17.3028628,
+      17.68737084,
+      18.07187888,
+      18.45638692,
+      18.84089496,
+      19.225403
+    ],
+    "median": 1201612.0,
+    "p99": 19225403.0,
+    "n_outliers": 11439
+  },
+  "comp_components": {
+    "Salary": 2860569.116454856,
+    "Bonus": 113074.67574370805,
+    "Stock Awards": 919397.2323141032,
+    "Option Awards": 349692.59025496925,
+    "Non Equity Incentive": 369550.0949133218,
+    "Change In Pension": 72289.63039287206,
+    "Other Compensation": 116803.38838251916
+  },
+  "probability": {
+    "total_tables": 124194,
+    "unique_docs": 44087,
+    "high_confidence": 107276,
+    "medium_confidence": 4871,
+    "low_confidence": 12047,
+    "multi_table_docs": 31780,
+    "could_disambiguate": 1740,
+    "hist_values": [
+      7524,
+      1514,
+      974,
+      778,
+      645,
+      613,
+      596,
+      523,
+      538,
+      594,
+      569,
+      611,
+      681,
+      760,
+      906,
+      1085,
+      1340,
+      2165,
+      5444,
+      96334
+    ],
+    "hist_edges": [
+      0.0,
+      0.05,
+      0.1,
+      0.15000000000000002,
+      0.2,
+      0.25,
+      0.30000000000000004,
+      0.35000000000000003,
+      0.4,
+      0.45,
+      0.5,
+      0.55,
+      0.6000000000000001,
+      0.65,
+      0.7000000000000001,
+      0.75,
+      0.8,
+      0.8500000000000001,
+      0.9,
+      0.9500000000000001,
+      1.0
+    ]
+  },
+  "comp_trends": {
+    "Salary": {
+      "years": [
+        2005,
+        2006,
+        2007,
+        2008,
+        2009,
+        2010,
+        2011,
+        2012,
+        2013,
+        2014,
+        2015,
+        2016,
+        2017,
+        2018,
+        2019,
+        2020,
+        2021,
+        2022
+      ],
+      "values": [
+        289673.6112024149,
+        305504.0500901093,
+        307699.87467316433,
+        332849.9686060666,
+        341661.36546020804,
+        348770.9186022568,
+        359306.5973609728,
+        371527.72918842104,
+        20020935.132538397,
+        394378.4618114263,
+        402812.109019359,
+        413050.0089484407,
+        428295.94908233127,
+        443570.0813739475,
+        444032.7906676899,
+        18061986.906439733,
+        426821.5507361153,
+        454383.66282595514
+      ]
+    },
+    "Stock Awards": {
+      "years": [
+        2005,
+        2006,
+        2007,
+        2008,
+        2009,
+        2010,
+        2011,
+        2012,
+        2013,
+        2014,
+        2015,
+        2016,
+        2017,
+        2018,
+        2019,
+        2020,
+        2021,
+        2022
+      ],
+      "values": [
+        257462.71443904075,
+        364568.34609437484,
+        342450.6945785108,
+        390181.7837795042,
+        384219.30548898096,
+        522731.2941396919,
+        605310.0505190449,
+        649519.4363632834,
+        728084.5619057884,
+        877392.6667976497,
+        881095.1483580609,
+        927534.8911650542,
+        1038827.452705864,
+        1139805.9324857604,
+        1158856.0993382828,
+        1385513.943306771,
+        1549922.4096253426,
+        2755373.3559733173
+      ]
+    },
+    "Option Awards": {
+      "years": [
+        2005,
+        2006,
+        2007,
+        2008,
+        2009,
+        2010,
+        2011,
+        2012,
+        2013,
+        2014,
+        2015,
+        2016,
+        2017,
+        2018,
+        2019,
+        2020,
+        2021,
+        2022
+      ],
+      "values": [
+        16318.93467717592,
+        257332.03556384964,
+        265285.73440794717,
+        317073.202879905,
+        249125.46930154617,
+        278463.44663207314,
+        299135.2373469089,
+        287231.7414773121,
+        310626.94743698405,
+        331609.19159934873,
+        325731.7834224121,
+        291325.8242040927,
+        348249.16444862855,
+        548477.4402891283,
+        340850.63640291966,
+        420958.8966968912,
+        405147.68930855923,
+        195372.2425712553
+      ]
+    },
+    "Bonus": {
+      "years": [
+        2005,
+        2006,
+        2007,
+        2008,
+        2009,
+        2010,
+        2011,
+        2012,
+        2013,
+        2014,
+        2015,
+        2016,
+        2017,
+        2018,
+        2019,
+        2020,
+        2021,
+        2022
+      ],
+      "values": [
+        299365.65621331544,
+        150773.79824260197,
+        110241.73782859284,
+        89937.37057746548,
+        89609.6421886363,
+        103225.03954966641,
+        99521.490222678,
+        109648.79798117315,
+        108351.15517967811,
+        109099.96811624606,
+        104108.63122744579,
+        104852.4843184124,
+        112945.94641519392,
+        119220.22958826151,
+        115899.47764120871,
+        130050.21036050007,
+        114257.56031069144,
+        71154.22316555488
+      ]
+    },
+    "Non Equity Incentive": {
+      "years": [
+        2005,
+        2006,
+        2007,
+        2008,
+        2009,
+        2010,
+        2011,
+        2012,
+        2013,
+        2014,
+        2015,
+        2016,
+        2017,
+        2018,
+        2019,
+        2020,
+        2021,
+        2022
+      ],
+      "values": [
+        100987.96521884958,
+        226093.58863663024,
+        223757.90633053746,
+        190112.85877579296,
+        226851.8758529105,
+        306079.17200107075,
+        301605.83027483156,
+        303914.47658302257,
+        346899.14006393455,
+        378831.5632987873,
+        375650.6928487031,
+        386651.91694355774,
+        426414.4797439628,
+        446975.6366412828,
+        403280.6740157929,
+        377522.98870126926,
+        453055.45552340336,
+        462825.1728320194
+      ]
+    },
+    "Other Compensation": {
+      "years": [
+        2005,
+        2006,
+        2007,
+        2008,
+        2009,
+        2010,
+        2011,
+        2012,
+        2013,
+        2014,
+        2015,
+        2016,
+        2017,
+        2018,
+        2019,
+        2020,
+        2021,
+        2022
+      ],
+      "values": [
+        81183.52423612276,
+        86783.46192695282,
+        90989.94723771144,
+        81866.98751645307,
+        76377.20525816549,
+        84142.2375564204,
+        159989.03703047175,
+        100654.2935234504,
+        106955.45783296181,
+        104887.59357985263,
+        118675.87858710029,
+        108747.43084123096,
+        124479.23725355529,
+        121496.66114976474,
+        131167.45834045656,
+        149410.89613852173,
+        90833.88190171591,
+        65212.55548817465
+      ]
+    }
+  }
+}

index.html

@@ -0,0 +1,611 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Execcomp-AI Dashboard</title>
+<script src="https://cdn.plot.ly/plotly-2.35.0.min.js"></script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+<style>
+/* ── Reset & Base ────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  background: #F8FAFC;
+  color: #1E293B;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: #2563EB; text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* ── Layout ──────────────────────────────────────────── */
+.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
+
+/* ── Header ──────────────────────────────────────────── */
+.hero {
+  background: #FFFFFF;
+  border-bottom: 1px solid #E2E8F0;
+  padding: 48px 0 40px;
+  margin-bottom: 32px;
+}
+.hero-inner { text-align: center; }
+.hero h1 {
+  font-size: 2.5rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: #0F172A;
+  margin-bottom: 12px;
+}
+.hero p {
+  font-size: 1.05rem;
+  color: #64748B;
+  max-width: 620px;
+  margin: 0 auto 24px;
+}
+.badge-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
+.badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: #F1F5F9; border: 1px solid #E2E8F0;
+  color: #475569; padding: 8px 18px; border-radius: 99px;
+  font-size: 13px; font-weight: 600; transition: all .15s;
+}
+.badge:hover { background: #E2E8F0; color: #1E293B; text-decoration: none; }
+.badge.accent { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
+
+/* ── Tabs ────────────────────────────────────────────── */
+.tabs { display: flex; gap: 4px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; padding: 4px; margin-bottom: 28px; }
+.tab-btn {
+  flex: 1; padding: 12px 8px; border: none; background: transparent;
+  font: 600 14px/1 'Inter', sans-serif; color: #64748B;
+  border-radius: 8px; cursor: pointer; transition: all .15s;
+  white-space: nowrap;
+}
+.tab-btn:hover { color: #1E293B; background: #F8FAFC; }
+.tab-btn.active { background: #2563EB; color: #FFFFFF; box-shadow: 0 1px 3px rgba(37,99,235,.3); }
+.tab-panel { display: none; }
+.tab-panel.active { display: block; }
+
+/* ── Cards & KPIs ────────────────────────────────────── */
+.card {
+  background: #FFFFFF;
+  border: 1px solid #E2E8F0;
+  border-radius: 14px;
+  padding: 24px;
+  margin-bottom: 20px;
+}
+.card-title { font-size: 1rem; font-weight: 700; color: #0F172A; margin-bottom: 16px; }
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 14px; margin-bottom: 24px;
+}
+.kpi {
+  background: #FFFFFF;
+  border: 1px solid #E2E8F0;
+  border-radius: 14px;
+  padding: 20px 16px;
+  text-align: center;
+  border-top: 4px solid var(--accent, #2563EB);
+  transition: transform .15s, box-shadow .15s;
+}
+.kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
+.kpi-icon { font-size: 24px; margin-bottom: 6px; }
+.kpi-val { font-size: 1.4rem; font-weight: 800; color: #0F172A; letter-spacing: -0.02em; }
+.kpi-label {
+  font-size: 11px; font-weight: 600; color: #94A3B8;
+  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;
+}
+
+/* ── Chart container ─────────────────────────────────── */
+.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
+.chart-full { margin-bottom: 20px; }
+@media (max-width: 768px) { .chart-row { grid-template-columns: 1fr; } }
+
+/* ── Tables ──────────────────────────────────────────── */
+.data-table {
+  width: 100%; border-collapse: collapse; font-size: 14px;
+  background: #FFFFFF; border-radius: 12px; overflow: hidden;
+  border: 1px solid #E2E8F0;
+}
+.data-table th {
+  background: #F8FAFC; color: #64748B; font-weight: 600;
+  padding: 14px 18px; text-align: left;
+  border-bottom: 2px solid #E2E8F0;
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
+}
+.data-table td {
+  padding: 14px 18px; border-bottom: 1px solid #F1F5F9;
+  color: #334155; vertical-align: middle;
+}
+.data-table tbody tr:hover { background: #F8FAFC; }
+.data-table .total-row { background: #F0FDF4; }
+.data-table .total-row td { font-weight: 700; color: #15803D; border-top: 2px solid #BBF7D0; }
+
+.pill {
+  display: inline-block;
+  background: #EFF6FF; color: #1D4ED8;
+  padding: 3px 12px; border-radius: 99px;
+  font-size: 12px; font-weight: 600;
+}
+
+/* ── Info boxes ──────────────────────────────────────── */
+.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
+.info-stat {
+  background: #FFFFFF; border: 1px solid #E2E8F0;
+  border-radius: 12px; padding: 20px; text-align: center;
+}
+.info-stat.green { background: #F0FDF4; border-color: #BBF7D0; }
+.info-stat.amber { background: #FFFBEB; border-color: #FDE68A; }
+.info-stat-val { font-size: 1.6rem; font-weight: 800; color: #0F172A; }
+.info-stat-label { font-size: 11px; font-weight: 600; color: #94A3B8; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
+.info-stat.green .info-stat-val { color: #16A34A; }
+.info-stat.amber .info-stat-val { color: #D97706; }
+
+.tip-box {
+  background: #EFF6FF; border-left: 4px solid #2563EB;
+  border-radius: 0 10px 10px 0; padding: 16px 20px; font-size: 14px;
+  color: #1E40AF; margin-top: 16px;
+}
+.tip-box b { color: #1E3A5F; }
+
+/* ── Pipeline info ───────────────────────────────────── */
+.pipeline-flow {
+  background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 10px;
+  padding: 16px 20px; font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 13px; color: #334155; margin-bottom: 20px;
+  overflow-x: auto; white-space: nowrap;
+}
+.steps-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
+.steps-grid b { color: #0F172A; display: block; margin-bottom: 4px; }
+.steps-grid span { color: #64748B; font-size: 13px; }
+@media (max-width: 768px) { .steps-grid { grid-template-columns: 1fr; } }
+
+/* ── Footer ──────────────────────────────────────────── */
+.footer { text-align: center; color: #94A3B8; font-size: 12px; padding: 32px 0 48px; }
+
+/* ── Plotly overrides ────────────────────────────────── */
+.js-plotly-plot .plotly .main-svg { border-radius: 8px; }
+</style>
+</head>
+<body>
+
+<!-- ═══════════════════ HERO ═══════════════════ -->
+<header class="hero">
+<div class="container hero-inner">
+  <h1>📊 Execcomp-AI Dashboard</h1>
+  <p>AI-extracted executive compensation from <b id="h-total"></b> SEC DEF 14A proxy statements (2005–2022)</p>
+  <div class="badge-row">
+    <a href="https://github.com/pierpierpy/Execcomp-AI" target="_blank" class="badge">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
+      GitHub
+    </a>
+    <a href="https://huggingface.co/datasets/pierjoe/execcomp-ai-sample" target="_blank" class="badge">🤗 Dataset</a>
+    <span class="badge accent">⚡ Qwen-VL-32B · MinerU</span>
+  </div>
+</div>
+</header>
+
+<main class="container">
+
+<!-- ═══════════════════ TABS ═══════════════════ -->
+<div class="tabs" id="tab-bar">
+  <button class="tab-btn active" data-tab="pipeline">📁 Pipeline</button>
+  <button class="tab-btn" data-tab="compensation">💰 Compensation</button>
+  <button class="tab-btn" data-tab="top10">🏆 Top Earners</button>
+  <button class="tab-btn" data-tab="quality">🎯 Data Quality</button>
+</div>
+
+<!-- ═══════════ TAB 1: Pipeline ═══════════ -->
+<div class="tab-panel active" id="panel-pipeline">
+  <div class="kpi-grid" id="kpi-pipeline"></div>
+  <div class="chart-row">
+    <div class="card"><div id="chart-donut" style="width:100%;height:380px"></div></div>
+    <div class="card"><div id="chart-by-year" style="width:100%;height:380px"></div></div>
+  </div>
+  <div class="card">
+    <div class="card-title">⚙️ How the pipeline works</div>
+    <div class="pipeline-flow">SEC EDGAR → PDF Download → MinerU Extraction → Qwen3-VL-32B Classification &amp; Parsing → Qwen3-VL-4B Verification → HF Dataset</div>
+    <div class="steps-grid">
+      <div><b>1 · Vision Extraction</b><span>MinerU converts PDFs to structured images preserving table layouts.</span></div>
+      <div><b>2 · Classification + Parsing</b><span>Qwen3-VL-32B identifies the Summary Compensation Table and parses it into typed JSON.</span></div>
+      <div><b>3 · Quality Filtering</b><span>Fine-tuned Qwen3-VL-4B assigns a confidence score (0–1) for each extracted table.</span></div>
+    </div>
+  </div>
+</div>
+
+<!-- ═══════════ TAB 2: Compensation ═══════════ -->
+<div class="tab-panel" id="panel-compensation">
+  <div class="kpi-grid" id="kpi-comp"></div>
+  <div class="card chart-full"><div id="chart-trends" style="width:100%;height:420px"></div></div>
+  <div class="chart-row">
+    <div class="card"><div id="chart-dist" style="width:100%;height:380px"></div></div>
+    <div class="card"><div id="chart-components" style="width:100%;height:380px"></div></div>
+  </div>
+  <div class="card chart-full"><div id="chart-comp-trends" style="width:100%;height:420px"></div></div>
+  <div class="card">
+    <div class="card-title">Compensation Breakdown</div>
+    <table class="data-table" id="table-breakdown"></table>
+  </div>
+</div>
+
+<!-- ═══════════ TAB 3: Top 10 ═══════════ -->
+<div class="tab-panel" id="panel-top10">
+  <div class="card chart-full"><div id="chart-top10" style="width:100%;height:500px"></div></div>
+  <div class="card">
+    <table class="data-table" id="table-top10"></table>
+  </div>
+</div>
+
+<!-- ═══════════ TAB 4: Data Quality ═══════════ -->
+<div class="tab-panel" id="panel-quality">
+  <div class="kpi-grid" id="kpi-quality"></div>
+  <div class="chart-row">
+    <div class="card"><div id="chart-prob-hist" style="width:100%;height:380px"></div></div>
+    <div class="card"><div id="chart-prob-pie" style="width:100%;height:380px"></div></div>
+  </div>
+  <div class="card" id="disambig-card"></div>
+</div>
+
+</main>
+
+<footer class="footer"><span id="footer-text"></span></footer>
+
+<!-- ═══════════════════ DATA + LOGIC ═══════════════════ -->
+<script>
+// Data loaded from file
+let D;
+
+// ── Colors ──
+const C = {
+  blue:'#2563EB', green:'#16A34A', amber:'#D97706', red:'#DC2626',
+  violet:'#7C3AED', teal:'#0D9488', slate:'#64748B', gray:'#94A3B8',
+  bg:'#FFFFFF', grid:'#E2E8F0', text:'#1E293B',
+};
+const COLORS = [C.blue, C.teal, C.green, C.violet, C.amber, C.red, '#0EA5E9', '#84CC16'];
+const plotCfg = {displayModeBar: false, responsive: true};
+
+function baseLayout(extra={}) {
+  return Object.assign({
+    font: {family:'Inter, system-ui, sans-serif', size:13, color:C.text},
+    paper_bgcolor: C.bg, plot_bgcolor: C.bg,
+    margin: {l:55, r:30, t:50, b:50},
+    hoverlabel: {bgcolor:'#fff', font:{size:13, family:'Inter'}, bordercolor:C.grid},
+  }, extra);
+}
+
+// ── Helpers ──
+const fmt = n => n.toLocaleString('en-US');
+const fmtM = n => '$' + (n/1e6).toFixed(1) + 'M';
+const fmtM2 = n => '$' + (n/1e6).toFixed(2) + 'M';
+const fmtK = n => '$' + (n/1e3).toFixed(0) + 'K';
+const fmtVal = v => v < 1e6 ? fmtK(v) : fmtM2(v);
+
+function makeKpi(container, items) {
+  const el = document.getElementById(container);
+  el.innerHTML = items.map(([icon,val,label,color]) => `
+    <div class="kpi" style="--accent:${color}">
+      <div class="kpi-icon">${icon}</div>
+      <div class="kpi-val">${val}</div>
+      <div class="kpi-label">${label}</div>
+    </div>
+  `).join('');
+}
+
+// ── Tab switching ──
+document.getElementById('tab-bar').addEventListener('click', e => {
+  const btn = e.target.closest('.tab-btn');
+  if (!btn) return;
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  btn.classList.add('active');
+  document.getElementById('panel-' + btn.dataset.tab).classList.add('active');
+  // Relayout all plotly charts in the newly visible panel for proper sizing
+  setTimeout(() => {
+    document.querySelectorAll('#panel-' + btn.dataset.tab + ' .js-plotly-plot').forEach(p => {
+      Plotly.Plots.resize(p);
+    });
+  }, 50);
+});
+
+// ── Load data and render ──
+fetch('dashboard_data.json')
+  .then(r => r.json())
+  .then(data => {
+    D = data;
+    document.getElementById('h-total').textContent = fmt(D.pipeline.total_docs);
+    document.getElementById('footer-text').textContent =
+      `Indexed on ${D.generated_at.slice(0,10)} · Execcomp-AI · Pier Paolo Di Pasquale`;
+    renderPipeline();
+    renderCompensation();
+    renderTop10();
+    renderQuality();
+  });
+
+// ═══════════════ 1. PIPELINE ═══════════════
+function renderPipeline() {
+  const p = D.pipeline;
+  makeKpi('kpi-pipeline', [
+    ['📁', fmt(p.total_docs),   'Total Filings',   C.blue],
+    ['🏢', fmt(p.non_funds),    'Companies',        C.teal],
+    ['✅', fmt(p.with_sct),     'SCT Found',        C.green],
+    ['📋', fmt(p.total_tables), 'SCT Tables',       C.violet],
+    ['❌', fmt(p.no_sct),       'No SCT',           C.red],
+    ['⏳', fmt(p.pending),      'Pending',          C.amber],
+  ]);
+
+  // Donut
+  Plotly.newPlot('chart-donut', [{
+    type:'pie', hole:.55,
+    labels: ['With SCT','No SCT','Funds (skipped)','Pending'],
+    values: [p.with_sct, p.no_sct, p.funds, p.pending],
+    marker: { colors:[C.green, C.red, C.slate, C.amber], line:{color:'#fff',width:2} },
+    textinfo:'percent', hovertemplate:'<b>%{label}</b><br>%{value:,} docs<br>%{percent}<extra></extra>',
+  }], baseLayout({
+    title:{text:'Document Breakdown',font:{size:16},x:.5,xanchor:'center'},
+    legend:{orientation:'h',y:-.06,x:.5,xanchor:'center'},
+    margin:{l:20,r:20,t:55,b:60},
+  }), plotCfg);
+
+  // Bar by year
+  const years = Object.keys(D.tables_by_year).sort();
+  const counts = years.map(y => D.tables_by_year[y]);
+  Plotly.newPlot('chart-by-year', [{
+    type:'bar', x:years, y:counts,
+    marker:{color:C.blue, line:{color:'#fff',width:1}},
+    text:counts, textposition:'outside', textfont:{size:10, color:C.text},
+    hovertemplate:'<b>Year %{x}</b><br>Tables: %{y:,}<extra></extra>',
+  }], baseLayout({
+    title:{text:'SCT Tables by Filing Year',font:{size:16},x:.5,xanchor:'center'},
+    xaxis:{title:'Filing Year',tickangle:-45,gridcolor:C.grid,linecolor:C.grid},
+    yaxis:{title:'Tables',gridcolor:C.grid,linecolor:C.grid},
+    margin:{l:55,r:25,t:55,b:70},
+  }), plotCfg);
+}
+
+// ═══════════════ 2. COMPENSATION ═══════════════
+function renderCompensation() {
+  const c = D.compensation;
+  makeKpi('kpi-comp', [
+    ['👤', fmt(c.total_exec_records), 'Exec Records', C.blue],
+    ['🏢', fmt(c.unique_companies),   'Companies',    C.teal],
+    ['💰', fmtM2(c.mean_total),       'Mean Comp',    C.green],
+    ['📊', fmtM2(c.median_total),     'Median Comp',  C.violet],
+    ['🏆', fmtM(c.max_total),         'Max Comp',     C.amber],
+  ]);
+
+  // Trends (dual axis)
+  const t = D.trends;
+  const tYears   = t.map(r=>r.year);
+  const tMeans   = t.map(r=>r.mean/1e6);
+  const tMedians = t.map(r=>r.median/1e6);
+  const tCounts  = t.map(r=>r.count);
+
+  Plotly.newPlot('chart-trends', [
+    { type:'bar', x:tYears, y:tCounts, name:'Exec Count', yaxis:'y2',
+      marker:{color:C.grid}, opacity:.5, hoverinfo:'skip' },
+    { type:'scatter', mode:'lines+markers', x:tYears, y:tMeans, name:'Mean',
+      line:{color:C.blue,width:3}, marker:{size:8,color:'#fff',line:{color:C.blue,width:2}},
+      hovertemplate:'<b>FY %{x}</b><br>Mean: $%{y:.2f}M<extra></extra>' },
+    { type:'scatter', mode:'lines+markers', x:tYears, y:tMedians, name:'Median',
+      line:{color:C.amber,width:3,dash:'dot'}, marker:{size:8,color:'#fff',line:{color:C.amber,width:2}},
+      hovertemplate:'<b>FY %{x}</b><br>Median: $%{y:.2f}M<extra></extra>' },
+  ], baseLayout({
+    title:{text:'Total Compensation Trends (2005–2022)',font:{size:16},x:.5,xanchor:'center'},
+    xaxis:{title:'Fiscal Year',gridcolor:C.grid,linecolor:C.grid},
+    yaxis:{title:'Total Comp ($M)',gridcolor:C.grid,linecolor:C.grid},
+    yaxis2:{overlaying:'y',side:'right',showgrid:false,showticklabels:false},
+    legend:{orientation:'h',y:1.08,x:.5,xanchor:'center'},
+    margin:{l:60,r:40,t:60,b:55},
+  }), plotCfg);
+
+  // Distribution
+  const d = D.distribution;
+  const mids=[],widths=[];
+  for(let i=0;i<d.values.length;i++){
+    mids.push((d.edges[i]+d.edges[i+1])/2);
+    widths.push(d.edges[i+1]-d.edges[i]);
+  }
+  Plotly.newPlot('chart-dist', [{
+    type:'bar', x:mids, y:d.values, width:widths,
+    marker:{color:C.teal,line:{width:0}}, opacity:.85,
+    hovertemplate:'<b>$%{x:.1f}M range</b><br>Executives: %{y:,}<extra></extra>',
+  }], baseLayout({
+    title:{text:`Distribution (≤99th pctl, ${fmt(d.n_outliers)} outliers excluded)`,font:{size:15},x:.5,xanchor:'center'},
+    xaxis:{title:'Total Compensation ($M)',gridcolor:C.grid,linecolor:C.grid},
+    yaxis:{title:'Executives',gridcolor:C.grid,linecolor:C.grid},
+    shapes:[{type:'line',x0:d.median/1e6,x1:d.median/1e6,y0:0,y1:1,yref:'paper',
+             line:{color:C.red,width:2,dash:'dash'}}],
+    annotations:[{x:d.median/1e6,y:1,yref:'paper',text:'Median $'+((d.median/1e6).toFixed(1))+'M',
+                  showarrow:false,font:{color:C.red,size:12},xanchor:'left',xshift:6}],
+    margin:{l:60,r:25,t:55,b:55},
+  }), plotCfg);
+
+  // Components bar
+  const cc = D.comp_components;
+  const sorted = Object.entries(cc).sort((a,b)=>a[1]-b[1]);
+  Plotly.newPlot('chart-components', [{
+    type:'bar', orientation:'h',
+    y:sorted.map(([k])=>k), x:sorted.map(([,v])=>v/1e6),
+    marker:{color:COLORS.slice(0,sorted.length), line:{width:0}},
+    text:sorted.map(([,v])=>'$'+(v/1e6).toFixed(2)+'M'),
+    textposition:'outside', textfont:{size:12,color:C.text},
+    hovertemplate:'<b>%{y}</b><br>Average: $%{x:.2f}M<extra></extra>',
+  }], baseLayout({
+    title:{text:'Average Comp by Component',font:{size:16},x:.5,xanchor:'center'},
+    xaxis:{title:'Average ($M)',gridcolor:C.grid,linecolor:C.grid,range:[0,sorted[sorted.length-1][1]/1e6*1.25]},
+    yaxis:{automargin:true,gridcolor:C.grid,linecolor:C.grid},
+    margin:{l:10,r:80,t:55,b:55},
+  }), plotCfg);
+
+  // Component trends
+  const ct = D.comp_trends;
+  const traces = Object.entries(ct).map(([name,data],i) => ({
+    type:'scatter', mode:'lines+markers', name,
+    x:data.years, y:data.values.map(v=>v/1e6),
+    line:{color:COLORS[i%COLORS.length],width:2}, marker:{size:5},
+    hovertemplate:`<b>${name}</b><br>FY %{x}<br>$%{y:.2f}M<extra></extra>`,
+  }));
+  Plotly.newPlot('chart-comp-trends', traces, baseLayout({
+    title:{text:'Compensation Components Over Time',font:{size:16},x:.5,xanchor:'center'},
+    xaxis:{title:'Fiscal Year',gridcolor:C.grid,linecolor:C.grid},
+    yaxis:{title:'Average ($M)',gridcolor:C.grid,linecolor:C.grid},
+    legend:{orientation:'h',y:1.1,x:.5,xanchor:'center'},
+    margin:{l:55,r:30,t:70,b:55},
+  }), plotCfg);
+
+  // Breakdown table
+  const bd = D.compensation.breakdown;
+  let rows = `<thead><tr>
+    <th>Component</th><th style="text-align:right">Mean</th>
+    <th style="text-align:right">Median</th><th style="text-align:right">Max</th>
+  </tr></thead><tbody>`;
+  for (const [k,v] of Object.entries(bd)) {
+    const label = k.replace(/_/g,' ').replace(/\b\w/g,c=>c.toUpperCase());
+    const isTotal = k === 'total';
+    rows += `<tr class="${isTotal?'total-row':''}">
+      <td>${isTotal?'⭐ ':''}${label}</td>
+      <td style="text-align:right">${fmtVal(v.mean)}</td>
+      <td style="text-align:right">${fmtVal(v.median)}</td>
+      <td style="text-align:right">${fmtVal(v.max)}</td>
+    </tr>`;
+  }
+  rows += '</tbody>';
+  document.getElementById('table-breakdown').innerHTML = rows;
+}
+
+// ═══════════════ 3. TOP 10 ═══════════════
+function renderTop10() {
+  const data = D.top10;
+  const rev = [...data].reverse();
+  const medals = ['🥇','🥈','🥉'];
+
+  Plotly.newPlot('chart-top10', [{
+    type:'bar', orientation:'h',
+    y: rev.map(e=>e.name.slice(0,28)),
+    x: rev.map(e=>e.total/1e6),
+    marker: { color: rev.map((_,i)=> i >= rev.length-3 ? C.violet : C.blue), line:{width:0} },
+    text: rev.map(e=>'$'+(e.total/1e6).toFixed(1)+'M'),
+    textposition:'outside', textfont:{size:12,color:C.text},
+    customdata: rev.map(e=>e.company),
+    hovertemplate:'<b>%{y}</b><br>%{customdata}<br>$%{x:.1f}M<extra></extra>',
+  }], baseLayout({
+    title:{text:'Top 10 Highest Paid Executives (Overall)',font:{size:16},x:.5,xanchor:'center'},
+    xaxis:{title:'Total Compensation ($M)',gridcolor:C.grid,linecolor:C.grid,
+           range:[0,Math.max(...data.map(e=>e.total))/1e6*1.15]},
+    yaxis:{automargin:true,gridcolor:C.grid,linecolor:C.grid},
+    margin:{l:10,r:80,t:55,b:55}, height:480,
+  }), plotCfg);
+
+  // Table
+  let rows = `<thead><tr>
+    <th style="text-align:center;width:50px">#</th>
+    <th>Executive</th><th>Company</th><th>Title</th>
+    <th style="text-align:center">Year</th>
+    <th style="text-align:right">Total</th>
+  </tr></thead><tbody>`;
+  data.forEach((e,i) => {
+    const rank = i<3 ? `<span style="font-size:20px">${medals[i]}</span>` : `<b style="color:${C.gray}">${i+1}</b>`;
+    rows += `<tr${i%2?' style="background:#FAFAFA"':''}>
+      <td style="text-align:center">${rank}</td>
+      <td style="font-weight:700;color:${C.text}">${e.name}</td>
+      <td><span class="pill">${e.company}</span></td>
+      <td style="color:${C.slate};font-size:13px">${e.title||'-'}</td>
+      <td style="text-align:center;font-weight:600">${e.fiscal_year}</td>
+      <td style="text-align:right;font-weight:800;color:${C.green};font-size:15px">$${(e.total/1e6).toFixed(1)}M</td>
+    </tr>`;
+  });
+  rows += '</tbody>';
+  document.getElementById('table-top10').innerHTML = rows;
+}
+
+// ═══════════════ 4. DATA QUALITY ═══════════════
+function renderQuality() {
+  const p = D.probability;
+  const tot = p.total_tables;
+  const pct = n => (n/tot*100).toFixed(0) + '%';
+
+  makeKpi('kpi-quality', [
+    ['📋', fmt(tot),                'Tables Analyzed',  C.blue],
+    ['📄', fmt(p.unique_docs),      'Unique Documents', C.slate],
+    ['✅', fmt(p.high_confidence)+' ('+pct(p.high_confidence)+')',  'High ≥0.7', C.green],
+    ['⚠️', fmt(p.medium_confidence)+' ('+pct(p.medium_confidence)+')', 'Medium',  C.amber],
+    ['❌', fmt(p.low_confidence)+' ('+pct(p.low_confidence)+')',  'Low <0.3',    C.red],
+  ]);
+
+  // Histogram with colored bars
+  const mids=[], widths=[], colors=[];
+  for(let i=0;i<p.hist_values.length;i++){
+    const m = (p.hist_edges[i]+p.hist_edges[i+1])/2;
+    mids.push(m); widths.push(p.hist_edges[i+1]-p.hist_edges[i]);
+    colors.push(m>=.7 ? C.green : m>=.3 ? C.amber : C.red);
+  }
+  const ymax = Math.max(...p.hist_values);
+  Plotly.newPlot('chart-prob-hist', [{
+    type:'bar', x:mids, y:p.hist_values, width:widths,
+    marker:{color:colors,line:{width:0}}, opacity:.85,
+    hovertemplate:'<b>Score: %{x:.2f}</b><br>Tables: %{y:,}<extra></extra>',
+  }], baseLayout({
+    title:{text:'Confidence Score Distribution',font:{size:16},x:.5,xanchor:'center'},
+    xaxis:{title:'SCT Probability (0–1)',range:[0,1],gridcolor:C.grid,linecolor:C.grid},
+    yaxis:{title:'Tables',gridcolor:C.grid,linecolor:C.grid},
+    shapes:[
+      {type:'line',x0:.7,x1:.7,y0:0,y1:1,yref:'paper',line:{color:C.green,width:2,dash:'dash'}},
+      {type:'line',x0:.3,x1:.3,y0:0,y1:1,yref:'paper',line:{color:C.amber,width:2,dash:'dash'}},
+    ],
+    annotations:[
+      {x:.85,y:ymax*.95,text:'Keep',showarrow:false,font:{color:C.green,size:13,weight:600}},
+      {x:.5,y:ymax*.95,text:'Review',showarrow:false,font:{color:C.amber,size:13}},
+      {x:.15,y:ymax*.95,text:'Filter out',showarrow:false,font:{color:C.red,size:13}},
+    ],
+    margin:{l:60,r:25,t:55,b:55},
+  }), plotCfg);
+
+  // Pie
+  Plotly.newPlot('chart-prob-pie', [{
+    type:'pie', hole:.55,
+    labels:['High (≥0.7)','Medium (0.3–0.7)','Low (<0.3)'],
+    values:[p.high_confidence, p.medium_confidence, p.low_confidence],
+    marker:{colors:[C.green, C.amber, C.red], line:{color:'#fff',width:2}},
+    textinfo:'percent',
+    hovertemplate:'<b>%{label}</b><br>%{value:,} tables<br>%{percent}<extra></extra>',
+  }], baseLayout({
+    title:{text:'Confidence Breakdown',font:{size:16},x:.5,xanchor:'center'},
+    legend:{orientation:'h',y:-.06,x:.5,xanchor:'center'},
+    margin:{l:20,r:20,t:55,b:60},
+  }), plotCfg);
+
+  // Disambiguation card
+  const disambPct = p.multi_table_docs ? (p.could_disambiguate/p.multi_table_docs*100).toFixed(0) : 0;
+  const remaining = p.multi_table_docs - p.could_disambiguate;
+  document.getElementById('disambig-card').innerHTML = `
+    <div class="card-title">🔍 Duplicate / False-Positive Resolution</div>
+    <p style="color:${C.slate};font-size:14px;margin-bottom:20px">
+      Proxy filings often contain multiple tables resembling the Summary Compensation Table
+      (Director Compensation, Option Grant tables, etc.). A fine-tuned Qwen3-VL-4B binary classifier
+      assigns a confidence score to help filter them out.
+    </p>
+    <div class="info-grid">
+      <div class="info-stat">
+        <div class="info-stat-val">${fmt(p.multi_table_docs)}</div>
+        <div class="info-stat-label">Docs with duplicates</div>
+      </div>
+      <div class="info-stat green">
+        <div class="info-stat-val">${fmt(p.could_disambiguate)}</div>
+        <div class="info-stat-label">Auto-resolved (${disambPct}%)</div>
+      </div>
+      <div class="info-stat amber">
+        <div class="info-stat-val">${fmt(remaining)}</div>
+        <div class="info-stat-label">Still ambiguous</div>
+      </div>
+    </div>
+    <div class="tip-box">
+      <b>💡 Tip:</b> Filter by <code>sct_probability ≥ 0.7</code> to keep only high-confidence SCTs.
+    </div>`;
+}
+</script>
+</body>
+</html>