Skip to content

feat(workflows): AgentGraph with live cards and a hub layout; TraceWorkspace Timeline | Graph toggle (0.139.0) - #442

Merged
drewstone merged 17 commits into
mainfrom
feat/agent-graph
Oct 26, 2026
Merged

drewstone merged 17 commits into
mainfrom
feat/agent-graph

Conversation

@drewstone

@drewstone drewstone commented Oct 24, 2026 •

Copy link
Copy Markdown
Contributor

Adds AgentGraph to @tangle-network/sandbox-ui/workflows. It draws a multi-agent run's topology for the Discovery run page's left pane (op-company:agent-record slice 2).

  • nodes (label, role, harness, model, status, turn, cost, tokens) and edges (spawn | message | delegation). Spawn edges lay out as an ELK layered tree. Message and delegation edges are dashed quadratic curves drawn over the tree, with a ×n badge when count > 1, and they never drive layout.
  • A parent with 4 or more leaf workers packs them into a grid inside one frame. The frame's caption counts running, waiting and failed workers. The column count is chosen per canvas (the highest fit zoom, capped at 1, with ties going to the closest aspect), so 1 + 16 agents still reads at 360 px and on a phone.
  • Status is shown as a colour, a glyph and a word. The selected card wears the workflow graph's selection outline. Click, or Enter/Space on a focused card, calls onSelect. It fits on mount and again when the tree changes; a resize refits only until the reader pans. Two-finger scroll pans and pinch zooms. Hover takes 150 ms (brand --motion-control) and is disabled under reduced motion. It uses tokens only and follows light and dark.
  • It reuses NodeMark/modelBrandFor, STATUS_COLOR, statusBorder, edgeColor, RESTING_* and the React Flow chrome. It extracts useColorMode/motionAllowed/SELECTION_OUTLINE into canvas-theme.ts and loadElk into elk-loader.ts, so both graphs share them and the agent chunk does not pull in the workflow model.
  • Lazy like WorkflowGraphLazy: the shared retryImport plus GraphErrorBoundary, with a plain agent-list fallback.
  • live (lead 22:2xZ, Drew's live agent canvas): fixed-size live cards that loop an ASCII figure of the agent's activity, with its thinking line, its last three events, model, effort, time alive and commits; settled agents shrink to a chip; new spawns grow in.
  • layout="hub": the run drawn around its orchestrator, with You, agents and tools. A tool without a provider draws a generic glyph instead of looking up a logo by its id, which missed every logo CDN. The canvas makes room for its last row's name.
  • TraceWorkspace gets a Timeline | Graph toggle (lead REVIEW-8 item 2). The Graph view builds the AgentGraph from the trace at the waterfall's cursor, so both views show the same moment. agentCards adds the live fields a trace cannot carry. Selecting an agent opens the same conversation drawer as the Timeline.
  • @tangle-network/charts moves to ^0.21.4 for dev and peer: ^0.20.3 excluded the 0.21.x the run page serves, and 0.21.4 keeps host brand marks inside agent rows.
  • Proof: a new run-graph-view browser flow (switch to Graph, 5 agent cards, select verifier, its drawer opens); 56 new baselines; the hub stories wait for their own canvas.
  • Releases 0.139.0.

Preconditions before merge: the Storybook renders of workflows/AgentGraph at 1512x945 and 390x844 have been reviewed, the new story baselines are committed, and the merge gate (typecheck, build, test, test:package, visual) is green on a Beelink.

Precondition status (op-company:sandbox-ui, 2026-10-26):

  • Renders reviewed: 26 captures at 1512x945 (dark and light, every workflows/AgentGraph, AgentGraph hub and Run/TraceWorkspace story; dev gate beelink1-a7dd11f1a49d792f230fb2ff593e2837) and the 390x844 baselines. The review found three defects, each fixed above: hub label clipped, logo CDN misses, and host marks overflowing rows (charts feat: consume @tangle-network/ui via re-export bridge; ship 0.15.0 #36).
  • Baselines committed in 4cd497c.
  • Merge gate: run by beelink-gate --merge on this head.

Run ID: run_dc4269900ecbb231f70274ad2ff71824

@drewstone

Copy link
Copy Markdown
Contributor Author

Owner: op-company:agent-record (author lane; the body names run_dc4269900ecbb231f70274ad2ff71824; live)
Blocker: draft; preconditions named in the body are unmet. The Storybook renders of workflows/AgentGraph at 1512x945 and 390x844 have not been reviewed, the story baselines are not committed, and the Beelink merge gate (typecheck, build, test, test:package, visual) is not green.
Next action: agent-record reviews the two renders, commits the baselines, runs the Beelink gate at the current head, then marks this ready and merges (it releases 0.137.0).

@drewstone

Copy link
Copy Markdown
Contributor Author

Owner change: this is no longer op-company:agent-record's. On 2026-10-24 21:55Z the lead gave the agent-UI components (TraceWaterfall, DecisionCard, AgentGraph) to the sandbox-ui lane, and agent-record stopped building them. The Discovery run page has no consumer of AgentGraph: its agents use @tangle-network/charts FlowWaterfall (agents view, outcome colors) as of agent-record 0.76.0. The sandbox-ui lane decides whether AgentGraph ships or this closes.

@drewstone

Copy link
Copy Markdown
Contributor Author

Owner: op-company:sandbox-ui (the lead gave it the agent-UI components on 2026-10-24 21:55Z; agent-record confirmed the handoff above)
Blocker: draft, and the Discovery run page no longer consumes AgentGraph (it uses @tangle-network/charts FlowWaterfall as of agent-record 0.76.0). The merge preconditions named in the body (render review, story baselines, Beelink gate) are still unmet.
Next action: sandbox-ui decides whether AgentGraph has a consumer. If it does, it finishes the named preconditions and merges. If not, it closes this with that reason.

@drewstone
drewstone marked this pull request as ready for review October 26, 2026 12:15
tangletools
tangletools previously approved these changes Oct 26, 2026

@tangletools tangletools left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Auto-approved PR — 4cd497c1

Blanket team auto-approval is intentional. This is not a code review.
No automated review runs on this PR. This approval rests on the rule above alone.

tangletools · auto-approval · reason: blanket_auto_approve · 2026-10-26T12:15:26Z

@drewstone drewstone changed the title feat(workflows): AgentGraph draws a multi-agent run's topology feat(workflows): AgentGraph with live cards and a hub layout; TraceWorkspace Timeline | Graph toggle (0.139.0) Oct 26, 2026
tangletools
tangletools previously approved these changes Oct 26, 2026

@tangletools tangletools left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Auto-approved PR — 4004b1b4

Blanket team auto-approval is intentional. This is not a code review.
No automated review runs on this PR. This approval rests on the rule above alone.

tangletools · auto-approval · reason: blanket_auto_approve · 2026-10-26T15:29:24Z

…ile-host-editor.spec.mjs checks the rendered opacity on focus
tangletools
tangletools previously approved these changes Oct 26, 2026

@tangletools tangletools left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Auto-approved PR — b11ccbc5

Blanket team auto-approval is intentional. This is not a code review.
No automated review runs on this PR. This approval rests on the rule above alone.

tangletools · auto-approval · reason: blanket_auto_approve · 2026-10-26T15:34:29Z

@tangletools tangletools left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Auto-approved PR — 67743888

Blanket team auto-approval is intentional. This is not a code review.
No automated review runs on this PR. This approval rests on the rule above alone.

tangletools · auto-approval · reason: blanket_auto_approve · 2026-10-26T15:51:20Z

@drewstone
drewstone merged commit 8efa088 into main Oct 26, 2026
1 check failed
drewstone added a commit to drewstone/agent-record that referenced this pull request Oct 26, 2026
…ts peer ^0.21.4) (#293)

sandbox-ui 0.139.0

Adopts @tangle-network/sandbox-ui 0.139.0 (tangle-network/sandbox-ui#442): AgentGraph with live agent cards in ./workflows, a Timeline | Graph toggle in ./run's TraceWorkspace, and a charts peer of ^0.21.4 (no warning with our 0.21.6). Version bump only; the run page adopts the new views separately.

Run ID: run_dc4269900ecbb231f70274ad2ff71824
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants