P3.A25.F1-xitune-mini-bar-subgraph-icon · XiTune chain-mini-bar 子图识别(📦 图标 + tooltip + 高亮边框)

Worker:ClaudeA · 部门:前端 P3-xitune · 预计:0.5d · 优先级:P0 关键路径起点 · 状态:dispatched · isolation:🧵 file(同 worktree 同 branch · 与 F2 SubgraphsDock 文件正交可并行)

🔍 触发与解锁链

触发:用户 2026-06-15 13:42 拍板 accept ADR-AIOS-25(supersedes ADR-23 范围迁移)· 13:50 拍板双连 start P3.A25.F1 + start P3.A25.F2(F1+F2 文件正交独立可起手)。

用户原话(verbatim · ADR-25 §1.1 范围纠正):

"我说的是在 xitune 中无法显示和打开 xilink 工程中的子图 · mini node 的结构都是针对 xitune stage 的 · 你为何去改 xilink 呢"

架构契约(ADR-25 §3.1 ① 输入/输出契约 · 业务契约 5 必填段): - 输入:linkStore.modules 中的 SubgraphInstance(isSubgraph: true + subgraphDefId)+ linkStore.subgraphDefs[defId] - 输出:chain-mini-bar 中子图节点显示 📦 emoji + name + (${moduleCount}个) 副字 + class="mini-node--subgraph" 蓝色高亮边框 + tooltip "子图 ${name} · 含 ${moduleCount} module · 双击查看内部" - 性能基线:📦 渲染延迟 ≤ 16ms(1 帧)· 50 modules 整体 chain-mini-bar 渲染 ≤ 30ms · O(N) 派生 isSubgraph 字段 - 5 类失败回退(ADR-25 §3.1 ③):def 不存在 → ⚠️ + tooltip 缺失 / loading → 普通 module 渲染 reactive 切换 / nodes 空 → 隐藏 (N个) 副字 / 多实例同 def → 复用 shortName 截断 / 嵌套子图 → 顶层渲染 BFS 视为黑盒

解锁链(本任务 zombie 后): - ✅ F3 子图详情进入路径 ready(blocked-by-F1 解除 · ClaudeA 1.0d · enterSubgraph + 面包屑 + 嵌套 mini-bar) - ✅ F4 e2e 部分解锁(还需 F2+F3 zombie · 三齐后 F4 ready)

任务定义(基于 ADR-25 §3.1)

子任务 ① · useChainMiniNodes composable 派生 isSubgraph(0.2d)

Step 1.1:NEW frontend_vue3/src/stages/xitune/composables/useChainMiniNodes.ts: - 接口:useChainMiniNodes() → reactive Ref<ChainMiniNode[]>(从 linkStore.modules + linkStore.subgraphDefs 派生) - 内部:遍历 linkStore.modules · 若 module.subgraphDefId 非空 → isSubgraph: true + 查 subgraphDefs[defId] 派生 subgraphMeta: { defId, moduleCount, name } - BFS 拉平时把 SubgraphInstance 视为黑盒 module(单节点)· 不展开内部 · 嵌套展示由 F3 接管 - 若 def 不存在 → subgraphMeta: { defId, moduleCount: 0, name: '⚠️ def 缺失' }(回退方案)

Step 1.2:暴露给 xitune/index.vue 替代现有内联 chainMiniNodes computed(若有)· 严守 ADR-25 §1.4 不破坏现有 BFS 逻辑

子任务 ② · xitune/index.vue 模板渲染分支(0.2d)

Step 2.1:更新 frontend_vue3/src/stages/xitune/index.vue 模板(line 7-58 chain-mini-bar 段)· append-only 加分支: - 现有 mini-node <div class="mini-node"> 基础上 · 加 :class="{ 'mini-node--subgraph': node.isSubgraph }" - 子图节点渲染:{{ node.isSubgraph ? '📦' : node.icon }}(emoji 切换)+ {{ node.name }}(主)+ <span v-if="node.isSubgraph && node.subgraphMeta?.moduleCount > 0" class="mn-meta">({{ node.subgraphMeta.moduleCount }}个)</span>(灰色小字副) - tooltip::title="getMiniNodeTooltip(node)"(子图返回 "子图 ${name} · 含 ${moduleCount} module · 双击查看内部" · 普通 module 保持现有 tooltip)

Step 2.2:CSS 加 .mini-node--subgraph 高亮边框(蓝色 1px solid · 圆角 4px · 不影响现有 mini-node 布局)+ .mn-meta 灰色 0.85em 副字样式

子任务 ③ · 双击行为占位(F3 接管前的 stub)(0.05d)

Step 3.1:onMiniNodeDoubleClick(node) 现有逻辑(floating.openDialog(instanceId, moduleId))前加分支: - 若 node.isSubgraph → console.log('[A25.F1] 子图节点双击占位 · F3 接管 enterSubgraph') + 不调用 floating(F3 实施时替换为 enterSubgraph 调用) - 否则保持现有 floating.openDialog 行为

⚠️ 严禁本 F1 实装 enterSubgraph + 面包屑 + 嵌套 mini-bar(那是 F3 范围 · 见 ADR-25 §4 fork 表)

子任务 ④ · 测试(0.05d)

Step 4.1:vitest 加 ≥ 5 case: - useChainMiniNodes:linkStore.modules 含 1 SubgraphInstance + 2 普通 module → ChainMiniNode[] 中 isSubgraph 准确率 100% - useChainMiniNodes:subgraphDefs[defId].nodes.length 派生 moduleCount 正确(注入 3 modules → moduleCount === 3) - useChainMiniNodes:def 不存在 → 回退 name='⚠️ def 缺失' + moduleCount=0 - xitune/index.vue 渲染:子图节点 class 含 mini-node--subgraph + emoji 显示 📦 + 副字 (3个) 可见 - xitune/index.vue tooltip:子图节点 title === "子图 EQ_A · 含 3 module · 双击查看内部"

Step 4.2:vue-tsc + build + 全测试基线零回归

完整 prompt(直接复制粘贴 ClaudeA 终端)

[U-thread] P3.A25.F1-xitune-mini-bar-subgraph-icon · ADR-25 §3.1 chain-mini-bar 子图识别(关键路径起点)
[部门] 前端 P3-xitune
[Worker CWD] d:/work/25_claude/workspace/AlgoDepartment/04_development/
[Occupies] P3.K-shared-xitune-mini-bar
[优先级] P0(0.5d · 关键路径起点 · 解锁 F3 子图详情进入路径)
[ADR] docs/08-implementation/40-aios/ADR/ADR-AIOS-25-xitune-load-xilink-subgraph.md(必读 §3.1 + §1.4 边界铁律 + §1.2 ADR-23 失败教训 + §9.1 起 ADR 前必须 grep 目标 stage)
[isolation] file(同 worktree 同 branch · 与 F2 SubgraphsDock 文件正交可并行)

[参考文档绝对路径]
  - 业务契约:ADR-25 §3.1 完整 5 必填段(① ChainMiniNode + SubgraphInstance 接口 / ② 性能 ≤16ms/帧 / ③ 5 类失败回退 / ④ 5 步操作流 / ⑤ playwright e2e 模板)
  - 用户 2026-06-15 11:30 verbatim 纠正(ADR-25 §1.1):"我说的是在 xitune 中无法显示和打开 xilink 工程中的子图 · 你为何去改 xilink 呢"
  - 用户 2026-06-15 12:00 拍板方案 1(ADR-25 §1.1):"先起 ADR-25 + 调研 xitune 现状 · 复用价值低则全 revert"
  - 教训承接标本(必读避坑):
    * ADR-25 §1.2 失败教训表(三 zombie 在 xitune 零复用根因)
    * ADR-25 §9.1 起 ADR 前必须 grep 目标 stage 现状(本 F1 Step 0 强制 grep + read 真值核查)
    * commit 27ec16d revert(2026-06-15 12:11 · -1792/+56 · ADR-23 三 zombie 全部回滚)
  - 范式 commits(worker 必读 · 强制 read 全文对齐格式):
    * a5b52de P1.A21.F1 dock-host-generalize(同 ClaudeA 前端 · isolation: file · 8 段 prompt + commit 七元组标本)
  - 现状参考(Step 0 强制 read):
    * frontend_vue3/src/stages/xitune/index.vue(line 7-58 chain-mini-bar 模板 · line 200-320 数据源 + BFS 拉平 · line 440-520 函数 + drawer 注册)
    * frontend_vue3/src/stores/linkStore.ts(subgraphDefs API 真签名 · ADR-08-R1 + ADR-16 已就位)
    * frontend_vue3/src/stages/xitune/drawers/FlowReadonlyDock.vue(单层 SVG 流图标本 · 视觉风格参考)
  - 三层分工:ADR-07 §1.3.4(L3 前端零数学 · 本任务纯 UI 渲染 + computed 派生 + emoji 文字 · 不做 DSP)

[文件正交策略](.clinerules §任务隔离类型分配准则 v1.4):
  isolation: file · 同 worktree 同 branch · 与 F2 SubgraphsDock 文件正交可并行
  本 F1 文件:frontend_vue3/src/stages/xitune/index.vue + composables/useChainMiniNodes.ts(2 文件)
  F2 文件:frontend_vue3/src/stages/xitune/drawers/SubgraphsDock.vue + SubgraphListItem.vue + LEFT_DOCK 注册 + composables/useSubgraphList.ts(独立 drawer 命名空间)
  ⚠️ F1 与 F2 唯一交叉点:LEFT_DOCK 数组(F2 加第 6 项)· 但 F1 不动 LEFT_DOCK · 完全正交

【背景】
  用户 2026-06-15 11:30 verbatim 纠正"应改 xitune 不是 xilink" · 12:00 拍板方案 1(先起 ADR-25 + 全 revert ADR-23 三 zombie)· 12:11 revert commit 27ec16d 落地(-1792/+56)· 12:12 ADR-25 起草 proposed · 13:42 用户拍板 accept · 13:50 双连 start P3.A25.F1 + F2。
  ADR-25 范围严格限定 xitune/ 命名空间(ADR-25 §1.4 边界铁律 · xilink/ 完全不动)· 仅消费 linkStore.subgraphDefs API · 不动 store schema。
  本 F1 解决"xitune chain-mini-bar 遇到 SubgraphInstance(子图实例)无特殊渲染 · 当作普通 module 拉平"的盲区(ADR-25 §1.3 调研结论)。
  教训承接:ADR-23 三 zombie(SubgraphNodeMini 80×60 svg + Tarjan SCC fan-out + 折叠面板)在 xitune 零复用 · 因与 xitune 文字+emoji + BFS 拉平 + drawer 体系不匹配 → 本 F1 严格仿写 xitune 现有 chain-mini-bar 视觉风格(文字+emoji)· 不引入 svg/algo/折叠面板。

【架构关键约束】
  ⚡ 范围铁律(ADR-25 §1.4):本 ADR 仅动 xitune/ 命名空间 · xilink/ 完全不动 · linkStore schema 不动
  🎨 视觉风格严守 xitune chain-mini-bar 文字+emoji 风格:📦 emoji + name + (N个) 灰色副字 + 蓝色 1px solid 高亮边框 · **不引入 svg 缩略图 / Tarjan 算法 / 折叠面板**(ADR-23 错误方向 · 已 revert)
  📋 派生策略 append-only:`useChainMiniNodes` composable 派生 isSubgraph + subgraphMeta 字段 · BFS 拉平时把 SubgraphInstance 视为黑盒单节点 · **不展开内部**(嵌套展示是 F3 范围)
  📋 双击行为占位:本 F1 仅 console.log 占位 + 不调用 floating · 实际 enterSubgraph 调用是 F3 范围 · **严禁本 F1 实装面包屑 + 嵌套 mini-bar + currentSubgraphId state**
  📋 三层分工(ADR-07 §1.3.4):L3 前端纯 UI 渲染 + computed 派生 · 不做 DSP 数学
  🚫 严禁动 linkStore.ts schema(ADR-08-R1 + ADR-16 已就位 · 仅消费 subgraphDefs API)
  🚫 严禁破坏 xitune 现有 BFS 拉平(line 287-320)· 现有 chain-mini-bar 多源源组堆叠 + → 单源线性逻辑保持

【执行步骤】
  Step 0 · 文件注入真值核查(强制门槛 · ADR-23 教训承接)
    - read frontend_vue3/src/stages/xitune/index.vue 全文 · 重点 line 7-58 模板 + line 200-320 数据源 + line 440-520 函数 · 确认现有 chain-mini-bar 真签名 + onMiniNodeClickWithDelay + onMiniNodeDoubleClick 真位置
    - grep "subgraphDefs" frontend_vue3/src/stores/linkStore.ts · 确认 subgraphDefs API 真签名(SubgraphDef 接口字段 + nodes 字段)
    - grep "isSubgraph\|subgraphDefId" frontend_vue3/src/stores/linkStore.ts · 确认 ModuleInstance 是否已有这些字段 · 若无则 useChainMiniNodes 内部派生
    - read frontend_vue3/src/stages/xitune/drawers/FlowReadonlyDock.vue · 确认 xitune drawer 视觉风格(头部 + 列表 · 不用 svg 缩略图)
    - 确认 ADR-23 三 zombie 已 revert(git log 查 commit 27ec16d 应在 HEAD 链上 · revert 14D + 3M -1792/+56)
    - 留 commit log:Step 0 五层核查记录

  Step 1 · useChainMiniNodes composable 派生 isSubgraph 0.2d(子任务 ①)
    - NEW frontend_vue3/src/stages/xitune/composables/useChainMiniNodes.ts
    - 派生 ChainMiniNode[] · 含 isSubgraph + subgraphMeta(defId/moduleCount/name)
    - def 不存在回退 name='⚠️ def 缺失' + moduleCount=0(ADR-25 §3.1 ③ 失败回退 1)
    - 替代 xitune/index.vue 现有内联 chainMiniNodes computed(若有)· 不破坏 BFS 拉平

  Step 2 · xitune/index.vue 模板渲染分支 0.2d(子任务 ②)
    - append-only 加 :class="{ 'mini-node--subgraph': node.isSubgraph }"
    - emoji 切换:子图 📦 / 普通 node.icon
    - 副字 v-if 渲染 (N个) 灰色小字 · 注意 moduleCount > 0 才显示
    - tooltip:子图返回 "子图 ${name} · 含 ${moduleCount} module · 双击查看内部"
    - CSS 加 .mini-node--subgraph 蓝色 1px solid 边框 + .mn-meta 灰色 0.85em

  Step 3 · 双击行为占位 0.05d(子任务 ③)
    - onMiniNodeDoubleClick 加分支:isSubgraph → console.log + 不调 floating
    - 普通 module 保持现有 floating.openDialog 行为
    - ⚠️ 严禁实装 enterSubgraph / currentSubgraphId state / 面包屑 / 嵌套 mini-bar(F3 范围)

  Step 4 · 测试 + 类型/构建/测试全绿 0.05d(子任务 ④)
    - vitest 加 ≥ 5 case
    - vue-tsc --noEmit 0 errors
    - npm run build 0 errors
    - npm run test 全过(基线 + 5 新增)

  Step 5 · 浏览器实测 + commit
    - 启动 backend(dotnet run)+ frontend(npm run dev)
    - 准备 fixture:xilink 工程含 1 子图 EQ_A(3 modules:peq+gain+delay)+ 主链路 1 EQ_A 实例 · 切到 xitune
    - 验收点(ADR-25 §3.1 ④ 用户操作流):
      ☐ xitune chain-mini-bar 显示:🎵 source → 📦 EQ_A (3个) → 📤 sink(线性)
      ☐ hover 📦 EQ_A → tooltip "子图 EQ_A · 含 3 module · 双击查看内部"
      ☐ 单击 📦 EQ_A → mini-node 高亮 + activeInstanceId 切到该子图实例(主区显示子图实例摘要 placeholder · F3 接管详情)
      ☐ 双击 📦 EQ_A → console.log "[A25.F1] 子图节点双击占位 · F3 接管 enterSubgraph"(F3 实装后替换)
      ☐ 测试 def 不存在场景(手动改 fixture 删 def)→ 显示 ⚠️ def 缺失 · 不崩溃
    - git add . && git commit -m "feat(xitune/mini-bar): P3.A25.F1 chain-mini-bar 子图识别(📦 + tooltip + 高亮边框)

      用户 2026-06-15 13:42 拍板 accept ADR-AIOS-25(supersedes ADR-23 范围迁移)· 13:50 双连 start F1+F2。
      F1 本任务(ADR-25 §3.1):
      ① useChainMiniNodes composable 派生 ChainMiniNode[] + isSubgraph + subgraphMeta(defId/moduleCount/name)+ def 缺失回退
      ② xitune/index.vue 模板 append-only 加 mini-node--subgraph class + 📦 emoji 切换 + (N个) 副字 + tooltip
      ③ CSS 加 .mini-node--subgraph 蓝色 1px solid 边框 + .mn-meta 灰色 0.85em
      ④ 双击行为占位(console.log · F3 接管 enterSubgraph · 严守边界)
      ⑤ vitest +5 case · vue-tsc + build 全绿 · 基线零回归

      解锁 F3 子图详情进入路径(blocked-by-F1 解除 · ClaudeA 1.0d)
      ADR-23 教训承接:严守 xitune 文字+emoji + BFS 拉平体系 · 不引入 svg/Tarjan/折叠面板

      [step=5/5] [pid=P3] [uid=P3.A25.F1-xitune-mini-bar-subgraph-icon] [type=fork] [isolation=file]
      [occupies=P3.K-shared-xitune-mini-bar] [files=2] [ipc=none]
      [adr=ADR-AIOS-25 §3.1 chain-mini-bar 子图识别 + §1.4 边界铁律 + §1.2 ADR-23 失败教训承接]"

【验收】
  ☐ Step 0 文件注入真值核查通过(read xitune/index.vue 全文 + grep linkStore subgraphDefs/isSubgraph/subgraphDefId + read FlowReadonlyDock + 确认 27ec16d revert · commit log 留痕)
  ☐ Step 1 useChainMiniNodes composable 派生 isSubgraph + subgraphMeta 准确率 100% · def 缺失回退正确
  ☐ Step 2 xitune/index.vue mini-node--subgraph class + 📦 emoji + (N个) 副字 + tooltip · 现有 BFS 拉平零回归
  ☐ Step 3 双击行为占位 console.log · 不调用 floating(F3 接管前)
  ☐ Step 4 vitest +5 case 全过 · vue-tsc + build 0 errors · 全测试基线零回归
  ☐ Step 5 浏览器实测 5 验收点全过(线性 mini-bar + tooltip + 单击高亮 + 双击占位 log + def 缺失回退)
  ☐ commit message 含 7 元组 trailer + ADR-25 §3.1 + §1.4 + §1.2 引用

【禁止】
  ❌ 禁止跳过 Step 0 文件注入真值核查(ADR-23 失败根因:未 grep 目标 stage 真签名 · ADR-25 §9.1 强制铁律)
  ❌ 禁止动 xilink/ 任何文件(ADR-25 §1.4 范围铁律 · 本 ADR 仅动 xitune/ 命名空间)
  ❌ 禁止动 linkStore.ts schema(仅消费 subgraphDefs API · ADR-08-R1 + ADR-16 已就位 · 不动 store)
  ❌ 禁止引入 svg 缩略图 / Tarjan SCC 算法 / 折叠面板(ADR-23 错误方向 · 已 revert · 严守 xitune 文字+emoji 风格)
  ❌ 禁止超前实施 F3 范围(currentSubgraphId state / 面包屑 / 嵌套 mini-bar / enterSubgraph 实装 · 那是 F3 fork 范围)
  ❌ 禁止破坏 xitune 现有 BFS 拉平(line 287-320 多源源组堆叠 + → 单源线性 · 严守现有逻辑)
  ❌ 禁止破坏现有 onMiniNodeClickWithDelay 单击 200ms 切主区行为(本 F1 仅追加 isSubgraph 渲染 + 双击 stub 占位)
  ❌ 禁止跳过 vitest +5 case(验收硬门槛)
  ❌ 禁止 commit 缺三元组 trailer(.clinerules v2.0 铁律)
  ❌ 禁止嵌入完整 SFC > 60 行 / TS interface > 5 行(.clinerules v2.0)· composable 拆独立 ts

解锁链(本任务 zombie 后)

✅ xitune chain-mini-bar 识别 SubgraphInstance · 📦 图标 + tooltip + 高亮边框上线
✅ 用户三件套盲区第 1 件解决(子图在 xitune 可见 · 但还不能进入查看内部)
✅ F3 子图详情进入路径 ready(blocked-by-F1 解除 · ClaudeA 1.0d · enterSubgraph + 面包屑 + 嵌套 mini-bar + F1+F2 双击接管)
⏳ F4 e2e 部分解锁(还需 F2+F3 zombie · 三齐后 F4 ready · ClaudeC 0.5d)

风险评估

风险	缓解
linkStore.subgraphDefs schema 与 ADR-25 §3.1 假设不一致(SubgraphDef.nodes 字段名 / 类型)	Step 0 强制 grep + read linkStore.ts 真签名 · 不猜 · 若实际字段不同则 fork 内适配派生(append-only)· ADR-25 §5 风险 1 已备案
ModuleInstance 没有 isSubgraph + subgraphDefId 字段(ADR-16 SubgraphRuntime 实际 schema 不同)	Step 0 grep 确认 · 若缺则 useChainMiniNodes 内部用 typeId / moduleId 启发式判断(查 subgraphDefs 含该 instanceId 的 def)· 不动 store
xitune 现有 BFS 拉平对 SubgraphInstance 处理特殊(line 287-320)	本 F1 仅追加 isSubgraph 派生字段 · BFS 视子图为黑盒单节点 · 不改 BFS 逻辑 · vitest 验证拉平结果与基线一致
多 SubgraphInstance 同 def 实例 instanceId 冲突(ADR-25 §3.1 ③ 回退 4)	复用现有 shortName(mod) 截断逻辑 · 各实例独立显示 📦 + name#1/#2 后缀 · 不破坏现有逻辑
子图嵌套(子图内含子图 · ADR-16 支持)	xitune chain-mini-bar 仅顶层渲染 SubgraphInstance · 内部嵌套靠 F3 接管 · 本 F1 BFS 视为黑盒(不展开)
ADR-23 三 zombie revert 未完全清除(残留 SubgraphNodeMini.vue / 折叠面板代码)	Step 0 git log 查 27ec16d 在 HEAD 链上 · grep "SubgraphNodeMini\|Tarjan\|fan-out" 应 0 命中 · 若残留则 fork 内补 revert(append-only · 不破坏现有 xitune)
ClaudeA 排队膨胀(本 F1 0.5d + F2 0.7d + F3 1.0d + 后续 ADR-21-R1 4 hotfix 3.8d 共 6.0d 串行)	F1+F2 文件正交可并行 · F3 接 F1 后串行 · F4 e2e ClaudeC · ADR-21-R1 hotfix 排队后接力 · 用户已知排期
用户期望"双击进入新 doc tab"(ADR-23 设计) vs 本 ADR"嵌套展示+面包屑"	用户已 2026-06-15 12:00 拍板方案 1(嵌套展示 · ADR-25 §5 风险 5)· 本 F1 双击占位 · 实际 enterSubgraph 由 F3 实装 · 若用户后续要求新 tab 再修订 R1

历史

时间	事件	hash
2026-06-15 13:50	dispatched(用户 13:42 accept ADR-AIOS-25 · 13:50 双连 start F1+F2 · ClaudeA F8 ADR-15 0.5d 🏆 收尾后接力 · 关键路径起点 0.5d 解锁 F3)	—