@sakki_chin/dsh-codex-orchestrate 1.0.0

package/client/components/ConversationThread.jsx

@@ -0,0 +1,396 @@
+import React from 'react'
+import { XMarkdown } from '@ant-design/x-markdown'
+import { Icon, Spinner } from './Icons.jsx'
+import { styles } from '../styles.js'
+
+const markdownComponents = {
+  p: props => <p {...props} style={{ margin: '0 0 10px' }} />,
+  a: props => <a {...props} style={{ color: 'var(--co-running)' }} />,
+  pre: props => <pre {...props} style={{ ...styles.code, margin: '10px 0' }} />,
+  code: props => <code {...props} style={{ padding: '1px 4px', borderRadius: 4, background: 'var(--co-code)', fontFamily: 'var(--co-font-mono)', fontSize: '.92em' }} />,
+  blockquote: props => <blockquote {...props} style={{ margin: '10px 0', paddingLeft: 10, borderLeft: '2px solid var(--co-border-strong)', color: 'var(--co-ink-secondary)' }} />,
+  h1: props => <h1 {...props} style={{ margin: '16px 0 7px', fontSize: 19, lineHeight: 1.35 }} />,
+  h2: props => <h2 {...props} style={{ margin: '16px 0 7px', fontSize: 16, lineHeight: 1.35 }} />,
+  h3: props => <h3 {...props} style={{ margin: '14px 0 6px', fontSize: 14, lineHeight: 1.35 }} />,
+  ul: props => <ul {...props} style={{ margin: '0 0 10px', paddingLeft: 21 }} />,
+  ol: props => <ol {...props} style={{ margin: '0 0 10px', paddingLeft: 21 }} />,
+  table: props => <div style={{ overflowX: 'auto' }}><table {...props} style={{ width: '100%', margin: '10px 0', borderCollapse: 'collapse', fontSize: 12 }} /></div>,
+  th: props => <th {...props} style={{ padding: '6px 8px', border: '1px solid var(--co-border)', textAlign: 'left', background: 'var(--co-raised)' }} />,
+  td: props => <td {...props} style={{ padding: '6px 8px', border: '1px solid var(--co-border)', textAlign: 'left' }} />,
+}
+
+function legacyTurns(node) {
+  if (Array.isArray(node?.turns) && node.turns.length) return node.turns
+  if (!node) return []
+  return [{
+    id: 'legacy_turn',
+    kind: 'initial',
+    input: node.prompt,
+    status: node.status,
+    items: node.items || [],
+    finalMessage: node.finalMessage,
+    usage: node.usage,
+    error: node.error,
+    startedAt: node.startedAt,
+    finishedAt: node.finishedAt,
+  }]
+}
+
+function orderedTurnEntries(turn) {
+  const entries = Array.isArray(turn.items) ? [...turn.items] : []
+  if (turn.finalMessage && !entries.some(entry => entry.type === 'agent_message' && entry.text === turn.finalMessage)) {
+    entries.push({ id: `${turn.id || 'turn'}-final`, type: 'agent_message', text: turn.finalMessage, live: false })
+  }
+  return entries
+}
+
+function timelineSegments(turn) {
+  const segments = []
+  let processItems = []
+  let processIndex = 0
+  const flush = () => {
+    if (!processItems.length) return
+    segments.push({
+      kind: 'process',
+      key: `process:${processItems[0]?.id || processIndex}`,
+      items: processItems,
+      index: processIndex,
+    })
+    processItems = []
+    processIndex += 1
+  }
+  for (const entry of orderedTurnEntries(turn)) {
+    if (!['agent_message', 'error'].includes(entry.type)) {
+      processItems.push(entry)
+      continue
+    }
+    flush()
+    segments.push({ kind: entry.type, key: `entry:${entry.id || segments.length}`, entry })
+  }
+  flush()
+  return segments
+}
+
+function processSummary(entries, active) {
+  if (active) {
+    const current = [...entries].reverse().find(item => item.live || item.status === 'in_progress') || entries.at(-1)
+    if (current?.type === 'reasoning') return '正在思考…'
+    if (current?.type === 'command_execution') return '正在运行命令…'
+    if (current?.type === 'file_change') return '正在修改文件…'
+    if (['mcp_tool_call', 'web_search', 'todo_list'].includes(current?.type)) return '正在使用工具…'
+    return '正在执行任务…'
+  }
+  const counts = { reasoning: 0, command_execution: 0, tool: 0, file_change: 0 }
+  for (const entry of entries) {
+    if (entry.type === 'reasoning') counts.reasoning += 1
+    else if (entry.type === 'command_execution') counts.command_execution += 1
+    else if (entry.type === 'file_change') counts.file_change += 1
+    else counts.tool += 1
+  }
+  return [
+    counts.reasoning ? '已思考' : '',
+    counts.command_execution ? `运行了${counts.command_execution > 1 ? ` ${counts.command_execution} 个` : ''}命令` : '',
+    counts.tool ? `使用了${counts.tool > 1 ? ` ${counts.tool} 个` : ''}工具` : '',
+    counts.file_change ? `修改了${counts.file_change > 1 ? ` ${counts.file_change} 个` : ''}文件` : '',
+  ].filter(Boolean).join(' · ') || '查看执行过程'
+}
+
+function entryPresentation(entry) {
+  const live = Boolean(entry.live) || entry.status === 'in_progress'
+  const failed = entry.status === 'failed' || (entry.exit_code !== undefined && entry.exit_code !== 0) || Boolean(entry.error)
+  if (entry.type === 'reasoning') return { label: live ? '正在思考…' : '思考过程', body: entry.text || '（暂无思考摘要）', live, failed }
+  if (entry.type === 'command_execution') return { label: live ? '正在运行' : '已运行', meta: entry.command || '', body: entry.aggregated_output || '（无输出）', live, failed }
+  if (entry.type === 'file_change') {
+    const paths = (entry.changes || []).map(change => change.path)
+    return { label: failed ? '文件变更失败' : '已修改文件', meta: paths.length > 1 ? `${paths[0]} 等 ${paths.length} 个文件` : paths[0] || '', body: entry.changes || [], live, failed }
+  }
+  if (entry.type === 'mcp_tool_call') return { label: live ? '正在调用工具' : '已调用工具', meta: [entry.server, entry.tool].filter(Boolean).join(' · '), body: entry.error || entry.result || entry.arguments || {}, live, failed }
+  if (entry.type === 'web_search') return { label: '已搜索网页', meta: entry.query || '', live, failed }
+  if (entry.type === 'todo_list') return { label: '已更新计划', meta: `${(entry.items || []).filter(item => item.completed).length}/${(entry.items || []).length}`, body: entry.items || [], live, failed }
+  return { label: entry.type || '工具活动', body: entry, live, failed }
+}
+
+function Disclosure({ disclosureKey, expandedKeys, onToggle, summary, children, bodyStyle = styles.activityBody }) {
+  const open = expandedKeys.has(disclosureKey)
+  return (
+    <div>
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => onToggle(disclosureKey)}
+        style={{ ...styles.buttonReset, ...styles.activitySummary }}
+      >
+        {summary(open)}
+      </button>
+      {open && <div style={bodyStyle}>{children}</div>}
+    </div>
+  )
+}
+
+function ActivityBody({ entry, presentation }) {
+  if (entry.type === 'reasoning') return <div style={styles.prose}>{presentation.body}</div>
+  if (entry.type === 'command_execution') return <pre style={styles.code}>{presentation.body}</pre>
+  if (entry.type === 'file_change') {
+    return <div style={{ display: 'grid', gap: 3 }}>{presentation.body.map((change, index) => (
+      <div key={`${change.path}:${index}`} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, color: 'var(--co-ink-muted)', fontSize: 11 }}>
+        <code style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{change.path}</code>
+        <span>{change.kind}</span>
+      </div>
+    ))}</div>
+  }
+  if (entry.type === 'todo_list') {
+    return <div style={{ display: 'grid', gap: 3 }}>{presentation.body.map((item, index) => (
+      <div key={index} style={{ color: item.completed ? 'var(--co-ink-faint)' : 'var(--co-ink-muted)', fontSize: 11, textDecoration: item.completed ? 'line-through' : 'none' }}>
+        {item.completed ? '✓' : '○'} {item.text}
+      </div>
+    ))}</div>
+  }
+  return <pre style={styles.code}>{JSON.stringify(presentation.body, null, 2)}</pre>
+}
+
+function ActivityRow({ entry, rowKey, expandedKeys, onToggle }) {
+  const presentation = entryPresentation(entry)
+  const hasBody = presentation.body !== undefined
+  const line = open => (
+    <>
+      {hasBody && <Icon kind="chevron" size={12} style={{ transform: open ? 'rotate(90deg)' : 'none' }} />}
+      <Icon kind={entry.type} size={14} />
+      <span style={{ color: presentation.failed ? 'var(--co-error)' : 'var(--co-ink-secondary)', flex: 'none' }}>{presentation.label}</span>
+      {presentation.meta && <span style={styles.activityMeta}>{presentation.meta}</span>}
+      {entry.type === 'command_execution' && entry.exit_code !== undefined && <span style={{ marginLeft: 'auto', color: presentation.failed ? 'var(--co-error)' : 'var(--co-ink-faint)', fontFamily: 'var(--co-font-mono)', fontSize: 10 }}>exit {entry.exit_code}</span>}
+      {presentation.live && <Spinner size={12} />}
+    </>
+  )
+  if (!hasBody) return <div style={styles.activityRow}>{line(false)}</div>
+  return (
+    <Disclosure disclosureKey={rowKey} expandedKeys={expandedKeys} onToggle={onToggle} summary={line}>
+      <ActivityBody entry={entry} presentation={presentation} />
+    </Disclosure>
+  )
+}
+
+function ActivityGroup({ segment, workflowId, nodeId, turnId, expandedKeys, onToggle }) {
+  const groupKey = `${workflowId}/${nodeId}/${turnId}/activity/${segment.key}`
+  const active = segment.items.some(entry => entry.live || entry.status === 'in_progress')
+  const types = [...new Set(segment.items.map(entry => entry.type))]
+  const groupIcon = types.length === 1 ? types[0] : 'tool'
+  return (
+    <div data-scroll-key={`${turnId}/${segment.key}`}>
+      <Disclosure
+        disclosureKey={groupKey}
+        expandedKeys={expandedKeys}
+        onToggle={onToggle}
+        summary={open => <>
+          <Icon kind={groupIcon} size={14} />
+          <span>{processSummary(segment.items, active)}</span>
+          {active && <Spinner size={12} />}
+          <Icon kind="chevron" size={12} style={{ marginLeft: 1, transform: open ? 'rotate(90deg)' : 'none' }} />
+        </>}
+      >
+        {segment.items.map((entry, index) => (
+          <ActivityRow
+            key={entry.id || `${entry.type}:${index}`}
+            entry={entry}
+            rowKey={`${groupKey}/${entry.id || `${entry.type}:${index}`}`}
+            expandedKeys={expandedKeys}
+            onToggle={onToggle}
+          />
+        ))}
+      </Disclosure>
+    </div>
+  )
+}
+
+function MarkdownMessage({ entry, scrollKey }) {
+  return (
+    <div data-entry-id={entry.id} data-scroll-key={scrollKey} style={styles.agentMessage}>
+      <XMarkdown
+        content={String(entry.text || '')}
+        components={markdownComponents}
+        openLinksInNewTab
+        escapeRawHtml
+        disableDefaultStyles
+        style={{ color: 'var(--co-ink)', fontSize: 13, lineHeight: 1.75 }}
+        streaming={entry.live ? { hasNextChunk: true, enableAnimation: false, tail: false } : undefined}
+      />
+      {entry.live && <span aria-label="输出中" style={{ color: 'var(--co-running)' }}> ▍</span>}
+    </div>
+  )
+}
+
+function formatTokens(value) {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(value >= 10_000_000 ? 0 : 1)}M`
+  if (value >= 1000) return `${(value / 1000).toFixed(value >= 100_000 ? 0 : 1)}K`
+  return String(value)
+}
+
+function formatDuration(startedAt, finishedAt) {
+  const milliseconds = new Date(finishedAt) - new Date(startedAt)
+  if (!Number.isFinite(milliseconds) || milliseconds < 0) return ''
+  const seconds = Math.round(milliseconds / 1000)
+  if (seconds < 60) return `${seconds}秒`
+  return `${Math.floor(seconds / 60)}分 ${seconds % 60}秒`
+}
+
+function turnText(turn) {
+  const messages = (turn.items || []).filter(item => item.type === 'agent_message').map(item => item.text).filter(Boolean)
+  if (turn.finalMessage && !messages.includes(turn.finalMessage)) messages.push(turn.finalMessage)
+  return messages.join('\n\n')
+}
+
+async function copyText(text) {
+  if (navigator.clipboard?.writeText) return navigator.clipboard.writeText(text)
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+  textarea.style.position = 'fixed'
+  textarea.style.opacity = '0'
+  document.body.append(textarea)
+  textarea.select()
+  document.execCommand('copy')
+  textarea.remove()
+}
+
+function TurnActions({ turn, toast }) {
+  const text = turnText(turn)
+  const duration = turn.startedAt && turn.finishedAt ? formatDuration(turn.startedAt, turn.finishedAt) : ''
+  const input = turn.usage?.input_tokens || 0
+  const output = turn.usage?.output_tokens || 0
+  return (
+    <div style={styles.actions} aria-label="本轮操作与统计">
+      <button
+        type="button"
+        disabled={!text}
+        aria-label="复制本轮回复"
+        title="复制"
+        onClick={async () => { await copyText(text); toast('已复制本轮回复') }}
+        style={{ ...styles.buttonReset, ...styles.action, width: 26, justifyContent: 'center', opacity: text ? 1 : 0.35 }}
+      >
+        <Icon kind="copy" size={16} />
+      </button>
+      {turn.usage && <span style={styles.action} title={`输入 ${input} · 输出 ${output}`}><Icon kind="usage" size={15} />用量 {formatTokens(input + output)} tok</span>}
+      {duration && <span style={styles.action}><Icon kind="clock" size={15} />用时 {duration}</span>}
+      {turn.finishedAt && <time dateTime={turn.finishedAt} title={`完成于 ${new Date(turn.finishedAt).toLocaleString('zh-CN')}`}>{new Date(turn.finishedAt).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false })}</time>}
+    </div>
+  )
+}
+
+function ConversationTurn({ turn, workflowId, node, expandedKeys, onToggle, toast }) {
+  const segments = timelineSegments(turn)
+  const entries = orderedTurnEntries(turn)
+  const messageCount = entries.filter(entry => entry.type === 'agent_message').length
+  const errors = entries.filter(entry => entry.type === 'error')
+  return (
+    <section style={styles.turn} data-status={turn.status} data-scroll-key={`turn:${turn.id || 'turn'}`}>
+      <div style={styles.user}>{turn.input || node.prompt}</div>
+      <div style={styles.assistant}>
+        <div style={styles.stream} role="group" aria-label="Codex 输出时间线">
+          {segments.map(segment => {
+            if (segment.kind === 'process') return (
+              <ActivityGroup key={segment.key} segment={segment} workflowId={workflowId} nodeId={node.id} turnId={turn.id || 'turn'} expandedKeys={expandedKeys} onToggle={onToggle} />
+            )
+            if (segment.kind === 'agent_message') return <MarkdownMessage key={segment.key} entry={segment.entry} scrollKey={`${turn.id}/${segment.key}`} />
+            return <div key={segment.key} data-scroll-key={`${turn.id}/${segment.key}`} style={styles.agentError}>{segment.entry.message || ''}</div>
+          })}
+        </div>
+        {turn.error && !errors.some(entry => entry.message === turn.error) && <div style={styles.agentError}>{turn.error}</div>}
+        {!entries.length && ['pending', 'blocked', 'queued'].includes(turn.status) && <div style={styles.turnState}>{turn.status === 'blocked' ? '等待前置任务…' : '等待 Codex 开始…'}</div>}
+        {!messageCount && turn.status === 'running' && <div style={{ ...styles.turnState, display: 'flex', gap: 6, alignItems: 'center' }}><Spinner size={13} />Codex 正在处理…</div>}
+        {!['pending', 'blocked'].includes(turn.status) && <TurnActions turn={turn} toast={toast} />}
+      </div>
+    </section>
+  )
+}
+
+function captureViewport(container, nodeId) {
+  const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight
+  const snapshot = { nodeId, scrollTop: container.scrollTop, stickToBottom: distanceFromBottom < 80, anchorKey: null, anchorOffset: 0 }
+  if (snapshot.stickToBottom) return snapshot
+  const viewport = container.getBoundingClientRect()
+  const anchor = [...container.querySelectorAll('[data-scroll-key]')].find(candidate => {
+    const rect = candidate.getBoundingClientRect()
+    return rect.bottom > viewport.top + 1 && rect.top < viewport.bottom - 1
+  })
+  if (anchor) {
+    snapshot.anchorKey = anchor.dataset.scrollKey
+    snapshot.anchorOffset = anchor.getBoundingClientRect().top - viewport.top
+  }
+  return snapshot
+}
+
+export function ConversationThread({ workflow, node, expandedKeys, onToggleExpanded, toast }) {
+  const containerRef = React.useRef(null)
+  const threadRef = React.useRef(null)
+  const followOutputRef = React.useRef(true)
+  const pendingViewportRef = React.useRef(null)
+  const previousNodeIdRef = React.useRef(null)
+  const turns = legacyTurns(node)
+  const contentSignature = JSON.stringify(node ? {
+    id: node.id,
+    status: node.status,
+    activeTurnId: node.activeTurnId,
+    turns,
+  } : null)
+
+  React.useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container) return undefined
+    const nodeChanged = previousNodeIdRef.current !== node?.id
+    previousNodeIdRef.current = node?.id || null
+    const snapshot = pendingViewportRef.current
+    if (nodeChanged || followOutputRef.current || snapshot?.stickToBottom) {
+      container.scrollTop = container.scrollHeight
+    } else if (snapshot?.nodeId === node?.id) {
+      const anchor = snapshot.anchorKey
+        ? [...container.querySelectorAll('[data-scroll-key]')].find(item => item.dataset.scrollKey === snapshot.anchorKey)
+        : null
+      if (anchor) {
+        const currentOffset = anchor.getBoundingClientRect().top - container.getBoundingClientRect().top
+        container.scrollTop += currentOffset - snapshot.anchorOffset
+      } else {
+        container.scrollTop = snapshot.scrollTop
+      }
+    }
+    pendingViewportRef.current = null
+    return () => {
+      if (containerRef.current) pendingViewportRef.current = captureViewport(containerRef.current, node?.id)
+    }
+  }, [contentSignature, node?.id])
+
+  React.useEffect(() => {
+    if (!globalThis.ResizeObserver || !threadRef.current) return undefined
+    const observer = new ResizeObserver(() => {
+      const container = containerRef.current
+      if (container && followOutputRef.current) container.scrollTop = container.scrollHeight
+    })
+    observer.observe(threadRef.current)
+    return () => observer.disconnect()
+  }, [])
+
+  const handleScroll = event => {
+    if (!event.nativeEvent?.isTrusted) return
+    const container = event.currentTarget
+    followOutputRef.current = container.scrollHeight - container.scrollTop - container.clientHeight < 80
+  }
+
+  return (
+    <main ref={containerRef} onScroll={handleScroll} style={styles.conversation} aria-live="polite">
+      <div ref={threadRef} style={styles.thread}>
+        {!workflow && <div style={styles.empty}>工作流派发后，这里显示每个任务的 Codex 对话。</div>}
+        {workflow && !node && <div style={styles.empty}>选择一个任务查看对话。</div>}
+        {workflow && node && turns.map(turn => (
+          <ConversationTurn
+            key={turn.id || 'legacy_turn'}
+            turn={turn}
+            workflowId={workflow.workflowId}
+            node={node}
+            expandedKeys={expandedKeys}
+            onToggle={onToggleExpanded}
+            toast={toast}
+          />
+        ))}
+      </div>
+    </main>
+  )
+}
+
+export { legacyTurns, orderedTurnEntries, timelineSegments }

package/client/components/Icons.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+const paths = {
+  chevron: ['M5.5 3.5 10 8l-4.5 4.5'],
+  reasoning: ['M8 1.5a5 5 0 0 0-3.2 8.8c.5.4.8 1 .8 1.7v.5h4.8V12c0-.7.3-1.3.8-1.7A5 5 0 0 0 8 1.5Z', 'M5.8 14.5h4.4'],
+  command_execution: ['M2 2.5h12v11H2z', 'm4 5 2 2-2 2', 'M8.5 9.5H11'],
+  file_change: ['M3 1.5h6l3 3v10H3z', 'M9 1.5v3h3', 'M5 8h5M5 10.5h5'],
+  tool: ['M8 2.2a2.9 2.9 0 0 0-3.4 3.7L1.9 8.6l2 2 2.7-2.7A2.9 2.9 0 0 0 10.3 4L14 7.7l-6.3 6.3-2-2L8.4 9.3'],
+  web_search: ['M7 2a5 5 0 1 0 0 10A5 5 0 0 0 7 2Z', 'm10.8 10.8 3 3'],
+  todo_list: ['M3 4h.01M6 4h7M3 8h.01M6 8h7M3 12h.01M6 12h7'],
+  copy: ['M5.5 5.5h8v8h-8z', 'M10.5 5.5v-3h-8v8h3'],
+  usage: ['M3 4.2c0 1 2.2 1.8 5 1.8s5-.8 5-1.8-2.2-1.8-5-1.8-5 .8-5 1.8Z', 'M3 4.2v3.6c0 1 2.2 1.8 5 1.8s5-.8 5-1.8V4.2M3 7.8v3.6c0 1 2.2 1.8 5 1.8s5-.8 5-1.8V7.8'],
+  clock: ['M8 1.8a6.2 6.2 0 1 0 0 12.4A6.2 6.2 0 0 0 8 1.8Z', 'M8 4.5v3.8l2.5 1.5'],
+  send: ['M2.5 8h11M9 3.5 13.5 8 9 12.5'],
+  stop: ['M4.5 4.5h7v7h-7z'],
+  plus: ['M8 2v12M2 8h12'],
+  shield: ['M8 1.5 13 3.6v3.8c0 3.1-2 5.3-5 6.6-3-1.3-5-3.5-5-6.6V3.6L8 1.5Z'],
+}
+
+export function Icon({ kind, size = 15, style }) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.35"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ width: size, height: size, flex: 'none', ...style }}
+    >
+      {(paths[kind] || paths.tool).map((d, index) => <path d={d} key={index} />)}
+    </svg>
+  )
+}
+
+export function Spinner({ size = 16 }) {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" style={{ width: size, height: size, flex: 'none' }}>
+      <circle cx="8" cy="8" r="5.5" fill="none" stroke="var(--co-border-strong)" strokeWidth="2.5" />
+      <path d="M8 2.5a5.5 5.5 0 0 1 5.5 5.5" fill="none" stroke="var(--co-ink-secondary)" strokeWidth="2.5" strokeLinecap="round">
+        <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur=".9s" repeatCount="indefinite" />
+      </path>
+    </svg>
+  )
+}
+

package/client/components/OrchestrateWorkbench.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { useOrchestrateData } from '../hooks/useOrchestrateData.jsx'
+import { styles } from '../styles.js'
+import { Composer } from './Composer.jsx'
+import { ConversationThread } from './ConversationThread.jsx'
+import { ToastProvider, useToast } from './Toast.jsx'
+import { WorkflowRail } from './WorkflowRail.jsx'
+
+function WorkbenchContent({ initialWorkflowId, tabId }) {
+  const data = useOrchestrateData(initialWorkflowId)
+  const toast = useToast()
+  const [currentNodeId, setCurrentNodeId] = React.useState(null)
+  const [expandedKeys, setExpandedKeys] = React.useState(() => new Set())
+  const workflowId = data.workflow?.workflowId || null
+
+  React.useEffect(() => {
+    setCurrentNodeId(data.workflow?.nodes?.[0]?.id || null)
+  }, [workflowId])
+
+  React.useEffect(() => {
+    if (!data.workflow) return
+    setCurrentNodeId(current => data.workflow.nodes.some(node => node.id === current)
+      ? current
+      : data.workflow.nodes[0]?.id || null)
+  }, [data.workflow])
+
+  const currentNode = data.workflow?.nodes?.find(node => node.id === currentNodeId) || null
+  const toggleExpanded = React.useCallback(key => {
+    setExpandedKeys(current => {
+      const next = new Set(current)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }, [])
+
+  return (
+    <section style={{ ...styles.workbench, position: 'relative' }} data-tab-id={tabId} aria-busy={data.loading}>
+      <WorkflowRail
+        workflow={data.workflow}
+        workflows={data.workflows}
+        selectedWorkflowId={data.selectedWorkflowId}
+        currentNodeId={currentNodeId}
+        listError={data.listError}
+        onSelectWorkflow={data.selectWorkflow}
+        onSelectNode={setCurrentNodeId}
+      />
+      <ConversationThread
+        workflow={data.workflow}
+        node={currentNode}
+        expandedKeys={expandedKeys}
+        onToggleExpanded={toggleExpanded}
+        toast={toast}
+      />
+      <Composer workflow={data.workflow} node={currentNode} refresh={data.refresh} toast={toast} />
+      {(data.listError || data.stateError) && (
+        <div role="alert" style={{ ...styles.alert, position: 'absolute', zIndex: 5, top: 68, left: 0, right: 0, background: 'var(--co-bg)' }}>
+          {data.stateError || data.listError}
+        </div>
+      )}
+    </section>
+  )
+}
+
+export function OrchestrateWorkbench(props) {
+  return <ToastProvider><WorkbenchContent {...props} /></ToastProvider>
+}
+

package/client/components/Toast.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { styles } from '../styles.js'
+
+const ToastContext = React.createContext(() => {})
+
+export function ToastProvider({ children }) {
+  const [message, setMessage] = React.useState('')
+  const timerRef = React.useRef(null)
+  const toast = React.useCallback(text => {
+    window.clearTimeout(timerRef.current)
+    setMessage(String(text || ''))
+    timerRef.current = window.setTimeout(() => setMessage(''), 2600)
+  }, [])
+  React.useEffect(() => () => window.clearTimeout(timerRef.current), [])
+  return (
+    <ToastContext.Provider value={toast}>
+      {children}
+      {message && <div role="status" aria-live="polite" style={styles.toast}>{message}</div>}
+    </ToastContext.Provider>
+  )
+}
+
+export function useToast() {
+  return React.useContext(ToastContext)
+}
+