Hermes Switch UI — Workflow Run Sequence

From clicking a workflow card to seeing live node status in the run detail panel

User browser Launch Wizard launch-wizard.tsx Workflow Engine dag-executor.ts Projector node-runs-projector.ts SSE bus /api/workflow-events Run Detail Panel run-detail-panel.tsx 1 click workflow card wizard opens 2 Step 1 — Plan review summary · inputs · run context Step 2 — Route DAG node graph preview · agent hints Step 3 — Schedule run-now or cron trigger Step 4 — Confirm final review before submit 3 click "Submit as Workflow Run" 4 POST /api/workflow-runs 200 { runId } starts DAG 5 for each node (topo order) emit node_started emit node_output (streaming) emit node_completed / node_failed executor.ts runs node: command → Claude SDK call bash/script → child_process approval → pause + wait subgraph → recurse cancel → mark run cancelled loop → iterate until done bash → shell subprocess 6 write node_run relay to SSE subscribers 7 SSE event chunk 8 update UI node badges · output · status

Launch wizard (4 steps)

  • • Step 1 Plan — review summary, inputs, context
  • • Step 2 Route — DAG graph preview + agent hints
  • • Step 3 Schedule — run-now or cron trigger
  • • Step 4 Confirm — final review before POST

Engine + Projector

  • • DAG executor runs nodes in topological order
  • • Emits node_started / node_output / node_completed
  • • Projector writes node_runs rows after each event
  • • Approval nodes pause execution waiting for user

SSE + Run detail panel

  • • use-workflow-events hook opens EventSource
  • • Each SSE chunk updates Zustand run state
  • • Node badges flip: pending → running → done
  • • Output bodies expandable per node

Hermes Switch UI • workflow run sequence