feat: implement R42 chat infrastructure with Anthropic API integration and custom design system

src/components/admin/KnowledgeGraph.jsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { Trash2, Edit2, Save, X, RefreshCw, AlertCircle, Plus, Link as LinkIcon } from 'lucide-react';
 import * as db from '../../lib/db';
 import { anthropicApi } from '../../lib/api';
 import Button from '../ui/Button';
+import SuggestionsQueue from './SuggestionsQueue';
 
 const KnowledgeGraph = () => {
   const svgRef = useRef(null);
@@ -19,11 +20,18 @@ const KnowledgeGraph = () => {
   const [topics, setTopics] = useState([]);
   const [relations, setRelations] = useState([]);
 
-  useEffect(() => {
+  const reloadKb = useCallback(() => {
     db.getTopics().then(setTopics);
     db.getRelations().then(setRelations);
   }, []);
 
+  useEffect(() => {
+    reloadKb();
+    const handler = () => reloadKb();
+    window.addEventListener('respellion:kb-updated', handler);
+    return () => window.removeEventListener('respellion:kb-updated', handler);
+  }, [reloadKb]);
+
   useEffect(() => {
     if (!wrapperRef.current) return;
     const { width, height } = wrapperRef.current.getBoundingClientRect();
@@ -290,6 +298,11 @@ Analyze this graph and return ONLY the optimized JSON object with this EXACT str
           )}
         </div>
 
+        {/* R42 chatbot suggestions queue */}
+        <div className="mb-6 pb-4 border-b border-bg-warm">
+          <SuggestionsQueue onApplied={reloadKb} />
+        </div>
+
         <div className="flex items-center justify-between mb-4">
           <h3 className="font-bold text-lg text-teal">Node Details</h3>
           {selectedNode && !isEditing && (