feat: hierarchy UI — org chart tree visualization - #107
Conversation
|
|
||
| async function fetchChart() { | ||
| try { | ||
| const res = await fetch("/api/org"); |
There was a problem hiding this comment.
🟢 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
left a comment
There was a problem hiding this comment.
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>
bd4ab53 to
13fd72b
Compare
Summary
react-organizational-chartwith glassmorphism cards, gradient accent borders (blue→purple for working, green→teal for idle), and glow effects on active agentsVisual design
Files
HierarchyPanel.tsx(new)react-organizational-chart, agent cards, status resolution, error statesSidebar.tsxSessionViewManager.tsx"hierarchy"view mode renderingHeader.tsxCodicon.tsxtype-hierarchyiconstore.tssetViewModeaction,"hierarchy"in view mode union, persistence guard (hierarchy is transient)dashboard/package.jsonreact-organizational-chartdependencyTest plan
🤖 Generated with Claude Code