feat(ql3): add explicit cluster observation console

This commit is contained in:
whyour
2026-08-16 06:09:54 +08:00
parent fba8dfb602
commit 7955d55629
20 changed files with 1881 additions and 877 deletions
@@ -4,214 +4,136 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light" />
<meta
name="description"
content="QingLong 3.0 Cluster Copilot 只读诊断台"
/>
<title>QingLong 3.0 · Copilot 诊断台</title>
<meta name="description" content="QingLong 3.0 Cluster 只读现场记录台" />
<title>QingLong 3.0 · Cluster 现场记录台</title>
<link rel="stylesheet" href="/app.css" />
<script src="/app.js" defer></script>
</head>
<body>
<a class="skip-link" href="#workspace">跳到诊断工作区</a>
<a class="skip-link" href="#workspace">跳到观察工作区</a>
<div class="shell">
<header class="masthead">
<div class="brand-lockup" aria-label="QingLong 3.0 Cluster Console">
<div class="brand-lockup">
<span class="brand-mark" aria-hidden="true">QL</span>
<div>
<p class="eyebrow">QingLong 3.0 / Cluster field console</p>
<h1>故障诊断,不替你执行</h1>
<p class="eyebrow">QingLong 3.0 / Cluster field ledger</p>
<h1>沿着证据读,不替集群做决定</h1>
</div>
</div>
<div class="boundary" aria-label="当前权限边界">
<span class="boundary-dot" aria-hidden="true"></span>
<span>只读边界</span>
<strong>inspect · output</strong>
<span>本机只读 BFF</span>
<strong>Run · Task · Workflow · Copilot</strong>
</div>
</header>
<main id="workspace" class="workspace">
<section class="control-deck" aria-labelledby="target-title">
<aside class="control-deck" aria-labelledby="control-title">
<div class="section-heading">
<p class="eyebrow">Target coordinates</p>
<h2 id="target-title">定位一次诊断</h2>
<p>
输入已存在的 Project、源 Run 和诊断请求。页面不会创建、取消或重试任何任务。
</p>
<p class="eyebrow">Observation coordinates</p>
<h2 id="control-title">选择要读取的事实</h2>
<p>每次按钮点击只发起一次有界 GET。页面不创建、取消、重试、轮询或缓存任何任务。</p>
</div>
<form id="session-form" class="session-gate" autocomplete="off">
<label for="session-token">浏览器访问密钥</label>
<div class="inline-control">
<input
id="session-token"
name="sessionToken"
type="password"
inputmode="text"
spellcheck="false"
autocomplete="off"
required
pattern="[A-Za-z0-9_\-]{43}"
aria-describedby="session-note"
/>
<button type="submit">解锁本次页面</button>
<input id="session-token" name="sessionToken" type="password" autocomplete="off" spellcheck="false" required pattern="[A-Za-z0-9_\-]{43}" />
<button type="submit">解锁本页</button>
</div>
<p id="session-note" class="field-note">
从独立的 0600 session 文件读取并粘贴;仅保留在当前页面内存,不会发送到 Cluster API。
</p>
<p class="field-note">从独立的 0600 session 文件粘贴;密钥只存在于当前页面内存。</p>
</form>
<form id="target-form" class="target-form" autocomplete="off" hidden>
<label for="project-id">Project</label>
<input
id="project-id"
name="projectId"
type="text"
maxlength="128"
spellcheck="false"
autocomplete="off"
placeholder="project-main"
required
/>
<div id="console-controls" hidden>
<label class="field-label" for="project-id">Project</label>
<input id="project-id" type="text" maxlength="128" autocomplete="off" spellcheck="false" placeholder="project-main" required />
<label for="run-id">源 Run</label>
<input
id="run-id"
name="sourceRunId"
type="text"
maxlength="36"
spellcheck="false"
autocomplete="off"
placeholder="run_..."
required
/>
<nav class="mode-tabs" aria-label="观察面">
<button type="button" class="mode-tab active" data-panel="runtime-panel" aria-pressed="true">运行态</button>
<button type="button" class="mode-tab" data-panel="workflow-panel" aria-pressed="false">工作流</button>
<button type="button" class="mode-tab" data-panel="copilot-panel" aria-pressed="false">Copilot</button>
</nav>
<label for="request-id">诊断请求</label>
<input
id="request-id"
name="requestId"
type="text"
maxlength="128"
spellcheck="false"
autocomplete="off"
placeholder="diag-request-..."
required
/>
<section id="runtime-panel" class="mode-panel">
<div class="control-group">
<div class="control-title"><span>01</span><strong>目录</strong></div>
<div class="button-pair">
<button type="button" data-read="task_list">读取 Task 列表</button>
<button type="button" data-read="run_list">读取 Run 列表</button>
</div>
</div>
<div class="control-group">
<div class="control-title"><span>02</span><strong>Task 详情</strong></div>
<input id="task-id" type="text" maxlength="128" autocomplete="off" spellcheck="false" placeholder="task-id" />
<button type="button" data-read="task_read">读取当前修订</button>
</div>
<div class="control-group">
<div class="control-title"><span>03</span><strong>Run 证据链</strong></div>
<input id="run-id" type="text" maxlength="128" autocomplete="off" spellcheck="false" placeholder="run-id" />
<div class="button-grid">
<button type="button" data-read="run_read">读取 Run</button>
<button type="button" data-read="run_step_list">读取 Steps</button>
<button type="button" data-read="run_event_list">读取 Events</button>
</div>
</div>
</section>
<div class="actions">
<button id="inspect-button" class="primary" type="submit">
读取诊断状态
</button>
<button id="output-button" type="button" disabled>
显式读取诊断内容
</button>
</div>
</form>
<section id="workflow-panel" class="mode-panel" hidden>
<label class="field-label" for="package-name">Package</label>
<input id="package-name" type="text" maxlength="63" autocomplete="off" spellcheck="false" placeholder="ops-package" />
<button type="button" data-read="workflow_list">读取 Workflow 列表</button>
<label class="field-label" for="workflow-id">Workflow</label>
<input id="workflow-id" type="text" maxlength="63" autocomplete="off" spellcheck="false" placeholder="daily-maintenance" />
<button type="button" data-read="workflow_run_list">读取 Workflow Runs</button>
<label class="field-label" for="workflow-run-id">Workflow Run UUID</label>
<input id="workflow-run-id" type="text" maxlength="36" autocomplete="off" spellcheck="false" placeholder="00000000-0000-4000-8000-000000000000" />
<div class="button-grid">
<button type="button" data-read="workflow_run_read">读取 Run</button>
<button type="button" data-read="workflow_step_list">读取 Steps</button>
<button type="button" data-read="workflow_event_list">读取 Events</button>
</div>
</section>
<section id="copilot-panel" class="mode-panel" hidden>
<label class="field-label" for="source-run-id">源 Run</label>
<input id="source-run-id" type="text" maxlength="36" autocomplete="off" spellcheck="false" placeholder="run-source-1" />
<label class="field-label" for="diagnosis-request-id">诊断请求</label>
<input id="diagnosis-request-id" type="text" maxlength="128" autocomplete="off" spellcheck="false" placeholder="diagnosis-request-1" />
<div class="button-pair">
<button type="button" class="primary" data-read="inspect">读取诊断状态</button>
<button type="button" data-read="output">显式读取诊断内容</button>
</div>
<p class="field-note">模型文本是不可信内容,只会以纯文本进入证据账本。</p>
</section>
</div>
<aside class="trust-note">
<span>Authority note</span>
<p>
Cluster credential 只存在于本机 BFF 的私有文件中。浏览器不能读取它,也不能调用 diagnose 或 cancel。
</p>
<span>Authority boundary</span>
<p>Cluster credential 只由本机进程从私有文件读取。浏览器无法提交任意路径,也没有 start、cancel 或 diagnose 权限入口。</p>
</aside>
</section>
</aside>
<section class="evidence-panel" aria-labelledby="evidence-title">
<div class="evidence-header">
<div>
<p class="eyebrow">Durable evidence</p>
<h2 id="evidence-title">诊断轨迹</h2>
<p class="eyebrow">Explicit read ledger</p>
<h2 id="evidence-title">本页证据账本</h2>
</div>
<span id="status-chip" class="status-chip" data-tone="idle">等待目标</span>
<span id="status-chip" class="status-chip" data-tone="idle">等待读取</span>
</div>
<div id="empty-state" class="empty-state">
<div class="empty-glyph" aria-hidden="true">
<span></span><span></span><span></span>
</div>
<h3>先读取状态,再决定是否查看内容</h3>
<p>
状态响应只包含有界、低敏的 durable facts。模型文本必须由你再次明确选择。
</p>
<div class="evidence-rail" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
<h3>一次读取,一条可复核事实</h3>
<p>先解锁页面并选择坐标。返回值按读取顺序保留在当前内存,reload 后清空。</p>
</div>
<div id="result-view" hidden>
<ol class="trace-rail" aria-label="诊断状态时间线">
<li>
<span class="trace-node"></span>
<div>
<small>ADMITTED</small>
<strong id="admitted-at"></strong>
</div>
</li>
<li>
<span class="trace-node"></span>
<div>
<small>STAGE</small>
<strong id="stage"></strong>
</div>
</li>
<li>
<span class="trace-node"></span>
<div>
<small>OUTCOME</small>
<strong id="outcome"></strong>
</div>
</li>
</ol>
<dl class="fact-grid">
<div>
<dt>Diagnosis Run</dt>
<dd id="diagnosis-run"></dd>
</div>
<div>
<dt>Reason</dt>
<dd id="reason"></dd>
</div>
<div>
<dt>Tokens</dt>
<dd id="tokens"></dd>
</div>
<div>
<dt>Settled cost</dt>
<dd id="cost"></dd>
</div>
</dl>
<section id="output-panel" class="output-panel" hidden>
<div class="output-heading">
<div>
<p class="eyebrow">Explicit content read</p>
<h3>诊断内容</h3>
</div>
<span>不可信模型输出</span>
</div>
<pre id="output-text" tabindex="0"></pre>
<dl class="output-meta">
<div>
<dt>Finish reason</dt>
<dd id="finish-reason"></dd>
</div>
<div>
<dt>Output bytes</dt>
<dd id="output-bytes"></dd>
</div>
<div>
<dt>Content digest</dt>
<dd id="content-digest"></dd>
</div>
</dl>
</section>
</div>
<ol id="ledger" class="ledger" aria-live="polite" hidden></ol>
<div id="message" class="message" role="status" aria-live="polite"></div>
</section>
</main>
<footer>
<span>Loopback only · no legacy session · no browser credential</span>
<span>QingLong 3.0 incubation / D-327</span>
<span>Loopback only · explicit reads · zero polling</span>
<span>QingLong 3.0 incubation / D-329</span>
</footer>
</div>
</body>