feat: add interactive ProcessDiagram SVG component (sub-project 1/3)

New interactive route diagram component with SVG rendering using
server-computed ELK layout coordinates. TIBCO BW5-inspired top-bar
card node style with zoom/pan, hover toolbars, config badges, and
error handler sections below the main flow.

Backend: add direction query parameter (LR/TB) to diagram render
endpoints, defaulting to left-to-right layout.

Frontend: 14-file ProcessDiagram component in ui/src/components/
with DiagramNode, CompoundNode, DiagramEdge, ConfigBadge, NodeToolbar,
ErrorSection, ZoomControls, and supporting hooks. Dev test page at
/dev/diagram for validation.

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

ui/src/router.tsx

@@ -20,6 +20,7 @@ const DatabaseAdminPage = lazy(() => import('./pages/Admin/DatabaseAdminPage'));
 const OpenSearchAdminPage = lazy(() => import('./pages/Admin/OpenSearchAdminPage'));
 const AppConfigPage = lazy(() => import('./pages/Admin/AppConfigPage'));
 const SwaggerPage = lazy(() => import('./pages/Swagger/SwaggerPage'));
+const DevDiagram = lazy(() => import('./pages/DevDiagram/DevDiagram'));
 
 function SuspenseWrapper({ children }: { children: React.ReactNode }) {
   return (
@@ -63,6 +64,7 @@ export const router = createBrowserRouter([
             ],
           },
           { path: 'api-docs', element: <SuspenseWrapper><SwaggerPage /></SuspenseWrapper> },
+          { path: 'dev/diagram', element: <SuspenseWrapper><DevDiagram /></SuspenseWrapper> },
         ],
       },
     ],