cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity

[P2] Sidebar consolidation & tab-awareness #108

New Issue
Closed
opened 2026-04-01 22:53:56 +02:00 by claude · 2 comments
claude commented 2026-04-01 22:53:56 +02:00
Owner
Copy Link

Parent Epic

#100

Problem

The sidebar shows the same 4 applications three times (under Applications, Agents, Routes). With only 4 apps this already fills the entire sidebar with repetitive content. As the number of apps grows, this becomes unmanageable.

Current State (screenshot: ux-audit/01-exchanges-list.png)

NAVIGATION
▼ APPLICATIONS
  ● backend-app     748
  ● caller-app      194
  ● quarkus-app     419
  ● sample-app      749

▼ AGENTS
  ● backend-app   3/3 live
  ● caller-app    2/2 live
  ● quarkus-app   1/1 live
  ● sample-app    1/1 live

▼ ROUTES
  ● backend-app   6 routes
  ● caller-app    4 routes
  ● quarkus-app   12 routes
  ● sample-app    24 routes

Proposed Solutions

Option A: Unified Tree (Recommended)

Single tree with apps as parents, routes + agents as children:

NAVIGATION
▼ backend-app                   ● 748
    ▶ Routes (6)
    ▶ Agents (3/3 live)
▼ caller-app                    ● 194
    ▶ Routes (4)
    ▶ Agents (2/2 live)
▶ quarkus-app                   ● 419
▶ sample-app                    ● 749

Expanding an app shows its routes and agents. Much more compact.

Option B: Tab-Aware Sidebar

Show different sidebar content depending on the active tab:

Active Tab Sidebar Shows
Exchanges Applications with exchange counts
Dashboard Applications with health status
Runtime Applications with agent status (live/stale/dead)
Logs Applications with log level indicators
Admin Hide navigation sidebar or show admin-specific nav

Option C: Collapsible Sections (Quick Win)

Keep current structure but collapse Agents and Routes by default. Only expand the section relevant to the current tab. This is the least disruptive change.

Additional Ideas

  • Starred/pinned apps: Star icon already exists in the sidebar — add a "Starred" section at the top for quick access
  • Search filter: The sidebar filter input exists — make sure it works across all sections
  • Health indicators: Show a colored dot next to each app summarizing overall health (worst-of agents + routes)
  • Collapse memory: Remember which sections/apps are expanded per user (localStorage)

Recommendation

Start with Option C (quick win — collapse by default), then evaluate Option A for a later iteration. Option A is a bigger change but significantly better for scale.

Acceptance Criteria

  • Sidebar sections collapse to reduce visual noise
  • Current tab influences which section is expanded by default
  • Starred apps appear at the top for quick access
  • Sidebar state persists across page loads (localStorage)
  • Admin pages optionally hide the navigation sidebar
## Parent Epic #100 ## Problem The sidebar shows the same 4 applications three times (under Applications, Agents, Routes). With only 4 apps this already fills the entire sidebar with repetitive content. As the number of apps grows, this becomes unmanageable. ## Current State (screenshot: `ux-audit/01-exchanges-list.png`) ``` NAVIGATION ▼ APPLICATIONS ● backend-app 748 ● caller-app 194 ● quarkus-app 419 ● sample-app 749 ▼ AGENTS ● backend-app 3/3 live ● caller-app 2/2 live ● quarkus-app 1/1 live ● sample-app 1/1 live ▼ ROUTES ● backend-app 6 routes ● caller-app 4 routes ● quarkus-app 12 routes ● sample-app 24 routes ``` ## Proposed Solutions ### Option A: Unified Tree (Recommended) Single tree with apps as parents, routes + agents as children: ``` NAVIGATION ▼ backend-app ● 748 ▶ Routes (6) ▶ Agents (3/3 live) ▼ caller-app ● 194 ▶ Routes (4) ▶ Agents (2/2 live) ▶ quarkus-app ● 419 ▶ sample-app ● 749 ``` Expanding an app shows its routes and agents. Much more compact. ### Option B: Tab-Aware Sidebar Show different sidebar content depending on the active tab: | Active Tab | Sidebar Shows | |-----------|---------------| | Exchanges | Applications with exchange counts | | Dashboard | Applications with health status | | Runtime | Applications with agent status (live/stale/dead) | | Logs | Applications with log level indicators | | Admin | Hide navigation sidebar or show admin-specific nav | ### Option C: Collapsible Sections (Quick Win) Keep current structure but collapse Agents and Routes by default. Only expand the section relevant to the current tab. This is the least disruptive change. ## Additional Ideas - **Starred/pinned apps:** Star icon already exists in the sidebar — add a "Starred" section at the top for quick access - **Search filter:** The sidebar filter input exists — make sure it works across all sections - **Health indicators:** Show a colored dot next to each app summarizing overall health (worst-of agents + routes) - **Collapse memory:** Remember which sections/apps are expanded per user (localStorage) ## Recommendation Start with **Option C** (quick win — collapse by default), then evaluate **Option A** for a later iteration. Option A is a bigger change but significantly better for scale. ## Acceptance Criteria - [ ] Sidebar sections collapse to reduce visual noise - [ ] Current tab influences which section is expanded by default - [ ] Starred apps appear at the top for quick access - [ ] Sidebar state persists across page loads (localStorage) - [ ] Admin pages optionally hide the navigation sidebar
claude added the uiux labels 2026-04-01 22:53:56 +02:00
claude commented 2026-04-01 23:11:14 +02:00
Author
Owner
Copy Link

Design Specification

Quick win (Option C): Collapse Agents and Routes sections by default. Auto-expand based on active tab: Exchanges/Dashboard → expand Applications, Runtime → expand Agents.

localStorage key: cameleer:sidebar-state storing collapsed/expanded state per section and starred apps.

Starred apps section at top with star toggle on hover. Starred apps duplicated (quick access + main list).

Future Option A reference: unified tree with apps as parents, routes + agents as children.

## Design Specification **Quick win (Option C)**: Collapse Agents and Routes sections by default. Auto-expand based on active tab: Exchanges/Dashboard → expand Applications, Runtime → expand Agents. localStorage key: `cameleer:sidebar-state` storing collapsed/expanded state per section and starred apps. Starred apps section at top with star toggle on hover. Starred apps duplicated (quick access + main list). Future Option A reference: unified tree with apps as parents, routes + agents as children.
claude commented 2026-04-03 18:19:00 +02:00
Author
Owner
Copy Link

Resolved by the composable sidebar migration (2026-04-02). Implemented:

  • Unified tree with collapsible sections (localStorage-backed)
  • Tab-aware accordion (admin section expands/collapses based on active page)
  • Icon-rail collapse mode
  • Admin pages separated from operational sidebar
Resolved by the composable sidebar migration (2026-04-02). Implemented: - Unified tree with collapsible sections (localStorage-backed) - Tab-aware accordion (admin section expands/collapses based on active page) - Icon-rail collapse mode - Admin pages separated from operational sidebar
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
Accessibility (a11y) improvements
 bug
Something isn't working correctly
 cleanup
Code cleanup, dead code removal, refactoring
 epic
Epic: groups related issues
 feature
New functionality
 pmf
Product-market fit: critical for first market offer
 route-diagram
Route diagram page and execution overlay
 security
Authentication, authorization, RBAC
 ui
Frontend / React UI
 ux
UX/usability improvements
No Label ui ux
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claude
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: cameleer/cameleer-server#108
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?