Files
pikasTech-HWLAB/web/hwlab-cloud-web/index.html
T
2026-05-22 10:51:31 +00:00

240 lines
11 KiB
HTML

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HWLAB 云工作台</title>
<link rel="stylesheet" href="./styles.css" />
<script type="module" src="./app.mjs"></script>
</head>
<body>
<main class="workbench-shell" data-app-shell data-help-route-policy="non-default-internal-help" data-internal-help-path="./help.md">
<aside class="activity-rail" aria-label="工作台活动栏">
<button class="rail-button active" type="button" data-route="workspace" title="工作台" aria-label="工作台"></button>
<button class="rail-button" type="button" data-side-tab-jump="records" title="可信记录" aria-label="可信记录"></button>
<button class="rail-button" type="button" data-route="gate" title="Gate 诊断" aria-label="Gate 诊断"></button>
<button class="rail-button" type="button" data-route="help" title="使用说明" aria-label="使用说明"></button>
<span class="rail-spacer" aria-hidden="true"></span>
<button class="rail-button" id="explorer-toggle" type="button" title="展开或收起资源树" aria-label="展开或收起资源树"></button>
</aside>
<aside class="explorer" aria-label="资源浏览与硬件资源树">
<header class="explorer-head">
<div>
<p class="eyebrow">HWLAB Cloud</p>
<h1>云工作台</h1>
</div>
<span class="status-dot tone-blocked" id="explorer-status">阻塞 BLOCKED</span>
</header>
<section class="source-strip" id="source-strip" aria-label="来源状态">
<span class="state-tag tone-source">来源 SOURCE 加载中</span>
<span class="state-tag tone-dry-run">演练 DRY-RUN 加载中</span>
<span class="state-tag tone-dev-live">开发实况 DEV-LIVE 探测中</span>
<span class="state-tag tone-blocked">阻塞 BLOCKED 等待中</span>
</section>
<section class="tree-panel">
<div class="panel-title-row">
<h2>硬件资源</h2>
<span id="tree-count">0</span>
</div>
<nav id="resource-tree" class="resource-tree" aria-label="HWLAB 硬件资源"></nav>
</section>
<section class="tree-panel blockers-panel">
<div class="panel-title-row">
<h2>当前阻塞</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 可信闭环用户界面</p>
<h2>Agent 对话与执行轨迹</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">同源只读探测</span>
<strong id="live-status" class="tone-probing">探测中</strong>
<small id="live-detail">正在检查 /health/live、/v1 与只读 /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 工作区</p>
<h2 id="workspace-title">Agent 对话</h2>
</div>
<span class="state-tag tone-blocked">阻塞 BLOCKED 已展示</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">执行轨迹</p>
<h2>M0-M5 执行轨迹</h2>
</div>
<span class="state-tag tone-dry-run">演练 DRY-RUN 计划</span>
</div>
<div id="trace-list" class="trace-list"></div>
</div>
</div>
</section>
<section class="view help-view" id="help" data-view="help" aria-labelledby="help-title" hidden>
<div class="workspace-panel help-panel">
<div class="panel-title-row">
<div>
<p class="eyebrow">内部说明</p>
<h2 id="help-title">使用说明</h2>
</div>
<span class="state-tag tone-dry-run" id="help-status">加载中</span>
</div>
<div id="help-content" class="help-content" aria-live="polite"></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">二级入口</p>
<h2 id="gate-title">Gate / 诊断</h2>
</div>
<span class="state-tag tone-source">来源 SOURCE 报告</span>
</div>
<p class="panel-copy">
Gate 数据仅作为诊断与验收复核入口保留;默认入口仍停留在用户工作台。
</p>
</div>
<div class="gate-grid" id="gate-metadata"></div>
<div class="workspace-panel">
<div class="panel-title-row">
<h2>M0-M5 Gate 状态</h2>
<span class="state-tag tone-blocked">阻塞 BLOCKED 实况前置失败时</span>
</div>
<div class="milestone-grid" id="milestone-grid"></div>
</div>
<div class="workspace-panel">
<div class="panel-title-row">
<h2>DEV 健康契约</h2>
<span class="state-tag tone-source">来源 SOURCE fixture</span>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>组件</th>
<th>服务</th>
<th>状态</th>
<th>观测来源</th>
<th>端点</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>未关闭阻塞</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>轻量验证</h2>
<span class="state-tag tone-source">来源 SOURCE 检查</span>
</div>
<ol id="validation-list" class="command-list"></ol>
</div>
</div>
</section>
<form class="command-bar" id="command-form" aria-label="Agent 输入">
<div class="input-shell">
<span class="prompt-mark">hwlab</span>
<input
id="command-input"
autocomplete="off"
type="text"
placeholder="在此编写 Agent 指令草稿;仅本地记录,不触发硬件变更。"
/>
</div>
<button class="command-button" type="submit">添加草稿</button>
<button class="command-button secondary" id="command-clear" type="button">清空</button>
</form>
</section>
<aside class="right-sidebar" aria-label="运行状态与可信记录">
<section class="hardware-status">
<div class="panel-title-row">
<div>
<p class="eyebrow">运行界面</p>
<h2>硬件状态:BOX-SIMU / Gateway-SIMU / hwlab-patch-panel</h2>
</div>
<span class="state-tag tone-dev-live">开发实况 DEV-LIVE 只读探测</span>
</div>
<div id="hardware-list" class="hardware-list"></div>
</section>
<section class="side-workspace">
<div class="side-tabs" role="tablist" aria-label="工作台右侧面板">
<button class="side-tab active" id="tab-control" type="button" role="tab" aria-selected="true" data-side-tab="control">控制</button>
<button class="side-tab" id="tab-wiring" type="button" role="tab" aria-selected="false" data-side-tab="wiring">接线</button>
<button class="side-tab" id="tab-records" type="button" role="tab" aria-selected="false" data-side-tab="records">可信记录</button>
<button class="side-tab" id="tab-diagnostics" type="button" role="tab" aria-selected="false" data-side-tab="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>控制草稿</h2>
<span class="state-tag tone-dry-run">演练 DRY-RUN 仅本地</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>接线:hwlab-patch-panel</h2>
<span class="state-tag tone-source">来源 SOURCE 接线</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>可信记录</h2>
<span class="state-tag tone-source">来源 SOURCE + 只读查询</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>诊断</h2>
<span class="state-tag tone-dev-live">开发实况 DEV-LIVE 只读探测</span>
</div>
<div id="diagnostics-list" class="compact-list"></div>
<div class="readonly-rpc">
<h3>使用说明</h3>
<p class="panel-copy">仅允许同源只读诊断;不新增硬件写 API。</p>
<h3>允许的只读 RPC</h3>
<div id="method-list" class="rpc-chip-list"></div>
</div>
</section>
</section>
</aside>
</main>
</body>
</html>