From e21d920fe369214d90ce2e2ca67556f22016130b Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 19 Mar 2026 15:35:40 +0100
Subject: [PATCH] fix: enable starring for Routes tree and top-level Agents
 nodes

- Routes tree nodes now have starrable: true at both app and route levels
- Add starred Routes group to the starred section
- Fix missing starred collection for top-level agent application nodes
- Fix agent starred path from /agents/:id to /agents/:appId/:id

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/design-system/layout/Sidebar/Sidebar.tsx | 50 ++++++++++++++++++--
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/design-system/layout/Sidebar/Sidebar.tsx b/src/design-system/layout/Sidebar/Sidebar.tsx
index ecb9b84..74d34e8 100644
--- a/src/design-system/layout/Sidebar/Sidebar.tsx
+++ b/src/design-system/layout/Sidebar/Sidebar.tsx
@@ -72,7 +72,7 @@ function buildRouteTreeNodes(apps: SidebarApp[]): SidebarTreeNode[] {
       icon: <StatusDot variant={app.health} />,
       badge: `${app.routes.length} routes`,
       path: `/routes/${app.id}`,
-      starrable: false,
+      starrable: true,
       starKey: `routes:${app.id}`,
       children: app.routes.map((route) => ({
         id: `routestat:${app.id}:${route.id}`,
@@ -81,7 +81,7 @@ function buildRouteTreeNodes(apps: SidebarApp[]): SidebarTreeNode[] {
         icon: <span className={styles.routeArrow}>&#9656;</span>,
         badge: formatCount(route.exchangeCount),
         path: `/routes/${app.id}/${route.id}`,
-        starrable: false,
+        starrable: true,
       })),
     }))
 }
@@ -118,7 +118,7 @@ interface StarredItem {
   label: string
   icon?: React.ReactNode
   path: string
-  type: 'application' | 'route' | 'agent'
+  type: 'application' | 'route' | 'agent' | 'routestat'
   parentApp?: string
 }
 
@@ -147,18 +147,51 @@ function collectStarredItems(apps: SidebarApp[], starredIds: Set<string>): Starr
         })
       }
     }
+    const agentsAppKey = `agents:${app.id}`
+    if (starredIds.has(agentsAppKey)) {
+      items.push({
+        starKey: agentsAppKey,
+        label: app.name,
+        icon: <StatusDot variant={app.health} />,
+        path: `/agents/${app.id}`,
+        type: 'agent',
+      })
+    }
     for (const agent of app.agents) {
       const key = `${app.id}:${agent.id}`
       if (starredIds.has(key)) {
         items.push({
           starKey: key,
           label: agent.name,
-          path: `/agents/${agent.id}`,
+          path: `/agents/${app.id}/${agent.id}`,
           type: 'agent',
           parentApp: app.name,
         })
       }
     }
+    // Routes tree starred items
+    const routesAppKey = `routes:${app.id}`
+    if (starredIds.has(routesAppKey)) {
+      items.push({
+        starKey: routesAppKey,
+        label: app.name,
+        icon: <StatusDot variant={app.health} />,
+        path: `/routes/${app.id}`,
+        type: 'routestat',
+      })
+    }
+    for (const route of app.routes) {
+      const routeKey = `routes:${app.id}:${route.id}`
+      if (starredIds.has(routeKey)) {
+        items.push({
+          starKey: routeKey,
+          label: route.name,
+          path: `/routes/${app.id}/${route.id}`,
+          type: 'routestat',
+          parentApp: app.name,
+        })
+      }
+    }
   }
 
   return items
@@ -287,6 +320,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
   const starredApps = starredItems.filter((i) => i.type === 'application')
   const starredRoutes = starredItems.filter((i) => i.type === 'route')
   const starredAgents = starredItems.filter((i) => i.type === 'agent')
+  const starredRouteStats = starredItems.filter((i) => i.type === 'routestat')
   const hasStarred = starredItems.length > 0
 
   // For exchange detail pages, use the reveal path for sidebar selection so
@@ -477,6 +511,14 @@ export function Sidebar({ apps, className }: SidebarProps) {
                   onRemove={toggleStar}
                 />
               )}
+              {starredRouteStats.length > 0 && (
+                <StarredGroup
+                  label="Routes"
+                  items={starredRouteStats}
+                  onNavigate={navigate}
+                  onRemove={toggleStar}
+                />
+              )}
             </div>
           </div>
         )}