fix: sort sidebar entries alphanumerically

Applications, routes within each app, and agents within each app
are now sorted by name using localeCompare.

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

ui/src/components/LayoutShell.tsx

@@ -108,23 +108,30 @@ function LayoutContent() {
 
   const sidebarApps: SidebarApp[] = useMemo(() => {
     if (!catalog) return [];
-    return catalog.map((app: any) => ({
+    const cmp = (a: string, b: string) => a.localeCompare(b);
-      id: app.appId,
+    return [...catalog]
-      name: app.appId,
+      .sort((a: any, b: any) => cmp(a.appId, b.appId))
-      health: app.health as 'live' | 'stale' | 'dead',
+      .map((app: any) => ({
-      exchangeCount: app.exchangeCount,
+        id: app.appId,
-      routes: (app.routes || []).map((r: any) => ({
+        name: app.appId,
-        id: r.routeId,
+        health: app.health as 'live' | 'stale' | 'dead',
-        name: r.routeId,
+        exchangeCount: app.exchangeCount,
-        exchangeCount: r.exchangeCount,
+        routes: [...(app.routes || [])]
-      })),
+          .sort((a: any, b: any) => cmp(a.routeId, b.routeId))
-      agents: (app.agents || []).map((a: any) => ({
+          .map((r: any) => ({
-        id: a.id,
+            id: r.routeId,
-        name: a.name,
+            name: r.routeId,
-        status: a.status as 'live' | 'stale' | 'dead',
+            exchangeCount: r.exchangeCount,
-        tps: a.tps,
+          })),
-      })),
+        agents: [...(app.agents || [])]
-    }));
+          .sort((a: any, b: any) => cmp(a.name, b.name))
+          .map((a: any) => ({
+            id: a.id,
+            name: a.name,
+            status: a.status as 'live' | 'stale' | 'dead',
+            tps: a.tps,
+          })),
+      }));
   }, [catalog]);
 
   const catalogData = useMemo(