166a7763a4
Refs #99 #78
224 lines
9.9 KiB
HTML
224 lines
9.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>HWLAB Cloud Workbench</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
<script type="module" src="./app.mjs"></script>
|
|
</head>
|
|
<body>
|
|
<main class="workbench-shell" data-app-shell>
|
|
<aside class="activity-rail" aria-label="Workbench activity">
|
|
<button class="rail-button active" type="button" data-route="workspace" title="Workbench" aria-label="Workbench">WB</button>
|
|
<button class="rail-button" type="button" data-side-tab-jump="records" title="Trusted records" aria-label="Trusted records">TR</button>
|
|
<button class="rail-button" type="button" data-route="gate" title="Gate diagnostics" aria-label="Gate diagnostics">DG</button>
|
|
<span class="rail-spacer" aria-hidden="true"></span>
|
|
<button class="rail-button" id="explorer-toggle" type="button" title="Toggle explorer" aria-label="Toggle explorer">EX</button>
|
|
</aside>
|
|
|
|
<aside class="explorer" aria-label="Explorer and resource tree">
|
|
<header class="explorer-head">
|
|
<div>
|
|
<p class="eyebrow">HWLAB Cloud</p>
|
|
<h1>Workbench</h1>
|
|
</div>
|
|
<span class="status-dot tone-blocked" id="explorer-status">blocked</span>
|
|
</header>
|
|
<section class="source-strip" id="source-strip" aria-label="Source state">
|
|
<span class="state-tag tone-source">SOURCE loading</span>
|
|
<span class="state-tag tone-dry-run">DRY-RUN loading</span>
|
|
<span class="state-tag tone-dev-live">DEV-LIVE probing</span>
|
|
<span class="state-tag tone-blocked">BLOCKED pending</span>
|
|
</section>
|
|
<section class="tree-panel">
|
|
<div class="panel-title-row">
|
|
<h2>Resource Tree</h2>
|
|
<span id="tree-count">0</span>
|
|
</div>
|
|
<nav id="resource-tree" class="resource-tree" aria-label="HWLAB resources"></nav>
|
|
</section>
|
|
<section class="tree-panel blockers-panel">
|
|
<div class="panel-title-row">
|
|
<h2>Current Blockers</h2>
|
|
<span id="blocker-count">0</span>
|
|
</div>
|
|
<div id="explorer-blockers" class="compact-list"></div>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="center-workspace">
|
|
<header class="topbar">
|
|
<div class="topbar-main">
|
|
<p class="eyebrow">M3 Trusted Loop User Surface</p>
|
|
<h2>Agent Conversation / Trace Workspace</h2>
|
|
<p id="route-path" class="route-path">browser/CLI/gateway -> cloud-web/cloud-api</p>
|
|
</div>
|
|
<div class="probe-card" aria-live="polite">
|
|
<span class="metric-label">Same-Origin Read Probe</span>
|
|
<strong id="live-status" class="tone-probing">probing</strong>
|
|
<small id="live-detail">Checking /health/live, /v1, and read-only /json-rpc.</small>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="view workbench-view" id="workspace" data-view="workspace" aria-labelledby="workspace-title">
|
|
<div class="conversation-column">
|
|
<div class="workspace-panel conversation-panel">
|
|
<div class="panel-title-row">
|
|
<div>
|
|
<p class="eyebrow">Agent Workspace</p>
|
|
<h2 id="workspace-title">Conversation</h2>
|
|
</div>
|
|
<span class="state-tag tone-blocked">BLOCKED surfaced</span>
|
|
</div>
|
|
<div class="conversation-list" id="conversation-list" aria-live="polite"></div>
|
|
</div>
|
|
|
|
<div class="workspace-panel trace-panel">
|
|
<div class="panel-title-row">
|
|
<div>
|
|
<p class="eyebrow">Trace</p>
|
|
<h2>M0-M5 Plan Trace</h2>
|
|
</div>
|
|
<span class="state-tag tone-dry-run">DRY-RUN plan</span>
|
|
</div>
|
|
<div id="trace-list" class="trace-list"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="view gate-view" id="gate" data-view="gate" aria-labelledby="gate-title" hidden>
|
|
<div class="workspace-panel">
|
|
<div class="panel-title-row">
|
|
<div>
|
|
<p class="eyebrow">Secondary Entry</p>
|
|
<h2 id="gate-title">Gate / Diagnostics</h2>
|
|
</div>
|
|
<span class="state-tag tone-source">SOURCE report</span>
|
|
</div>
|
|
<p class="panel-copy">
|
|
Gate data remains available for diagnostics and acceptance review. The default route stays on the user workbench.
|
|
</p>
|
|
</div>
|
|
<div class="gate-grid" id="gate-metadata"></div>
|
|
<div class="workspace-panel">
|
|
<div class="panel-title-row">
|
|
<h2>M0-M5 Gates</h2>
|
|
<span class="state-tag tone-blocked">BLOCKED if live prerequisites fail</span>
|
|
</div>
|
|
<div class="milestone-grid" id="milestone-grid"></div>
|
|
</div>
|
|
<div class="workspace-panel">
|
|
<div class="panel-title-row">
|
|
<h2>DEV Health Contract</h2>
|
|
<span class="state-tag tone-source">SOURCE fixture</span>
|
|
</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>
|
|
</div>
|
|
<div class="gate-split">
|
|
<div class="workspace-panel danger">
|
|
<div class="panel-title-row">
|
|
<h2>Open Blockers</h2>
|
|
<span class="state-tag tone-blocked">BLOCKED</span>
|
|
</div>
|
|
<div id="gate-blockers" class="compact-list"></div>
|
|
</div>
|
|
<div class="workspace-panel">
|
|
<div class="panel-title-row">
|
|
<h2>Light Validation</h2>
|
|
<span class="state-tag tone-source">SOURCE checks</span>
|
|
</div>
|
|
<ol id="validation-list" class="command-list"></ol>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<form class="command-bar" id="command-form" aria-label="Agent input">
|
|
<div class="input-shell">
|
|
<span class="prompt-mark">hwlab</span>
|
|
<input
|
|
id="command-input"
|
|
autocomplete="off"
|
|
type="text"
|
|
placeholder="Draft an agent instruction locally; this web shell does not dispatch hardware changes."
|
|
/>
|
|
</div>
|
|
<button class="command-button" type="submit">Add Draft</button>
|
|
<button class="command-button secondary" id="command-clear" type="button">Clear</button>
|
|
</form>
|
|
</section>
|
|
|
|
<aside class="right-sidebar" aria-label="Runtime status and records">
|
|
<section class="hardware-status">
|
|
<div class="panel-title-row">
|
|
<div>
|
|
<p class="eyebrow">Runtime Surface</p>
|
|
<h2>BOX-SIMU / Gateway-SIMU / Patch Panel</h2>
|
|
</div>
|
|
<span class="state-tag tone-dev-live">DEV-LIVE probes</span>
|
|
</div>
|
|
<div id="hardware-list" class="hardware-list"></div>
|
|
</section>
|
|
|
|
<section class="side-workspace">
|
|
<div class="side-tabs" role="tablist" aria-label="Workbench side panels">
|
|
<button class="side-tab active" id="tab-control" type="button" role="tab" aria-selected="true" data-side-tab="control">Control</button>
|
|
<button class="side-tab" id="tab-wiring" type="button" role="tab" aria-selected="false" data-side-tab="wiring">Wiring</button>
|
|
<button class="side-tab" id="tab-records" type="button" role="tab" aria-selected="false" data-side-tab="records">Trusted Records</button>
|
|
<button class="side-tab" id="tab-diagnostics" type="button" role="tab" aria-selected="false" data-side-tab="diagnostics">Diagnostics</button>
|
|
</div>
|
|
|
|
<section class="side-panel active" id="panel-control" role="tabpanel" aria-labelledby="tab-control" data-side-panel="control">
|
|
<div class="panel-title-row">
|
|
<h2>Control Drafts</h2>
|
|
<span class="state-tag tone-dry-run">DRY-RUN only</span>
|
|
</div>
|
|
<div id="control-list" class="compact-list"></div>
|
|
</section>
|
|
|
|
<section class="side-panel" id="panel-wiring" role="tabpanel" aria-labelledby="tab-wiring" data-side-panel="wiring" hidden>
|
|
<div class="panel-title-row">
|
|
<h2>Patch Panel</h2>
|
|
<span class="state-tag tone-source">SOURCE wiring</span>
|
|
</div>
|
|
<div id="wiring-list" class="compact-list"></div>
|
|
</section>
|
|
|
|
<section class="side-panel" id="panel-records" role="tabpanel" aria-labelledby="tab-records" data-side-panel="records" hidden>
|
|
<div class="panel-title-row">
|
|
<h2>Trusted Records</h2>
|
|
<span class="state-tag tone-source">SOURCE + read query</span>
|
|
</div>
|
|
<div id="records-list" class="compact-list"></div>
|
|
</section>
|
|
|
|
<section class="side-panel" id="panel-diagnostics" role="tabpanel" aria-labelledby="tab-diagnostics" data-side-panel="diagnostics" hidden>
|
|
<div class="panel-title-row">
|
|
<h2>Diagnostics</h2>
|
|
<span class="state-tag tone-dev-live">DEV-LIVE read probes</span>
|
|
</div>
|
|
<div id="diagnostics-list" class="compact-list"></div>
|
|
<div class="readonly-rpc">
|
|
<h3>Allowed Read RPC</h3>
|
|
<div id="method-list" class="rpc-chip-list"></div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
</body>
|
|
</html>
|