Files
pikasTech-HWLAB/web/hwlab-cloud-web/index.html
T
Lyon 4ebb1e4aa6 feat: add HWLAB DEV console homepage
Refs #59

Merged by commander after reviewing Code Queue task codex_1779422758441_1. Source-only frontend PR; deployment/DEV verification remains as follow-up.
2026-05-22 12:25:41 +08:00

290 lines
11 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HWLAB DEV Console</title>
<link rel="stylesheet" href="./styles.css" />
<script type="module" src="./app.mjs"></script>
</head>
<body>
<main class="shell" data-app-shell>
<header class="masthead">
<div class="identity">
<p class="eyebrow">HWLAB Cloud Web / DEV</p>
<h1>DEV Control Console</h1>
<p class="lede">Same-origin runtime observation for cloud-api health, methods, topology contracts, operations, agent sessions, and evidence.</p>
</div>
<div class="live-card" aria-live="polite">
<span class="label">Live API</span>
<strong id="live-status">probing</strong>
<small id="live-detail">Checking /v1 and /json-rpc from this origin.</small>
</div>
</header>
<nav class="module-nav" aria-label="HWLAB console modules">
<a href="#overview" data-route="overview">Overview</a>
<a href="#topology" data-route="topology">Topology / Patch Panel</a>
<a href="#hardware" data-route="hardware">Hardware Operations</a>
<a href="#agents" data-route="agents">Agent Sessions</a>
<a href="#evidence" data-route="evidence">Evidence / Audit</a>
<a href="#gate" data-route="gate">Gate / Diagnostics</a>
</nav>
<section class="view" id="overview" data-view="overview" aria-labelledby="overview-title">
<div class="section-head">
<div>
<p class="eyebrow">Overview</p>
<h2 id="overview-title">Runtime Surface</h2>
</div>
<p>Live rows are populated only from same-origin API responses. Checked-in gate records are labeled separately.</p>
</div>
<div class="metrics six" id="overview-metrics"></div>
<div class="split">
<section class="panel">
<div class="panel-head">
<h3>Live Method Registry</h3>
<p id="method-detail">Waiting for cloud-api adapter description.</p>
</div>
<div class="method-grid" id="method-grid"></div>
</section>
<section class="panel">
<div class="panel-head">
<h3>Runtime Summary</h3>
<p id="runtime-detail">Waiting for cloud-api runtime summary.</p>
</div>
<div class="metrics two" id="runtime-metrics"></div>
</section>
</div>
</section>
<section class="view" id="topology" data-view="topology" aria-labelledby="topology-title" hidden>
<div class="section-head">
<div>
<p class="eyebrow">Topology / Patch Panel</p>
<h2 id="topology-title">Gateway, Box, and Patch Contract</h2>
</div>
<p>Live runtime counts come from cloud-api. The detailed wiring below is the checked-in DEV gate contract.</p>
</div>
<div class="metrics four" id="topology-live-metrics"></div>
<div class="split">
<section class="panel">
<div class="panel-head">
<h3>Gateway and Box Resources</h3>
<p>Checked-in M5 topology snapshot.</p>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Type</th>
<th>ID</th>
<th>Service / Gateway</th>
<th>Status</th>
<th>Endpoint / Resource</th>
</tr>
</thead>
<tbody id="topology-body"></tbody>
</table>
</div>
</section>
<section class="panel">
<div class="panel-head">
<h3>Patch Panel</h3>
<p>Active wiring from the checked-in gate report.</p>
</div>
<div class="metrics two" id="patch-metrics"></div>
</section>
</div>
</section>
<section class="view" id="hardware" data-view="hardware" aria-labelledby="hardware-title" hidden>
<div class="section-head">
<div>
<p class="eyebrow">Hardware Operations</p>
<h2 id="hardware-title">Operation Ledger</h2>
</div>
<p>The console does not issue mutating hardware requests. It shows live operation counts plus checked-in operation evidence.</p>
</div>
<div class="metrics four" id="hardware-live-metrics"></div>
<section class="panel">
<div class="panel-head">
<h3>Checked-In Operations</h3>
<p>Fixture-bound M5 dry-run operations; not live dispatch proof.</p>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Operation</th>
<th>Requested by</th>
<th>Status</th>
<th>Resource</th>
<th>Agent / Worker</th>
</tr>
</thead>
<tbody id="operation-body"></tbody>
</table>
</div>
</section>
</section>
<section class="view" id="agents" data-view="agents" aria-labelledby="agents-title" hidden>
<div class="section-head">
<div>
<p class="eyebrow">Agent Sessions</p>
<h2 id="agents-title">Agent and Worker Runtime</h2>
</div>
<p>Agent session detail is from the gate contract until cloud-api exposes a read-only session query.</p>
</div>
<div class="split">
<section class="panel">
<div class="panel-head">
<h3>Session Summary</h3>
<p>Checked-in agent and worker evidence.</p>
</div>
<div class="metrics two" id="agent-metrics"></div>
</section>
<section class="panel">
<div class="panel-head">
<h3>Trace, Audit, Cleanup</h3>
<p>Gate contract counts tied to the M5 dry-run plan.</p>
</div>
<div class="metrics two" id="agent-evidence-metrics"></div>
</section>
</div>
</section>
<section class="view" id="evidence" data-view="evidence" aria-labelledby="evidence-title" hidden>
<div class="section-head">
<div>
<p class="eyebrow">Evidence / Audit</p>
<h2 id="evidence-title">Evidence Chain</h2>
</div>
<p>Live audit/evidence query results are shown only when cloud-api returns them. The fixture records remain labeled as checked-in evidence.</p>
</div>
<div class="split">
<section class="panel">
<div class="panel-head">
<h3>Live Audit Query</h3>
<p id="audit-detail">Waiting for audit.event.query.</p>
</div>
<div class="table-wrap compact-table">
<table>
<thead>
<tr>
<th>Audit</th>
<th>Action</th>
<th>Target</th>
<th>Outcome</th>
</tr>
</thead>
<tbody id="audit-body"></tbody>
</table>
</div>
</section>
<section class="panel">
<div class="panel-head">
<h3>Live Evidence Query</h3>
<p id="evidence-query-detail">Waiting for evidence.record.query.</p>
</div>
<div class="table-wrap compact-table">
<table>
<thead>
<tr>
<th>Evidence</th>
<th>Operation</th>
<th>Kind</th>
<th>Service</th>
</tr>
</thead>
<tbody id="live-evidence-body"></tbody>
</table>
</div>
</section>
</div>
<section class="panel">
<div class="panel-head">
<h3>Checked-In Evidence Records</h3>
<p>Direct and agent hardware operation evidence from the M5 dry-run plan.</p>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Evidence</th>
<th>Operation</th>
<th>Service</th>
<th>URI</th>
<th>SHA-256</th>
</tr>
</thead>
<tbody id="evidence-body"></tbody>
</table>
</div>
</section>
</section>
<section class="view" id="gate" data-view="gate" aria-labelledby="gate-title" hidden>
<div class="section-head">
<div>
<p class="eyebrow">Gate / Diagnostics</p>
<h2 id="gate-title">DEV MVP Gate Report</h2>
</div>
<p>Original Gate data remains available here for diagnostics and acceptance review.</p>
</div>
<section class="panel compact">
<div class="panel-head">
<h3>Acceptance Source</h3>
<p>Contract-driven view of the checked-in M0-M5 gate report and M5 dry-run plan.</p>
</div>
<div class="metrics six" id="meta-grid"></div>
</section>
<section class="panel compact">
<div class="panel-head">
<h3>M0-M5 Gates</h3>
<p>Local contract and dry-run status. Live DEV remains separate from fixture evidence.</p>
</div>
<div class="milestones" id="milestone-grid"></div>
</section>
<section class="panel">
<div class="panel-head">
<h3>DEV Health Contract</h3>
<p>Read from the M5 gate fixture; live health is not claimed while blockers are open.</p>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Component</th>
<th>Service</th>
<th>Status</th>
<th>Observed</th>
<th>Endpoint</th>
</tr>
</thead>
<tbody id="health-body"></tbody>
</table>
</div>
</section>
<section class="split">
<section class="panel compact danger">
<div class="panel-head">
<h3>Blocked Evidence</h3>
<p>Open blocker evidence that prevents live DEV acceptance.</p>
</div>
<ul class="blockers" id="blocker-list"></ul>
</section>
<section class="panel compact">
<div class="panel-head">
<h3>Operator Commands</h3>
<p>Safe CLI entry points for manual acceptance.</p>
</div>
<ol class="commands" id="command-list"></ol>
</section>
</section>
</section>
</main>
</body>
</html>