# 监督者 UI 设计

日期：2026-09-16。状态：目标设计，遵循根目录 [UI-DESIGN.md](../../../UI-DESIGN.md)。需求对应[监督者应用产品设计](./supervisor-prd.md) FR-S1 至 FR-S9。

## 应用入口

应用中心中的智能心跳入口升级为“监督者”，沿用既有启用、常驻与排序能力。未来应用市场使用同一应用身份。用户停用自动心跳时仍可手动回顾；停用应用时明确说明关联自动计划的处理，既有结果仍保留。停用与运行中任务的具体行为需在逻辑设计中确定。

当前应用页使用共享 PageTabs 展示“工作回顾 / 故事线图谱 / 设置”。设置保留自动唤醒概览、建议、报告与记录、计划配置。整个页面只有一个一级标题；监督者 bridge 不可用时显示明确错误，设置仍可访问，不回退到旧心跳概览。

## 工作回顾

当前页面提供全局或单项目范围，以及 1、7、30 天时间区间选择。没有自动计划也能手动回顾；成功结果显示自身冻结的范围、时间和未解决事项，可选择历史结果或进入图谱。来源筛选由本次回顾范围和时间限制；图谱详情只列出所选事件的关联来源，实体或关系列出相关事件的来源。独立的来源类型选择器尚未实现。

选择历史结果后，图谱读取该结果的成员和内容，标题显示其回顾区间和生成时间。切换时清空旧图谱和详情并显示加载状态，迟到请求不得替换新选择。确认、修订和移除反馈更新当前所选结果，后续自动回顾不改写旧结果。

手动“回顾当前进展”是主要操作，生成中禁用重复提交并显示进行中文案。失败保留上次结果与本次请求范围，提供重试。取消、无变化结果与部分来源遗漏的专门状态仍属于目标设计，未在当前界面承诺。

## 会话侧栏

右侧通用助手工作栏中的监督卡片展示“监督反馈”，沿用现有[工作栏设计](../assistant-workbar/prd.md)的布局和执行边界。当前支持 Conversation/Task：有选中任务时跟随任务，否则跟随会话；“固定监督目标”保存当前目标，切换聊天后保持，取消固定恢复跟随。卡片显示目标、结果真实范围、回顾区间和摘要，可刷新并查看匹配来源；无目标或无匹配结果显示空态。Experiment 尚未接入。

有匹配结果时提供“在图谱中查看”，打开现有监督者页面的图谱页签并读取该结果；无匹配结果不显示入口。按钮保留原生键盘操作，进入后焦点落在图谱页签，继续使用共享 PageTabs 的方向键导航。固定目标不因跳转改变；再次点击相同或不同结果均重新定位，包括页面缓存后再次进入。结果不可用时显示错误并重试原 ID，不展示默认最新结果。

当前“继续讨论”预览实际发送会话名称、ID 和上下文，确认后发送到该会话；固定任务使用其关联会话，无法确定发送会话时禁用。切换目标使旧来源请求和预览失效。编辑预览中的引用仍属后续工作。

## 故事线图谱

使用 `supervisor` 页面壳层，最大内容宽度为 `1440px`。当前生产图谱左侧为紧凑的事件、实体和关系列表，中间为 SVG 画布，右侧为详情与来源。桌面列宽为 `216px minmax(0, 1fr) 280px`，画布获得主要空间。外圈事件按发生时间排序后等距逆时针排列，不表示实际时间间隔；起止之间保留缺口和方向箭头。内部显示真实实体名称，实线仅连接实际事件与实体，虚线仅连接实际实体关系。

实体及其影响连线复用现有 `--graph-node-*-border` 令牌；颜色用于辅助辨认实体，不代表故事分类或确认状态。选中项加粗并突出连线，其余节点降低图形强调度但保留可读文字。详情分为名称与说明、图谱关联、确认操作和来源，来源正文按需读取。图例常显，读图说明可展开。

画布每批最多显示 8 个事件、6 个实体；同时间事件分开排布。列表保留全部返回记录和完整名称，选择实体会定位到真实关联事件所在批次，选择关系会优先显示两端实体。滑块明确命名“事件浏览”，只切换当前事件，不还原实体历史状态，也不宣称完整历史回放。当前接口返回单条故事线，不复制 Demo 中的三条模拟故事。后续视图规划见[图谱设计](../story-graph/prd.md)。

按实际内容容器宽度响应：不超过 `1190px` 时变为 `184px` 列表加画布，详情移到下方；不超过 `860px` 时变为单列，画布优先，列表限制高度并独立滚动。SVG 最小宽度为 `660px`，窄屏只在画布内部横向滚动，页面本身不横向溢出。范围、时间和操作可换行。节点、关系与事件均可从列表选择，画布节点支持 Enter、Space 和可见焦点。加载、无数据、读取失败和服务不可用各自呈现，错误提供可行的恢复说明或重试入口。

隔离视觉验证使用 `tests/support/supervisor-layout-regression.tsx` 渲染生产 React 组件；所有输入标为模拟 fixture，不读取用户数据库或调用模型。`tests/supervisor-layout.electron.test.ts` 启动 Vite 与 Electron，通过 `executeJavaScript` 测量布局、`capturePage` 截图，覆盖 1440、1024、390px、浅深主题、长名称、密集事件和异常状态。可通过 `GOODBUDDY_SUPERVISOR_ARTIFACTS` 保留截图；交互预览入口为 `node tests/support/supervisor-preview.mjs`。