[Feat/UI]: Implement Collapsible Grouping Controls Matrix for Multi-Region Infrastructure Trees

Problem

When observing hundreds of distinct tenant pipelines running asynchronously across multi-region edge nodes, listing all available worker targets and active checkpoint files configurations inside a flat single viewport layout creates noticed UI clutter and drops operational tracking visibility.

Proposed Solution

Develop and assemble an interactive, collapsible tree hierarchy layout inside /dashboard/components/CollapsibleClusterTree.tsx utilizing Next.js and Tailwind CSS utility state triggers.

• Group running systems variables systematically by Cloud Provider Region, localized cluster targets, and individual active worker paths.
• Embed clean, lightweight toggle buttons allowing operators to collapse nominal processing grids seamlessly and expand explicit failure tracks loop timelines during active failover recovery events.
• Animate visual state shifts smoothly with minimalist CSS transitions to maintain high-velocity execution lines.

Alternatives

• Static flat log lists tracking text entries linearly, which triggers severe visual cognitive friction under complex infrastructure surges.

Use Case

Empowers system administrators to collapse background clutter easily and target localized container or proxy drop zones cleanly down to exact data frames parameters.

Additional Notes

Ensure all navigation hooks track correctly inside modular frontend folders architectures. Please follow our core open-source contributing workflow.

Start by reading dashboard/components/CollapsibleClusterTree.tsx and the surrounding dashboard navigation to understand the existing component structure and hooks. Done means the UI groups worker targets by region, cluster, and worker path, supports collapsing and expanding branches, and shows smooth state transitions while preserving navigation behavior.