feat(#119): expose route state in catalog API and sidebar/dashboard

Add routeState field to RouteSummary DTO (null for started, 'stopped'
or 'suspended' for non-default states). Sidebar shows stop/pause icons
and state badge for affected routes in both Apps and Routes sections.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/components/sidebar-utils.ts

@@ -9,6 +9,7 @@ export interface SidebarRoute {
   id: string;
   name: string;
   exchangeCount: number;
+  routeState?: 'stopped' | 'suspended';
 }
 
 export interface SidebarAgent {
@@ -71,6 +72,8 @@ export function buildAppTreeNodes(
   apps: SidebarApp[],
   statusDot: (health: string) => ReactNode,
   chevron: () => ReactNode,
+  stopIcon?: () => ReactNode,
+  pauseIcon?: () => ReactNode,
 ): SidebarTreeNode[] {
   return apps.map((app) => ({
     id: app.id,
@@ -83,8 +86,14 @@ export function buildAppTreeNodes(
     children: app.routes.map((r) => ({
       id: `${app.id}/${r.id}`,
       label: r.name,
-      icon: chevron(),
-      badge: formatCount(r.exchangeCount),
+      icon: r.routeState === 'stopped' && stopIcon
+        ? stopIcon()
+        : r.routeState === 'suspended' && pauseIcon
+          ? pauseIcon()
+          : chevron(),
+      badge: r.routeState
+        ? `${r.routeState.toUpperCase()} \u00b7 ${formatCount(r.exchangeCount)}`
+        : formatCount(r.exchangeCount),
       path: `/apps/${app.id}/${r.id}`,
       starrable: true,
       starKey: `route:${app.id}/${r.id}`,
@@ -128,6 +137,8 @@ export function buildRouteTreeNodes(
   apps: SidebarApp[],
   statusDot: (health: string) => ReactNode,
   chevron: () => ReactNode,
+  stopIcon?: () => ReactNode,
+  pauseIcon?: () => ReactNode,
 ): SidebarTreeNode[] {
   return apps.map((app) => ({
     id: `route:${app.id}`,
@@ -138,8 +149,14 @@ export function buildRouteTreeNodes(
     children: app.routes.map((r) => ({
       id: `route:${app.id}/${r.id}`,
       label: r.name,
-      icon: chevron(),
-      badge: formatCount(r.exchangeCount),
+      icon: r.routeState === 'stopped' && stopIcon
+        ? stopIcon()
+        : r.routeState === 'suspended' && pauseIcon
+          ? pauseIcon()
+          : chevron(),
+      badge: r.routeState
+        ? `${r.routeState.toUpperCase()} \u00b7 ${formatCount(r.exchangeCount)}`
+        : formatCount(r.exchangeCount),
       path: `/routes/${app.id}/${r.id}`,
     })),
   }));