@sakki_chin/dsh-codex-orchestrate 1.0.0

package/client/components/WorkflowRail.jsx

@@ -0,0 +1,414 @@
+import React from 'react'
+import { styles } from '../styles.js'
+
+const CARD_WIDTH = 190
+const CARD_HEIGHT = 76
+const COLUMN_GAP = 58
+/* 行距同时决定「行间通道」的高度：够宽才能在一个通道带里放两条横向段而不贴卡片 */
+const ROW_GAP = 28
+const ROW_PITCH = CARD_HEIGHT + ROW_GAP
+/* 竖直段不放在列间隙正中，而是各自贴近自己那一侧：
+   出口贴着源列、入口贴着目标列。否则「第 N 列的右侧间隙」与「第 N+1 列的左侧间隙」
+   是同一个间隙，两条无关的边会在同一 x 上叠出一条假的长连线。 */
+const EXIT_INSET = COLUMN_GAP * 0.3
+const ENTRY_INSET = COLUMN_GAP * 0.3
+/* 通道 c 位于第 c-1 行与第 c 行之间横贯全图的空隙里（列顶部对齐后各行 y 一致，
+   所以这个空隙在每一列都是无卡片的）。长边的横向段只允许落在通道里。 */
+const channelYOf = c => c * ROW_PITCH - ROW_GAP / 2
+
+const STATUS_TEXT = {
+  pending: '待调度',
+  blocked: '等待前置',
+  queued: '排队中',
+  running: '运行中',
+  completed: '已完成',
+  failed: '失败',
+  cancelled: '已取消',
+}
+
+const STATE_TEXT = { running: '运行中', completed: '已完成', failed: '有失败' }
+
+/* 导出纯几何函数，供几何自证脚本直接调用真实实现（见 scripts/verify-edge-routing.mjs） */
+export function layoutWorkflow(nodes) {
+  const byId = new Map(nodes.map(node => [node.id, node]))
+  const depths = new Map()
+  const depthOf = (node, trail = new Set()) => {
+    if (depths.has(node.id)) return depths.get(node.id)
+    if (trail.has(node.id)) return 0
+    const nextTrail = new Set(trail).add(node.id)
+    const parents = (node.dependsOn || []).map(id => byId.get(id)).filter(Boolean)
+    const depth = parents.length
+      ? Math.max(...parents.map(parent => depthOf(parent, nextTrail) + 1))
+      : 0
+    depths.set(node.id, depth)
+    return depth
+  }
+
+  const layers = []
+  for (const node of nodes) (layers[depthOf(node)] ||= []).push(node)
+
+  const order = new Map()
+  layers.forEach((layer, depth) => {
+    if (depth) {
+      layer.sort((a, b) => {
+        const score = item => {
+          const parentRows = (item.dependsOn || []).map(id => order.get(id)).filter(Number.isFinite)
+          return parentRows.length
+            ? parentRows.reduce((sum, row) => sum + row, 0) / parentRows.length
+            : Number.MAX_SAFE_INTEGER
+        }
+        return score(a) - score(b)
+      })
+    }
+    layer.forEach((node, row) => order.set(node.id, row))
+  })
+
+  const maxRows = Math.max(1, ...layers.map(layer => layer.length))
+  const contentBottom = (maxRows - 1) * ROW_PITCH + CARD_HEIGHT
+  const width = Math.max(CARD_WIDTH, layers.length * CARD_WIDTH + Math.max(0, layers.length - 1) * COLUMN_GAP)
+
+  /* 顶部对齐而非逐列居中：行 r 在所有列都落在同一个 y，
+     「行间空隙」才成为横贯全图的无卡片通道——这是长边能就近横移的前提。 */
+  const positions = new Map()
+  layers.forEach((layer, column) => {
+    layer.forEach((node, row) => positions.set(node.id, {
+      x: column * (CARD_WIDTH + COLUMN_GAP),
+      y: row * ROW_PITCH,
+      width: CARD_WIDTH,
+      height: CARD_HEIGHT,
+    }))
+  })
+
+  /* 先按固定顺序枚举边（节点序 → dependsOn 序），保证同一份 nodes 每次结果一致。 */
+  const spans = []
+  for (const target of nodes) {
+    for (const dependencyId of target.dependsOn || []) {
+      const from = positions.get(dependencyId)
+      const to = positions.get(target.id)
+      if (!from || !to || to.x <= from.x) continue   /* 同列/逆向（环形依赖）不画 */
+      const long = to.x - from.x > CARD_WIDTH + COLUMN_GAP + 1
+      spans.push({
+        key: `${dependencyId}->${target.id}`,
+        sourceId: dependencyId,
+        targetId: target.id,
+        long,
+        fromRow: Math.round(from.y / ROW_PITCH),
+        toRow: Math.round(to.y / ROW_PITCH),
+      })
+    }
+  }
+
+  /* 长边走 min(源行,目标行)+1 号通道——离两端最近、且一定夹在两端之间的空隙，落差最小。
+     同通道的长边**共用同一高度、允许重叠**，做成总线（bus）而不是逐条避让：
+     逐条避让会把冲突边一路推到更远的通道带，图上既稀疏又空出一大片。
+     只要方向相同就压在一起，视觉上读作一条干线段，而不是两三条平行线。 */
+  const usedChannels = new Set()
+  let maxChannelY = -Infinity
+  for (const span of spans) {
+    if (!span.long) continue
+    const c = Math.min(span.fromRow, span.toRow) + 1
+    const y = channelYOf(c)
+    span.channelY = y
+    usedChannels.add(c)
+    if (y > maxChannelY) maxChannelY = y
+  }
+  const channelCount = usedChannels.size
+  const height = Number.isFinite(maxChannelY)
+    ? Math.max(contentBottom, maxChannelY + ROW_GAP / 2)
+    : contentBottom
+
+  const edges = []
+  for (const span of spans) {
+    const from = positions.get(span.sourceId)
+    const to = positions.get(span.targetId)
+    const x1 = from.x + from.width
+    const y1 = from.y + from.height / 2
+    const x2 = to.x - 2   /* 留 2px 贴边间隙，让箭头尖端停在卡片左边框上 */
+    const y2 = to.y + to.height / 2
+    edges.push({
+      key: span.key,
+      sourceId: span.sourceId,
+      targetId: span.targetId,
+      long: span.long,
+      d: span.long
+        ? channelPath(x1, y1, x2, y2, span.channelY)
+        : orthogonalPath(x1, y1, x2, y2),
+    })
+  }
+  return { positions, width, height, edges, channelCount }
+}
+
+function useStableGraph(nodes) {
+  const signature = JSON.stringify(nodes.map(node => [
+    node.id,
+    node.title,
+    node.prompt,
+    node.status,
+    node.dependsOn,
+  ]))
+  const ref = React.useRef(null)
+  if (!ref.current || ref.current.signature !== signature) {
+    ref.current = { signature, layout: layoutWorkflow(nodes) }
+  }
+  return ref.current
+}
+
+function edgeColor(state) {
+  if (state === 'active') return 'var(--co-running)'
+  if (state === 'complete') return 'var(--co-ok)'
+  return 'var(--co-ink-faint)'
+}
+
+/* 圆角正交走线：右出 → 到中点竖直转折 → 左进，两个转角各用一段 1/4 圆弧。
+ * 同排（y 基本相等）时退化成一条直线。
+ * 半径同时受三段可用距离约束，短边不会画出回折；列间距 COLUMN_GAP(58) 下
+ * 两段水平线各留 ~17px，视觉上足够圆润。 */
+export function orthogonalPath(x1, y1, x2, y2, radius = 12) {
+  if (Math.abs(y2 - y1) < 0.75) return `M${x1} ${y1}H${x2}`
+  const midX = x1 + (x2 - x1) / 2
+  const down = y2 > y1 ? 1 : -1
+  const r = Math.max(2, Math.min(
+    radius,
+    Math.abs(y2 - y1) / 2,
+    Math.abs(midX - x1),
+    Math.abs(x2 - midX),
+  ))
+  return [
+    `M${x1} ${y1}`,
+    `H${midX - r}`,
+    `Q${midX} ${y1} ${midX} ${y1 + down * r}`,
+    `V${y2 - down * r}`,
+    `Q${midX} ${y2} ${midX + r} ${y2}`,
+    `H${x2}`,
+  ].join(' ')
+}
+
+/* 跨列长边：右出 → 源列右侧空隙上下行 → 行间通道横移 → 目标列左侧空隙上下行 → 左进。
+ * 竖直段只落在「列与列之间的空隙」（贯穿全高、无卡片），
+ * 横向段只落在「行与行之间的通道」（横贯全图、无卡片），
+ * 两者叠加即保证连线不覆盖任何卡片，也不从卡片底下穿过。
+ * 转弯用 1/4 圆弧，半径受通道高度与可用空隙共同约束。 */
+export function channelPath(x1, y1, x2, y2, channelY, radius = 12) {
+  const leftGap = x1 + EXIT_INSET      /* 出口竖直段：贴近源列右侧 */
+  const rightGap = x2 - ENTRY_INSET    /* 入口竖直段：贴近目标列左侧 */
+  /* 通道可能位于任一端点的上方或下方（冲突下移到图底时就在下方）。
+     dir 一律取「从当前点朝向目标点」的方向，取反会让线先越过目标再折返。 */
+  const dir1 = channelY > y1 ? 1 : -1   /* y1 → channelY */
+  const dir2 = y2 > channelY ? 1 : -1   /* channelY → y2 */
+  const r = Math.max(2, Math.min(
+    radius,
+    Math.abs(y1 - channelY) / 2,
+    Math.abs(y2 - channelY) / 2,
+    Math.abs(rightGap - leftGap) / 2,
+    EXIT_INSET,
+    ENTRY_INSET,
+  ))
+  return [
+    `M${x1} ${y1}`,
+    `H${leftGap - r}`,
+    `Q${leftGap} ${y1} ${leftGap} ${y1 + dir1 * r}`,
+    `V${channelY - dir1 * r}`,
+    `Q${leftGap} ${channelY} ${leftGap + r} ${channelY}`,
+    `H${rightGap - r}`,
+    `Q${rightGap} ${channelY} ${rightGap} ${channelY + dir2 * r}`,
+    `V${y2 - dir2 * r}`,
+    `Q${rightGap} ${y2} ${rightGap + r} ${y2}`,
+    `H${x2}`,
+  ].join(' ')
+}
+
+const DependencyEdges = React.memo(function DependencyEdges({ nodes, layout, markerPrefix, signature }) {
+  const byId = new Map(nodes.map(node => [node.id, node]))
+  /* 走线几何全部由 layoutWorkflow 统一产出（含跨列长边的走廊车道分配），
+     这里只负责按节点状态着色——两处各算一套会让车道数与实际线数对不上。 */
+  const edges = []
+  for (const edge of layout.edges) {
+    const source = byId.get(edge.sourceId)
+    const target = byId.get(edge.targetId)
+    if (!source || !target) continue
+    edges.push({
+      key: edge.key,
+      d: edge.d,
+      state: target.status === 'running'
+        ? 'active'
+        : source.status === 'completed' ? 'complete' : 'waiting',
+    })
+  }
+  const reducedMotion = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+
+  return (
+    <svg
+      viewBox={`0 0 ${layout.width} ${layout.height}`}
+      width={layout.width}
+      height={layout.height}
+      aria-hidden="true"
+      style={styles.edges}
+      data-graph-signature={signature}
+    >
+      {/* 箭头：默认 markerUnits=strokeWidth 会让箭头随线宽等比放大，
+          线加粗后会变成巨块。改用 userSpaceOnUse 把箭头固定成 11px。 */}
+      <defs>
+        {['waiting', 'complete', 'active'].map(state => (
+          <marker
+            key={state}
+            id={`${markerPrefix}-${state}`}
+            viewBox="0 0 10 10"
+            refX="9.5"
+            refY="5"
+            markerWidth="9"
+            markerHeight="9"
+            markerUnits="userSpaceOnUse"
+            orient="auto-start-reverse"
+          >
+            <path d="M0 0.6L10 5L0 9.4Z" fill={edgeColor(state)} />
+          </marker>
+        ))}
+      </defs>
+      {edges.map(edge => {
+        const active = edge.state === 'active'
+        const color = edgeColor(edge.state)
+        return (
+          <g key={edge.key}>
+            {/* 曾经在活动边下垫过 10px 柔光底：并排两道时会让线糊成一坨，已去掉。
+               「正在流动」改由更亮的颜色 + 更粗的线 + 跑动虚线 + 沿线光点共同表达。 */}
+            <path
+              d={edge.d}
+              fill="none"
+              stroke={edge.state === 'waiting' ? 'var(--co-border-strong)' : color}
+              strokeWidth={active ? 2.6 : 1.9}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              markerEnd={`url(#${markerPrefix}-${edge.state})`}
+              opacity={edge.state === 'waiting' ? 0.8 : 0.78}
+            />
+            <path
+              d={edge.d}
+              fill="none"
+              stroke={color}
+              strokeWidth={active ? 3.2 : 2.4}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeDasharray="7 11"
+              opacity={active ? 1 : edge.state === 'complete' ? 0.7 : 0.5}
+            >
+              {!reducedMotion && (
+                <animate
+                  attributeName="stroke-dashoffset"
+                  from="0"
+                  to="-36"
+                  dur={active ? '1.1s' : edge.state === 'complete' ? '2.4s' : '1.8s'}
+                  repeatCount="indefinite"
+                />
+              )}
+            </path>
+            {/* 活动边上再跑一颗光点：比虚线流动更抓眼 */}
+            {active && !reducedMotion && (
+              <circle r="2.8" fill={color}>
+                <animateMotion dur="1.4s" repeatCount="indefinite" path={edge.d} />
+              </circle>
+            )}
+          </g>
+        )
+      })}
+    </svg>
+  )
+}, (previous, next) => previous.signature === next.signature && previous.markerPrefix === next.markerPrefix)
+
+function WorkflowNodeCard({ node, position, selected, onSelect }) {
+  const statusColor = node.status === 'running'
+    ? 'var(--co-running)'
+    : node.status === 'completed' ? 'var(--co-ok)' : node.status === 'failed' ? 'var(--co-error)' : 'var(--co-ink-faint)'
+  return (
+    <button
+      type="button"
+      aria-current={selected}
+      aria-label={`任务 ${node.title || node.id}，状态 ${STATUS_TEXT[node.status] || node.status}`}
+      onClick={() => onSelect(node.id)}
+      style={{
+        ...styles.nodeCard,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        borderColor: selected ? 'var(--co-ink-secondary)' : 'var(--co-border)',
+        background: selected ? 'var(--co-sunken)' : 'var(--co-raised)',
+      }}
+    >
+      <span style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+        <span aria-hidden="true" style={{ width: 6, height: 6, flex: 'none', borderRadius: '50%', background: statusColor }} />
+        <span style={styles.nodeTitle}>{node.title || node.id}</span>
+      </span>
+      <span style={styles.nodePrompt}>{node.prompt || STATUS_TEXT[node.status] || node.status}</span>
+    </button>
+  )
+}
+
+function WorkflowStats({ nodes }) {
+  const stats = { completed: 0, running: 0, failed: 0 }
+  for (const node of nodes) if (Object.hasOwn(stats, node.status)) stats[node.status] += 1
+  return (
+    <div style={styles.stats} aria-label="工作流统计">
+      <span>{nodes.length} 节点</span>
+      <span>{stats.completed} 完成</span>
+      {stats.running > 0 && <span>{stats.running} 运行</span>}
+      {stats.failed > 0 && <span>{stats.failed} 失败</span>}
+    </div>
+  )
+}
+
+export function WorkflowRail({ workflow, workflows, selectedWorkflowId, currentNodeId, listError, onSelectWorkflow, onSelectNode }) {
+  const nodes = Array.isArray(workflow?.nodes) ? workflow.nodes : []
+  const graph = useStableGraph(nodes)
+  const markerPrefix = `co-arrow-${React.useId().replace(/[^a-zA-Z0-9_-]/g, '')}`
+  const options = workflow && !workflows.some(item => item.workflowId === workflow.workflowId)
+    ? [{ workflowId: workflow.workflowId, title: workflow.title, state: workflow.state }, ...workflows]
+    : workflows
+
+  return (
+    <section style={styles.rail} aria-label="动态工作流">
+      <div style={styles.railMeta}>
+        <div style={styles.railTitleGroup}>
+          <h2 style={styles.railTitle}>{workflow?.title || '还没有工作流'}</h2>
+          <span style={styles.railSub}>
+            {workflow?.goal || (listError ? '插件服务暂时不可用，等待下轮重试' : '派发后会自动显示最新工作流')}
+          </span>
+        </div>
+        <div style={styles.railControls}>
+          {options.length > 1 && (
+            <select
+              value={selectedWorkflowId}
+              onChange={event => onSelectWorkflow(event.target.value)}
+              aria-label="选择工作流"
+              style={styles.picker}
+            >
+              {options.map(item => (
+                <option key={item.workflowId} value={item.workflowId}>
+                  {item.title || item.workflowId} · {STATE_TEXT[item.state] || item.state || ''}
+                </option>
+              ))}
+            </select>
+          )}
+          {workflow && <WorkflowStats nodes={nodes} />}
+        </div>
+      </div>
+      <div style={styles.railLanes} role="group" aria-label="任务节点">
+        {!workflow ? (
+          <div style={styles.empty}>{listError ? '无法读取工作流清单' : '等待工作流派发…'}</div>
+        ) : nodes.length === 0 ? (
+          <div style={styles.empty}>这个工作流还没有任务节点。</div>
+        ) : (
+          <div style={{ ...styles.graph, width: graph.layout.width, height: graph.layout.height }}>
+            <DependencyEdges nodes={nodes} layout={graph.layout} markerPrefix={markerPrefix} signature={graph.signature} />
+            {nodes.map(node => (
+              <WorkflowNodeCard
+                key={node.id}
+                node={node}
+                position={graph.layout.positions.get(node.id)}
+                selected={node.id === currentNodeId}
+                onSelect={onSelectNode}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+

package/client/hooks/useOrchestrateData.jsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import { orchestrateApi } from '../api.js'
+
+const POLL_INTERVAL_MS = 1500
+
+export function useOrchestrateData(initialWorkflowId = '') {
+  const [workflows, setWorkflows] = React.useState([])
+  const [workflow, setWorkflow] = React.useState(null)
+  const [selectedWorkflowId, setSelectedWorkflowId] = React.useState(initialWorkflowId)
+  const [pinned, setPinned] = React.useState(Boolean(initialWorkflowId))
+  const [loading, setLoading] = React.useState(true)
+  const [listError, setListError] = React.useState(null)
+  const [stateError, setStateError] = React.useState(null)
+  const selectedRef = React.useRef(selectedWorkflowId)
+  const pinnedRef = React.useRef(pinned)
+  const mountedRef = React.useRef(false)
+  const activeControllerRef = React.useRef(null)
+  const refreshQueuedRef = React.useRef(false)
+
+  React.useEffect(() => { selectedRef.current = selectedWorkflowId }, [selectedWorkflowId])
+  React.useEffect(() => { pinnedRef.current = pinned }, [pinned])
+
+  const refresh = React.useCallback(async () => {
+    if (!mountedRef.current || refreshQueuedRef.current) return
+    refreshQueuedRef.current = true
+    activeControllerRef.current?.abort()
+    const controller = new AbortController()
+    activeControllerRef.current = controller
+
+    try {
+      let list = null
+      try {
+        const result = await orchestrateApi.listWorkflows(controller.signal)
+        list = Array.isArray(result?.workflows) ? result.workflows : []
+        if (!mountedRef.current) return
+        setWorkflows(list)
+        setListError(null)
+      } catch (error) {
+        if (error?.name === 'AbortError' || !mountedRef.current) return
+        setListError(error.message)
+      }
+
+      let targetId = selectedRef.current
+      if (!pinnedRef.current && list) targetId = list[0]?.workflowId || ''
+      if (!targetId) {
+        if (mountedRef.current) {
+          selectedRef.current = ''
+          setSelectedWorkflowId('')
+          setWorkflow(null)
+          setStateError(null)
+        }
+        return
+      }
+
+      const snapshot = await orchestrateApi.getState(targetId, controller.signal)
+      if (!mountedRef.current) return
+      selectedRef.current = targetId
+      setSelectedWorkflowId(targetId)
+      setWorkflow(snapshot)
+      setStateError(null)
+    } catch (error) {
+      if (error?.name !== 'AbortError' && mountedRef.current) setStateError(error.message)
+    } finally {
+      if (activeControllerRef.current === controller) activeControllerRef.current = null
+      refreshQueuedRef.current = false
+      if (mountedRef.current) setLoading(false)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    mountedRef.current = true
+    refresh()
+    const timer = window.setInterval(refresh, POLL_INTERVAL_MS)
+    return () => {
+      mountedRef.current = false
+      window.clearInterval(timer)
+      activeControllerRef.current?.abort()
+    }
+  }, [refresh])
+
+  React.useEffect(() => {
+    if (!selectedWorkflowId || typeof EventSource === 'undefined') return undefined
+    const source = new EventSource(orchestrateApi.eventsUrl(selectedWorkflowId))
+    let timer = null
+    source.onmessage = () => {
+      if (timer !== null) return
+      timer = window.setTimeout(() => {
+        timer = null
+        refresh()
+      }, 80)
+    }
+    return () => {
+      if (timer !== null) window.clearTimeout(timer)
+      source.close()
+    }
+  }, [selectedWorkflowId, refresh])
+
+  const selectWorkflow = React.useCallback(workflowId => {
+    if (!workflowId) return
+    pinnedRef.current = true
+    selectedRef.current = workflowId
+    setPinned(true)
+    setSelectedWorkflowId(workflowId)
+    setWorkflow(current => current?.workflowId === workflowId ? current : null)
+    setLoading(true)
+    activeControllerRef.current?.abort()
+    refreshQueuedRef.current = false
+    window.setTimeout(refresh, 0)
+  }, [refresh])
+
+  return {
+    workflows,
+    workflow,
+    selectedWorkflowId,
+    pinned,
+    loading,
+    listError,
+    stateError,
+    refresh,
+    selectWorkflow,
+  }
+}

package/client/index.jsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import { OrchestrateWorkbench } from './components/OrchestrateWorkbench.jsx'
+import { Icon } from './components/Icons.jsx'
+import { styles } from './styles.js'
+
+/* tab 系统内的身份：右侧栏类型 id + keyed slot 的 key + 菜单项 id。
+ * 与「模块加载器 id」是两回事——后者必须等于 package.json 的 name，
+ * 由 esbuild.client.mjs 的 banner 写进 lib/client.js，两者不要混用。 */
+const TAB_ID = 'codex-orchestrate'
+const TAB_KIND = 'codex-orchestrate'
+
+const h = React.createElement
+
+function OrchestrateBody({ useTabInfo }) {
+  const { tab } = useTabInfo()
+  const urlWorkflowId = typeof location === 'undefined'
+    ? ''
+    : new URLSearchParams(location.search).get('workflowId') || ''
+  const initialWorkflowId = tab?.params?.workflowId || urlWorkflowId
+  return <OrchestrateWorkbench tabId={tab.id} initialWorkflowId={initialWorkflowId} />
+}
+
+function OrchestrateTitle() {
+  return h('span', null, 'Codex Orchestrate')
+}
+
+/* 引导页入口图标：宿主以 <Icon size={22 或 26} className={…} /> 调用。 */
+function GuideIcon({ size = 22 }) {
+  return <Icon kind="command_execution" size={size} />
+}
+
+export const inject = ['slots', 'sidebarRight', 'sidebarRightTabs']
+
+export function apply(ctx) {
+  ctx.effect(
+    () => ctx.sidebarRightTabs.register({
+      id: TAB_ID,
+      kind: TAB_KIND,
+      title: () => 'Codex Orchestrate',
+      /* 必须是 `guide` 数组，本类型才会出现在右侧栏「开始」引导页的入口列表里。
+         依据宿主 SidebarRightTabRegistry.refresh()：
+             definition.guide ?? []  →  逐条 map 后按 order 排序
+         只注册 { id, kind, title } 时引导页不会有任何入口，用户无从打开本页。
+         title / description 都被宿主按函数调用；description 仅在入口数 ≤4 时显示。 */
+      guide: [{
+        order: 100,
+        icon: GuideIcon,
+        title: () => 'Codex Orchestrate',
+        description: () => '查看 codex 工作流的 DAG 与各节点会话',
+      }],
+    }),
+    'codex-orchestrate: right tab type',
+  )
+
+  ctx.effect(
+    () => ctx.slots.inject('sidebar.right.pane.tab', () =>
+      ctx.slots.register(
+        { name: 'sidebar.right.pane.tab', key: TAB_ID },
+        OrchestrateBody,
+      ),
+    ),
+    'codex-orchestrate: right tab body',
+  )
+
+  ctx.effect(
+    () => ctx.slots.inject('sidebar.right.pane.tab.title', () =>
+      ctx.slots.register(
+        { name: 'sidebar.right.pane.tab.title', key: TAB_ID },
+        OrchestrateTitle,
+      ),
+    ),
+    'codex-orchestrate: right tab title',
+  )
+
+  ctx.effect(
+    () => ctx.slots.inject('sidebar.right.tab.menu.item', () =>
+      ctx.slots.register(
+        {
+          name: 'sidebar.right.tab.menu.item',
+          id: 'open-codex-orchestrate',
+          order: 100,
+          label: '打开 Codex Orchestrate',
+        },
+        function OpenOrchestrateMenuItem({ dismiss }) {
+          return h(
+            'button',
+            {
+              type: 'button',
+              role: 'menuitem',
+              style: styles.menuButton,
+              onClick() {
+                dismiss()
+                ctx.sidebarRight.openTab(TAB_KIND)
+              },
+            },
+            '打开 Codex Orchestrate',
+          )
+        },
+      ),
+    ),
+    'codex-orchestrate: right tab menu entry',
+  )
+}