| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Benchmark Sessions — Portfolio Ledger</title> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> |
| <style> |
| :root { |
| --bg: #08080c; |
| --surface: #111119; |
| --surface2: #16161f; |
| --border: #22222e; |
| --text: #e8e8f0; |
| --muted: #6a6a7e; |
| --accent: #6c5ce7; |
| --accent2: #00cec9; |
| --gold: #fdcb6e; |
| --red: #e74c3c; |
| --green: #00b894; |
| --orange: #e17055; |
| --blue: #0984e3; |
| --pink: #fd79a8; |
| } |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| body { |
| font-family: 'Inter', -apple-system, system-ui, sans-serif; |
| background: var(--bg); |
| color: var(--text); |
| min-height: 100vh; |
| padding: 32px 24px; |
| } |
| .container { max-width: 1400px; margin: 0 auto; } |
| |
| |
| .header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-end; |
| margin-bottom: 40px; |
| flex-wrap: wrap; |
| gap: 20px; |
| } |
| .header h1 { |
| font-size: 36px; |
| font-weight: 800; |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| letter-spacing: -1px; |
| } |
| .header .subtitle { |
| color: var(--muted); |
| font-size: 14px; |
| margin-top: 6px; |
| } |
| .header .meta { |
| text-align: right; |
| } |
| .header .meta .count { |
| font-size: 48px; |
| font-weight: 800; |
| color: var(--accent2); |
| line-height: 1; |
| } |
| .header .meta .label { |
| color: var(--muted); |
| font-size: 12px; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| } |
| |
| |
| .kpi-row { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 16px; |
| margin-bottom: 32px; |
| } |
| .kpi { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 24px; |
| position: relative; |
| overflow: hidden; |
| } |
| .kpi::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; right: 0; |
| height: 3px; |
| background: var(--accent); |
| } |
| .kpi.gold::before { background: var(--gold); } |
| .kpi.green::before { background: var(--green); } |
| .kpi.blue::before { background: var(--blue); } |
| .kpi.pink::before { background: var(--pink); } |
| .kpi .value { |
| font-size: 36px; |
| font-weight: 800; |
| line-height: 1.1; |
| } |
| .kpi .label { |
| color: var(--muted); |
| font-size: 12px; |
| text-transform: uppercase; |
| letter-spacing: 1.5px; |
| margin-top: 8px; |
| } |
| .kpi .sub { |
| color: var(--muted); |
| font-size: 13px; |
| margin-top: 4px; |
| } |
| |
| |
| .charts-row { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 20px; |
| margin-bottom: 32px; |
| } |
| .chart-card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 24px; |
| } |
| .chart-card h3 { |
| font-size: 16px; |
| font-weight: 700; |
| margin-bottom: 20px; |
| color: var(--accent2); |
| } |
| .chart-card canvas { |
| max-height: 320px; |
| } |
| |
| |
| .table-card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| overflow: hidden; |
| margin-bottom: 32px; |
| } |
| .table-header { |
| padding: 20px 24px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| border-bottom: 1px solid var(--border); |
| flex-wrap: wrap; |
| gap: 12px; |
| } |
| .table-header h3 { |
| font-size: 16px; |
| font-weight: 700; |
| color: var(--accent2); |
| } |
| .filters { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
| .filter-btn { |
| background: var(--surface2); |
| border: 1px solid var(--border); |
| color: var(--muted); |
| padding: 6px 14px; |
| border-radius: 8px; |
| font-size: 12px; |
| cursor: pointer; |
| transition: all 0.2s; |
| font-weight: 600; |
| } |
| .filter-btn:hover { border-color: var(--accent); color: var(--text); } |
| .filter-btn.active { |
| background: var(--accent); |
| border-color: var(--accent); |
| color: white; |
| } |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 13px; |
| } |
| thead th { |
| text-align: left; |
| padding: 12px 16px; |
| color: var(--muted); |
| font-size: 11px; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| font-weight: 700; |
| border-bottom: 1px solid var(--border); |
| cursor: pointer; |
| user-select: none; |
| white-space: nowrap; |
| } |
| thead th:hover { color: var(--accent2); } |
| thead th .arrow { font-size: 10px; margin-left: 4px; opacity: 0.5; } |
| tbody tr { |
| border-bottom: 1px solid rgba(34,34,46,0.5); |
| transition: background 0.15s; |
| } |
| tbody tr:hover { background: rgba(108,92,231,0.08); } |
| tbody td { |
| padding: 12px 16px; |
| vertical-align: middle; |
| } |
| .session-id { |
| font-family: 'SF Mono', 'Fira Code', monospace; |
| font-size: 12px; |
| color: var(--accent); |
| font-weight: 700; |
| } |
| .title-cell { |
| font-weight: 600; |
| max-width: 320px; |
| } |
| .category-badge { |
| display: inline-block; |
| padding: 3px 10px; |
| border-radius: 6px; |
| font-size: 11px; |
| font-weight: 700; |
| white-space: nowrap; |
| } |
| .cat-hft { background: rgba(231,76,60,0.15); color: var(--red); } |
| .cat-appraisal { background: rgba(253,203,110,0.15); color: var(--gold); } |
| .cat-tooling { background: rgba(0,206,201,0.15); color: var(--accent2); } |
| .cat-defi { background: rgba(9,132,227,0.15); color: var(--blue); } |
| .cat-ip { background: rgba(253,121,168,0.15); color: var(--pink); } |
| .cat-meta { background: rgba(108,92,231,0.15); color: var(--accent); } |
| .cat-legal { background: rgba(0,184,148,0.15); color: var(--green); } |
| .cat-portfolio { background: rgba(224,160,92,0.15); color: var(--orange); } |
| .cat-general { background: rgba(108,117,125,0.15); color: #adb5bd; } |
| .cat-mixed { background: rgba(162,155,254,0.15); color: #a29bfe; } |
| .cat-routing { background: rgba(85,239,196,0.15); color: #55efc4; } |
| .cat-protocol { background: rgba(253,121,168,0.15); color: var(--pink); } |
| .cat-decentralized { background: rgba(9,132,227,0.15); color: var(--blue); } |
| |
| .score-bar { |
| display: inline-block; |
| width: 60px; |
| height: 6px; |
| background: var(--surface2); |
| border-radius: 3px; |
| overflow: hidden; |
| vertical-align: middle; |
| margin-left: 8px; |
| } |
| .score-fill { |
| height: 100%; |
| border-radius: 3px; |
| transition: width 0.5s; |
| } |
| .score-text { |
| font-weight: 700; |
| font-size: 14px; |
| } |
| .complexity-pill { |
| display: inline-block; |
| padding: 2px 8px; |
| border-radius: 4px; |
| font-size: 11px; |
| font-weight: 700; |
| font-family: monospace; |
| } |
| .output-lines { |
| font-family: monospace; |
| font-size: 12px; |
| color: var(--muted); |
| } |
| .output-type { |
| font-size: 12px; |
| color: var(--muted); |
| max-width: 280px; |
| } |
| .date-cell { |
| font-size: 12px; |
| color: var(--muted); |
| white-space: nowrap; |
| } |
| |
| |
| .top-sessions { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 16px; |
| margin-bottom: 32px; |
| } |
| .top-card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 20px; |
| position: relative; |
| } |
| .top-card .rank { |
| position: absolute; |
| top: 16px; |
| right: 16px; |
| font-size: 32px; |
| font-weight: 800; |
| color: var(--surface2); |
| line-height: 1; |
| } |
| .top-card .sid { |
| font-family: monospace; |
| font-size: 12px; |
| color: var(--accent); |
| font-weight: 700; |
| margin-bottom: 6px; |
| } |
| .top-card .title { |
| font-size: 15px; |
| font-weight: 700; |
| margin-bottom: 12px; |
| padding-right: 40px; |
| } |
| .top-card .stats { |
| display: flex; |
| gap: 16px; |
| flex-wrap: wrap; |
| } |
| .top-card .stat { |
| text-align: center; |
| } |
| .top-card .stat .val { |
| font-size: 22px; |
| font-weight: 800; |
| } |
| .top-card .stat .lbl { |
| font-size: 10px; |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| |
| .footer { |
| text-align: center; |
| color: var(--muted); |
| font-size: 12px; |
| padding: 24px; |
| border-top: 1px solid var(--border); |
| } |
| |
| @media (max-width: 900px) { |
| .charts-row { grid-template-columns: 1fr; } |
| .header { flex-direction: column; align-items: flex-start; } |
| .header .meta { text-align: left; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <div> |
| <h1>Benchmark Sessions</h1> |
| <div class="subtitle">Portfolio Ledger — 32 sessions · May 2026 – Feb 2026 · Claude + GPT adversarial benchmark</div> |
| </div> |
| <div class="meta"> |
| <div class="count" id="totalSessions">32</div> |
| <div class="label">Total Sessions</div> |
| </div> |
| </div> |
|
|
| <div class="kpi-row" id="kpiRow"></div> |
|
|
| <div class="charts-row"> |
| <div class="chart-card"> |
| <h3>Session Score Timeline</h3> |
| <canvas id="timelineChart"></canvas> |
| </div> |
| <div class="chart-card"> |
| <h3>Category Distribution</h3> |
| <canvas id="categoryChart"></canvas> |
| </div> |
| </div> |
|
|
| <div class="charts-row"> |
| <div class="chart-card"> |
| <h3>Prompt Complexity vs Domain Depth</h3> |
| <canvas id="scatterChart"></canvas> |
| </div> |
| <div class="chart-card"> |
| <h3>Output Volume by Session</h3> |
| <canvas id="outputChart"></canvas> |
| </div> |
| </div> |
|
|
| <div class="table-card"> |
| <div class="table-header"> |
| <h3>Session Ledger</h3> |
| <div class="filters" id="filters"></div> |
| </div> |
| <div style="overflow-x:auto"> |
| <table id="dataTable"> |
| <thead> |
| <tr> |
| <th data-sort="session_id">ID</th> |
| <th data-sort="date">Date</th> |
| <th data-sort="title">Title</th> |
| <th data-sort="category">Category</th> |
| <th data-sort="prompt_complexity">Complexity</th> |
| <th data-sort="domain_depth">Depth</th> |
| <th data-sort="output_lines">Output Lines</th> |
| <th data-sort="session_score">Score</th> |
| <th data-sort="avg_user_score">User Score</th> |
| <th>Output Type</th> |
| </tr> |
| </thead> |
| <tbody id="tableBody"></tbody> |
| </table> |
| </div> |
| </div> |
|
|
| <div class="top-sessions" id="topSessions"></div> |
|
|
| <div class="footer"> |
| Benchmark Sessions Ledger · Generated <span id="genDate"></span> · HostModel Bridge Active |
| </div> |
| </div> |
|
|
| <script> |
| const sessions = [ |
| {session_id:"C01",date:"2026-05-30",title:"Claude User Account Benchmark Certification",category:"META",prompt_complexity:72,domain_depth:95,output_lines:0,session_score:78,avg_user_score:18,output_type:"React artifact (animated certificate)"}, |
| {session_id:"C02",date:"2026-05-30",title:"Benchmark + MEMBRA/CollateralOps Novelty Catalog",category:"IP FRAMEWORK",prompt_complexity:98,domain_depth:97,output_lines:0,session_score:97,avg_user_score:3,output_type:"React artifact x2 (60 primitives, radar)"}, |
| {session_id:"C03",date:"2026-05-26",title:"Product Value Assessment - $100 ETL Package",category:"APPRAISAL",prompt_complexity:85,domain_depth:88,output_lines:2800,session_score:89,avg_user_score:12,output_type:"Appraisal + institutional rewrite (53 tests)"}, |
| {session_id:"C04",date:"2026-05-26",title:"Institutional Benchmark Asset Framework (UCC Art.9)",category:"LEGAL/FINANCE",prompt_complexity:97,domain_depth:96,output_lines:0,session_score:96,avg_user_score:2,output_type:"15000-word working paper rewrite"}, |
| {session_id:"C05",date:"2026-05-25",title:"Repo Appraiser v2 - Polish + Dollar Valuation",category:"TOOLING",prompt_complexity:88,domain_depth:91,output_lines:1850,session_score:92,avg_user_score:8,output_type:"1850-line CLI rewrite + appraisal"}, |
| {session_id:"C06",date:"2026-05-23",title:"Mempool Endpoint Registry Valuation",category:"APPRAISAL",prompt_complexity:80,domain_depth:92,output_lines:0,session_score:85,avg_user_score:5,output_type:"Adversarial appraisal $2K-3.5K"}, |
| {session_id:"C07",date:"2026-05-23",title:"300-KPI Benchmark Ledger + IP Disclosure Package",category:"IP PACKAGE",prompt_complexity:82,domain_depth:87,output_lines:0,session_score:83,avg_user_score:4,output_type:"300-KPI ledger + seller disclosure"}, |
| {session_id:"C08",date:"2026-05-21",title:"LLM Repo Appraisal CLI - GitHub + HuggingFace",category:"TOOLING",prompt_complexity:85,domain_depth:89,output_lines:1850,session_score:90,avg_user_score:9,output_type:"Single-file async Python CLI"}, |
| {session_id:"C09",date:"2026-05-21",title:"GitHub Portfolio Review - overandor",category:"ROUTING",prompt_complexity:55,domain_depth:70,output_lines:0,session_score:60,avg_user_score:22,output_type:"Repo selection / default-offer"}, |
| {session_id:"C10",date:"2026-05-18",title:"Gate.io Perpetual Futures C++ Market Maker (R1/2)",category:"HFT/C++",prompt_complexity:97,domain_depth:99,output_lines:1906,session_score:99,avg_user_score:1,output_type:"C++ REST/WS/MarketStore/Scanner"}, |
| {session_id:"C11",date:"2026-05-18",title:"Code Appraisal - gate_aggressive_hedge_v2.py",category:"APPRAISAL",prompt_complexity:75,domain_depth:97,output_lines:0,session_score:88,avg_user_score:3,output_type:"Institutional appraisal $50K-65K"}, |
| {session_id:"C12",date:"2026-05-17",title:"Membramoney Protocol Devnet Review",category:"PROTOCOL AUDIT",prompt_complexity:82,domain_depth:95,output_lines:0,session_score:91,avg_user_score:2,output_type:"5800-word institutional appraisal"}, |
| {session_id:"C13",date:"2026-05-17",title:"Full Portfolio Appraisal - 60 Repositories",category:"PORTFOLIO",prompt_complexity:90,domain_depth:96,output_lines:0,session_score:95,avg_user_score:1,output_type:"3 docs: appraisal/quality/deploy"}, |
| {session_id:"C14",date:"2026-05-04",title:"Session Highlights + Gate.io Micro MM Reprint",category:"HFT/PYTHON",prompt_complexity:78,domain_depth:93,output_lines:1156,session_score:88,avg_user_score:15,output_type:"1156-line prod bot + history recap"}, |
| {session_id:"C15",date:"2026-04-28",title:"Gate.io Futures MM + Tampermonkey ChatGPT Bridge",category:"HFT/INFRA",prompt_complexity:94,domain_depth:97,output_lines:3000,session_score:98,avg_user_score:1,output_type:"9-module MM + WS tunnel"}, |
| {session_id:"C16",date:"2026-04-28",title:"Micro Market Maker - First Institutional Build",category:"HFT/PYTHON",prompt_complexity:91,domain_depth:96,output_lines:1303,session_score:96,avg_user_score:2,output_type:"1303-line async Python MM"}, |
| {session_id:"C17",date:"2026-04-12",title:"Aggressive Hedged Trading Engine (v1->v2)",category:"HFT/PYTHON",prompt_complexity:93,domain_depth:96,output_lines:2747,session_score:96,avg_user_score:1,output_type:"2747-line single-file, 7-state FSM"}, |
| {session_id:"C18",date:"2026-04-10",title:"Code Appraisal + Institutional Rewrite (mm_multi)",category:"HFT/PYTHON",prompt_complexity:92,domain_depth:97,output_lines:2804,session_score:97,avg_user_score:1,output_type:"5-exchange single file, 41 tests"}, |
| {session_id:"C19",date:"2026-04-08",title:"Gate.io Trading Bot Search + gate_mm_beast Appraisal",category:"APPRAISAL",prompt_complexity:70,domain_depth:90,output_lines:0,session_score:82,avg_user_score:8,output_type:"Drive search + $4K-7K appraisal"}, |
| {session_id:"C20",date:"2026-04-08",title:"Multi-Ticker MM Engine (beast lineage)",category:"HFT/PYTHON",prompt_complexity:90,domain_depth:95,output_lines:1720,session_score:94,avg_user_score:3,output_type:"1720-line AI-ensemble single file"}, |
| {session_id:"C21",date:"2026-04-08",title:"File Polish - Resume + Gate.io Bot Rewrite",category:"MIXED",prompt_complexity:65,domain_depth:80,output_lines:0,session_score:70,avg_user_score:18,output_type:".docx resume + bot bug-fix rewrite"}, |
| {session_id:"C22",date:"2026-04-07",title:"Code Appraisal Pricing (v1->v6 Russian)",category:"HFT/PYTHON",prompt_complexity:88,domain_depth:94,output_lines:0,session_score:89,avg_user_score:5,output_type:"Multi-version rewrite in Russian"}, |
| {session_id:"C23",date:"2026-04-06",title:"Code Appraisal - trader v3->v5",category:"APPRAISAL",prompt_complexity:85,domain_depth:93,output_lines:2114,session_score:92,avg_user_score:6,output_type:"2114-line; Sharpe/Sortino/MonteCarlo"}, |
| {session_id:"C24",date:"2026-04-06",title:"Code Appraisal v4 - Fix 5 Backtest Flaws",category:"HFT/PYTHON",prompt_complexity:83,domain_depth:92,output_lines:0,session_score:88,avg_user_score:7,output_type:"Look-ahead/fee/walk-forward fixes"}, |
| {session_id:"C25",date:"2026-04-06",title:"Micro-Notional Momentum Script (v1->v3)",category:"HFT/PYTHON",prompt_complexity:86,domain_depth:93,output_lines:0,session_score:90,avg_user_score:6,output_type:"5 alpha sources, Kelly sizing"}, |
| {session_id:"C26",date:"2026-04-06",title:"Decentralized Compute & MEV Architecture",category:"DECENTRALIZED",prompt_complexity:95,domain_depth:94,output_lines:0,session_score:93,avg_user_score:2,output_type:"IPFS/Akash SDL + Gate.io scalper"}, |
| {session_id:"C27",date:"2026-04-06",title:"Valuation Engine - Python + Solidity Split",category:"DEFI/TOOLING",prompt_complexity:84,domain_depth:90,output_lines:0,session_score:87,avg_user_score:4,output_type:"Clean Py valuation engine + RPDAToken.sol"}, |
| {session_id:"C28",date:"2026-04-06",title:"Drift Strategy Order Executor + Jito Bundles",category:"DEFI/SOLANA",prompt_complexity:96,domain_depth:97,output_lines:0,session_score:96,avg_user_score:1,output_type:"TS+Py multi-strategy executor"}, |
| {session_id:"C29",date:"2026-04-04",title:"Gate.io Spot Market Maker (3 rounds)",category:"HFT/PYTHON",prompt_complexity:92,domain_depth:96,output_lines:0,session_score:95,avg_user_score:2,output_type:"Avellaneda-Stoikov, 53-test suite"}, |
| {session_id:"C30",date:"2026-04-04",title:"Compound Interest Visualization",category:"GENERAL",prompt_complexity:30,domain_depth:40,output_lines:0,session_score:42,avg_user_score:55,output_type:"Interactive slider widget"}, |
| {session_id:"C31",date:"2026-02-17",title:"DEX Arbitrage Engine - Solana/Base Port",category:"DEFI/SOLANA",prompt_complexity:91,domain_depth:94,output_lines:0,session_score:92,avg_user_score:2,output_type:"Jupiter v6 + Uniswap v3 quoter"}, |
| {session_id:"C32",date:"2026-02-17",title:"Enhanced Trading System (GA/RL/grid remix)",category:"HFT/PYTHON",prompt_complexity:84,domain_depth:90,output_lines:0,session_score:87,avg_user_score:4,output_type:"GA+RL+grid MM artifact"}, |
| ]; |
| |
| |
| const catColors = { |
| "HFT/C++": "#e74c3c", "HFT/PYTHON": "#e17055", "HFT/INFRA": "#d63031", |
| "APPRAISAL": "#fdcb6e", "TOOLING": "#00cec9", "IP FRAMEWORK": "#fd79a8", |
| "IP PACKAGE": "#fd79a8", "LEGAL/FINANCE": "#00b894", "PORTFOLIO": "#e17055", |
| "META": "#6c5ce7", "ROUTING": "#55efc4", "MIXED": "#a29bfe", |
| "PROTOCOL AUDIT": "#fd79a8", "DECENTRALIZED": "#0984e3", |
| "DEFI/SOLANA": "#0984e3", "DEFI/TOOLING": "#74b9ff", "GENERAL": "#636e72", |
| }; |
| |
| function catClass(cat) { |
| const c = cat.toUpperCase(); |
| if (c.startsWith("HFT")) return "cat-hft"; |
| if (c === "APPRAISAL") return "cat-appraisal"; |
| if (c === "TOOLING") return "cat-tooling"; |
| if (c.startsWith("DEFI")) return "cat-defi"; |
| if (c.startsWith("IP")) return "cat-ip"; |
| if (c === "META") return "cat-meta"; |
| if (c.startsWith("LEGAL")) return "cat-legal"; |
| if (c === "PORTFOLIO") return "cat-portfolio"; |
| if (c === "GENERAL") return "cat-general"; |
| if (c === "MIXED") return "cat-mixed"; |
| if (c === "ROUTING") return "cat-routing"; |
| if (c.startsWith("PROTOCOL")) return "cat-protocol"; |
| if (c === "DECENTRALIZED") return "cat-decentralized"; |
| return "cat-general"; |
| } |
| |
| function scoreColor(score) { |
| if (score >= 95) return "#00b894"; |
| if (score >= 85) return "#00cec9"; |
| if (score >= 70) return "#fdcb6e"; |
| if (score >= 50) return "#e17055"; |
| return "#e74c3c"; |
| } |
| |
| function complexityColor(c) { |
| if (c >= 90) return "rgba(231,76,60,0.2)"; |
| if (c >= 75) return "rgba(253,203,110,0.2)"; |
| if (c >= 50) return "rgba(0,206,201,0.2)"; |
| return "rgba(108,117,125,0.2)"; |
| } |
| |
| |
| const totalLines = sessions.reduce((s, c) => s + c.output_lines, 0); |
| const avgScore = (sessions.reduce((s, c) => s + c.session_score, 0) / sessions.length).toFixed(1); |
| const avgComplexity = (sessions.reduce((s, c) => s + c.prompt_complexity, 0) / sessions.length).toFixed(0); |
| const avgDepth = (sessions.reduce((s, c) => s + c.domain_depth, 0) / sessions.length).toFixed(0); |
| const topScore = Math.max(...sessions.map(s => s.session_score)); |
| const categories = [...new Set(sessions.map(s => s.category))]; |
| |
| const kpis = [ |
| {value: avgScore, label: "Avg Session Score", sub: `out of 100`, cls: ""}, |
| {value: totalLines.toLocaleString(), label: "Total Output Lines", sub: `${sessions.filter(s=>s.output_lines>0).length} sessions with code`, cls: "green"}, |
| {value: avgComplexity, label: "Avg Prompt Complexity", sub: `out of 100`, cls: "gold"}, |
| {value: avgDepth, label: "Avg Domain Depth", sub: `out of 100`, cls: "blue"}, |
| {value: topScore, label: "Top Session Score", sub: `C10 — Gate.io C++ MM`, cls: "pink"}, |
| {value: categories.length, label: "Categories", sub: "HFT, DeFi, Appraisal, IP...", cls: ""}, |
| ]; |
| |
| document.getElementById("kpiRow").innerHTML = kpis.map(k => ` |
| <div class="kpi ${k.cls}"> |
| <div class="value">${k.value}</div> |
| <div class="label">${k.label}</div> |
| <div class="sub">${k.sub}</div> |
| </div> |
| `).join(""); |
| |
| |
| const sorted = [...sessions].sort((a,b) => a.date.localeCompare(b.date)); |
| new Chart(document.getElementById("timelineChart"), { |
| type: "line", |
| data: { |
| labels: sorted.map(s => s.session_id), |
| datasets: [{ |
| label: "Session Score", |
| data: sorted.map(s => s.session_score), |
| borderColor: "#6c5ce7", |
| backgroundColor: "rgba(108,92,231,0.1)", |
| fill: true, |
| tension: 0.3, |
| pointRadius: 4, |
| pointBackgroundColor: sorted.map(s => scoreColor(s.session_score)), |
| pointBorderColor: "#111119", |
| pointBorderWidth: 2, |
| },{ |
| label: "Prompt Complexity", |
| data: sorted.map(s => s.prompt_complexity), |
| borderColor: "#00cec9", |
| backgroundColor: "transparent", |
| tension: 0.3, |
| pointRadius: 3, |
| borderDash: [5,5], |
| }], |
| }, |
| options: { |
| responsive: true, |
| plugins: { legend: { labels: { color: "#e8e8f0", font: { size: 11 } } } }, |
| scales: { |
| x: { ticks: { color: "#6a6a7e", font: { size: 10 } }, grid: { color: "#22222e" } }, |
| y: { ticks: { color: "#6a6a7e" }, grid: { color: "#22222e" }, min: 0, max: 100 }, |
| }, |
| }, |
| }); |
| |
| |
| const catCounts = {}; |
| sessions.forEach(s => { catCounts[s.category] = (catCounts[s.category] || 0) + 1; }); |
| const catLabels = Object.keys(catCounts).sort((a,b) => catCounts[b] - catCounts[a]); |
| new Chart(document.getElementById("categoryChart"), { |
| type: "doughnut", |
| data: { |
| labels: catLabels, |
| datasets: [{ |
| data: catLabels.map(c => catCounts[c]), |
| backgroundColor: catLabels.map(c => catColors[c] || "#636e72"), |
| borderColor: "#111119", |
| borderWidth: 2, |
| }], |
| }, |
| options: { |
| responsive: true, |
| plugins: { legend: { position: "right", labels: { color: "#e8e8f0", font: { size: 11 }, boxWidth: 12 } } }, |
| }, |
| }); |
| |
| |
| new Chart(document.getElementById("scatterChart"), { |
| type: "scatter", |
| data: { |
| datasets: [{ |
| label: "Sessions", |
| data: sessions.map(s => ({ x: s.prompt_complexity, y: s.domain_depth, session: s })), |
| backgroundColor: sessions.map(s => catColors[s.category] || "#636e72"), |
| pointRadius: 6, |
| pointHoverRadius: 10, |
| }], |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { display: false }, |
| tooltip: { |
| callbacks: { |
| label: (ctx) => { |
| const s = ctx.raw.session; |
| return [`${s.session_id}: ${s.title}`, `Complexity: ${s.prompt_complexity} · Depth: ${s.domain_depth} · Score: ${s.session_score}`]; |
| }, |
| }, |
| }, |
| }, |
| scales: { |
| x: { title: { display: true, text: "Prompt Complexity", color: "#6a6a7e" }, ticks: { color: "#6a6a7e" }, grid: { color: "#22222e" }, min: 20, max: 100 }, |
| y: { title: { display: true, text: "Domain Depth", color: "#6a6a7e" }, ticks: { color: "#6a6a7e" }, grid: { color: "#22222e" }, min: 30, max: 100 }, |
| }, |
| }, |
| }); |
| |
| |
| const codeSessions = sessions.filter(s => s.output_lines > 0).sort((a,b) => b.output_lines - a.output_lines); |
| new Chart(document.getElementById("outputChart"), { |
| type: "bar", |
| data: { |
| labels: codeSessions.map(s => s.session_id), |
| datasets: [{ |
| label: "Output Lines", |
| data: codeSessions.map(s => s.output_lines), |
| backgroundColor: codeSessions.map(s => catColors[s.category] || "#636e72"), |
| borderRadius: 6, |
| }], |
| }, |
| options: { |
| responsive: true, |
| plugins: { legend: { display: false } }, |
| scales: { |
| x: { ticks: { color: "#6a6a7e", font: { size: 10 } }, grid: { display: false } }, |
| y: { ticks: { color: "#6a6a7e" }, grid: { color: "#22222e" } }, |
| }, |
| }, |
| }); |
| |
| |
| let activeFilter = "ALL"; |
| const filterCats = ["ALL", ...categories.sort()]; |
| document.getElementById("filters").innerHTML = filterCats.map(c => |
| `<button class="filter-btn ${c === "ALL" ? "active" : ""}" data-cat="${c}">${c}</button>` |
| ).join(""); |
| document.querySelectorAll(".filter-btn").forEach(btn => { |
| btn.addEventListener("click", () => { |
| document.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active")); |
| btn.classList.add("active"); |
| activeFilter = btn.dataset.cat; |
| renderTable(); |
| }); |
| }); |
| |
| |
| let sortKey = "date"; |
| let sortDir = "desc"; |
| |
| document.querySelectorAll("thead th[data-sort]").forEach(th => { |
| th.addEventListener("click", () => { |
| const key = th.dataset.sort; |
| if (sortKey === key) { sortDir = sortDir === "asc" ? "desc" : "asc"; } |
| else { sortKey = key; sortDir = "desc"; } |
| renderTable(); |
| }); |
| }); |
| |
| function renderTable() { |
| let rows = [...sessions]; |
| if (activeFilter !== "ALL") rows = rows.filter(s => s.category === activeFilter); |
| rows.sort((a, b) => { |
| let va = a[sortKey], vb = b[sortKey]; |
| if (typeof va === "string") { va = va.toLowerCase(); vb = vb.toLowerCase(); } |
| if (va < vb) return sortDir === "asc" ? -1 : 1; |
| if (va > vb) return sortDir === "asc" ? 1 : -1; |
| return 0; |
| }); |
| |
| document.getElementById("tableBody").innerHTML = rows.map(s => ` |
| <tr> |
| <td class="session-id">${s.session_id}</td> |
| <td class="date-cell">${s.date}</td> |
| <td class="title-cell">${s.title}</td> |
| <td><span class="category-badge ${catClass(s.category)}">${s.category}</span></td> |
| <td><span class="complexity-pill" style="background:${complexityColor(s.prompt_complexity)};color:${scoreColor(s.prompt_complexity)}">${s.prompt_complexity}</span></td> |
| <td><span class="complexity-pill" style="background:${complexityColor(s.domain_depth)};color:${scoreColor(s.domain_depth)}">${s.domain_depth}</span></td> |
| <td class="output-lines">${s.output_lines > 0 ? s.output_lines.toLocaleString() : "—"}</td> |
| <td> |
| <span class="score-text" style="color:${scoreColor(s.session_score)}">${s.session_score}</span> |
| <span class="score-bar"><span class="score-fill" style="width:${s.session_score}%;background:${scoreColor(s.session_score)}"></span></span> |
| </td> |
| <td><span class="score-text" style="color:${scoreColor(100 - s.avg_user_score)}">${s.avg_user_score}</span></td> |
| <td class="output-type">${s.output_type}</td> |
| </tr> |
| `).join(""); |
| |
| |
| document.querySelectorAll("thead th[data-sort]").forEach(th => { |
| const arrow = th.querySelector(".arrow"); |
| if (th.dataset.sort === sortKey) { |
| if (!arrow) th.innerHTML += ` <span class="arrow">${sortDir === "asc" ? "↑" : "↓"}</span>`; |
| else arrow.textContent = sortDir === "asc" ? "↑" : "↓"; |
| } else { |
| if (arrow) arrow.remove(); |
| } |
| }); |
| } |
| renderTable(); |
| |
| |
| const top5 = [...sessions].sort((a,b) => b.session_score - a.session_score).slice(0, 6); |
| document.getElementById("topSessions").innerHTML = top5.map((s, i) => ` |
| <div class="top-card"> |
| <div class="rank">#${i+1}</div> |
| <div class="sid">${s.session_id}</div> |
| <div class="title">${s.title}</div> |
| <div class="stats"> |
| <div class="stat"><div class="val" style="color:${scoreColor(s.session_score)}">${s.session_score}</div><div class="lbl">Score</div></div> |
| <div class="stat"><div class="val" style="color:var(--accent2)">${s.prompt_complexity}</div><div class="lbl">Complexity</div></div> |
| <div class="stat"><div class="val" style="color:var(--gold)">${s.domain_depth}</div><div class="lbl">Depth</div></div> |
| <div class="stat"><div class="val" style="color:var(--blue)">${s.output_lines > 0 ? s.output_lines.toLocaleString() : "—"}</div><div class="lbl">Lines</div></div> |
| </div> |
| <div style="margin-top:12px"><span class="category-badge ${catClass(s.category)}">${s.category}</span></div> |
| </div> |
| `).join(""); |
| |
| document.getElementById("genDate").textContent = new Date().toISOString().split("T")[0]; |
| </script> |
| </body> |
| </html> |
| |
| |
|
|
