fix: unify supervisor review layouts and story spiral colors

Review history and context were split across recap and graph views, while the story spiral rendered saved event intervals in a single neutral color. Share the history picker and context bar, collapse new-review inputs, improve recap and responsive detail layouts, and align graph toolbars and accessible legends.

Color actual event intervals and markers by primary story, preserve neutral gaps and unassigned events, and refresh colors across themes. Include related regression coverage, layout fixtures, overlay timing and workspace-import test adjustments, and updated design and validation documentation.

Release note: Work review and story graph now share the selected review and a compact history picker. Recaps and graph details fit smaller windows, and the time spiral uses story colors for recorded event intervals without filling gaps.

docs/features/conversation-supervision/ui-design.md

@@ -8,9 +8,11 @@
 
 应用中心中的智能心跳入口升级为“监督者”，沿用既有启用、常驻与排序能力。未来应用市场使用同一应用身份。应用已启用时，停用单条自动心跳计划仍可手动回顾；关闭应用后，已打开页面显示关闭状态并禁用工作区操作。默认值及运行边界见[应用启停与执行](./logic-design.md#应用启停与执行)。
 
-当前应用页的顶层导航只使用一套共享 PageTabs：“工作回顾 / 故事线图谱 / 智能心跳 / 活动记录 / 设置”（英文活动标签为 Activity records）。智能心跳独立管理心跳计划；设置不含计划、报告或审计，也不显示整页全局徽标或独立刷新行。设置内用一排分段页签按用途分为“模型 / 回顾整理 / 故事与经验 / 建议”，每次只显示一个表单：模型含整理超时与并发；回顾整理含读取条数、每批文本量与消息数、单次响应容量；故事与经验含子线索与经验阈值及跨项目关联开关；建议含暂无进展天数。各分类单独保存，只提交本分类字段并沿用其他字段的已存值；切换分类保留未保存的草稿。故事线图谱没有数据时，空状态占满可见高度，标题、说明与“工作回顾 / 刷新”按钮水平、垂直居中，不再在上方单独放刷新行。计划范围仍在表单和每条计划内显示。整个页面只有一个一级标题；监督者 bridge 不可用时显示明确错误，设置仍可访问，不回退到旧心跳概览。共享页签保留方向键、Home/End、游标焦点和单一激活面板，窄窗口横向滚动。故事线图谱面板内另有分类页签，见[故事线图谱](#故事线图谱)。
+当前应用页的顶层导航只使用一套共享 PageTabs：“工作回顾 / 故事线图谱 / 智能心跳 / 活动记录 / 设置”（英文活动标签为 Activity records）。智能心跳独立管理心跳计划；设置不含计划、报告或审计，也不显示整页全局徽标或独立刷新行。设置内用一排分段页签按用途分为“模型 / 回顾整理 / 故事与经验 / 建议”，每次只显示一个表单：模型含整理超时与并发；回顾整理含读取条数、每批文本量与消息数、单次响应容量；故事与经验含子线索与经验阈值及跨项目关联开关；建议含暂无进展天数。各分类单独保存，只提交本分类字段并沿用其他字段的已存值；切换分类保留未保存的草稿。故事线图谱没有数据时，空状态占满剩余可见高度，标题、说明与“工作回顾”按钮居中，刷新保留在共用回顾栏。计划范围仍在表单和每条计划内显示。整个页面只有一个一级标题；监督者 bridge 不可用时显示明确错误，设置仍可访问，不回退到旧心跳概览。共享页签保留方向键、Home/End、游标焦点和单一激活面板，窄窗口横向滚动。故事线图谱面板内另有分类页签，见[故事线图谱](#故事线图谱)。
 
-工作回顾只读取统一监督结果。顶部紧凑排列范围、时间、发起与刷新控件，不重复显示“新回顾”标题和来源说明，不新增 Modal。历史结果选择与图谱入口位于正文之前，即使只有一条结果也显示选择器。新回顾工具栏、状态、历史选择和结果面板铺满监督者页面壳层的可用内容宽度，与页签左右对齐，不另设阅读宽度上限；结果内部按面板内边距排版，不再单独居中窄正文。正文使用“监督结果”标题，常显生成日期、真实范围和覆盖区间，历史结果不标为最新。工作总结按原有空行分段并保留换行；本次变化和未解决事项直接使用已有字段，不补写结论或截断正文。390px 下新请求字段与操作各占两列，结果元数据可换行。
+工作回顾与故事线图谱在主页签下方共用回顾上下文栏。历史选择器最多占 280px，收起时只显示生成日期时间，随后是“刷新”和“新回顾”，不在右侧重复范围和覆盖区间。展开复用共享锚定单选菜单，每项显示生成时间及该结果自身的真实范围、覆盖起止时间，长说明换行；当前项带选中标记，触发按钮的无障碍描述保留所选结果的完整上下文。即使只有一条结果也显示选择器。切换页签和图谱模式时，这一栏的位置、内容和选择保持一致，空态及读取失败时仍可访问。
+
+点击“新回顾”才展开范围、时间、发起按钮和重新整理菜单。表单位于上下文栏下方，以次级表面区分新请求与已选结果；再次点击收起并保留输入。工作回顾正文铺满页面壳层，不另设阅读宽度上限。容器宽于 860px 且有辅助内容时，左侧约占三分之二，显示工作总结和本次变化；右侧显示未解决事项、故事进展和经验，以弱分隔线分区。没有辅助内容时只保留全宽正文。窄屏按正文、辅助内容顺序排列为单列。摘要保留原有段落和换行，故事摘要保留“显示更多”及进入图谱的选择。
 
 新回顾运行中保留已显示结果及其日期、范围，范围、时间、发起和刷新控件保持可用。手动发起、完成、暂停、取消、无变化和失败统一使用应用 Toast；重复点击发起提示已有运行，不新建或排队。同一回顾操作的通知互相替换，关闭通知不暂停或取消执行。成功和信息沿用共享自动消失时间，错误由用户关闭。页面不保留操作状态条或错误横幅，加载历史结果、切换页签和重新进入页面不触发回顾通知。
 
@@ -86,7 +88,7 @@ Modal 按[共享表单 Modal 规则](../../../UI-DESIGN.md#615-表单-modal)复
 
 当前页面提供全局或单项目范围，以及 1、7、30 天时间区间选择。没有自动计划也能手动回顾；成功结果显示自身冻结的范围、时间和未解决事项，可选择历史结果或进入图谱。来源筛选由本次回顾范围和时间限制；图谱详情只列出所选事件的关联来源，实体或关系列出相关事件的来源。独立的来源类型选择器尚未实现。
 
-选择历史结果后，图谱读取该结果的成员和内容，标题显示其回顾区间和生成时间。切换时清空旧图谱和详情并显示加载状态，迟到请求不得替换新选择。确认、修订和移除反馈更新当前所选结果，后续自动回顾不改写旧结果。
+选择历史结果后，图谱读取该结果的成员和内容，历史菜单显示其回顾区间和生成时间。切换时清空旧图谱和详情并显示加载状态，迟到请求不得替换新选择。确认、修订和移除反馈更新当前所选结果，后续自动回顾不改写旧结果。
 
 手动“回顾当前进展”新建回顾，活动页“继续”恢复原 run；运行中再次发起按上文显示提示，停止清理结束后才能开始新回顾。失败保留上次结果、本次范围和成功批次；已取消回顾不能继续。手动操作不推进自动位置，删除报告也不重置自动位置。
 
@@ -111,11 +113,11 @@ Modal 按[共享表单 Modal 规则](../../../UI-DESIGN.md#615-表单-modal)复
 
 ## 故事线图谱
 
-中间画布列的标题区左上角提供与“工作回顾”共用的“历史结果”选择框，标签与选择框同行，不在整个三栏区域上方另占一行。首次进入默认最新结果；两页之间切换保留所选结果，从侧栏或建议显式打开的结果、故事、经验优先于默认值。选择框显示生成时间和范围；切换时清除旧来源详情，迟到请求不得覆盖新选择。没有画布的空态及读取失败状态仍保留历史入口。
+历史选择统一由上述回顾上下文栏承载，不占用画布面包屑。首次进入默认最新结果；两页之间切换保留所选结果，从侧栏或建议显式打开的结果、故事、经验优先于默认值。切换结果时清除旧来源详情，迟到请求不得覆盖新选择。平铺与时间螺旋均为上方标题工具栏、下方画布两层。标题工具栏使用相同的正文大小、内边距和淡分隔线；螺旋的“全部 / 项目 / 功能”面包屑旁放层级下拉菜单、图例 i 图标，右侧保留共享 SegmentedControl 的“平铺 / 时间螺旋”切换。窄窗口允许标题区控件换行，画布内不另设工具栏。
 
-时间螺旋使用所选回顾的时间区间与完整事件集合，半径含义见 [3D 密度规则](../story-graph/3d-concept.md)。当前故事成员按精确事件 ID 与结果求交；其余事件按来源确定的项目进入“当前无故事归属”分组，项目未知时显示“项目范围不可用”。画布常显“本次回顾事件按当前故事归属分组；未保存当时的故事归属”。故事与经验列表仍提供该范围的当前完整记录，供查看和调整。
+时间螺旋使用所选回顾的时间区间与完整事件集合，半径和区间着色规则见 [3D 密度规则](../story-graph/3d-concept.md)。当前故事成员按精确事件 ID 与结果求交；其余事件按来源确定的项目进入“当前无故事归属”分组，项目未知时显示“项目范围不可用”。图例说明“本次回顾事件按当前故事归属分组；未保存当时的故事归属”。故事与经验列表仍提供该范围的当前完整记录，供查看和调整。
 
-根视图直接显示事件点，邻近事件按画布密度聚合并显示数量；“事件”选择菜单保留当前层级的逐条入口，选择后同步左侧列表与详情。视角位于画布工具栏右上角，复用共享 SegmentedControl；工具栏四周使用 16px 内边距，视角与图例间隔 8px，窄屏按需换行。
+根视图直接显示事件点，同一主故事的邻近事件按画布密度聚合并显示数量，未归属点使用中性色。事件和经验从左侧列表选择，画布不重复提供这两种选择器。保留一个层级菜单：左侧列表选择记录并打开详情，标题区层级菜单改变画布中的项目、功能或子线索层级。菜单与面包屑均可用键盘操作。默认斜俯视，不显示视角按钮、菜单或页签；自由拖动、平移、滚轮、方向键、数字键和 Escape 返回上层操作保留。
 
 关联来源详情属于会话时，显示“打开会话”按钮，使用来源保存的会话 ID 跳转并切换到所属项目；不发送消息或启动回顾。另提供“继续讨论”，使用上述可编辑正文预览，点击发送后提交到来源会话并打开它。详情继续展示整理时保存的原文快照。会话已删除或读取失败时，沿用应用会话导航的提示；其他来源类型不显示此按钮。
 
@@ -123,13 +125,13 @@ Modal 按[共享表单 Modal 规则](../../../UI-DESIGN.md#615-表单-modal)复
 
 使用 `supervisor` 页面壳层，最大内容宽度为 `1440px`。当前生产图谱左侧为紧凑的事件、实体和关系列表，中间为 SVG 画布，右侧为详情与来源。桌面列宽为 `216px minmax(0, 1fr) 280px`，画布获得主要空间。外圈事件按发生时间排序后等距逆时针排列，不表示实际时间间隔；起止之间保留缺口和方向箭头。内部显示真实实体名称，实线仅连接实际事件与实体，虚线仅连接实际实体关系。
 
-高度：容器宽度不小于 861px 时，图谱这一行的高度等于窗口可见高度减去图谱顶部位置，并在底部保留约 24px 边距（不小于页面底部内边距），最低 660px（再矮平铺图的文字会小于 11px，这时改为页面滚动）。三栏时整页不再出现纵向滚动；左侧列表和右侧详情在这一行内独立滚动，滚动只影响自身，不带动页面。中间画布列不出现滚动条：标题栏和底部单行“事件浏览”栏之外的高度全部给图，平铺与时间螺旋一致。画布标题为“事件与知识”，下方一行小字依次显示图谱范围、时间区间、生成时间和事件/实体数，刷新为标题栏右侧图标按钮；图谱上方不再单独占一行显示范围与时间。没有图谱数据时，刷新按钮保留在页签顶部。图例默认收起，从标题栏“图例”按钮打开，浮在画布右上角，可用 X 关闭；可见事件与实体数量常驻画布左下角。两栏（861～1190px）时第一行按同样方式填满，详情换到下一行，保持自然高度并随页面滚动。单栏保持原有页面滚动和列表 320px 上限。窗口大小或图谱上方内容（提示、工具栏）变化时重新计算。
+高度按窗口剩余可见空间计算，底部保留约 24px 边距（不小于页面底部内边距）。平铺图最低 660px，时间螺旋最低 320px；低于最小高度时页面允许纵向滚动。中间画布不内部滚动，工具栏与事件浏览栏之外的空间给图；左侧列表和右侧详情各自滚动。两种视图的图例均使用共享 InlineHelp 的纯 i 图标，保留可访问名称和 title；点击或 Enter/Space 固定展开，再次点击、Escape、点击或聚焦外部关闭。平铺可见数量仍在画布角落；螺旋左下角不显示圈长及圈数，这些信息收进图例。窗口尺寸及上方表单展开、收起后重新计算可用高度。
 
-实体及其影响连线复用现有 `--graph-node-*-border` 令牌；颜色用于辅助辨认实体，不代表故事分类或确认状态。选中项加粗并突出连线，其余节点降低图形强调度但保留可读文字。详情分为名称与说明、图谱关联、确认操作和来源，来源正文按需读取。图例常显，读图说明可展开。
+实体及其影响连线复用现有 `--graph-node-*-border` 令牌；颜色用于辅助辨认实体，不代表故事分类或确认状态。选中项加粗并突出连线，其余节点降低图形强调度但保留可读文字。详情分为名称与说明、图谱关联、确认操作和来源，来源正文按需读取。图例及读图说明按需展开。
 
 画布每批最多显示 8 个事件、6 个实体；同时间事件分开排布。列表保留全部返回记录和完整名称，选择实体会定位到真实关联事件所在批次，选择关系会优先显示两端实体。滑块明确命名“事件浏览”，只切换当前事件，不还原实体历史状态，也不宣称完整历史回放。当前接口返回单条故事线，不复制 Demo 中的三条模拟故事。后续视图规划见[图谱设计](../story-graph/prd.md)。
 
-按实际内容容器宽度响应：不超过 `1190px` 时变为 `184px` 列表加画布，详情移到下方；不超过 `860px` 时变为单列，画布优先，列表限制高度并独立滚动。SVG 最小宽度为 `660px`，窄屏只在画布内部横向滚动，页面本身不横向溢出。范围、时间和操作可换行。节点、关系与事件均可从列表选择，画布节点支持 Enter、Space 和可见焦点。加载、无数据、读取失败和服务不可用各自呈现，错误提供可行的恢复说明或重试入口。
+按实际工作区容器宽度响应：宽于 `1190px` 保留三栏和左侧分类页签；`861～1190px` 为 `184px` 列表加画布，分类改用紧凑选择框。详情通过工具栏按钮或选择记录打开，作为图谱右侧的非模态面板，不在画布下方增加长区块；关闭按钮和 Escape 返回详情触发按钮。`860px` 以下画布优先，列表在下方、最高 320px，详情面板不超过画布高度。SVG 随画布缩放，390px 下页面和画布均不横向滚动；缩小后的完整名称可从列表读取。范围、时间和操作按需换行。节点、关系与事件均可从列表选择，画布节点支持 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`。