Files
pikasTech-HWLAB/web/hwlab-cloud-web/index.html
T
2026-05-25 01:14:17 +00:00

418 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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 data-auth-state="checking">
<section class="login-shell" id="login-shell" data-auth-login aria-labelledby="login-title">
<div class="login-panel">
<div class="login-heading">
<p class="eyebrow">HWLAB</p>
<h1 id="login-title">云工作台登录</h1>
<p>请输入账号和密码。</p>
</div>
<form class="login-form" id="login-form" autocomplete="on">
<label>
<span>用户名</span>
<input id="login-username" name="username" type="text" autocomplete="username" inputmode="text" required />
</label>
<label>
<span>密码</span>
<input id="login-password" name="password" type="password" autocomplete="current-password" required />
</label>
<p class="login-error" id="login-error" role="alert" hidden></p>
<button class="login-submit" id="login-submit" type="submit">登录</button>
</form>
</div>
</section>
<main class="workbench-shell" data-app-shell data-help-route-policy="non-default-internal-help" data-internal-help-path="/help.md" hidden aria-hidden="true">
<aside class="activity-rail" id="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-route="gate" title="内部复核" aria-label="内部复核">内部复核</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 sidebar-toggle"
id="left-sidebar-toggle"
type="button"
aria-controls="activity-rail"
aria-expanded="true"
aria-label="折叠左侧导航"
title="折叠左侧导航"
>收起</button>
</aside>
<div
class="resize-handle left-sidebar-resize"
id="left-sidebar-resize"
role="separator"
tabindex="0"
aria-label="拖拽调整左侧导航宽度"
aria-controls="activity-rail"
aria-orientation="vertical"
aria-valuemin="72"
aria-valuemax="180"
aria-valuenow="92"
title="拖拽调整左侧导航宽度;用左右方向键微调,Home/End 到最小或最大。"
></div>
<section class="center-workspace">
<header class="topbar">
<div class="topbar-main">
<p class="eyebrow">用户工作台</p>
<h2>Agent 对话与硬件资源面板</h2>
<p id="route-path" class="route-path">当前浏览器会话只保存任务草稿,硬件动作需通过受控后端流程。</p>
</div>
<div class="probe-card user-card" aria-live="polite">
<span class="metric-label">工作区状态</span>
<strong id="live-status" class="tone-pending">等待验证</strong>
<small id="live-detail">正在验证 hwlab-cloud-api /health/live、/v1、/v1/agent/chat 与 /v1/m3/io;未完成前不标为通过。</small>
<details class="live-build-summary" id="live-build-summary">
<summary id="live-build-toggle" aria-haspopup="dialog" aria-expanded="false">
<span class="live-build-summary-label" id="live-build-latest">最新镜像构建时间:等待实时元数据</span>
</summary>
</details>
<div class="live-build-list live-build-list-template" id="live-build-list" hidden aria-label="live HWLAB 微服务构建时间明细"></div>
</div>
<button class="logout-button" id="logout-button" type="button">退出</button>
</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-source" id="agent-chat-status">等待输入</span>
</div>
<details class="code-agent-summary tone-border-pending" id="code-agent-summary">
<summary>
<span class="code-agent-summary-icon tone-pending" id="code-agent-summary-icon" aria-hidden="true"></span>
<strong class="code-agent-summary-label tone-pending" id="code-agent-summary-label">探测中</strong>
<span class="code-agent-summary-capability" id="code-agent-summary-capability">未观测</span>
<span class="code-agent-summary-trace" id="code-agent-summary-trace">trace 未观测</span>
</summary>
<div class="code-agent-summary-detail" id="code-agent-summary-detail"></div>
</details>
<div class="conversation-list" id="conversation-list" aria-live="polite"></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>
<header class="gate-header">
<div>
<p class="eyebrow">内部二级入口</p>
<h2 id="gate-title">内部复核</h2>
</div>
<span class="state-tag tone-source" id="gate-source-status">等待 live 后端</span>
</header>
<div class="gate-controls" aria-label="内部复核过滤控件">
<label>
<span>状态</span>
<select id="gate-status-filter">
<option value="all">全部</option>
<option value="通过">通过</option>
<option value="阻塞">阻塞</option>
<option value="失败">失败</option>
<option value="待验证">待验证</option>
<option value="信息">信息</option>
</select>
</label>
<label>
<span>搜索</span>
<input id="gate-search" type="search" placeholder="按类别、检查项、对象或 trace 搜索" autocomplete="off" />
</label>
<button class="command-button secondary" id="gate-refresh" type="button">刷新</button>
</div>
<div class="gate-table-wrap">
<table class="gate-table" aria-describedby="gate-source-status">
<thead>
<tr>
<th>类别</th>
<th>检查项</th>
<th>状态</th>
<th>归因对象</th>
<th>关键细节</th>
<th>证据/trace</th>
<th>更新时间</th>
<th>下一步</th>
</tr>
</thead>
<tbody id="gate-review-body">
<tr>
<td colspan="8">正在读取 live 后端聚合。</td>
</tr>
</tbody>
</table>
</div>
</section>
<form class="command-bar" id="command-form" aria-label="Agent 输入">
<div class="agent-quick-prompts" aria-label="Code Agent 快捷用例">
<button
type="button"
data-agent-quick-prompt="pwd"
data-prompt-action="fill"
title="只填充输入框,点击发送后交给 Code Agent"
data-prompt-text="通过 Skill CLI 执行 pwd,列出当前工作目录。"
>Skill CLIpwd</button>
<button
type="button"
data-agent-quick-prompt="skills"
data-prompt-action="fill"
title="只填充输入框,点击发送后交给 Code Agent"
data-prompt-text="通过 Skill CLI 列出你能使用的所有 skill。"
>Skill CLI:列出 skill</button>
<button
type="button"
data-agent-quick-prompt="do1-true-di1"
data-prompt-action="fill"
data-requires-explicit-send="true"
title="只填充输入框;必须再点击发送才确认写入请求"
data-prompt-text="通过 HWLAB API / Skill CLI 把 res_boxsimu_1 的 DO1 写成 true,然后读取 res_boxsimu_2 的 DI1;我点击发送后才确认执行这次写入请求。"
>HWLAB APIDO1=true 后读 DI1</button>
<button
type="button"
data-agent-quick-prompt="do1-false-di1"
data-prompt-action="fill"
data-requires-explicit-send="true"
title="只填充输入框;必须再点击发送才确认写入请求"
data-prompt-text="通过 HWLAB API / Skill CLI 把 res_boxsimu_1 的 DO1 写成 false,并复核 res_boxsimu_2 的 DI1;我点击发送后才确认执行这次写入请求。"
>HWLAB APIDO1=false 复核 DI1</button>
</div>
<label class="agent-timeout-control" for="code-agent-timeout">
<span>无新事件超时</span>
<select id="code-agent-timeout" aria-label="Code Agent 无新事件超时">
<option value="180000">3 分钟</option>
<option value="300000">5 分钟</option>
<option value="600000" selected>10 分钟</option>
<option value="900000">15 分钟</option>
<option value="1200000">20 分钟</option>
</select>
</label>
<label class="agent-timeout-control" for="gateway-shell-timeout">
<span>Gateway 命令超时</span>
<select id="gateway-shell-timeout" aria-label="PC gateway shell 命令超时">
<option value="60000">1 分钟</option>
<option value="120000" selected>2 分钟</option>
<option value="180000">3 分钟</option>
<option value="300000">5 分钟</option>
<option value="600000">10 分钟</option>
</select>
</label>
<div class="input-shell">
<span class="prompt-mark">hwlab</span>
<input
id="command-input"
autocomplete="off"
type="text"
placeholder="输入要发送给 Code Agent 的消息;不会直接触发硬件变更。"
/>
</div>
<button class="command-button" id="command-send" type="submit">发送</button>
<button class="command-button secondary" id="command-clear" type="button">清空</button>
</form>
</section>
<aside class="right-sidebar" id="hardware-sidebar" aria-label="运行状态与可信记录">
<div
class="resize-handle right-sidebar-resize"
id="right-sidebar-resize"
role="separator"
tabindex="0"
aria-label="拖拽调整右侧硬件状态栏宽度"
aria-controls="hardware-sidebar"
aria-orientation="vertical"
aria-valuemin="560"
aria-valuemax="740"
aria-valuenow="728"
title="拖拽调整右侧硬件状态栏宽度;用左右方向键微调,Home/End 到最小或最大。"
></div>
<section class="hardware-status">
<div class="panel-title-row">
<div>
<p class="eyebrow">M3 实况状态</p>
<h2>硬件状态工作区</h2>
</div>
<span class="state-tag tone-source" id="hardware-source-status">未验证</span>
</div>
<div class="hardware-status-tabs" role="tablist" aria-label="M3 硬件状态">
<button class="hardware-tab active" type="button" role="tab" aria-selected="true" data-hardware-tab="overview">总览</button>
<button class="hardware-tab" type="button" role="tab" aria-selected="false" data-hardware-tab="gateways">Gateway-SIMU</button>
<button class="hardware-tab" type="button" role="tab" aria-selected="false" data-hardware-tab="box1">BOX-SIMU-1</button>
<button class="hardware-tab" type="button" role="tab" aria-selected="false" data-hardware-tab="box2">BOX-SIMU-2</button>
<button class="hardware-tab" type="button" role="tab" aria-selected="false" data-hardware-tab="patch">Patch Panel</button>
</div>
<div id="hardware-list" class="hardware-list" data-static-source-fallback="SOURCE">
<article class="hardware-section">
<span class="hardware-section-title">Key / Value</span>
<dl class="kv-list">
<div><dt>数据入口</dt><dd>等待 cloud-api /v1/m3/status</dd></div>
<div><dt>链路</dt><dd>res_boxsimu_1:DO1 -> hwlab-patch-panel -> res_boxsimu_2:DI1</dd></div>
<div><dt>来源</dt><dd>未验证;拓扑资料只可作为 fallback</dd></div>
</dl>
</article>
</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>
</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>基础 IO 控制</h2>
<span class="state-tag tone-blocked" id="m3-control-status">探测中</span>
</div>
<div class="m3-flow-summary" id="m3-flow-summary" role="group" aria-label="M3 DO1 到 DI1 操作摘要">
<div class="m3-flow-head">
<div>
<span class="metric-label">操作链路</span>
<strong>DO1 -> patch-panel -> DI1</strong>
</div>
<span class="state-tag tone-pending" id="m3-flow-state">等待 readiness</span>
</div>
<div class="m3-flow-line" aria-label="res_boxsimu_1 DO1 经 hwlab-patch-panel 到 res_boxsimu_2 DI1">
<span class="m3-flow-node mono">res_boxsimu_1</span>
<span class="m3-flow-port">DO1</span>
<span class="m3-flow-hop">hwlab-patch-panel</span>
<span class="m3-flow-node mono">res_boxsimu_2</span>
<span class="m3-flow-port">DI1</span>
</div>
<dl class="m3-flow-kv">
<div>
<dt>当前 action</dt>
<dd id="m3-action-summary">等待用户写入 DO1 或读取 DI1</dd>
</div>
<div>
<dt>DO1 目标</dt>
<dd id="m3-do1-target">选择 true/false 后写入</dd>
</div>
<div>
<dt>DI1 观测</dt>
<dd id="m3-di1-observed">待读取</dd>
</div>
<div>
<dt>可信状态</dt>
<dd id="m3-trust-summary">等待 cloud-api readiness</dd>
</div>
</dl>
<div class="m3-flow-footer">
<button class="m3-jump-button" id="m3-records-jump" type="button">查看最近操作/trace</button>
<span class="m3-trace-summary mono" id="m3-trace-summary">最近 trace:无</span>
</div>
</div>
<form class="m3-control-form" id="m3-control-form" aria-label="DO1 写入">
<div class="m3-control-grid">
<label>
<span>Gateway</span>
<select id="m3-gateway-select">
<option value="gwsimu_1">gateway-simu-1</option>
</select>
</label>
<label>
<span>BOX</span>
<select id="m3-box-select">
<option value="res_boxsimu_1">box-simu-1 / res_boxsimu_1</option>
</select>
</label>
<label>
<span>端口</span>
<select id="m3-port-select">
<option value="DO1">DO1</option>
</select>
</label>
<label>
<span></span>
<select id="m3-value-select">
<option value="true">true</option>
<option value="false">false</option>
</select>
</label>
</div>
<div class="m3-control-actions">
<button class="command-button" id="m3-write-do" type="submit">写入 DO1</button>
<button class="command-button secondary" id="m3-read-di" type="button">读取 DI1</button>
</div>
</form>
<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">来源拓扑接线</span>
</div>
<div class="table-wrap wiring-table-wrap" data-wiring-layout="two-column-long-table">
<table class="wiring-table wiring-long-table" aria-describedby="wiring-summary">
<thead>
<tr data-wiring-row="devices">
<th scope="col">
<span class="mono wrap" id="wiring-source-device">res_boxsimu_1</span>
<small>互连设备 A</small>
</th>
<th scope="col">
<span class="mono wrap" id="wiring-target-device">res_boxsimu_2</span>
<small>互连设备 B</small>
</th>
</tr>
</thead>
<tbody id="wiring-body">
<tr data-source-kind="SOURCE" data-wiring-row="io">
<td>
<span class="wiring-port mono">DO1</span>
<small class="wiring-detail">源端口;经 hwlab-patch-panel;状态:待可信记录</small>
</td>
<td>
<span class="wiring-port mono">DI1</span>
<small class="wiring-detail">目标端口;证据来源:来源拓扑;轨迹/证据:等待可信记录</small>
</td>
</tr>
</tbody>
</table>
</div>
<p class="wiring-summary" id="wiring-summary">接线盘:hwlab-patch-panel;状态:待可信记录;证据来源:来源拓扑;轨迹/证据:等待可信记录。</p>
</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">来源拓扑 + 只读查询</span>
</div>
<div id="records-list" class="compact-list"></div>
</section>
<div class="readonly-rpc sidebar-note">
<h3>复核入口</h3>
<p class="panel-copy">技术复核已移至二级页面,不作为默认工作区内容。</p>
</div>
</section>
</aside>
</main>
</body>
</html>