| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Pluto v2 - Pipeline Dashboard</title> |
| <meta name="description" content="Pluto v2: Silver-and-orange dashboard for a real mode-switching extraction pipeline"> |
| <link rel="stylesheet" href="/static/style.css?v=4"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" |
| rel="stylesheet"> |
| </head> |
|
|
| <body> |
| <header class="header"> |
| <div class="header__inner"> |
| <div class="header__copy"> |
| <div class="header__brand"> |
| <div class="header__logo"> |
| <svg width="30" height="30" viewBox="0 0 28 28" fill="none" aria-hidden="true"> |
| <circle cx="14" cy="14" r="12" stroke="url(#brand-grad)" stroke-width="2.5" fill="none"></circle> |
| <path d="M14 6 L14 22 M8 14 L20 14" stroke="url(#brand-grad)" stroke-width="2" stroke-linecap="round"></path> |
| <defs> |
| <linearGradient id="brand-grad" x1="1" y1="1" x2="28" y2="28"> |
| <stop offset="0%" stop-color="#f7f8fa"></stop> |
| <stop offset="45%" stop-color="#c7cdd3"></stop> |
| <stop offset="100%" stop-color="#ff9b3d"></stop> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| <h1 class="header__title">Pluto</h1> |
| <span class="header__badge">v2</span> |
| </div> |
| <p class="header__subtitle">Mode-switching extraction pipeline with a silver-and-orange operator dashboard.</p> |
| </div> |
| <div class="header__status">Evidence-first workflow</div> |
| </div> |
| </header> |
|
|
| <section class="query-bar" id="querySection"> |
| <div class="query-bar__inner"> |
| <input type="text" id="queryInput" class="query-bar__input" placeholder="Enter your research query..." |
| autocomplete="off"> |
| <button id="runBtn" class="query-bar__btn" disabled> |
| <span class="btn-icon">▶</span> Run Pipeline |
| </button> |
| <button id="benchBtn" class="query-bar__btn query-bar__btn--bench" disabled> |
| <span class="btn-icon">⚖</span> Benchmark |
| </button> |
| </div> |
| <div class="query-bar__meta"> |
| <div class="query-bar__scope" id="queryScopeLabel">Scope: entire corpus | Standard answer</div> |
| <label class="query-bar__detail"> |
| <span class="query-bar__detail-label">Answer depth</span> |
| <select id="detailModeSelect" class="query-bar__select"> |
| <option value="standard">Standard</option> |
| <option value="detailed">Detailed</option> |
| </select> |
| </label> |
| </div> |
| </section> |
|
|
| <section class="upload-zone" id="uploadZone"> |
| <div class="upload-zone__inner"> |
| <div class="upload-zone__droparea" id="dropArea"> |
| <div class="upload-zone__icon">📎</div> |
| <div class="upload-zone__text"> |
| <strong>Drop files here</strong> or |
| <label class="upload-zone__browse" for="fileInput">browse</label> |
| </div> |
| <div class="upload-zone__hint">PDF, DOCX, TXT, MD - max 10MB each</div> |
| <input type="file" id="fileInput" class="upload-zone__input" multiple |
| accept=".pdf,.docx,.doc,.txt,.md,.markdown"> |
| </div> |
| <div class="upload-zone__status" id="uploadStatus"></div> |
| <div class="upload-zone__corpus" id="corpusList"> |
| <div class="corpus-header"> |
| <div class="corpus-header__copy"> |
| <span class="corpus-header__title">📁 Corpus Documents</span> |
| <span class="corpus-header__summary" id="corpusSelectionSummary">Click a ready corpus document to limit the next query to that document.</span> |
| </div> |
| <button class="corpus-header__refresh" id="refreshCorpus" title="Refresh">↻</button> |
| </div> |
| <div class="corpus-docs" id="corpusDocs">Loading...</div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="stage-rail" id="stageRail"> |
| <div class="stage-rail__track"> |
| <div class="stage-card" data-stage="route" id="stage-route"> |
| <div class="stage-card__number">S0</div> |
| <div class="stage-card__label">ROUTE</div> |
| <div class="stage-card__status" id="status-route">idle</div> |
| </div> |
| <div class="stage-rail__connector"></div> |
| <div class="stage-card" data-stage="extract" id="stage-extract"> |
| <div class="stage-card__number">S1</div> |
| <div class="stage-card__label">EXTRACT</div> |
| <div class="stage-card__status" id="status-extract">idle</div> |
| </div> |
| <div class="stage-rail__connector"></div> |
| <div class="stage-card" data-stage="merge" id="stage-merge"> |
| <div class="stage-card__number">S2</div> |
| <div class="stage-card__label">MERGE</div> |
| <div class="stage-card__status" id="status-merge">idle</div> |
| </div> |
| <div class="stage-rail__connector"></div> |
| <div class="stage-card" data-stage="evidence_check" id="stage-evidence_check"> |
| <div class="stage-card__number">S3</div> |
| <div class="stage-card__label">EVIDENCE CHECK</div> |
| <div class="stage-card__status" id="status-evidence_check">idle</div> |
| </div> |
| </div> |
| </section> |
|
|
| <main class="dashboard" id="dashboard"> |
| <section class="panel panel--answer" id="answerPanel"> |
| <h2 class="panel__title"> |
| <span class="panel__icon">📝</span> Final Answer |
| </h2> |
| <div class="panel__body" id="answerBody"> |
| <p class="panel__placeholder">Run a query to see results...</p> |
| </div> |
| </section> |
|
|
| <section class="panel panel--benchmark" id="benchPanel" hidden> |
| <h2 class="panel__title"> |
| <span class="panel__icon">⚖</span> Pluto vs Single Model Baseline |
| </h2> |
| <div class="panel__body bench-body" id="benchBody"> |
| <div id="benchLoader" class="bench-loader">Benchmarking...</div> |
| </div> |
| </section> |
|
|
| <section class="panel panel--evidence" id="evidencePanel"> |
| <h2 class="panel__title"> |
| <span class="panel__icon">🔗</span> Evidence |
| </h2> |
| <div class="panel__body" id="evidenceBody"> |
| <p class="panel__placeholder">No evidence yet</p> |
| </div> |
| </section> |
|
|
| <section class="panel panel--trace" id="tracePanel"> |
| <h2 class="panel__title"> |
| <span class="panel__icon">📊</span> Trace Summary |
| </h2> |
| <div class="panel__body" id="traceBody"> |
| <p class="panel__placeholder">Pipeline trace will appear here</p> |
| </div> |
| </section> |
|
|
| <section class="panel panel--bus" id="busPanel"> |
| <h2 class="panel__title"> |
| <span class="panel__icon">🤖</span> Agent Logs (Bus) |
| </h2> |
| <div class="panel__body" id="busBody"> |
| <p class="panel__placeholder">Agent activity will stream here...</p> |
| </div> |
| </section> |
|
|
| <section class="panel panel--confidence" id="confidencePanel"> |
| <h2 class="panel__title"> |
| <span class="panel__icon">🎯</span> Confidence |
| </h2> |
| <div class="confidence-meter" id="confidenceMeter"> |
| <div class="confidence-meter__ring"> |
| <svg viewBox="0 0 120 120"> |
| <circle class="confidence-meter__bg" cx="60" cy="60" r="52"></circle> |
| <circle class="confidence-meter__fill" cx="60" cy="60" r="52" id="confRing" stroke-dasharray="327" |
| stroke-dashoffset="327"></circle> |
| </svg> |
| <span class="confidence-meter__value" id="confValue">-</span> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <footer class="footer"> |
| <span>Pluto v2 Pipeline | Deterministic routing | Real model switching | Evidence checking</span> |
| </footer> |
|
|
| <script src="/static/app.js?v=6"></script> |
| </body> |
|
|
| </html> |
|
|
