Skip to content

feat(frontend): render task output turns as a tree, nest subagent events - #167

Merged
xmiksay merged 1 commit into
masterfrom
164-task-detail-render-output-turns-as-a-tree-nest-sub
Jul 13, 2026
Merged

xmiksay merged 1 commit into
masterfrom
164-task-detail-render-output-turns-as-a-tree-nest-sub

Conversation

@xmiksay

@xmiksay xmiksay Bot commented Jul 13, 2026

Copy link
Copy Markdown

Summary

  • Render the task detail output-turns view as a tree: subagent (Claude Code Task-tool child) events nest under the tool_use block that spawned them, recursively, instead of rendering flat.
  • useTurns.ts gains splitEventTree(events) — a single forward pass over the seq-ordered stream that harvests every tool_use id and buckets events into top (main timeline) vs children.get(parentToolUseId), with an orphan fallback to top when the parent is out of view.
  • Filtering to top before groupIntoTurns fixes a side-effect bug for free: a replayed subagent plain-text user event could previously open a phantom turn.
  • useTaskDetail wires eventTree/turns/childEvents; TaskDetail.vue → TurnTimeline.vue → ClaudeStream.vue forward the childEvents map down. ClaudeStream.vue recurses on itself (self-referencing <script setup> SFC) to render nested subagent · N events blocks; pending approvals are not forwarded to nested instances so the approval widget stays on the (unresolved) spawning Task row.
  • TurnTimeline.vue's "N events" summary now adds the turn's transitive subagent descendant count so the number doesn't appear to shrink once children are pulled out.
  • Updated docs/architecture.md for the new splitEventTree behavior and the ClaudeStream.vue nesting.

Frontend-only — the backend already persists and delivers parent_tool_use_id verbatim; nothing else changed.

Test plan

  • npm run typecheck (frontend)
  • npm test (frontend, vitest) — new splitEventTree unit tests (top/orphan/nested/grandchild/phantom-turn-fix) in useTurns.test.ts, plus a ClaudeStream.test.ts mount test for the nested subagent block
  • make verify (Rust lint+test on both DB backends, frontend typecheck+test) — all green

Closes #164

What: split the flat stream-json event list on `parent_tool_use_id` and
render subagent (Task-tool child) events nested under the tool_use that
spawned them, recursively, instead of flattening them into the main
timeline.

Why: subagent events were shown inline at the top level, so a task that
spawned Task-tool subagents rendered a confusing flat interleave of main
and subagent work; a replayed subagent user prompt could also open a
phantom turn since groupIntoTurns didn't check parent_tool_use_id.

How: `splitEventTree` (useTurns.ts) does a single forward pass bucketing
events into `top` and a `children: Map<parentId, events>`, tracking seen
tool_use ids so grandchildren resolve via lookup; `useTaskDetail` feeds
`tree.top` to `groupIntoTurns` (fixing the phantom-turn bug for free) and
exposes `childEvents`; `TurnTimeline`/`ClaudeStream` forward the map down,
with `ClaudeStream` recursing on itself (self-referencing `<script setup>`
SFC) to render nested `<details>` blocks per subagent, without passing
`pending` to nested instances so the approval widget stays on the
spawning row.
@xmiksay
xmiksay merged commit 8cae5c7 into master Jul 13, 2026
2 checks passed
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.

Task detail: render output turns as a tree — nest subagent events under their spawning tool_use (parent_tool_use_id)

1 participant