feat(client): replace LiveActivity/AgentTree with force-directed graph view#1
Merged
Postmodum37 merged 9 commits intomainfrom Feb 8, 2026
Merged
feat(client): replace LiveActivity/AgentTree with force-directed graph view#1Postmodum37 merged 9 commits intomainfrom
Postmodum37 merged 9 commits intomainfrom
Conversation
…h view Migrate the main activity panel from a static tree to an interactive force-directed graph powered by d3-force. Agent nodes show real-time status with animated edges and collision avoidance. Remove legacy LiveActivity and AgentTree components along with their tests. - Add AgentNode, AnimatedEdge, useForceLayout, collide utilities - Wire GraphView into App.tsx as the primary activity display - Default ActivityStream to collapsed to spotlight the graph - Add graph-specific E2E tests and update smoke/SSE specs - Clean up lint warnings across touched client files Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-Claude) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Apply 17/19 review findings from 6 specialized agents: - Extract helper functions to nodeHelpers.ts (fix react-refresh lint) - Remove proOptions.hideAttribution (license compliance) - Switch AnimatedEdge/index.ts to named exports - Add NaN guard and drag reheat in useForceLayout - Merge dual change-detection and collapse init logic - Add runtime guard in AgentNode for invalid data - O(1) parent lookup via Map in GraphView - Stagger initial node positions instead of (0,0) - Harden formatRelativeTime for null/undefined/invalid - Extract GraphShell to DRY three render branches - Fix collide.ts force.initialize signature - Add unit tests for collide, nodeHelpers, formatRelativeTime - Update client AGENTS.md for new graph/ structure
Remove tabs, agent filters, burst grouping, and swimlane view. Show only agent spawns and completions as a clean chronological log. Deleted: BurstRow, AgentSwimlane, ActivityRow, MilestoneRow, burstGrouping utility, and all associated tests (-2,457 lines).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
LiveActivityandAgentTreecomponents for a force-directed graph view (GraphView,AgentNode,AnimatedEdge) powered byd3-forcewith collision avoidance and animated edgesLiveActivity.tsx,AgentTree.tsx, and their unit tests (~930 lines removed), wireGraphViewas the primary activity panel inApp.tsxActivityStreamto collapsed to spotlight the graph, add CSS pulse/glow animations, addgraph.spec.tsE2E suite, updatesmoke.spec.tsandsse.spec.tsselectors, clean lint warnings across touched filesVerification
All checks passed locally:
Notes
LiveActivityandAgentTreecomponents are fully removed — the graph-based view is now the sole main panelsrc/client/src/components/graph/(AgentNode, AnimatedEdge, collide, useForceLayout, GraphView)d3-forceandd3-quadtreeadded as dependencies