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: ,
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: ▸,
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): Starr
})
}
}
+ const agentsAppKey = `agents:${app.id}`
+ if (starredIds.has(agentsAppKey)) {
+ items.push({
+ starKey: agentsAppKey,
+ label: app.name,
+ icon: ,
+ 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: ,
+ 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 && (
+
+ )}
)}