BeamBridge / index.html
ql6's picture
Fix URL fetch normalization & compact preset keys (index.html)
0895ec6 verified
Raw History Blame Contribute Delete
42.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BeamBridge · Repository-to-MCP Modernization</title>
<link rel="stylesheet" href="./styles.css?v=5.2" />
</head>
<body>
<div class="app-shell" id="appShell" dir="ltr">
<!-- ==================== TOP NAVIGATION BAR ==================== -->
<header class="top-bar">
<button class="brand-pill" id="brandHomeBtn" title="BeamBridge">
<span class="brand-dot"></span>
<span>BeamBridge</span>
</button>
<div class="nav-group">
<nav class="nav-pill-bar" id="mainNav">
<button class="nav-tab active" data-view="dashboard" data-i18n="nav_dashboard">Dashboard</button>
<button class="nav-tab" data-view="modernizer" data-i18n="nav_modernizer">Modernizer</button>
<button class="nav-tab" data-view="playground" data-i18n="nav_playground">MCP Playground</button>
<button class="nav-tab" data-view="parity" data-i18n="nav_parity">Parity Suite</button>
<button class="nav-tab" data-view="finops" data-i18n="nav_finops">FinOps</button>
</nav>
<button class="util-pill" id="openEngineModalBtn" title="API Provider &amp; Session Key">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="17" x2="20" y2="17"/><circle cx="9" cy="7" r="2.5" fill="currentColor"/><circle cx="15" cy="17" r="2.5" fill="currentColor"/></svg>
<span data-i18n="btn_engine">Engine</span>
<span class="key-dot" id="engineStatusDot"></span>
</button>
<button class="util-pill" id="openCertModalBtn" title="Setup Guide &amp; SHA-256 Attestations">
<span data-i18n="btn_connect_mcp">Setup &amp; /mcp</span>
</button>
<button class="icon-circle-btn" id="langToggleBtn" title="EN / عربي">ع</button>
</div>
</header>
<!-- ==================== HERO METRIC STRIP ==================== -->
<section class="hero-header">
<div class="hero-title-row">
<h1 class="hero-greeting" id="heroTitle" data-i18n="hero_title">Beam-1.0 Modernization Hub</h1>
<div class="hero-subpill">
<span id="activeModelBadge">Beam-1.0 · 23B Active MoE · 1M Context</span>
</div>
</div>
<div class="hero-metrics-row">
<div class="capsule-strip">
<div class="capsule-col">
<span class="capsule-label" data-i18n="cap_parity">Parity</span>
<div class="capsule-bar capsule-dark" id="capParityVal">100%</div>
</div>
<div class="capsule-col">
<span class="capsule-label" data-i18n="cap_tokens">Cost Saved</span>
<div class="capsule-bar capsule-gold" id="capTokenSavedVal">97%</div>
</div>
<div class="capsule-col">
<span class="capsule-label" data-i18n="cap_naive_drift">RAG Drift</span>
<div class="capsule-bar capsule-striped" id="capDriftVal">29%</div>
</div>
<div class="capsule-col">
<span class="capsule-label" data-i18n="cap_regressions">Regressions</span>
<div class="capsule-bar capsule-outline" id="capRegVal">0%</div>
</div>
</div>
<div class="giant-kpis">
<div class="kpi-block">
<div class="kpi-num-row">
<span class="kpi-giant-num" id="kpiTestsNum">160</span>
</div>
<span class="kpi-caption" data-i18n="kpi_tests">Verified Tests</span>
</div>
<div class="kpi-block">
<div class="kpi-num-row">
<span class="kpi-giant-num" id="kpiToolsNum">12</span>
</div>
<span class="kpi-caption" data-i18n="kpi_tools">MCP Tools</span>
</div>
<div class="kpi-block">
<div class="kpi-num-row">
<span class="kpi-giant-num" id="kpiSavingsNum">$1.38M</span>
</div>
<span class="kpi-caption" data-i18n="kpi_savings">TCO Saved</span>
</div>
</div>
</div>
</section>
<!-- ==================== VIEW 1: BENTO DASHBOARD ==================== -->
<main class="view-section active" id="view-dashboard">
<div class="bento-dashboard">
<!-- 1. Pipeline -->
<article class="bento-card card-tall-left">
<div class="card-header">
<h2 class="card-title" data-i18n="card_pipeline">Pipeline</h2>
<button class="arrow-circle" data-goto="modernizer" title="Modernizer">↗</button>
</div>
<div class="stage-week-strip" id="stageStrip">
<div class="stage-day-item" data-stage="1"><span class="stage-day-lbl">GIT</span><span class="stage-day-num">01</span></div>
<div class="stage-day-item" data-stage="2"><span class="stage-day-lbl">AST</span><span class="stage-day-num">02</span></div>
<div class="stage-day-item active" data-stage="3"><span class="stage-day-lbl">1M</span><span class="stage-day-num">03</span></div>
<div class="stage-day-item" data-stage="4"><span class="stage-day-lbl">MCP</span><span class="stage-day-num">04</span></div>
<div class="stage-day-item" data-stage="5"><span class="stage-day-lbl">FIX</span><span class="stage-day-num">05</span></div>
<div class="stage-day-item" data-stage="6"><span class="stage-day-lbl">SHA</span><span class="stage-day-num">06</span></div>
</div>
<div class="timeline-list" id="pipelineTimeline">
<div class="timeline-row">
<span class="time-pill active-dark">01</span>
<div class="timeline-event-card obsidian-event" data-goto="modernizer">
<span class="event-dot"></span>
<div class="event-title">AST &amp; BPE Compaction</div>
<div class="event-sub" id="tlPackSub">3.08M → 32,782 tokens</div>
</div>
</div>
<div class="timeline-row">
<span class="time-pill">02</span>
<div class="timeline-event-card" data-goto="modernizer">
<span class="event-dot"></span>
<div class="event-title">Self-Healing Repair</div>
<div class="event-sub">Automated subprocess fix</div>
</div>
</div>
<div class="timeline-row">
<span class="time-pill active-gold">03</span>
<div class="timeline-event-card" data-goto="playground">
<span class="event-dot"></span>
<div class="event-title">Standalone MCP v2</div>
<div class="event-sub">Zero legacy imports</div>
<div class="mini-badge-cluster">
<span class="mini-avatar-chip">MNY</span>
<span class="mini-avatar-chip">PRC</span>
<span class="mini-avatar-chip">SWF</span>
<span class="mini-avatar-chip">STD</span>
</div>
</div>
</div>
<div class="timeline-row">
<span class="time-pill">04</span>
<div class="timeline-event-card" data-goto="parity">
<div class="event-title">160/160 Certified</div>
<div class="event-sub">SHA-256 verified</div>
</div>
</div>
</div>
</article>
<!-- 2. Repositories -->
<article class="bento-card card-mid-top">
<div class="card-header">
<h2 class="card-title" data-i18n="card_estates">GitHub Repositories</h2>
<div style="display:flex;align-items:center;gap:10px;">
<div class="search-pill-input">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#78787d" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="16.2" y2="16.2"/></svg>
<input type="text" id="estateSearchInput" placeholder="Filter repositories..." />
</div>
<button class="arrow-circle" data-goto="modernizer" title="Inspect">↗</button>
</div>
</div>
<div style="overflow-x:auto;">
<table class="estates-table">
<thead>
<tr>
<th style="width:34px;"></th>
<th>Repository</th>
<th>Domain</th>
<th>RAG → Beam</th>
<th>Status</th>
</tr>
</thead>
<tbody id="estatesTableBody"></tbody>
</table>
</div>
</article>
<!-- 3. Parity Matrix -->
<article class="bento-card dark-card card-right-top">
<div class="card-header">
<h2 class="card-title" data-i18n="card_matrix">Parity Matrix</h2>
<button class="arrow-circle" data-goto="parity" title="Parity Suite">↗</button>
</div>
<div class="dark-kpi-pair">
<div class="dark-big-stat"><span id="darkPassedNum">160</span><span class="trend-arrow">↗</span></div>
<div class="dark-big-stat"><span id="darkFailedNaiveNum">46</span><span class="trend-arrow">↘</span></div>
</div>
<div style="font-size:11.5px;color:rgba(255,255,255,0.55);margin-top:-12px;margin-bottom:10px;">
160 Verified · 46 RAG Failures (Gold)
</div>
<div class="matrix-dot-grid" id="matrixDotGrid"></div>
<div class="matrix-tooltip-bar" id="matrixHoverText">
Hover a dot to inspect test case &amp; latency
</div>
</article>
<!-- 4. FinOps Curve -->
<article class="bento-card card-mid-bottom">
<div class="card-header" style="flex-wrap:wrap;">
<div style="display:flex;align-items:center;gap:18px;flex-wrap:wrap;">
<h2 class="card-title" data-i18n="card_finops_curve">Inference Spend</h2>
<div class="chart-legend-inline">
<span class="legend-item"><span class="legend-dot" style="background:var(--gold-deep);"></span>Beam-1.0</span>
<span class="legend-item"><span class="legend-dot" style="background:var(--obsidian);"></span>Qwen3.8-2.4T</span>
</div>
</div>
<button class="arrow-circle" data-goto="finops" title="FinOps">↗</button>
</div>
<div class="svg-chart-wrap" id="finopsChartContainer"></div>
</article>
<!-- 5. Donut -->
<article class="bento-card card-right-bottom">
<div class="card-header">
<h2 class="card-title" data-i18n="card_composition">Cost Ratio</h2>
<button class="arrow-circle" data-goto="finops" title="Benchmarks">↗</button>
</div>
<div class="donut-layout">
<div class="donut-svg-box">
<svg width="146" height="146" viewBox="0 0 146 146">
<circle cx="73" cy="73" r="56" fill="none" stroke="rgba(36,36,38,0.08)" stroke-width="14" />
<circle cx="73" cy="73" r="56" fill="none" stroke="#242426" stroke-width="14"
stroke-dasharray="52 352" stroke-dashoffset="0" stroke-linecap="round"
transform="rotate(-90 73 73)" />
<circle id="donutGoldArc" cx="73" cy="73" r="56" fill="none" stroke="#f5d665" stroke-width="14"
stroke-dasharray="300 352" stroke-dashoffset="-55" stroke-linecap="round"
transform="rotate(-90 73 73)" />
</svg>
<div class="donut-center-text">
<span class="donut-center-num" id="donutCenterMult">31.3x</span>
<span class="donut-center-lbl">Cheaper</span>
</div>
</div>
<div class="donut-split-row">
<div><span style="color:var(--gold-deep);">●</span> <span id="donutSavedPct">97%</span><span class="donut-split-tag">Saved</span></div>
<div><span style="color:var(--obsidian);">●</span> <span id="donutUsedPct">3%</span><span class="donut-split-tag">Beam</span></div>
</div>
</div>
</article>
</div>
</main>
<!-- ==================== VIEW 2: MODERNIZER ==================== -->
<section class="view-section" id="view-modernizer">
<div class="studio-grid">
<div class="bento-card">
<div class="card-header">
<h2 class="card-title">Repository Modernizer</h2>
</div>
<div class="form-field">
<label>GitHub Repository</label>
<select class="form-input" id="modRepoSelect">
<option value="py_moneyed">limist/py-moneyed @ 4c90ed5</option>
<option value="price_parser">scrapinghub/price-parser @ 6718bfe</option>
<option value="schwifty">mdomke/schwifty @ 7462c6e</option>
<option value="python_stdnum">arthurdejong/python-stdnum @ 006192e</option>
<option value="__github_live__">+ Clone Public GitHub URL...</option>
</select>
</div>
<div class="form-field" id="liveGithubBox" style="display:none;">
<label>Public GitHub URL</label>
<input type="url" class="form-input" id="liveGithubUrlInput" value="https://github.com/limist/py-moneyed" placeholder="https://github.com/owner/repo" />
</div>
<div class="form-field">
<label>Reasoning Effort</label>
<select class="form-input" id="modEffortSelect">
<option value="minimal">minimal</option>
<option value="low">low</option>
<option value="medium" selected>medium</option>
<option value="high">high</option>
</select>
</div>
<button class="btn-primary-dark" id="runModernizerBtn" style="width:100%;margin-top:6px;">
<span id="runModernizerBtnText">Synthesize Whole-Repo MCP</span>
</button>
<div id="modTelemetryBox" style="margin-top:16px;padding-top:14px;border-top:1px solid var(--line-subtle);font-size:12px;color:var(--ink-700);line-height:1.7;"></div>
</div>
<div class="bento-card">
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px;">
<div class="sub-pill-tabs" id="modSubTabs" style="margin-bottom:0;">
<button class="sub-pill-btn active" data-subtab="rules">Reasoning &amp; Audit</button>
<button class="sub-pill-btn" data-subtab="mcp_code">MCP Server (.py)</button>
<button class="sub-pill-btn" data-subtab="legacy_code">Source Pack</button>
</div>
<div style="display:flex;gap:8px;">
<button class="btn-ghost-pill" id="copyMcpCodeBtn">Copy Code</button>
<button class="btn-gold" id="jumpToPlaygroundBtn">Test in Playground →</button>
</div>
</div>
<div id="modTabRules"></div>
<div id="modTabMcpCode" style="display:none;">
<pre class="code-pane" id="modernMcpCodePre"></pre>
</div>
<div id="modTabLegacyCode" style="display:none;">
<pre class="code-pane" id="legacyPackedCodePre"></pre>
</div>
</div>
</div>
</section>
<!-- ==================== VIEW 3: MCP PLAYGROUND ==================== -->
<section class="view-section" id="view-playground">
<div class="studio-grid">
<div class="bento-card">
<div class="card-header">
<h2 class="card-title">Differential Invoker</h2>
</div>
<div class="form-field">
<label>MCP Server</label>
<select class="form-input" id="pgRepoSelect">
<option value="py_moneyed">limist/py-moneyed (@4c90ed5)</option>
<option value="price_parser">scrapinghub/price-parser (@6718bfe)</option>
<option value="schwifty">mdomke/schwifty (@7462c6e)</option>
<option value="python_stdnum">arthurdejong/python-stdnum (@006192e)</option>
</select>
</div>
<div class="form-field">
<label>Tool</label>
<select class="form-input" id="pgToolSelect"></select>
</div>
<div class="form-field">
<label>Presets</label>
<div id="pgPresetsBar" style="display:flex;flex-wrap:wrap;gap:6px;"></div>
</div>
<div id="pgDynamicForm" style="margin-top:12px;"></div>
<button class="btn-primary-dark" id="invokeMcpBtn" style="width:100%;margin-top:8px;">
<span>Run Comparison</span>
</button>
</div>
<div class="bento-card">
<div class="card-header">
<h2 class="card-title">Oracle vs MCP Output</h2>
<span class="status-pill mint" id="pgParityBadge"><span class="dot"></span>100% Exact Match</span>
</div>
<div class="two-col-grid" style="margin-bottom:16px;">
<div class="rule-card" style="margin-bottom:0;">
<div class="rule-card-head">
<strong style="font-size:12.5px;">GitHub Library</strong>
<span class="status-pill grey" id="pgLegacyTime">0.0 μs</span>
</div>
<pre class="code-pane" id="pgLegacyOutPre" style="max-height:190px;"></pre>
</div>
<div class="rule-card" style="margin-bottom:0;">
<div class="rule-card-head">
<strong style="font-size:12.5px;">Standalone MCP</strong>
<span class="status-pill grey" id="pgModernTime">0.0 μs</span>
</div>
<pre class="code-pane" id="pgModernOutPre" style="max-height:190px;"></pre>
</div>
</div>
<div>
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
<span style="font-size:12px;font-weight:600;color:var(--ink-700);">JSON-RPC 2.0 Response (/mcp)</span>
<span style="font-size:11px;color:var(--ink-500);">MCP SDK v2</span>
</div>
<pre class="code-pane" id="pgJsonRpcPre" style="max-height:185px;"></pre>
</div>
</div>
</div>
</section>
<!-- ==================== VIEW 4: PARITY SUITE ==================== -->
<section class="view-section" id="view-parity">
<div class="bento-card">
<div class="card-header" style="flex-wrap:wrap;">
<div>
<h2 class="card-title">Legacy2MCP-Bench (160 Cases)</h2>
</div>
<div style="display:flex;gap:8px;flex-wrap:wrap;">
<select class="select-pill" id="parityRepoFilter">
<option value="all">All Repositories (160)</option>
<option value="py_moneyed">py-moneyed (40)</option>
<option value="price_parser">price-parser (40)</option>
<option value="schwifty">schwifty (40)</option>
<option value="python_stdnum">python-stdnum (40)</option>
</select>
<select class="select-pill" id="parityCliffFilter">
<option value="all">All Cases</option>
<option value="cliffs">RAG Failures Only (46)</option>
</select>
<a class="btn-gold" href="./legacy2mcp_bench.jsonl" download="legacy2mcp_bench.jsonl" style="text-decoration:none;">
Export .jsonl
</a>
</div>
</div>
<div style="overflow-x:auto;max-height:520px;overflow-y:auto;">
<table class="estates-table">
<thead>
<tr>
<th>ID</th>
<th>Case</th>
<th>Tool</th>
<th>Output</th>
<th>Chunked RAG</th>
<th>Beam 1M</th>
</tr>
</thead>
<tbody id="parityCasesBody"></tbody>
</table>
</div>
</div>
</section>
<!-- ==================== VIEW 5: FINOPS & BENCHMARKS ==================== -->
<section class="view-section" id="view-finops">
<div class="bento-card" style="margin-bottom:18px;">
<div class="card-header" style="flex-wrap:wrap;">
<h2 class="card-title">Multi-Model Benchmark (py-moneyed · 8,660 BPE Tokens)</h2>
<span class="status-pill grey"><span class="dot"></span>Live OpenRouter Runs</span>
</div>
<div style="overflow-x:auto;">
<table class="estates-table">
<thead>
<tr>
<th>Model</th>
<th>Request ID</th>
<th>In / Out / Reasoning</th>
<th>Latency</th>
<th>Cost</th>
<th>Parity</th>
</tr>
</thead>
<tbody id="h2hBenchmarkBody"></tbody>
</table>
</div>
</div>
<div class="studio-grid" style="margin-bottom:18px;">
<div class="bento-card">
<div class="card-header">
<h2 class="card-title">CFO Simulator</h2>
</div>
<div class="form-field">
<label>Codebase Size: <strong id="lblKloc">250 KLOC</strong></label>
<input type="range" id="roiKlocRange" min="25" max="1000" step="25" value="250" style="width:100%;accent-color:var(--obsidian);" />
</div>
<div class="form-field">
<label>MCP Services: <strong id="lblMods">18 Services</strong></label>
<input type="range" id="roiModsRange" min="4" max="80" step="2" value="18" style="width:100%;accent-color:var(--obsidian);" />
</div>
<div class="form-field">
<label>Daily Verification Runs: <strong id="lblCalls">120 / day</strong></label>
<input type="range" id="roiCallsRange" min="20" max="1000" step="20" value="120" style="width:100%;accent-color:var(--obsidian);" />
</div>
<div class="form-field">
<label>Engineer Cost: <strong id="lblEngCost">$185,000 / yr</strong></label>
<input type="range" id="roiEngCostRange" min="100000" max="350000" step="5000" value="185000" style="width:100%;accent-color:var(--obsidian);" />
</div>
</div>
<div class="bento-card">
<div class="card-header">
<h2 class="card-title">Program TCO Comparison</h2>
</div>
<div class="three-col-grid" style="margin-bottom:18px;">
<div class="rule-card" style="margin-bottom:0;">
<div style="font-size:11.5px;color:var(--ink-500);">Manual Rewrite</div>
<div style="font-size:26px;font-weight:300;margin:6px 0;" id="roiManualUsd">$2,230,000</div>
<div style="font-size:11.5px;color:var(--ink-500);" id="roiManualWeeks">32.1 months</div>
</div>
<div class="rule-card" style="margin-bottom:0;">
<div style="font-size:11.5px;color:var(--ink-500);">Qwen3.8-2.4T</div>
<div style="font-size:26px;font-weight:300;margin:6px 0;" id="roiFrontierUsd">$984,000</div>
<div style="font-size:11.5px;color:var(--ink-500);" id="roiFrontierTokens">API: $47,093/yr</div>
</div>
<div class="rule-card" style="margin-bottom:0;background:var(--obsidian);color:#fff;border-color:var(--obsidian);">
<div style="font-size:11.5px;color:var(--gold);">BeamBridge (Beam-1.0)</div>
<div style="font-size:26px;font-weight:300;margin:6px 0;color:#fff;" id="roiBeamUsd">$849,000</div>
<div style="font-size:11.5px;color:rgba(255,255,255,0.72);" id="roiBeamWeeks">11.2 months</div>
</div>
</div>
<div class="rule-card" style="background:var(--gold-soft);border-color:var(--gold);">
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;">
<div>
<div style="font-size:11.5px;color:var(--ink-700);">Net Savings</div>
<div style="font-size:24px;font-weight:500;color:var(--ink-900);" id="roiNetSavingsBanner">$1,381,039 Saved</div>
</div>
<div style="text-align:right;">
<div style="font-size:11.5px;color:var(--ink-700);">Inference Reduction</div>
<div style="font-size:19px;font-weight:600;color:var(--ink-900);" id="roiTokenBillSaved">96.8% Lower Cost</div>
</div>
</div>
</div>
</div>
</div>
<div class="bento-card">
<div class="card-header">
<h2 class="card-title">2026 Industry Benchmarks</h2>
</div>
<div class="two-col-grid" id="consultingCardsGrid"></div>
</div>
</section>
</div>
<!-- ==================== MODAL 1: ENGINE CONFIG ==================== -->
<div class="modal-backdrop" id="engineModal">
<div class="modal-panel">
<div class="card-header">
<h3 class="card-title">Inference Engine</h3>
<button class="arrow-circle" id="closeEngineModalBtn">✕</button>
</div>
<p style="font-size:12.5px;color:var(--ink-700);line-height:1.5;margin-bottom:14px;">
Pre-verified runs work out of the box. Add an API key in-session to run new live syntheses.
</p>
<div class="form-field">
<label>Provider</label>
<select class="form-input" id="cfgProvider">
<option value="openrouter">OpenRouter (Beam-1.0 + Auto-Failover)</option>
<option value="reflection">Reflection AI API</option>
<option value="huggingface">Hugging Face Router</option>
<option value="vllm_local">Local vLLM (http://127.0.0.1:8000/v1)</option>
</select>
</div>
<div class="form-field">
<label>Session API Key (never saved to disk)</label>
<input type="password" class="form-input" id="cfgApiKey" placeholder="sk-or-v1-... / sk-... / hf_..." />
</div>
<div style="display:flex;gap:10px;justify-content:flex-end;">
<button class="btn-primary-dark" id="saveEngineCfgBtn">Save Key</button>
</div>
</div>
</div>
<!-- ==================== MODAL 2: CLEAN 01–04 SETUP & ATTESTATION ==================== -->
<div class="modal-backdrop" id="certModal">
<div class="guide-modal-panel" role="dialog" aria-modal="true" aria-labelledby="guideStep01Title">
<div class="guide-top-bar">
<button class="guide-close-btn" id="closeCertModalBtn" title="Close">✕</button>
</div>
<!-- STEP 01 -->
<div class="guide-step-row" style="padding-top:8px;">
<div class="guide-step-num">01</div>
<div>
<h3 class="guide-step-title" id="guideStep01Title" data-i18n="guide_s1_title">Paste a setup prompt into your AI</h3>
<p class="guide-step-desc" data-i18n="guide_s1_desc">
Select your AI client and copy its prompt to connect BeamBridge's verified /mcp gateway.
</p>
<div class="guide-step01-grid">
<div class="guide-client-list" id="guideClientList">
<button type="button" class="guide-client-btn active" data-client="claude">
<span class="guide-client-icon claude" aria-hidden="true">
<svg fill="currentColor" fill-rule="evenodd" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg>
</span>
<div>
<div class="guide-client-name">Claude</div>
<div class="guide-client-sub">Web, desktop, or Claude Code</div>
</div>
</button>
<button type="button" class="guide-client-btn" data-client="openai">
<span class="guide-client-icon openai" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388zm3.482 10.565a.637.637 0 000 1.272h3.636a.637.637 0 100-1.272h-3.636zM8.462 9.23a.637.637 0 00-1.106.631l1.272 2.224-1.266 2.136a.636.636 0 101.095.649l1.454-2.455a.636.636 0 00.005-.64L8.462 9.23z" fill="#ffffff"/></svg>
</span>
<div>
<div class="guide-client-name">OpenAI</div>
<div class="guide-client-sub">ChatGPT or Codex</div>
</div>
</button>
<button type="button" class="guide-client-btn" data-client="cursor">
<span class="guide-client-icon cursor" aria-hidden="true">
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.2L2.4 6.74v10.52L12 22.8l9.6-5.54V6.74L12 1.2z" fill="#2b2b33"/>
<path d="M12 1.2L2.4 6.74 12 12.28l9.6-5.54L12 1.2z" fill="#686873"/>
<path d="M2.4 6.74v10.52L12 22.8V12.28L2.4 6.74z" fill="#43434d"/>
<path d="M21.2 6.95L12.18 22.42c-.06.1-.21.06-.21-.06V12.3a.55.55 0 00-.28-.48L2.95 6.77c-.1-.06-.06-.22.06-.22h17.91c.25 0 .41.27.28.4z" fill="#ffffff"/>
</svg>
</span>
<div>
<div class="guide-client-name">Cursor</div>
<div class="guide-client-sub">Code editor</div>
</div>
</button>
<button type="button" class="guide-client-btn" data-client="antigravity">
<span class="guide-client-icon antigravity" aria-hidden="true">
<svg width="21" height="21" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><mask height="23" id="bb-ag-m0" maskUnits="userSpaceOnUse" width="24" x="0" y="1"><path d="M21.751 22.607c1.34 1.005 3.35.335 1.508-1.508C17.73 15.74 18.904 1 12.037 1 5.17 1 6.342 15.74.815 21.1c-2.01 2.009.167 2.511 1.507 1.506 5.192-3.517 4.857-9.714 9.715-9.714 4.857 0 4.522 6.197 9.714 9.715z" fill="#fff"/></mask><g mask="url(#bb-ag-m0)"><g filter="url(#bb-ag-f1)"><path d="M-1.018-3.992c-.408 3.591 2.686 6.89 6.91 7.37 4.225.48 7.98-2.043 8.387-5.633.408-3.59-2.686-6.89-6.91-7.37-4.225-.479-7.98 2.043-8.387 5.633z" fill="#FFE432"/></g><g filter="url(#bb-ag-f2)"><path d="M15.269 7.747c1.058 4.557 5.691 7.374 10.348 6.293 4.657-1.082 7.575-5.653 6.516-10.21-1.058-4.556-5.691-7.374-10.348-6.292-4.657 1.082-7.575 5.653-6.516 10.21z" fill="#FC413D"/></g><g filter="url(#bb-ag-f3)"><path d="M-12.443 10.804c1.338 4.703 7.36 7.11 13.453 5.378 6.092-1.733 9.947-6.95 8.61-11.652C8.282-.173 2.26-2.58-3.833-.848-9.925.884-13.78 6.1-12.443 10.804z" fill="#00B95C"/></g><g filter="url(#bb-ag-f5)"><path d="M-7.608 14.703c3.352 3.424 9.126 3.208 12.896-.483 3.77-3.69 4.108-9.459.756-12.883C2.69-2.087-3.083-1.871-6.853 1.82c-3.77 3.69-4.108 9.458-.755 12.883z" fill="#00B95C"/></g><g filter="url(#bb-ag-f6)"><path d="M9.932 27.617c1.04 4.482 5.384 7.303 9.7 6.3 4.316-1.002 6.971-5.448 5.93-9.93-1.04-4.483-5.384-7.304-9.7-6.301-4.316 1.002-6.971 5.448-5.93 9.93z" fill="#3186FF"/></g><g filter="url(#bb-ag-f7)"><path d="M2.572-8.185C.392-3.329 2.778 2.472 7.9 4.771c5.122 2.3 11.042.227 13.222-4.63 2.18-4.855-.205-10.656-5.327-12.955-5.122-2.3-11.042-.227-13.222 4.63z" fill="#FBBC04"/></g><g filter="url(#bb-ag-f8)"><path d="M-3.267 38.686c-5.277-2.072 3.742-19.117 5.984-24.83 2.243-5.712 8.34-8.664 13.616-6.592 5.278 2.071 11.533 13.482 9.29 19.195-2.242 5.713-23.613 14.298-28.89 12.227z" fill="#3186FF"/></g><g filter="url(#bb-ag-f9)"><path d="M28.71 17.471c-1.413 1.649-5.1.808-8.236-1.878-3.135-2.687-4.531-6.201-3.118-7.85 1.412-1.649 5.1-.808 8.235 1.878s4.532 6.2 3.119 7.85z" fill="#749BFF"/></g><g filter="url(#bb-ag-f10)"><path d="M18.163 9.077c5.81 3.93 12.502 4.19 14.946.577 2.443-3.612-.287-9.727-6.098-13.658-5.81-3.931-12.502-4.19-14.946-.577-2.443 3.612.287 9.727 6.098 13.658z" fill="#FC413D"/></g><g filter="url(#bb-ag-f11)"><path d="M-.915 2.684c-1.44 3.473-.97 6.967 1.05 7.804 2.02.837 4.824-1.3 6.264-4.772 1.44-3.473.97-6.967-1.05-7.804-2.02-.837-4.824 1.3-6.264 4.772z" fill="#FFEE48"/></g></g><defs><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="17.587" id="bb-ag-f1" width="19.838" x="-3.288" y="-11.917"><feGaussianBlur stdDeviation="1.117"/></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="38.565" id="bb-ag-f2" width="38.9" x="4.251" y="-13.493"><feGaussianBlur stdDeviation="5.4"/></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="36.517" id="bb-ag-f3" width="40.955" x="-21.889" y="-10.592"><feGaussianBlur stdDeviation="4.591"/></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="36.595" id="bb-ag-f5" width="36.632" x="-19.099" y="-10.278"><feGaussianBlur stdDeviation="4.591"/></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.087" id="bb-ag-f6" width="33.533" x=".981" y="8.758"><feGaussianBlur stdDeviation="4.363"/></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="35.276" id="bb-ag-f7" width="35.978" x="-6.143" y="-21.659"><feGaussianBlur stdDeviation="3.954"/></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="46.523" id="bb-ag-f8" width="45.114" x="-11.96" y="-.46"><feGaussianBlur stdDeviation="3.531"/></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="24.054" id="bb-ag-f9" width="25.094" x="10.485" y=".58"><feGaussianBlur stdDeviation="3.159"/></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="30.007" id="bb-ag-f10" width="33.508" x="5.833" y="-12.467"><feGaussianBlur stdDeviation="2.669"/></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="26.151" id="bb-ag-f11" width="22.194" x="-8.355" y="-8.876"><feGaussianBlur stdDeviation="3.303"/></filter></defs></svg>
</span>
<div>
<div class="guide-client-name">Antigravity</div>
<div class="guide-client-sub">From Google</div>
</div>
</button>
<button type="button" class="guide-client-btn" data-client="other">
<span class="guide-client-icon other" aria-hidden="true">
<svg fill="currentColor" fill-rule="evenodd" width="19" height="19" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"/><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"/></svg>
</span>
<div>
<div class="guide-client-name">Other</div>
<div class="guide-client-sub">Any MCP client</div>
</div>
</button>
</div>
<!-- Right Card -->
<div class="guide-glow-card">
<div class="guide-glow-head">
<h4 class="guide-glow-title" id="guideClientHeading">Claude</h4>
<a class="guide-ext-link" id="guideClientExtLink" href="https://claude.ai" target="_blank" rel="noreferrer">claude.ai ↗</a>
</div>
<div class="guide-mode-pills" id="guideModePills"></div>
<p class="guide-glow-helper" id="guideClientHelper"></p>
<div class="guide-prompt-well">
<div class="guide-prompt-label" data-i18n="guide_paste_lbl">You'll paste this</div>
<pre class="guide-prompt-text" id="mcpEndpointSnippet"></pre>
</div>
<button type="button" class="guide-copy-white-btn" id="copyClientPromptBtn">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
<span id="copyClientPromptLabel">Copy for Claude</span>
</button>
</div>
</div>
</div>
</div>
<!-- STEP 02 -->
<div class="guide-step-row">
<div class="guide-step-num">02</div>
<div>
<h3 class="guide-step-title" data-i18n="guide_s2_title">Verify SHA-256 parity</h3>
<p class="guide-step-desc" data-i18n="guide_s2_desc">
Every tool passes 160/160 differential checks against its original GitHub library before going live.
</p>
<div class="guide-cert-grid" id="certListBox"></div>
<div class="guide-inline-actions">
<span class="guide-muted-note" data-i18n="guide_master_lbl">Master SHA-256:</span>
<button type="button" class="guide-dark-pill-btn" id="copyMasterShaBtn">Copy Hash</button>
<button type="button" class="guide-dark-pill-btn" id="guideOpenEngineBtn">API Settings</button>
</div>
</div>
</div>
<!-- STEP 03 -->
<div class="guide-step-row">
<div class="guide-step-num">03</div>
<div>
<h3 class="guide-step-title" data-i18n="guide_s3_title">Modernize or inspect live</h3>
<p class="guide-step-desc" data-i18n="guide_s3_desc">
Clone any public GitHub repo in Modernizer Studio or compare outputs side-by-side in the Playground.
</p>
<div class="guide-inline-actions">
<button type="button" class="guide-dark-pill-btn" id="guideJumpModernizerBtn">Modernizer Studio</button>
<button type="button" class="guide-dark-pill-btn" id="guideJumpPlaygroundBtn">MCP Playground</button>
<button type="button" class="guide-dark-pill-btn" id="guideJumpParityBtn">160 Test Suite</button>
</div>
</div>
</div>
<!-- STEP 04 -->
<div class="guide-step-row">
<div class="guide-step-num">04</div>
<div>
<h3 class="guide-step-title" data-i18n="guide_s4_title">Run a verified task</h3>
<p class="guide-step-desc" data-i18n="guide_s4_desc">
Click an example to copy it and test it live in the Playground.
</p>
<div class="guide-chips-row" id="guideExampleChips">
<button type="button" class="guide-prompt-chip" data-chip="money">
Split $100 USD across [1, 1, 1]
</button>
<button type="button" class="guide-prompt-chip" data-chip="iban">
Verify IBAN GB29 NWBK 6016 1331 9268 19
</button>
<button type="button" class="guide-prompt-chip" data-chip="vat">
Validate EU VAT DE136695976
</button>
</div>
</div>
</div>
</div>
</div>
<script src="./static_shim.js?v=5.2"></script>
<script src="./app.js?v=5.2"></script>
</body>
</html>