fix: DevDiagram page uses time range and correct catalog shape

The dev diagram page was calling useRouteCatalog() without time range
params (returned empty) and parsing the wrong response shape (expected
flat {application, routeId} but catalog returns {appId, routes[]}).

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

ui/src/pages/DevDiagram/DevDiagram.tsx

@@ -1,11 +1,16 @@
 import { useMemo, useState } from 'react';
+import { useGlobalFilters } from '@cameleer/design-system';
 import { ProcessDiagram } from '../../components/ProcessDiagram';
 import type { NodeConfig, NodeAction } from '../../components/ProcessDiagram';
 import { useRouteCatalog } from '../../api/queries/catalog';
 import styles from './DevDiagram.module.css';
 
 export default function DevDiagram() {
-  const { data: catalog } = useRouteCatalog();
+  const { timeRange } = useGlobalFilters();
+  const { data: catalog } = useRouteCatalog(
+    timeRange.start.toISOString(),
+    timeRange.end.toISOString(),
+  );
 
   const [selectedApp, setSelectedApp] = useState('');
   const [selectedRoute, setSelectedRoute] = useState('');
@@ -13,20 +18,17 @@ export default function DevDiagram() {
   const [direction, setDirection] = useState<'LR' | 'TB'>('LR');
   const [actionLog, setActionLog] = useState<string[]>([]);
 
-  // Extract unique applications and routes from catalog
+  // Extract applications and routes from catalog
+  // Catalog shape: Array<{ appId, routes: [{ routeId }] }>
   const { apps, routes } = useMemo(() => {
     if (!catalog) return { apps: [] as string[], routes: [] as string[] };
-    const appSet = new Set<string>();
-    const routeList: { app: string; routeId: string }[] = [];
-    for (const entry of catalog as Array<{ application?: string; routeId?: string }>) {
-      if (entry.application) appSet.add(entry.application);
-      if (entry.application && entry.routeId) {
-        routeList.push({ app: entry.application, routeId: entry.routeId });
-      }
-    }
-    const appArr = Array.from(appSet).sort();
+    const appArr = (catalog as Array<{ appId: string; routes?: Array<{ routeId: string }> }>)
+      .map(a => a.appId)
+      .sort();
     const filtered = selectedApp
-      ? routeList.filter(r => r.app === selectedApp).map(r => r.routeId)
+      ? (catalog as Array<{ appId: string; routes?: Array<{ routeId: string }> }>)
+          .filter(a => a.appId === selectedApp)
+          .flatMap(a => (a.routes || []).map(r => r.routeId))
       : [];
     return { apps: appArr, routes: filtered };
   }, [catalog, selectedApp]);