Skip to main content

Execution UI (DAG Inspector)

Chyper's UI is execution-first: the backend emits the canonical execution truth, and the frontend renders it.

This page documents the DAG Inspector panel that shows the plan graph (nodes + edges) and allows drilldown into per-node tool logs.

Core Concepts​

  • Frames answer: "What happened?"
    • Compact, readable summaries (plan, artifacts, checkpoints).
  • Inspector answers: "How did it happen?"
    • Task activity timeline and tool logs.
    • Plan DAG snapshot (nodes + dependencies).

Plan Graph As Execution Truth​

The backend emits a plan graph snapshot (DAG) as part of plan-related events:

  • roots[]: node ids that are ready to start first.
  • nodes[]: each node includes:
    • id, title, status
    • dependsOn[] (edges)
    • tool (when the node executes a tool)
    • taskId (when available): persisted agent_tasks.id used to correlate logs
    • retry/backoff fields (when enabled): retryCount, maxRetries, backoffMs, nextRetryAt

The DAG Inspector renders this snapshot directly. It does not try to infer dependencies client-side.

Per-Node Tool Logs (taskId Correlation)​

Tool activities/logs are correlated to DAG nodes via taskId:

  1. Each DAG node may carry a taskId (persisted task record id).
  2. Activity/tool envelopes emitted during execution also include taskId.
  3. The inspector groups envelopes by taskId and orders them by the DAG node order.

This provides an unambiguous "node → tool logs" drilldown.

Where It Lives In The UI​

The DAG Inspector is available in both execution presentations:

  • Chat run view: cards/frames + inspector (right sheet)
  • Execution stream view: unified stream renderer + inspector (right sheet)

In the execution stream UI, the inspector can be opened via:

  • the floating branch button (when a DAG snapshot or task activity exists)
  • the plan card's inspect control (hover the header)
  • Inspector component: apps/public/console-ui/src/components/ai/execution/ExecutionInspector.tsx
  • Plan frame card wiring: apps/public/console-ui/src/components/ai/frames/components/PlanFrameCard.tsx
  • Frame inspect UI control: apps/public/console-ui/src/components/ai/frames/BaseFrameCard.tsx
  • Execution stream integration: apps/public/console-ui/src/components/ai/streaming/ExecutionStreamContent.tsx
  • Chat run integration: apps/public/console-ui/src/components/ai/activity/AgentActivityStream.tsx