Skip to content

feat: hierarchy UI — org chart tree visualization - #107

Merged
aterrylu merged 1 commit into
mainfrom
terry/hierarchy-ui
Apr 3, 2026
Merged

feat: hierarchy UI — org chart tree visualization#107
aterrylu merged 1 commit into
mainfrom
terry/hierarchy-ui

Conversation

@aterrylu

@aterrylu aterrylu commented Apr 3, 2026

Copy link
Copy Markdown
Owner

Summary

  • Org chart panel — top-down tree visualization using react-organizational-chart with glassmorphism cards, gradient accent borders (blue→purple for working, green→teal for idle), and glow effects on active agents
  • Sidebar integration — ORG CHART section in sidebar matching AGENTS/PROJECTS style, with "View hierarchy" toggle
  • Error handling — distinguishes "no agents" from "server error" / "cannot reach server" with auto-retry indicator

Visual design

State Card style
Working Blue→purple gradient top accent, blur glow, italic status
Running (idle) Green→teal gradient top accent, subtle glow
Stopped Dim borders, muted text

Files

File Changes
HierarchyPanel.tsx (new) Tree panel with react-organizational-chart, agent cards, status resolution, error states
Sidebar.tsx ORG CHART section with view toggle
SessionViewManager.tsx "hierarchy" view mode rendering
Header.tsx Removed header button (moved to sidebar)
Codicon.tsx Added type-hierarchy icon
store.ts setViewMode action, "hierarchy" in view mode union, persistence guard (hierarchy is transient)
dashboard/package.json Added react-organizational-chart dependency

Test plan

  • Biome lint clean (44 files)
  • Dev server tested locally — tree renders with live agent status
  • Hierarchy view mode toggle works from sidebar
  • Close button returns to terminal view
  • Error state shows when server is unreachable
  • Hierarchy view not persisted across page reloads (transient)
  • Dependency in correct package.json (dashboard, not root)

🤖 Generated with Claude Code

@aterrylu
aterrylu marked this pull request as ready for review April 3, 2026 09:04

async function fetchChart() {
try {
const res = await fetch("/api/org");

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

🟢 Suggestion

Problem: When a polling refresh fails (server error or network hiccup), setError(...) fires but setChart is not reset. Since HierarchyContent renders the error state before checking chart.length, the previously-loaded tree disappears entirely during transient failures.

Why it matters: With a 5-second poll interval, a single blip causes the user to lose their tree view momentarily and see an error. For a monitoring panel this is jarring — stale data is almost always preferable to a blank error screen.

Suggested fix:

// Show stale data + a non-blocking error banner instead of hiding the chart.
// In HierarchyContent, swap the error check order:
if (chart.length > 0 && error) {
  // render tree AND a dismissible warning banner at the top
}
if (error && chart.length === 0) {
  // only show full error state when there is nothing to show
}

Or simpler: keep chart populated on error, and render a small toast/banner overlay rather than replacing the full panel.

@nox-0x nox-0x left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Clean, well-structured hierarchy panel. Cancellation logic in the polling hook is correct, the transient view-mode guard in the store is a nice touch, and the error/empty states are thoughtfully separated. Left one non-blocking suggestion: stale chart data should be shown alongside a transient error rather than replaced by it, which would make the panel more resilient to brief network hiccups. Good to merge.

Add an org chart panel to the dashboard sidebar using react-organizational-chart.

- HierarchyPanel: top-down tree with glassmorphism cards, gradient accent
  borders, status indicators, and glow effects for active agents
- Sidebar ORG CHART section: "View hierarchy" toggle matching AGENTS/PROJECTS style
- viewMode "hierarchy" in store (transient — not persisted across reloads)
- Proper error states: distinguishes "no agents" from "server error"
- Agent status correctly resolved via session ID cross-reference
- type-hierarchy codicon added
- Dependency placed in dashboard package.json (not root)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@aterrylu
aterrylu force-pushed the terry/hierarchy-ui branch from bd4ab53 to 13fd72b Compare April 3, 2026 09:25
@aterrylu
aterrylu merged commit d4f2c90 into main Apr 3, 2026
1 check passed
@aterrylu
aterrylu deleted the terry/hierarchy-ui branch April 3, 2026 09:25
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