diff --git a/ui/src/api/queries/diagrams.ts b/ui/src/api/queries/diagrams.ts
index 1d276557..c9a35163 100644
--- a/ui/src/api/queries/diagrams.ts
+++ b/ui/src/api/queries/diagrams.ts
@@ -1,6 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../client';
 
+interface DiagramLayout {
+  width?: number;
+  height?: number;
+  nodes?: Array<{ id?: string; label?: string; type?: string; x?: number; y?: number; width?: number; height?: number }>;
+  edges?: Array<{ from?: string; to?: string }>;
+}
+
 export function useDiagramLayout(contentHash: string | null) {
   return useQuery({
     queryKey: ['diagrams', 'layout', contentHash],
@@ -10,22 +17,22 @@ export function useDiagramLayout(contentHash: string | null) {
         headers: { Accept: 'application/json' },
       });
       if (error) throw new Error('Failed to load diagram layout');
-      return data!;
+      return data as DiagramLayout;
     },
     enabled: !!contentHash,
   });
 }
 
-export function useDiagramByRoute(group: string | undefined, routeId: string | undefined) {
+export function useDiagramByRoute(application: string | undefined, routeId: string | undefined) {
   return useQuery({
-    queryKey: ['diagrams', 'byRoute', group, routeId],
+    queryKey: ['diagrams', 'byRoute', application, routeId],
     queryFn: async () => {
       const { data, error } = await api.GET('/diagrams', {
-        params: { query: { group: group!, routeId: routeId! } },
+        params: { query: { group: application!, routeId: routeId! } },
       });
       if (error) throw new Error('Failed to load diagram for route');
       return data!;
     },
-    enabled: !!group && !!routeId,
+    enabled: !!application && !!routeId,
   });
 }