Graph of recommendations in control panel

infrastructure/control-panel/.npmrc

@@ -1 +1,2 @@
-engine-strict=true
+# vis-network required node < 22
+engine-strict=false

infrastructure/control-panel/package.json

@@ -52,6 +52,7 @@
 		"flowbite-svelte-icons": "^2.2.1",
 		"lowdb": "^7.0.1",
 		"lucide-svelte": "^0.561.0",
-		"tailwind-merge": "^3.0.2"
+		"tailwind-merge": "^3.0.2",
+		"vis-network": "^10.0.2"
 	}
 }

infrastructure/control-panel/src/routes/+layout.svelte

@@ -12,7 +12,8 @@
 	const navLinks = [
 		{ label: 'Dashboard', href: '/' },
 		{ label: 'Monitoring', href: '/monitoring' },
-		{ label: 'Actions', href: '/actions' }
+		{ label: 'Actions', href: '/actions' },
+		{ label: 'Visualizer', href: '/visualizer' }
 	];
 
 	const isActive = (href: string) => (href === '/' ? pageUrl === '/' : pageUrl.startsWith(href));

infrastructure/control-panel/src/routes/api/references/+server.ts

@@ -0,0 +1,29 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+
+export const GET: RequestHandler = async () => {
+	const baseUrl = env.EREPUTATION_BASE_URL || 'http://localhost:8765';
+
+	try {
+		const controller = new AbortController();
+		const timeout = setTimeout(() => controller.abort(), 5000);
+		const response = await fetch(`${baseUrl}/api/references/all`, {
+			headers: env.VISUALIZER_API_KEY ? { 'x-visualizer-key': env.VISUALIZER_API_KEY } : {},
+			signal: controller.signal,
+		});
+		clearTimeout(timeout);
+
+
+		if (!response.ok) {
+			console.error('eReputation API error:', response.status, response.statusText);
+			return json({ error: 'Failed to fetch references', references: [] }, { status: 500 });
+		}
+
+		const data = await response.json();
+		return json(data);
+	} catch (error) {
+		console.error('Error fetching references from eReputation:', error);
+		return json({ error: 'Failed to connect to eReputation API', references: [] }, { status: 500 });
+	}
+};

infrastructure/control-panel/src/routes/visualizer/+page.server.ts

@@ -0,0 +1,30 @@
+import type { PageServerLoad } from './$types';
+
+export interface ReferenceEdge {
+	id: string;
+	content: string;
+	numericScore: number | null;
+	referenceType: string;
+	status: string;
+	targetType: string; // "user" | "group" | "platform"
+	targetId: string;
+	targetName: string;
+	author: {
+		id: string;
+		ename: string;
+		name: string;
+	};
+	createdAt: string;
+}
+
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	try {
+		const response = await fetch('/api/references');
+		const data = await response.json();
+		return { references: (data.references ?? []) as ReferenceEdge[] };
+	} catch (error) {
+		console.error('Error loading references for visualizer:', error);
+		return { references: [] as ReferenceEdge[] };
+	}
+};