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/api/queries/diagrams.ts

@@ -12,19 +12,32 @@ export interface DiagramNode {
   children?: DiagramNode[];
 }
 
-interface DiagramLayout {
+export interface DiagramEdge {
+  sourceId: string;
+  targetId: string;
+  label?: string;
+  points: number[][];
+}
+
+export interface DiagramLayout {
   width?: number;
   height?: number;
   nodes?: DiagramNode[];
-  edges?: Array<{ from?: string; to?: string }>;
+  edges?: DiagramEdge[];
 }
 
-export function useDiagramLayout(contentHash: string | null) {
+export function useDiagramLayout(
+  contentHash: string | null,
+  direction: 'LR' | 'TB' = 'LR',
+) {
   return useQuery({
-    queryKey: ['diagrams', 'layout', contentHash],
+    queryKey: ['diagrams', 'layout', contentHash, direction],
     queryFn: async () => {
       const { data, error } = await api.GET('/diagrams/{contentHash}/render', {
-        params: { path: { contentHash: contentHash! } },
+        params: {
+          path: { contentHash: contentHash! },
+          query: { direction },
+        },
         headers: { Accept: 'application/json' },
       });
       if (error) throw new Error('Failed to load diagram layout');
@@ -34,15 +47,19 @@ export function useDiagramLayout(contentHash: string | null) {
   });
 }
 
-export function useDiagramByRoute(application: string | undefined, routeId: string | undefined) {
+export function useDiagramByRoute(
+  application: string | undefined,
+  routeId: string | undefined,
+  direction: 'LR' | 'TB' = 'LR',
+) {
   return useQuery({
-    queryKey: ['diagrams', 'byRoute', application, routeId],
+    queryKey: ['diagrams', 'byRoute', application, routeId, direction],
     queryFn: async () => {
       const { data, error } = await api.GET('/diagrams', {
-        params: { query: { application: application!, routeId: routeId! } },
+        params: { query: { application: application!, routeId: routeId!, direction } },
       });
       if (error) throw new Error('Failed to load diagram for route');
-      return data!;
+      return data as DiagramLayout;
     },
     enabled: !!application && !!routeId,
   });

ui/src/api/schema.d.ts

@@ -3642,6 +3642,8 @@ export interface operations {
             query: {
                 application: string;
                 routeId: string;
+                /** @description Layout direction: LR (left-to-right) or TB (top-to-bottom) */
+                direction?: "LR" | "TB";
             };
             header?: never;
             path?: never;
@@ -3671,7 +3673,10 @@ export interface operations {
     };
     renderDiagram: {
         parameters: {
-            query?: never;
+            query?: {
+                /** @description Layout direction: LR (left-to-right) or TB (top-to-bottom) */
+                direction?: "LR" | "TB";
+            };
             header?: never;
             path: {
                 contentHash: string;