人工智能AI Agent多智能体Agent 编排代码智能体CLI【免费下载链接】openrigMulti-agent harness that runs Claude Code and Codex together as one system项目地址https://gitcode.com/GitHub_Trending/op/openrig点击查看免费下载本文基于 openrig 仓库 docs/as-built/ui/topology.md 展开结合packages/ui/src/components/topology/与packages/ui/src/lib/下的源码实现系统讲解/topology路由家族host → rig → pod → seat的可视化拓扑面宿主混合图Hybrid Graph、表/终端/树视图、活动环ActivityRing与热土豆边HotPotatoEdge的视觉语言以及终端预览浮层与拓扑导航/遮罩层契约。读者读完可掌握这套多 Agent 编排系统观测面的组件结构、数据流与可扩展点并能直接定位到对应源码文件继续深入。Topology 是什么在 openrig 中Topology 是一个位于/topology路由家族的 scoped workspace提供 graph图、table表、terminal终端三种视图是操作者观察host → rig → pod → seat层级结构的实时画面。本文档对应的实现版本为包版本0.3.1验证基线为源码 HEAD7eaf524c。1. 拓扑面由哪些组件构成Topology 的全部前端实现集中在packages/ui/src/components/topology/目录。文档原文列出的组件清单在 HEAD 下已逐一重新确认其中有两个组件的文件位置在ui.md的记载中需要勘误HybridAgentNode与HybridPodGroupNode并非顶层文件而是HybridTopologyNodes.tsx内部的导出HybridPodGroupNode为memo(...)位于HybridTopologyNodes.tsx:94HybridAgentNode为memo(HybridAgentNodeInner, ...)位于:272。组件名准确文件位置已合并。1.1 组件清单re-confirmed at HEAD组件文件职责HostMultiRigGraph.tsxpackages/ui/src/components/topology/HostMultiRigGraph.tsx宿主级混合 React Flow 图多 rig 单画布HybridTopologyNodes.tsx同目录导出HybridAgentNode紧凑 Agent 卡片运行时徽章、上下文百分比、Token 总量、活动状态、终端预览、CMUX 操作与HybridPodGroupNode软虚线 Pod 外框RigGroupNode.tsx同目录软 Rig 外框带注册标记与聚合活动ActivityRing.tsx同目录active / needs-input / blocked 活动环卡片活动样式见activity-card-visuals.tsHotPotatoEdge.tsx同目录方向性队列移动边动画TopologyTableView.tsx同目录拓扑数据的密集表格镜像TopologyTerminalView.tsx同目录面向终端的拓扑状态视图TopologyTreeView.tsx同目录树形导航视图TopologyViewModeTabs.tsx同目录graph/table/terminal/tree 模式切换TerminalPreviewPopover.tsx同目录黑色玻璃质感的快速终端预览通过 Portal 悬浮于图之上LaunchCmuxButton.tsx同目录hover/focus 的 CMUX 启动动作ScopePages.tsx同目录host/rig/pod/seat 作用域页面包装器topology-overlay-context.tsx同目录TopologyOverlayProviderexpanded-rig 状态注DESIGN.md的 TopologyL205–216列出的导出原语与源码全部对得上TopologyTreeView/TopologyViewModeTabs/LaunchCmuxButton在源码中存在但不在 DESIGN.md 原语清单内——这是设计文档的品牌原语清单与完整组件清单的范围差异不是漂移。1.2 混合节点如何渲染HybridTopologyNodes.tsx中HybridAgentNodeData携带了完整的节点数据契约字段包括logicalId、role、runtime、model、status、nodeKindagent | infrastructure、startupStatuspending | ready | attention_required | failed、canonicalSessionName、contextUsedPercentage、contextFresh、contextTotalInputTokens/contextTotalOutputTokens、agentActivity、terminalActive、identityVerdictOPR.0.4.3.19 存活身份判定mismatch/pane_missing 会覆盖terminalActive避免绿点误渲染为活跃/running、currentQitems、rigId、activityRing与reducedMotion。上下文百分比有明确的视觉分级规则contextClass 80红色text-red-600、 60琥珀色text-amber-600、其余绿色text-green-700当contextFresh false时整体加opacity-50表示已过期。核心角色architect/lead/orchestrator由isCoreRole判定。HybridPodGroupNode的memo比较器只比较podDisplayName、podNamespace、podId、logicalId、agentCount五个字段——这是 V0.3.1 bug-fix slice topology-perf 的图 CPU 优化Pod 组节点内容只依赖标签字段与 Agent 计数拓扑活动数据每次 bump 都会导致 data 引用变动但可见内容不变因此按渲染读取的字段做记忆化。2. Topology 契约contracts文档第 2 节来自architecture.md§2 Current topology UI 与ui.mdImportant topology contracts并在 HEAD 上对照源码行为重新确认。以下五条契约是理解整个拓扑面的关键导航统一收敛到 seat 详情graph / table / tree 三种导航最终都解析到 seat 详情 URL/topology/seat/$rigId/$logicalId。在packages/ui/src/routes.tsx中拓扑路由家族为topologyRoute/topologyroutes.tsx:106-110、topologyRigRoute/topology/rig/$rigId:112-116、topologyPodRoute/topology/pod/$rigId/$podName:118-122、topologySeatRoute/topology/seat/$rigId/$logicalId:124-128最终在routes.tsx:542-545挂载到根路由。跨 rig 节点 ID 前缀宿主级图使用跨 rig 节点 ID 前缀实现多 rig 单画布。在packages/ui/src/lib/hybrid-layout.ts中前缀分隔符为PREFIX_DELIMITER ::hybrid-layout.ts:4topology-activity.ts的localNodeId通过nodeId.indexOf(::)截取::之后的本地 ID 用于会话索引解析topology-activity.ts:451-454。expanded-rig 状态由TopologyOverlayProvider持有topology-overlay-context.tsx将展开状态提升到 provider 作用域expandedRigs: ReadonlyMapstring, boolean原因是在早期实现中HostMultiRigGraph把expanded作为本地useState而拓扑路由是兄弟路由而非嵌套路由——直接输入/topology/rig/$idURL 时渲染的是RigScopePage而非HostMultiRigGraph导致自动展开 effect 永远不触发死代码 bug。修复方案是把expandedMap 提升进始终挂在 AppShell 下的 provider并通过parseActiveRigId(pathname)正则匹配/topology/seat/...、/topology/pod/...、/topology/rig/...三种路径形态在 provider 作用域执行 URL 驱动的自动展开。图数据只对展开的 rig 做懒加载HostMultiRigGraph.tsx使用useQueries仅在 rig 展开时 enabled。紧凑 Agent 卡片的三重信号上下文百分比、Token 总量、活动卡片着色ActivityRing 活动样式类共同呈现 active / needs-input / blocked。activity-card-visuals.ts提供getActivityCardSignal活动环优先回退到activityState推断与getActivityCardClasses按状态与 flash 生成activity-card-{active,needs-input,blocked,source-flash,target-flash,reduced-motion}样式类。HotPotatoEdge的方向性动画与无障碍降级在图的缩放级别下动画化队列移动方向prefers-reduced-motion偏好会移除脉冲/行进动画保留静态状态信号。HotPotatoEdge.tsx中有 packet 时用animateMotion沿贝塞尔路径驱动铅脉冲lead pulse圆点calcModesplinekeySplines0.2 0 0 1实现平滑缓动reducedMotion为 true 时改为在targetX/targetY处渲染静态圆点并标记data-reduced-motiontrue。跨 rig 边crossRig使用更细的描边1.25 / 1.5与灰调#a8a29e/fill-outlinerig 内边则用翡翠绿#10b981/fill-emerald-600。终端预览动作遵循 hover/focus-visible 触发TerminalPreviewPopover必须通过createPortal逃离 React Flow 的层叠上下文悬浮于画布之上并保持在视口内。TerminalPreviewPopover.tsx定义了POPOVER_GAP 8、POPOVER_MARGIN 8、FALLBACK_POPOVER_WIDTH 408、FALLBACK_POPOVER_HEIGHT 240等定位常量并使用自定义事件openrig:topology-terminal-preview作为跨层通信通道。3. 布局与品牌辅助Layout helpers拓扑布局由packages/ui/src/lib/下的帮助函数计算HEAD 上已重新确认graph-layout.ts— 通用图布局hybrid-layout.ts— 混合布局rig 内 pod 子框 紧凑 agent 叶子multi-rig-layout.ts— 多 rig 外层布局topology-activity.ts— 拓扑活动状态推导与热土豆事件解析activity-visuals.ts— 活动视觉辅助hybrid-layout.ts使用 dagre 做分层布局并导出整套尺寸常量作为视觉契约的一部分常量值含义HYBRID_AGENT_WIDTH / HEIGHT166 / 94紧凑 Agent 节点尺寸HYBRID_POD_HEADER_HEIGHT38Pod 头部高度HYBRID_POD_PADDING_X / _BOTTOM28 / 22Pod 内边距HYBRID_POD_MIN_WIDTH188Pod 最小宽度HYBRID_RIG_HEADER_HEIGHT78Rig 头部高度HYBRID_RIG_PADDING_X / _BOTTOM42 / 40Rig 内边距HYBRID_RIG_MIN_WIDTH320Rig 最小宽度HYBRID_COLLAPSED_RIG_WIDTH / HEIGHT280 / 118折叠 Rig 尺寸HYBRID_OUTER_MARGIN96外层间距HYBRID_OUTER_LANE_COUNT3外层轨道数HYBRID_CROSS_RIG_STROKE_DASH6 7跨 rig 边虚线样式布局流程HostMultiRigGraph.tsx头注释为先用 dagre 助手把每个展开的 rig 布局为软框包含 pod 子框与紧凑 agent 叶子再在宿主画布上布局 rig 外框。默认状态是 rig 全部展开打开拓扑即呈现完整舰队画布显式折叠状态持久化在TopologyOverlayProvider中操作者可从画布控件折叠/展开每个 rig。折叠后Collapse All恢复低扇出low-fan-out行为。品牌来源契约卡片上的运行时/工具身份来自中央的runtime-brand.ts/tool-brand.tsRuntimeMark.tsxpackages/ui/src/components/graphics/RuntimeMark.tsx其中RuntimeBadge与ToolMark被HybridTopologyNodes.tsx直接导入。这是 DESIGN.md Do not 规则的重申不要在拓扑卡片上复制品牌逻辑一律复用中央品牌源。4. 活动状态推导与热土豆事件流源码级纵深4.1 活动环状态机topology-activity.ts定义了ActivityRingState active | needs_input | blocked | idle与ActivityFlash source | target | null。状态推导函数getBaselineActivityState遵循严格优先级startupStatus failed→blockedstartupStatus attention_required→needs_inputagentActivity?.state needs_input→needs_inputterminalActive true→activeterminalActive false→idleSlice 15 的terminal-active原语tmux 字节流是 active/idle 动画的权威来源独立于hasAssignedWork无 terminal-active 信号时回退到 hook 事件UserPromptSubmit等驱动的agentActivity.state running→active否则idle关键设计约束IMPL-PRD §2.3 非推断契约禁止从currentQitems排队工作存在推断 active——排队即活跃的混淆是已报告的 bug。排队工作由 UI 的hasAssignedWork专属 affordance如 n queued单独渲染不并入活跃动画。computeActivityVisual叠加最近活动信号节点活动 TTL 为TOPOLOGY_NODE_ACTIVITY_TTL_MS 10_000TTL 内用strongestActivityState排序 blocked needs_input active idle取 baseline 与 recent 中的更强状态source flash 窗口HOT_POTATO_SOURCE_FLASH_MS 650target flash 窗口HOT_POTATO_TARGET_FLASH_MS 900flash 优先渲染 target。4.2 热土豆事件解析parseTopologyActivityEvent将后端事件类型映射为视觉信号支持的事件与映射事件类型视觉映射agent.activity会话按 activity.state → active / needs_input / idlequeue.created源会话 activesource flash目标会话 activetarget flashqueue.handed_off同上fromSession → toSessionqueue.claimed目标会话 activetarget flashqueue.updatedtoState blocked→ blocked否则 activeactor closureTarget 生成 packetqueue.unclaimed目标会话 activeqitem.fallback_routedoriginalDestination sourcererouteDestination targetqitem.closure_overdue目标会话 blockedtarget flashinbox.absorbed/inbox.deniedsender sourcedestination needs_inputtarget flashmakeHotPotatoPacket负责构造数据包若源/目标 rig 都存在且不同则crossRig true时长取HOT_POTATO_CROSS_RIG_DURATION_MS 1_600跨 rig或HOT_POTATO_WITHIN_RIG_DURATION_MS 1_100rig 内packet ID 形如${createdAt}-${sequence}-${sourceNodeId}-${targetNodeId}。applyHotPotatoEdges按sourceNodeId \u0000 targetNodeId会话对键匹配已有边并装饰为type: hotPotato未匹配到边的 packet 会动态补建一条不可选、不可聚焦的临时边interactionWidth: 8保证队列移交的可视化不依赖静态边是否存在。动画尾迹 TTL 为HOT_POTATO_TRAIL_TTL_MS 3_000。buildTopologySessionIndex为节点与多种会话键建立双向索引大小写不敏感、支持 localId、logicalId、logicalIdrigToken等复合键resolveTopologySession实现 OPR.0.4.6.MH1 FR-8 的共享解析契约贪婪取第一个之前的 rig 段是热土豆动画把会话映射到图节点的关键枢纽。4.3 测试验证packages/ui/test/topology-view-mode.test.tsx验证了 SC-10 的 load-bearing 约束view-mode 标签页是原位 React 状态而非独立 URL——切换 graph/table/terminal 标签时 URL 保持不变早期 attempt-2 用/topology/host/table等独立 URL 的做法被废弃。测试用最小路由树AppShell HostScopePageRigScopePageRigScopePage严格拼写/topology/rig/$rigId以保留参数绑定挂载真实组件。同目录的topology-view-mode-tabs-trailing.test.tsx、topology-perf-table-large-n.test.tsx、topology-tab-progressive.test.tsx分别覆盖标签页尾部行为、大 N 表格性能与渐进式终端标签。5. 路由家族与 Shell 集成/topology是 openrig UI 的六大 rail 目的地之一Dashboard/、Topology/topology、For You/for-you、Project/project、Library/specs、Settings/settings详见 shell-and-routing.md。拓扑作用域路由家族完整形态/topology— 宿主拓扑host 级多 rig 画布/topology/rig/$rigId— rig 作用域/topology/pod/$rigId/$podName— pod 作用域/topology/seat/$rigId/$logicalId— seat 作用域实时节点详情三种导航的最终收敛点Shell 集成细节topology-overlay-context.tsx头注释当活动 view-mode 为 GRAPH 时Explorer 渲染为 vellum 半透明遮罩层悬浮于画布之上中心工作区延伸到视口左缘下方当为 TABLE / TERMINAL 或非拓扑目的地时Explorer 不透明默认行为中心工作区从 Explorer 右缘开始。view-mode 标签栏固定锚定在left 48px(rail) 280px(explorer) 328px var(--explorer-anchor-left)与模式无关因此切换视图时标签从不跳动。6. 队列移交的语义底座热土豆边可视化的队列移动对应 coordination-primitive.md 描述的协调原语queue.created、queue.handed_off、queue.claimed、queue.updated、queue.unclaimed等事件即 Agent 之间工作项qitem移交的生命周期。在拓扑面上每一次移交都会产生一个从源会话节点到目标会话节点的热土豆 packet——跨 rig 移交用更细的灰线 更慢的 1600ms 时长表达远距离投递rig 内移交用更粗的翡翠绿线 1100ms 时长表达近距离接力源端 650ms 红色/绿色 flash 表示交出目标端 900ms flash 表示接到。这条视觉语言让操作者无需打开日志即可在拓扑图上看见工作流在 host → rig → pod → seat 之间流转。7. 相关文档与进一步阅读shell-and-routing.md —/topology路由家族与 Shell 装配project-and-for-you.md — 兄弟观测面coordination-primitive.md — 热土豆边可视化的队列移动语义ui.md — UI 总体说明含 Important topology contractsDESIGN.md — 品牌/视觉规则拓扑卡片品牌源契约所在源码根packages/ui/src/components/topology/、packages/ui/src/lib/{graph,hybrid,multi-rig}-layout.ts、packages/ui/src/lib/topology-activity.ts、packages/ui/src/lib/activity-visuals.ts赞分享人工智能AI Agent多智能体Agent 编排代码智能体CLI【免费下载链接】openrigMulti-agent harness that runs Claude Code and Codex together as one system项目地址https://gitcode.com/GitHub_Trending/op/openrig点击查看免费下载相关推荐FancyScrollViewUnity 中实现高度灵活动画的滚动视图组件FancyScrollViewUnity 中实现高度灵活动画的滚动视图组件 还在为 Unity 中单调的滚动列表而烦恼吗想要实现流畅的动画效果却苦于原生 SUI组件移动开发Spacedrive 文件列表视图ListView实现解析基于 TanStack Table 的可排序列与虚拟滚动Spacedrive 文件列表视图ListView实现解析基于 TanStack Table 的可排序列与虚拟滚动 本指南围绕 Spacedrive 仓库桌面应用移动开发后端存储数据同步bittensor链上数据交互实战Subtensor类查询与交易操作指南bittensor链上数据交互实战Subtensor类查询与交易操作指南 Bittensor作为一个去中心化的神经网络协议其核心功能通过链上数据交互实现。本区块链人工智能上一篇10分钟搭建中文NLP服务fnlp工具包SpringBoot集成教程下一篇UnattendedWinstall故障排除终极指南从安装失败到配置无效的完整解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
