feat(web): wire knowledge pages to real API data (#476)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/knowledge/EntryList.tsx

@@ -1,6 +1,7 @@
 import type { KnowledgeEntryWithTags } from "@mosaic/shared";
 import { EntryCard } from "./EntryCard";
 import { BookOpen } from "lucide-react";
+import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
 
 interface EntryListProps {
   entries: KnowledgeEntryWithTags[];
@@ -20,18 +21,22 @@ export function EntryList({
   if (isLoading) {
     return (
       <div className="flex justify-center items-center p-12">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-        <span className="ml-3 text-gray-600">Loading entries...</span>
+        <MosaicSpinner size={36} label="Loading entries..." />
       </div>
     );
   }
 
   if (entries.length === 0) {
     return (
-      <div className="text-center p-12 bg-white rounded-lg shadow-sm border border-gray-200">
-        <BookOpen className="w-12 h-12 text-gray-400 mx-auto mb-3" />
-        <p className="text-lg text-gray-700 font-medium">No entries found</p>
-        <p className="text-sm text-gray-500 mt-2">
+      <div
+        className="text-center p-12 rounded-lg border"
+        style={{ background: "var(--surface)", borderColor: "var(--border)" }}
+      >
+        <BookOpen className="w-12 h-12 mx-auto mb-3" style={{ color: "var(--text-muted)" }} />
+        <p className="text-lg font-medium" style={{ color: "var(--text-muted)" }}>
+          No entries found
+        </p>
+        <p className="text-sm mt-2" style={{ color: "var(--text-muted)" }}>
           Try adjusting your filters or create a new entry
         </p>
       </div>

apps/web/src/components/knowledge/KnowledgeGraphViewer.tsx

@@ -16,6 +16,7 @@ import {
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { fetchKnowledgeGraph } from "@/lib/api/knowledge";
+import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
 import ELK from "elkjs/lib/elk.bundled.js";
 
 // PDA-friendly status colors from CLAUDE.md
@@ -376,10 +377,7 @@ export function KnowledgeGraphViewer({
   if (isLoading) {
     return (
       <div className="flex items-center justify-center h-screen">
-        <div
-          data-testid="loading-spinner"
-          className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"
-        />
+        <MosaicSpinner size={48} label="Loading knowledge graph..." />
       </div>
     );
   }
@@ -387,11 +385,14 @@ export function KnowledgeGraphViewer({
   if (error || !graphData) {
     return (
       <div className="flex flex-col items-center justify-center h-screen p-8">
-        <div className="text-red-500 text-xl font-semibold mb-2">Error Loading Graph</div>
+        <div className="text-xl font-semibold mb-2" style={{ color: "var(--danger)" }}>
+          Error Loading Graph
+        </div>
         <div className="text-sm text-gray-500 dark:text-gray-400">{error}</div>
         <button
           onClick={loadGraph}
-          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          className="mt-4 px-4 py-2 rounded text-white"
+          style={{ background: "var(--danger)" }}
         >
           Retry
         </button>

apps/web/src/components/knowledge/StatsDashboard.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { fetchKnowledgeStats } from "@/lib/api/knowledge";
+import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
 import Link from "next/link";
 
 interface KnowledgeStats {
@@ -61,13 +62,20 @@ export function StatsDashboard(): React.JSX.Element {
   if (isLoading) {
     return (
       <div className="flex items-center justify-center p-12">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
+        <MosaicSpinner size={36} label="Loading statistics..." />
       </div>
     );
   }
 
   if (error || !stats) {
-    return <div className="p-8 text-center text-red-500">Error loading statistics: {error}</div>;
+    return (
+      <div className="p-8 text-center">
+        <p className="font-medium mb-2" style={{ color: "var(--danger)" }}>
+          Error loading statistics
+        </p>
+        <p className="text-sm text-gray-500 dark:text-gray-400">{error}</p>
+      </div>
+    );
   }
 
   const { overview, mostConnected, recentActivity, tagDistribution } = stats;