Spaces:
Running
Running
Download index.html from ql6/BeamBridge: direct link, hf CLI and curl.
- Browser
- Download file 42.3 kB
-
https://huggingface.co/spaces/ql6/BeamBridge/resolve/main/index.html
- Command line
-
hf download hf://spaces/ql6/BeamBridge/index.html
-
curl -L -o index.html https://huggingface.co/spaces/ql6/BeamBridge/resolve/main/index.html
42.3 kB
| <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 & 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 & SHA-256 Attestations"> | |
| <span data-i18n="btn_connect_mcp">Setup & /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 & 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 & 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 & 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> | |