+
+
+
+
+
{isEditing ? (
+ ) : showGraph ? (
+
+
+
) : (
)}
diff --git a/apps/web/src/app/(authenticated)/knowledge/stats/page.tsx b/apps/web/src/app/(authenticated)/knowledge/stats/page.tsx
new file mode 100644
index 0000000..2de8af3
--- /dev/null
+++ b/apps/web/src/app/(authenticated)/knowledge/stats/page.tsx
@@ -0,0 +1,5 @@
+import { StatsDashboard } from "@/components/knowledge";
+
+export default function KnowledgeStatsPage() {
+ return
;
+}
diff --git a/apps/web/src/components/knowledge/EntryGraphViewer.tsx b/apps/web/src/components/knowledge/EntryGraphViewer.tsx
new file mode 100644
index 0000000..915278a
--- /dev/null
+++ b/apps/web/src/components/knowledge/EntryGraphViewer.tsx
@@ -0,0 +1,293 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { fetchEntryGraph } from "@/lib/api/knowledge";
+import Link from "next/link";
+
+interface GraphNode {
+ id: string;
+ slug: string;
+ title: string;
+ summary: string | null;
+ tags: Array<{
+ id: string;
+ name: string;
+ slug: string;
+ color: string | null;
+ }>;
+ depth: number;
+}
+
+interface GraphEdge {
+ id: string;
+ sourceId: string;
+ targetId: string;
+ linkText: string;
+}
+
+interface EntryGraphResponse {
+ centerNode: GraphNode;
+ nodes: GraphNode[];
+ edges: GraphEdge[];
+ stats: {
+ totalNodes: number;
+ totalEdges: number;
+ maxDepth: number;
+ };
+}
+
+interface EntryGraphViewerProps {
+ slug: string;
+ initialDepth?: number;
+}
+
+export function EntryGraphViewer({ slug, initialDepth = 1 }: EntryGraphViewerProps) {
+ const [graphData, setGraphData] = useState
(null);
+ const [depth, setDepth] = useState(initialDepth);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [selectedNode, setSelectedNode] = useState(null);
+
+ const loadGraph = useCallback(async () => {
+ try {
+ setIsLoading(true);
+ setError(null);
+ const data = await fetchEntryGraph(slug, depth);
+ setGraphData(data as EntryGraphResponse);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "Failed to load graph");
+ } finally {
+ setIsLoading(false);
+ }
+ }, [slug, depth]);
+
+ useEffect(() => {
+ void loadGraph();
+ }, [loadGraph]);
+
+ const handleDepthChange = (newDepth: number) => {
+ setDepth(newDepth);
+ };
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+
+ if (error || !graphData) {
+ return (
+
+
Error loading graph
+
{error}
+
+ {/* Toolbar */}
+
+
+
+ Graph View
+
+
+ {stats.totalNodes} nodes • {stats.totalEdges} connections
+
+
+
+
+
+
+ {[1, 2, 3].map((d) => (
+
+ ))}
+
+
+
+
+ {/* Graph Visualization - Simple List View */}
+
+
+ {/* Center Node */}
+
+
+ setSelectedNode(centerNode)}
+ isSelected={selectedNode?.id === centerNode.id}
+ />
+
+
+
+ {/* Nodes by Depth */}
+ {Object.entries(nodesByDepth)
+ .filter(([d]) => d !== "0")
+ .sort(([a], [b]) => Number(a) - Number(b))
+ .map(([depthLevel, depthNodes]) => (
+
+
+ Depth {depthLevel} ({depthNodes.length} {depthNodes.length === 1 ? "node" : "nodes"})
+
+
+ {depthNodes.map((node) => (
+ setSelectedNode(node)}
+ isSelected={selectedNode?.id === node.id}
+ connections={getNodeConnections(node.id, edges)}
+ />
+ ))}
+
+
+ ))}
+
+
+
+ {/* Selected Node Details */}
+ {selectedNode && (
+
+
+
+
+ {selectedNode.title}
+
+ {selectedNode.summary && (
+
+ {selectedNode.summary}
+
+ )}
+ {selectedNode.tags.length > 0 && (
+
+ {selectedNode.tags.map((tag) => (
+
+ {tag.name}
+
+ ))}
+
+ )}
+
+
+ View Full Entry →
+
+
+
+
+
+
+ )}
+
+
+
+
+ {node.title}
+
+ {node.summary && (
+
+ {node.summary}
+
+ )}
+ {node.tags.length > 0 && (
+
+ {node.tags.slice(0, 3).map((tag) => (
+
+ {tag.name}
+
+ ))}
+ {node.tags.length > 3 && (
+
+ +{node.tags.length - 3}
+
+ )}
+
+ )}
+ {connections && (
+
+ {connections.incoming} incoming • {connections.outgoing} outgoing
+
+ )}
+
+
+
+ Error loading statistics: {error}
+
+ );
+ }
+
+ const { overview, mostConnected, recentActivity, tagDistribution } = stats;
+
+ return (
+
+
+
+ Knowledge Base Statistics
+
+
+ Back to Entries
+
+
+
+ {/* Overview Cards */}
+
+
+
+
+
+
+ {/* Two Column Layout */}
+
+ {/* Most Connected Entries */}
+
+
+ Most Connected Entries
+
+
+ {mostConnected.slice(0, 10).map((entry) => (
+
+
+
+ {entry.title}
+
+
+ {entry.incomingLinks} incoming • {entry.outgoingLinks} outgoing
+
+
+
+
+ {entry.totalConnections}
+
+
+
+ ))}
+ {mostConnected.length === 0 && (
+
+ No connections yet
+
+ )}
+
+
+
+ {/* Recent Activity */}
+
+
+ Recent Activity
+
+
+ {recentActivity.slice(0, 10).map((entry) => (
+
+
+
+ {entry.title}
+
+
+ {new Date(entry.updatedAt).toLocaleDateString()} •{" "}
+ {entry.status.toLowerCase()}
+
+
+
+ ))}
+ {recentActivity.length === 0 && (
+
+ No recent activity
+
+ )}
+
+
+
+
+ {/* Tag Distribution */}
+
+
+ Tag Distribution
+
+
+ {tagDistribution.slice(0, 12).map((tag) => (
+
+
+ {tag.color && (
+
+ )}
+
+ {tag.name}
+
+
+
+ {tag.entryCount}
+
+
+ ))}
+ {tagDistribution.length === 0 && (
+
+ No tags yet
+
+ )}
+
+
+
+
+
+
{title}
+
{value}
+
{subtitle}
+
+
{icon}
+
+