feat: drill-down into sub-routes with breadcrumb navigation

Double-click a DIRECT or SEDA node to navigate into that route's
diagram. Breadcrumbs show the route stack and allow clicking back
to any level. Escape key goes back one level.

Route ID resolution handles camelCase endpoint URIs mapping to
kebab-case route IDs (e.g. direct:callGetProduct → call-get-product)
using the catalog's known route IDs.

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

ui/src/pages/DevDiagram/DevDiagram.tsx

@@ -33,6 +33,14 @@ export default function DevDiagram() {
     return { apps: appArr, routes: filtered };
   }, [catalog, selectedApp]);
 
+  // All route IDs for the selected app (for drill-down resolution)
+  const knownRouteIds = useMemo(() => {
+    if (!catalog || !selectedApp) return new Set<string>();
+    const app = (catalog as Array<{ appId: string; routes?: Array<{ routeId: string }> }>)
+      .find(a => a.appId === selectedApp);
+    return new Set((app?.routes ?? []).map(r => r.routeId));
+  }, [catalog, selectedApp]);
+
   // Mock node configs for testing
   const nodeConfigs = useMemo(() => {
     const map = new Map<string, NodeConfig>();
@@ -85,6 +93,7 @@ export default function DevDiagram() {
               onNodeSelect={setSelectedNodeId}
               onNodeAction={handleNodeAction}
               nodeConfigs={nodeConfigs}
+              knownRouteIds={knownRouteIds}
             />
           ) : (
             <div className={styles.placeholder}>